""" šŸŽ¬ 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 caught by a boat around [1:45s ā€“ 2:20s]. Later, there are shots of wolves and lions 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 [2:48s ā€“ 2:55s] 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 [2:48s ā€“ 2:55s] 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 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. No further localization is needed as the critical information for identifying the brand and matching 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." ], "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": "Vijay Vyas", "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 = '
' 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'''
šŸ§  {label}
{think}
''' 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'''
šŸŽ¬ crop_video
{start_fmt} ā†’ {end_fmt}
''' html += '
' 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'''
šŸ¤– Model Answer
{final_answer}
āœ… Ground Truth
{ground_truth}
''' 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 '
No video available
' # 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'''
{i+1}
''' # Create sample selector buttons sample_buttons = "" for i in range(1, total_samples + 1): active = "active" if i == selected_idx else "" sample_buttons += f'
{i}
' return f'''
SELECTED VIDEOS
{sample_buttons}
CROPPED SEGMENTS
{markers_html}
''' # ============================================================================ # 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 = """ """ # ============================================================================ # 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('''

LongVT

Incentivizing "Thinking with Long Videos" via Native Tool Calling

See how LongVT navigates through long videos, making intelligent decisions about which segments to analyze,
reasoning step by step to find answers.

arXiv Webpage Code Data šŸ¤— Model Blog šŸš€ Daily Paper
''') 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('
šŸŽ¬ Video
') 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('
ā“ Query
') question_output = gr.HTML( value=f'
{initial_sample["question"]}
', elem_classes="glass-card question-card" ) # Right Column: Reasoning & Response with gr.Column(elem_classes="right-column"): gr.HTML('
šŸ§  Reasoning Process
') thinking_output = gr.HTML( value=create_thinking_html(initial_sample["thinking_steps"], initial_sample["tool_calls"]), elem_classes="glass-card reasoning-card" ) gr.HTML('
šŸ“Š Response
') 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'
{s["question"]}
', 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('''

šŸš€ Powered by LMMs-Lab

''') return demo # Create and launch the app demo = create_demo_app() if __name__ == "__main__": demo.launch()