Spaces:

nvidia
/

LocateAnything

Running on Zero

App Files Files Community

akhaliq HF Staff commited on May 29

Commit

16461c2

1 Parent(s): 0030c01

minimal redesign

Browse files

Files changed (2) hide show

app.py +5 -3
index.html +209 -281

app.py CHANGED Viewed

@@ -353,7 +353,6 @@ SAFETY_MARGIN = 25
 EST_SECONDS_PER_FRAME = 20
-@spaces.GPU(duration=GPU_HARD_LIMIT_IMAGE)
 def run_image_gpu_api(
     image_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None
@@ -400,7 +399,6 @@ def run_image_gpu_api(
     return out_img_path, stats, output_text, detections_summary
-@spaces.GPU(duration=GPU_HARD_LIMIT_VIDEO)
 def run_video_gpu_api(
     video_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None, max_video_frames: int
@@ -570,6 +568,7 @@ async def homepage():
 @app.api(name="run_inference")
 def run_inference_api(
     input_type: str,
     image_file: FileData | None,
@@ -584,7 +583,10 @@ def run_inference_api(
     question_override: str | None = None,
     max_video_frames: int = 4
 ) -> tuple[FileData | None, FileData | None, dict]:
-    """Exposed Gradio Queueing Endpoint for custom frontend interactions."""
     try:
         if not category:
             category = "objects"

 EST_SECONDS_PER_FRAME = 20
 def run_image_gpu_api(
     image_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None
     return out_img_path, stats, output_text, detections_summary
 def run_video_gpu_api(
     video_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None, max_video_frames: int
 @app.api(name="run_inference")
+@spaces.GPU(duration=240)
 def run_inference_api(
     input_type: str,
     image_file: FileData | None,
     question_override: str | None = None,
     max_video_frames: int = 4
 ) -> tuple[FileData | None, FileData | None, dict]:
+    """Exposed Gradio Queueing Endpoint for custom frontend interactions.
+    ZeroGPU allocation is triggered directly at this endpoint boundary.
+    """
     try:
         if not category:
             category = "objects"

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NVIDIA LocateAnything - Fast Vision-Language Grounding with Parallel Box Decoding</title>
     <!-- Premium Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -155,17 +155,6 @@
             transform: translateY(1px);
         }
-        .pill-btn-outline {
-            background-color: transparent;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        .pill-btn-outline:hover {
-            background-color: rgba(255, 255, 255, 0.08);
-            border-color: rgba(255, 255, 255, 0.4);
-            transform: translateY(-1px);
-        }
         /* Custom Scrollbar */
         ::-webkit-scrollbar {
             width: 6px;
@@ -200,8 +189,8 @@
 <body class="text-slate-100 font-sans min-h-screen pb-16 carbon-grid">
     <!-- NVIDIA Brand Navigation Header -->
-    <nav class="bg-white/95 backdrop-blur-md sticky top-0 z-50 px-6 py-3.5 border-b border-slate-200/90 shadow-sm flex items-center justify-between">
-        <div class="max-w-7xl w-full mx-auto flex items-center justify-between">
             <div class="flex items-center gap-8">
                 <!-- Official Styled NVIDIA Brand Text Logo -->
                 <a href="#" class="flex items-center gap-1.5 select-none group">
@@ -217,80 +206,203 @@
                 <div class="hidden lg:flex items-center gap-6 text-sm font-semibold text-slate-600">
                     <a href="https://huggingface.co/nvidia/LocateAnything-3B" target="_blank" class="hover:text-nvidia-brand transition-colors">Model Card</a>
                     <a href="https://arxiv.org/abs/2605.27365" target="_blank" class="hover:text-nvidia-brand transition-colors">arXiv Paper</a>
-                    <a href="https://github.com/NVlabs/Eagle/tree/main/Embodied" target="_blank" class="hover:text-nvidia-brand transition-colors">GitHub Repository</a>
                 </div>
             </div>
             <div class="flex items-center gap-4">
-                <span class="hidden md:inline-flex px-3 py-1 text-xs font-semibold rounded bg-emerald-500/10 text-nvidia-brand border border-nvidia-brand/20 items-center gap-1.5">
                     <span class="h-1.5 w-1.5 rounded-full bg-nvidia-brand animate-pulse"></span>
-                    Parallel Box Decoding Active
                 </span>
-                <a href="https://huggingface.co/spaces/akhaliq/LocateAnything" class="px-4 py-1.5 rounded bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs tracking-wider uppercase transition-all">
-                    HF Space
-                </a>
             </div>
         </div>
     </nav>
-    <!-- MAIN GRID CONTAINER -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-14 space-y-12">
-        <!-- HERO / KEYNOTE INTERACTIVE HEADER SECTION (GTC Taipei + SAM 3 overlay) -->
-        <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
-            <!-- Left Info Panel (Col Span: 6) -->
-            <div class="lg:col-span-6 space-y-6 lg:space-y-8">
-                <div class="space-y-2">
-                    <span class="text-sm font-black font-outfit text-nvidia-brand tracking-widest uppercase block">NVIDIA RESEARCH AT GTC</span>
-                    <h2 class="text-4xl sm:text-5xl lg:text-[54px] font-black font-outfit text-white leading-[1.08] tracking-tight">
-                        Locate Anything in Images & Videos in Parallel
-                    </h2>
-                </div>
-                <p class="text-slate-300 text-sm sm:text-base leading-relaxed font-light">
-                    LocateAnything is a state-of-the-art 3B vision-language model designed for rapid visual grounding. Powered by Qwen2.5 and NVIDIA's Parallel Box Decoding (PBD), it predicts bounding boxes and coordinates in a single parallel step, delivering up to <strong class="text-nvidia-brand font-semibold">2.5�� higher throughput</strong> than conventional autoregressive models.
-                </p>
-                <!-- Floating Glassmorphic Search Bar (SAM 3 Input Style) -->
-                <div class="space-y-2">
-                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">Describe target objects to locate:</label>
-                    <div class="sam-input-bar rounded-full px-5 py-4 flex items-center gap-3">
-                        <svg class="h-5 w-5 text-slate-400" 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, dog)..." class="bg-transparent border-none outline-none focus:outline-none w-full text-slate-100 placeholder-slate-500 font-medium text-sm sm:text-base">
-                        <button id="clear-search-btn" class="text-slate-400 hover:text-white transition-colors p-1 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>
-                <!-- Call to Action Buttons -->
-                <div class="flex flex-wrap gap-4 pt-2">
-                    <button id="run-btn" class="pill-btn-green py-3 px-8 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>
-                    <a href="https://research.nvidia.com/labs/lpr/locate-anything/LocateAnything.pdf" target="_blank" class="pill-btn-outline py-3 px-8 rounded-full text-white font-bold text-sm flex items-center justify-center select-none">
-                        Read Tech Report ↗
-                    </a>
                 </div>
-            </div>
-            <!-- Right Visual Workspace inside GTC Glowing Polygon Frame (Col Span: 6) -->
-            <div class="lg:col-span-6 flex flex-col justify-center">
-                <div class="gtc-polygon-wrapper w-full aspect-video min-h-[340px] sm:min-h-[400px]">
                     <div class="gtc-neon-border"></div>
                     <div class="gtc-inner-box p-4 flex flex-col">
                         <!-- Header row of Workspace inside Hexagon -->
-                        <div class="flex justify-between items-center border-b border-white/5 pb-3.5 mb-4 z-20">
                             <span class="text-xs font-bold font-mono text-nvidia-brand uppercase tracking-widest flex items-center gap-2">
-                                <span class="h-2 w-2 rounded-full bg-nvidia-brand animate-ping"></span>
                                 Media Workspace
                             </span>
                             <span id="workspace-status" class="text-[10px] text-slate-500 font-mono">No Media Loaded</span>
@@ -311,7 +423,6 @@
                                         <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>
-                                    <p class="text-[9px] text-slate-600">Supports PNG, JPG, JPEG, and MP4 formats</p>
                                 </div>
                                 <!-- Dynamic Preview Media Rendering inside Hexagon Frame -->
@@ -336,8 +447,8 @@
                                     <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-xs font-bold tracking-widest text-slate-200 uppercase">Executing Model...</p>
-                                    <p class="text-[9px] text-slate-500 uppercase tracking-wider font-mono">FastAPI Queuing Engine Active</p>
                                 </div>
                             </div>
@@ -346,225 +457,40 @@
                     </div>
                 </div>
-            </div>
-        </section>
-        <!-- CONFIGURATION & CONTROLS ACCORDION -->
-        <section class="glass-panel rounded-2xl p-6 sm:p-8 space-y-6">
-            <div class="flex justify-between items-center border-b border-white/5 pb-4">
-                <h3 class="text-base font-black font-outfit text-white uppercase tracking-wider flex items-center gap-2">
-                    <svg class="h-4 w-4 text-nvidia-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                    Model Parameters Setup
-                </h3>
-                <span class="text-[10px] text-slate-500 uppercase tracking-widest font-mono">Fine-Tune Inference Config</span>
-            </div>
-            <!-- Parameters Grid -->
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-                <!-- Media Type toggle selection -->
-                <div class="space-y-2">
-                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">1. Media Mode</label>
-                    <div class="grid grid-cols-2 gap-1.5 bg-black/40 p-1 rounded-xl border border-white/5 text-center">
-                        <button id="media-type-image" class="py-2 rounded-lg font-semibold text-xs transition-all bg-nvidia-brand text-black font-extrabold shadow shadow-nvidia-brand/10">
-                            Image
-                        </button>
-                        <button id="media-type-video" class="py-2 rounded-lg font-semibold text-xs text-slate-400 hover:text-slate-200 transition-all">
-                            Video
-                        </button>
-                    </div>
-                </div>
-                <!-- Task Selector -->
-                <div class="space-y-2">
-                    <label for="task-type" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">2. Task Type</label>
-                    <select id="task-type" class="w-full bg-black/40 border border-white/5 rounded-xl px-3 py-2 text-xs focus:border-nvidia-brand focus:outline-none transition-all text-slate-200">
-                        <option value="Detection">Detection - Locate all matched objects</option>
-                        <option value="Grounding">Grounding - Match specific expression</option>
-                        <option value="OCR">OCR - Extract all text coordinate boxes</option>
-                        <option value="GUI">GUI - Ground user interface targets</option>
-                        <option value="Pointing">Pointing - Extract point coordinates</option>
-                    </select>
-                </div>
-                <!-- Inference Mode Selection -->
-                <div class="space-y-2">
-                    <label for="inference-mode" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">3. Inference Mode</label>
-                    <select id="inference-mode" class="w-full bg-black/40 border border-white/5 rounded-xl px-3 py-2 text-xs focus:border-nvidia-brand focus:outline-none transition-all text-slate-200">
-                        <option value="hybrid">Hybrid - Balance Speed & Quality (PBD+AR)</option>
-                        <option value="fast">Fast - Maximize Speed (PBD Parallel only)</option>
-                        <option value="slow">Slow - Maximize Accuracy (AR Sequential only)</option>
-                    </select>
-                </div>
-                <!-- Short side resize cap -->
-                <div class="space-y-2">
-                    <label for="short-size" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">4. 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-3 py-2 text-xs focus:border-nvidia-brand focus:outline-none transition-all text-slate-200 font-mono">
-                </div>
-            </div>
-            <!-- Advanced parameter 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-[11px] font-bold text-slate-400 tracking-wider uppercase hover:text-slate-200 transition-colors">
-                    <span class="flex items-center gap-1.5">
-                        ⚙️ Advanced Generation Sliders
-                    </span>
-                    <svg class="h-4 w-4 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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 pt-5">
-                    <!-- Temp -->
-                    <div class="space-y-2">
-                        <div class="flex justify-between text-[10px] 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">
-                    </div>
-                    <!-- Top P -->
-                    <div class="space-y-2">
-                        <div class="flex justify-between text-[10px] 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">
-                    </div>
-                    <!-- Top K -->
-                    <div class="space-y-2">
-                        <div class="flex justify-between text-[10px] 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">
-                    </div>
-                    <!-- Video Frames (Only displayed for Video mode) -->
-                    <div id="video-frames-wrapper" class="space-y-2 opacity-50 pointer-events-none transition-opacity duration-300">
-                        <div class="flex justify-between text-[10px] 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>
-                    </div>
-                </div>
-            </details>
-            <!-- Text Prompt logs -->
-            <div class="bg-black/50 border border-white/5 rounded-xl p-3.5 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
-                <div class="space-y-1">
-                    <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest block">System Formulated Text Prompt:</span>
-                    <p id="raw-prompt-preview" class="text-xs text-slate-300 font-mono break-all leading-normal"></p>
-                </div>
-                <div class="text-[10px] text-slate-500 font-mono shrink-0 select-none">Auto-compiled from model settings</div>
-            </div>
-        </section>
-        <!-- PRELOADED EXAMPLES LIBRARY (Meta SAM 3 Grid Style) -->
-        <section class="space-y-6">
-            <div class="flex justify-between items-center border-b border-white/5 pb-3">
-                <h3 class="text-base font-black font-outfit text-white uppercase tracking-wider flex items-center gap-2">
-                    <svg class="h-4.5 w-4.5 text-nvidia-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 00-2 2z" />
-                    </svg>
-                    Interactive Examples Sandbox
-                </h3>
-                <span class="text-[10px] text-slate-500 uppercase tracking-widest font-mono select-none">Quick Test Gallery</span>
-            </div>
-            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
-                <!-- Card 1 -->
-                <div class="example-card glass-panel glass-panel-interactive rounded-2xl p-3 cursor-pointer group space-y-3" data-type="Image" data-name="Book" data-category="book" data-task="Detection" data-mode="hybrid" data-asset="/assets/book.jpg">
-                    <div class="h-28 w-full rounded-xl bg-cover bg-center overflow-hidden border border-white/5 bg-slate-900 group-hover:scale-[1.02] transition-transform duration-500" style="background-image: url('/assets/book.jpg');"></div>
-                    <div class="flex justify-between items-center px-1">
-                        <span class="text-xs font-bold text-slate-200">Library Book</span>
-                        <span class="text-[9px] px-2 py-0.5 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/10 font-bold tracking-wider uppercase">Detection</span>
                     </div>
-                </div>
-                <!-- Card 2 -->
-                <div class="example-card glass-panel glass-panel-interactive rounded-2xl p-3 cursor-pointer group space-y-3" data-type="Image" data-name="Sweet" data-category="sweet" data-task="Detection" data-mode="hybrid" data-asset="/assets/sweet.jpg">
-                    <div class="h-28 w-full rounded-xl bg-cover bg-center overflow-hidden border border-white/5 bg-slate-900 group-hover:scale-[1.02] transition-transform duration-500" style="background-image: url('/assets/sweet.jpg');"></div>
-                    <div class="flex justify-between items-center px-1">
-                        <span class="text-xs font-bold text-slate-200">Sushi Sweet</span>
-                        <span class="text-[9px] px-2 py-0.5 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/10 font-bold tracking-wider uppercase">Detection</span>
-                    </div>
                 </div>
-                <!-- Card 3 -->
-                <div class="example-card glass-panel glass-panel-interactive rounded-2xl p-3 cursor-pointer group space-y-3" data-type="Image" data-name="Person" data-category="person" data-task="Detection" data-mode="hybrid" data-asset="/assets/person.jpg">
-                    <div class="h-28 w-full rounded-xl bg-cover bg-center overflow-hidden border border-white/5 bg-slate-900 group-hover:scale-[1.02] transition-transform duration-500" style="background-image: url('/assets/person.jpg');"></div>
-                    <div class="flex justify-between items-center px-1">
-                        <span class="text-xs font-bold text-slate-200">Audience Group</span>
-                        <span class="text-[9px] px-2 py-0.5 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/10 font-bold tracking-wider uppercase">Detection</span>
-                    </div>
-                </div>
-                <!-- Card 4 -->
-                <div class="example-card glass-panel glass-panel-interactive rounded-2xl p-3 cursor-pointer group space-y-3" data-type="Image" data-name="OCR" data-category="text" data-task="OCR" data-mode="fast" data-asset="/assets/ocr.jpg">
-                    <div class="h-28 w-full rounded-xl bg-cover bg-center overflow-hidden border border-white/5 bg-slate-900 group-hover:scale-[1.02] transition-transform duration-500" style="background-image: url('/assets/ocr.jpg');"></div>
-                    <div class="flex justify-between items-center px-1">
-                        <span class="text-xs font-bold text-slate-200">Street Sign</span>
-                        <span class="text-[9px] px-2 py-0.5 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/10 font-bold tracking-wider uppercase">OCR</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- PERFORMANCE ANALYTICS & LOG CONSOLE -->
-        <section class="glass-panel rounded-2xl p-6 sm:p-8 space-y-6">
-            <h3 class="text-sm font-black font-mono text-nvidia-brand uppercase tracking-widest flex items-center gap-2">
-                <svg class="h-4.5 w-4.5 text-nvidia-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                Inference Console Logs Trace
-            </h3>
-            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-stretch">
-                <!-- Performance Statistics Metrics Console (Grid: 5) -->
-                <div class="md:col-span-5 bg-black/60 rounded-xl p-5 border border-white/5 font-mono text-xs text-slate-300 space-y-3.5 leading-relaxed">
-                    <div class="text-nvidia-brand font-bold border-b border-white/5 pb-2 mb-2 uppercase tracking-widest text-[10px]">📊 Metrics Log</div>
-                    <div class="flex justify-between"><span class="text-slate-500">Inference 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">Processed Tokens/Frames:</span> <span id="meta-tokens">-</span></div>
-                    <div class="flex justify-between"><span class="text-slate-500">Bounding Box Detections:</span> <span id="meta-boxes">-</span></div>
-                    <div class="flex justify-between"><span class="text-slate-500">TPS (Tokens/s):</span> <span id="meta-tps">-</span></div>
-                    <div class="flex justify-between"><span class="text-slate-500">BPS (Boxes/s):</span> <span id="meta-bps">-</span></div>
-                    <div class="flex justify-between"><span class="text-slate-500">Processing Time:</span> <span id="meta-time">-</span></div>
-                </div>
-                <!-- Tag drawer box list (Grid: 7) -->
-                <div class="md:col-span-7 bg-black/60 rounded-xl p-5 border border-white/5 flex flex-col">
-                    <div class="text-nvidia-brand font-mono font-bold border-b border-white/5 pb-2 mb-2.5 uppercase tracking-widest text-[10px] flex justify-between shrink-0">
-                        <span>🎯 Detected Target Coordinates</span>
-                        <span id="detection-count-badge" class="text-[9px] bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 px-2 py-0.5 rounded-full font-bold">0</span>
-                    </div>
-                    <div id="detection-tags-wrapper" class="flex-1 flex flex-wrap gap-2 max-h-[140px] overflow-y-auto pt-1 align-content-start text-xs text-slate-500">
-                        No objects detected. Stage parameters and click Run Inference to trigger the model pipeline.
-                    </div>
-                </div>
-            </div>
-            <!-- Optional dynamic trace wrapper -->
-            <div id="rich-trace-log" class="hidden border-t border-white/5 pt-4"></div>
-        </section>
     </main>
     <!-- Gradio client connection & app runtime logic -->
@@ -690,8 +616,8 @@
         function setMediaType(type) {
             selectedMediaType = type;
             if (type === "Image") {
-                mediaTypeImageBtn.className = "py-2 rounded-lg font-semibold text-xs transition-all bg-nvidia-brand text-black font-outfit font-black shadow shadow-nvidia-brand/10";
-                mediaTypeVideoBtn.className = "py-2 rounded-lg font-semibold text-xs text-slate-400 hover:text-slate-200 transition-all";
                 videoFramesWrapper.classList.add("hidden");
                 videoFramesWrapper.classList.add("opacity-50");
                 videoFramesWrapper.classList.add("pointer-events-none");
@@ -699,8 +625,8 @@
                 fileInput.accept = "image/*";
                 workspaceStatus.textContent = activeFile ? "Image Loaded" : "No Media Loaded";
             } else {
-                mediaTypeVideoBtn.className = "py-2 rounded-lg font-semibold text-xs transition-all bg-nvidia-brand text-black font-outfit font-black shadow shadow-nvidia-brand/10";
-                mediaTypeImageBtn.className = "py-2 rounded-lg font-semibold text-xs text-slate-400 hover:text-slate-200 transition-all";
                 videoFramesWrapper.classList.remove("hidden");
                 videoFramesWrapper.classList.remove("opacity-50");
                 videoFramesWrapper.classList.remove("pointer-events-none");
@@ -818,9 +744,11 @@
                     // Setup Media type
                     setMediaType(type);
-                    // Fetch asset file
                     const ext = type === "Image" ? "jpg" : "mp4";
-                    const file = await loadExampleFromAsset(assetUrl, `${name.toLowerCase()}.${ext}`);
                     if (file) {
                         handleFileImport(file);
                     }
@@ -939,7 +867,7 @@
                     detectionTagsWrapper.innerHTML = "";
                     detections.forEach(det => {
                         const tag = document.createElement("span");
-                        tag.className = "px-2.5 py-1 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 font-bold uppercase tracking-wider text-[10px] animate-fade-in";
                         tag.textContent = det.frame ? `[Frame ${det.frame}] ${det.label}` : det.label;
                         detectionTagsWrapper.appendChild(tag);
                     });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NVIDIA LocateAnything - Fast Vision-Language Grounding</title>
     <!-- Premium Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
             transform: translateY(1px);
         }
         /* Custom Scrollbar */
         ::-webkit-scrollbar {
             width: 6px;
 <body class="text-slate-100 font-sans min-h-screen pb-16 carbon-grid">
     <!-- NVIDIA Brand Navigation Header -->
+    <nav class="bg-white/95 backdrop-blur-md sticky top-0 z-50 px-6 py-3.5 border-b border-slate-200/90 shadow-sm">
+        <div class="max-w-7xl mx-auto flex items-center justify-between">
             <div class="flex items-center gap-8">
                 <!-- Official Styled NVIDIA Brand Text Logo -->
                 <a href="#" class="flex items-center gap-1.5 select-none group">
                 <div class="hidden lg:flex items-center gap-6 text-sm font-semibold text-slate-600">
                     <a href="https://huggingface.co/nvidia/LocateAnything-3B" target="_blank" class="hover:text-nvidia-brand transition-colors">Model Card</a>
                     <a href="https://arxiv.org/abs/2605.27365" target="_blank" class="hover:text-nvidia-brand transition-colors">arXiv Paper</a>
+                    <a href="https://github.com/NVlabs/Eagle/tree/main/Embodied" target="_blank" class="hover:text-nvidia-brand transition-colors">GitHub</a>
                 </div>
             </div>
             <div class="flex items-center gap-4">
+                <span class="hidden md:inline-flex px-3 py-1 text-xs font-semibold rounded bg-emerald-500/10 text-nvidia-brand border border-nvidia-brand/20 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>
             </div>
         </div>
     </nav>
+    <!-- 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">
+            <!-- LEFT PANEL: Controls (Col Span: 5) -->
+            <section class="lg:col-span-5 space-y-6">
+                <!-- Setup Card -->
+                <div class="glass-panel rounded-2xl p-6 space-y-6">
+                    <!-- 1. Floating Glassmorphic Search Bar (SAM 3 Input Style) -->
+                    <div class="space-y-2">
+                        <label class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block">Describe target objects to locate:</label>
+                        <div class="sam-input-bar rounded-xl px-4 py-3 flex items-center gap-2">
+                            <svg class="h-4.5 w-4.5 text-slate-400" 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 (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-sm">
+                            <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.5 w-4.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>
+                    <!-- Layout Configuration Grid -->
+                    <div class="grid grid-cols-2 gap-4">
+                        <!-- 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">
+                                    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">
+                                    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>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- Second row options -->
+                    <div class="grid grid-cols-2 gap-4">
+                        <!-- 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-2 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>
+                            </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>
+                    </div>
+                    <!-- 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">
+                            <span>⚙️ Advanced Sliders</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">
+                                <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">
+                            <!-- Temp -->
+                            <div class="space-y-1.5">
+                                <div class="flex justify-between text-[9px] 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">
+                            </div>
+                            <!-- Top P -->
+                            <div class="space-y-1.5">
+                                <div class="flex justify-between text-[9px] 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">
+                            </div>
+                            <!-- Top K -->
+                            <div class="space-y-1.5">
+                                <div class="flex justify-between text-[9px] 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">
+                            </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">
+                                    <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>
+                            </div>
+                        </div>
+                    </details>
+                    <!-- Run CTA Button -->
+                    <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">
                         <span id="btn-icon">🧠</span>
                         <span id="btn-text">Run Inference</span>
                     </button>
                 </div>
+                <!-- Example Library Section (SAM 3 Grid Style) -->
+                <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>
+                    <div class="grid grid-cols-4 gap-3">
+                        <!-- Card 1 -->
+                        <div class="example-card border border-white/5 rounded-xl p-1 cursor-pointer group space-y-1 bg-black/35 hover:border-nvidia-brand/20 transition-all text-center" data-type="Image" data-name="Book" data-category="book" data-task="Detection" data-mode="hybrid" data-asset="/assets/book.jpg">
+                            <div class="h-12 w-full rounded-lg bg-cover bg-center overflow-hidden bg-slate-900" style="background-image: url('/assets/book.jpg');"></div>
+                            <span class="text-[9px] font-semibold text-slate-300 block truncate">Book</span>
+                        </div>
+                        <!-- Card 2 -->
+                        <div class="example-card border border-white/5 rounded-xl p-1 cursor-pointer group space-y-1 bg-black/35 hover:border-nvidia-brand/20 transition-all text-center" data-type="Image" data-name="Sweet" data-category="sweet" data-task="Detection" data-mode="hybrid" data-asset="/assets/sweet.jpg">
+                            <div class="h-12 w-full rounded-lg bg-cover bg-center overflow-hidden bg-slate-900" style="background-image: url('/assets/sweet.jpg');"></div>
+                            <span class="text-[9px] font-semibold text-slate-300 block truncate">Sweet</span>
+                        </div>
+                        <!-- Card 3 -->
+                        <div class="example-card border border-white/5 rounded-xl p-1 cursor-pointer group space-y-1 bg-black/35 hover:border-nvidia-brand/20 transition-all text-center" data-type="Image" data-name="Person" data-category="person" data-task="Detection" data-mode="hybrid" data-asset="/assets/person.jpg">
+                            <div class="h-12 w-full rounded-lg bg-cover bg-center overflow-hidden bg-slate-900" style="background-image: url('/assets/person.jpg');"></div>
+                            <span class="text-[9px] font-semibold text-slate-300 block truncate">People</span>
+                        </div>
+                        <!-- Card 4 -->
+                        <div class="example-card border border-white/5 rounded-xl p-1 cursor-pointer group space-y-1 bg-black/35 hover:border-nvidia-brand/20 transition-all text-center" data-type="Image" data-name="OCR" data-category="text" data-task="OCR" data-mode="fast" data-asset="/assets/ocr.jpg">
+                            <div class="h-12 w-full rounded-lg bg-cover bg-center overflow-hidden bg-slate-900" style="background-image: url('/assets/ocr.jpg');"></div>
+                            <span class="text-[9px] font-semibold text-slate-300 block truncate">OCR</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Text Prompt logs -->
+                <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>
+            </section>
+            <!-- RIGHT PANEL: Media Sandbox (Col Span: 7) -->
+            <section class="lg:col-span-7 space-y-6">
+                <div class="gtc-polygon-wrapper w-full aspect-video min-h-[360px] sm:min-h-[440px]">
                     <div class="gtc-neon-border"></div>
                     <div class="gtc-inner-box p-4 flex flex-col">
                         <!-- Header row of Workspace inside Hexagon -->
+                        <div class="flex justify-between items-center border-b border-white/5 pb-3 mb-4 z-20">
                             <span class="text-xs font-bold font-mono text-nvidia-brand uppercase tracking-widest flex items-center gap-2">
+                                <span class="h-1.5 w-1.5 rounded-full bg-nvidia-brand animate-ping"></span>
                                 Media Workspace
                             </span>
                             <span id="workspace-status" class="text-[10px] text-slate-500 font-mono">No Media Loaded</span>
                                         <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 -->
                                     <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>
+                <!-- PERFORMANCE ANALYTICS & LOG CONSOLE -->
+                <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="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>
+                            <div class="flex justify-between"><span class="text-slate-500">TPS / BPS:</span> <span><span id="meta-tps">-</span> / <span id="meta-bps">-</span></span></div>
+                            <div class="flex justify-between"><span class="text-slate-500">Time:</span> <span id="meta-time">-</span></div>
                         </div>
+                        <!-- Tag drawer box list (Grid: 7) -->
+                        <div class="sm:col-span-7 bg-black/60 rounded-xl p-4 border border-white/5 flex flex-col">
+                            <div class="text-nvidia-brand font-mono font-bold border-b border-white/5 pb-1 mb-2 uppercase tracking-widest text-[9px] flex justify-between shrink-0">
+                                <span>🎯 Detected Target Overlays</span>
+                                <span id="detection-count-badge" class="text-[8px] bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 px-1.5 py-0.5 rounded-full font-bold">0</span>
+                            </div>
+                            <div id="detection-tags-wrapper" class="flex-1 flex flex-wrap gap-1.5 max-h-[100px] overflow-y-auto pt-1 align-content-start text-[10px] text-slate-500">
+                                Run inference to populate target tags here.
+                            </div>
                         </div>
                     </div>
+                    <!-- Optional dynamic trace wrapper -->
+                    <div id="rich-trace-log" class="hidden border-t border-white/5 pt-3"></div>
                 </div>
+            </section>
+        </div>
     </main>
     <!-- Gradio client connection & app runtime logic -->
         function setMediaType(type) {
             selectedMediaType = type;
             if (type === "Image") {
+                mediaTypeImageBtn.className = "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";
+                mediaTypeVideoBtn.className = "py-1.5 rounded-lg font-semibold text-[10px] text-slate-400 hover:text-slate-200 transition-all";
                 videoFramesWrapper.classList.add("hidden");
                 videoFramesWrapper.classList.add("opacity-50");
                 videoFramesWrapper.classList.add("pointer-events-none");
                 fileInput.accept = "image/*";
                 workspaceStatus.textContent = activeFile ? "Image Loaded" : "No Media Loaded";
             } else {
+                mediaTypeVideoBtn.className = "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";
+                mediaTypeImageBtn.className = "py-1.5 rounded-lg font-semibold text-[10px] text-slate-400 hover:text-slate-200 transition-all";
                 videoFramesWrapper.classList.remove("hidden");
                 videoFramesWrapper.classList.remove("opacity-50");
                 videoFramesWrapper.classList.remove("pointer-events-none");
                     // Setup Media type
                     setMediaType(type);
+                    // Fetch asset file with robust absolute URL resolution (works in iframe)
                     const ext = type === "Image" ? "jpg" : "mp4";
+                    const resolvedAssetUrl = new URL(assetUrl, window.location.href).href;
+                    console.log("Fetching example from:", resolvedAssetUrl);
+                    const file = await loadExampleFromAsset(resolvedAssetUrl, `${name.toLowerCase()}.${ext}`);
                     if (file) {
                         handleFileImport(file);
                     }
                     detectionTagsWrapper.innerHTML = "";
                     detections.forEach(det => {
                         const tag = document.createElement("span");
+                        tag.className = "px-2 py-0.5 rounded bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 font-bold uppercase tracking-wider text-[8px] animate-fade-in";
                         tag.textContent = det.frame ? `[Frame ${det.frame}] ${det.label}` : det.label;
                         detectionTagsWrapper.appendChild(tag);
                     });