Spaces:
Running on Zero
Running on Zero
File size: 24,283 Bytes
09472e9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 | <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 ·
<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 — #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&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…</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]]…"></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>
· 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 -->
|