Spaces:

prithivMLmods
/

Qwen3.8-27B-Object-Detection

Running on Zero

App Files Files Community

prithivMLmods commited on 6 days ago

Commit

dc24e06

verified ·

1 Parent(s): f00582f

update [input panel]

Browse files

Files changed (1) hide show

index.html +227 -134

index.html CHANGED Viewed

@@ -3,15 +3,15 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Qwen3.8 Studio · 27B Object Detection</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 *{box-sizing:border-box;margin:0;padding:0}
 :root{
     --bg:#0a0a0c;--panel:#131316;--panel2:#0e0e11;--canvas:#08080a;
-    --border:#2a1f1f;--border2:#3f2f2f;
     --text:#e4e4e7;--muted:#a1a1aa;--dim:#6b6b75;--faint:#4a4a52;
-    --accent:#FF4500;--accent2:#FF6B33;--accent3:#FF9966;
     --menubar-h:48px;--statusbar-h:30px;--rail-w:52px;--inspector-w:360px;--filmstrip-h:132px;
 }
 html,body{height:100%}
@@ -38,7 +38,7 @@ body{
     padding:0 16px;z-index:50;
 }
 .menubar-logo{
-    width:28px;height:28px;background:linear-gradient(135deg,#FF4500,#FF6B33,#FF9966);
     border-radius:8px;display:flex;align-items:center;justify-content:center;
     box-shadow:0 2px 8px rgba(255,69,0,.35);flex-shrink:0;
 }
@@ -115,6 +115,7 @@ body{
     font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);
     overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;
 }
 .canvas-stage{
     flex:1;position:relative;overflow:hidden;min-height:0;
@@ -155,7 +156,7 @@ body{
 .loader-text{font-size:13px;color:var(--muted);font-weight:500;text-align:center;padding:0 16px}
 .loader-bar-track{width:220px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
 .loader-bar-fill{
-    height:100%;width:100%;background:linear-gradient(90deg,#FF4500,#FF6B33,#FF4500);
     background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
     transition:width .3s ease;
 }
@@ -169,8 +170,9 @@ body{
 }
 .filmstrip-section{
     display:flex;flex-direction:column;min-width:0;padding:8px 0 8px 14px;
-    flex:1;
 }
 .filmstrip-label{
     font-size:9px;font-weight:700;color:var(--faint);letter-spacing:1.2px;
     text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px;
@@ -287,7 +289,7 @@ body{
     box-shadow:0 4px 16px rgba(255,69,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
 }
 .btn-run:hover:not(:disabled){
-    background:linear-gradient(135deg,#FF6B33,#FF4500);transform:translateY(-1px);
     box-shadow:0 6px 24px rgba(255,69,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
 }
 .btn-run:active:not(:disabled){transform:translateY(0)}
@@ -325,33 +327,6 @@ body{
     font-weight:500;padding:2px 7px;background:var(--panel2);border:1px solid var(--border);
     border-radius:5px;color:var(--muted);flex-shrink:0;
 }
-.dice-btn{
-    display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
-    background:var(--panel2);border:1px solid var(--border);border-radius:5px;cursor:pointer;
-    color:var(--dim);transition:all .15s;flex-shrink:0;padding:0;
-}
-.dice-btn:hover{border-color:var(--accent);color:var(--accent3)}
-.dice-btn svg{width:13px;height:13px;fill:currentColor}
-.checkbox-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px}
-.checkbox-row input[type="checkbox"]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
-.checkbox-row label{color:var(--muted);font-size:12px;cursor:pointer}
-/* Text Output Area */
-.text-output-area {
-    width: 100%;
-    height: 140px;
-    background: var(--panel2);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 10px 13px;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    color: var(--accent3);
-    resize: vertical;
-    outline: none;
-    line-height: 1.5;
-    margin-top: 10px;
-}
 /* Examples page */
 .examples-list{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
@@ -479,6 +454,7 @@ body{
     .canvas-stage img.modern-out-img{max-width:calc(100% - 20px);max-height:52vh}
     .canvas-placeholder .cp-sub{font-size:11px;max-width:280px}
     .filmstrip{flex-direction:column;height:auto;max-height:none}
     .filmstrip-section{padding:8px 0 8px 12px}
     .fs-thumb{width:68px;height:68px}
     .fs-add{width:68px;height:68px}
@@ -514,9 +490,9 @@ body{
     <div class="menubar-logo">
       <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><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"/></svg>
     </div>
-    <div class="menubar-title">Qwen3.8 Studio <span>/ 27B Object Detection</span></div>
     <span class="menubar-badge">27B</span>
-    <span class="menubar-badge fast">VISION MODEL</span>
     <div class="menubar-spacer"></div>
     <div class="menubar-status"><span class="dot" id="conn-dot"></span><span id="conn-text">connecting…</span></div>
     <a href="https://github.com/PRITHIVSAKTHIUR/Qwen3.8-27B-Object-Detection"
@@ -540,10 +516,7 @@ body{
     </button>
     <div class="rail-sep"></div>
     <div class="rail-label">Result</div>
-    <button class="rail-btn" id="use-as-input-btn" title="Use result as input" disabled>
-      <svg viewBox="0 0 24 24"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
-    </button>
-    <button class="rail-btn" id="dl-btn-output" title="Download result image" disabled>
       <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
     </button>
     <button class="rail-btn" id="zoom-btn" title="Zoom result" disabled>
@@ -559,12 +532,13 @@ body{
         <button class="seg-btn" id="seg-input">Input</button>
       </div>
       <div class="canvas-meta" id="canvas-meta">No image loaded</div>
     </div>
     <div class="canvas-stage" id="output-image-container">
       <div class="modern-loader" id="output-loader">
         <div class="loader-spinner"></div>
-        <div class="loader-text" id="loader-text">Running inference&hellip;</div>
         <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
       </div>
@@ -581,6 +555,18 @@ body{
         </div>
       </div>
     </div>
   </div>
   <!-- ══ Inspector ══ -->
@@ -595,7 +581,7 @@ body{
       <div class="insp-section">
         <div class="insp-section-title"><span>Instruction</span><span class="char-count" id="char-count">0</span></div>
         <textarea id="custom-prompt-input" class="modern-textarea" rows="3"
-                  placeholder="e.g., Detect all cars / Point to the red sign / Map a path from door to lamp"></textarea>
       </div>
       <div class="insp-section">
@@ -606,9 +592,9 @@ body{
       <div class="insp-section">
         <div class="insp-section-title"><span>Task Type</span></div>
         <select id="custom-task-select" class="lora-native-select">
-          <option value="Detect">Object Detection (Bounding Boxes)</option>
-          <option value="Point">Point Localization (Keypoints)</option>
-          <option value="Spatial">Spatial Guidance (Paths/Routes)</option>
         </select>
       </div>
@@ -621,33 +607,32 @@ body{
       </div>
       <div class="insp-section">
-        <div class="insp-section-title"><span>Advanced Settings</span></div>
         <div class="slider-row">
-          <label>GPU Dur.</label>
-          <input type="range" id="custom-gpu-dur" min="60" max="300" step="30" value="90">
-          <span class="slider-val" id="custom-gpu-dur-val">90s</span>
         </div>
         <div class="slider-row">
-          <label>Radius</label>
-          <input type="range" id="custom-radius" min="2" max="20" step="1" value="6">
-          <span class="slider-val" id="custom-radius-val">6px</span>
         </div>
         <div class="slider-row">
-          <label>Thick</label>
-          <input type="range" id="custom-thick" min="1" max="8" step="1" value="2">
-          <span class="slider-val" id="custom-thick-val">2px</span>
         </div>
         <div class="slider-row">
-          <label>Text</label>
-          <input type="range" id="custom-text" min="0.2" max="1.5" step="0.05" value="0.5">
-          <span class="slider-val" id="custom-text-val">0.5</span>
         </div>
-        <textarea id="text-output-area" class="text-output-area" placeholder="JSON / Text output will appear here..." readonly></textarea>
       </div>
     </div>
@@ -688,9 +673,12 @@ const btnClear     = document.getElementById('tb-clear');
 const promptInput  = document.getElementById('custom-prompt-input');
 const charCount    = document.getElementById('char-count');
 const taskSelect   = document.getElementById('custom-task-select');
 const runBtn       = document.getElementById('custom-run-btn');
 const runBtnLabel  = document.getElementById('run-btn-label');
 const cancelBtn    = document.getElementById('custom-cancel-btn');
 const sbStatus     = document.getElementById('sb-status');
 const loader       = document.getElementById('output-loader');
 const loaderText   = document.getElementById('loader-text');
@@ -698,9 +686,17 @@ const loaderFill   = document.getElementById('loader-bar-fill');
 const outBody      = document.getElementById('output-image-container');
 const outPh        = document.getElementById('output-placeholder');
 const dlBtn        = document.getElementById('dl-btn-output');
-const useAsInputBtn= document.getElementById('use-as-input-btn');
 const zoomBtn      = document.getElementById('zoom-btn');
-const textOutput   = document.getElementById('text-output-area');
 const lightbox     = document.getElementById('lightbox');
 const lightboxImg  = document.getElementById('lightbox-img');
 const dropOverlay  = document.getElementById('drop-overlay');
@@ -709,27 +705,24 @@ const segResult    = document.getElementById('seg-result');
 const segInput     = document.getElementById('seg-input');
 const connDot      = document.getElementById('conn-dot');
 const connText     = document.getElementById('conn-text');
-const gpuDurSlider = document.getElementById('custom-gpu-dur');
-const gpuDurVal    = document.getElementById('custom-gpu-dur-val');
-const radiusSlider = document.getElementById('custom-radius');
-const radiusVal    = document.getElementById('custom-radius-val');
-const thickSlider  = document.getElementById('custom-thick');
-const thickVal     = document.getElementById('custom-thick-val');
-const textSlider   = document.getElementById('custom-text');
-const textVal      = document.getElementById('custom-text-val');
 /* ── State ── */
-let currentImage = null;
 let toastTimer = null;
 let running = false;
 let currentJob = null;
-let currentResult = null;
-let viewMode = 'result';
 const SUGGESTIONS = [
     ['Detect Cars', 'Detect all the cars.'],
-    ['Point to Red', 'Point to the red object.'],
-    ['Map Path', 'Map a path from the door to the window.'],
 ];
 /* ── Toast ── */
@@ -774,30 +767,37 @@ function setViewMode(mode) {
 segResult.addEventListener('click', () => setViewMode('result'));
 segInput.addEventListener('click', () => setViewMode('input'));
 function renderCanvas() {
-    outBody.querySelectorAll('img.modern-out-img').forEach(e => e.remove());
     const showResult = viewMode === 'result' && currentResult;
     const showInput  = viewMode === 'input' && currentImage;
     if (showResult || showInput) {
         outPh.style.display = 'none';
-        const img = document.createElement('img');
-        img.className = 'modern-out-img';
-        img.addEventListener('click', () => {
-            if (img.src) { lightboxImg.src = img.src; lightbox.classList.add('visible'); }
-        });
-        outBody.appendChild(img);
         if (showResult) {
-            img.src = currentResult.image;
-            canvasMeta.textContent = 'result · ' + (currentResult.task || 'inference');
         } else {
             img.src = currentImage.b64;
             canvasMeta.textContent = 'input · ' + (currentImage.name || 'image');
         }
     } else {
         outPh.style.display = '';
-        canvasMeta.textContent = currentImage ? 'input ready — run an inference' : 'No image loaded';
     }
     updateRailState();
 }
@@ -806,38 +806,74 @@ function updateRailState() {
     const hasResult = !!currentResult;
     dlBtn.disabled = !hasResult;
     zoomBtn.disabled = !hasResult && !currentImage;
-    useAsInputBtn.disabled = !hasResult;
     btnRemove.disabled = !currentImage;
     btnClear.disabled = !currentImage;
 }
 /* ── Inputs filmstrip ── */
 function setImage(b64, name) {
     currentImage = { b64, name: name || 'image' };
-    renderCanvas();
-    updateRailState();
 }
 function removeImage() {
     currentImage = null;
     renderCanvas();
 }
 function clearAll() {
     currentImage = null;
-    currentResult = null;
-    textOutput.value = '';
     renderCanvas();
 }
 function processFiles(files) {
     const file = files && files[0];
     if (!file || !file.type.startsWith('image/')) return 0;
     const reader = new FileReader();
-    reader.onload = (e) => {
-        setImage(e.target.result, file.name);
-        setViewMode('input');
-    };
     reader.readAsDataURL(file);
     return 1;
 }
@@ -932,14 +968,17 @@ function bindSlider(id, suffix='') {
     const valSpan = document.getElementById(id + '-val');
     slider.addEventListener('input', () => { valSpan.textContent = slider.value + suffix; });
 }
-bindSlider('custom-gpu-dur', 's');
-bindSlider('custom-radius', 'px');
-bindSlider('custom-thick', 'px');
-bindSlider('custom-text', '');
 /* ── Loader ── */
 function showLoader(text) {
-    loaderText.textContent = text || 'Running inference…';
     loaderFill.classList.remove('determinate');
     loaderFill.style.width = '100%';
     loader.classList.add('active');
@@ -957,30 +996,62 @@ function hideLoader(statusText, cls) {
     setStatus(statusText || 'Done', cls || 'done');
 }
 /* ── Lightbox ── */
 lightbox.addEventListener('click', () => lightbox.classList.remove('visible'));
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lightbox.classList.remove('visible'); });
 zoomBtn.addEventListener('click', () => {
-    const src = (viewMode === 'result' && currentResult) ? currentResult.image
               : (currentImage ? currentImage.b64 : null);
     if (src) { lightboxImg.src = src; lightbox.classList.add('visible'); }
 });
-/* ── Download / chain ── */
 dlBtn.addEventListener('click', () => {
-    if (currentResult && currentResult.image) {
         const a = document.createElement('a');
-        a.href = currentResult.image;
-        a.download = 'qwen_inference_output.png';
         document.body.appendChild(a); a.click(); document.body.removeChild(a);
     }
 });
-useAsInputBtn.addEventListener('click', () => {
-    if (!currentResult) return;
-    setImage(currentResult.image, 'inference_result.png');
-    setViewMode('input');
-    showToast('Result set as input image', 'info');
-});
 /* ── Backend connection ── */
 let client = null;
@@ -1011,13 +1082,19 @@ function renderConfig(cfg) {
         card.innerHTML =
             '<div class="example-thumb-wrap">' + thumbHtml + '</div>'
             + '<div class="example-body">'
-            +   '<div class="example-meta"><span class="example-lora-badge">' + ex.task + '</span></div>'
             +   '<div class="example-prompt-text"></div>'
             + '</div>';
         card.querySelector('.example-prompt-text').textContent = promptShort;
         card.addEventListener('click', () => loadExample(card, ex.idx));
         list.appendChild(card);
     });
 }
 async function loadExample(card, idx) {
@@ -1030,9 +1107,10 @@ async function loadExample(card, idx) {
         const data = result.data[0];
         if (data && data.status === 'ok' && data.image) {
             if (data.prompt) { promptInput.value = data.prompt; updateCharCount(); }
-            if (data.task)   taskSelect.value = data.task;
             setImage(data.image, data.name || 'example.jpg');
-            setViewMode('input');
             tabEdit.click();
             showToast('Example loaded', 'info');
         } else {
@@ -1059,7 +1137,7 @@ function validateBeforeRun() {
     const hasImage = !!currentImage;
     if (!hasImage && !promptVal) { showToast('Please upload an image and enter a prompt', 'error'); flashPromptError(); return false; }
     if (!hasImage)  { showToast('Please upload an image', 'error'); return false; }
-    if (!promptVal) { showToast('Please enter a prompt', 'warning'); flashPromptError(); return false; }
     return true;
 }
@@ -1079,14 +1157,17 @@ async function runEdit() {
     setViewMode('result');
     showLoader('Submitting to queue…');
     const payload = {
         image_b64: currentImage ? currentImage.b64 : '',
-        prompt: promptInput.value,
-        task: taskSelect.value,
-        point_radius: parseInt(radiusSlider.value) || 6,
-        box_thickness: parseInt(thickSlider.value) || 2,
-        text_scale: parseFloat(textSlider.value) || 0.5,
-        gpu_duration_seconds: parseInt(gpuDurSlider.value) || 90,
     };
     try {
@@ -1101,27 +1182,36 @@ async function runEdit() {
                     setStatus('Queued');
                 } else if (msg.status === 'generating') {
                     setStatus('Processing…');
-                    setLoaderProgress('Running Qwen3.8 vision model…', null);
                 } else if (msg.status === 'error') {
                     throw new Error(msg.message || 'Generation failed');
                 }
             } else if (msg.type === 'data') {
                 const out = msg.data && msg.data[0];
                 if (out && out.image) {
-                    currentResult = out;
-                    if (out.text) {
-                        textOutput.value = out.text;
-                    }
                     hideLoader('Done', 'done');
-                    showToast('Inference completed successfully', 'info');
-                    renderCanvas();
                 } else {
                     hideLoader('Done', 'done');
                 }
             }
         }
     } catch (e) {
-        console.error('Inference error:', e);
         hideLoader('Error', 'error');
         const msg = (e && e.message) ? e.message : 'Generation failed';
         showToast(msg.length > 120 ? msg.slice(0, 120) + '…' : msg, 'error');
@@ -1140,7 +1230,7 @@ cancelBtn.addEventListener('click', async () => {
     }
     setRunningUI(false);
     hideLoader('Cancelled');
-    showToast('Inference cancelled', 'warning');
 });
 document.addEventListener('keydown', (e) => {
@@ -1150,6 +1240,9 @@ document.addEventListener('keydown', (e) => {
     }
 });
 renderCanvas();
 </script>
 </body>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Qwen3.8 Studio · Object Detection</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 *{box-sizing:border-box;margin:0;padding:0}
 :root{
     --bg:#0a0a0c;--panel:#131316;--panel2:#0e0e11;--canvas:#08080a;
+    --border:#2a2323;--border2:#3f2f2f;
     --text:#e4e4e7;--muted:#a1a1aa;--dim:#6b6b75;--faint:#4a4a52;
+    --accent:#FF4500;--accent2:#FF6347;--accent3:#FFA07A;
     --menubar-h:48px;--statusbar-h:30px;--rail-w:52px;--inspector-w:360px;--filmstrip-h:132px;
 }
 html,body{height:100%}
     padding:0 16px;z-index:50;
 }
 .menubar-logo{
+    width:28px;height:28px;background:linear-gradient(135deg,#FF4500,#FF6347,#FFA07A);
     border-radius:8px;display:flex;align-items:center;justify-content:center;
     box-shadow:0 2px 8px rgba(255,69,0,.35);flex-shrink:0;
 }
     font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);
     overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;
 }
+.canvas-actions{display:flex;align-items:center;gap:6px}
 .canvas-stage{
     flex:1;position:relative;overflow:hidden;min-height:0;
 .loader-text{font-size:13px;color:var(--muted);font-weight:500;text-align:center;padding:0 16px}
 .loader-bar-track{width:220px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
 .loader-bar-fill{
+    height:100%;width:100%;background:linear-gradient(90deg,#FF4500,#FF6347,#FF4500);
     background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
     transition:width .3s ease;
 }
 }
 .filmstrip-section{
     display:flex;flex-direction:column;min-width:0;padding:8px 0 8px 14px;
 }
+.filmstrip-section.inputs{flex:1.2;border-right:1px solid var(--border)}
+.filmstrip-section.history{flex:1}
 .filmstrip-label{
     font-size:9px;font-weight:700;color:var(--faint);letter-spacing:1.2px;
     text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px;
     box-shadow:0 4px 16px rgba(255,69,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
 }
 .btn-run:hover:not(:disabled){
+    background:linear-gradient(135deg,#FF6347,#FF4500);transform:translateY(-1px);
     box-shadow:0 6px 24px rgba(255,69,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
 }
 .btn-run:active:not(:disabled){transform:translateY(0)}
     font-weight:500;padding:2px 7px;background:var(--panel2);border:1px solid var(--border);
     border-radius:5px;color:var(--muted);flex-shrink:0;
 }
 /* Examples page */
 .examples-list{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
     .canvas-stage img.modern-out-img{max-width:calc(100% - 20px);max-height:52vh}
     .canvas-placeholder .cp-sub{font-size:11px;max-width:280px}
     .filmstrip{flex-direction:column;height:auto;max-height:none}
+    .filmstrip-section.inputs{border-right:none;border-bottom:1px solid var(--border)}
     .filmstrip-section{padding:8px 0 8px 12px}
     .fs-thumb{width:68px;height:68px}
     .fs-add{width:68px;height:68px}
     <div class="menubar-logo">
       <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><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"/></svg>
     </div>
+    <div class="menubar-title">Qwen3.8 Studio <span>/ Object Detection</span></div>
     <span class="menubar-badge">27B</span>
+    <span class="menubar-badge fast">ZERO GPU</span>
     <div class="menubar-spacer"></div>
     <div class="menubar-status"><span class="dot" id="conn-dot"></span><span id="conn-text">connecting…</span></div>
     <a href="https://github.com/PRITHIVSAKTHIUR/Qwen3.8-27B-Object-Detection"
     </button>
     <div class="rail-sep"></div>
     <div class="rail-label">Result</div>
+    <button class="rail-btn" id="dl-btn-output" title="Download result" disabled>
       <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
     </button>
     <button class="rail-btn" id="zoom-btn" title="Zoom result" disabled>
         <button class="seg-btn" id="seg-input">Input</button>
       </div>
       <div class="canvas-meta" id="canvas-meta">No image loaded</div>
+      <div class="canvas-actions"></div>
     </div>
     <div class="canvas-stage" id="output-image-container">
       <div class="modern-loader" id="output-loader">
         <div class="loader-spinner"></div>
+        <div class="loader-text" id="loader-text">Processing image&hellip;</div>
         <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
       </div>
         </div>
       </div>
     </div>
+    <!-- Filmstrip -->
+    <div class="filmstrip">
+      <div class="filmstrip-section inputs">
+        <div class="filmstrip-label">Input <span class="count" id="tb-image-count">0</span></div>
+        <div class="filmstrip-row" id="image-gallery-grid"></div>
+      </div>
+      <div class="filmstrip-section history">
+        <div class="filmstrip-label">History <span class="count" id="history-count">0</span></div>
+        <div class="filmstrip-row" id="history-strip"></div>
+      </div>
+    </div>
   </div>
   <!-- ══ Inspector ══ -->
       <div class="insp-section">
         <div class="insp-section-title"><span>Instruction</span><span class="char-count" id="char-count">0</span></div>
         <textarea id="custom-prompt-input" class="modern-textarea" rows="3"
+                  placeholder="e.g., Detect all cars, Point to the red sign, Map a path from door to window…"></textarea>
       </div>
       <div class="insp-section">
       <div class="insp-section">
         <div class="insp-section-title"><span>Task Type</span></div>
         <select id="custom-task-select" class="lora-native-select">
+            <option value="Detect">Object Detection (Bounding Boxes)</option>
+            <option value="Point">Point Localization (Keypoints)</option>
+            <option value="Spatial">Spatial Guidance (Path Mapping)</option>
         </select>
       </div>
       </div>
       <div class="insp-section">
+        <div class="insp-section-title"><span>Output JSON</span></div>
+        <textarea id="custom-output-json" class="modern-textarea" rows="6" readonly placeholder="Result JSON will appear here..."></textarea>
+      </div>
+      <div class="insp-section">
+        <div class="insp-section-title"><span>Advanced</span></div>
         <div class="slider-row">
+          <label>Point R</label>
+          <input type="range" id="custom-point-r" min="2" max="20" step="1" value="4">
+          <span class="slider-val" id="custom-point-r-val">4</span>
         </div>
         <div class="slider-row">
+          <label>Box W</label>
+          <input type="range" id="custom-box-w" min="1" max="8" step="1" value="1">
+          <span class="slider-val" id="custom-box-w-val">1</span>
         </div>
         <div class="slider-row">
+          <label>Txt Scale</label>
+          <input type="range" id="custom-txt-s" min="0.2" max="1.5" step="0.05" value="0.4">
+          <span class="slider-val" id="custom-txt-s-val">0.4</span>
         </div>
         <div class="slider-row">
+          <label>GPU Dur</label>
+          <input type="range" id="custom-gpu-dur" min="0" max="6" step="1" value="1">
+          <span class="slider-val" id="custom-gpu-dur-val">90s</span>
         </div>
       </div>
     </div>
 const promptInput  = document.getElementById('custom-prompt-input');
 const charCount    = document.getElementById('char-count');
 const taskSelect   = document.getElementById('custom-task-select');
+const outputJson   = document.getElementById('custom-output-json');
 const runBtn       = document.getElementById('custom-run-btn');
 const runBtnLabel  = document.getElementById('run-btn-label');
 const cancelBtn    = document.getElementById('custom-cancel-btn');
+const imgCountTb   = document.getElementById('tb-image-count');
+const imgCountSb   = document.getElementById('sb-image-count');
 const sbStatus     = document.getElementById('sb-status');
 const loader       = document.getElementById('output-loader');
 const loaderText   = document.getElementById('loader-text');
 const outBody      = document.getElementById('output-image-container');
 const outPh        = document.getElementById('output-placeholder');
 const dlBtn        = document.getElementById('dl-btn-output');
 const zoomBtn      = document.getElementById('zoom-btn');
+const historyStrip = document.getElementById('history-strip');
+const historyCount = document.getElementById('history-count');
+const pointRSlider = document.getElementById('custom-point-r');
+const pointRVal    = document.getElementById('custom-point-r-val');
+const boxWSlider   = document.getElementById('custom-box-w');
+const boxWVal      = document.getElementById('custom-box-w-val');
+const txtSSlider   = document.getElementById('custom-txt-s');
+const txtSVal      = document.getElementById('custom-txt-s-val');
+const gpuDurSlider = document.getElementById('custom-gpu-dur');
+const gpuDurVal    = document.getElementById('custom-gpu-dur-val');
 const lightbox     = document.getElementById('lightbox');
 const lightboxImg  = document.getElementById('lightbox-img');
 const dropOverlay  = document.getElementById('drop-overlay');
 const segInput     = document.getElementById('seg-input');
 const connDot      = document.getElementById('conn-dot');
 const connText     = document.getElementById('conn-text');
 /* ── State ── */
+let currentImage = null;   // {b64, name}
 let toastTimer = null;
 let running = false;
 let currentJob = null;
+let currentResult = null;  // {b64, text}
+let history = [];
+let historyIdx = -1;
+let viewMode = 'result';    // 'result' | 'input'
+const GPU_DURATIONS = [60, 90, 120, 150, 180, 250, 300];
 const SUGGESTIONS = [
     ['Detect Cars', 'Detect all the cars.'],
+    ['Detect People', 'Detect all the people in the scene.'],
+    ['Point to Sign', 'Point to the red stop sign.'],
+    ['Spatial Path', 'Map a path from the door to the lamp.'],
 ];
 /* ── Toast ── */
 segResult.addEventListener('click', () => setViewMode('result'));
 segInput.addEventListener('click', () => setViewMode('input'));
+function getCanvasImg() { return outBody.querySelector('img.modern-out-img'); }
 function renderCanvas() {
+    let img = getCanvasImg();
     const showResult = viewMode === 'result' && currentResult;
     const showInput  = viewMode === 'input' && currentImage;
     if (showResult || showInput) {
         outPh.style.display = 'none';
+        if (!img) {
+            img = document.createElement('img');
+            img.className = 'modern-out-img';
+            img.addEventListener('click', () => {
+                if (img.src) { lightboxImg.src = img.src; lightbox.classList.add('visible'); }
+            });
+            outBody.appendChild(img);
+        }
+        img.style.display = '';
         if (showResult) {
+            img.src = currentResult.b64;
+            canvasMeta.textContent = 'result';
         } else {
             img.src = currentImage.b64;
             canvasMeta.textContent = 'input · ' + (currentImage.name || 'image');
         }
     } else {
+        if (img) img.style.display = 'none';
         outPh.style.display = '';
+        canvasMeta.textContent = currentImage
+            ? 'input ready — run an edit'
+            : 'No image loaded';
     }
     updateRailState();
 }
     const hasResult = !!currentResult;
     dlBtn.disabled = !hasResult;
     zoomBtn.disabled = !hasResult && !currentImage;
     btnRemove.disabled = !currentImage;
     btnClear.disabled = !currentImage;
 }
 /* ── Inputs filmstrip ── */
+function updateCounts() {
+    const n = currentImage ? 1 : 0;
+    imgCountTb.textContent = n;
+    imgCountSb.textContent = n > 0 ? '1 input · ' + history.length + ' result' + (history.length === 1 ? '' : 's') : 'No input';
+}
 function setImage(b64, name) {
     currentImage = { b64, name: name || 'image' };
+    renderFilmstrip();
+    updateCounts();
+    if (!currentResult || viewMode === 'input') renderCanvas();
+    else setViewMode('input');
 }
 function removeImage() {
     currentImage = null;
+    renderFilmstrip();
+    updateCounts();
     renderCanvas();
 }
 function clearAll() {
     currentImage = null;
+    renderFilmstrip();
+    updateCounts();
     renderCanvas();
 }
+function renderFilmstrip() {
+    galleryGrid.innerHTML = '';
+    if (!currentImage) {
+        const empty = document.createElement('div');
+        empty.className = 'fs-empty';
+        empty.textContent = 'Drop or paste an image…';
+        galleryGrid.appendChild(empty);
+    } else {
+        const t = document.createElement('div');
+        t.className = 'fs-thumb selected';
+        t.innerHTML = '<img src="' + currentImage.b64 + '" alt="">' +
+                      '<span class="fs-badge">input</span>' +
+                      '<button class="fs-remove">✕</button>';
+        t.addEventListener('click', (e) => {
+            if (e.target.closest('.fs-remove')) return;
+            setViewMode('input');
+        });
+        t.querySelector('.fs-remove').addEventListener('click', (e) => {
+            e.stopPropagation(); removeImage();
+        });
+        galleryGrid.appendChild(t);
+    }
+    const add = document.createElement('div');
+    add.className = 'fs-add';
+    add.innerHTML = '<span class="add-icon">+</span><span class="add-text">' + (currentImage ? 'Replace' : 'Add') + '</span>';
+    add.addEventListener('click', () => fileInput.click());
+    galleryGrid.appendChild(add);
+    updateRailState();
+}
 function processFiles(files) {
     const file = files && files[0];
     if (!file || !file.type.startsWith('image/')) return 0;
     const reader = new FileReader();
+    reader.onload = (e) => setImage(e.target.result, file.name);
     reader.readAsDataURL(file);
     return 1;
 }
     const valSpan = document.getElementById(id + '-val');
     slider.addEventListener('input', () => { valSpan.textContent = slider.value + suffix; });
 }
+bindSlider('custom-point-r');
+bindSlider('custom-box-w');
+bindSlider('custom-txt-s');
+gpuDurSlider.addEventListener('input', () => {
+    gpuDurVal.textContent = GPU_DURATIONS[gpuDurSlider.value] + 's';
+});
 /* ── Loader ── */
 function showLoader(text) {
+    loaderText.textContent = text || 'Processing image…';
     loaderFill.classList.remove('determinate');
     loaderFill.style.width = '100%';
     loader.classList.add('active');
     setStatus(statusText || 'Done', cls || 'done');
 }
+/* ── Result / history ── */
+function showResult(entry) {
+    currentResult = entry;
+    setViewMode('result');
+    outputJson.value = entry.text || '';
+    dlBtn.disabled = false;
+    zoomBtn.disabled = false;
+}
+function renderHistory() {
+    historyStrip.innerHTML = '';
+    historyCount.textContent = history.length;
+    if (history.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'fs-empty';
+        empty.textContent = 'No results yet';
+        historyStrip.appendChild(empty);
+        return;
+    }
+    history.forEach((entry, i) => {
+        const t = document.createElement('div');
+        t.className = 'fs-thumb' + (i === historyIdx ? ' selected' : '');
+        const im = document.createElement('img');
+        im.src = entry.b64;
+        t.appendChild(im);
+        t.addEventListener('click', () => { historyIdx = i; showResult(history[i]); renderHistory(); });
+        historyStrip.appendChild(t);
+    });
+}
+function pushHistory(entry) {
+    history.push(entry);
+    historyIdx = history.length - 1;
+    renderHistory();
+    updateCounts();
+}
 /* ── Lightbox ── */
 lightbox.addEventListener('click', () => lightbox.classList.remove('visible'));
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lightbox.classList.remove('visible'); });
 zoomBtn.addEventListener('click', () => {
+    const img = getCanvasImg();
+    const src = (viewMode === 'result' && currentResult) ? currentResult.b64
               : (currentImage ? currentImage.b64 : null);
     if (src) { lightboxImg.src = src; lightbox.classList.add('visible'); }
 });
+/* ── Download ── */
 dlBtn.addEventListener('click', () => {
+    if (currentResult && currentResult.b64) {
         const a = document.createElement('a');
+        a.href = currentResult.b64;
+        a.download = 'qwen_object_detection.png';
         document.body.appendChild(a); a.click(); document.body.removeChild(a);
     }
 });
 /* ── Backend connection ── */
 let client = null;
         card.innerHTML =
             '<div class="example-thumb-wrap">' + thumbHtml + '</div>'
             + '<div class="example-body">'
+            +   '<div class="example-meta"><span class="example-lora-badge"></span></div>'
             +   '<div class="example-prompt-text"></div>'
             + '</div>';
+        card.querySelector('.example-lora-badge').textContent = ex.task;
         card.querySelector('.example-prompt-text').textContent = promptShort;
         card.addEventListener('click', () => loadExample(card, ex.idx));
         list.appendChild(card);
     });
+    if (cfg.default_gpu_idx !== undefined) {
+        gpuDurSlider.value = cfg.default_gpu_idx;
+        gpuDurVal.textContent = GPU_DURATIONS[cfg.default_gpu_idx] + 's';
+    }
 }
 async function loadExample(card, idx) {
         const data = result.data[0];
         if (data && data.status === 'ok' && data.image) {
             if (data.prompt) { promptInput.value = data.prompt; updateCharCount(); }
+            if (data.task) {
+                taskSelect.value = data.task;
+            }
             setImage(data.image, data.name || 'example.jpg');
             tabEdit.click();
             showToast('Example loaded', 'info');
         } else {
     const hasImage = !!currentImage;
     if (!hasImage && !promptVal) { showToast('Please upload an image and enter a prompt', 'error'); flashPromptError(); return false; }
     if (!hasImage)  { showToast('Please upload an image', 'error'); return false; }
+    if (!promptVal) { showToast('Please enter an edit prompt', 'warning'); flashPromptError(); return false; }
     return true;
 }
     setViewMode('result');
     showLoader('Submitting to queue…');
+    const usedPrompt = promptInput.value;
+    const usedTask = taskSelect.value;
     const payload = {
         image_b64: currentImage ? currentImage.b64 : '',
+        prompt: usedPrompt,
+        task_type: usedTask,
+        point_radius: parseInt(pointRSlider.value) || 4,
+        box_thickness: parseInt(boxWSlider.value) || 1,
+        text_scale: parseFloat(txtSSlider.value) || 0.4,
+        gpu_duration_seconds: GPU_DURATIONS[gpuDurSlider.value],
     };
     try {
                     setStatus('Queued');
                 } else if (msg.status === 'generating') {
                     setStatus('Processing…');
+                    const pd = msg.progress_data;
+                    if (pd && pd.length > 0) {
+                        const p = pd[pd.length - 1];
+                        if (p.index != null && p.length) {
+                            const pct = Math.round((p.index / p.length) * 100);
+                            setLoaderProgress('Generating… ' + p.index + '/' + p.length + ' (' + pct + '%)', p.index / p.length);
+                        } else {
+                            setLoaderProgress('Generating…', null);
+                        }
+                    } else {
+                        setLoaderProgress('Processing image…', null);
+                    }
                 } else if (msg.status === 'error') {
                     throw new Error(msg.message || 'Generation failed');
                 }
             } else if (msg.type === 'data') {
                 const out = msg.data && msg.data[0];
                 if (out && out.image) {
+                    const entry = { b64: out.image, text: out.text };
+                    showResult(entry);
+                    pushHistory(entry);
                     hideLoader('Done', 'done');
+                    showToast('Inference successful', 'info');
                 } else {
                     hideLoader('Done', 'done');
                 }
             }
         }
     } catch (e) {
+        console.error('Edit error:', e);
         hideLoader('Error', 'error');
         const msg = (e && e.message) ? e.message : 'Generation failed';
         showToast(msg.length > 120 ? msg.slice(0, 120) + '…' : msg, 'error');
     }
     setRunningUI(false);
     hideLoader('Cancelled');
+    showToast('Generation cancelled', 'warning');
 });
 document.addEventListener('keydown', (e) => {
     }
 });
+renderFilmstrip();
+renderHistory();
+updateCounts();
 renderCanvas();
 </script>
 </body>