ui/shell.html

    <div class="app-shell">

      <!-- Header -->
      <div class="app-header">
        <div class="app-header-left">
          <div class="app-logo">__FIRE_LOGO_SVG__</div>
          <span class="app-title">Qwen-Image-Edit</span>
          <span class="app-badge">2511</span>
          <span class="app-badge fast">4-Step Fast</span>
        </div>

        <a href="https://github.com/PRITHIVSAKTHIUR/Qwen-Image-Edit-2511-LoRAs-Fast-Lazy-Load"
           target="_blank"
           class="gh-btn">
          __GITHUB_SVG__
          <span>GitHub</span>
        </a>
      </div>

      <!-- Toolbar: left actions aligned with Output label -->
      <div class="app-toolbar-row">
        <div class="app-toolbar">
          <div class="app-toolbar-actions">
            <button id="tb-upload" class="modern-tb-btn" title="Upload images">
              __UPLOAD_SVG__<span class="tb-label">Upload</span>
            </button>
            <button id="tb-remove" class="modern-tb-btn" title="Remove selected image">
              __REMOVE_SVG__<span class="tb-label">Remove</span>
            </button>
            <button id="tb-clear" class="modern-tb-btn" title="Clear all images">
              __CLEAR_SVG__<span class="tb-label">Clear All</span>
            </button>
            <div class="tb-sep"></div>
            <span id="tb-image-count" class="tb-info">No images</span>
          </div>
          <div class="upload-hint" id="upload-hint">
            <b>Upload:</b> Max 2 images &nbsp;&middot;&nbsp;
            <b>#1 Main</b> / <b>#2 Reference</b>
          </div>
        </div>
        <div class="output-toolbar">
          <div class="output-toolbar-left">
            <span class="out-title-label">Output</span>
            <span id="output-pred-dims" class="out-pred-dims" hidden></span>
          </div>
          <span id="dl-btn-output" class="out-download-btn" title="Download result">
            __DOWNLOAD_SVG__ Save
          </span>
        </div>
      </div>

      <!-- Main row -->
      <div class="app-main-row">

        <!-- Left -->
        <div class="app-main-left">

          <div id="gallery-drop-zone">
            <div id="upload-prompt" class="upload-prompt-modern">
              <div id="upload-click-area" class="upload-click-area">
                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="8" y="14" width="64" height="52" rx="6" fill="none"
                        stroke="#1E90FF" stroke-width="2" stroke-dasharray="4 3"/>
                  <polygon points="12,62 30,40 42,50 54,34 68,62"
                           fill="rgba(30,144,255,0.15)" stroke="#1E90FF" stroke-width="1.5"/>
                  <circle cx="28" cy="30" r="6"
                          fill="rgba(30,144,255,0.2)" stroke="#1E90FF" stroke-width="1.5"/>
                </svg>
                <span class="upload-main-text">Click or drag images here</span>
                <span class="upload-sub-text">Up to 2 images &mdash; #1 is the main edit target, #2 is an optional reference</span>
              </div>
            </div>
            <input id="custom-file-input" type="file" accept="image/*" multiple style="display:none;" />
            <div id="image-gallery-grid" class="image-gallery-grid" style="display:none;"></div>
          </div>

          <!-- Quick Prompts: master bar + per-group toolbars -->
          <div class="prompts-toolbar" id="prompts-toolbar">
            <div class="prompts-toolbar-left">
              <div class="prompts-toolbar-title">Quick Prompts</div>
            </div>
            <div class="prompts-toolbar-right">
              <button type="button" id="tb-open-prompts" class="modern-tb-btn prompts-tb-btn" title="Open or close all prompt groups" aria-expanded="false">
                <span class="tb-label" id="tb-open-prompts-label">Open Prompts</span>
              </button>
              <button type="button" id="tb-clear-prompts" class="modern-tb-btn prompts-tb-btn" title="Clear the prompt box and deselect chips">
                <span class="tb-label">Clear Prompts</span>
              </button>
            </div>
          </div>

          <div class="chip-panel" id="panel-style" data-panel="style">
            <button type="button" class="chip-panel-toolbar" id="panel-style-toggle" aria-expanded="false" aria-controls="panel-style-body" title="(click to add · again to remove)">
              <span class="chip-panel-title">Style Prompts</span>
              <span class="chip-panel-hint" hidden>(click to add · again to remove)</span>
              <span class="chip-panel-chevron" aria-hidden="true">▼</span>
            </button>
            <div class="chip-panel-body" id="panel-style-body" hidden>
              <div class="suggestions-wrap" id="style-chips">
<button type="button" class="suggestion-chip" data-chip-id="bw" data-prompt="Convert it to black and white.">B&amp;W</button>
                <button type="button" class="suggestion-chip" data-chip-id="cinematic" data-prompt="Add cinematic lighting with warm orange tones and film grain.">Cinematic</button>
                <button type="button" class="suggestion-chip" data-chip-id="oil-paint" data-prompt="Apply oil painting effect with visible brush strokes.">Oil Paint</button>
                <button type="button" class="suggestion-chip" data-chip-id="watercolor" data-prompt="Make it look like a watercolor painting with soft edges.">Watercolor</button>
                <button type="button" class="suggestion-chip" data-chip-id="pencil" data-prompt="Convert to detailed pencil sketch with cross-hatching and shading.">Pencil Sketch</button>
                <button type="button" class="suggestion-chip" data-chip-id="pop-art" data-prompt="Apply pop art style with bold colors and halftone patterns.">Pop Art</button>
                <button type="button" class="suggestion-chip" data-chip-id="vintage" data-prompt="Apply a vintage retro film look with faded colors and light leaks.">Vintage Retro</button>
                <button type="button" class="suggestion-chip" data-chip-id="neon" data-prompt="Add neon glow effects with vibrant colors against a dark background.">Neon Glow</button>
                <button type="button" class="suggestion-chip" data-chip-id="pixel" data-prompt="Convert to pixel art style with a retro 16-bit aesthetic.">Pixel Art</button>
                <button type="button" class="suggestion-chip" data-chip-id="sharpen" data-prompt="Sharpen the image. Increase clarity and edge detail while preserving natural texture and avoiding harsh halos.">Sharpen</button>
              </div>
            </div>
          </div>

          <div class="chip-panel" id="panel-camera" data-panel="camera">
            <button type="button" class="chip-panel-toolbar" id="panel-camera-toggle" aria-expanded="false" aria-controls="panel-camera-body" title="(click to add · again to remove)">
              <span class="chip-panel-title">Camera / Zoom</span>
              <span class="chip-panel-hint" hidden>(click to add · again to remove)</span>
              <span class="chip-panel-chevron" aria-hidden="true">▼</span>
            </button>
            <div class="chip-panel-body" id="panel-camera-body" hidden>
              <div class="suggestions-wrap" id="camera-chips">
<button type="button" class="suggestion-chip camera-chip" data-chip-id="45-right" data-prompt="Rotate the camera 45 degrees to the right.">45° Right</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="45-left" data-prompt="Rotate the camera 45 degrees to the left.">45° Left</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="front-right" data-prompt="Front-right quarter view.">Front-right</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="front-left" data-prompt="Front-left quarter view.">Front-left</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="back-right" data-prompt="Back-right three-quarter view of the subject.">Back-right</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="back-left" data-prompt="Back-left three-quarter view of the subject.">Back-left</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="top-down" data-prompt="Top-down birds-eye view of the same subject.">Top-down</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="low-angle" data-prompt="Low angle shot looking up at the subject.">Low angle</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="profile-right" data-prompt="Right side profile view of the subject.">Profile right</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="profile-left" data-prompt="Left side profile view of the subject.">Profile left</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="zoom-in" data-prompt="Zoom in closer on the main subject, tighter framing.">Zoom in</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="zoom-out" data-prompt="Zoom out for a wider shot, more background visible.">Zoom out</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="dutch-tilt" data-prompt="Slight dutch angle / tilted camera for a dramatic look.">Dutch tilt</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="pov" data-prompt="Point-of-view shot from the subjects eyes.">POV</button>
                <button type="button" class="suggestion-chip camera-chip" data-chip-id="selfie" data-prompt="Selfie-style front camera shot, arms-length face framing.">Selfie</button>
              </div>
            </div>
          </div>

          <div class="chip-panel" id="panel-lora" data-panel="lora">
            <button type="button" class="chip-panel-toolbar" id="panel-lora-toggle" aria-expanded="false" aria-controls="panel-lora-body" title="(click to add · again to remove)">
              <span class="chip-panel-title">LoRA Prompts</span>
              <span class="chip-panel-hint" hidden>(click to add · again to remove)</span>
              <span class="chip-panel-chevron" aria-hidden="true">▼</span>
            </button>
            <div class="chip-panel-body" id="panel-lora-body" hidden>
              <div class="suggestions-wrap" id="lora-chips">
<button type="button" class="suggestion-chip" data-chip-id="lora-multiple-angles" data-prompt="Rotate the camera 45 degrees to the right.">Multiple-Angles</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-fal-multiple-angles" data-prompt="Front-right quarter view.">Fal-Multiple-Angles</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-photo-to-anime" data-prompt="Transform into anime.">Photo-to-Anime</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-anime-v2" data-prompt="Transform into anime (while preserving the background and remaining elements maintaining realism and original details.)">Anime-V2</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-manga-tone" data-prompt="Paint with manga tone.">Manga-Tone</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-noir-comic-book" data-prompt="Transform into a noir comic book style.">Noir-Comic-Book</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-pixar" data-prompt="Transform it into Pixar-inspired 3D.">Pixar-Inspired-3D</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-polaroid" data-prompt="cinematic polaroid with soft grain subtle vignette gentle lighting white frame handwritten photographed preserving realistic texture and details.">Polaroid-Photo</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-hyper-realistic" data-prompt="Transform into a hyper-realistic face portrait.">Hyper-Realistic-Portrait</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-ultra-realistic" data-prompt="Ultra-realistic portrait.">Ultra-Realistic-Portrait</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-anything2real" data-prompt="Change the picture to realistic photograph.">Anything2Real</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-style-transfer" data-prompt="Convert Image 1 to the style of Image 2.">Style-Transfer</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-upscaler" data-prompt="Upscale this picture to 4K resolution.">Upscaler</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-unblur" data-prompt="Unblur and upscale.">Unblur-Anything</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-light-migration" data-prompt="Refer to the color tone, remove the original lighting from Image 1, and relight Image 1 based on the lighting and color tone of Image 2.">Light-Migration</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-any-light" data-prompt="Apply the lighting from image 2 to image 1.">Any-light</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-studio-delight" data-prompt="Neutral uniform lighting. Preserve identity and composition.">Studio-DeLight</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-cinematic-flatlog" data-prompt="Transform into a cinematic flat log.">Cinematic-FlatLog</button>
                <button type="button" class="suggestion-chip" data-chip-id="lora-midnight-noir" data-prompt="Transform into Midnight Noir Eyes Spotlight.">Midnight-Noir-Eyes-Spotlight</button>
              </div>
            </div>
          </div>

<div class="left-stack lora-controls-stack" style="padding-bottom:16px">
            <div class="lora-menu-heading">
              <div class="lora-select-label">
                <span class="lora-menu-title" id="lora-menu-title">Editing Style / LoRA</span>
                <span class="select-help" aria-label="About LoRA">?
                  <span class="select-tooltip" id="lora-help-tooltip">A LoRA is a specialized skill pack for the editor. Pick one that matches your goal, then write a matching prompt.</span>
                </span>
              </div>
              <div id="lora-pack-overwrite-warn" class="lora-pack-overwrite-warn" hidden role="status" aria-live="polite"></div>
            </div>
            <select id="custom-lora-select" class="lora-native-select" title="Choose a style LoRA">
              __LORA_OPTIONS_HTML__
            </select>
            <div class="lora-help-text" id="lora-help-text">A LoRA is a specialized skill pack for the editor (style, camera, lighting, upscale, etc.). Pick one that matches your goal, then write a prompt that asks for that kind of change.</div>
            <div class="lora-demo-row" id="lora-demo-row">
              <div class="lora-demo-card">
                <div class="demo-label before">Before</div>
                <img id="lora-demo-before" alt="Before demo" />
              </div>
              <div class="lora-demo-card">
                <div class="demo-label after">After</div>
                <img id="lora-demo-after" alt="After demo" />
              </div>
            </div>
            <div id="lora-demo-status"></div>
            <div class="lora-demo-caption">Demo for <b id="lora-demo-name">Choose a LoRA…</b></div>
          </div>

        </div><!-- /left -->

        <!-- Right -->
        <div class="app-main-right">

          <div class="output-frame">
            <div class="out-body" id="output-image-container">
              <div class="modern-loader" id="output-loader">
                <div class="loader-spinner"></div>
                <div class="loader-text">Processing image&hellip;</div>
                <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
              </div>
              <div class="out-placeholder" id="output-placeholder">Result will appear here</div>
            </div>
          </div>

          <div class="panel-card panel-prompt">
            <div class="panel-card-title">Edit Instruction</div>
            <div class="panel-card-body">
              <label class="modern-label" for="custom-prompt-input">Prompt</label>
              <textarea id="custom-prompt-input" class="modern-textarea" rows="5"
                        placeholder="Build a prompt with chips, or type freely. Optional pack tags e.g. [[example]]&hellip;"></textarea>

              <div class="prompt-pack-menu" style="margin-top:12px">
                <div class="prompt-packs-hint" id="prompt-pack-desc">Prompt Packs add variety the base model struggles with in specific areas. Choose a pack in the menu below, or trigger one in the prompt (e.g. <code>[[pack]]</code>).</div>
                <div class="lora-select-label">
                  Prompt Pack
                  <span class="select-help" aria-label="About Prompt Packs">?
                    <span class="select-tooltip">Optional fixed instructions + reference image for things the base model under-knows. Menu selection overrides prompt tags. If a pack sets force_lora, the LoRA menu switches to that adapter (and resets to None when you clear the pack). Choose None to use tags in the prompt (e.g. [[example]]). Packs load from the prompt_packs/ folder.</span>
                  </span>
                </div>
                <select id="custom-prompt-pack-select" class="lora-native-select" title="Choose a Prompt Pack">
                  __PROMPT_PACK_OPTIONS_HTML__
                </select>
              </div>
            </div>
          </div>

          <div class="lora-selector-card panel-aspect">
            <div class="lora-selector-body">
              <div class="lora-select-label">
                Output Dimensions / Ratio
                <span class="select-help" aria-label="About aspect ratio">?
                  <span class="select-tooltip">Sets the output shape. Original keeps the source proportions; Square is 1:1; Wide is 16:9 landscape; Portrait is 9:16 vertical. This only changes the frame ratio, not overall resolution.</span>
                </span>
              </div>
              <select id="custom-aspect-select" class="lora-native-select" title="Choose the output aspect ratio / frame shape">
                <option value="original" selected>Original (maintain aspect ratio)</option>
                <option value="square">Square (1:1)</option>
                <option value="wide">Wide (16:9)</option>
                <option value="portrait">Portrait (9:16)</option>
              </select>
            </div>
          </div>

          <div class="lora-selector-card panel-size">
            <div class="lora-selector-body">
              <div class="lora-select-label">
                Output Image Size
                <span class="select-help" aria-label="About image size">?
                  <span class="select-tooltip">Controls output resolution. Original uses source pixels (long side max 4000). Ladder: X-Small 512, Small 768, Normal 1024, Large 1280, X-Large 1536 on the long side. Larger images use more GPU memory and take longer.</span>
                </span>
              </div>
              <select id="custom-size-select" class="lora-native-select" title="Larger sizes use more GPU resources">
                <option value="original">Original (source pixels)</option>
                <option value="x-small">X-Small (thumbnail · 512)</option>
                <option value="small">Small (768)</option>
                <option value="normal" selected>Normal (1024)</option>
                <option value="large">Large (1280)</option>
                <option value="x-large">X-Large (1536)</option>
              </select>
              <div id="size-pred-dims" class="size-pred-dims" hidden></div>
            </div>
          </div>

          <div class="settings-group" id="advanced-settings">
            <div class="settings-group-title" id="advanced-settings-toggle" role="button" tabindex="0" aria-expanded="false" aria-controls="advanced-settings-body" onclick="window.__toggleAdvancedSettings && window.__toggleAdvancedSettings()" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();window.__toggleAdvancedSettings&&window.__toggleAdvancedSettings();}">
              <span>Advanced Settings</span>
              <span class="settings-chevron" aria-hidden="true">▼</span>
            </div>
            <div class="settings-group-body" id="advanced-settings-body">
              <div class="slider-row">
                <label>Seed
                  <span class="select-help" aria-label="About seed">?
                    <span class="select-tooltip">Controls randomness of the generation. The same seed with the same prompt and settings tends to produce similar results. Turn off Randomize seed to lock a value for reproducibility.</span>
                  </span>
                </label>
                <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">
                <span class="slider-val" id="custom-seed-val">0</span>
              </div>
              <div class="checkbox-row">
                <input type="checkbox" id="custom-randomize" checked>
                <label for="custom-randomize">Randomize seed</label>
              </div>
              <div class="slider-row">
                <label>Guidance
                  <span class="select-help" aria-label="About guidance">?
                    <span class="select-tooltip">How strongly the model follows your prompt (CFG). Higher values stick closer to the text; lower values allow freer, often more natural results. This fast 4-step setup is tuned around low guidance (default 1.0).</span>
                  </span>
                </label>
                <input type="range" id="custom-guidance" min="1" max="10" step="0.1" value="1.0">
                <span class="slider-val" id="custom-guidance-val">1.0</span>
              </div>
              <div class="slider-row">
                <label>Steps
                  <span class="select-help" aria-label="About steps">?
                    <span class="select-tooltip">Number of denoising steps. More steps can refine detail but take longer and use more GPU time. This Rapid stack is optimized for about 4 steps; raising it much higher has diminishing returns.</span>
                  </span>
                </label>
                <input type="range" id="custom-steps" min="1" max="50" step="1" value="4">
                <span class="slider-val" id="custom-steps-val">4</span>
              </div>
            </div>
          </div>

          <div class="run-btn-wrap" style="padding:14px 18px 16px;">
            <button id="custom-run-btn" class="btn-run">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                <path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z" fill="white"/>
              </svg>
              <span id="run-btn-label">Edit Image</span>
            </button>
          </div>

        </div><!-- /right -->
      </div><!-- /main-row -->

      <div class="exp-note">
        Experimental Space for
        <a href="https://huggingface.co/Qwen/Qwen-Image-Edit-2511" target="_blank">Qwen-Image-Edit-2511</a>
        &middot; LoRAs loaded lazily on first use
      </div>

      <div class="app-statusbar">
        <div class="sb-section" id="sb-image-count">No images uploaded</div>
        <div class="sb-section sb-fixed">Ready</div>
      </div>

    </div><!-- /app-shell -->