Update app.py

app.py

@@ -177,7 +177,6 @@ def infer(
 
 # --- FastAPI Endpoints ---
 def get_example_items():
-    # Defined exactly to support single and multi-image examples.
     return [
         {
             "urls": ["/example-file/I1.jpg", "/example-file/I2.jpg"],
@@ -345,8 +344,8 @@ async def homepage(request: Request):
       display: grid;
       grid-template-columns: 420px 1fr;
       gap: 24px;
-      align-items: stretch; /* Forces both panels to be equal height */
-      height: 650px; /* Locked maximum height */
+      align-items: stretch;
+      height: 650px; 
     }}
 
     .panel {{
@@ -365,10 +364,9 @@ async def homepage(request: Request):
       border-bottom: 1px solid var(--ub-border);
       font-weight: 500;
       font-size: 1.1rem;
-      flex-shrink: 0; /* Header won't shrink */
+      flex-shrink: 0;
     }}
 
-    /* Scrollable inner body for Settings */
     .panel-body-scroll {{
       flex: 1;
       padding: 20px;
@@ -441,30 +439,73 @@ async def homepage(request: Request):
     
     /* The (+) Button */
     .add-more-btn {{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 2px dashed var(--ub-muted);
-      border-radius: 4px;
-      color: var(--ub-muted);
-      font-size: 26px;
-      cursor: pointer;
-      aspect-ratio: 1;
-      transition: all 0.2s;
-      background: transparent;
+      display: flex; align-items: center; justify-content: center;
+      border: 2px dashed var(--ub-muted); border-radius: 4px;
+      color: var(--ub-muted); font-size: 26px; cursor: pointer;
+      aspect-ratio: 1; transition: all 0.2s; background: transparent;
     }}
     .add-more-btn:hover {{
-      border-color: var(--ub-orange);
-      color: var(--ub-orange);
+      border-color: var(--ub-orange); color: var(--ub-orange);
       background: rgba(233,84,32,0.05);
     }}
 
+    /* Advanced Accordion */
+    .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;
+    }}
+    .advanced-icon {{ font-weight: bold; font-size: 18px; line-height: 1; }}
+    .advanced-body {{ display: none; padding-top: 10px; flex-shrink: 0; }}
+    .advanced-body.open {{ display: block; }}
+    .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }}
+
+    /* Status Container (Execution Log) */
+    .status-container {{
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 1px solid var(--ub-border);
+      border-radius: 4px;
+      background: #200014; /* deep ubuntu terminal background */
+      display: flex;
+      flex-direction: column;
+      flex: 1; 
+      min-height: 100px;
+      max-height: 200px; /* limits expansion if advanced is closed */
+    }}
+    .status-header {{
+      padding: 8px 12px;
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--ub-muted);
+      background: rgba(0,0,0,0.4);
+      border-bottom: 1px solid var(--ub-border);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      flex-shrink: 0;
+    }}
+    .status-log {{
+      padding: 10px;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 12px;
+      color: #eeeeee;
+      overflow-y: auto;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }}
+    .log-time {{ color: #777; margin-right: 8px; }}
+    .log-info {{ color: #5bc0eb; }}
+    .log-success {{ color: #9bc53d; }}
+    .log-error {{ color: #ff5e5b; }}
+
     /* 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;
-      margin-top: auto; /* Pushes button to bottom if space exists */
       flex-shrink: 0;
     }}
     .btn-primary {{
@@ -474,24 +515,12 @@ async def homepage(request: Request):
     .btn-primary:hover {{ background: var(--ub-orange-hover); }}
     .btn:disabled {{ opacity: 0.6; cursor: not-allowed; }}
 
-    /* Advanced Accordion (+/-) */
-    .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;
-    }}
-    .advanced-icon {{ font-weight: bold; font-size: 18px; line-height: 1; }}
-    .advanced-body {{ display: none; padding-top: 10px; flex-shrink: 0; }}
-    .advanced-body.open {{ display: block; }}
-    .grid-2 {{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }}
-
     /* SLIDER CONTAINER */
     .panel-body-slider {{
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding: 0; /* Remove padding to let stage fill perfectly */
+      padding: 0; 
       position: relative;
     }}
     .slider-stage {{
@@ -503,80 +532,48 @@ async def homepage(request: Request):
       align-items: center;
       justify-content: center;
     }}
-    .slider-empty {{
-      color: var(--ub-muted);
-      text-align: center;
-      z-index: 1;
-    }}
+    .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;
+      position: absolute; top: 0; left: 0;
+      width: 100%; height: 100%; object-fit: contain;
+      display: none; user-select: none; -webkit-user-drag: none;
     }}
-    
-    /* The Small Decoder image sits on top and gets clipped */
     #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;
+      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%;
+      content: '◀ ▶'; position: absolute; top: 50%; left: 50%;
       transform: translate(-50%, -50%);
-      width: 40px; height: 30px;
-      background: var(--ub-orange);
-      color: white;
-      border-radius: 15px;
+      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);
+      font-size: 10px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
     }}
 
     .slider-labels {{
-      position: absolute;
-      top: 15px; left: 15px; right: 15px;
-      display: none;
-      justify-content: space-between;
-      pointer-events: none;
-      z-index: 5;
+      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);
+      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 */
@@ -591,14 +588,8 @@ async def homepage(request: Request):
     }}
     .ex-card:hover {{ transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }}
     
-    .ex-card-img-wrap {{
-      width: 100%; aspect-ratio: 1;
-      display: flex; background: #000;
-    }}
-    .ex-card-img-wrap img {{
-      height: 100%; object-fit: cover;
-    }}
-
+    .ex-card-img-wrap {{ width: 100%; aspect-ratio: 1; display: flex; background: #000; }}
+    .ex-card-img-wrap img {{ height: 100%; object-fit: cover; }}
     .ex-card p {{ padding: 12px; margin: 0; font-size: 13px; color: var(--ub-muted); line-height: 1.4; }}
 
     @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
@@ -672,8 +663,14 @@ async def homepage(request: Request):
             </div>
           </div>
 
-          <div style="flex:1;"></div>
-          <button class="btn btn-primary" id="runBtn" style="margin-top: 20px;">Run Comparison</button>
+          <div class="status-container">
+            <div class="status-header">Execution Log</div>
+            <div class="status-log" id="statusLog">
+              <div><span class="log-time">[{DEVICE_LABEL}]</span><span>System Ready...</span></div>
+            </div>
+          </div>
+
+          <button class="btn btn-primary" id="runBtn">Run Comparison</button>
         </div>
       </div>
 
@@ -725,6 +722,17 @@ async def homepage(request: Request):
     const promptInput = document.getElementById('promptInput');
     const runBtn = document.getElementById('runBtn');
     
+    // Status Log
+    const statusLog = document.getElementById('statusLog');
+
+    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
+    }}
+
     // Slider Elements
     const sliderStage = document.getElementById('sliderStage');
     const imgStd = document.getElementById('imgStd');
@@ -788,6 +796,7 @@ async def homepage(request: Request):
       filesState = [];
       renderPreviews();
       promptInput.value = text;
+      logMsg("Loading example: " + text, "log-info");
       
       try {{
         for(let i=0; i<urls.length; i++) {{
@@ -797,8 +806,20 @@ async def homepage(request: Request):
             filesState.push(new File([blob], filename, {{type: blob.type}}));
         }}
         renderPreviews();
+        
+        // Scroll to top
         window.scrollTo({{top: 0, behavior: 'smooth'}});
-      }} catch (e) {{ alert('Failed to load example image.'); }}
+        
+        // Wait a tiny bit for UI update, then trigger generation
+        setTimeout(() => {{
+           logMsg("Example loaded. Starting comparison...", "log-info");
+           runBtn.click();
+        }}, 500);
+
+      }} catch (e) {{ 
+        logMsg("Failed to load example images.", "log-error");
+        alert('Failed to load example image.'); 
+      }}
     }}
 
     const exGrid = document.getElementById('examplesGrid');
@@ -853,7 +874,12 @@ async def homepage(request: Request):
     // --- Form Submission ---
     runBtn.onclick = async () => {{
       const prompt = promptInput.value.trim();
-      if(!prompt) return alert("Enter a prompt");
+      if(!prompt) {{
+        logMsg("Validation failed: Prompt is empty.", "log-error");
+        return alert("Enter a prompt");
+      }}
+
+      logMsg("Initializing generation sequence...", "log-info");
 
       const fd = new FormData();
       fd.append('prompt', prompt);
@@ -869,11 +895,15 @@ async def homepage(request: Request):
       loader.style.display = 'flex';
       runBtn.disabled = true;
 
+      logMsg("Sending request to backend. Running both VAE models...", "log-info");
+
       try {{
         const res = await fetch('/api/compare', {{ method: 'POST', body: fd }});
         const data = await res.json();
         
         if(data.success) {{
+          logMsg(`Success! Inference completed. Used seed: ${{data.seed}}`, "log-success");
+          
           imgStd.src = data.std_url;
           imgSmall.src = data.small_url;
           
@@ -889,13 +919,16 @@ async def homepage(request: Request):
             updateSlider(rect.left + rect.width / 2);
           }};
         }} else {{
+          logMsg("Error processing request: " + data.error, "log-error");
           alert('Error: ' + data.error);
         }}
       }} 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.", "");
       }}
     }};
   </script>