{% extends "base.html" %}
{% block title %}Generate · mflux{% endblock %}
{% block main_class %}generate-layout{% endblock %}
{% block content %}
<form id="generate-form" class="panel form-panel" autocomplete="off" novalidate aria-busy="true">
  <div id="form-loading" class="loading-status" role="status" aria-live="polite">
    <strong id="form-loading-message">Loading models and controls…</strong>
    <small id="form-loading-hint" class="hint">The first load after starting the server may take a moment.</small>
    <progress id="form-loading-progress" aria-label="Loading command options and local files"></progress>
    <button type="button" id="form-loading-retry" class="ghost small" hidden>Reload page</button>
  </div>
  <fieldset id="generate-controls" disabled>
  <section class="field-group grid-2">
    <label class="field">
      <span class="label">Model family</span>
      <select id="command"></select>
      <small id="command-description" class="hint"></small>
    </label>

    <div class="field">
      <span class="label">Weights</span>
      <div class="segmented" id="model-source" role="radiogroup">
        <label><input type="radio" name="model-source" value="builtin" checked><span>Built-in</span></label>
        <label><input type="radio" name="model-source" value="local"><span>Local folder</span></label>
        <label><input type="radio" name="model-source" value="hf"><span>Hugging Face</span></label>
      </div>
      <select id="model-builtin" class="source-input" data-source="builtin"></select>
      <select id="model-local" class="source-input" data-source="local" hidden></select>
      <input id="model-hf" class="source-input" data-source="hf" placeholder="org/model-name" hidden>
      <small id="model-local-empty" class="hint" hidden>No local models found. Start mflux-webui with <code>--models-dir DIR</code>.</small>
    </div>
    <div id="group-model" class="grid-2 wide"></div>
  </section>

  <details class="field-group collapsible" id="lora-section">
    <summary>LoRAs <span class="summary-note" id="lora-note"></span></summary>
    <div id="lora-rows"></div>
    <datalist id="lora-options"></datalist>
    <button type="button" class="ghost small" id="add-lora">Add LoRA</button>
    <small class="hint">Choose a local LoRA, or enter a path, Hugging Face repo, <code>repo:file.safetensors</code>, or library name.</small>
  </details>

  <section class="field-group grid-2" id="group-basic"></section>

  <section class="field-group">
    <div class="grid-2">
      <label class="field">
        <span class="label">Seeds</span>
        <input id="seeds" placeholder="random" inputmode="numeric">
        <small class="hint">Comma-separated for several images. Empty picks one at random.</small>
      </label>
      <label class="field">
        <span class="label">Live preview</span>
        <select id="preview-every">
          <option value="0">Off</option>
          <option value="1">Every step</option>
          <option value="2">Every 2 steps</option>
          <option value="5">Every 5 steps</option>
          <option value="10">Every 10 steps</option>
        </select>
        <small class="hint">Each preview costs a VAE decode.</small>
      </label>
    </div>
  </section>

  <details class="field-group collapsible" id="img2img-section">
    <summary>Init image <span class="summary-note" id="img2img-note"></span></summary>
    <div class="dropzone" id="dropzone">
      <input type="file" id="init-image" accept="image/png,image/jpeg,image/webp">
      <img id="init-preview" alt="" hidden>
      <span id="dropzone-text">Drop an image or click to choose</span>
    </div>
    <div class="grid-2">
      <label class="field">
        <span class="label">Strength <output id="strength-value">0.4</output></span>
        <input type="range" id="init-strength" min="0" max="1" step="0.05" value="0.4">
      </label>
      <div class="field align-end"><button type="button" class="ghost small" id="clear-image">Remove image</button></div>
    </div>
  </details>

  <details class="field-group collapsible" id="references-section" hidden open>
    <summary>Reference images <span class="summary-note" id="references-note"></span></summary>
    <small class="hint">Add up to 10 images, in order. Refer to them as “image 1”, “image 2”, etc. in your prompt. Leave width and height empty to use the last reference's aspect ratio.</small>
    <label class="dropzone" id="references-dropzone">
      <input type="file" id="reference-images" accept="image/png,image/jpeg,image/webp" multiple>
      <span id="references-upload-text">Drop images or click to choose</span>
    </label>
    <div id="reference-list" class="reference-list"></div>
  </details>

  <details class="field-group collapsible">
    <summary>Memory</summary>
    <div id="group-memory" class="grid-2"></div>
  </details>

  <details class="field-group collapsible">
    <summary>Advanced</summary>
    <div id="group-advanced" class="grid-2"></div>
  </details>

  <div class="actions">
    <button type="submit" id="generate" class="primary">Generate</button>
    <button type="button" id="copy-command" class="ghost">Copy CLI command</button>
    <button type="button" id="reset-form" class="ghost">Reset</button>
  </div>
  <small class="hint">Generating while another job runs adds your request to the queue.</small>
  </fieldset>
  <p id="form-error" class="error" hidden></p>
  <p id="form-warnings" class="warning" hidden></p>
</form>

<section class="output-column">
  <div class="panel stage" id="stage">
    <div class="stage-empty" id="stage-empty">
      <p>Your image appears here.</p>
      <p class="hint">The first run loads the model, which can take a while. The next runs with the same model reuse it.</p>
    </div>
    <img id="stage-image" alt="" hidden>
    <div class="stage-meta" id="stage-meta" hidden>
      <div class="row">
        <strong id="job-status">Queued</strong>
        <span id="job-detail" class="muted"></span>
        <button type="button" id="cancel-job" class="ghost small danger">Cancel</button>
      </div>
      <div class="progress" aria-hidden="true"><div id="progress-bar"></div></div>
      <div id="job-results" class="thumbs"></div>
      <code id="job-command" class="command"></code>
    </div>
  </div>
  <div class="panel">
    <div class="panel-title row-between">
      <span>Recent jobs</span>
      <button type="button" id="clear-history" class="ghost small" title="Forget finished jobs, uploaded images and saved form drafts. Gallery images are kept.">Clear history</button>
    </div>
    <ul id="job-list" class="job-list"></ul>
  </div>
</section>
{% include "chat.html" %}
{% endblock %}
{% block scripts %}
<script src="/static/chat-preferences.js?v={{ static_version }}"></script>
<script src="/static/chat.js?v={{ static_version }}"></script>
<script src="/static/generate.js?v={{ static_version }}"></script>
{% endblock %}