fix: clean up duplicate closing tags at end of showcase container in index.html

index.html

@@ -201,7 +201,7 @@
                 </span>
             </a>
 
-            <span class="px-3 py-1 text-xs font-semibold rounded bg-emerald-500/10 text-nvidia-brand border border-nvidia-brand/20 flex items-center gap-1.5 font-mono">
+            <span class="px-3 py-1 text-xs font-semibold rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 flex items-center gap-1.5 font-mono">
                 <span class="h-1.5 w-1.5 rounded-full bg-nvidia-brand animate-pulse"></span>
                 ZeroGPU Server
             </span>
@@ -211,128 +211,203 @@
     <!-- MAIN MINIMAL LAYOUT CONTAINER -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-10 space-y-8">
         
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+        <!-- Giant Showcase Container (SAM 3 Full-Bleed Style) -->
+        <div class="relative w-full rounded-[32px] overflow-hidden border border-white/5 bg-[#080a0e] shadow-2xl h-[580px] lg:h-[640px] flex select-none">
             
-            <!-- LEFT PANEL: Brand Info & Primary Controls (Col Span: 5) -->
-            <section class="lg:col-span-5 space-y-6">
+            <!-- 1. Background Media Canvas (Coverage Layer) -->
+            <div class="absolute inset-0 z-0 flex items-center justify-center bg-black/40">
+                <!-- Drop Zone (Initially shown) -->
+                <div id="drop-zone" class="absolute inset-0 border-none rounded-none bg-transparent flex flex-col items-center justify-center p-4 text-center cursor-pointer transition-all z-10">
+                    <div id="upload-prompt" class="space-y-3 opacity-60 hover:opacity-100 transition-opacity">
+                        <div class="inline-flex h-12 w-12 rounded-full bg-white/5 items-center justify-center text-slate-300">
+                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                            </svg>
+                        </div>
+                        <div>
+                            <p class="text-xs font-bold text-slate-200">Drag & drop your file here</p>
+                            <p class="text-[10px] text-slate-500 mt-1">or click to browse local folders</p>
+                        </div>
+                    </div>
+
+                    <!-- Dynamic Preview Media -->
+                    <img id="preview-image" src="" alt="Input Preview" class="hidden max-h-full max-w-full rounded-2xl object-contain shadow-2xl z-20 border border-white/5">
+                    <video id="preview-video" src="" controls class="hidden max-h-full max-w-full rounded-2xl object-contain shadow-2xl z-20 border border-white/5"></video>
+
+                    <!-- File Input -->
+                    <input type="file" id="media-file-input" accept="image/*,video/*" class="absolute inset-0 opacity-0 cursor-pointer z-30">
+                </div>
+
+                <!-- Inference Output Zone -->
+                <div class="absolute inset-0 pointer-events-none flex items-center justify-center z-20">
+                    <img id="output-image" src="" alt="Inference Output" class="hidden max-h-full max-w-full rounded-2xl object-contain shadow-2xl pointer-events-auto border border-white/5">
+                    <video id="output-video" src="" controls class="hidden max-h-full max-w-full rounded-2xl object-contain shadow-2xl pointer-events-auto border border-white/5"></video>
+                </div>
+
+                <!-- Processing Overlays -->
+                <div id="processing-overlay" class="absolute inset-0 bg-black/85 backdrop-blur-sm hidden flex-col items-center justify-center gap-4 z-40">
+                    <div class="flex gap-1.5">
+                        <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-nvidia-brand" style="animation-delay: 0s;"></span>
+                        <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-emerald-400" style="animation-delay: 0.2s;"></span>
+                        <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-emerald-300" style="animation-delay: 0.4s;"></span>
+                    </div>
+                    <div class="text-center space-y-1">
+                        <p id="processing-status" class="text-[11px] font-bold tracking-widest text-slate-200 uppercase">Executing Model...</p>
+                        <p class="text-[9px] text-slate-500 uppercase tracking-wider font-mono">ZeroGPU Queue Active</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2. Left Floating Overlay Panel (Title, simple selectors, accordion, and action buttons) -->
+            <div class="absolute left-6 lg:left-12 top-8 bottom-8 z-30 flex flex-col justify-between max-w-sm sm:max-w-md pointer-events-none">
                 
-                <!-- Main SAM 3 style Intro Headline -->
-                <div class="space-y-4 pt-2">
+                <!-- Main Header Overlay text -->
+                <div class="space-y-3 pt-4 pointer-events-auto bg-gradient-to-b from-[#080a0e]/90 via-[#080a0e]/60 to-transparent p-4 rounded-2xl">
                     <span class="text-[9px] font-bold text-nvidia-brand uppercase tracking-widest block font-mono">AI Research from NVIDIA</span>
-                    <h1 class="font-outfit text-4xl sm:text-5xl font-extrabold tracking-tight text-white leading-none">
+                    <h1 class="font-outfit text-3xl sm:text-5xl font-black tracking-tight text-white leading-none">
                         Locate<span class="text-nvidia-brand font-light">Anything</span>
                     </h1>
-                    <p class="text-sm text-slate-400 max-w-md font-medium leading-relaxed">
-                        An advanced 3B vision-language model. Locate any object, UI target, or text in images and videos with natural language—powered by ZeroGPU.
+                    <p class="text-xs text-slate-400 max-w-sm font-medium leading-relaxed">
+                        NVIDIA's advanced 3B vision-language model. Locate any object, UI target, or text in images and videos with natural language.
                     </p>
                 </div>
 
-                <!-- Primary Setup Card -->
-                <div class="glass-panel rounded-2xl p-5 space-y-5">
-                    <div class="grid grid-cols-2 gap-4">
+                <!-- Setup Glass Card Controls -->
+                <div class="glass-panel rounded-2xl p-4 space-y-4 pointer-events-auto max-w-xs shadow-2xl">
+                    <div class="grid grid-cols-2 gap-3">
                         
                         <!-- Media Type toggle selection -->
-                        <div class="space-y-1.5">
-                            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Media Type</label>
-                            <div class="grid grid-cols-2 gap-1 bg-black/40 p-1 rounded-xl border border-white/5 text-center">
-                                <button id="media-type-image" class="py-1.5 rounded-lg font-semibold text-[10px] transition-all bg-nvidia-brand text-black font-outfit font-black shadow shadow-nvidia-brand/10">
+                        <div class="space-y-1">
+                            <label class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">Media Type</label>
+                            <div class="grid grid-cols-2 gap-0.5 bg-black/40 p-0.5 rounded-lg border border-white/5 text-center">
+                                <button id="media-type-image" class="py-1 rounded-md font-semibold text-[9px] transition-all bg-nvidia-brand text-black font-outfit font-black shadow shadow-nvidia-brand/10">
                                     Image
                                 </button>
-                                <button id="media-type-video" class="py-1.5 rounded-lg font-semibold text-[10px] text-slate-400 hover:text-slate-200 transition-all">
+                                <button id="media-type-video" class="py-1 rounded-md font-semibold text-[9px] text-slate-400 hover:text-slate-200 transition-all">
                                     Video
                                 </button>
                             </div>
                         </div>
 
                         <!-- Task Selector -->
-                        <div class="space-y-1.5">
-                            <label for="task-type" class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Task Type</label>
-                            <select id="task-type" class="w-full bg-black/40 border border-white/5 rounded-xl px-2.5 py-2 text-[10px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200 font-semibold">
-                                <option value="Detection">Detection - Locate all matched</option>
-                                <option value="Grounding">Grounding - Match expression</option>
-                                <option value="OCR">OCR - Extract text boxes</option>
-                                <option value="GUI">GUI - Ground GUI targets</option>
-                                <option value="Pointing">Pointing - Extract points</option>
+                        <div class="space-y-1">
+                            <label for="task-type" class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">Task Type</label>
+                            <select id="task-type" class="w-full bg-black/40 border border-white/5 rounded-lg px-2 py-1 text-[9px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200 font-semibold">
+                                <option value="Detection">Detection</option>
+                                <option value="Grounding">Grounding</option>
+                                <option value="OCR">OCR</option>
+                                <option value="GUI">GUI</option>
+                                <option value="Pointing">Pointing</option>
                             </select>
                         </div>
 
                     </div>
 
-                    <!-- Run CTA Button -->
-                    <button id="run-btn" class="pill-btn-green w-full py-3.5 px-6 rounded-full text-black font-extrabold text-sm flex items-center justify-center gap-2 select-none">
-                        <span id="btn-icon">🧠</span>
-                        <span id="btn-text">Run Inference</span>
-                    </button>
-
-                    <!-- Advanced parameters sliders (Collapsible details) -->
-                    <details class="group border-t border-white/5 pt-4">
-                        <summary class="list-none flex justify-between items-center cursor-pointer select-none text-[10px] font-bold text-slate-400 tracking-wider uppercase hover:text-slate-200 transition-colors">
+                    <!-- Advanced parameters sliders (Collapsible details inside the left overlay) -->
+                    <details class="group border-t border-white/5 pt-3">
+                        <summary class="list-none flex justify-between items-center cursor-pointer select-none text-[8px] font-bold text-slate-400 tracking-wider uppercase hover:text-slate-200 transition-colors">
                             <span>⚙️ Advanced parameters</span>
-                            <svg class="h-3.5 w-3.5 transform group-open:rotate-180 transition-transform text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg class="h-3 w-3 transform group-open:rotate-180 transition-transform text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                             </svg>
                         </summary>
-                        <div class="space-y-4 pt-4">
+                        <div class="space-y-3 pt-3">
                             
                             <!-- Inference Mode Selection -->
-                            <div class="space-y-1.5">
-                                <label for="inference-mode" class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Inference Mode</label>
-                                <select id="inference-mode" class="w-full bg-black/40 border border-white/5 rounded-xl px-2.5 py-1.5 text-[10px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200">
-                                    <option value="hybrid">Hybrid - Speed & Quality</option>
-                                    <option value="fast">Fast - PBD Parallel</option>
-                                    <option value="slow">Slow - AR Sequential</option>
+                            <div class="space-y-1">
+                                <label for="inference-mode" class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">Inference Mode</label>
+                                <select id="inference-mode" class="w-full bg-black/40 border border-white/5 rounded-lg px-2 py-1 text-[9px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200">
+                                    <option value="hybrid">Hybrid</option>
+                                    <option value="fast">Fast</option>
+                                    <option value="slow">Slow</option>
                                 </select>
                             </div>
 
                             <!-- Short side resize cap -->
-                            <div class="space-y-1.5">
-                                <label for="short-size" class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Resize Cap (px)</label>
-                                <input type="number" id="short-size" placeholder="Auto-Cap (1024)" class="w-full bg-black/40 border border-white/5 rounded-xl px-2.5 py-1.5 text-[10px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200 font-mono">
+                            <div class="space-y-1">
+                                <label for="short-size" class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">Resize Cap (px)</label>
+                                <input type="number" id="short-size" placeholder="Auto-Cap (1024)" class="w-full bg-black/40 border border-white/5 rounded-lg px-2 py-1 text-[9px] focus:border-nvidia-brand focus:outline-none transition-all text-slate-200 font-mono">
                             </div>
 
                             <!-- Temp -->
-                            <div class="space-y-1.5">
-                                <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 tracking-wider">
+                            <div class="space-y-1">
+                                <div class="flex justify-between text-[8px] uppercase font-bold text-slate-400 tracking-wider">
                                     <span>Temperature</span>
                                     <span id="temp-val" class="font-mono text-nvidia-brand">0.7</span>
                                 </div>
-                                <input type="range" id="temp" min="0.1" max="2.0" step="0.1" value="0.7" class="w-full h-1 bg-black rounded-lg appearance-none cursor-pointer accent-nvidia-brand">
+                                <input type="range" id="temp" min="0.1" max="2.0" step="0.1" value="0.7" class="w-full h-0.5 bg-black rounded appearance-none cursor-pointer accent-nvidia-brand">
                             </div>
 
                             <!-- Top P -->
-                            <div class="space-y-1.5">
-                                <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 tracking-wider">
+                            <div class="space-y-1">
+                                <div class="flex justify-between text-[8px] uppercase font-bold text-slate-400 tracking-wider">
                                     <span>Top P</span>
                                     <span id="topp-val" class="font-mono text-nvidia-brand">0.9</span>
                                 </div>
-                                <input type="range" id="topp" min="0.05" max="1.0" step="0.05" value="0.9" class="w-full h-1 bg-black rounded-lg appearance-none cursor-pointer accent-nvidia-brand">
+                                <input type="range" id="topp" min="0.05" max="1.0" step="0.05" value="0.9" class="w-full h-0.5 bg-black rounded appearance-none cursor-pointer accent-nvidia-brand">
                             </div>
 
                             <!-- Top K -->
-                            <div class="space-y-1.5">
-                                <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 tracking-wider">
+                            <div class="space-y-1">
+                                <div class="flex justify-between text-[8px] uppercase font-bold text-slate-400 tracking-wider">
                                     <span>Top K</span>
                                     <span id="topk-val" class="font-mono text-nvidia-brand">20</span>
                                 </div>
-                                <input type="range" id="topk" min="1" max="100" step="1" value="20" class="w-full h-1 bg-black rounded-lg appearance-none cursor-pointer accent-nvidia-brand">
+                                <input type="range" id="topk" min="1" max="100" step="1" value="20" class="w-full h-0.5 bg-black rounded appearance-none cursor-pointer accent-nvidia-brand">
                             </div>
 
                             <!-- Video Frames (Only displayed for Video mode) -->
-                            <div id="video-frames-wrapper" class="space-y-1.5 opacity-50 pointer-events-none transition-opacity duration-300">
-                                <div class="flex justify-between text-[9px] uppercase font-bold text-slate-400 tracking-wider">
+                            <div id="video-frames-wrapper" class="space-y-1 opacity-50 pointer-events-none transition-opacity duration-300">
+                                <div class="flex justify-between text-[8px] uppercase font-bold text-slate-400 tracking-wider">
                                     <span>Max Video Frames</span>
                                     <span id="frames-val" class="font-mono text-nvidia-brand">4</span>
                                 </div>
-                                <input type="range" id="max-frames" min="1" max="10" step="1" value="4" class="w-full h-1 bg-black rounded-lg appearance-none cursor-pointer accent-nvidia-brand" disabled>
+                                <input type="range" id="max-frames" min="1" max="10" step="1" value="4" class="w-full h-0.5 bg-black rounded appearance-none cursor-pointer accent-nvidia-brand" disabled>
                             </div>
 
                         </div>
                     </details>
                 </div>
 
-                <!-- Example Library Section (SAM 3 Grid Style) -->
+                <!-- CTA Action Button (Floats at bottom-left corner of visual container) -->
+                <div class="pointer-events-auto pt-2 max-w-xs">
+                    <button id="run-btn" class="pill-btn-green w-full py-3 px-6 rounded-full text-black font-extrabold text-sm flex items-center justify-center gap-2 select-none shadow-2xl">
+                        <span id="btn-icon">🧠</span>
+                        <span id="btn-text">Run Inference</span>
+                    </button>
+                </div>
+
+            </div>
+
+            <!-- 3. Floating Categories Search Bar Overlay (Right/Center side, extremely clean glass box) -->
+            <div class="absolute top-1/2 right-6 lg:right-16 -translate-y-1/2 z-30 flex justify-center pointer-events-none w-full max-w-xs">
+                <div class="sam-input-bar rounded-2xl px-3.5 py-2.5 flex items-center gap-2 w-full pointer-events-auto">
+                    <svg class="h-4 w-4 text-nvidia-brand shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    <input type="text" id="categories" value="car, bus, person, potted plant" placeholder="Describe objects to locate..." class="bg-transparent border-none outline-none focus:outline-none w-full text-slate-100 placeholder-slate-600 font-semibold text-xs">
+                    <button id="clear-search-btn" class="text-slate-500 hover:text-white transition-colors p-0.5 rounded-full hover:bg-white/5 shrink-0">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Floating Workspace Status -->
+            <div class="absolute bottom-4 right-4 z-30 bg-black/60 backdrop-blur px-2.5 py-1 rounded-lg border border-white/10 text-[9px] text-slate-400 font-mono select-none pointer-events-none">
+                status: <span id="workspace-status" class="text-slate-200 font-semibold">No Media Loaded</span>
+            </div>
+
+        </div>
+
+        <!-- Shelf Section (Examples and Log metrics placed directly below the giant showcase) -->
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+            
+            <!-- Left: Examples Library Shelf (Col Span: 5) -->
+            <div class="lg:col-span-5 space-y-4">
                 <div class="glass-panel rounded-2xl p-5 space-y-4">
-                    <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block">🖼️ Interactive Quick Sandbox</span>
+                    <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block font-mono">🖼️ Interactive Quick Sandbox</span>
                     <div class="grid grid-cols-4 gap-3">
                         
                         <!-- Card 1 -->
@@ -366,93 +441,16 @@
                 <div class="glass-panel rounded-2xl p-4 text-[10px] text-slate-500 font-mono flex justify-between items-center select-none bg-black/40">
                     <span class="truncate block">compiled: <span id="raw-prompt-preview" class="text-slate-400"></span></span>
                 </div>
+            </div>
 
-            </section>
-
-            <!-- RIGHT PANEL: Full Showcase Media Sandbox (Col Span: 7) -->
-            <section class="lg:col-span-7 space-y-6">
-                
-                <!-- GTC Polygon Frame Workspace -->
-                <div class="gtc-polygon-wrapper w-full aspect-video min-h-[360px] sm:min-h-[440px] relative">
-                    <div class="gtc-neon-border"></div>
-                    <div class="gtc-inner-box p-0 flex flex-col relative"> <!-- Full-bleed inner box -->
-                        
-                        <!-- Floating Glassmorphic Workspace Status -->
-                        <div class="absolute bottom-4 right-4 z-30 bg-black/60 backdrop-blur px-2.5 py-1 rounded-lg border border-white/10 text-[9px] text-slate-400 font-mono select-none pointer-events-none">
-                            status: <span id="workspace-status" class="text-slate-200 font-semibold">No Media Loaded</span>
-                        </div>
-
-                        <!-- Dynamic Canvas Box Inside Polygon Frame -->
-                        <div class="flex-1 relative flex items-center justify-center overflow-hidden min-h-0 z-20">
-                            
-                            <!-- 1. Floating Glassmorphic Categories Search Bar Overlay (SAM 3 Keynote Feature) -->
-                            <div class="absolute top-5 left-4 right-4 z-30 flex justify-center pointer-events-none">
-                                <div class="sam-input-bar rounded-xl px-4 py-2.5 flex items-center gap-2.5 w-full max-w-md pointer-events-auto">
-                                    <svg class="h-4.5 w-4.5 text-nvidia-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                    <input type="text" id="categories" value="car, bus, person, potted plant" placeholder="Describe objects to locate (e.g. car, person)..." class="bg-transparent border-none outline-none focus:outline-none w-full text-slate-100 placeholder-slate-600 font-semibold text-xs">
-                                    <button id="clear-search-btn" class="text-slate-500 hover:text-white transition-colors p-0.5 rounded-full hover:bg-white/5">
-                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-
-                            <!-- Input Media Upload Zone (Initially shown if no media loaded) -->
-                            <div id="drop-zone" class="absolute inset-0 border-none rounded-none bg-black/40 flex flex-col items-center justify-center p-4 text-center cursor-pointer transition-all">
-                                <div id="upload-prompt" class="space-y-3 pt-8"> <!-- Offset for search bar -->
-                                    <div class="inline-flex h-11 w-11 rounded-full bg-white/5 items-center justify-center text-slate-400">
-                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-                                        </svg>
-                                    </div>
-                                    <div>
-                                        <p class="text-xs font-bold text-slate-200">Drag & drop your file here</p>
-                                        <p class="text-[10px] text-slate-500 mt-1">or click to browse local folders</p>
-                                    </div>
-                                </div>
-
-                                <!-- Dynamic Preview Media Rendering inside Hexagon Frame -->
-                                <img id="preview-image" src="" alt="Input Preview" class="hidden max-h-full max-w-full rounded-lg object-contain shadow-lg">
-                                <video id="preview-video" src="" controls class="hidden max-h-full max-w-full rounded-lg shadow-lg"></video>
-
-                                <!-- File Upload Trigger -->
-                                <input type="file" id="media-file-input" accept="image/*,video/*" class="absolute inset-0 opacity-0 cursor-pointer">
-                            </div>
-
-                            <!-- Inference Output Zone (Takes over when result loaded) -->
-                            <div class="absolute inset-0 pointer-events-none flex items-center justify-center">
-                                <img id="output-image" src="" alt="Inference Output" class="hidden max-h-full max-w-full rounded-lg object-contain shadow-lg pointer-events-auto">
-                                <video id="output-video" src="" controls class="hidden max-h-full max-w-full rounded-lg shadow-lg pointer-events-auto"></video>
-                            </div>
-
-                            <!-- Processing Overlays -->
-                            <div id="processing-overlay" class="absolute inset-0 bg-black/85 backdrop-blur-sm hidden flex-col items-center justify-center gap-4 z-50">
-                                <div class="flex gap-1.5">
-                                    <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-nvidia-brand" style="animation-delay: 0s;"></span>
-                                    <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-emerald-400" style="animation-delay: 0.2s;"></span>
-                                    <span class="dot-pulse inline-block h-3 w-3 rounded-full bg-emerald-300" style="animation-delay: 0.4s;"></span>
-                                </div>
-                                <div class="text-center space-y-1">
-                                    <p id="processing-status" class="text-[11px] font-bold tracking-widest text-slate-200 uppercase">Executing Model...</p>
-                                    <p class="text-[9px] text-slate-500 uppercase tracking-wider font-mono">Gradio Queue Engine Active</p>
-                                </div>
-                            </div>
-
-                        </div>
-
-                    </div>
-                </div>
-
-                <!-- PERFORMANCE ANALYTICS & LOG CONSOLE -->
+            <!-- Right: Performance Metrics & Tag draw overlays (Col Span: 7) -->
+            <div class="lg:col-span-7 space-y-4">
                 <div class="glass-panel rounded-2xl p-5 space-y-4">
                     <div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-stretch">
                         
                         <!-- Performance Statistics Metrics Console (Grid: 5) -->
                         <div class="sm:col-span-5 bg-black/60 rounded-xl p-4 border border-white/5 font-mono text-[10px] text-slate-300 space-y-2 leading-normal">
-                            <div class="text-nvidia-brand font-bold border-b border-white/5 pb-1 mb-1.5 uppercase tracking-widest text-[9px]">📊 Metrics Log</div>
+                            <div class="text-nvidia-brand font-bold border-b border-white/5 pb-1 mb-1.5 uppercase tracking-widest text-[9px] font-mono">📊 Metrics Log</div>
                             <div class="flex justify-between"><span class="text-slate-500">Status:</span> <span id="meta-status" class="text-emerald-500 font-semibold">Idle</span></div>
                             <div class="flex justify-between"><span class="text-slate-500">Tokens/Frames:</span> <span id="meta-tokens">-</span></div>
                             <div class="flex justify-between"><span class="text-slate-500">Detections:</span> <span id="meta-boxes">-</span></div>
@@ -476,10 +474,10 @@
                     <!-- Optional dynamic trace wrapper -->
                     <div id="rich-trace-log" class="hidden border-t border-white/5 pt-3"></div>
                 </div>
-
-            </section>
+            </div>
 
         </div>
+
     </main>
 
     <!-- Gradio client connection & app runtime logic -->