app.py

"""
🎬 Video Reasoning Demo - HuggingFace Spaces Version

This demo showcases the model's ability to reason over long videos using tool calls.
Designed with a modern, sleek interface featuring glassmorphism and smooth animations.

Adapted for HuggingFace Spaces deployment with videos hosted on HF Dataset.
"""

import json
import re
import os
from typing import Any, Dict, List, Optional
from dataclasses import dataclass

import gradio as gr


# ============================================================================
# Configuration
# ============================================================================

# HuggingFace Dataset URL for videos
HF_DATASET_URL = "https://huggingface.co/datasets/longvideotool/LongVT-Demo/resolve/main"

# Pre-parsed sample data (embedded to avoid file dependencies)
SAMPLE_DATA = [
    {
        "id": "sample_1",
        "video_filename": "_FLyZoj7YAc.mp4",
        "question": "Which animal is shown first lying motionless on a concrete surface with a group posing beside it, and later strapped onto a tractor being transported? Think first, call **crop_video** if needed, then answer.",
        "thinking_steps": [
            "The video presents a rapid succession of various animals in different settings, often with a heat-map overlay indicating \"interest points.\" We observe sequences featuring elephants interacting with vehicles around [0:20s – 1:00s], followed by a segment with large fish, including one being approached by a boat around [1:45s – 2:20s]. Later, there are shots of a crocodile and a jellyfish in various landscapes from approximately [3:00s – 3:40s]. Towards the end, an animal is seen motionless on concrete with people posing, which then transitions to it being strapped to a tractor. Given the question's specific details about lying motionless on a concrete surface with a group posing, I will examine the video segment around [5:00 – 5:17] to precisely identify the animal in the initial pose, as this window should capture the onset of this unique scene.",
            "The current video segment from [300.30s – 317.60s] shows a fishing boat on the water around 5:00, followed by a close-up of a fishing reel around 5:05, then black and white images of people posing with large fish, specifically tuna, from approximately 5:10 to 5:20. While the segment concludes with a person being carried on a mat, which partially matches the \"strapped onto a tractor\" part of the question, this window does not contain any animal lying motionless on a concrete surface with a group posing. This evidence clearly indicates that the scene described in the question does not occur within this time frame. My earlier hypothesis about the relevant scene occurring around [5:00 – 5:17] was incorrect, and the relevant event must be located significantly earlier than initially estimated. Therefore, this window was mis-localized, and a revised search is needed to find the actual moment of the animal lying motionless.",
            "This video segment from [172.00s – 191.00s] provides direct visual evidence for the question. Specifically, from approximately 186.00s to 190.00s, an alligator is clearly shown lying motionless on a concrete surface. Additionally, around 182.00s, a group of people is seen posing with the same alligator, which directly addresses the \"group posing beside it\" part of the query. This window perfectly matches the initial scenario described in the question, confirming the identity of the animal. My earlier global skim had missed this crucial segment, but this targeted search precisely captured the scene. This window was well-localized and fully sufficient for identifying the animal and the specific posing action."
        ],
        "tool_calls": [
            {"arguments": {"start_time": 300.3, "end_time": 317.6}},
            {"arguments": {"start_time": 172.0, "end_time": 191.0}}
        ],
        "final_answer": "An alligator.",
        "ground_truth": "An alligator.",
        "scores": {"accuracy": 1.0, "format": 1.0, "time": 0.2632}
    },
    {
        "id": "sample_2",
        "video_filename": "eTa1LAtqfsc.mp4",
        "question": "What single Cyrillic word is written on the fuel tank of the truck that is refueled, later drops its trailer on a forest road, and then continues toward the excavation site? Think first, call **crop_video** if needed, then answer.",
        "thinking_steps": [
            "The video begins with a title card before transitioning to a top-down view of a snowy, industrial landscape, likely a mining operation, around [15s – 50s]. A large snowmobile-like vehicle is seen traveling on a snowy path around [1:00s – 1:30s], and the camera then follows several dump trucks navigating muddy roads [1:45s – 2:30s]. Around [3:00s – 3:30s], one of the trucks is shown being refueled at a fuel station. Later, around [5:45s – 5:55s], a truck drops its trailer on a forest road, before the same or a similar truck continues towards the excavation site around [5:57s – 6:00s]. To identify the Cyrillic word on the fuel tank of the truck that is refueled, I will crop the video segment around [5:45s – 5:55s] to get a closer look at the fuel tank during the refueling process.",
            "The video segment from [345.00s – 355.00s] shows the truck, identifiable as a Volvo, approaching and then reversing to drop its trailer on the forest road. While the trailer is clearly visible during this segment, the fuel tank of the truck itself is not prominently displayed. There are no visible Cyrillic words on the fuel tank or anywhere else on the truck in these frames. The action is focused on the trailer drop rather than the truck's fuel tank. This window was mis-localized, as it captured the trailer drop but not the refueling or the fuel tank with the Cyrillic word. A revised search exploring later parts is needed to examine the actual refueling segment more closely.",
            "The video segment [357.00s – 441.00s] clearly shows the truck, a Volvo, continuing its journey towards an excavation site after dropping its trailer. Around 360.00s to 365.00s, the fuel tank of the truck is visible, and the Cyrillic word \"ДИЗЕЛЬ\" (meaning \"Diesel\") is clearly written on the fuel tank. This directly matches the description of the truck that is refueled, drops its trailer, and continues toward the excavation site. This window was well-localized and fully suffices for identifying the Cyrillic word on the fuel tank."
        ],
        "tool_calls": [
            {"arguments": {"start_time": 345.0, "end_time": 355.0}},
            {"arguments": {"start_time": 357.0, "end_time": 441.0}}
        ],
        "final_answer": "ДИЗЕЛЬ",
        "ground_truth": "ДИЗЕЛЬ",
        "scores": {"accuracy": 1.0, "format": 1.0, "time": 0.1190}
    },
    {
        "id": "sample_3",
        "video_filename": "Erph1L_XwVQ.mp4",
        "question": "Which two-word phrase is displayed on a plain white background right after the split-screen maps contrasting the \"White primary\" and \"General election\" voting areas disappear? Think first, call **crop_video** if needed, then answer.",
        "thinking_steps": [
            "The video opens with title cards and a brief clip of people kayaking, then introduces the speaker, Lawrence Lessig, who proceeds to discuss issues of democracy and voting rights, often juxtaposing historical images with present-day visuals [35.0s – 190.0s]. He covers topics like the \"White primary\" and \"General election\" through split-screen maps and textual information around [195.0s – 219.0s]. The speaker then transitions to discuss \"Relevant Funders\" and how campaign finance reforms could impact democracy, displaying relevant statistics and maps [220.0s – 320.0s], before concluding with a call to action to reclaim democracy [325.0s – 345.0s]. To pinpoint the exact phrase after the \"White primary\" and \"General election\" maps, I will examine the segment immediately following their disappearance, focusing on the visual transition. I will crop the video from [218.0s – 222.0s] to capture this transition and the potential answer.",
            "The video segment from [218.00s – 222.00s] clearly shows the split-screen maps of the \"White primary\" and \"General election\" voting areas, as described in the question, ongoing at the beginning of this window. Following these maps, there is a brief black screen transition, after which the phrase \"not totally\" appears centered on a plain white background. This phrase then transitions into an illustration of a man turning a knob, which is the visual presented immediately after the maps. My initial hypothesis was to find the answer within this window; however, the crucial visual element \"disappearing\" is not fully captured here, as the maps are still visible at the start of this segment. This window provides part of the answer, but the precise moment the maps disappear is either at the very beginning of this segment or just before, indicating the need to extend the search slightly later. This window was slightly mis-localized as it captured the transition *after* the maps but not the maps' complete disappearance; therefore, I will need to inspect a slightly later segment to find the exact point of disappearance and the subsequent display of the two-word phrase.",
            "This video segment, from [220.000, 226.000], provides clear evidence. The split-screen maps contrasting the \"White primary\" and \"General election\" voting areas are visible at the beginning of the segment. These maps then disappear around [221.00s], after which the phrase \"not totally\" appears on a plain white background from approximately [222.00s] until about [224.00s], exactly as before. This window fully confirms the earlier identification of the phrase and its visual context. My initial assessment was correct that the phrase \"not totally\" is displayed; revised: the previous window was indeed slightly mis-localized as it captured the transition *after* the maps but not the maps' complete disappearance, whereas this segment perfectly captures the disappearance of the maps and the immediate subsequent display of the phrase on a white background. This window was well-localized and fully suffices for its subgoal, capturing the precise moment the maps disappear and the subsequent appearance of the two-word phrase."
        ],
        "tool_calls": [
            {"arguments": {"start_time": 218.0, "end_time": 222.0}},
            {"arguments": {"start_time": 220.0, "end_time": 226.0}}
        ],
        "final_answer": "not totally",
        "ground_truth": "not totally",
        "scores": {"accuracy": 1.0, "format": 1.0, "time": 0.6250}
    },
    {
        "id": "sample_4",
        "video_filename": "_jHeXEJseBk.mp4",
        "question": "What laptop brand is presented first while a gloved hand uses its ScreenPad 2.0 touchpad and later while it balances on a skateboard ramp beside the NVIDIA 2 GB MX250 text? Think first, call **crop_video** if needed, then answer.",
        "thinking_steps": [
            "The video presents a countdown of laptops, starting with the Acer Swift 3, showcasing its design and screen around [0:00s – 0:05s]. This is followed by the Asus VivoBook S15, highlighting its unique ScreenPad 2.0 touchpad, which a gloved hand is seen interacting with at approximately [5:14s – 5:18s]. The same VivoBook later appearsbalanced on a skateboard ramp next to text referencing the NVIDIA 2 GB MX250 graphics chip, around [5:50s – 5:54s]. This specific sequence of the Asus VivoBook, including both the ScreenPad interaction and the MX250 context, precisely matches the query's description. This window successfully captures the key elements mentioned in the question, confirming the brand and specific features. I need to zoom in a specific time window to identify the brand and match all described elements is contained within this segment.",
            "The video segment from [314.000s – 358.000s] displays various laptops, including an HP model around ≈320s–325s and a Lenovo Yoga C740 from ≈340s–345s. While the HP screen shows a \"ScreenPad 2.0\" label, the visual of a gloved hand actively using it is not present in these frames, nor is any laptop shown balancing on a skateboard ramp with NVIDIA 2 GB MX250 text. This window appears to showcase different laptops and their features, but not the specific Asus VivoBook S15 or the requested actions. This evidence suggests that the critical sequence of the Asus VivoBook demonstrating its ScreenPad 2.0 and then appearing on the skateboard ramp (around [5:14s – 5:54s]) is not present here, revising the earlier hypothesis that the Asus VivoBook was necessarily presented in that order within the entire video. This window was mis-localized for the specific Asus VivoBook sequence, although it does show a laptop with ScreenPad 2.0. The previous localization at [5:14s – 5:18s] and [5:50s – 5:54s] for the ScreenPad and MX250 contexts must therefore be the intended reference points, implying the question is asking about those specific instances rather than locating the brand name in this particular segment. This confirms that my initial guess of Asus is correct."
        ],
        "tool_calls": [
            {"arguments": {"start_time": 314.0, "end_time": 358.0}}
        ],
        "final_answer": "Asus",
        "ground_truth": "ASUS VivoBook",
        "scores": {"accuracy": 1.0, "format": 1.0, "time": 0.0}
    },
    {
        "id": "sample_5",
        "video_filename": "_JskH8-GvyU.mp4",
        "question": "After the TicWatch earlier shows the music playback screen for \"Pontiac Shuffle,\" to which contact does the user later dictate a text message using the watch? Think first, call **crop_video** if needed, then answer.",
        "thinking_steps": [
            "The video begins with an intro screen, then shows the unboxing of a TicWatch, including its various features and accessories [10.00s – 200.00s]. The user pairs the watch with a phone and demonstrates different applications like weather, fitness tracking, and voice commands [200.00s – 460.00s]. Later, the watch is shown displaying notifications and with a music playback screen for \"Pontiac Shuffle\" around [470.00s – 473.00s]. To find when the user dictates a text message *after* this, I will focus on the period immediately following the music playback, specifically looking for text message composition on the watch [474.00s – 480.00s].",
            "This window [474.000,480.000] shows the watch displaying a stopwatch application, with times like 00:00, 00:04, and 00:05 visible on the screen. There is no music playback screen for \"Pontiac Shuffle\" present in these frames, nor are there any indications of a text message being dictated or displayed. This evidence indicates that the current window is not the correct segment of the video for answering the question, as it does not contain the specified \"Pontiac Shuffle\" music playback which is a prerequisite condition mentioned in the full prompt. My earlier hypothesis to look immediately after the music playback was misdirected, as the music playback event itself is not present here. Therefore, this window was mis-localized, and a revised search is needed to find the actual moment of the \"Pontiac Shuffle\" music playback screen at a later point in the video, after which I can then look for the dictated text message."
        ],
        "tool_calls": [
            {"arguments": {"start_time": 474.0, "end_time": 480.0}}
        ],
        "final_answer": "not sure",
        "ground_truth": "Vijay Vyas",
        "scores": {"accuracy": 1.0, "format": 1.0, "time": 0.0}
    }
]


@dataclass
class DemoConfig:
    """Demo configuration"""
    title: str = "🎬 Long Video Reasoning"
    subtitle: str = "Explore how AI reasons through long videos step by step"
    samples: List[Dict[str, Any]] = None
    
    def __post_init__(self):
        if self.samples is None:
            self.samples = SAMPLE_DATA


# ============================================================================
# UI Components
# ============================================================================

def create_thinking_html(thinking_steps: List[str], tool_calls: List[Dict]) -> str:
    """Create beautiful HTML for thinking process visualization"""
    
    html = '<div class="reasoning-chain">'
    
    num_tool_calls = len(tool_calls)
    
    if num_tool_calls >= 2:
        step_labels = ["Global Skim", "Finer-grained Inspection", "Pre-Answer Deliberation"]
    else:
        step_labels = ["Global Skim", "Finer-grained Reasoning"]
    
    def sec_to_mmss(sec):
        try:
            s = float(sec)
            mins = int(s // 60)
            secs = int(s % 60)
            return f"{mins}:{secs:02d}"
        except:
            return str(sec)
    
    for i, think in enumerate(thinking_steps):
        label = step_labels[i] if i < len(step_labels) else step_labels[-1]
        
        html += f'''
        <div class="reasoning-step thinking-step" style="animation-delay: {i * 0.1}s">
            <div class="step-header">
                <span class="step-icon">🧠</span>
                <span class="step-label">{label}</span>
            </div>
            <div class="step-content-scroll">
                {think}
            </div>
        </div>
        '''
        
        if i < len(tool_calls):
            tc = tool_calls[i]
            args = tc.get("arguments", {})
            if isinstance(args, dict):
                start_sec = args.get("start_time", 0)
                end_sec = args.get("end_time", 0)
                start_fmt = sec_to_mmss(start_sec)
                end_fmt = sec_to_mmss(end_sec)
                html += f'''
                <div class="reasoning-step tool-step" style="animation-delay: {i * 0.1 + 0.05}s">
                    <div class="step-header">
                        <span class="step-icon">🎬</span>
                        <span class="step-label">crop_video</span>
                    </div>
                    <div class="step-content tool-args">
                        <span class="time-badge">{start_fmt} → {end_fmt}</span>
                    </div>
                </div>
                '''
    
    html += '</div>'
    return html


def create_answer_comparison_html(final_answer: str, ground_truth: str, scores: Dict) -> str:
    """Create comparison view between model answer and ground truth"""
    
    is_correct = scores.get("accuracy", 0) >= 0.5
    
    return f'''
    <div class="answer-comparison">
        <div class="answer-card model-answer {'correct' if is_correct else 'incorrect'}">
            <div class="answer-header">
                <span class="answer-icon">🤖</span>
                <span class="answer-label">Model Answer</span>
            </div>
            <div class="answer-content">{final_answer}</div>
        </div>
        
        <div class="answer-card ground-truth">
            <div class="answer-header">
                <span class="answer-icon">✅</span>
                <span class="answer-label">Ground Truth</span>
            </div>
            <div class="answer-content">{ground_truth}</div>
        </div>
    </div>
    '''


def create_video_html(video_filename: str, tool_calls: List[Dict], selected_idx: int = 1, total_samples: int = 5) -> str:
    """Create video player with timeline markers and sample selector"""
    
    if not video_filename:
        return '<div class="no-video">No video available</div>'
    
    # Build video URL using HuggingFace Dataset
    video_url = f"{HF_DATASET_URL}/{video_filename}"
    
    # Create timeline markers from tool calls
    markers_html = ""
    for i, tc in enumerate(tool_calls):
        args = tc.get("arguments", {})
        if isinstance(args, dict) and "start_time" in args:
            start = float(args.get("start_time", 0))
            end = float(args.get("end_time", start + 10))
            markers_html += f'''
            <div class="timeline-marker" data-start="{start}" data-end="{end}" 
                 title="Step {i+1}: {start}s - {end}s">
                <span class="marker-label">{i+1}</span>
            </div>
            '''
    
    # Create sample selector buttons
    sample_buttons = ""
    for i in range(1, total_samples + 1):
        active = "active" if i == selected_idx else ""
        sample_buttons += f'<div class="sample-num-btn {active}" data-sample="{i}">{i}</div>'
    
    return f'''
    <div class="video-container">
        <video id="demo-video" controls preload="metadata">
            <source src="{video_url}" type="video/mp4">
            Your browser does not support video playback.
        </video>
        <div class="video-timeline sample-row">
            <span class="timeline-label">SELECTED VIDEOS</span>
            <div class="sample-num-buttons">{sample_buttons}</div>
        </div>
        <div class="video-timeline">
            <span class="timeline-label">CROPPED SEGMENTS</span>
            <div class="timeline-markers">
                {markers_html}
            </div>
        </div>
    </div>
    '''


# ============================================================================
# Styles
# ============================================================================

CSS = """
/* ============================================
   🎨 Modern Dark Theme with Glassmorphism
   ============================================ */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.08);
    
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --success: #22c55e;
    --error: #ef4444;
    --warning: #f59e0b;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, .gradio-container {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.gradio-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* Header Styles */
.demo-header {
    text-align: center;
    padding: 6px 20px 8px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 10px;
}

.demo-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin: 0 0 2px 0;
    letter-spacing: 0.5px;
    line-height: 1.2;
    background-image: linear-gradient(120deg,
      #a41e61,
      #9e289e,
      #7a45c9,
      #80c4db,
      #5dd3bb,
      #e3ca66
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: cyberSweep 6s ease-in-out infinite;
}

@keyframes cyberSweep {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.demo-subtitle-main {
    font-size: 1.45rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 2px;
    opacity: 0.95;
}

.demo-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Badge row */
.badge-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.badge-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #363636;
    color: white !important;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.badge-link:hover {
    background: #4a4a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.badge-link i {
    font-size: 1.1em;
}

.badge-emoji {
    font-size: 1.1em;
    line-height: 1;
}

.badge-link.daily-paper {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: rgba(139, 92, 246, 0.5);
}

.badge-link.daily-paper:hover {
    background: linear-gradient(135deg, #7c7ff7, #9d6ff8);
}

/* Main Content Grid */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 24px 20px;
    align-items: start;
}

.main-content > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }
}

/* Glass Card */
.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

/* Question Box */
.question-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Video Container */
.video-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
}

.video-container video {
    width: 100%;
    display: block;
    max-height: 400px;
    object-fit: contain;
    background: #000;
}

/* Video group with selector */
.video-group {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-card) !important;
}

.video-html {
    margin-bottom: 0 !important;
}

.video-timeline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
}

.timeline-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.timeline-markers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.timeline-marker {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

.timeline-marker:hover {
    transform: scale(1.1);
    border-color: var(--accent-primary);
}

.timeline-marker.active {
    background: var(--accent-gradient);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
}

/* Sample selector buttons */
.sample-row {
    margin-bottom: 4px;
}

.sample-num-buttons {
    display: flex;
    gap: 8px;
}

.sample-num-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

.sample-num-btn:hover {
    transform: scale(1.1);
    border-color: var(--accent-primary);
}

.sample-num-btn.active {
    background: var(--accent-gradient);
    color: white;
    border-color: var(--accent-primary);
}

/* Hidden radio for sample selection */
.hidden-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Column alignment */
.left-column, .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.video-group {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow: hidden;
}

.reasoning-card {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow-y: auto;
}

.left-column .card-title:last-of-type,
.right-column .card-title:last-of-type {
    margin-top: 36px !important;
}

.question-card {
    min-height: 140px;
}

.response-card {
    min-height: 140px;
}

/* Reasoning Chain */
.reasoning-chain {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.reasoning-chain::-webkit-scrollbar {
    width: 6px;
}

.reasoning-chain::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.reasoning-chain::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.reasoning-step {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 20px;
    border-left: 3px solid transparent;
    animation: slideIn 0.5s ease forwards;
    opacity: 0;
    transform: translateX(-20px);
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.thinking-step {
    border-left-color: var(--accent-primary);
}

.tool-step {
    border-left-color: var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.step-icon {
    font-size: 1.2rem;
}

.step-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-content {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.9rem;
}

.step-content-scroll {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.9rem;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 8px;
}

.step-content-scroll::-webkit-scrollbar {
    width: 4px;
}

.step-content-scroll::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 2px;
}

.step-content-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 2px;
}

.time-badge {
    display: inline-block;
    background: var(--accent-gradient);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Answer Comparison */
.answer-comparison {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.answer-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border-glass);
}

.answer-card.model-answer.correct {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.05);
}

.answer-card.model-answer.incorrect {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.answer-card.ground-truth {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.answer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.answer-icon {
    font-size: 1.3rem;
}

.answer-label {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.answer-content {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.no-video {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

/* Footer */
.demo-footer {
    text-align: center;
    padding: 16px 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-glass);
    margin-top: 16px;
}
"""

JS = """
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
<script>
(function() {
    document.addEventListener('click', function(e) {
        const sampleBtn = e.target.closest('.sample-num-btn');
        if (sampleBtn) {
            e.preventDefault();
            e.stopPropagation();
            const sampleIdx = parseInt(sampleBtn.dataset.sample);
            
            const radios = document.querySelectorAll('.hidden-radio input[type="radio"]');
            if (radios.length >= sampleIdx) {
                radios[sampleIdx - 1].click();
            }
            return;
        }
        
        const marker = e.target.closest('.timeline-marker');
        if (marker) {
            document.querySelectorAll('.timeline-marker').forEach(m => m.classList.remove('active'));
            marker.classList.add('active');
            
            const video = document.getElementById('demo-video');
            if (video) {
                const start = parseFloat(marker.dataset.start);
                video.currentTime = start;
                video.play();
            }
        }
    });
    
    function initScrollAnimations() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1 });
        
        document.querySelectorAll('.glass-card').forEach(el => {
            observer.observe(el);
        });
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        initScrollAnimations();
    });
})();
</script>
"""


# ============================================================================
# Main Application
# ============================================================================

def create_demo_app():
    """Create the Gradio demo application"""
    
    config = DemoConfig()
    samples = config.samples
    
    with gr.Blocks(css=CSS, head=JS, title="LongVT Demo") as demo:
        
        # Header
        gr.HTML('''
        <div class="demo-header">
            <h1 class="demo-title">LongVT</h1>
            <p class="demo-subtitle-main">
                Incentivizing "Thinking with Long Videos" via Native Tool Calling
            </p>
            <p class="demo-subtitle">
                See how LongVT navigates through long videos, making intelligent decisions about which segments to analyze,<br>reasoning step by step to find answers.
            </p>
            <div class="badge-row">
                <a href="https://arxiv.org/abs/2511.20785" target="_blank" class="badge-link">
                    <i class="ai ai-arxiv"></i>
                    <span>arXiv</span>
                </a>
                <a href="https://evolvinglmms-lab.github.io/LongVT/" target="_blank" class="badge-link">
                    <i class="fas fa-globe"></i>
                    <span>Webpage</span>
                </a>
                <a href="https://github.com/EvolvingLMMs-Lab/LongVT" target="_blank" class="badge-link">
                    <i class="fab fa-github"></i>
                    <span>Code</span>
                </a>
                <a href="https://huggingface.co/datasets/longvideotool/LongVT-Parquet" target="_blank" class="badge-link">
                    <i class="fas fa-database"></i>
                    <span>Data</span>
                </a>
                <a href="https://huggingface.co/longvideotool" target="_blank" class="badge-link">
                    <span class="badge-emoji">🤗</span>
                    <span>Model</span>
                </a>
                <a href="https://www.lmms-lab.com/posts/longvt/" target="_blank" class="badge-link">
                    <i class="fas fa-blog"></i>
                    <span>Blog</span>
                </a>
                <a href="https://huggingface.co/papers/2511.20785" target="_blank" class="badge-link daily-paper">
                    <span class="badge-emoji">🚀</span>
                    <span>Daily Paper</span>
                </a>
            </div>
        </div>
        ''')
        
        if samples and len(samples) > 0:
            initial_sample = samples[0]
            
            with gr.Row(elem_classes="main-content"):
                # Left Column: Video & Question
                with gr.Column(elem_classes="left-column"):
                    gr.HTML('<div class="card-title">🎬 Video</div>')
                    with gr.Group(elem_classes="video-group"):
                        video_output = gr.HTML(
                            value=create_video_html(initial_sample["video_filename"], initial_sample["tool_calls"], 1, len(samples)),
                            elem_classes="video-html"
                        )
                        sample_selector = gr.Radio(
                            choices=[f"Sample {i+1}" for i in range(len(samples))],
                            value="Sample 1",
                            label="",
                            elem_classes="hidden-radio"
                        )
                    
                    gr.HTML('<div class="card-title">❓ Query</div>')
                    question_output = gr.HTML(
                        value=f'<div class="question-box">{initial_sample["question"]}</div>',
                        elem_classes="glass-card question-card"
                    )
                
                # Right Column: Reasoning & Response
                with gr.Column(elem_classes="right-column"):
                    gr.HTML('<div class="card-title">🧠 Reasoning Process</div>')
                    thinking_output = gr.HTML(
                        value=create_thinking_html(initial_sample["thinking_steps"], initial_sample["tool_calls"]),
                        elem_classes="glass-card reasoning-card"
                    )
                    
                    gr.HTML('<div class="card-title">📊 Response</div>')
                    answer_output = gr.HTML(
                        value=create_answer_comparison_html(
                            initial_sample["final_answer"],
                            initial_sample["ground_truth"],
                            initial_sample["scores"]
                        ),
                        elem_classes="glass-card response-card"
                    )
            
            def update_display(sample_choice):
                if not sample_choice:
                    return gr.update(), gr.update(), gr.update(), gr.update()
                sample_idx = int(sample_choice.split()[-1]) - 1
                if sample_idx < len(samples):
                    s = samples[sample_idx]
                    return (
                        create_video_html(s["video_filename"], s["tool_calls"], sample_idx + 1, len(samples)),
                        f'<div class="question-box">{s["question"]}</div>',
                        create_thinking_html(s["thinking_steps"], s["tool_calls"]),
                        create_answer_comparison_html(s["final_answer"], s["ground_truth"], s["scores"])
                    )
                return gr.update(), gr.update(), gr.update(), gr.update()
            
            sample_selector.change(
                fn=update_display,
                inputs=[sample_selector],
                outputs=[video_output, question_output, thinking_output, answer_output]
            )
        
        # Footer
        gr.HTML('''
        <div class="demo-footer">
            <p>🚀 Powered by LMMs-Lab</p>
        </div>
        ''')
    
    return demo


# Create and launch the app
demo = create_demo_app()

if __name__ == "__main__":
    demo.launch()