Add simulated livestream replay theater, custom generator configuration, and multi-stage LLM pipeline

.gitignore

@@ -0,0 +1,5 @@
+.venv/
+__pycache__/
+*.pyc
+.DS_Store
+extract.py

app.py

@@ -1,7 +1,252 @@
+import os
+import json
+import html
 import gradio as gr
+import pymupdf4llm
+from pipeline import run_livestream_pipeline, extract_youtube_video_id, DEFAULT_HF_TOKEN
 
-def greet(name):
-    return "Hello " + name + "!!"
+def load_template_with_data(video_id: str, chat_data: list) -> str:
+    template_path = os.path.join(os.path.dirname(__file__), "theater_template.html")
+    with open(template_path, "r", encoding="utf-8") as f:
+        template = f.read()
+    
+    # Inject values
+    inner_html = template.replace("{{VIDEO_ID}}", video_id)
+    inner_html = inner_html.replace("{{CHAT_DATA_JSON}}", json.dumps(chat_data, ensure_ascii=False))
+    
+    # Escape HTML to be safely embedded inside srcdoc attribute of an iframe
+    escaped_inner_html = html.escape(inner_html)
+    
+    # Wrap in iframe to ensure scripts execute correctly in Gradio 6+ without innerHTML restrictions
+    iframe_code = (
+        f'<iframe srcdoc="{escaped_inner_html}" style="width: 100%; height: 620px; '
+        f'border: none; border-radius: 12px; background-color: #0b0c10; box-shadow: 0 4px 12px rgba(0,0,0,0.45);"></iframe>'
+    )
+    return iframe_code
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+def get_demo_html() -> str:
+    demo_json_path = os.path.join(os.path.dirname(__file__), "sample", "demo_chat.json")
+    if os.path.exists(demo_json_path):
+        with open(demo_json_path, "r", encoding="utf-8") as f:
+            chat_data = json.load(f)
+    else:
+        chat_data = []
+    return load_template_with_data("xLljoibgUvk", chat_data)
+
+# Global store for custom simulations
+custom_simulation_store = {
+    "video_id": "",
+    "chat_data": None
+}
+
+def play_simulation_selection(selection: str) -> str:
+    if selection == "Steve Jobs 1983 Speech (Demo)":
+        return get_demo_html()
+    elif selection == "My Custom Simulation":
+        if custom_simulation_store["video_id"] and custom_simulation_store["chat_data"]:
+            return load_template_with_data(custom_simulation_store["video_id"], custom_simulation_store["chat_data"])
+        else:
+            return "<div style='color:#ff0055; text-align:center; padding:50px; font-family:sans-serif;'>No custom simulation has been generated yet. Please configure and run one in the 'Generator' tab.</div>"
+    return ""
+
+def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_token: str):
+    # 1. Validate YouTube Link
+    video_id = extract_youtube_video_id(yt_url)
+    if not video_id:
+        return (
+            gr.update(),
+            "### ❌ Error\nInvalid YouTube URL. Please provide a valid YouTube link or 11-character Video ID.",
+            gr.update()
+        )
+        
+    # 2. Extract Document Text
+    document_content = ""
+    if pdf_file is not None:
+        try:
+            document_content = pymupdf4llm.to_markdown(pdf_file.name)
+        except Exception as e:
+            return (
+                gr.update(),
+                f"### ❌ Error\nFailed to extract text from PDF: {e}",
+                gr.update()
+            )
+    elif doc_text.strip():
+        document_content = doc_text.strip()
+    else:
+        return (
+            gr.update(),
+            "### ❌ Error\nPlease upload a PDF/text file or paste some reference document text.",
+            gr.update()
+        )
+        
+    # 3. Clean manual transcript input if any
+    manual_transcript = srt_text.strip() if srt_text.strip() else None
+    
+    # 4. Use provided token or default token
+    token = hf_token.strip() if hf_token.strip() else DEFAULT_HF_TOKEN
+    
+    status_msg = "### ⚙️ Running Pipeline...\n"
+    if manual_transcript:
+        status_msg += "- Processing manually pasted transcript...\n"
+    else:
+        status_msg += "- Downloading YouTube captions (will fallback to manual paste prompt if IP is blocked)...\n"
+        
+    status_msg += "- Segmenting transcript with Flash model...\n"
+    status_msg += "- Extracting document themes with Flash model...\n"
+    status_msg += "- Mapping content and generating draft comments with Pro model...\n"
+    status_msg += "- Refining comments with Flash model..."
+    
+    # 5. Run the pipeline
+    try:
+        chat_data = run_livestream_pipeline(
+            video_id=video_id,
+            doc_text=document_content,
+            transcript_text=manual_transcript,
+            token=token
+        )
+        
+        # Save to global store
+        custom_simulation_store["video_id"] = video_id
+        custom_simulation_store["chat_data"] = chat_data
+        
+        success_msg = (
+            f"### 🎉 Success!\n"
+            f"Livestream simulation generated successfully for video ID `{video_id}`!\n"
+            f"Navigate back to the **Theater Mode** tab and select **My Custom Simulation** to play it."
+        )
+        
+        # Create updated HTML player
+        new_html = load_template_with_data(video_id, chat_data)
+        
+        return (
+            new_html,
+            success_msg,
+            gr.update(choices=["Steve Jobs 1983 Speech (Demo)", "My Custom Simulation"], value="My Custom Simulation")
+        )
+    except Exception as e:
+        error_msg = f"### ❌ Error running pipeline\n{e}"
+        if "YouTube transcript could not be fetched automatically" in str(e):
+            error_msg += (
+                "\n\n**Tip**: YouTube blocked the server IP from accessing the subtitles automatically. "
+                "Please copy and paste the video transcript or subtitles into the 'Manual Captions / Transcript Paste' "
+                "input box below to bypass the block."
+            )
+        return (
+            gr.update(),
+            error_msg,
+            gr.update()
+        )
+
+# Gradio Theme
+custom_theme = gr.themes.Default(
+    primary_hue="purple",
+    secondary_hue="indigo",
+    neutral_hue="slate"
+).set(
+    body_background_fill="#0b0c10",
+    block_background_fill="#161a23",
+    block_border_color="rgba(255, 255, 255, 0.08)",
+    button_primary_background_fill="#7f5af0",
+    button_primary_text_color="#ffffff",
+    button_primary_background_fill_hover="#9370db"
+)
+
+with gr.Blocks(title="ReLiveStream - Interactive Replay") as demo:
+    gr.HTML(
+        """
+        <div style="text-align: center; margin-bottom: 20px; padding-top: 10px;">
+            <h1 style="color: #fffffe; font-size: 2.2rem; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.5px;">ReLiveStream</h1>
+            <p style="color: #94a1b2; font-size: 1rem;">Simulate realistic audience livestream chat replays based on reference documents</p>
+        </div>
+        """
+    )
+    
+    with gr.Tabs():
+        # Tab 1: Theater Player
+        with gr.TabItem("🎭 Theater Mode"):
+            with gr.Row():
+                sim_selector = gr.Radio(
+                    choices=["Steve Jobs 1983 Speech (Demo)", "My Custom Simulation"],
+                    value="Steve Jobs 1983 Speech (Demo)",
+                    label="Choose Simulation to Play",
+                    interactive=True
+                )
+            
+            # The player frame
+            player_frame = gr.HTML(value=get_demo_html())
+            
+            # Trigger updates when selection changes
+            sim_selector.change(
+                fn=play_simulation_selection,
+                inputs=[sim_selector],
+                outputs=[player_frame]
+            )
+            
+        # Tab 2: Generator Config
+        with gr.TabItem("⚙️ Configure Custom Simulation"):
+            gr.Markdown(
+                """
+                ### Configure Your Custom Simulation
+                Input a YouTube link and upload a reference document (e.g. policy paper, textbook, research article).
+                The AI will download the video transcript, map it to key themes from the reference document, 
+                and generate a synchronized chat replay representing varied internet users (skeptics, hype, experts, etc.).
+                """
+            )
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    yt_url_input = gr.Textbox(
+                        label="YouTube URL or Video ID",
+                        placeholder="https://www.youtube.com/watch?v=...",
+                        info="Maximum length: 10 minutes recommended."
+                    )
+                    
+                    token_input = gr.Textbox(
+                        label="Hugging Face Token (Optional)",
+                        placeholder="Leave blank to use default token...",
+                        type="password",
+                        info="Token used to authenticate the Serverless Router."
+                    )
+                    
+                    pdf_input = gr.File(
+                        label="Upload Reference PDF/Text",
+                        file_types=[".pdf", ".txt"],
+                        file_count="single"
+                    )
+                    
+                    fallback_text_input = gr.Textbox(
+                        label="Or Paste Reference Text",
+                        placeholder="Alternative if not uploading a file...",
+                        lines=4
+                    )
+                    
+                with gr.Column(scale=1):
+                    fallback_srt_input = gr.Textbox(
+                        label="Manual Captions / Transcript Paste (Optional Fallback)",
+                        placeholder="If auto-fetching fails (IP block), paste the SRT format subtitles or plain text here...",
+                        lines=12
+                    )
+                    
+                    generate_btn = gr.Button("🚀 Generate Simulation", variant="primary")
+                    
+            status_output = gr.Markdown(value="*Awaiting configuration...*")
+            
+            # Link callback
+            generate_btn.click(
+                fn=handle_generation,
+                inputs=[
+                    yt_url_input,
+                    pdf_input,
+                    fallback_text_input,
+                    fallback_srt_input,
+                    token_input
+                ],
+                outputs=[
+                    player_frame,
+                    status_output,
+                    sim_selector
+                ]
+            )
+
+if __name__ == "__main__":
+    demo.launch(theme=custom_theme)

pipeline.py

@@ -0,0 +1,285 @@
+import os
+import re
+import json
+import requests
+import pymupdf4llm
+from concurrent.futures import ThreadPoolExecutor
+from youtube_transcript_api import YouTubeTranscriptApi
+
+DEFAULT_HF_TOKEN = os.environ.get("HF_TOKEN", "")
+FLASH_MODEL = "meta-llama/Llama-3.3-70B-Instruct"
+PRO_MODEL = "deepseek-ai/DeepSeek-V4-Pro:novita"
+
+def extract_youtube_video_id(url: str) -> str:
+    url = url.strip()
+    if len(url) == 11 and re.match(r'^[a-zA-Z0-9_-]{11}$', url):
+        return url
+    patterns = [
+        r'(?:v=|\/v\/|embed\/|shorts\/|youtu\.be\/|\/embed\/|\/watch\?v=|\&v=)([a-zA-Z0-9_-]{11})'
+    ]
+    for pattern in patterns:
+        match = re.search(pattern, url)
+        if match:
+            return match.group(1)
+    return ""
+
+def format_timestamp(seconds: float) -> str:
+    mins = int(seconds // 60)
+    secs = int(seconds % 60)
+    return f"[{mins:02d}:{secs:02d}]"
+
+def format_transcript_lines(transcript: list) -> str:
+    lines = []
+    for entry in transcript:
+        time_str = format_timestamp(entry["start"])
+        lines.append(f"{time_str} {entry['text']}")
+    return "\n".join(lines)
+
+def clean_json_text(text: str) -> str:
+    text = text.strip()
+    # Remove markdown code block wraps
+    if text.startswith("```json"):
+        text = text[7:]
+    elif text.startswith("```"):
+        text = text[3:]
+    if text.endswith("```"):
+        text = text[:-3]
+    return text.strip()
+
+def call_hf_router(model: str, messages: list, token: str) -> str:
+    import time
+    headers = {
+        "Authorization": f"Bearer {token}",
+        "Content-Type": "application/json"
+    }
+    data = {
+        "model": model,
+        "messages": messages,
+        "temperature": 0.7
+    }
+    
+    max_retries = 3
+    for attempt in range(max_retries):
+        try:
+            response = requests.post(
+                "https://router.huggingface.co/v1/chat/completions",
+                headers=headers,
+                json=data,
+                timeout=45
+            )
+            response.raise_for_status()
+            res_json = response.json()
+            return res_json["choices"][0]["message"]["content"]
+        except Exception as e:
+            if attempt == max_retries - 1:
+                raise e
+            print(f"HF API call failed (attempt {attempt+1}/{max_retries}): {e}. Retrying...")
+            time.sleep(2 ** attempt + 1)
+
+
+def parse_srt(srt_text: str) -> list:
+    entries = []
+    # Normalize newlines
+    srt_text = srt_text.replace('\r\n', '\n').replace('\r', '\n')
+    blocks = re.split(r'\n\s*\n', srt_text.strip())
+    for block in blocks:
+        lines = [line.strip() for line in block.split('\n') if line.strip()]
+        if len(lines) >= 3:
+            time_line = lines[1]
+            text = " ".join(lines[2:])
+            # Match formats: 00:00:03,320 --> 00:00:05,960 or 00:00:03.320 --> 00:00:05.960
+            match = re.match(r'(\d+):(\d+):(\d+)[,\.](\d+)\s*-->\s*(\d+):(\d+):(\d+)[,\.](\d+)', time_line)
+            if match:
+                h1, m1, s1, ms1, h2, m2, s2, ms2 = map(int, match.groups())
+                start_secs = h1 * 3600 + m1 * 60 + s1 + ms1 / 1000.0
+                end_secs = h2 * 3600 + m2 * 60 + s2 + ms2 / 1000.0
+                duration = end_secs - start_secs
+                entries.append({
+                    "text": text,
+                    "start": start_secs,
+                    "duration": duration
+                })
+    return entries
+
+def parse_transcript_text(text: str) -> list:
+    text = text.strip()
+    if "-->" in text:
+        try:
+            entries = parse_srt(text)
+            if entries:
+                return entries
+        except Exception:
+            pass
+            
+    # Fallback to plain text paragraph segmentation
+    paragraphs = [p.strip() for p in text.split('\n') if p.strip()]
+    entries = []
+    current_time = 0.0
+    for p in paragraphs:
+        words = len(p.split())
+        duration = max(3.0, min(15.0, words / 3.0))
+        entries.append({
+            "text": p,
+            "start": current_time,
+            "duration": duration
+        })
+        current_time += duration + 1.0
+    return entries
+
+# --- STAGE 1a: Segment transcript ---
+def stage_1a_segment_transcript(transcript_text: str, token: str) -> list:
+    system_prompt = (
+        "You are an AI assistant that segments a video transcript into logical topic segments. "
+        "You are given a transcript formatted with timestamps.\n"
+        "Your task is to group consecutive lines into segments of about 30 to 60 seconds (but align with natural topic boundaries).\n"
+        "For each segment, output:\n"
+        "- start: the start time in seconds (float or int)\n"
+        "- end: the end time in seconds (float or int)\n"
+        "- text: the concatenated text in this segment\n\n"
+        "Return ONLY a JSON list of segments. Do not include markdown wraps or conversational text outside the JSON."
+    )
+    user_prompt = f"Transcript:\n{transcript_text}"
+    
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": user_prompt}
+    ]
+    content = call_hf_router(FLASH_MODEL, messages, token)
+    cleaned = clean_json_text(content)
+    return json.loads(cleaned)
+
+# --- STAGE 1b: Extract themes ---
+def stage_1b_extract_themes(doc_text: str, token: str) -> str:
+    if len(doc_text) > 40000:
+        doc_text = doc_text[:40000] + "\n...[Document Truncated]..."
+        
+    system_prompt = (
+        "You are an expert researcher. Extract the main themes, key concepts, core arguments, facts, terminology, "
+        "and themes from the following document.\n"
+        "Summarize them in a concise but detailed bulleted list that can be used by another AI model to generate chat reactions."
+    )
+    user_prompt = f"Document:\n{doc_text}"
+    
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": user_prompt}
+    ]
+    return call_hf_router(FLASH_MODEL, messages, token)
+
+# --- STAGE 2: Generate draft comments (Pro model) ---
+def stage_2_generate_draft_segment(segment: dict, themes: str, token: str) -> dict:
+    system_prompt = (
+        "You are simulating audience chat reactions for a livestream of an educational or historical video.\n"
+        "You are given:\n"
+        "1. The caption text of a specific video segment.\n"
+        "2. Extracted themes and concepts from a reference document.\n\n"
+        "Your task is to generate 8 to 15 draft chat messages from different users reacting to this video segment.\n"
+        "Crucially:\n"
+        "- The comments must react directly to the video segment content.\n"
+        "- The comments should reference ideas, concepts, facts, or perspectives from the reference document when relevant "
+        "(e.g., creating conceptual bridges, pointing out contradictions, or validating the video), but they MUST NOT directly quote or paraphrase the source document.\n"
+        "- Translate complex conceptual relationships between the video and the document into raw thoughts or reactions.\n\n"
+        "Format your response as a JSON object with:\n"
+        "- timestamp: {timestamp}\n"
+        "- _internal_logic: Briefly state how this segment relates to the source document themes (analogy, contradiction, validation).\n"
+        "- messages: a list of objects containing 'username' and 'text'.\n\n"
+        "Return ONLY the JSON. Do not include markdown wraps."
+    )
+    user_prompt = (
+        f"Video Segment ({segment['start']}s - {segment['end']}s):\n{segment['text']}\n\n"
+        f"Extracted Reference Document Themes:\n{themes}\n\n"
+        f"Generate draft comments for timestamp: {segment['start']}"
+    )
+    
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": user_prompt}
+    ]
+    content = call_hf_router(PRO_MODEL, messages, token)
+    cleaned = clean_json_text(content)
+    data = json.loads(cleaned)
+    data["timestamp"] = segment["start"]
+    return data
+
+# --- STAGE 3: Style and pacing (Flash model) ---
+def stage_3_stylize_segment(draft_data: dict, token: str) -> dict:
+    system_prompt = (
+        "You are a style polisher for livestream chat replays (YouTube/Twitch).\n"
+        "Your job is to take raw draft chat messages and rewrite them to sound like authentic, lively internet comments.\n\n"
+        "Apply these stylistic rules:\n"
+        "- Make them short and concise.\n"
+        "- Inject internet slang (e.g., lol, wtf, lmao, fr, no cap, ngl, bruh) and standard emotes (e.g., LUL, PogChamp, Kappa, MonkaS, BibleThump, 5Head, Pog, Pepega).\n"
+        "- Make username/text combinations feel natural. Some users can be experts reading into philosophical tension; some take things at face value; some only react emotionally or to video aesthetics; some use sarcasm/memes.\n"
+        "- Vary message lengths and pacing.\n"
+        "- Avoid sounding like AI-generated summaries or formal text.\n\n"
+        "Return ONLY the updated JSON with the exact same structure. Do not include markdown wraps."
+    )
+    user_prompt = f"Draft JSON:\n{json.dumps(draft_data)}"
+    
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": user_prompt}
+    ]
+    content = call_hf_router(FLASH_MODEL, messages, token)
+    cleaned = clean_json_text(content)
+    return json.loads(cleaned)
+
+# --- Full Pipeline Orchestration ---
+def run_livestream_pipeline(video_id: str, doc_text: str, transcript_text: str = None, token: str = None) -> list:
+    if not token:
+        token = os.environ.get("HF_TOKEN", DEFAULT_HF_TOKEN)
+    if not token:
+        raise ValueError(
+            "Hugging Face API Token not found. Please set the 'HF_TOKEN' secret in your Space settings "
+            "or provide it in the input box."
+        )
+        
+    if transcript_text:
+        print("Parsing provided transcript text...")
+        raw_transcript = parse_transcript_text(transcript_text)
+    else:
+        print("Fetching YouTube transcript from API...")
+        try:
+            api = YouTubeTranscriptApi()
+            raw_transcript = api.fetch(video_id)
+        except Exception as e:
+            raise ValueError(
+                f"YouTube transcript could not be fetched automatically: {e}. "
+                "Please provide the transcript text manually."
+            )
+            
+    transcript_text_formatted = format_transcript_lines(raw_transcript)
+    
+    print("Stage 1a: Segmenting transcript...")
+    segments = stage_1a_segment_transcript(transcript_text_formatted, token)
+    print(f"Segmented into {len(segments)} blocks.")
+    
+    print("Stage 1b: Extracting themes from document...")
+    themes = stage_1b_extract_themes(doc_text, token)
+    print("Themes extracted successfully.")
+    
+    # Stage 2: Parallel comment generation
+    print("Stage 2: Generating draft comments (Pro model)...")
+    draft_segments = []
+    with ThreadPoolExecutor(max_workers=5) as executor:
+        futures = [
+            executor.submit(stage_2_generate_draft_segment, seg, themes, token)
+            for seg in segments
+        ]
+        for fut in futures:
+            draft_segments.append(fut.result())
+            
+    # Stage 3: Parallel stylization
+    print("Stage 3: Stylizing comments...")
+    final_segments = []
+    with ThreadPoolExecutor(max_workers=5) as executor:
+        futures = [
+            executor.submit(stage_3_stylize_segment, draft, token)
+            for draft in draft_segments
+        ]
+        for fut in futures:
+            final_segments.append(fut.result())
+            
+    # Sort segments by timestamp to be safe
+    final_segments.sort(key=lambda x: x.get("timestamp", 0))
+    return final_segments

requirements.txt

@@ -0,0 +1,5 @@
+gradio>=4.0.0
+pymupdf4llm
+youtube-transcript-api
+requests
+openai

sample/demo_chat.json

@@ -0,0 +1,568 @@
+[
+  {
+    "timestamp": 0,
+    "_internal_logic": "The video segment shows a person using manual, effortful methods (cutting, pasting, dial-up) to create and share a drawing. This contrasts with modern frictionless AI tools. The chat messages react to this by referencing the value of effort, desirable difficulties, and personal connection, aligning with the document's themes about friction and AI's potential to remove meaningful struggle.",
+    "messages": [
+      {
+        "username": "RetroTechFan",
+        "text": "lmao cutting and pasting? so extra compared to drag and drop lol"
+      },
+      {
+        "username": "AspenLocal",
+        "text": "omg dial-up!! the wait was part of the hype, ngl"
+      },
+      {
+        "username": "ArtLover22",
+        "text": "no cap, the struggle of making it is what makes it fire, PogChamp"
+      },
+      {
+        "username": "AI_Ethics_Watcher",
+        "text": "wtf if he had ai, would it even feel like an accomplishment? MonkaS"
+      },
+      {
+        "username": "LearningNerd",
+        "text": "desirable difficulties 101 - the struggle is what makes it stick, fr"
+      },
+      {
+        "username": "TechHistorian",
+        "text": "early internet was all about the grind, now it's all frictionless, BibleThump"
+      },
+      {
+        "username": "PhilosophyChick",
+        "text": "struggling with scissors and glue = personal touch, AI removes that, Kappa"
+      },
+      {
+        "username": "DialUpDreamer",
+        "text": "electronic mailbox in aspen = OG social media, so much more intentional, 5Head"
+      },
+      {
+        "username": "CognitiveScientist",
+        "text": "effort paradox, we seek challenges even when easier ways exist, Pog"
+      },
+      {
+        "username": "FutureFear",
+        "text": "if ai existed back then, would he have even bothered? Pepega, idk man"
+      }
+    ]
+  },
+  {
+    "timestamp": 20,
+    "_internal_logic": "The video segment discusses the early days of personal computers as a new medium and a critical 15-year window to integrate them into society. This mirrors the current inflection point with AI, where we also face a choice to harness it thoughtfully while preserving necessary human friction—or to allow it to short-circuit effort and learning. The speaker's 'do it great or do it so' creates a conceptual bridge to the document's tension between beneficial friction and the risks of over-reliance.",
+    "messages": [
+      {
+        "username": "TechHistorian",
+        "text": "Lol this AI moment feels like deja vu, no cap. Will we blow it again in 15 yrs?"
+      },
+      {
+        "username": "SyntaxSculptor",
+        "text": "Computers as a 'new medium'... now AI. But seamless convenience might make us skip the hard part, PogChamp"
+      },
+      {
+        "username": "DeepThoughtLurker",
+        "text": "Learning BASIC was a struggle, but it wired my brain differently, ngl. Is AI removing that useful struggle? MonkaS"
+      },
+      {
+        "username": "RetroFuturist",
+        "text": "'Do it great or do it so'... that's the choice, fr. Keeping the grit means 'great', imo"
+      },
+      {
+        "username": "CodexNomad",
+        "text": "Omg, first phase of AI will be over before we notice the skills we've lost, wtf"
+      },
+      {
+        "username": "MeaningMiner",
+        "text": "Maybe early computer pioneers understood something we're about to forget, BibleThump. Removing friction = short-circuiting understanding?"
+      },
+      {
+        "username": "SociotechPonder",
+        "text": "Meeting AI for the first time... and we wanna automate away the human bits, Kappa. What's the point tho?"
+      },
+      {
+        "username": "AnalogSoul",
+        "text": "We're in a 15-yr window, just like back then. Are we designing AI to help or replace us, 5Head"
+      },
+      {
+        "username": "WisdomBuffer",
+        "text": "Effort paradox, bruh: computer revolution was hard, and that gave it value. Will AI offer the same depth? Pog"
+      },
+      {
+        "username": "FutureProofMind",
+        "text": "Document's warning is real, imo. It's not just about tools, it's about how they shape cognition, Pepega"
+      },
+      {
+        "username": "QuietRevolutionary",
+        "text": "Loneliness as a signal, lol. Will AI companions just silence it or push us toward real connection? LUL"
+      },
+      {
+        "username": "PixelPhilosopher",
+        "text": "We're in the awkward dating phase with AI, ngl. Next 15 yrs will define whether it's a relationship or a crutch, no cap"
+      }
+    ]
+  },
+  {
+    "timestamp": 43,
+    "_internal_logic": "analogy: The segment exemplifies the value of conceptual friction (desirable difficulties) in learning, as the speaker prompts the audience to struggle with defining a program rather than receiving an effortless explanation. This aligns with the document's argument that friction is essential for deep understanding.",
+    "messages": [
+      {
+        "username": "TechHistorian",
+        "text": "LUL the silence is golden, no cap. Real learning happens when we're stuck"
+      },
+      {
+        "username": "LearningFan",
+        "text": "Desirable difficulty 101, wtf would we learn if it was easy?"
+      },
+      {
+        "username": "AI_Skeptic",
+        "text": "Bruh, we'd just ask ChatGPT and miss the whole point. Struggle is key"
+      },
+      {
+        "username": "DeepThinker42",
+        "text": "He's making us earn it. Effort paradox, ngl, it's real"
+      },
+      {
+        "username": "CuriousCat",
+        "text": "LOL nobody knows wth a program is. It's like defining 'thinking'... PogChamp"
+      },
+      {
+        "username": "NeuroNerd",
+        "text": "That 'sort of sort of' is brains encoding info deeply, MonkaS. Friction for the win"
+      },
+      {
+        "username": "AnalogHeart",
+        "text": "AI tutor just blurting out a def? No thanks, human awkwardness is where it's at, Pepega"
+      },
+      {
+        "username": "CodePoet",
+        "text": "Concepts get richer when we grapple, not when pre-digested. Kappa"
+      },
+      {
+        "username": "FuturePast",
+        "text": "Anti-frictionless AI argument in one clip. Let us be confused, let us think, 5Head"
+      },
+      {
+        "username": "SocraticDog",
+        "text": "Jobs is like an analog AI, generating friction. The irony tho... BibleThump"
+      },
+      {
+        "username": "MindGym",
+        "text": "That hesitation is cognitive effort, burning calories. Good thing, imo, Pog"
+      }
+    ]
+  },
+  {
+    "timestamp": 59,
+    "_internal_logic": "The video's description of computer programs as pure, archetypal ideas connects to the document's emphasis on intellectual work requiring cognitive friction. The analogy to television programming sets up a contrast between active creation (programming) and passive consumption (TV), mirroring the document's concern about AI removing the 'desirable difficulties' that make learning and creation meaningful.",
+    "messages": [
+      {
+        "username": "ByteWanderer",
+        "text": "lol programs are just ideas? no cap, thats deep. coding is like pure mind magic LUL"
+      },
+      {
+        "username": "DeepThoughts42",
+        "text": "wtf i know right? we love the struggle of coding, even tho its hard. thats the fun part, ngl PogChamp"
+      },
+      {
+        "username": "NeonNerdette",
+        "text": "omg every bug is like a flaw in ur mental model MonkaS. debugging is a brain workout, no excuses"
+      },
+      {
+        "username": "QuantumLeap99",
+        "text": "coding is like conjuring reality from thin air, fr. no wonder its so addictive, lol"
+      },
+      {
+        "username": "AI_Hawk",
+        "text": "ai just gives u the code, but then u miss the friction, bruh. thats why we forget everything it writes, no cap"
+      },
+      {
+        "username": "PhiloCoder",
+        "text": "never seen an electron, never seen a program... both are just inferred from effects, biblethump. what even is 'real'?"
+      },
+      {
+        "username": "GrindsetMaximalist",
+        "text": "tv comparison is savage, lol. tv rots ur brain, coding sharpens it. choose ur archetype, 5Head"
+      },
+      {
+        "username": "Retro_Futurist",
+        "text": "ada lovelace was literally an archetypal programmer, pog. ideas on paper, turned into logic"
+      },
+      {
+        "username": "ZenCipher",
+        "text": "programming is turning thought into logic, no cap. remove the struggle, u lose the art. ai cant replicate that, pepega"
+      },
+      {
+        "username": "PonderThis22",
+        "text": "ai companions seem real, but are just patterns, ngl. no friction, no depth... just like tv friendships, kappa"
+      },
+      {
+        "username": "Sudo_Mystic",
+        "text": "code has no physical form, but creates everything digital... thats the ultimate paradox, lol. we love the invisible labor, monkas"
+      }
+    ]
+  },
+  {
+    "timestamp": 98,
+    "_internal_logic": "Analogy: The video segment describes how television can flawlessly recreate emotional experiences, acting as a 'frictionless' medium for feelings. This mirrors the document's concern about AI removing friction from intellectual and social processes, potentially diminishing the value of the authentic, effortful experience.",
+    "messages": [
+      {
+        "username": "history_buff99",
+        "text": "lol @ JFK footage still hitting hard, but does TV sanitize the pain? fr"
+      },
+      {
+        "username": "moonwatcher",
+        "text": "PogChamp moon landing replays get me every time, but where's the grit? LUL"
+      },
+      {
+        "username": "skeptical_sam",
+        "text": "wtf, pre-packaged emotions? no cap, that's wild"
+      },
+      {
+        "username": "deep_thinker",
+        "text": "Interesting point... TV = no friction, just feelings on a platter, ngl"
+      },
+      {
+        "username": "media_critic",
+        "text": "BibleThump do we lose our authentic reactions if we only get them from TV? MonkaS"
+      },
+      {
+        "username": "nostalgia_fan",
+        "text": "I'm a sucker for nostalgia, lol. TV trains our emotional responses, Pepega"
+      },
+      {
+        "username": "effort_matters",
+        "text": "5Head the moon landing was earned, not just a highlight reel. no cap"
+      },
+      {
+        "username": "ai_observer",
+        "text": "Kappa TV = early AI? replicating experiences without the grind, bruh"
+      },
+      {
+        "username": "reality_check",
+        "text": "Pog but isn't perfect TV kinda... limited? you can't feel the tension, lol"
+      },
+      {
+        "username": "balance_seeker",
+        "text": "fascinating, it captures the feeling, but not the learning. we need struggle, ngl, to really get it"
+      }
+    ]
+  },
+  {
+    "timestamp": 139,
+    "_internal_logic": "The video's emphasis on capturing underlying principles mirrors the document's concern about AI abstracting away the messy, effortful reality. It validates the idea that while principles can generate infinite variations, the original friction of experience—argued in the document—might be essential for deeper learning and meaning.",
+    "messages": [
+      {
+        "username": "CodeDreamer",
+        "text": "lol so programming is like extracting laws from experience. but does AI really 'get' it if it didnt live it?"
+      },
+      {
+        "username": "FrictionFan",
+        "text": "no cap, struggle is key. if computers just capture principles, we lose the grind LUL"
+      },
+      {
+        "username": "RetroGameNerd",
+        "text": "Pong is the perfect example, bruh! unique matches, consistent physics PogChamp"
+      },
+      {
+        "username": "DeepThoughts42",
+        "text": "does learning need messy experience or just principles? doc says desirable difficulties matter, ngl"
+      },
+      {
+        "username": "AI_Skeptic",
+        "text": "AI gives us 'rules' of social interaction, but without human effort, it's hollow, fr"
+      },
+      {
+        "username": "PhilosoGamer",
+        "text": "effort paradox, dude! we enjoy games cuz we struggle within rules. no friction, no thrill BibleThump"
+      },
+      {
+        "username": "LazyCoder",
+        "text": "wish learning programming was easier, but then i'd forget lol. struggle is the teacher, i guess"
+      },
+      {
+        "username": "MeaningSeeker",
+        "text": "principles vs experience: map vs territory. AI gives us map, but we need to walk the walk, MonkaS"
+      },
+      {
+        "username": "OldSchoolDev",
+        "text": "programming doesn't copy experience, it finds invariant. gotta wrestle with reality first, Kappa"
+      },
+      {
+        "username": "NeoHumanist",
+        "text": "this video from 60s predicted AI replacing effort. now we got AI companions, wild Pepega"
+      }
+    ]
+  },
+  {
+    "timestamp": 185,
+    "_internal_logic": "The segment describes a classic educational game that embodies 'desirable difficulties' and 'friction' in learning, contrasting with modern AI tools that remove such effort. The game's design forces players to struggle with resource management, leading to deeper understanding, which aligns with the document's argument about the importance of effort in learning.",
+    "messages": [
+      {
+        "username": "Lurker4Lyfe",
+        "text": "anti-friction simulator, no cap. grain storage on you, lol"
+      },
+      {
+        "username": "HistoryBuff99",
+        "text": "my uncle learned more from Hammurabi than a semester of lectures, ngl. struggle is real"
+      },
+      {
+        "username": "TechieTina",
+        "text": "modern version with AI advisor? kid learns zero, wtf. friction is the lesson, fr"
+      },
+      {
+        "username": "OldSchoolGamer",
+        "text": "peak 'effort paradox' - hate the decisions, can't stop, MonkaS"
+      },
+      {
+        "username": "DeepThought42",
+        "text": "that moment you starve your people... feedback loop, no tutorial can replicate, BibleThump"
+      },
+      {
+        "username": "SkepticalSara",
+        "text": "70s game understood desirable difficulties better than AI apps today, sad! PogChamp"
+      },
+      {
+        "username": "CasualObsvr",
+        "text": "i'd ask ChatGPT for optimal planting, then realize i cheated, lol"
+      },
+      {
+        "username": "FrictionFanatic",
+        "text": "cognitive muscle, every bushel count is a workout, 5Head"
+      },
+      {
+        "username": "GameDesignNerd",
+        "text": "no hand-holding, frustration = lesson, notice that? Kappa"
+      },
+      {
+        "username": "NostalgiaTrip",
+        "text": "playing as a kid taught me decisions have weight, can't replicate with AI, Pepega"
+      },
+      {
+        "username": "ThoughtfulTroll",
+        "text": "ancient Sumerian kings had it rough, no ChatGPT, lmao"
+      },
+      {
+        "username": "EduInnovator",
+        "text": "removing friction from learning tools is a mistake, struggle builds reasoning, no cap"
+      },
+      {
+        "username": "RandomRambler",
+        "text": "lack of polish makes it more engaging, imagine the consequences, Pog"
+      }
+    ]
+  },
+  {
+    "timestamp": 243,
+    "_internal_logic": "The video segment illustrates an interactive, effortful learning method where kids engage deeply with a crude macroeconomic model, validating the reference document's emphasis on friction and struggle as essential for learning. The simulation provides desirable difficulties through trial-and-error and emotional consequences (starvation), contrasting with frictionless AI tools that might short-circuit such deep engagement.",
+    "messages": [
+      {
+        "username": "EcoSimFanatic",
+        "text": "Lmao this is the effort paradox, bruh. Kids love the struggle"
+      },
+      {
+        "username": "FrictionMatters",
+        "text": "Desirable difficulties, no cap. Clunkiness is key"
+      },
+      {
+        "username": "LearnByDoing99",
+        "text": "When your village starves, that's the real learning. No AI can replicate that emotional sting, ngl"
+      },
+      {
+        "username": "OldSchoolEd",
+        "text": "PogChamp to this. Give kids consequences and they'll grind for hours, lol"
+      },
+      {
+        "username": "SkepticalBot",
+        "text": "But where's the line before it's too easy? Don't wanna make it a crutch, fr"
+      },
+      {
+        "username": "NeuroNerd42",
+        "text": "Research backs this up, btw. Struggle = deeper encoding. They'll remember that planting rule forever, MonkaS"
+      },
+      {
+        "username": "ChillPanda23",
+        "text": "lol imagine an AI just saying 'plant 100 units'. zero effort, zero retention, Pog"
+      },
+      {
+        "username": "HistoryBuff_01",
+        "text": "This is how we used to learn, through play and sim. Modern tools are robbing us of grit, no cap"
+      },
+      {
+        "username": "AI_Observer",
+        "text": "Fascinating contrast with AI tutoring. Genuine feedback loops > spoon-fed answers, 5Head"
+      },
+      {
+        "username": "EduRebel",
+        "text": "The 'crude' model makes them fill in gaps mentally. That's the friction we need, BibleThump"
+      },
+      {
+        "username": "DeepThinker2023",
+        "text": "Unintended consequences are the best teacher, imo. Hot village effect, anyone? Kappa"
+      },
+      {
+        "username": "SimulatedMind",
+        "text": "This predates AI hype, but proves the point: effortful problem-solving > shortcuts, Pepega"
+      },
+      {
+        "username": "ParentGamer",
+        "text": "I'd rather my kid fail and learn than get perfect grades with AI help, ngl. This segment is gold, Pog"
+      },
+      {
+        "username": "EconProf88",
+        "text": "Engagement born from friction, not AI. Notice he said 'they'll sit there for hours'? That's the power of struggle, LUL"
+      }
+    ]
+  },
+  {
+    "timestamp": 305,
+    "_internal_logic": "The video segment highlights the value of direct access to sources (books) but laments the inability to ask questions. This directly parallels the document's discussion on AI as an interactive intermediary that removes the friction of unanswered questions, but potentially undermines the deep learning that comes from struggling with static texts. The segment creates a tension: the desire for dialogue versus the benefits of solitary intellectual effort. Comments bridge this by reacting to AI as a solution to Aristotle's silence, while questioning whether that convenience erodes the 'desirable difficulties' of reading.",
+    "messages": [
+      {
+        "username": "CuriousCat99",
+        "text": "Lol, Aristotle on speed dial now! No cap, AI is a game changer"
+      },
+      {
+        "username": "DeepThinkr",
+        "text": "But what if the struggle is what makes it worth it? Ngl, instant answers are overrated"
+      },
+      {
+        "username": "FrictionFan",
+        "text": "PogChamp to that gap between you and the author! It's where the magic happens, bruh"
+      },
+      {
+        "username": "LazySloth",
+        "text": "I'm lowkey here for AI answering all my Qs. Less stress, more gain, lol"
+      },
+      {
+        "username": "OldSoul_Reader",
+        "text": "Books were pure, no filter. Now we're adding a middleman? Kappa"
+      },
+      {
+        "username": "NeuroNerd23",
+        "text": "Science says easy answers = shallow learning. That 'can't ask' might be a blessing in disguise, MonkaS"
+      },
+      {
+        "username": "PlatoStan",
+        "text": "Imagine being in Plato's dialogues, tho! AI could make it happen, but would it feel as rewarding? 5Head"
+      },
+      {
+        "username": "CypherPunk42",
+        "text": "Effort paradox, folks! We want it easy, but the struggle is what makes it real, no cap"
+      },
+      {
+        "username": "BookHoarder",
+        "text": "Books don't coddle you, they make you level up. AI might make it too easy, Pepega"
+      },
+      {
+        "username": "ZenMonk",
+        "text": "The silence after reading... that's where the growth happens. Immediate answers can be a distraction, BibleThump"
+      },
+      {
+        "username": "TechOptimist",
+        "text": "But think of all the people who don't have access to great teachers! AI could be a total game changer, Pog"
+      },
+      {
+        "username": "SocraticMethod",
+        "text": "The beauty is in the questions you ask yourself. AI answering them for you might kill that inner dialogue, LUL"
+      }
+    ]
+  },
+  {
+    "timestamp": 357,
+    "_internal_logic": "The segment's vision of using AI to simulate a deceased thinker's responses removes the inherent friction of loss and the effort of interpretation, directly contradicting the document's emphasis on the value of 'desirable difficulties' and the 'effort paradox.' The speaker's excitement overlooks how struggling with incomplete knowledge and absence might be essential to intellectual growth.",
+    "messages": [
+      {
+        "username": "DeepThink42",
+        "text": "lol no cap, using AI to simulate dead thinkers is cheating, fr"
+      },
+      {
+        "username": "CuriousCat",
+        "text": "this 'friction removal' is lowkey terrifying, ngl LUL"
+      },
+      {
+        "username": "BookwormBill",
+        "text": "PogChamp to the struggle of interpreting fragments, that's where the magic's at"
+      },
+      {
+        "username": "EffortParadoxFan",
+        "text": "doesn't the effort paradox say we value things more when we grind for them? instant answers = no thanks, bruh"
+      },
+      {
+        "username": "GhostOfSocrates",
+        "text": "give me the sweat and tears of reading primary texts any day, MonkaS"
+      },
+      {
+        "username": "LoneWolf99",
+        "text": "loneliness for a dead philosopher is weirdly poetic, tho... maybe that's what drives us to dig deeper"
+      },
+      {
+        "username": "SeanceSkeptic",
+        "text": "this digital seance is cool and all, but what if people stop reading the originals? Kappa"
+      },
+      {
+        "username": "NoPainNoGain",
+        "text": "no struggle, no deep understanding, period. 5Head"
+      },
+      {
+        "username": "JunkFoodMind",
+        "text": "intellectual junk food, anyone? easy to consume, but where's the substance? Pepega"
+      },
+      {
+        "username": "MessyWisdom",
+        "text": "what if the AI smooths away the good stuff? the messy bits are where it's at, BibleThump"
+      }
+    ]
+  },
+  {
+    "timestamp": 422,
+    "_internal_logic": "The speaker's motivation implicitly validates the document's emphasis on preserving beneficial friction and effort, as they are choosing a path that likely involves more struggle for meaningful outcomes.",
+    "messages": [
+      {
+        "username": "CuriousCat",
+        "text": "lol he's all about that struggle life 🔥"
+      },
+      {
+        "username": "DeepThinker42",
+        "text": "PogChamp keeping that friction alive is key"
+      },
+      {
+        "username": "EffortEnthusiast",
+        "text": "no cap, removing effort makes learning pointless fr"
+      },
+      {
+        "username": "FrictionFan",
+        "text": "yaaas desirable difficulties all the way 👍"
+      },
+      {
+        "username": "NoEasyPaths",
+        "text": "he's lowkey rejecting the easy path on purpose lol"
+      },
+      {
+        "username": "LonelySignal",
+        "text": "BibleThump loneliness is just a signal, not a bug"
+      },
+      {
+        "username": "ParadoxHunter",
+        "text": "it's all about the effort paradox, we need challenges ngl"
+      },
+      {
+        "username": "MeaningMaker",
+        "text": "so inspiring, pushing back against AI making everything too easy Pog"
+      },
+      {
+        "username": "SupplementorSub",
+        "text": "is he saying AI should be a supplement, not a substitute? 👀"
+      },
+      {
+        "username": "RecallRider",
+        "text": "LUL reminds me of how struggling leads to deeper retention"
+      },
+      {
+        "username": "GradSchoolGrind",
+        "text": "same, doing my PhD on this and his reasoning is spot on, no cap"
+      },
+      {
+        "username": "FrictionIsHuman",
+        "text": "friction is what makes life meaningful, bruh MonkaS"
+      }
+    ]
+  }
+]

theater_template.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReLiveStream Theater</title>
+  <!-- Google Fonts: Inter -->
+  <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 {
+      --bg-color: #0b0c10;
+      --panel-bg: rgba(22, 26, 35, 0.65);
+      --border-color: rgba(255, 255, 255, 0.08);
+      --accent-color: #7f5af0;
+      --accent-glow: rgba(127, 90, 240, 0.35);
+      --text-color: #fffffe;
+      --text-muted: #94a1b2;
+      --live-color: #ff0055;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      padding: 10px;
+    }
+
+    .theater-container {
+      display: grid;
+      grid-template-columns: 1.8fr 1fr;
+      width: 100%;
+      max-width: 1350px;
+      height: 90vh;
+      gap: 16px;
+      background: rgba(15, 15, 20, 0.4);
+      border-radius: 16px;
+      border: 1px solid var(--border-color);
+      padding: 16px;
+      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+    }
+
+    @media (max-width: 1024px) {
+      .theater-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        height: auto;
+        max-height: none;
+        overflow-y: auto;
+      }
+    }
+
+    /* Video section */
+    .video-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: #000;
+      border-radius: 12px;
+      border: 1px solid var(--border-color);
+      overflow: hidden;
+    }
+
+    .video-container {
+      position: relative;
+      width: 100%;
+      flex-grow: 1;
+      background: #000;
+    }
+
+    .video-container iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+
+    /* Chat section */
+    .chat-wrapper {
+      display: flex;
+      flex-direction: column;
+      background: var(--panel-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      height: 100%;
+      overflow: hidden;
+      box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
+    }
+
+    .chat-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border-color);
+      background: rgba(0,0,0,0.15);
+    }
+
+    .chat-title {
+      font-size: 14px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .live-dot {
+      width: 8px;
+      height: 8px;
+      background-color: var(--live-color);
+      border-radius: 50%;
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
+      70% { box-shadow: 0 0 0 6px rgba(255, 0, 85, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
+    }
+
+    .chat-messages {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      scroll-behavior: smooth;
+    }
+
+    /* Custom Scrollbar */
+    .chat-messages::-webkit-scrollbar {
+      width: 6px;
+    }
+    .chat-messages::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .chat-messages::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+    .chat-messages::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    /* Chat Messages styling */
+    .message-row {
+      display: flex;
+      flex-direction: column;
+      padding: 6px 8px;
+      background: rgba(255,255,255,0.02);
+      border-radius: 6px;
+      border-left: 3px solid transparent;
+      transition: background 0.2s ease;
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    .message-row:hover {
+      background: rgba(255, 255, 255, 0.05);
+      border-left-color: var(--accent-color);
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .message-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+
+    .message-time {
+      font-size: 11px;
+      color: var(--text-muted);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .message-username {
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .badge {
+      font-size: 9px;
+      font-weight: 700;
+      text-transform: uppercase;
+      padding: 1px 4px;
+      border-radius: 3px;
+      letter-spacing: 0.5px;
+    }
+
+    .badge-mod {
+      background: #2cb67d;
+      color: #fff;
+    }
+
+    .badge-sub {
+      background: var(--accent-color);
+      color: #fff;
+    }
+
+    .message-text {
+      font-size: 13px;
+      line-height: 1.5;
+      color: #e2e8f0;
+      word-break: break-word;
+    }
+
+    /* Styled Emotes */
+    .emote {
+      display: inline-block;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 700;
+      background: rgba(255,255,255,0.1);
+      margin: 0 2px;
+      border: 1px solid rgba(255,255,255,0.1);
+    }
+
+    .emote.pogchamp { color: #ffbe0b; background: rgba(255, 190, 11, 0.1); }
+    .emote.kappa { color: #a2d2ff; background: rgba(162, 210, 255, 0.1); }
+    .emote.monkas { color: #ff006e; background: rgba(255, 0, 110, 0.1); }
+    .emote.lul { color: #3a86c8; background: rgba(58, 134, 200, 0.1); }
+    .emote.biblethump { color: #8338ec; background: rgba(131, 56, 236, 0.1); }
+    .emote.head5 { color: #06d6a0; background: rgba(6, 214, 160, 0.1); }
+    .emote.pog { color: #ffd166; background: rgba(255, 209, 102, 0.1); }
+    .emote.pepega { color: #ef476f; background: rgba(239, 71, 111, 0.1); }
+
+    .chat-bottom {
+      padding: 14px 18px;
+      border-top: 1px solid var(--border-color);
+      background: rgba(0,0,0,0.15);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .chat-input-placeholder {
+      flex-grow: 1;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 8px 12px;
+      font-size: 13px;
+      color: var(--text-muted);
+      user-select: none;
+    }
+
+    .chat-btn {
+      background: var(--accent-color);
+      color: #fff;
+      border: 0;
+      border-radius: 6px;
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="theater-container">
+    <!-- Left: Video Player -->
+    <div class="video-wrapper">
+      <div class="video-container">
+        <div id="player"></div>
+      </div>
+    </div>
+
+    <!-- Right: Chat Window -->
+    <div class="chat-wrapper">
+      <div class="chat-header">
+        <div class="chat-title">
+          <div class="live-dot"></div>
+          <span>Live Chat Replay</span>
+        </div>
+        <div class="message-time" id="video-time-display">00:00</div>
+      </div>
+      
+      <div class="chat-messages" id="chat-messages">
+        <!-- Messages stream in here -->
+      </div>
+
+      <div class="chat-bottom">
+        <div class="chat-input-placeholder">Simulated replay - chat is read-only</div>
+        <button class="chat-btn" disabled>Send</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- YouTube IFrame API -->
+  <script src="https://www.youtube.com/iframe_api"></script>
+  
+  <script>
+    // Embedded Chat Data Placeholder (Replaced by Python script)
+    const chatData = {{CHAT_DATA_JSON}};
+    const videoId = "{{VIDEO_ID}}";
+    
+    let player;
+    let updateInterval;
+    let lastTime = -1;
+    let displayedMessageIds = new Set();
+    let flattenedMessages = [];
+
+    // Emote tags matching
+    const emoteMap = {
+      "PogChamp": "😲 PogChamp",
+      "Kappa": "😏 Kappa",
+      "MonkaS": "😰 MonkaS",
+      "LUL": "😂 LUL",
+      "BibleThump": "😭 BibleThump",
+      "5Head": "🧠 5Head",
+      "Pog": "🤩 Pog",
+      "Pepega": "🤪 Pepega"
+    };
+
+    function parseEmotes(text) {
+      let html = text;
+      // Escape HTML
+      html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      
+      Object.keys(emoteMap).forEach(key => {
+        const regex = new RegExp(`\\b${key}\\b`, 'g');
+        const className = key.toLowerCase();
+        html = html.replace(regex, `<span class="emote ${className}">${emoteMap[key]}</span>`);
+      });
+      return html;
+    }
+
+    // Assign randomized usernames color based on hash
+    function getUsernameColor(username) {
+      const colors = ['#ff7096', '#ff85a1', '#f15bb5', '#9b5de5', '#00bbf9', '#00f5d4', '#fee440', '#f15bb5', '#38b000', '#0077b6', '#e07a5f', '#f4a261', '#e76f51', '#2ec4b6', '#e63946'];
+      let hash = 0;
+      for (let i = 0; i < username.length; i++) {
+        hash = username.charCodeAt(i) + ((hash << 5) - hash);
+      }
+      const index = Math.abs(hash) % colors.length;
+      return colors[index];
+    }
+
+    // Prep and flatten messages with random offsets within segment durations
+    function prepareMessages() {
+      flattenedMessages = [];
+      
+      for (let i = 0; i < chatData.length; i++) {
+        const segment = chatData[i];
+        const start = segment.timestamp;
+        
+        // Find next segment timestamp to determine segment duration
+        const nextStart = (i < chatData.length - 1) ? chatData[i+1].timestamp : start + 30;
+        const duration = Math.max(5, nextStart - start);
+        
+        const messages = segment.messages || [];
+        messages.forEach((msg, index) => {
+          // Spread messages evenly or randomly across the duration
+          const randomOffset = Math.random() * duration;
+          const displayTime = start + randomOffset;
+          
+          // Generate unique ID
+          const id = `${start}_${index}_${msg.username}`;
+          
+          // Assign visual badges
+          const isMod = (index % 15 === 0);
+          const isSub = (index % 4 === 0) && !isMod;
+          
+          flattenedMessages.push({
+            id: id,
+            displayTime: displayTime,
+            username: msg.username,
+            text: msg.text,
+            isMod: isMod,
+            isSub: isSub
+          });
+        });
+      }
+      
+      // Sort messages by displayTime
+      flattenedMessages.sort((a, b) => a.displayTime - b.displayTime);
+    }
+
+    // Create HTML elements for messages
+    function createMessageElement(msg) {
+      const row = document.createElement('div');
+      row.className = 'message-row';
+      
+      const meta = document.createElement('div');
+      meta.className = 'message-meta';
+      
+      const timeSpan = document.createElement('span');
+      timeSpan.className = 'message-time';
+      const mins = Math.floor(msg.displayTime / 60);
+      const secs = Math.floor(msg.displayTime % 60);
+      timeSpan.textContent = `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+      meta.appendChild(timeSpan);
+      
+      if (msg.isMod) {
+        const badge = document.createElement('span');
+        badge.className = 'badge badge-mod';
+        badge.textContent = 'Mod';
+        meta.appendChild(badge);
+      } else if (msg.isSub) {
+        const badge = document.createElement('span');
+        badge.className = 'badge badge-sub';
+        badge.textContent = 'Sub';
+        meta.appendChild(badge);
+      }
+      
+      const userSpan = document.createElement('span');
+      userSpan.className = 'message-username';
+      userSpan.style.color = getUsernameColor(msg.username);
+      userSpan.textContent = msg.username;
+      meta.appendChild(userSpan);
+      
+      row.appendChild(meta);
+      
+      const textDiv = document.createElement('div');
+      textDiv.className = 'message-text';
+      textDiv.innerHTML = parseEmotes(msg.text);
+      row.appendChild(textDiv);
+      
+      return row;
+    }
+
+    // Synchronize chat with video current time
+    function updateChat() {
+      if (!player || typeof player.getCurrentTime !== 'function') return;
+      
+      const currentTime = player.getCurrentTime();
+      
+      // Update timer display
+      const displayMins = Math.floor(currentTime / 60);
+      const displaySecs = Math.floor(currentTime % 60);
+      document.getElementById('video-time-display').textContent = 
+        `${displayMins.toString().padStart(2, '0')}:${displaySecs.toString().padStart(2, '0')}`;
+      
+      // Handle seek backwards or forwards significantly
+      if (currentTime < lastTime || currentTime - lastTime > 6) {
+        const chatMessagesDiv = document.getElementById('chat-messages');
+        chatMessagesDiv.innerHTML = '';
+        displayedMessageIds.clear();
+        
+        // Catch up with messages immediately prior to seek point (max 12 messages to prevent overload)
+        const pastMessages = flattenedMessages.filter(m => m.displayTime <= currentTime);
+        const catchupCount = 12;
+        const startIdx = Math.max(0, pastMessages.length - catchupCount);
+        const toRender = pastMessages.slice(startIdx);
+        
+        toRender.forEach(m => {
+          displayedMessageIds.add(m.id);
+          chatMessagesDiv.appendChild(createMessageElement(m));
+        });
+        chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
+      }
+      
+      lastTime = currentTime;
+      
+      // Filter new messages to display
+      const newMessages = flattenedMessages.filter(m => m.displayTime <= currentTime && !displayedMessageIds.has(m.id));
+      
+      if (newMessages.length > 0) {
+        const chatMessagesDiv = document.getElementById('chat-messages');
+        newMessages.forEach(m => {
+          displayedMessageIds.add(m.id);
+          chatMessagesDiv.appendChild(createMessageElement(m));
+        });
+        
+        // Keep list to a reasonable limit (e.g. 100 elements max to maintain DOM performance)
+        while (chatMessagesDiv.children.length > 100) {
+          chatMessagesDiv.removeChild(chatMessagesDiv.firstChild);
+        }
+        
+        chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
+      }
+    }
+
+    // YouTube IFrame Player API initialization
+    function onYouTubeIframeAPIReady() {
+      player = new YT.Player('player', {
+        height: '100%',
+        width: '100%',
+        videoId: videoId,
+        playerVars: {
+          'playsinline': 1,
+          'modestbranding': 1,
+          'rel': 0
+        },
+        events: {
+          'onStateChange': onPlayerStateChange
+        }
+      });
+    }
+
+    function onPlayerStateChange(event) {
+      if (event.data === YT.PlayerState.PLAYING) {
+        if (!updateInterval) {
+          updateInterval = setInterval(updateChat, 250);
+        }
+      } else {
+        if (updateInterval) {
+          clearInterval(updateInterval);
+          updateInterval = null;
+        }
+        // Run one final update to align timestamps
+        updateChat();
+      }
+    }
+
+    // Initialize
+    prepareMessages();
+  </script>
+</body>
+</html>