{% 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" id="references-hint"></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" id="image-inputs-section" hidden open>
    <summary>Input images <span class="summary-note" id="image-inputs-note"></span></summary>
    <div id="image-inputs" class="grid-2"></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 %}