update

index.html

@@ -9,7 +9,7 @@
 *{box-sizing:border-box;margin:0;padding:0}
 :root{
     --bg:#0a0a0c;--panel:#131316;--panel2:#0e0e11;--canvas:#08080a;
-    --border:#2a2a23;--border2:#3f3f2f;
+    --border:#2a241a;--border2:#3f342a;
     --text:#e4e4e7;--muted:#a1a1aa;--dim:#6b6b75;--faint:#4a4a52;
     --accent:#FFA500;--accent2:#FFB733;--accent3:#FFCC66;
     --menubar-h:48px;--statusbar-h:30px;--rail-w:52px;--inspector-w:360px;--filmstrip-h:132px;
@@ -115,6 +115,14 @@ body{
     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}
+.out-seed-chip{
+    display:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
+    color:var(--dim);background:var(--panel);border:1px solid var(--border);
+    border-radius:6px;padding:4px 9px;cursor:pointer;transition:all .15s;
+}
+.out-seed-chip.visible{display:inline-flex}
+.out-seed-chip:hover{color:var(--accent3);border-color:rgba(255,165,0,.35)}
 
 .canvas-stage{
     flex:1;position:relative;overflow:hidden;min-height:0;
@@ -129,6 +137,7 @@ body{
     border-radius:4px;image-rendering:auto;
     animation:canvasIn .3s ease;
 }
+.canvas-stage video.modern-out-vid{cursor:pointer}
 .canvas-stage img.modern-out-img{cursor:crosshair}
 @keyframes canvasIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
 .canvas-placeholder{
@@ -143,6 +152,13 @@ body{
     border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);
 }
 
+/* Click Points Overlay */
+.click-point{
+    position:absolute;width:16px;height:16px;background:#ff0000;
+    border:2px solid #ffffff;border-radius:50%;pointer-events:none;
+    transform:translate(-50%, -50%);box-shadow:0 0 4px rgba(0,0,0,0.8);
+}
+
 /* Loader */
 .modern-loader{
     display:none;position:absolute;inset:0;background:rgba(8,8,10,.9);
@@ -259,29 +275,6 @@ body{
 }
 @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
 
-.suggestions-wrap{display:flex;flex-wrap:wrap;gap:5px}
-.suggestion-chip{
-    display:inline-flex;align-items:center;padding:4px 11px;
-    background:rgba(255,165,0,.07);border:1px solid rgba(255,165,0,.18);border-radius:14px;
-    color:var(--accent3);font-size:11px;font-weight:500;font-family:'Inter',sans-serif;
-    cursor:pointer;transition:all .15s;white-space:nowrap;
-}
-.suggestion-chip:hover{background:rgba(255,165,0,.15);border-color:rgba(255,165,0,.35);color:var(--accent2)}
-.suggestion-chip.active{background:rgba(255,165,0,.25);border-color:var(--accent);color:#fff}
-
-.lora-native-select{
-    width:100%;background:var(--panel2);
-    border:1px solid var(--border2);border-radius:8px;
-    padding:9px 34px 9px 13px;
-    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--text);
-    outline:none;appearance:none;-webkit-appearance:none;
-    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFA500' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-    background-repeat:no-repeat;background-position:right 11px center;
-    cursor:pointer;transition:border-color .2s;color-scheme:dark;
-}
-.lora-native-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,165,0,.15)}
-.lora-native-select option{background:var(--panel);color:var(--text)}
-
 .btn-run{
     display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
     background:linear-gradient(135deg,#FFA500,#CC8400);border:none;border-radius:9px;
@@ -295,13 +288,13 @@ body{
 }
 .btn-run:active:not(:disabled){transform:translateY(0)}
 .btn-run:disabled{opacity:.55;cursor:not-allowed}
-.btn-cancel{
+.btn-secondary{
     display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
     margin-top:8px;background:transparent;border:1px solid var(--border2);border-radius:9px;
     padding:8px 24px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;
     color:var(--muted);transition:all .15s;
 }
-.btn-cancel:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.08)}
+.btn-secondary:hover{border-color:var(--accent);color:var(--accent2);background:rgba(255,165,0,.08)}
 .run-hint{
     text-align:center;font-size:10px;color:var(--faint);margin-top:8px;
     font-family:'JetBrains Mono',monospace;
@@ -389,16 +382,6 @@ body{
 .toast-notification.info{background:linear-gradient(135deg,#FFA500,#CC8400);color:#fff;border:1px solid rgba(255,255,255,.15)}
 .toast-notification .toast-icon{font-size:15px;line-height:1}
 
-/* ══ Lightbox ══ */
-.lightbox{
-    position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;
-    display:none;align-items:center;justify-content:center;cursor:zoom-out;
-    backdrop-filter:blur(6px);animation:fadeIn .2s ease;
-}
-.lightbox.visible{display:flex}
-.lightbox img{max-width:94vw;max-height:94vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.8)}
-@keyframes fadeIn{from{opacity:0}to{opacity:1}}
-
 /* ══ Drop overlay ══ */
 .drop-overlay{
     position:fixed;inset:0;z-index:9000;background:rgba(8,8,10,.85);
@@ -417,13 +400,6 @@ body{
 ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:var(--border2)}
 
-/* ══ Touch devices ══ */
-@media (pointer:coarse){
-    .fs-remove{display:flex}
-    .rail-btn{width:44px;height:44px}
-    .rail-btn svg{width:19px;height:19px}
-}
-
 /* ══ Responsive ══ */
 @media(max-width:960px){
     html,body{height:auto}
@@ -431,10 +407,7 @@ body{
     .studio{
         display:flex;flex-direction:column;height:auto;min-height:100vh;
     }
-    .menubar{
-        flex-wrap:wrap;gap:8px;padding:10px 12px;min-height:var(--menubar-h);
-        position:sticky;top:0;
-    }
+    .menubar{flex-wrap:wrap;gap:8px;padding:10px 12px;min-height:var(--menubar-h);position:sticky;top:0;}
     .menubar-title{font-size:13px}
     .menubar-status{display:none}
     .menubar-spacer{flex:1}
@@ -467,7 +440,6 @@ body{
     .insp-section{padding:14px 16px}
     .modern-textarea{font-size:16px}
     .btn-run{padding:14px 24px;font-size:15px}
-    .suggestion-chip{padding:6px 13px;font-size:12px}
     .statusbar{flex-wrap:wrap;height:auto;min-height:var(--statusbar-h);padding:4px 10px;gap:2px}
     .sb-link{display:none}
     .toast-notification{max-width:calc(100vw - 32px);font-size:12px;padding:10px 16px}
@@ -475,12 +447,6 @@ body{
     .example-card{flex-direction:column}
     .example-thumb-wrap{width:100%;height:96px}
 }
-
-@media(max-width:400px){
-    .menubar-badge.fast{display:none}
-    .seg-btn{padding:4px 12px}
-    .canvas-stage{min-height:36vh}
-}
 </style>
 </head>
 <body>
@@ -489,11 +455,10 @@ body{
   <!-- ══ Menu bar ══ -->
   <div class="menubar">
     <div class="menubar-logo">
-      <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.236L19.764 8 12 11.764 4.236 8 12 4.236zM4 9.618l7 3.5v7.764l-7-3.5V9.618zm9 11.264v-7.764l7-3.5v7.764l-7 3.5z"/></svg>
+      <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18L19.5 8 12 11.82 4.5 8 12 4.18zM4 9.82l7 3.5v7.36l-7-3.5V9.82zm9 10.86v-7.36l7-3.5v7.36l-7 3.5z"/></svg>
     </div>
     <div class="menubar-title">SAM3 Studio <span>/ Segment Anything</span></div>
-    <span class="menubar-badge">MODEL 3</span>
-    <span class="menubar-badge fast">ZERO GPU</span>
+    <span class="menubar-badge">Model 3</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/SAM3-Demo"
@@ -506,51 +471,50 @@ body{
   <!-- ══ Left icon rail ══ -->
   <div class="rail">
     <div class="rail-label">Input</div>
-    <button class="rail-btn" id="tb-upload" title="Upload Image/Video">
+    <button class="rail-btn" id="tb-upload" title="Upload media">
       <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
     </button>
-    <button class="rail-btn" id="tb-remove" title="Remove Media" disabled>
+    <button class="rail-btn" id="tb-remove" title="Remove media" disabled>
       <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
     </button>
-    <button class="rail-btn" id="tb-clear" title="Clear Media" disabled>
+    <button class="rail-btn" id="tb-clear" title="Clear canvas" disabled>
       <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
     </button>
     <div class="rail-sep"></div>
     <div class="rail-label">Result</div>
-    <button class="rail-btn" id="dl-btn-output" title="Download Result" disabled>
+    <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>
-      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
-    </button>
-    <button class="rail-btn" id="reset-clicks-btn" title="Reset Clicks" disabled>
-      <svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9"/><polyline points="3 4 3 10 9 10"/></svg>
-    </button>
   </div>
 
   <!-- ══ Workspace ══ -->
   <div class="workspace">
     <div class="canvas-head">
+      <div class="seg-control">
+        <button class="seg-btn active" id="seg-result">Result</button>
+        <button class="seg-btn" id="seg-input">Input</button>
+      </div>
       <div class="canvas-meta" id="canvas-meta">No media 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&hellip;</div>
+        <div class="loader-text" id="loader-text">Processing…</div>
         <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
       </div>
 
       <div class="canvas-placeholder" id="output-placeholder">
         <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#3f3f2f" stroke-width="2" stroke-dasharray="4 3"/>
-          <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(255,165,0,0.1)" stroke="#3f3f2f" stroke-width="1.5"/>
-          <circle cx="28" cy="30" r="6" fill="rgba(255,165,0,0.12)" stroke="#3f3f2f" stroke-width="1.5"/>
+          <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#3f342a" stroke-width="2" stroke-dasharray="4 3"/>
+          <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(255,165,0,0.1)" stroke="#3f342a" stroke-width="1.5"/>
+          <circle cx="28" cy="30" r="6" fill="rgba(255,165,0,0.12)" stroke="#3f342a" stroke-width="1.5"/>
         </svg>
         <div class="cp-title">Canvas is empty</div>
         <div class="cp-sub">
           Drop an image or video, paste with <kbd>⌘/Ctrl+V</kbd>, or use the rail to upload.
-          Then configure settings and press <kbd>⌘/Ctrl</kbd>+<kbd>↵</kbd>.
+          Then write an instruction and press <kbd>⌘/Ctrl</kbd>+<kbd>↵</kbd>.
         </div>
       </div>
     </div>
@@ -571,56 +535,73 @@ body{
   <!-- ══ Inspector ══ -->
   <div class="inspector">
     <div class="inspector-tabs">
-      <button class="insp-tab active" id="tab-edit">Inference</button>
+      <button class="insp-tab active" id="tab-image">Image</button>
+      <button class="insp-tab" id="tab-video">Video</button>
+      <button class="insp-tab" id="tab-click">Click</button>
       <button class="insp-tab" id="tab-examples">Examples</button>
     </div>
 
-    <!-- Edit page -->
-    <div class="insp-page active" id="page-edit">
+    <!-- Image Page -->
+    <div class="insp-page active" id="page-image">
       <div class="insp-section">
-        <div class="insp-section-title"><span>Task Mode</span></div>
-        <select id="custom-task-select" class="lora-native-select">
-            <option value="Image Text">Image Segmentation (Text Prompt)</option>
-            <option value="Image Click">Image Segmentation (Interactive Clicks)</option>
-            <option value="Video Text">Video Segmentation (Text Prompt)</option>
-        </select>
+        <div class="insp-section-title"><span>Instruction</span><span class="char-count" id="char-count-img">0</span></div>
+        <textarea id="prompt-image" class="modern-textarea" rows="3" placeholder="e.g., cat, face, car wheel…"></textarea>
       </div>
-
       <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., player in white, cat, red car..."></textarea>
+        <div class="insp-section-title"><span>Advanced</span></div>
+        <div class="slider-row">
+          <label>Confidence</label>
+          <input type="range" id="conf-slider" min="0.0" max="1.0" step="0.05" value="0.45">
+          <span class="slider-val" id="conf-slider-val">0.45</span>
+        </div>
       </div>
-
       <div class="insp-section">
-        <div class="insp-section-title"><span>Quick Prompts</span></div>
-        <div class="suggestions-wrap" id="suggestions-wrap"></div>
+        <button id="btn-run-image" class="btn-run">Segment Image</button>
+        <div class="run-hint">⌘/Ctrl + Enter</div>
       </div>
+    </div>
 
+    <!-- Video Page -->
+    <div class="insp-page" id="page-video">
       <div class="insp-section">
-        <button id="custom-run-btn" class="btn-run">
-          <span id="run-btn-label">Run Inference</span>
-        </button>
-        <button id="custom-cancel-btn" class="btn-cancel" style="display:none;">Cancel</button>
-        <div class="run-hint">⌘/Ctrl + Enter</div>
+        <div class="insp-section-title"><span>Instruction</span><span class="char-count" id="char-count-vid">0</span></div>
+        <textarea id="prompt-video" class="modern-textarea" rows="3" placeholder="e.g., person running, red car…"></textarea>
       </div>
-
       <div class="insp-section">
-        <div class="insp-section-title"><span>Advanced</span></div>
+        <div class="insp-section-title"><span>Limits</span></div>
         <div class="slider-row">
-          <label>Conf Thresh</label>
-          <input type="range" id="custom-conf" min="0.0" max="1.0" step="0.05" value="0.45">
-          <span class="slider-val" id="custom-conf-val">0.45</span>
+          <label>Max Frames</label>
+          <input type="range" id="frames-slider" min="10" max="500" step="10" value="60">
+          <span class="slider-val" id="frames-slider-val">60</span>
         </div>
         <div class="slider-row">
-          <label>Vid Frames</label>
-          <input type="range" id="custom-frames" min="10" max="500" step="10" value="60">
-          <span class="slider-val" id="custom-frames-val">60</span>
+          <label>Timeout (s)</label>
+          <input type="range" id="timeout-slider" min="60" max="300" step="60" value="60">
+          <span class="slider-val" id="timeout-slider-val">60</span>
         </div>
       </div>
+      <div class="insp-section">
+        <button id="btn-run-video" class="btn-run">Segment Video</button>
+        <div class="run-hint">⌘/Ctrl + Enter</div>
+      </div>
     </div>
 
-    <!-- Examples page -->
+    <!-- Click Page -->
+    <div class="insp-page" id="page-click">
+      <div class="insp-section">
+        <div class="insp-section-title"><span>Instructions</span></div>
+        <p style="font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:0;">
+          Click on the image in the canvas to add foreground points.
+          The model will segment the object you click on.
+        </p>
+      </div>
+      <div class="insp-section">
+        <button id="btn-run-click" class="btn-run">Run Inference</button>
+        <button id="btn-clear-click" class="btn-secondary">Clear Points</button>
+      </div>
+    </div>
+
+    <!-- Examples Page -->
     <div class="insp-page" id="page-examples">
       <div class="examples-list" id="examples-scroll"></div>
     </div>
@@ -628,7 +609,7 @@ body{
 
   <!-- ══ Status bar ══ -->
   <div class="statusbar">
-    <div class="sb-section" id="sb-image-count">No input</div>
+    <div class="sb-section" id="sb-image-count">No media</div>
     <div class="sb-right">
       <a class="sb-link" href="https://huggingface.co/facebook/sam3" target="_blank" rel="noopener">facebook/sam3</a>
       <span class="sb-pill" id="sb-status">Ready</span>
@@ -637,71 +618,63 @@ body{
 
 </div>
 
-<input id="custom-file-input" type="file" accept="image/*,video/mp4" style="display:none;" />
-
-<!-- Lightbox -->
-<div class="lightbox" id="lightbox"><img id="lightbox-img" alt="zoom"></div>
-
-<!-- Global drop overlay -->
+<input id="custom-file-input" type="file" accept="image/*,video/*" style="display:none;" />
 <div class="drop-overlay" id="drop-overlay"><div class="drop-overlay-inner">Drop media to upload</div></div>
 
 <script type="module">
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
-/* ── DOM refs ── */
 const galleryGrid  = document.getElementById('image-gallery-grid');
 const fileInput    = document.getElementById('custom-file-input');
 const btnUpload    = document.getElementById('tb-upload');
 const btnRemove    = document.getElementById('tb-remove');
 const btnClear     = document.getElementById('tb-clear');
-const btnResetClicks = document.getElementById('reset-clicks-btn');
-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 imgCountTb   = document.getElementById('tb-image-count');
-const imgCountSb   = document.getElementById('sb-image-count');
+const outBody      = document.getElementById('output-image-container');
+const outPh        = document.getElementById('output-placeholder');
+const dlBtn        = document.getElementById('dl-btn-output');
 const sbStatus     = document.getElementById('sb-status');
 const loader       = document.getElementById('output-loader');
 const loaderText   = document.getElementById('loader-text');
 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 zoomBtn      = document.getElementById('zoom-btn');
 const historyStrip = document.getElementById('history-strip');
 const historyCount = document.getElementById('history-count');
-const confSlider   = document.getElementById('custom-conf');
-const confVal      = document.getElementById('custom-conf-val');
-const framesSlider = document.getElementById('custom-frames');
-const framesVal    = document.getElementById('custom-frames-val');
-const lightbox     = document.getElementById('lightbox');
-const lightboxImg  = document.getElementById('lightbox-img');
 const dropOverlay  = document.getElementById('drop-overlay');
 const canvasMeta   = document.getElementById('canvas-meta');
+const segResult    = document.getElementById('seg-result');
+const segInput     = document.getElementById('seg-input');
 const connDot      = document.getElementById('conn-dot');
 const connText     = document.getElementById('conn-text');
 
-/* ── State ── */
-let currentMedia = null;   // {b64, name, type: 'image'|'video'}
-let toastTimer = null;
-let running = false;
-let currentJob = null;
-let currentResult = null;  // {b64, type: 'image'|'video'}
+const promptImage = document.getElementById('prompt-image');
+const promptVideo = document.getElementById('prompt-video');
+const btnRunImage = document.getElementById('btn-run-image');
+const btnRunVideo = document.getElementById('btn-run-video');
+const btnRunClick = document.getElementById('btn-run-click');
+const btnClearClick= document.getElementById('btn-clear-click');
+
+const confSlider = document.getElementById('conf-slider');
+const confVal    = document.getElementById('conf-slider-val');
+const framesSlider = document.getElementById('frames-slider');
+const framesVal    = document.getElementById('frames-slider-val');
+const timeoutSlider = document.getElementById('timeout-slider');
+const timeoutVal    = document.getElementById('timeout-slider-val');
+
+let currentMedia = null; // {b64, name, type: 'image'|'video', naturalW, naturalH}
+let currentResult = null; // {b64, type: 'image'|'video'}
 let history = [];
 let historyIdx = -1;
+let viewMode = 'result';
+let currentJob = null;
+let running = false;
+let currentTab = 'image';
 let clickPoints = [];
 
-const SUGGESTIONS = [
-    ['Person', 'segment the person'],
-    ['Car', 'segment the red car'],
-    ['Animal', 'segment the cat'],
-    ['Background', 'segment the background'],
+const SUGGESTIONS_IMG = [
+    ['Player', 'player in white'],
+    ['Ball', 'basketball'],
+    ['Referee', 'referee in black'],
 ];
 
-/* ── Toast ── */
 function showToast(message, type) {
     let toast = document.getElementById('app-toast');
     if (!toast) {
@@ -716,16 +689,8 @@ function showToast(message, type) {
     toast.className = 'toast-notification ' + (type || 'error');
     icon.textContent = type === 'warning' ? '⚠' : type === 'info' ? 'ℹ' : '✗';
     text.textContent = message;
-    if (toastTimer) clearTimeout(toastTimer);
-    void toast.offsetWidth;
     toast.classList.add('visible');
-    toastTimer = setTimeout(() => toast.classList.remove('visible'), 3500);
-}
-
-function flashPromptError() {
-    promptInput.classList.add('error-flash');
-    promptInput.focus();
-    setTimeout(() => promptInput.classList.remove('error-flash'), 800);
+    setTimeout(() => toast.classList.remove('visible'), 3500);
 }
 
 function setStatus(text, cls) {
@@ -733,44 +698,55 @@ function setStatus(text, cls) {
     sbStatus.className = 'sb-pill' + (cls ? ' ' + cls : '');
 }
 
-/* ── Canvas Rendering ── */
+function showLoader(text) {
+    loaderText.textContent = text || 'Processing…';
+    loaderFill.classList.remove('determinate');
+    loaderFill.style.width = '100%';
+    loader.classList.add('active');
+    setStatus('Processing…');
+}
+function hideLoader(statusText, cls) {
+    loader.classList.remove('active');
+    setStatus(statusText || 'Done', cls || 'done');
+}
+
+function getCanvasMedia() { return outBody.querySelector('img.modern-out-img, video.modern-out-vid'); }
+
 function renderCanvas() {
-    outBody.querySelectorAll('video.modern-out-vid, img.modern-out-img').forEach(e => e.remove());
+    // Clear points if not click tab
+    if (currentTab !== 'click') {
+        outBody.querySelectorAll('.click-point').forEach(p => p.remove());
+    }
     
-    const showResult = currentResult;
-    const showInput  = currentMedia;
+    let media = getCanvasMedia();
+    const showResult = viewMode === 'result' && currentResult;
+    const showInput  = viewMode === 'input' && currentMedia;
 
     if (showResult || showInput) {
         outPh.style.display = 'none';
+        const data = showResult ? currentResult : currentMedia;
         
-        const media = showResult || showInput;
-        
-        if (media.type === 'video') {
-            const vid = document.createElement('video');
-            vid.src = media.b64;
-            vid.className = 'modern-out-vid';
-            vid.controls = true;
-            vid.autoplay = true;
-            vid.loop = true;
-            vid.muted = true;
-            outBody.appendChild(vid);
-            canvasMeta.textContent = (showResult ? 'result · ' : 'input · ') + (media.name || 'video');
+        if (data.type === 'video') {
+            if (!media || media.tagName !== 'VIDEO') {
+                if (media) media.remove();
+                media = document.createElement('video');
+                media.className = 'modern-out-vid';
+                media.controls = true; media.autoplay = true; media.loop = true; media.muted = true;
+                outBody.appendChild(media);
+            }
+            media.src = data.b64;
         } else {
-            const img = document.createElement('img');
-            img.src = media.b64;
-            img.className = 'modern-out-img';
-            img.addEventListener('click', (e) => {
-                if (taskSelect.value === 'Image Click' && !showResult) {
-                    handleImageClick(e, img);
-                } else {
-                    lightboxImg.src = img.src; 
-                    lightbox.classList.add('visible');
-                }
-            });
-            outBody.appendChild(img);
-            canvasMeta.textContent = (showResult ? 'result · ' : 'input · ') + (media.name || 'image');
+            if (!media || media.tagName !== 'IMG') {
+                if (media) media.remove();
+                media = document.createElement('img');
+                media.className = 'modern-out-img';
+                outBody.appendChild(media);
+            }
+            media.src = data.b64;
         }
+        canvasMeta.textContent = (showResult ? 'result' : 'input') + ' · ' + data.type;
     } else {
+        if (media) media.style.display = 'none';
         outPh.style.display = '';
         canvasMeta.textContent = 'No media loaded';
     }
@@ -778,38 +754,27 @@ function renderCanvas() {
 }
 
 function updateRailState() {
-    const hasResult = !!currentResult;
     const hasMedia = !!currentMedia;
-    dlBtn.disabled = !hasResult;
-    zoomBtn.disabled = !hasResult && !hasMedia;
+    const hasResult = !!currentResult;
     btnRemove.disabled = !hasMedia;
-    btnClear.disabled = !hasMedia;
-    btnResetClicks.disabled = clickPoints.length === 0;
-}
-
-/* ── Inputs filmstrip ── */
-function updateCounts() {
-    const n = currentMedia ? 1 : 0;
-    imgCountTb.textContent = n;
-    imgCountSb.textContent = n > 0 ? '1 input · ' + history.length + ' result' + (history.length === 1 ? '' : 's') : 'No input';
+    btnClear.disabled = !hasMedia && !hasResult;
+    dlBtn.disabled = !hasResult;
 }
 
-function setMedia(b64, name, type) {
-    currentMedia = { b64, name: name || 'media', type };
-    currentResult = null;
-    clickPoints = [];
-    renderFilmstrip();
-    updateCounts();
+function setViewMode(mode) {
+    viewMode = mode;
+    segResult.classList.toggle('active', mode === 'result');
+    segInput.classList.toggle('active', mode === 'input');
     renderCanvas();
 }
+segResult.addEventListener('click', () => setViewMode('result'));
+segInput.addEventListener('click', () => setViewMode('input'));
 
-function removeMedia() {
-    currentMedia = null;
+function setMedia(b64, name, type, naturalW=0, naturalH=0) {
+    currentMedia = { b64, name, type, naturalW, naturalH };
     currentResult = null;
-    clickPoints = [];
     renderFilmstrip();
-    updateCounts();
-    renderCanvas();
+    setViewMode('input');
 }
 
 function clearAll() {
@@ -817,7 +782,6 @@ function clearAll() {
     currentResult = null;
     clickPoints = [];
     renderFilmstrip();
-    updateCounts();
     renderCanvas();
 }
 
@@ -831,237 +795,128 @@ function renderFilmstrip() {
     } else {
         const t = document.createElement('div');
         t.className = 'fs-thumb selected';
-        // Use first frame if video? For simplicity, just show a placeholder for video in filmstrip
-        if (currentMedia.type === 'image') {
-            t.innerHTML = '<img src="' + currentMedia.b64 + '" alt="">' +
-                          '<span class="fs-badge">' + (currentResult ? 'input' : 'input') + '</span>' +
-                          '<button class="fs-remove">✕</button>';
-        } else {
-            t.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:10px;">VIDEO</div>' +
-                          '<span class="fs-badge">input</span>' +
-                          '<button class="fs-remove">✕</button>';
-        }
-        t.addEventListener('click', (e) => {
-            if (e.target.closest('.fs-remove')) return;
-            currentResult = null;
-            renderCanvas();
-        });
-        t.querySelector('.fs-remove').addEventListener('click', (e) => {
-            e.stopPropagation(); removeMedia();
-        });
+        t.innerHTML = '<img src="' + currentMedia.b64 + '" alt="">' +
+                      '<span class="fs-badge">' + currentMedia.type + '</span>';
+        t.addEventListener('click', () => setViewMode('input'));
         galleryGrid.appendChild(t);
     }
     const add = document.createElement('div');
     add.className = 'fs-add';
-    add.innerHTML = '<span class="add-icon">+</span><span class="add-text">' + (currentMedia ? 'Replace' : 'Add') + '</span>';
+    add.innerHTML = '<span class="add-icon">+</span><span class="add-text">Add</span>';
     add.addEventListener('click', () => fileInput.click());
     galleryGrid.appendChild(add);
-    updateRailState();
 }
 
-function processFiles(files) {
-    const file = files && files[0];
-    if (!file) return 0;
-    
-    const isVideo = file.type.startsWith('video/');
-    const isImage = file.type.startsWith('image/');
-    if (!isVideo && !isImage) return 0;
-
+function processFile(file) {
+    if (!file) return false;
     const reader = new FileReader();
+    const type = file.type.startsWith('video/') ? 'video' : 'image';
     reader.onload = (e) => {
-        const type = isVideo ? 'video' : 'image';
-        setMedia(e.target.result, file.name, type);
         if (type === 'image') {
-            taskSelect.value = 'Image Text';
+            // Get natural dimensions for click mapping
+            const img = new Image();
+            img.onload = () => {
+                setMedia(e.target.result, file.name, 'image', img.naturalWidth, img.naturalHeight);
+            };
+            img.src = e.target.result;
         } else {
-            taskSelect.value = 'Video Text';
+            setMedia(e.target.result, file.name, 'video');
         }
-        showToast(type.charAt(0).toUpperCase() + type.slice(1) + ' loaded', 'info');
     };
     reader.readAsDataURL(file);
-    return 1;
+    return true;
 }
 
-fileInput.addEventListener('change', (e) => { processFiles(e.target.files); e.target.value = ''; });
+fileInput.addEventListener('change', (e) => { processFile(e.target.files[0]); e.target.value = ''; });
 btnUpload.addEventListener('click',  () => fileInput.click());
-btnRemove.addEventListener('click',  removeMedia);
-btnClear.addEventListener('click',   clearAll);
-btnResetClicks.addEventListener('click', () => {
-    clickPoints = [];
-    if (currentMedia && currentMedia.type === 'image') {
-        currentResult = null;
-        renderCanvas();
-        showToast('Clicks reset', 'info');
-    }
-    updateRailState();
-});
+btnRemove.addEventListener('click', clearAll);
+btnClear.addEventListener('click', clearAll);
 
-/* ── Drop anywhere ── */
 let dragDepth = 0;
 window.addEventListener('dragenter', (e) => {
-    if (!e.dataTransfer || !Array.from(e.dataTransfer.types).includes('Files')) return;
-    e.preventDefault();
-    dragDepth++;
-    dropOverlay.classList.add('visible');
+    e.preventDefault(); dragDepth++; dropOverlay.classList.add('visible');
 });
 window.addEventListener('dragleave', (e) => {
-    if (!e.dataTransfer || !Array.from(e.dataTransfer.types).includes('Files')) return;
-    dragDepth = Math.max(0, dragDepth - 1);
+    e.preventDefault(); dragDepth = Math.max(0, dragDepth - 1);
     if (dragDepth === 0) dropOverlay.classList.remove('visible');
 });
 window.addEventListener('dragover', (e) => { e.preventDefault(); });
 window.addEventListener('drop', (e) => {
-    e.preventDefault();
-    dragDepth = 0;
-    dropOverlay.classList.remove('visible');
+    e.preventDefault(); dragDepth = 0; dropOverlay.classList.remove('visible');
     if (e.dataTransfer.files.length) {
-        const n = processFiles(e.dataTransfer.files);
+        if (processFile(e.dataTransfer.files[0])) showToast('Media loaded', 'info');
     }
 });
 
-/* ── Paste ── */
-document.addEventListener('paste', (e) => {
-    if (e.target === promptInput) return;
-    const items = e.clipboardData && e.clipboardData.items;
-    if (!items) return;
-    for (const item of items) {
-        if (item.kind === 'file') {
-            const f = item.getAsFile();
-            if (f) {
-                e.preventDefault();
-                processFiles([f]);
-                return;
-            }
+// Tabs Logic
+const tabs = ['image', 'video', 'click', 'examples'];
+tabs.forEach(tab => {
+    document.getElementById(`tab-${tab}`).addEventListener('click', () => {
+        currentTab = tab;
+        tabs.forEach(t => {
+            document.getElementById(`tab-${t}`).classList.toggle('active', t === tab);
+            const page = document.getElementById(`page-${t}`);
+            if (page) page.classList.toggle('active', t === tab);
+        });
+        
+        // Adjust file input accept type
+        fileInput.accept = tab === 'video' ? 'video/*' : 'image/*';
+        
+        // Clear points if leaving click tab
+        if (tab !== 'click') {
+            outBody.querySelectorAll('.click-point').forEach(p => p.remove());
+            clickPoints = [];
         }
-    }
-});
-
-/* ── Inspector tabs ── */
-const tabEdit = document.getElementById('tab-edit');
-const tabExamples = document.getElementById('tab-examples');
-const pageEdit = document.getElementById('page-edit');
-const pageExamples = document.getElementById('page-examples');
-tabEdit.addEventListener('click', () => {
-    tabEdit.classList.add('active'); tabExamples.classList.remove('active');
-    pageEdit.classList.add('active'); pageExamples.classList.remove('active');
-});
-tabExamples.addEventListener('click', () => {
-    tabExamples.classList.add('active'); tabEdit.classList.remove('active');
-    pageExamples.classList.add('active'); pageEdit.classList.remove('active');
-});
-
-/* ── Suggestion chips ── */
-const suggWrap = document.getElementById('suggestions-wrap');
-SUGGESTIONS.forEach(([label, prompt]) => {
-    const chip = document.createElement('button');
-    chip.className = 'suggestion-chip';
-    chip.textContent = label;
-    chip.addEventListener('click', () => {
-        promptInput.value = prompt;
-        updateCharCount();
-        suggWrap.querySelectorAll('.suggestion-chip').forEach(c => c.classList.remove('active'));
-        chip.classList.add('active');
-        promptInput.focus();
     });
-    suggWrap.appendChild(chip);
 });
 
-function updateCharCount() { charCount.textContent = promptInput.value.length; }
-promptInput.addEventListener('input', () => {
-    updateCharCount();
-    suggWrap.querySelectorAll('.suggestion-chip').forEach(c => c.classList.remove('active'));
+// Click Segmentation Logic
+outBody.addEventListener('click', (e) => {
+    if (currentTab !== 'click' || !currentMedia || currentMedia.type !== 'image') return;
+    if (!e.target.classList.contains('modern-out-img')) return;
+    
+    const rect = e.target.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    const scaleX = currentMedia.naturalW / rect.width;
+    const scaleY = currentMedia.naturalH / rect.height;
+    const natX = Math.round(x * scaleX);
+    const natY = Math.round(y * scaleY);
+    
+    clickPoints.push([natX, natY]);
+    
+    const dot = document.createElement('div');
+    dot.className = 'click-point';
+    dot.style.left = x + 'px';
+    dot.style.top = y + 'px';
+    outBody.appendChild(dot);
 });
-updateCharCount();
-
-/* ── Sliders ── */
-function bindSlider(id, suffix='') {
-    const slider  = document.getElementById(id);
-    const valSpan = document.getElementById(id + '-val');
-    slider.addEventListener('input', () => { valSpan.textContent = slider.value + suffix; });
-}
-bindSlider('custom-conf');
-bindSlider('custom-frames');
-
-/* ── Loader ── */
-function showLoader(text) {
-    loaderText.textContent = text || 'Processing…';
-    loaderFill.classList.remove('determinate');
-    loaderFill.style.width = '100%';
-    loader.classList.add('active');
-    setStatus('Processing…');
-}
-function setLoaderProgress(text, frac) {
-    loaderText.textContent = text;
-    if (frac != null && frac >= 0 && frac <= 1) {
-        loaderFill.classList.add('determinate');
-        loaderFill.style.width = Math.max(4, Math.round(frac * 100)) + '%';
-    }
-}
-function hideLoader(statusText, cls) {
-    loader.classList.remove('active');
-    setStatus(statusText || 'Done', cls || 'done');
-}
 
-/* ── Result / history ── */
-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' : '');
-        if (entry.type === 'video') {
-            t.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:10px;">VID</div>';
-        } else {
-            const im = document.createElement('img');
-            im.src = entry.b64;
-            t.appendChild(im);
-        }
-        t.addEventListener('click', () => { 
-            historyIdx = i; 
-            currentResult = history[i]; 
-            renderHistory(); 
-            renderCanvas();
-        });
-        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 media = currentResult || currentMedia;
-    if (media && media.type === 'image') { 
-        lightboxImg.src = media.b64; 
-        lightbox.classList.add('visible'); 
+btnClearClick.addEventListener('click', () => {
+    clickPoints = [];
+    outBody.querySelectorAll('.click-point').forEach(p => p.remove());
+    if (currentResult) {
+        currentResult = null;
+        setViewMode('input');
     }
 });
 
-/* ── Download ── */
+// Sliders
+confSlider.addEventListener('input', () => confVal.textContent = confSlider.value);
+framesSlider.addEventListener('input', () => framesVal.textContent = framesSlider.value);
+timeoutSlider.addEventListener('input', () => timeoutVal.textContent = timeoutSlider.value);
+
+// Download
 dlBtn.addEventListener('click', () => {
-    if (currentResult && currentResult.b64) {
-        const a = document.createElement('a');
-        a.href = currentResult.b64;
-        a.download = 'sam3_result.' + (currentResult.type === 'video' ? 'mp4' : 'png');
-        document.body.appendChild(a); a.click(); document.body.removeChild(a);
-    }
+    if (!currentResult) return;
+    const a = document.createElement('a');
+    a.href = currentResult.b64;
+    a.download = `sam3_result_${Date.now()}.${currentResult.type === 'video' ? 'mp4' : 'png'}`;
+    document.body.appendChild(a); a.click(); document.body.removeChild(a);
 });
 
-/* ── Backend connection ── */
+// Backend
 let client = null;
 try {
     client = await Client.connect(window.location.origin);
@@ -1069,248 +924,146 @@ try {
     connDot.classList.remove('off');
     connText.textContent = 'connected';
 } catch (e) {
-    console.error('Failed to connect to Gradio backend:', e);
     setStatus('Offline', 'error');
     connDot.classList.add('off');
     connText.textContent = 'offline';
-    showToast('Could not connect to the backend API', 'error');
-}
-
-/* ── Config: examples ── */
-function renderConfig(cfg) {
-    const list = document.getElementById('examples-scroll');
-    list.innerHTML = '';
-    cfg.examples.forEach(ex => {
-        const card = document.createElement('div');
-        card.className = 'example-card';
-        const thumbHtml = ex.thumb
-            ? '<img src="' + ex.thumb + '" alt="">'
-            : '<div class="example-thumb-placeholder">Preview</div>';
-        const promptShort = ex.prompt.length > 90 ? ex.prompt.slice(0, 90) + '…' : ex.prompt;
-        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) {
-    if (!client) { showToast('Backend not connected', 'error'); return; }
-    document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
-    card.classList.add('loading');
-    showToast('Loading example…', 'info');
-    try {
-        const result = await client.predict('/load_example', { idx: 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;
-            }
-            setMedia(data.image, data.name || 'example.jpg', 'image');
-            tabEdit.click();
-            showToast('Example loaded', 'info');
-        } else {
-            showToast('Could not load example image', 'error');
-        }
-    } catch (e) {
-        console.error('Example load error:', e);
-        showToast('Could not load example image', 'error');
-    } finally {
-        card.classList.remove('loading');
-    }
-}
-
-try {
-    const cfg = await fetch('api/config').then(r => r.json());
-    renderConfig(cfg);
-} catch (e) {
-    console.error('Failed to load config:', e);
-}
-
-/* ── Run ── */
-function validateBeforeRun() {
-    const promptVal = promptInput.value.trim();
-    const taskVal = taskSelect.value;
-    const hasMedia = !!currentMedia;
-
-    if (!hasMedia) { showToast('Please upload media', 'error'); return false; }
-    
-    if (taskVal !== 'Image Click' && !promptVal) { 
-        showToast('Please enter a prompt', 'warning'); flashPromptError(); return false; 
-    }
-    
-    if (taskVal === 'Image Click' && currentMedia.type !== 'image') {
-        showToast('Click segmentation requires an image', 'error'); return false;
-    }
-    
-    if (taskVal === 'Video Text' && currentMedia.type !== 'video') {
-        showToast('Video segmentation requires a video', 'error'); return false;
-    }
-    
-    return true;
+    showToast('Could not connect to backend', 'error');
 }
 
-function setRunningUI(on) {
-    running = on;
-    runBtn.disabled = on;
-    runBtnLabel.textContent = on ? 'Running…' : 'Run Inference';
-    cancelBtn.style.display = on ? 'flex' : 'none';
-}
-
-async function runEdit() {
+async function runJob(endpoint, payload) {
     if (running) return;
-    if (!client) { showToast('Backend not connected', 'error'); return; }
-    if (!validateBeforeRun()) return;
-
+    running = true;
     setRunningUI(true);
     showLoader('Submitting to queue…');
 
-    const taskVal = taskSelect.value;
-    const usedPrompt = promptInput.value;
-    
-    let apiEndpoint = '/segment_image_text';
-    let payload = {};
-
-    if (taskVal === 'Image Text') {
-        apiEndpoint = '/segment_image_text';
-        payload = {
-            image_b64: currentMedia.b64,
-            prompt: usedPrompt,
-            conf_thresh: parseFloat(confSlider.value)
-        };
-    } else if (taskVal === 'Video Text') {
-        apiEndpoint = '/segment_video';
-        payload = {
-            video_b64: currentMedia.b64,
-            prompt: usedPrompt,
-            frame_limit: parseInt(framesSlider.value),
-            time_limit: 120
-        };
-    } else if (taskVal === 'Image Click') {
-        // This is handled automatically by clicks, but we can allow a manual run to refresh
-        apiEndpoint = '/segment_image_click';
-        payload = {
-            image_b64: currentMedia.b64,
-            points_json: JSON.stringify(clickPoints),
-            labels_json: JSON.stringify(clickPoints.map(() => 1))
-        };
-    }
-
     try {
-        currentJob = client.submit(apiEndpoint, payload);
+        currentJob = client.submit(endpoint, payload);
         for await (const msg of currentJob) {
             if (msg.type === 'status') {
                 if (msg.status === 'pending') {
-                    const pos = (msg.position != null && msg.position >= 0)
-                        ? 'In queue — position ' + (msg.position + 1) + (msg.queue_size ? ' of ' + msg.queue_size : '')
-                        : 'Waiting in queue…';
-                    setLoaderProgress(pos, null);
+                    setLoaderProgress('In queue — position ' + (msg.position + 1), null);
                     setStatus('Queued');
                 } else if (msg.status === 'generating') {
                     setStatus('Processing…');
-                    setLoaderProgress('Generating…', null);
+                    setLoaderProgress('Processing…', null);
                 } else if (msg.status === 'error') {
-                    throw new Error(msg.message || 'Generation failed');
+                    throw new Error(msg.message || 'Failed');
                 }
             } else if (msg.type === 'data') {
-                const out = msg.data && msg.data[0];
-                if (out && (out.image || out.video)) {
-                    const entry = out.video 
-                        ? { b64: out.video, type: 'video' } 
-                        : { b64: out.image, type: 'image' };
-                    currentResult = entry;
-                    pushHistory(entry);
+                const out = msg.data[0];
+                if (out.image) {
+                    currentResult = { b64: out.image, type: 'image' };
                     hideLoader('Done', 'done');
-                    showToast('Inference successful', 'info');
-                    renderCanvas();
-                } else {
+                    setViewMode('result');
+                    showToast('Segmentation complete', 'info');
+                } else if (out.video) {
+                    currentResult = { b64: out.video, type: 'video' };
                     hideLoader('Done', 'done');
+                    setViewMode('result');
+                    showToast('Video processing complete', 'info');
                 }
             }
         }
     } 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');
+        showToast(e.message || 'Generation failed', 'error');
     } finally {
         setRunningUI(false);
         currentJob = null;
     }
 }
 
-// Handle Image Clicks
-async function handleImageClick(e, imgElement) {
-    if (running) return;
-    if (!currentMedia || currentMedia.type !== 'image') return;
+function setRunningUI(on) {
+    running = on;
+    btnRunImage.disabled = on;
+    btnRunVideo.disabled = on;
+    btnRunClick.disabled = on;
+    btnRunImage.textContent = on ? 'Processing…' : 'Segment Image';
+    btnRunVideo.textContent = on ? 'Processing…' : 'Segment Video';
+    btnRunClick.textContent = on ? 'Processing…' : 'Run Inference';
+}
 
-    const rect = imgElement.getBoundingClientRect();
-    const x = Math.round((e.clientX - rect.left) / rect.width * imgElement.naturalWidth);
-    const y = Math.round((e.clientY - rect.top) / rect.height * imgElement.naturalHeight);
+function setLoaderProgress(text, frac) {
+    loaderText.textContent = text;
+    if (frac != null) {
+        loaderFill.classList.add('determinate');
+        loaderFill.style.width = (frac * 100) + '%';
+    }
+}
 
-    clickPoints.push([x, y]);
-    btnResetClicks.disabled = false;
+btnRunImage.addEventListener('click', () => {
+    if (!currentMedia || currentMedia.type !== 'image') return showToast('Please upload an image', 'error');
+    const p = promptImage.value.trim();
+    if (!p) return showToast('Please enter a prompt', 'error');
+    runJob('/segment_image', {
+        image_b64: currentMedia.b64,
+        prompt: p,
+        conf_thresh: parseFloat(confSlider.value)
+    });
+});
 
-    setRunningUI(true);
-    showLoader('Processing click…');
+btnRunVideo.addEventListener('click', () => {
+    if (!currentMedia || currentMedia.type !== 'video') return showToast('Please upload a video', 'error');
+    const p = promptVideo.value.trim();
+    if (!p) return showToast('Please enter a prompt', 'error');
+    runJob('/segment_video', {
+        video_b64: currentMedia.b64,
+        prompt: p,
+        frame_limit: parseInt(framesSlider.value),
+        time_limit: parseInt(timeoutSlider.value)
+    });
+});
 
-    const payload = {
+btnRunClick.addEventListener('click', () => {
+    if (!currentMedia || currentMedia.type !== 'image') return showToast('Please upload an image', 'error');
+    if (clickPoints.length === 0) return showToast('Click on the image first', 'warning');
+    runJob('/segment_click', {
         image_b64: currentMedia.b64,
-        points_json: JSON.stringify(clickPoints),
-        labels_json: JSON.stringify(clickPoints.map(() => 1))
-    };
+        points_json: JSON.stringify(clickPoints)
+    });
+});
 
-    try {
-        const result = await client.predict('/segment_image_click', payload);
-        const out = result.data && result.data[0];
-        if (out && out.image) {
-            const entry = { b64: out.image, type: 'image' };
-            currentResult = entry;
-            // Replace the last history entry if it was a click, otherwise push
-            if (history.length > 0 && history[history.length - 1].type === 'image' && history[history.length - 1].b64.startsWith('data:image/png;base64,')) {
-                // Heuristic: just update the current view, don't spam history with every click
-                // For simplicity, we won't push every click to history
+// Config
+function renderConfig(cfg) {
+    const list = document.getElementById('examples-scroll');
+    list.innerHTML = '';
+    cfg.examples.forEach(ex => {
+        const card = document.createElement('div');
+        card.className = 'example-card';
+        const thumbHtml = ex.thumb ? '<img src="' + ex.thumb + '" alt="">' : '<div class="example-thumb-placeholder">Preview</div>';
+        card.innerHTML = '<div class="example-thumb-wrap">' + thumbHtml + '</div>' +
+                         '<div class="example-body"><div class="example-meta"><span class="example-lora-badge">' + ex.type + '</span></div>' +
+                         '<div class="example-prompt-text">' + ex.prompt + '</div></div>';
+        card.addEventListener('click', async () => {
+            card.classList.add('loading');
+            try {
+                const res = await client.predict('/load_example', { idx: ex.idx });
+                const data = res.data[0];
+                if (data.status === 'ok') {
+                    const img = new Image();
+                    img.onload = () => {
+                        setMedia(data.image, 'example.jpg', 'image', img.naturalWidth, img.naturalHeight);
+                        promptImage.value = data.prompt;
+                        document.getElementById('tab-image').click();
+                    };
+                    img.src = data.image;
+                }
+            } catch(e) {
+                showToast('Failed to load example', 'error');
+            } finally {
+                card.classList.remove('loading');
             }
-            hideLoader('Done', 'done');
-            renderCanvas();
-        }
-    } catch (err) {
-        console.error('Click error:', err);
-        hideLoader('Error', 'error');
-        showToast('Click processing failed', 'error');
-    } finally {
-        setRunningUI(false);
-    }
+        });
+        list.appendChild(card);
+    });
 }
 
-runBtn.addEventListener('click', runEdit);
-
-cancelBtn.addEventListener('click', async () => {
-    if (currentJob) {
-        try { await currentJob.cancel(); } catch (e) { console.warn('Cancel error:', e); }
-        currentJob = null;
-    }
-    setRunningUI(false);
-    hideLoader('Cancelled');
-    showToast('Generation cancelled', 'warning');
-});
-
-document.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-        e.preventDefault();
-        runEdit();
-    }
-});
+try {
+    const cfg = await fetch('api/config').then(r => r.json());
+    renderConfig(cfg);
+} catch (e) {}
 
 renderFilmstrip();
-renderHistory();
-updateCounts();
 renderCanvas();
 </script>
 </body>