update app

app.py

@@ -165,7 +165,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-4B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -197,7 +196,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-2B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -229,7 +227,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3-VL model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -261,7 +258,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-450M model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -290,7 +286,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] LFM-1.6B model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         conversation = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -319,7 +314,6 @@ def generate_inference_stream(
             yield f"data: {json.dumps({'chunk': '[Error] Qwen3.5-2B-Unredacted-MAX model not loaded.'})}\n\n"
             yield "data: [DONE]\n\n"
             return
-
         messages = [{"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text",  "text":  full_prompt},
@@ -442,7 +436,7 @@ async def homepage(request: Request):
             position: relative;
             width: 1560px;
             min-height: calc(100vh - 50px);
-            height: 1060px;
+            height: 1080px;
             margin: 0 auto;
         }
 
@@ -478,7 +472,7 @@ async def homepage(request: Request):
         .node:hover {
             box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,106,247,0.3);
         }
-        .node.fixed-height { height: 390px; }
+        .node.fixed-height { height: 420px; }
 
         .node-header {
             background: var(--node-header);
@@ -524,25 +518,92 @@ async def homepage(request: Request):
 
         input[type="file"] { display: none; }
 
+        /* ── Image Upload Zone ── */
+        .upload-area {
+            position: relative;
+            display: flex; flex-direction: column; gap: 0;
+        }
+
         .file-upload {
             border: 1.5px dashed var(--node-border);
-            border-radius: 8px; padding: 14px 12px;
+            border-radius: 8px; padding: 18px 12px;
             text-align: center; cursor: pointer;
             font-size: 12px; color: var(--muted);
             transition: border-color 0.2s, background 0.2s;
             background: rgba(255,255,255,0.01);
             display: flex; flex-direction: column; align-items: center; gap: 6px;
         }
-        .file-upload:hover { border-color: var(--accent); background: rgba(124,106,247,0.04); }
+        .file-upload:hover {
+            border-color: var(--accent);
+            background: rgba(124,106,247,0.04);
+        }
         .file-upload svg { opacity: 0.5; transition: opacity 0.2s; }
         .file-upload:hover svg { opacity: 0.9; }
 
+        /* ── Preview wrapper ── */
+        .preview-wrap {
+            display: none;
+            position: relative;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid var(--node-border);
+            background: #000;
+        }
+        .preview-wrap.visible { display: block; }
+
         .img-preview {
-            width: 100%; height: 200px;
-            object-fit: contain; border-radius: 6px;
-            display: none; background: #000;
+            width: 100%;
+            height: 210px;
+            object-fit: contain;
+            display: block;
+        }
+
+        /* ── Clear button overlaid on preview ── */
+        .clear-btn {
+            position: absolute;
+            top: 7px; right: 7px;
+            width: 28px; height: 28px;
+            border-radius: 50%;
+            background: rgba(13,13,15,0.82);
             border: 1px solid var(--node-border);
+            color: var(--accent3);
+            cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+            transition: background 0.18s, border-color 0.18s, transform 0.12s;
+            z-index: 20;
+            backdrop-filter: blur(6px);
+        }
+        .clear-btn:hover {
+            background: rgba(255,107,107,0.18);
+            border-color: var(--accent3);
+            transform: scale(1.08);
+        }
+        .clear-btn:active { transform: scale(0.96); }
+        .clear-btn svg { pointer-events: none; }
+
+        /* ── Image filename chip ── */
+        .img-chip {
+            display: none;
+            align-items: center; gap: 7px;
+            background: rgba(124,106,247,0.08);
+            border: 1px solid rgba(124,106,247,0.22);
+            border-radius: 6px;
+            padding: 5px 10px;
+            font-size: 10px; color: var(--muted);
+            overflow: hidden;
+        }
+        .img-chip.visible { display: flex; }
+        .img-chip .chip-dot {
+            width: 6px; height: 6px; border-radius: 50%;
+            background: var(--accent2); flex-shrink: 0;
+            box-shadow: 0 0 5px var(--accent2);
+        }
+        .img-chip .chip-name {
+            overflow: hidden; text-overflow: ellipsis;
+            white-space: nowrap; flex: 1;
+            color: var(--text);
         }
+        .img-chip .chip-size { color: var(--muted); flex-shrink: 0; }
 
         select, textarea {
             width: 100%;
@@ -569,7 +630,9 @@ async def homepage(request: Request):
         }
         button.run-btn:hover   { opacity: 0.9; }
         button.run-btn:active  { transform: scale(0.98); }
-        button.run-btn:disabled { background: var(--node-border); cursor: not-allowed; color: #555; }
+        button.run-btn:disabled {
+            background: var(--node-border); cursor: not-allowed; color: #555;
+        }
 
         .output-box {
             background: rgba(0,0,0,0.4);
@@ -582,7 +645,7 @@ async def homepage(request: Request):
             font-family: 'JetBrains Mono', monospace;
         }
 
-        /* Grounding */
+        /* ── Grounding ── */
         .ground-canvas-wrap {
             position: relative; flex: 1;
             border: 1px solid var(--node-border);
@@ -665,6 +728,8 @@ async def homepage(request: Request):
         <div class="node-body">
             <div>
                 <label>Upload Image</label>
+
+                <!-- Drop zone (shown when no image) -->
                 <div class="file-upload" id="dropZone">
                     <svg width="34" height="34" viewBox="0 0 24 24" fill="none"
                          stroke="#7c6af7" stroke-width="1.5"
@@ -676,14 +741,34 @@ async def homepage(request: Request):
                     <span>Click or drop image here</span>
                     <input type="file" id="fileInput" accept="image/*">
                 </div>
-                <img id="imgPreview" class="img-preview" />
+
+                <!-- Preview (shown when image loaded) -->
+                <div class="preview-wrap" id="previewWrap">
+                    <img id="imgPreview" class="img-preview" />
+                    <!-- Clear button -->
+                    <button class="clear-btn" id="clearBtn" title="Remove image">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                             stroke="currentColor" stroke-width="2.5"
+                             stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"/>
+                            <line x1="6" y1="6" x2="18" y2="18"/>
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Filename chip -->
+                <div class="img-chip" id="imgChip" style="margin-top:7px;">
+                    <span class="chip-dot"></span>
+                    <span class="chip-name" id="chipName">—</span>
+                    <span class="chip-size" id="chipSize"></span>
+                </div>
             </div>
         </div>
         <div class="port out" id="port-img-out" style="top:50%;transform:translateY(-50%);"></div>
     </div>
 
     <!-- ─── ID 02 : Model Selector ─── -->
-    <div class="node fixed-height" id="node-model" style="left:48px; top:472px;">
+    <div class="node fixed-height" id="node-model" style="left:48px; top:502px;">
         <div class="node-header">
             <span><span class="status-dot" id="dot-model"></span>Model Selector</span>
             <span class="id">ID: 02</span>
@@ -755,7 +840,7 @@ async def homepage(request: Request):
     </div>
 
     <!-- ─── ID 05 : Grounding Visualiser ─── -->
-    <div class="node fixed-height" id="node-gnd" style="left:932px; top:472px;">
+    <div class="node fixed-height" id="node-gnd" style="left:932px; top:502px;">
         <div class="port in" id="port-gnd-in" style="top:50%;transform:translateY(-50%);"></div>
         <div class="node-header">
             <span><span class="status-dot" id="dot-gnd"></span>View Grounding</span>
@@ -799,10 +884,10 @@ function bezier(p1, p2) {
 
 function updateWires() {
     const wires = [
-        ['wire-img-task',   'port-img-out',  'port-task-in'],
-        ['wire-model-task', 'port-model-out', 'port-task-in'],
-        ['wire-task-out',   'port-task-out',  'port-out-in'],
-        ['wire-task-gnd',   'port-task-out',  'port-gnd-in'],
+        ['wire-img-task',   'port-img-out',   'port-task-in'],
+        ['wire-model-task', 'port-model-out',  'port-task-in'],
+        ['wire-task-out',   'port-task-out',   'port-out-in'],
+        ['wire-task-gnd',   'port-task-out',   'port-gnd-in'],
     ];
     for (const [id, from, to] of wires) {
         const el = document.getElementById(id);
@@ -839,26 +924,68 @@ document.addEventListener('scroll', updateWires, true);
 requestAnimationFrame(updateWires);
 
 // ══════════════════════════════════════════════
-//  FILE UPLOAD
+//  FILE UPLOAD + CLEAR
 // ══════════════════════════════════════════════
 let currentFile = null;
+
 const dropZone   = document.getElementById('dropZone');
 const fileInput  = document.getElementById('fileInput');
+const previewWrap= document.getElementById('previewWrap');
 const imgPreview = document.getElementById('imgPreview');
+const clearBtn   = document.getElementById('clearBtn');
+const imgChip    = document.getElementById('imgChip');
+const chipName   = document.getElementById('chipName');
+const chipSize   = document.getElementById('chipSize');
 const dotImg     = document.getElementById('dot-img');
 
+function formatBytes(bytes) {
+    if (bytes < 1024)       return bytes + ' B';
+    if (bytes < 1024*1024)  return (bytes/1024).toFixed(1) + ' KB';
+    return (bytes/(1024*1024)).toFixed(1) + ' MB';
+}
+
 function handleFile(file) {
     if (!file || !file.type.startsWith('image/')) return;
     currentFile = file;
+
+    // preview
     imgPreview.src = URL.createObjectURL(file);
-    imgPreview.style.display = 'block';
-    dropZone.style.display   = 'none';
+    previewWrap.classList.add('visible');
+    dropZone.style.display = 'none';
+
+    // chip
+    chipName.textContent = file.name;
+    chipSize.textContent = formatBytes(file.size);
+    imgChip.classList.add('visible');
+
     dotImg.classList.add('active');
     requestAnimationFrame(updateWires);
 }
 
+function clearImage() {
+    currentFile = null;
+
+    // reset preview
+    imgPreview.src = '';
+    previewWrap.classList.remove('visible');
+    dropZone.style.display = '';
+
+    // reset chip
+    imgChip.classList.remove('visible');
+    chipName.textContent = '—';
+    chipSize.textContent = '';
+
+    // reset file input so same file can be re-selected
+    fileInput.value = '';
+
+    dotImg.classList.remove('active');
+    requestAnimationFrame(updateWires);
+}
+
 dropZone.onclick     = () => fileInput.click();
 fileInput.onchange   = e  => handleFile(e.target.files[0]);
+clearBtn.onclick     = (e) => { e.stopPropagation(); clearImage(); };
+
 dropZone.ondragover  = e  => { e.preventDefault(); dropZone.style.borderColor = 'var(--accent)'; };
 dropZone.ondragleave = ()  => { dropZone.style.borderColor = ''; };
 dropZone.ondrop      = e  => {
@@ -922,9 +1049,9 @@ const MODEL_INFO = {
 modelSelect.onchange = () => {
     const info = MODEL_INFO[modelSelect.value];
     if (!info) return;
-    modelInfoBox.innerHTML              = info.html;
-    modelInfoBox.style.background       = info.bg;
-    modelInfoBox.style.border           = `1px solid ${info.border}`;
+    modelInfoBox.innerHTML = info.html;
+    modelInfoBox.style.background  = info.bg;
+    modelInfoBox.style.border      = `1px solid ${info.border}`;
 };
 
 // ══════════════════════════════════════════════
@@ -1083,7 +1210,7 @@ const dotGnd    = document.getElementById('dot-gnd');
 runBtn.onclick = async () => {
     if (!currentFile) { alert('Please upload an image into the Input Node.'); return; }
     const promptStr = promptInput.value.trim();
-    if (!promptStr) { alert('Please enter a prompt directive.'); return; }
+    if (!promptStr)  { alert('Please enter a prompt directive.'); return; }
 
     runBtn.disabled = true;
     btnLoader.style.display = 'inline-block';