update app

app.py

@@ -7,7 +7,6 @@ import base64
 import random
 import zipfile
 import threading
-import concurrent.futures
 from pathlib import Path
 from typing import List, Optional
 
@@ -46,13 +45,6 @@ else:
     DEVICE_LABEL = str(device).lower()
 
 # --- Model Loading ---
-print("Loading 4B Distilled model (Standard VAE)...")
-pipe_standard = Flux2KleinPipeline.from_pretrained(
-    "black-forest-labs/FLUX.2-klein-4B",
-    torch_dtype=dtype,
-).to(device)
-pipe_standard.enable_model_cpu_offload()
-
 print("Loading Small Decoder VAE...")
 vae_small = AutoencoderKLFlux2.from_pretrained(
     "black-forest-labs/FLUX.2-small-decoder",
@@ -60,15 +52,14 @@ vae_small = AutoencoderKLFlux2.from_pretrained(
 ).to(device)
 
 print("Loading 4B Distilled model (Small Decoder VAE)...")
-pipe_small_decoder = Flux2KleinPipeline.from_pretrained(
+pipe = Flux2KleinPipeline.from_pretrained(
     "black-forest-labs/FLUX.2-klein-4B",
     vae=vae_small,
     torch_dtype=dtype,
 ).to(device)
-pipe_small_decoder.enable_model_cpu_offload()
+pipe.enable_model_cpu_offload()
 
-pipe_lock_standard = threading.Lock()
-pipe_lock_small    = threading.Lock()
+pipe_lock = threading.Lock()
 
 # --- Utility Functions ---
 def calc_dimensions(pil_img: Image.Image):
@@ -89,7 +80,7 @@ def calc_dimensions(pil_img: Image.Image):
 def parse_and_resize_images(image_paths: List[str], width: int, height: int):
     if not image_paths:
         return None
-    
+
     resized = []
     for path in image_paths:
         try:
@@ -97,11 +88,11 @@ def parse_and_resize_images(image_paths: List[str], width: int, height: int):
             resized.append(img.resize((width, height), Image.LANCZOS))
         except Exception as e:
             print(f"Skipping invalid image: {e}")
-            
+
     return resized if resized else None
 
-def run_pipeline(pipe, lock, kwargs, seed):
-    with lock:
+def run_pipeline(kwargs, seed):
+    with pipe_lock:
         gen = torch.Generator(device="cpu").manual_seed(seed)
         result = pipe(**kwargs, generator=gen).images[0]
     return result
@@ -146,7 +137,7 @@ def infer(
     width  = max(256, min(MAX_IMAGE_SIZE, round(int(width)  / 8) * 8))
     height = max(256, min(MAX_IMAGE_SIZE, round(int(height) / 8) * 8))
 
-    shared_kwargs = dict(
+    kwargs = dict(
         prompt=prompt,
         height=height,
         width=width,
@@ -154,25 +145,15 @@ def infer(
         guidance_scale=guidance_scale,
     )
     if image_list is not None:
-        shared_kwargs["image"] = image_list
-
-    with concurrent.futures.ThreadPoolExecutor(max_workers=2) as executor:
-        future_std   = executor.submit(run_pipeline, pipe_standard, pipe_lock_standard, shared_kwargs, seed)
-        future_small = executor.submit(run_pipeline, pipe_small_decoder, pipe_lock_small, shared_kwargs, seed)
-        
-        concurrent.futures.wait(
-            [future_std, future_small],
-            return_when=concurrent.futures.ALL_COMPLETED,
-        )
+        kwargs["image"] = image_list
 
-    out_standard = future_std.result()
-    out_small    = future_small.result()
+    result = run_pipeline(kwargs, seed)
 
     gc.collect()
     if torch.cuda.is_available():
         torch.cuda.empty_cache()
 
-    return out_standard, out_small, seed
+    return result, seed
 
 
 # --- FastAPI Endpoints ---
@@ -214,33 +195,8 @@ async def download_file(filename: str):
         return JSONResponse({"error": "File not found"}, status_code=404)
     return FileResponse(path, filename=filename, media_type="image/png")
 
-@app.get("/api/download-zip")
-async def download_zip(std: str, small: str):
-    """Packages both generated images into a single ZIP file and streams it."""
-    std_name = Path(std).name
-    small_name = Path(small).name
-    
-    std_path = OUTPUT_DIR / std_name
-    small_path = OUTPUT_DIR / small_name
-    
-    if not std_path.exists() or not small_path.exists():
-        return JSONResponse({"error": "Generated files not found"}, status_code=404)
-        
-    memory_file = io.BytesIO()
-    with zipfile.ZipFile(memory_file, 'w', zipfile.ZIP_DEFLATED) as zf:
-        zf.write(std_path, arcname=f"Standard_Decoder_{std_name}")
-        zf.write(small_path, arcname=f"Small_Decoder_{small_name}")
-        
-    memory_file.seek(0)
-    
-    return StreamingResponse(
-        memory_file,
-        media_type="application/zip",
-        headers={"Content-Disposition": f"attachment; filename=Flux2_Comparison_{uuid.uuid4().hex[:6]}.zip"}
-    )
-
-@app.post("/api/compare")
-async def compare_images(
+@app.post("/api/generate")
+async def generate_image(
     prompt: str = Form(...),
     seed: str = Form("0"),
     randomize_seed: str = Form("true"),
@@ -264,7 +220,7 @@ async def compare_images(
                 temp_paths.append(str(temp_path))
                 image_paths.append(str(temp_path))
 
-        result_std, result_small, used_seed = infer(
+        result, used_seed = infer(
             prompt=prompt,
             image_paths=image_paths,
             seed=int(seed),
@@ -275,16 +231,13 @@ async def compare_images(
             guidance_scale=float(guidance),
         )
 
-        std_filename = save_image(result_std, prefix="std")
-        small_filename = save_image(result_small, prefix="small")
+        filename = save_image(result, prefix="output")
 
         return JSONResponse({
             "success": True,
             "seed": used_seed,
-            "std_url": f"/download/{std_filename}",
-            "small_url": f"/download/{small_filename}",
-            "std_filename": std_filename,
-            "small_filename": small_filename,
+            "url": f"/download/{filename}",
+            "filename": filename,
             "device": DEVICE_LABEL,
         })
 
@@ -301,13 +254,12 @@ async def homepage(request: Request):
     examples = get_example_items()
     examples_json = json.dumps(examples)
 
-    return f"""
-<!DOCTYPE html>
+    return f"""<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Flux.2-4B-Decoder-Comparator</title>
+  <title>Flux.2 Klein — Small Decoder</title>
   <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
   <style>
     :root {{
@@ -366,13 +318,13 @@ async def homepage(request: Request):
       margin: 0;
     }}
 
-    /* FIXED LAYOUT GRID */
+    /* LAYOUT */
     .layout {{
       display: grid;
       grid-template-columns: 420px 1fr;
       gap: 24px;
       align-items: stretch;
-      height: 650px; 
+      height: 650px;
     }}
 
     .panel {{
@@ -446,7 +398,7 @@ async def homepage(request: Request):
     }}
     .upload-zone input[type="file"] {{ display: none; }}
     .upload-text {{ pointer-events: none; color: var(--ub-muted); }}
-    
+
     .preview-grid {{
       display: none;
       grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
@@ -466,7 +418,7 @@ async def homepage(request: Request):
       display: flex; align-items: center; justify-content: center;
       cursor: pointer; font-size: 12px;
     }}
-    
+
     .add-more-btn {{
       display: flex; align-items: center; justify-content: center;
       border: 2px dashed var(--ub-muted); border-radius: 4px;
@@ -533,52 +485,29 @@ async def homepage(request: Request):
     }}
     .action-icon:hover {{ color: var(--ub-orange); }}
 
-    /* SLIDER CONTAINER */
-    .panel-body-slider {{
+    /* OUTPUT PANEL */
+    .panel-body-output {{
       flex: 1; display: flex; flex-direction: column;
       padding: 0; position: relative;
     }}
-    .slider-stage {{
+    .output-stage {{
       position: absolute; top: 0; left: 0; right: 0; bottom: 0;
       background: #111; overflow: hidden; display: flex;
       align-items: center; justify-content: center;
     }}
-    .slider-empty {{ color: var(--ub-muted); text-align: center; z-index: 1; }}
-    
-    .slider-img {{
-      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-      object-fit: contain; display: none; user-select: none; -webkit-user-drag: none;
-    }}
-    #imgSmall {{ clip-path: inset(0 50% 0 0); }}
-
-    .slider-handle {{
-      position: absolute; left: 50%; top: 0; bottom: 0;
-      width: 4px; background: var(--ub-orange); cursor: ew-resize; display: none; z-index: 10;
-    }}
-    .slider-handle::after {{
-      content: '◀ ▶'; position: absolute; top: 50%; left: 50%;
-      transform: translate(-50%, -50%); width: 40px; height: 30px;
-      background: var(--ub-orange); color: white; border-radius: 15px;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 10px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
-    }}
+    .output-empty {{ color: var(--ub-muted); text-align: center; z-index: 1; }}
 
-    .slider-labels {{
-      position: absolute; top: 15px; left: 15px; right: 15px;
-      display: none; justify-content: space-between;
-      pointer-events: none; z-index: 5;
-    }}
-    .badge {{
-      background: rgba(0,0,0,0.6); color: white; padding: 6px 12px;
-      border-radius: 20px; font-size: 13px; backdrop-filter: blur(4px);
+    .output-img {{
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      object-fit: contain; display: none; user-select: none;
     }}
 
-    /* UPDATED LOADER ANIMATION (Minimalist Single Circle) */
+    /* LOADER */
     .loader {{
-      position: absolute; inset: 0; 
-      background: rgba(20, 0, 10, 0.7); /* dark aubergine tint */
+      position: absolute; inset: 0;
+      background: rgba(20, 0, 10, 0.7);
       backdrop-filter: blur(6px);
-      display: none; flex-direction: column; 
+      display: none; flex-direction: column;
       align-items: center; justify-content: center; z-index: 20;
     }}
     .spinner-single {{
@@ -600,8 +529,17 @@ async def homepage(request: Request):
       0%, 100% {{ opacity: 1; }}
       50% {{ opacity: 0.5; }}
     }}
-    @keyframes spin {{ 
-      to {{ transform: rotate(360deg); }} 
+    @keyframes spin {{
+      to {{ transform: rotate(360deg); }}
+    }}
+
+    /* Seed Badge */
+    .seed-badge {{
+      display: none;
+      position: absolute; bottom: 12px; right: 12px;
+      background: rgba(0,0,0,0.6); color: #ccc; padding: 5px 10px;
+      border-radius: 20px; font-size: 12px; backdrop-filter: blur(4px);
+      z-index: 5;
     }}
 
     /* Examples */
@@ -621,22 +559,23 @@ async def homepage(request: Request):
 
     @media (max-width: 900px) {{
       .layout {{ grid-template-columns: 1fr; height: auto; }}
-      .panel-body-slider {{ height: 450px; flex: none; }}
-      .slider-stage {{ position: relative; height: 100%; }}
+      .panel-body-output {{ height: 450px; flex: none; }}
+      .output-stage {{ position: relative; height: 100%; }}
     }}
   </style>
 </head>
 <body>
 
-  <div class="topbar">Flux.2-4B VAE Decoder Comparator</div>
+  <div class="topbar">Flux.2 Klein 4B — Small Decoder</div>
 
   <div class="container">
     <div class="header-text">
-      <h1>Standard vs. Small Decoder</h1>
-      <p>Upload an image, enter a prompt, and use the slider to compare outputs in real-time.</p>
+      <h1>Flux.2 Klein — Small Decoder VAE</h1>
+      <p>Upload an image (optional) and enter a prompt to generate with the 4B distilled model.</p>
     </div>
 
     <div class="layout">
+      <!-- Left: Settings Panel -->
       <div class="panel">
         <div class="panel-header">Settings</div>
         <div class="panel-body-scroll">
@@ -657,7 +596,7 @@ async def homepage(request: Request):
           <button class="advanced-toggle" id="advToggle">
             <span>Advanced Settings</span> <span class="advanced-icon" id="advIcon">+</span>
           </button>
-          
+
           <div class="advanced-body" id="advBody">
             <div class="grid-2">
               <div class="form-group">
@@ -695,14 +634,15 @@ async def homepage(request: Request):
             </div>
           </div>
 
-          <button class="btn btn-primary" id="runBtn">Run Comparison</button>
+          <button class="btn btn-primary" id="runBtn">Generate</button>
         </div>
       </div>
 
+      <!-- Right: Output Panel -->
       <div class="panel">
         <div class="panel-header">
-          <span>Comparison View</span>
-          <button id="downloadZipBtn" class="action-icon" title="Download Both Images (ZIP)">
+          <span>Output</span>
+          <button id="downloadBtn" class="action-icon" title="Download Image">
             <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
               <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
               <polyline points="7 10 12 15 17 10"></polyline>
@@ -710,34 +650,29 @@ async def homepage(request: Request):
             </svg>
           </button>
         </div>
-        <div class="panel-body-slider">
-          <div class="slider-stage" id="sliderStage">
-            <div class="slider-empty" id="sliderEmpty">
+        <div class="panel-body-output">
+          <div class="output-stage" id="outputStage">
+            <div class="output-empty" id="outputEmpty">
               <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:10px; opacity:0.5;">
                 <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
               </svg>
-              <div>Results will appear here</div>
+              <div>Result will appear here</div>
             </div>
 
-            <img id="imgStd" class="slider-img" alt="Standard Decoder" />
-            <img id="imgSmall" class="slider-img" alt="Small Decoder" />
-            
-            <div class="slider-labels" id="sliderLabels">
-              <div class="badge">Standard Decoder</div>
-              <div class="badge">Small Decoder</div>
-            </div>
+            <img id="outputImg" class="output-img" alt="Generated Output" />
 
-            <div class="slider-handle" id="sliderHandle"></div>
+            <div class="seed-badge" id="seedBadge"></div>
 
             <div class="loader" id="loader">
               <div class="spinner-single"></div>
-              <div class="loader-text">Running both decoders...</div>
+              <div class="loader-text">Generating image...</div>
             </div>
           </div>
         </div>
       </div>
     </div>
 
+    <!-- Examples Section -->
     <div class="examples-section">
       <h3>Examples</h3>
       <div class="examples-grid" id="examplesGrid"></div>
@@ -747,39 +682,31 @@ async def homepage(request: Request):
   <script>
     const examples = {examples_json};
     let filesState = [];
-    let currentStdFilename = "";
-    let currentSmallFilename = "";
-
-    // UI Elements
-    const dropZone = document.getElementById('dropZone');
-    const fileInput = document.getElementById('fileInput');
-    const previewGrid = document.getElementById('previewGrid');
-    const uploadText = document.getElementById('uploadText');
-    const promptInput = document.getElementById('promptInput');
-    const runBtn = document.getElementById('runBtn');
-    const downloadZipBtn = document.getElementById('downloadZipBtn');
-    
-    // Status Log
-    const statusLog = document.getElementById('statusLog');
+    let currentFilename = "";
+
+    const dropZone      = document.getElementById('dropZone');
+    const fileInput     = document.getElementById('fileInput');
+    const previewGrid   = document.getElementById('previewGrid');
+    const uploadText    = document.getElementById('uploadText');
+    const promptInput   = document.getElementById('promptInput');
+    const runBtn        = document.getElementById('runBtn');
+    const downloadBtn   = document.getElementById('downloadBtn');
+    const statusLog     = document.getElementById('statusLog');
+    const outputStage   = document.getElementById('outputStage');
+    const outputImg     = document.getElementById('outputImg');
+    const outputEmpty   = document.getElementById('outputEmpty');
+    const loader        = document.getElementById('loader');
+    const seedBadge     = document.getElementById('seedBadge');
 
     function logMsg(msg, styleClass="") {{
       const div = document.createElement('div');
       const timeStr = new Date().toLocaleTimeString('en-US', {{hour12:false}});
       div.innerHTML = `<span class="log-time">[${{timeStr}}]</span><span class="${{styleClass}}">${{msg}}</span>`;
       statusLog.appendChild(div);
-      statusLog.scrollTop = statusLog.scrollHeight; // auto-scroll to bottom
+      statusLog.scrollTop = statusLog.scrollHeight;
     }}
 
-    // Slider Elements
-    const sliderStage = document.getElementById('sliderStage');
-    const imgStd = document.getElementById('imgStd');
-    const imgSmall = document.getElementById('imgSmall');
-    const sliderHandle = document.getElementById('sliderHandle');
-    const sliderLabels = document.getElementById('sliderLabels');
-    const sliderEmpty = document.getElementById('sliderEmpty');
-    const loader = document.getElementById('loader');
-
-    // Advanced Toggle logic (+ / -)
+    // --- Advanced Toggle ---
     document.getElementById('advToggle').onclick = function() {{
       const body = document.getElementById('advBody');
       body.classList.toggle('open');
@@ -789,10 +716,10 @@ async def homepage(request: Request):
     // --- File Upload Logic ---
     function renderPreviews() {{
       previewGrid.innerHTML = '';
-      if(filesState.length > 0) {{
+      if (filesState.length > 0) {{
         uploadText.style.display = 'none';
         previewGrid.style.display = 'grid';
-        
+
         filesState.forEach((f, i) => {{
           const div = document.createElement('div');
           div.className = 'thumb';
@@ -805,27 +732,25 @@ async def homepage(request: Request):
           div.appendChild(img); div.appendChild(btn);
           previewGrid.appendChild(div);
         }});
-        
-        // Append dynamic + button
+
         const addBtn = document.createElement('div');
         addBtn.className = 'add-more-btn';
         addBtn.innerHTML = '+';
         addBtn.onclick = (e) => {{ e.stopPropagation(); fileInput.click(); }};
         previewGrid.appendChild(addBtn);
-        
       }} else {{
         uploadText.style.display = 'block';
         previewGrid.style.display = 'none';
       }}
     }}
 
-    dropZone.onclick = (e) => {{ if(e.target === dropZone || e.target === uploadText) fileInput.click(); }};
+    dropZone.onclick = (e) => {{ if (e.target === dropZone || e.target === uploadText) fileInput.click(); }};
     fileInput.onchange = (e) => {{ filesState.push(...Array.from(e.target.files)); renderPreviews(); fileInput.value=''; }};
     dropZone.ondragover = (e) => {{ e.preventDefault(); dropZone.classList.add('dragover'); }};
     dropZone.ondragleave = () => dropZone.classList.remove('dragover');
     dropZone.ondrop = (e) => {{
       e.preventDefault(); dropZone.classList.remove('dragover');
-      if(e.dataTransfer.files.length) {{ filesState.push(...Array.from(e.dataTransfer.files)); renderPreviews(); }}
+      if (e.dataTransfer.files.length) {{ filesState.push(...Array.from(e.dataTransfer.files)); renderPreviews(); }}
     }};
 
     // --- Examples Logic ---
@@ -834,26 +759,23 @@ async def homepage(request: Request):
       renderPreviews();
       promptInput.value = text;
       logMsg("Loading example: " + text, "log-info");
-      
+
       try {{
-        for(let i=0; i<urls.length; i++) {{
-            const res = await fetch(urls[i]);
-            const blob = await res.blob();
-            const filename = urls[i].split('/').pop();
-            filesState.push(new File([blob], filename, {{type: blob.type}}));
+        for (let i = 0; i < urls.length; i++) {{
+          const res = await fetch(urls[i]);
+          const blob = await res.blob();
+          const filename = urls[i].split('/').pop();
+          filesState.push(new File([blob], filename, {{type: blob.type}}));
         }}
         renderPreviews();
-        
         window.scrollTo({{top: 0, behavior: 'smooth'}});
-        
         setTimeout(() => {{
-           logMsg("Example loaded. Starting comparison...", "log-info");
-           runBtn.click();
+          logMsg("Example loaded. Starting generation...", "log-info");
+          runBtn.click();
         }}, 500);
-
-      }} catch (e) {{ 
+      }} catch (e) {{
         logMsg("Failed to load example images.", "log-error");
-        alert('Failed to load example image.'); 
+        alert('Failed to load example image.');
       }}
     }}
 
@@ -861,66 +783,39 @@ async def homepage(request: Request):
     examples.forEach(ex => {{
       const card = document.createElement('div');
       card.className = 'ex-card';
-      
+
       let imgHTML = '';
-      if(ex.urls.length > 1) {{
+      if (ex.urls.length > 1) {{
         imgHTML = `
           <div class="ex-card-img-wrap">
-             <img src="${{ex.urls[0]}}" style="width:50%; border-right:1px solid #000;">
-             <img src="${{ex.urls[1]}}" style="width:50%;">
-          </div>
-        `;
+            <img src="${{ex.urls[0]}}" style="width:50%; border-right:1px solid #000;">
+            <img src="${{ex.urls[1]}}" style="width:50%;">
+          </div>`;
       }} else {{
         imgHTML = `<div class="ex-card-img-wrap"><img src="${{ex.urls[0]}}" style="width:100%;"></div>`;
       }}
-      
+
       card.innerHTML = `${{imgHTML}}<p>${{ex.prompt}}</p>`;
       card.onclick = () => loadExample(ex.urls, ex.prompt);
       exGrid.appendChild(card);
     }});
 
-    // --- Image Slider Logic ---
-    let isDragging = false;
-    
-    function updateSlider(clientX) {{
-      const rect = sliderStage.getBoundingClientRect();
-      let pos = Math.max(0, Math.min(clientX - rect.left, rect.width));
-      let percent = (pos / rect.width) * 100;
-      
-      sliderHandle.style.left = percent + '%';
-      imgSmall.style.clipPath = `inset(0 ${{100 - percent}}% 0 0)`;
-    }}
-
-    sliderHandle.addEventListener('mousedown', () => isDragging = true);
-    window.addEventListener('mouseup', () => isDragging = false);
-    window.addEventListener('mousemove', (e) => {{
-      if (!isDragging) return;
-      updateSlider(e.clientX);
-    }});
-    
-    sliderHandle.addEventListener('touchstart', () => isDragging = true);
-    window.addEventListener('touchend', () => isDragging = false);
-    window.addEventListener('touchmove', (e) => {{
-      if (!isDragging) return;
-      updateSlider(e.touches[0].clientX);
-    }});
-
-    // --- Download Zip Logic ---
-    downloadZipBtn.onclick = () => {{
-      if(!currentStdFilename || !currentSmallFilename) return;
-      logMsg("Initiating ZIP download...", "log-info");
-      window.location.href = `/api/download-zip?std=${{currentStdFilename}}&small=${{currentSmallFilename}}`;
+    // --- Download Logic ---
+    downloadBtn.onclick = () => {{
+      if (!currentFilename) return;
+      logMsg("Downloading image...", "log-info");
+      window.location.href = `/download/${{currentFilename}}`;
     }};
 
     // --- Form Submission ---
     runBtn.onclick = async () => {{
       const prompt = promptInput.value.trim();
-      if(!prompt) {{
+      if (!prompt) {{
         logMsg("Validation failed: Prompt is empty.", "log-error");
         return alert("Enter a prompt");
       }}
 
-      logMsg("Initializing generation sequence...", "log-info");
+      logMsg("Initializing generation...", "log-info");
 
       const fd = new FormData();
       fd.append('prompt', prompt);
@@ -930,51 +825,44 @@ async def homepage(request: Request):
       fd.append('height', document.getElementById('height').value);
       fd.append('steps', document.getElementById('steps').value);
       fd.append('guidance', document.getElementById('guidance').value);
-      
+
       filesState.forEach(f => fd.append('images', f));
 
       loader.style.display = 'flex';
       runBtn.disabled = true;
-      downloadZipBtn.style.display = 'none';
+      downloadBtn.style.display = 'none';
+      seedBadge.style.display = 'none';
 
-      logMsg("Sending request to backend. Running both VAE models...", "log-info");
+      logMsg("Sending request... Running Small Decoder VAE model.", "log-info");
 
       try {{
-        const res = await fetch('/api/compare', {{ method: 'POST', body: fd }});
+        const res = await fetch('/api/generate', {{ method: 'POST', body: fd }});
         const data = await res.json();
-        
-        if(data.success) {{
-          logMsg(`Success! Inference completed. Used seed: ${{data.seed}}`, "log-success");
-          
-          currentStdFilename = data.std_filename;
-          currentSmallFilename = data.small_filename;
-
-          imgStd.src = data.std_url;
-          imgSmall.src = data.small_url;
-          
-          imgStd.onload = () => {{
-            sliderEmpty.style.display = 'none';
-            imgStd.style.display = 'block';
-            imgSmall.style.display = 'block';
-            sliderHandle.style.display = 'block';
-            sliderLabels.style.display = 'flex';
-            downloadZipBtn.style.display = 'block'; // Reveal download button
-            
-            // Reset slider to center
-            const rect = sliderStage.getBoundingClientRect();
-            updateSlider(rect.left + rect.width / 2);
+
+        if (data.success) {{
+          logMsg(`Success! Used seed: ${{data.seed}}`, "log-success");
+
+          currentFilename = data.filename;
+          outputImg.src = data.url;
+
+          outputImg.onload = () => {{
+            outputEmpty.style.display = 'none';
+            outputImg.style.display = 'block';
+            downloadBtn.style.display = 'block';
+            seedBadge.innerText = `Seed: ${{data.seed}}`;
+            seedBadge.style.display = 'block';
           }};
         }} else {{
-          logMsg("Error processing request: " + data.error, "log-error");
+          logMsg("Error: " + data.error, "log-error");
           alert('Error: ' + data.error);
         }}
-      }} catch(e) {{
+      }} catch (e) {{
         logMsg("Network or server connection failed.", "log-error");
         alert('Failed to connect to server.');
       }} finally {{
         loader.style.display = 'none';
         runBtn.disabled = false;
-        logMsg("Sequence finished. Ready for next input.", "");
+        logMsg("Ready for next input.", "");
       }}
     }};
   </script>