update app

app.py

@@ -1,7 +1,9 @@
 import os
+import io
 import gc
 import uuid
 import json
+import base64
 import random
 import threading
 import concurrent.futures
@@ -174,16 +176,15 @@ def infer(
 
 # --- FastAPI Endpoints ---
 def get_example_items():
-    items = []
+    # Hardcode the multi-image example
+    items = [
+        {
+            "files": ["/example-file/I1.jpg", "/example-file/I2.jpg"],
+            "prompt": "Make her wear these glasses in Image 2.",
+            "thumb": "/example-file/I1.jpg"
+        }
+    ]
     
-    # 1. Multi-image example (Explicitly Handled)
-    items.append({
-        "files": ["I1.jpg", "I2.jpg"],
-        "urls": ["/example-file/I1.jpg", "/example-file/I2.jpg"],
-        "prompt": "Make her wear these glasses in Image 2."
-    })
-
-    # 2. Single image examples
     example_prompts = {
         "1.jpg": "Change the weather to stormy.",
         "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
@@ -193,14 +194,15 @@ def get_example_items():
 
     if EXAMPLES_DIR.exists():
         for name in sorted(os.listdir(EXAMPLES_DIR)):
-            # Skip the ones explicitly handled above to avoid duplicates
-            if name in ["I1.jpg", "I2.jpg"]: continue
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
-                items.append({
-                    "files": [name],
-                    "urls": [f"/example-file/{name}"],
-                    "prompt": example_prompts.get(name, "Edit this image while preserving composition.")
-                })
+            # Ignore the specific I1/I2 files since they are bundled in the first example manually
+            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")) and name not in ["I1.jpg", "I2.jpg"]:
+                items.append(
+                    {
+                        "files": [f"/example-file/{name}"],
+                        "prompt": example_prompts.get(name, "Edit this image while preserving composition."),
+                        "thumb": f"/example-file/{name}"
+                    }
+                )
     return items
 
 @app.get("/example-file/{filename}")
@@ -298,7 +300,6 @@ async def homepage(request: Request):
       --ub-muted: #b0b0b0;
       --ub-input: #2b2b2b;
       --panel-radius: 8px;
-      --panel-height: 700px; /* Locked equal height */
     }}
 
     * {{ box-sizing: border-box; font-family: 'Ubuntu', sans-serif; }}
@@ -334,15 +335,22 @@ async def homepage(request: Request):
       text-align: center;
       margin-bottom: 30px;
     }}
-    .header-text h1 {{ margin: 0 0 10px 0; font-size: 2.2rem; }}
-    .header-text p {{ color: var(--ub-muted); margin: 0; }}
+    .header-text h1 {{
+      margin: 0 0 10px 0;
+      font-size: 2.2rem;
+    }}
+    .header-text p {{
+      color: var(--ub-muted);
+      margin: 0;
+    }}
 
-    /* Layout & Panels */
+    /* Layout enforces identical heights for both panels */
     .layout {{
       display: grid;
       grid-template-columns: 400px 1fr;
       gap: 24px;
-      align-items: stretch; /* Ensures columns match height natively if unset, but we use fixed height */
+      align-items: stretch; /* Forces equal height */
+      height: 700px; /* Fixed height for the main interactive area */
     }}
 
     .panel {{
@@ -351,7 +359,7 @@ async def homepage(request: Request):
       box-shadow: 0 8px 24px rgba(0,0,0,0.2);
       display: flex;
       flex-direction: column;
-      height: var(--panel-height); /* Enforces exact equal height */
+      height: 100%;
       overflow: hidden;
     }}
 
@@ -367,15 +375,11 @@ async def homepage(request: Request):
     .panel-body {{ 
       padding: 20px; 
       flex: 1; 
-      overflow-y: auto; /* Allows left settings panel to scroll without expanding container */
+      overflow-y: auto; /* Allows scrolling inside if settings get too tall */
       display: flex;
       flex-direction: column;
     }}
 
-    .panel-body::-webkit-scrollbar {{ width: 8px; }}
-    .panel-body::-webkit-scrollbar-track {{ background: var(--ub-panel); }}
-    .panel-body::-webkit-scrollbar-thumb {{ background: var(--ub-panel-light); border-radius: 4px; }}
-
     /* Input Forms */
     .form-group {{ margin-bottom: 20px; flex-shrink: 0; }}
     .label {{
@@ -396,66 +400,74 @@ async def homepage(request: Request):
     .textarea:focus, .input:focus {{ border-color: var(--ub-orange); }}
     .textarea {{ min-height: 100px; resize: vertical; }}
 
-    /* Upload Zone & Plus Button */
-    .upload-zone {{
+    /* Upload Container: Handles both empty state and populated state gracefully */
+    .upload-container {{
       background: var(--ub-input);
       border: 1px dashed var(--ub-muted);
       border-radius: 4px;
-      padding: 20px;
-      text-align: center;
-      cursor: pointer;
+      padding: 15px;
+      min-height: 120px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       transition: border-color 0.2s, background 0.2s;
     }}
-    .upload-zone:hover, .upload-zone.dragover {{
+    .upload-container.dragover {{
       border-color: var(--ub-orange);
       background: rgba(233,84,32,0.05);
     }}
-    .upload-zone.has-files {{
+    .upload-container.has-files {{
+      border: 1px solid var(--ub-border);
       padding: 10px;
-      border-style: solid;
+      justify-content: flex-start;
+    }}
+    
+    .upload-placeholder {{
+      text-align: center; cursor: pointer; color: var(--ub-muted);
+      padding: 20px 0;
     }}
-    .upload-zone input[type="file"] {{ display: none; }}
+    .upload-placeholder:hover {{ color: var(--ub-orange); }}
+    .upload-container input[type="file"] {{ display: none; }}
     
-    .preview-grid {{
-      display: grid; 
-      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-      gap: 10px; 
+    .image-list {{
+      display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;
     }}
+    .image-list::-webkit-scrollbar {{ height: 6px; }}
+    .image-list::-webkit-scrollbar-thumb {{ background: var(--ub-panel-light); border-radius: 3px; }}
+    
     .thumb {{
-      position: relative; aspect-ratio: 1;
-      border-radius: 4px; overflow: hidden;
-      border: 1px solid var(--ub-border);
-      background: rgba(0,0,0,0.2);
+      position: relative; width: 85px; height: 85px; flex-shrink: 0;
+      border-radius: 4px; overflow: hidden; border: 1px solid var(--ub-border);
     }}
     .thumb img {{ width: 100%; height: 100%; object-fit: cover; display: block; }}
     .thumb-remove {{
       position: absolute; top: 4px; right: 4px;
       background: rgba(0,0,0,0.7); color: white;
-      border: none; border-radius: 50%; width: 20px; height: 20px;
+      border: none; border-radius: 50%; width: 22px; height: 22px;
       display: flex; align-items: center; justify-content: center;
-      cursor: pointer; font-size: 12px;
+      cursor: pointer; font-size: 14px; line-height: 1;
     }}
+    .thumb-remove:hover {{ background: rgba(233,84,32,0.9); }}
+    
     .add-more-btn {{
+      width: 85px; height: 85px; flex-shrink: 0;
+      border: 1px dashed var(--ub-orange); border-radius: 4px;
       display: flex; align-items: center; justify-content: center;
-      font-size: 28px; font-weight: 300; color: var(--ub-muted);
-      cursor: pointer; transition: 0.2s;
-      border: 1px dashed var(--ub-muted); background: transparent;
-    }}
-    .add-more-btn:hover {{
-      color: var(--ub-orange); border-color: var(--ub-orange);
-      background: rgba(233,84,32,0.05);
+      font-size: 32px; color: var(--ub-orange); cursor: pointer;
+      background: rgba(233,84,32,0.05); transition: background 0.2s;
     }}
+    .add-more-btn:hover {{ background: rgba(233,84,32,0.15); }}
 
     /* Buttons */
     .btn {{
       width: 100%; padding: 14px; border: none; border-radius: 4px;
       font-size: 16px; font-weight: 700; cursor: pointer;
       transition: opacity 0.2s, background 0.2s;
-      flex-shrink: 0;
     }}
     .btn-primary {{
       background: var(--ub-orange); color: white;
       box-shadow: 0 4px 12px rgba(233,84,32,0.3);
+      margin-top: auto; /* Pushes button to bottom if space allows */
     }}
     .btn-primary:hover {{ background: var(--ub-orange-hover); }}
     .btn:disabled {{ opacity: 0.6; cursor: not-allowed; }}
@@ -464,11 +476,9 @@ async def homepage(request: Request):
     .advanced-toggle {{
       width: 100%; background: none; border: none; color: var(--ub-orange);
       text-align: left; padding: 10px 0; font-weight: 500; cursor: pointer;
-      display: flex; justify-content: space-between; align-items: center;
-      flex-shrink: 0;
+      display: flex; justify-content: space-between; font-size: 15px;
     }}
-    .advanced-toggle span.icon {{ font-family: monospace; font-size: 18px; font-weight: bold; }}
-    .advanced-body {{ display: none; padding-top: 10px; flex-shrink: 0; }}
+    .advanced-body {{ display: none; padding-top: 10px; margin-bottom: 20px; }}
     .advanced-body.open {{ display: block; }}
     .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }}
 
@@ -476,8 +486,7 @@ async def homepage(request: Request):
     .slider-stage {{
       position: relative;
       width: 100%;
-      flex: 1; /* Automatically takes remaining height to hit 700px */
-      min-height: 0; 
+      flex: 1; /* Fills remaining space in the equal height panel */
       background: #111;
       border-radius: 4px;
       overflow: hidden;
@@ -499,7 +508,11 @@ async def homepage(request: Request):
       user-select: none;
       -webkit-user-drag: none;
     }}
-    #imgSmall {{ clip-path: inset(0 50% 0 0); }}
+    
+    /* The Small Decoder image sits on top and gets clipped */
+    #imgSmall {{
+      clip-path: inset(0 50% 0 0); 
+    }}
 
     .slider-handle {{
       position: absolute;
@@ -534,49 +547,55 @@ async def homepage(request: Request):
       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);
+      background: rgba(0,0,0,0.6);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-size: 13px;
+      backdrop-filter: blur(4px);
     }}
 
     .loader {{
-      position: absolute; inset: 0; background: rgba(0,0,0,0.7);
+      position: absolute; inset: 0;
+      background: rgba(0,0,0,0.7);
       display: none; flex-direction: column;
-      align-items: center; justify-content: center; z-index: 20;
+      align-items: center; justify-content: center;
+      z-index: 20;
     }}
     .spinner {{
-      width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2);
-      border-top-color: var(--ub-orange); border-radius: 50%;
-      animation: spin 1s linear infinite; margin-bottom: 15px;
+      width: 40px; height: 40px;
+      border: 4px solid rgba(255,255,255,0.2);
+      border-top-color: var(--ub-orange);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 15px;
     }}
 
     /* Examples */
     .examples-section {{ margin-top: 40px; }}
     .examples-section h3 {{ border-bottom: 1px solid var(--ub-border); padding-bottom: 10px; }}
     .examples-grid {{
-      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
     }}
     .ex-card {{
-      background: var(--ub-panel); border-radius: 4px; overflow: hidden;
+      background: var(--ub-panel); border-radius: 4px; overflow: hidden; position: relative;
       cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
-      display: flex; flex-direction: column;
     }}
     .ex-card:hover {{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }}
+    .ex-card img {{ width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }}
+    .ex-card p {{ padding: 12px; margin: 0; font-size: 13px; color: var(--ub-muted); line-height: 1.4; }}
     
-    .ex-card-images {{
-      display: flex; width: 100%; aspect-ratio: 1;
-    }}
-    .ex-card-images img {{
-      flex: 1; min-width: 0; object-fit: cover;
+    .img-count-badge {{
+      position: absolute; top: 8px; right: 8px;
+      background: rgba(0,0,0,0.7); color: white;
+      font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: bold;
     }}
-    .ex-card-images img:nth-child(2) {{ border-left: 1px solid #111; }}
-    
-    .ex-card p {{ padding: 12px; margin: 0; font-size: 13px; color: var(--ub-muted); line-height: 1.4; }}
 
     @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
 
     @media (max-width: 900px) {{
-      .layout {{ grid-template-columns: 1fr; }}
-      .panel {{ height: auto; min-height: 500px; }}
+      .layout {{ grid-template-columns: 1fr; height: auto; }}
+      .slider-stage {{ height: 500px; flex: none; }}
     }}
   </style>
 </head>
@@ -596,10 +615,15 @@ async def homepage(request: Request):
         <div class="panel-body">
           <div class="form-group">
             <label class="label">Input Images (Optional)</label>
-            <div class="upload-zone" id="dropZone">
+            <div class="upload-container" id="uploadContainer">
               <input type="file" id="fileInput" multiple accept="image/*" />
-              <div id="uploadText">Click or Drag & Drop images here</div>
-              <div class="preview-grid" id="previewGrid" style="display:none;"></div>
+              
+              <div class="upload-placeholder" id="uploadPlaceholder">
+                Click or Drag & Drop images here
+              </div>
+              
+              <div class="image-list" id="imageList" style="display: none;">
+                </div>
             </div>
           </div>
 
@@ -609,7 +633,7 @@ async def homepage(request: Request):
           </div>
 
           <button class="advanced-toggle" id="advToggle">
-            <span>Advanced Settings</span> <span class="icon" id="advIcon">+</span>
+            <span>Advanced Settings</span> <span id="advIcon" style="font-weight:700; font-size:18px; line-height:1;">+</span>
           </button>
           
           <div class="advanced-body" id="advBody">
@@ -634,24 +658,24 @@ async def homepage(request: Request):
                 <label class="label">Guidance Scale</label>
                 <input type="number" id="guidance" class="input" value="1.0" step="0.1">
               </div>
-              <div class="form-group" style="grid-column: span 2;">
-                <label style="display:flex; align-items:center; gap:8px; font-size:14px;">
+              <div class="form-group" style="grid-column: span 2; margin-bottom: 0;">
+                <label style="display:flex; align-items:center; gap:8px; font-size:14px; cursor: pointer;">
                   <input type="checkbox" id="randomize" checked> Randomize Seed
                 </label>
               </div>
             </div>
           </div>
 
-          <button class="btn btn-primary" id="runBtn" style="margin-top: 20px;">Run Comparison</button>
+          <button class="btn btn-primary" id="runBtn">Run Comparison</button>
         </div>
       </div>
 
       <div class="panel">
         <div class="panel-header">Comparison View</div>
-        <div class="panel-body" style="padding:0;">
+        <div class="panel-body" style="padding: 0;">
           <div class="slider-stage" id="sliderStage">
             <div class="slider-empty" id="sliderEmpty">
-              <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; display:inline-block;">
+              <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>
@@ -687,10 +711,11 @@ async def homepage(request: Request):
     let filesState = [];
 
     // UI Elements
-    const dropZone = document.getElementById('dropZone');
+    const uploadContainer = document.getElementById('uploadContainer');
     const fileInput = document.getElementById('fileInput');
-    const previewGrid = document.getElementById('previewGrid');
-    const uploadText = document.getElementById('uploadText');
+    const uploadPlaceholder = document.getElementById('uploadPlaceholder');
+    const imageList = document.getElementById('imageList');
+    
     const promptInput = document.getElementById('promptInput');
     const runBtn = document.getElementById('runBtn');
     
@@ -712,81 +737,105 @@ async def homepage(request: Request):
 
     // --- File Upload Logic ---
     function renderPreviews() {{
-      previewGrid.innerHTML = '';
+      imageList.innerHTML = '';
+      
       if(filesState.length > 0) {{
-        uploadText.style.display = 'none';
-        previewGrid.style.display = 'grid';
-        dropZone.classList.add('has-files');
-
-        // 1. Render actual thumbnails
+        uploadContainer.classList.add('has-files');
+        uploadPlaceholder.style.display = 'none';
+        imageList.style.display = 'flex';
+        
+        // Render Thumbnails
         filesState.forEach((f, i) => {{
           const div = document.createElement('div');
           div.className = 'thumb';
           const img = document.createElement('img');
           img.src = URL.createObjectURL(f);
+          
           const btn = document.createElement('button');
           btn.className = 'thumb-remove';
-          btn.innerText = '×';
+          btn.innerHTML = '&times;';
           btn.onclick = (e) => {{ e.stopPropagation(); filesState.splice(i, 1); renderPreviews(); }};
-          div.appendChild(img); div.appendChild(btn);
-          previewGrid.appendChild(div);
+          
+          div.appendChild(img); 
+          div.appendChild(btn);
+          imageList.appendChild(div);
         }});
-
-        // 2. Add the "+" box to append more
+        
+        // Add the "+" box to add more images
         const addMore = document.createElement('div');
-        addMore.className = 'thumb add-more-btn';
-        addMore.innerText = '+';
-        addMore.onclick = (e) => {{ e.stopPropagation(); fileInput.click(); }};
-        previewGrid.appendChild(addMore);
-
+        addMore.className = 'add-more-btn';
+        addMore.innerHTML = '+';
+        addMore.title = "Add more images";
+        addMore.onclick = () => fileInput.click();
+        imageList.appendChild(addMore);
+        
       }} else {{
-        uploadText.style.display = 'block';
-        previewGrid.style.display = 'none';
-        dropZone.classList.remove('has-files');
+        uploadContainer.classList.remove('has-files');
+        uploadPlaceholder.style.display = 'block';
+        imageList.style.display = 'none';
       }}
     }}
 
-    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(); }}
+    uploadPlaceholder.onclick = () => fileInput.click();
+    
+    fileInput.onchange = (e) => {{ 
+        if(e.target.files.length) {{
+            filesState.push(...Array.from(e.target.files)); 
+            renderPreviews(); 
+        }}
+        fileInput.value = ''; 
+    }};
+    
+    uploadContainer.ondragover = (e) => {{ e.preventDefault(); uploadContainer.classList.add('dragover'); }};
+    uploadContainer.ondragleave = () => uploadContainer.classList.remove('dragover');
+    uploadContainer.ondrop = (e) => {{
+      e.preventDefault(); uploadContainer.classList.remove('dragover');
+      if(e.dataTransfer.files.length) {{ 
+          filesState.push(...Array.from(e.dataTransfer.files)); 
+          renderPreviews(); 
+      }}
     }};
 
     // --- Examples Logic ---
-    async function loadExample(urls, filenames, text) {{
+    async function loadExample(urls, prompt) {{
       try {{
-        // Reset state and load all provided files
+        loader.style.display = 'flex';
+        loader.querySelector('div:nth-child(2)').innerText = "Loading Example Images...";
+        
         filesState = [];
         for(let i=0; i<urls.length; i++) {{
           const res = await fetch(urls[i]);
+          if (!res.ok) throw new Error("File not found");
           const blob = await res.blob();
-          filesState.push(new File([blob], filenames[i], {{type: blob.type}}));
+          const ext = urls[i].split('.').pop() || 'jpg';
+          filesState.push(new File([blob], `example_image_${{i}}.${{ext}}`, {{type: blob.type}}));
         }}
+        
         renderPreviews();
-        promptInput.value = text;
+        promptInput.value = prompt;
         window.scrollTo({{top: 0, behavior: 'smooth'}});
-      }} catch (e) {{ alert('Failed to load example image.'); }}
+      }} catch (e) {{ 
+        alert('Failed to load example images. They might be missing from the server.'); 
+      }} finally {{
+        loader.style.display = 'none';
+        loader.querySelector('div:nth-child(2)').innerText = "Running both models...";
+      }}
     }}
 
     const exGrid = document.getElementById('examplesGrid');
     examples.forEach(ex => {{
       const card = document.createElement('div');
       card.className = 'ex-card';
-
-      // Split view logic for multi-image examples
-      let imgHtml = '';
-      if (ex.urls.length > 1) {{
-        const imgs = ex.urls.map(u => `<img src="${{u}}">`).join('');
-        imgHtml = `<div class="ex-card-images">${{imgs}}</div>`;
-      }} else {{
-        imgHtml = `<div class="ex-card-images"><img src="${{ex.urls[0]}}"></div>`;
+      
+      let badgeHtml = '';
+      if (ex.files.length > 1) {{
+          badgeHtml = `<div class="img-count-badge">${{ex.files.length}} Images</div>`;
       }}
-
-      card.innerHTML = `${{imgHtml}}<p>${{ex.prompt}}</p>`;
-      card.onclick = () => loadExample(ex.urls, ex.files, ex.prompt);
+      
+      card.innerHTML = `${{badgeHtml}}<img src="${{ex.thumb}}"><p>${{ex.prompt}}</p>`;
+      
+      // Load all files in the array when clicked
+      card.onclick = () => loadExample(ex.files, ex.prompt);
       exGrid.appendChild(card);
     }});
 
@@ -809,6 +858,7 @@ async def homepage(request: Request):
       updateSlider(e.clientX);
     }});
     
+    // Touch support for slider
     sliderHandle.addEventListener('touchstart', () => isDragging = true);
     window.addEventListener('touchend', () => isDragging = false);
     window.addEventListener('touchmove', (e) => {{
@@ -840,8 +890,8 @@ async def homepage(request: Request):
         const data = await res.json();
         
         if(data.success) {{
-          imgStd.src = data.std_url + "?t=" + Date.now();
-          imgSmall.src = data.small_url + "?t=" + Date.now();
+          imgStd.src = data.std_url;
+          imgSmall.src = data.small_url;
           
           imgStd.onload = () => {{
             sliderEmpty.style.display = 'none';
@@ -850,6 +900,7 @@ async def homepage(request: Request):
             sliderHandle.style.display = 'block';
             sliderLabels.style.display = 'flex';
             
+            // Reset slider to center
             const rect = sliderStage.getBoundingClientRect();
             updateSlider(rect.left + rect.width / 2);
           }};