refactor: migrate Gradio demo to custom FastAPI server and add HTML interface

app.py

@@ -1,6 +1,3 @@
-'''
-    Gradio App Demo
-'''
 import os, sys, shutil
 import json
 import glob
@@ -14,6 +11,7 @@ import numpy as np
 import torch
 import tempfile
 import spaces
+from fastapi.responses import HTMLResponse
 
 # Temp file bug of gradio
 BASE_TMP_DIR = os.path.abspath("./gradio_tmp")
@@ -23,7 +21,9 @@ os.environ["TEMP"] = BASE_TMP_DIR
 os.environ["TMP"] = BASE_TMP_DIR
 os.environ["GRADIO_TEMP_DIR"] = BASE_TMP_DIR
 tempfile.tempdir = BASE_TMP_DIR
-import gradio as gr
+
+from gradio import Server
+from gradio.data_classes import FileData
 
 
 # Import your existing project code
@@ -69,11 +69,10 @@ model, model_args = load_model(checkpoint_path)
 
 
 
-######################## Gallery Prepare ########################
+######################## Utilities ########################
 
 def escape_html(x):
     x = "" if x is None else str(x)
-
     return (
             x.replace("&", "&")
              .replace("<", "&lt;")
@@ -83,15 +82,6 @@ def escape_html(x):
         )
 
 
-def prepare_gallery(page_paths: List[str]):
-    gallery_items = []
-
-    for page_idx, page_path in enumerate(page_paths):
-        gallery_items.append((page_path, f"Page {page_idx}"))
-
-    return gallery_items
-
-
 def prepare_result_table(
         pred_ranges: List[List[int]],
         pred_intra_labels: List[int],
@@ -156,212 +146,84 @@ def prepare_result_table(
     return html
 
 
-def list_sample_videos(asset_dir: str = "__assets__", max_samples: int = 8) -> List[List[str]]:
+def list_sample_videos(asset_dir: str = "__assets__", max_samples: int = 8) -> List[dict]:
     script_dir = os.path.dirname(os.path.abspath(__file__))
     asset_dir = os.path.join(script_dir, asset_dir)
 
     if not os.path.isdir(asset_dir):
         return []
 
-    mp4_paths = []
+    samples = []
     for name in sorted(os.listdir(asset_dir)):
         path = os.path.join(asset_dir, name)
         if os.path.isfile(path) and name.lower().endswith(".mp4"):
-            mp4_paths.append([path])
+            samples.append({"path": path, "name": name})
 
-    print("We have", len(mp4_paths), "number of videos!")
-    return mp4_paths[:max_samples]
+    return samples[:max_samples]
 
-sample_videos = list_sample_videos("__assets__/", max_samples = 16)
 
+# -------------------------
+# Server and API
+# -------------------------
 
+app = Server()
 
+@app.api()
+def get_examples() -> List[FileData]:
+    samples = list_sample_videos("__assets__/", max_samples=16)
+    return [FileData(path=s["path"], orig_name=s["name"]) for s in samples]
 
+@app.api()
 @spaces.GPU(duration=120)
-def run_demo(video_file):
-
-    if video_file is None:
-        raise gr.Error("Please upload a video first.")
-
-    video_path = video_file if isinstance(video_file, str) else video_file.name
+def run_inference(video_file: FileData) -> dict:
+    video_path = video_file.path
     if not os.path.exists(video_path):
-        raise gr.Error(f"Video file does not exist: {video_path}")
-
-    # Read the setting
-    num_context_frames = DEFAULT_NUM_CONTEXT_FRAMES
-    max_frames_per_img = DEFAULT_MAX_FRAMES_PER_IMG
-
+        return {"error": "Video file not found"}
 
-    print("Start processing the video", video_path)
+    print(f"Start processing: {video_path}")
     pred_ranges, pred_intra_labels, pred_inter_labels, video_np_full, fps = single_video_inference(
-                                                                                                    video_path = video_path,
-                                                                                                    model = model,
-                                                                                                    model_args = model_args,
-                                                                                                    num_context_frames = int(num_context_frames),
-                                                                                                )
-    print("Finish running the video")
+        video_path=video_path,
+        model=model,
+        model_args=model_args,
+        num_context_frames=DEFAULT_NUM_CONTEXT_FRAMES,
+    )
+    print("Inference finished")
     
-    # Prepare the folder
-    cur_VIS_DIR = VIS_DIR + "_" + str(time.time())
-    if os.path.exists(cur_VIS_DIR):
-        shutil.rmtree(cur_VIS_DIR)
-    os.makedirs(cur_VIS_DIR)
+    # Prepare visualization directory
+    cur_vis_dir = os.path.join(VIS_DIR, f"vis_{int(time.time())}")
+    os.makedirs(cur_vis_dir, exist_ok=True)
 
-    # Visualize and store (Must Do!)
+    # Generate visualization frames
     page_paths = visualize_concated_frames(
-                                            frames = video_np_full,
-                                            out_dir = cur_VIS_DIR,
-                                            highlight_ranges_closed = pred_ranges,
-                                            max_frames_per_img = int(max_frames_per_img),
-                                            end_range_exclusive = True,
-                                            fps = fps,
-                                            start_index = 0,
-                                        )
-
-    gallery_paths = page_paths[:MAX_GALLERY_PAGES]
-
-    result_table = prepare_result_table(
-                                        pred_ranges = pred_ranges,
-                                        pred_intra_labels = pred_intra_labels,
-                                        pred_inter_labels = pred_inter_labels,
-                                        fps = fps,
-                                    )
-
-    print("Visualization pages:", len(page_paths))
-    print("Shown visualization pages:", len(gallery_paths))
-    print("Predicted shots:", len(pred_ranges))
-
-    return gr.update(value = prepare_gallery(gallery_paths)), gr.update(value = result_table)
-
-
-def clear_demo_outputs():
-    return gr.update(value = []), gr.update(value = "")
-
-
-
-# -------------------------
-# UI Design
-# -------------------------
-custom_css = """
-#visual_gallery img {
-    object-fit: contain !important;
-}
-
-#visual_gallery .thumbnail-item {
-    object-fit: contain !important;
-}
-
-#visual_gallery .grid-wrap {
-    align-items: start !important;
-}
-
-.result-table-wrap {
-    width: 100%;
-    max-height: 360px;
-    overflow: auto;
-    border: 1px solid #e5e7eb;
-    border-radius: 10px;
-}
-
-.result-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 14px;
-}
-
-.result-table th {
-    position: sticky;
-    top: 0;
-    background: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 8px 10px;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.result-table td {
-    border-bottom: 1px solid #f1f5f9;
-    padding: 8px 10px;
-    white-space: nowrap;
-}
-
-.result-table tr:hover {
-    background: #f9fafb;
-}
-"""
-
-
-
-MARKDOWN = \
-    """
-    <div align="center">
-
-    # OmniShotCut: Holistic Relational Shot Boundary Detection with Shot-Query Transformer
-
-    <b>A sensitive and more informative SoTA shot boundary detection model.</b>
-
-    <br>
-
-    <a href="https://arxiv.org/abs/2604.24762">arXiv</a> ·
-    <a href="https://uva-computer-vision-lab.github.io/OmniShotCut_website/">Project Page</a> ·
-    <a href="https://github.com/UVA-Computer-Vision-Lab/OmniShotCut">Github</a> ·
-    <a href="https://huggingface.co/uva-cv-lab/OmniShotCut">Model</a> 
-
-    </div>
-
-    ---
-
-    Upload a video and click <b>Run Inference</b>.
-    """
-
-
-with gr.Blocks(title="OmniShotCut Demo", css = custom_css) as demo:
-
-    # Head title
-    gr.Markdown(MARKDOWN)
-
-    with gr.Row():
-        with gr.Column(scale=1):
-            video_input = gr.Video(label = "Input Video", height = 480)
-            run_button = gr.Button("Run Inference", variant="primary")
-
-        with gr.Column(scale=1):
-            gr.Markdown("## Visualization")
-            gallery = gr.Gallery(
-                                    label = None,
-                                    columns = 1,
-                                    height = 760,
-                                    preview = True,
-                                    elem_id = "visual_gallery",
-                                    object_fit = "contain",
-                                )
-
-    gr.Markdown("## Predicted Shot Results")
-    result_table = gr.HTML(
-                            value = "",
-                            elem_id = "result_table",
-                        )
-
-    
-    gr.Markdown("## Sample Videos")
-    gr.Examples(
-                    examples = sample_videos,
-                    inputs = [video_input],
-                    label = "Choose a sample video",
-                )
-
-
-    run_button.click(
-                        fn = clear_demo_outputs,
-                        inputs = [],
-                        outputs = [gallery, result_table],
-                    ).then(
-                        fn = run_demo,
-                        inputs  =[video_input],
-                        outputs = [gallery, result_table],
-                    )
-
-
+        frames=video_np_full,
+        out_dir=cur_vis_dir,
+        highlight_ranges_closed=pred_ranges,
+        max_frames_per_img=DEFAULT_MAX_FRAMES_PER_IMG,
+        end_range_exclusive=True,
+        fps=fps,
+        start_index=0,
+    )
+
+    gallery_files = [FileData(path=p) for p in page_paths[:MAX_GALLERY_PAGES]]
+    result_table_html = prepare_result_table(
+        pred_ranges=pred_ranges,
+        pred_intra_labels=pred_intra_labels,
+        pred_inter_labels=pred_inter_labels,
+        fps=fps,
+    )
+
+    return {
+        "gallery": gallery_files,
+        "table": result_table_html,
+        "shot_count": len(pred_ranges)
+    }
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
 
 if __name__ == "__main__":
-    demo.launch(share=True)
+    app.launch(show_error=True)
+ue)

index.html

@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmniShotCut | AI Shot Boundary Detection</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #8b5cf6;
+            --primary-hover: #7c3aed;
+            --bg: #09090b;
+            --card-bg: #18181b;
+            --border: #27272a;
+            --text: #fafafa;
+            --text-muted: #a1a1aa;
+            --accent: #d4d4d8;
+            --glass: rgba(24, 24, 27, 0.8);
+            --glass-border: rgba(255, 255, 255, 0.1);
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            line-height: 1.5;
+            -webkit-font-smoothing: antialiased;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem 0;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 3rem;
+            position: sticky;
+            top: 0;
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            z-index: 100;
+            width: 100%;
+        }
+
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 2rem;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.025em;
+            background: linear-gradient(to right, #a78bfa, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .nav-links a {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.875rem;
+            margin-left: 1.5rem;
+            transition: color 0.2s;
+        }
+
+        .nav-links a:hover {
+            color: var(--text);
+        }
+
+        .hero {
+            text-align: center;
+            margin-bottom: 4rem;
+            animation: fadeIn 0.8s ease-out;
+        }
+
+        .hero h1 {
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 1rem;
+            letter-spacing: -0.05em;
+        }
+
+        .hero p {
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            max-width: 700px;
+            margin: 0 auto;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 4rem;
+        }
+
+        @media (max-width: 1024px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .card {
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 1rem;
+            padding: 1.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .card:hover {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        .upload-area {
+            border: 2px dashed var(--border);
+            border-radius: 0.75rem;
+            padding: 3rem;
+            text-align: center;
+            cursor: pointer;
+            transition: border-color 0.2s, background 0.2s;
+            position: relative;
+        }
+
+        .upload-area:hover, .upload-area.dragging {
+            border-color: var(--primary);
+            background: rgba(139, 92, 246, 0.05);
+        }
+
+        .upload-icon {
+            width: 48px;
+            height: 48px;
+            margin-bottom: 1rem;
+            color: var(--text-muted);
+        }
+
+        .upload-area p {
+            margin-bottom: 0.5rem;
+        }
+
+        .upload-area span {
+            font-size: 0.875rem;
+            color: var(--text-muted);
+        }
+
+        #video-input {
+            display: none;
+        }
+
+        .preview-video {
+            width: 100%;
+            border-radius: 0.5rem;
+            margin-top: 1rem;
+            display: none;
+            background: #000;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: none;
+            width: 100%;
+            margin-top: 1rem;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .results-section {
+            display: none;
+            animation: fadeIn 0.5s ease-out;
+        }
+
+        .section-title {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .gallery-item {
+            position: relative;
+            aspect-ratio: 16/9;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        .gallery-item:hover {
+            transform: scale(1.02);
+            border-color: var(--primary);
+        }
+
+        .gallery-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .table-container {
+            width: 100%;
+            overflow-x: auto;
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            background: var(--card-bg);
+        }
+
+        /* Result table styling override */
+        .result-table-wrap {
+            width: 100%;
+            max-height: 500px;
+            overflow: auto;
+        }
+
+        .result-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+            color: var(--text);
+        }
+
+        .result-table th {
+            position: sticky;
+            top: 0;
+            background: #27272a;
+            border-bottom: 1px solid var(--border);
+            padding: 12px 16px;
+            text-align: left;
+            font-weight: 600;
+            color: var(--text-muted);
+        }
+
+        .result-table td {
+            border-bottom: 1px solid var(--border);
+            padding: 12px 16px;
+        }
+
+        .result-table tr:hover {
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(4px);
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            border-left-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 1rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .examples-section {
+            margin-top: 4rem;
+            padding-top: 2rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .examples-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        .example-item {
+            cursor: pointer;
+            border-radius: 0.75rem;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            transition: all 0.2s;
+            position: relative;
+        }
+
+        .example-item:hover {
+            border-color: var(--primary);
+            transform: translateY(-4px);
+        }
+
+        .example-item video {
+            width: 100%;
+            display: block;
+        }
+
+        .example-label {
+            padding: 0.75rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            text-align: center;
+            background: var(--card-bg);
+        }
+
+        footer {
+            margin-top: 8rem;
+            padding: 4rem 0;
+            border-top: 1px solid var(--border);
+            text-align: center;
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+
+        /* Modal for full size visualization */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.95);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .modal-content {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+
+        .close-modal {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <div class="header-content">
+            <div class="logo">OmniShotCut</div>
+            <nav class="nav-links">
+                <a href="https://arxiv.org/abs/2604.24762" target="_blank">arXiv</a>
+                <a href="https://uva-computer-vision-lab.github.io/OmniShotCut_website/" target="_blank">Project</a>
+                <a href="https://github.com/UVA-Computer-Vision-Lab/OmniShotCut" target="_blank">GitHub</a>
+            </nav>
+        </div>
+    </header>
+
+    <div class="container">
+        <section class="hero">
+            <h1>Relational Shot Detection</h1>
+            <p>State-of-the-art shot boundary detection using Shot-Query Transformer. Analyze videos with holistic temporal understanding.</p>
+        </section>
+
+        <div class="main-grid">
+            <div class="card">
+                <div class="section-title">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                    Upload Video
+                </div>
+                <div class="upload-area" id="drop-zone">
+                    <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
+                    <p>Drag & drop or click to upload</p>
+                    <span>Supports MP4, AVI, MOV</span>
+                    <input type="file" id="video-input" accept="video/*">
+                </div>
+                <video id="preview-video" class="preview-video" controls></video>
+                <button id="run-btn" class="btn btn-primary" disabled>Run Inference</button>
+            </div>
+
+            <div class="card">
+                <div class="section-title">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                    How it works
+                </div>
+                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">
+                    OmniShotCut uses a Transformer-based architecture to detect shot boundaries by considering the relationships between all frames in a segment, rather than just local changes.
+                </p>
+                <ul style="color: var(--text-muted); font-size: 0.9rem; margin-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;">
+                    <li>High sensitivity to subtle transitions</li>
+                    <li>Holistic relational modeling</li>
+                    <li>Support for complex intra/inter label classification</li>
+                    <li>Efficient ZeroGPU inference</li>
+                </ul>
+            </div>
+        </div>
+
+        <section id="results" class="results-section">
+            <div class="section-title">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+                Inference Results <span id="shot-badge" style="background: var(--primary); padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; margin-left: 0.5rem;">0 Shots</span>
+            </div>
+            
+            <h3 style="margin-bottom: 1rem; font-size: 1rem; color: var(--text-muted);">Visualization</h3>
+            <div class="gallery-grid" id="gallery">
+                <!-- Gallery items will be injected here -->
+            </div>
+
+            <h3 style="margin-bottom: 1rem; font-size: 1rem; color: var(--text-muted);">Detailed Shot List</h3>
+            <div id="table-container" class="table-container">
+                <!-- Table will be injected here -->
+            </div>
+        </section>
+
+        <section class="examples-section">
+            <div class="section-title">Try Examples</div>
+            <div class="examples-grid" id="examples-grid">
+                <!-- Examples will be injected here -->
+            </div>
+        </section>
+
+        <footer>
+            <p>&copy; 2026 OmniShotCut. Built with Gradio Server & FastAPI.</p>
+        </footer>
+    </div>
+
+    <div class="loading-overlay" id="loader">
+        <div class="spinner"></div>
+        <p id="loading-text">Processing video...</p>
+    </div>
+
+    <div class="modal" id="modal">
+        <span class="close-modal">&times;</span>
+        <img class="modal-content" id="modal-img">
+    </div>
+
+    <script type="module">
+        import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+        const dropZone = document.getElementById('drop-zone');
+        const videoInput = document.getElementById('video-input');
+        const previewVideo = document.getElementById('preview-video');
+        const runBtn = document.getElementById('run-btn');
+        const loader = document.getElementById('loader');
+        const resultsSection = document.getElementById('results');
+        const gallery = document.getElementById('gallery');
+        const tableContainer = document.getElementById('table-container');
+        const shotBadge = document.getElementById('shot-badge');
+        const modal = document.getElementById('modal');
+        const modalImg = document.getElementById('modal-img');
+        const examplesGrid = document.getElementById('examples-grid');
+
+        let selectedFile = null;
+        let client = null;
+
+        // Initialize Gradio Client
+        async function initClient() {
+            client = await Client.connect(window.location.origin);
+            console.log("Gradio Client Connected");
+        }
+        initClient();
+
+        // Handle File Selection
+        dropZone.onclick = () => videoInput.click();
+
+        videoInput.onchange = (e) => {
+            const file = e.target.files[0];
+            if (file) handleFile(file);
+        };
+
+        dropZone.ondragover = (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragging');
+        };
+
+        dropZone.ondragleave = () => {
+            dropZone.classList.remove('dragging');
+        };
+
+        dropZone.ondrop = (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('dragging');
+            const file = e.dataTransfer.files[0];
+            if (file) handleFile(file);
+        };
+
+        function handleFile(file) {
+            selectedFile = file;
+            const url = URL.createObjectURL(file);
+            previewVideo.src = url;
+            previewVideo.style.display = 'block';
+            dropZone.style.display = 'none';
+            runBtn.disabled = false;
+        }
+
+        // Run Inference
+        runBtn.onclick = async () => {
+            if (!selectedFile || !client) return;
+
+            loader.style.display = 'flex';
+            resultsSection.style.display = 'none';
+
+            try {
+                const result = await client.predict("/run_inference", { 
+                    video_file: handle_file(selectedFile) 
+                });
+                
+                const data = result.data[0];
+                renderResults(data);
+            } catch (error) {
+                console.error("Inference failed:", error);
+                alert("Inference failed. Check console for details.");
+            } finally {
+                loader.style.display = 'none';
+            }
+        };
+
+        function renderResults(data) {
+            resultsSection.style.display = 'block';
+            shotBadge.innerText = `${data.shot_count} Shots`;
+
+            // Render Gallery
+            gallery.innerHTML = '';
+            data.gallery.forEach(file => {
+                const item = document.createElement('div');
+                item.className = 'gallery-item';
+                const img = document.createElement('img');
+                img.src = file.url;
+                item.appendChild(img);
+                item.onclick = () => {
+                    modalImg.src = file.url;
+                    modal.style.display = 'flex';
+                };
+                gallery.appendChild(item);
+            });
+
+            // Render Table
+            tableContainer.innerHTML = data.table;
+            
+            // Scroll to results
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // Modal close
+        document.querySelector('.close-modal').onclick = () => {
+            modal.style.display = 'none';
+        };
+
+        // Fetch examples from backend
+        async function loadExamples() {
+            try {
+                // We'll expose an API for examples too
+                const result = await client.predict("/get_examples", {});
+                const examples = result.data[0];
+                
+                examplesGrid.innerHTML = '';
+                examples.forEach(ex => {
+                    const item = document.createElement('div');
+                    item.className = 'example-item';
+                    
+                    const video = document.createElement('video');
+                    video.src = ex.url;
+                    video.muted = true;
+                    video.onmouseover = () => video.play();
+                    video.onmouseout = () => { video.pause(); video.currentTime = 0; };
+                    
+                    const label = document.createElement('div');
+                    label.className = 'example-label';
+                    label.innerText = ex.orig_name || 'Example';
+                    
+                    item.appendChild(video);
+                    item.appendChild(label);
+                    
+                    item.onclick = async () => {
+                        const response = await fetch(ex.url);
+                        const blob = await response.blob();
+                        const file = new File([blob], ex.orig_name || 'example.mp4', { type: 'video/mp4' });
+                        handleFile(file);
+                        window.scrollTo({ top: dropZone.offsetTop - 100, behavior: 'smooth' });
+                    };
+                    
+                    examplesGrid.appendChild(item);
+                });
+            } catch (e) {
+                console.log("No examples found or API missing");
+            }
+        }
+        
+        // Wait a bit for client to connect then load examples
+        setTimeout(loadExamples, 1000);
+
+    </script>
+</body>
+</html>