spaces

README.md

@@ -5,11 +5,11 @@ colorFrom: blue
 colorTo: purple
 sdk: gradio
 pinned: false
-app: main.py
+app: app.py
 ---
 ## Visual Novel Demo
-
-Run `python main.py` (or `uv run python main.py` if you prefer `uv`) to launch a Gradio-powered visual novel sandbox.
+- Install `uv`
+- Run `uv run python app.py`.
 
 ### Features
 - Register characters with sprite URLs or inline SVG data-URIs (see `create_sprite_data_url`).

main.py

@@ -1,1448 +0,0 @@
-"""Visual Novel Gradio App - Main application with UI and handlers."""
-
-from __future__ import annotations
-
-import os
-import urllib.parse
-import numpy as np
-from typing import Optional
-
-import gradio as gr
-from fastrtc import WebRTC
-from fastapi import FastAPI
-from fastapi.staticfiles import StaticFiles
-
-from engine import SceneState, POSITION_OFFSETS, Choice, InputRequest
-from story import build_sample_story
-
-
-def passthrough_stream(frame):
-    """Return the incoming frame untouched so the user sees their feed."""
-    return frame
-
-
-def camera_hint_text(show_camera: bool) -> str:
-    if show_camera:
-        return "🎥 Webcam overlay is active for this scene."
-    return "🕹️ Webcam is hidden for this scene."
-
-
-def voice_hint_text(show_voice: bool) -> str:
-    if show_voice:
-        return "🎤 Voice capture is available in this scene."
-    return "🔇 Voice capture is hidden for this scene."
-
-
-def motor_hint_text(show_motors: bool) -> str:
-    if show_motors:
-        return "🤖 Motor control is available in this scene."
-    return "🛑 Motor control hidden for this scene."
-
-
-def robot_hint_text(show_robot: bool) -> str:
-    if show_robot:
-        return "🤖 Robot control is available in this scene."
-    return "🔒 Robot control hidden for this scene."
-
-
-# Dynamixel control functions using Python protocol implementation
-def dxl_build_ping_packet(motor_id: int) -> list[int]:
-    """Build a ping packet and return as list of bytes."""
-    import dynamixel
-    packet = dynamixel.ping_packet(motor_id)
-    return list(packet)
-
-
-def dxl_build_torque_packet(motor_id: int, enable: bool) -> list[int]:
-    """Build a torque enable/disable packet and return as list of bytes."""
-    import dynamixel
-    packet = dynamixel.torque_enable_packet(motor_id, enable)
-    return list(packet)
-
-
-def dxl_build_goal_position_packet(motor_id: int, degrees: float) -> list[int]:
-    """Build a goal position packet and return as list of bytes."""
-    import dynamixel
-    # Convert degrees to ticks (0-360° -> 0-4095)
-    clamped_deg = max(0.0, min(360.0, degrees))
-    ticks = int((clamped_deg / 360.0) * 4095)
-    packet = dynamixel.goal_position_packet(motor_id, ticks)
-    return list(packet)
-
-
-def dxl_parse_response(response_bytes: list[int]) -> str:
-    """Parse a status packet response and return human-readable result."""
-    import dynamixel
-    if not response_bytes:
-        return "❌ No response received"
-    success, message = dynamixel.parse_status_packet(bytes(response_bytes))
-    if success:
-        return f"✅ {message}"
-    else:
-        return f"❌ {message}"
-
-
-def get_scene_motor_packets(story_state: dict) -> list:
-    """Extract motor commands from current scene and build packets."""
-    scenes = story_state["scenes"]
-    current_index = story_state["index"]
-    if 0 <= current_index < len(scenes):
-        scene = scenes[current_index]
-        # Build packet for each motor command
-        packets = []
-        for cmd in scene.motor_commands:
-            packet = dxl_build_goal_position_packet(cmd.motor_id, cmd.position)
-            packets.append(packet)
-        return packets
-    return []
-
-
-def get_scene_audio(story_state: dict) -> Optional[str]:
-    """Extract audio file from current scene."""
-    scenes = story_state["scenes"]
-    current_index = story_state["index"]
-    if 0 <= current_index < len(scenes):
-        scene = scenes[current_index]
-        return scene.audio_file
-    return None
-
-
-def get_scene_robot_pose(story_state: dict) -> Optional[dict]:
-    """Extract robot pose from current scene."""
-    scenes = story_state["scenes"]
-    current_index = story_state["index"]
-    if 0 <= current_index < len(scenes):
-        scene = scenes[current_index]
-        if scene.robot_pose:
-            return {
-                "target_head_pose": {
-                    "x": scene.robot_pose.head_x,
-                    "y": scene.robot_pose.head_y,
-                    "z": scene.robot_pose.head_z,
-                    "roll": scene.robot_pose.head_roll,
-                    "pitch": scene.robot_pose.head_pitch,
-                    "yaw": scene.robot_pose.head_yaw,
-                },
-                "target_body_yaw": scene.robot_pose.body_yaw,
-                "target_antennas": [scene.robot_pose.antenna_left, scene.robot_pose.antenna_right],
-            }
-    return None
-
-
-def synthesize_tone(sample_rate: int = 16000, duration: float = 1.25) -> tuple[int, np.ndarray]:
-    """Generate a short confirmation tone to play back as the AI voice."""
-    samples = np.linspace(0, duration, int(sample_rate * duration), endpoint=False)
-    carrier = np.sin(2 * np.pi * 520 * samples) + 0.4 * np.sin(2 * np.pi * 880 * samples)
-    fade_len = int(sample_rate * 0.08)
-    envelope = np.ones_like(carrier)
-    envelope[:fade_len] *= np.linspace(0.0, 1.0, fade_len)
-    envelope[-fade_len:] *= np.linspace(1.0, 0.0, fade_len)
-    tone = 0.18 * carrier * envelope
-    return sample_rate, tone.astype(np.float32)
-
-
-def describe_audio_clip(audio: Optional[tuple[int, np.ndarray]]) -> str:
-    if audio is None:
-        return "No audio captured yet. Hit record to speak with the companion."
-    sample_rate, samples = audio
-    num_samples = len(samples) if samples is not None else 0
-    if num_samples == 0:
-        return "Audio appears empty. Please re-record."
-    duration = num_samples / float(sample_rate or 1)
-    rms = float(np.sqrt(np.mean(np.square(samples))))
-    return f"Captured {duration:.2f}s of audio (RMS ~{rms:.3f}). Ready for the AI."
-
-
-def process_voice_interaction(
-    audio: Optional[tuple[int, np.ndarray]], prompt: str
-) -> tuple[str, Optional[tuple[int, np.ndarray]], str, tuple[int, np.ndarray]]:
-    summary = describe_audio_clip(audio)
-    user_prompt = (prompt or "React to the current scene.").strip()
-    if audio is None:
-        ai_line = (
-            "AI response pending: record or upload an audio clip so the agent can react."
-        )
-        response_audio = synthesize_tone()
-        return summary, None, ai_line, response_audio
-    ai_line = (
-        "Imaginary AI companion: I'm using your latest microphone input "
-        f"and the prompt \"{user_prompt}\" to craft a response."
-    )
-    response_audio = synthesize_tone()
-    return summary, audio, ai_line, response_audio
-
-
-def render_scene(
-    scene: SceneState, index: int, total: int, variables: dict
-) -> tuple[str, str, str, bool, bool, bool, bool, Optional[List[Choice]], Optional[InputRequest]]:
-    """Generate the HTML stage, dialogue text, and metadata."""
-    char_layers = []
-    for sprite in scene.characters.values():
-        if not sprite.visible:
-            continue
-        offset = POSITION_OFFSETS.get(sprite.position, "50%")
-        # Build class names with animation
-        class_names = "character"
-        if sprite.animation:
-            class_names += f" anim-{sprite.animation}"
-        # Apply scale using CSS variable (so animations can use it)
-        char_layers.append(
-            f"""
-            <div class="{class_names}" style="
-                left:{offset};
-                background-image:url('{sprite.image_url}');
-                --char-scale:{sprite.scale};
-            " title="{sprite.name}"></div>
-            """
-        )
-    dialogue_markdown = (
-        "" if scene.text else ""
-    )  # Avoid duplicating the speech bubble content below the stage.
-    metadata = f"{scene.background_label or 'Scene'} · {index + 1} / {total}"
-    bubble_html = ""
-    text_content = (scene.text or "").strip()
-
-    # Substitute variables in text (e.g., {player_name})
-    for var_name, var_value in variables.items():
-        text_content = text_content.replace(f"{{{var_name}}}", str(var_value))
-
-    if text_content:
-        speaker_html = (
-            f'<div class="bubble-speaker">{scene.speaker}</div>'
-            if scene.speaker
-            else ""
-        )
-        bubble_html = f"""
-            <div class="speech-bubble">
-                {speaker_html}
-                <div class="bubble-text">{text_content}</div>
-            </div>
-        """
-    # Apply blur filters to background and stage
-    bg_blur_style = f"filter: blur({scene.background_blur}px);" if scene.background_blur > 0 else ""
-    stage_blur_style = f"filter: blur({scene.stage_blur}px);" if scene.stage_blur > 0 else ""
-
-    # Build stage layer HTML if stage image is set
-    stage_layer_html = ""
-    if scene.stage_url:
-        stage_layer_html = f'<div class="stage-layer" style="background-image:url(\'{scene.stage_url}\'); {stage_blur_style}"></div>'
-
-    stage_html = f"""
-        <div class="stage">
-            <div class="stage-background" style="background-image:url('{scene.background_url}'); {bg_blur_style}"></div>
-            {stage_layer_html}
-            {''.join(char_layers)}
-            {bubble_html}
-        </div>
-    """
-    return (
-        stage_html,
-        dialogue_markdown,
-        metadata,
-        scene.show_camera,
-        scene.show_voice,
-        scene.show_motors,
-        scene.show_robot,
-        scene.choices,
-        scene.input_request,
-    )
-
-
-def is_scene_accessible(scene: SceneState, active_paths: set) -> bool:
-    """Check if a scene is accessible given the active story paths."""
-    # Scenes with no path are always accessible (main path)
-    if scene.path is None:
-        return True
-    # Scenes with a specific path are only accessible if that path is active
-    return scene.path in active_paths
-
-
-def change_scene(
-    story_state: dict, direction: int
-) -> tuple[dict, str, str, str, str, dict, str, dict, str, dict, str, dict, dict, str, dict, dict, dict, dict]:
-    scenes: List[SceneState] = story_state["scenes"]
-    variables = story_state.get("variables", {})
-    active_paths = story_state.get("active_paths", set())
-
-    if not scenes:
-        return (
-            story_state,
-            "",
-            "No scenes available.",
-            "",
-            camera_hint_text(False),
-            gr.update(visible=False),
-            voice_hint_text(False),
-            gr.update(visible=False),
-            motor_hint_text(False),
-            gr.update(visible=False),
-            robot_hint_text(False),
-            gr.update(visible=False),
-            gr.update(visible=False, choices=[]),
-            gr.update(visible=False),
-            gr.update(interactive=True),
-            gr.update(interactive=True),
-            gr.update(visible=False),  # right_column
-        )
-
-    total = len(scenes)
-    current_index = story_state["index"]
-
-    # Find the next accessible scene in the given direction
-    new_index = current_index
-    search_index = current_index + direction
-
-    while 0 <= search_index < total:
-        if is_scene_accessible(scenes[search_index], active_paths):
-            new_index = search_index
-            break
-        search_index += direction
-
-    story_state["index"] = new_index
-    html, dialogue, meta, show_camera, show_voice, show_motors, show_robot, choices, input_req = render_scene(
-        scenes[story_state["index"]], story_state["index"], total, variables
-    )
-
-    # Disable navigation when choices or input are present
-    nav_enabled = not bool(choices) and not bool(input_req)
-
-    # Show right column if any feature is active
-    right_column_visible = show_camera or show_voice or show_motors or show_robot
-
-    return (
-        story_state,
-        html,
-        dialogue,
-        meta,
-        camera_hint_text(show_camera),
-        gr.update(visible=show_camera),
-        voice_hint_text(show_voice),
-        gr.update(visible=show_voice),
-        motor_hint_text(show_motors),
-        gr.update(visible=show_motors),
-        robot_hint_text(show_robot),
-        gr.update(visible=show_robot),
-        gr.update(visible=bool(choices), choices=[(c.text, i) for i, c in enumerate(choices)] if choices else [], value=None),
-        f"### {input_req.prompt}" if input_req else "",
-        gr.update(visible=bool(input_req)),
-        gr.update(interactive=nav_enabled),
-        gr.update(interactive=nav_enabled),
-        gr.update(visible=right_column_visible),  # right_column
-    )
-
-
-def handle_choice(story_state: dict, choice_index: int) -> tuple[dict, str, str, str, str, dict, str, dict, str, dict, str, dict, dict, str, dict, dict, dict, dict]:
-    """Navigate to the scene selected by the choice."""
-    scenes: List[SceneState] = story_state["scenes"]
-    variables = story_state.get("variables", {})
-    active_paths = story_state.get("active_paths", set())
-    current_scene = scenes[story_state["index"]]
-
-    if current_scene.choices and 0 <= choice_index < len(current_scene.choices):
-        chosen = current_scene.choices[choice_index]
-        story_state["index"] = chosen.next_scene_index
-
-        # Activate the path of the chosen scene
-        target_scene = scenes[chosen.next_scene_index]
-        if target_scene.path:
-            active_paths = set(active_paths)  # Copy the set
-            active_paths.add(target_scene.path)
-            story_state["active_paths"] = active_paths
-
-        html, dialogue, meta, show_camera, show_voice, show_motors, show_robot, choices, input_req = render_scene(
-            scenes[story_state["index"]], story_state["index"], len(scenes), variables
-        )
-
-        nav_enabled = not bool(choices) and not bool(input_req)
-        right_column_visible = show_camera or show_voice or show_motors or show_robot
-
-        return (
-            story_state,
-            html,
-            dialogue,
-            meta,
-            camera_hint_text(show_camera),
-            gr.update(visible=show_camera),
-            voice_hint_text(show_voice),
-            gr.update(visible=show_voice),
-            motor_hint_text(show_motors),
-            gr.update(visible=show_motors),
-            robot_hint_text(show_robot),
-            gr.update(visible=show_robot),
-            gr.update(visible=bool(choices), choices=[(c.text, i) for i, c in enumerate(choices)] if choices else [], value=None),
-            f"### {input_req.prompt}" if input_req else "",
-            gr.update(visible=bool(input_req)),
-            gr.update(interactive=nav_enabled),
-            gr.update(interactive=nav_enabled),
-            gr.update(visible=right_column_visible),  # right_column
-        )
-    return change_scene(story_state, 0)
-
-
-def handle_input(story_state: dict, user_input: str) -> tuple[dict, str, str, str, str, dict, str, dict, str, dict, str, dict, dict, str, dict, dict, dict, dict]:
-    """Store user input and advance to next scene."""
-    scenes: List[SceneState] = story_state["scenes"]
-    variables = story_state.get("variables", {})
-    current_scene = scenes[story_state["index"]]
-
-    if current_scene.input_request and user_input:
-        variables[current_scene.input_request.variable_name] = user_input
-        story_state["variables"] = variables
-
-    # Advance to next scene
-    story_state["index"] = min(story_state["index"] + 1, len(scenes) - 1)
-
-    html, dialogue, meta, show_camera, show_voice, show_motors, show_robot, choices, input_req = render_scene(
-        scenes[story_state["index"]], story_state["index"], len(scenes), variables
-    )
-
-    nav_enabled = not bool(choices) and not bool(input_req)
-    right_column_visible = show_camera or show_voice or show_motors or show_robot
-
-    return (
-        story_state,
-        html,
-        dialogue,
-        meta,
-        camera_hint_text(show_camera),
-        gr.update(visible=show_camera),
-        voice_hint_text(show_voice),
-        gr.update(visible=show_voice),
-        motor_hint_text(show_motors),
-        gr.update(visible=show_motors),
-        robot_hint_text(show_robot),
-        gr.update(visible=show_robot),
-        gr.update(visible=bool(choices), choices=[(c.text, i) for i, c in enumerate(choices)] if choices else [], value=None),
-        f"### {input_req.prompt}" if input_req else "",
-        gr.update(visible=bool(input_req)),
-        gr.update(interactive=nav_enabled),
-        gr.update(interactive=nav_enabled),
-        gr.update(visible=right_column_visible),  # right_column
-    )
-
-
-def load_initial_state() -> tuple[dict, str, str, str, str, dict, str, dict, str, dict, str, dict, dict, str, dict, dict, dict, dict]:
-    scenes = build_sample_story()
-    story_state = {"scenes": scenes, "index": 0, "variables": {}, "active_paths": set()}
-    if scenes:
-        html, dialogue, meta, show_camera, show_voice, show_motors, show_robot, choices, input_req = render_scene(
-            scenes[0], 0, len(scenes), {}
-        )
-    else:
-        html, dialogue, meta, show_camera, show_voice, show_motors, show_robot, choices, input_req = (
-            "",
-            "No scenes available.",
-            "",
-            False,
-            False,
-            False,
-            False,
-            None,
-            None,
-        )
-
-    nav_enabled = not bool(choices) and not bool(input_req)
-    right_column_visible = show_camera or show_voice or show_motors or show_robot
-
-    return (
-        story_state,
-        html,
-        dialogue,
-        meta,
-        camera_hint_text(show_camera),
-        gr.update(visible=show_camera),
-        voice_hint_text(show_voice),
-        gr.update(visible=show_voice),
-        motor_hint_text(show_motors),
-        gr.update(visible=show_motors),
-        robot_hint_text(show_robot),
-        gr.update(visible=show_robot),
-        gr.update(visible=bool(choices), choices=[(c.text, i) for i, c in enumerate(choices)] if choices else [], value=None),
-        f"### {input_req.prompt}" if input_req else "",
-        gr.update(visible=bool(input_req)),
-        gr.update(interactive=nav_enabled),
-        gr.update(interactive=nav_enabled),
-        gr.update(visible=right_column_visible),  # right_column
-    )
-
-
-CUSTOM_CSS = """
-/* Override Gradio's height constraints for stage container */
-#stage-container {
-    height: auto !important;
-    max-height: none !important;
-}
-#stage-container > div {
-    height: auto !important;
-}
-.stage {
-    width: 100%;
-    height: 80vh;
-    min-height: 600px;
-    border-radius: 0;
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 12px 32px rgba(15,23,42,0.45);
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-}
-/* Ensure background layers fill the stage */
-.stage-background,
-.stage-layer {
-    max-height: none !important;
-}
-.stage-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 0;
-}
-.stage-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 5;
-}
-.character {
-    position: absolute;
-    bottom: 0;
-    width: 200px;
-    height: 380px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    --char-scale: 1.0;
-    transform: translateX(-50%) scale(var(--char-scale));
-    transition: transform 0.4s ease;
-    z-index: 10;
-}
-/* Character animations */
-.character.anim-idle {
-    animation: anim-idle 4s ease-in-out infinite;
-}
-.character.anim-shake {
-    animation: anim-shake 0.5s ease-in-out;
-}
-.character.anim-bounce {
-    animation: anim-bounce 0.6s ease-in-out;
-}
-.character.anim-pulse {
-    animation: anim-pulse 1s ease-in-out infinite;
-}
-.speech-bubble {
-    position: absolute;
-    bottom: 18px;
-    left: 50%;
-    transform: translateX(-50%);
-    min-width: 60%;
-    max-width: 90%;
-    padding: 20px 24px;
-    border-radius: 20px;
-    background: rgba(15,23,42,0.88);
-    color: #f8fafc;
-    font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
-    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
-    z-index: 20;
-}
-.speech-bubble::after {
-    content: "";
-    position: absolute;
-    bottom: -16px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 16px 12px 0 12px;
-    border-style: solid;
-    border-color: rgba(15,23,42,0.88) transparent transparent transparent;
-}
-.bubble-speaker {
-    font-size: 0.85rem;
-    letter-spacing: 0.08em;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: #facc15;
-    margin-bottom: 6px;
-}
-.bubble-text {
-    font-size: 1.05rem;
-    line-height: 1.5;
-}
-.camera-column {
-    position: relative;
-    min-height: 360px;
-    gap: 0.75rem;
-}
-.camera-hint {
-    font-size: 0.85rem;
-    color: #cbd5f5;
-    margin-bottom: 0.4rem;
-}
-#camera-wrapper {
-    width: 100%;
-    max-width: 320px;
-}
-#camera-wrapper > div {
-    border-radius: 18px;
-    background: rgba(15,23,42,0.88);
-    padding: 6px;
-    box-shadow: 0 12px 26px rgba(15,23,42,0.55);
-}
-#camera-wrapper video {
-    border-radius: 14px;
-    object-fit: cover;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
-}
-.dxl-card {
-    margin-top: 0.5rem;
-    padding: 1rem 1.2rem;
-    border-radius: 14px;
-    background: rgba(15,23,42,0.85);
-    color: #e2e8f0;
-    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
-}
-.dxl-card h3 {
-    margin: 0 0 0.35rem 0;
-}
-.dxl-row {
-    display: flex;
-    gap: 0.6rem;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    flex-wrap: wrap;
-}
-.dxl-row label {
-    font-size: 0.9rem;
-    color: #cbd5e1;
-}
-.dxl-row input[type="number"],
-.dxl-row select,
-.dxl-row input[type="range"] {
-    flex: 1;
-    min-width: 120px;
-}
-.dxl-btn {
-    padding: 0.5rem 0.8rem;
-    border-radius: 10px;
-    border: 1px solid rgba(148,163,184,0.4);
-    background: rgba(255,255,255,0.05);
-    color: #e2e8f0;
-    cursor: pointer;
-    transition: transform 0.1s ease, background 0.15s ease;
-}
-.dxl-btn.primary {
-    background: linear-gradient(120deg, #06b6d4, #2563eb);
-    border-color: rgba(59,130,246,0.5);
-}
-.dxl-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.dxl-btn:not(:disabled):hover {
-    transform: translateY(-1px);
-}
-.dxl-status {
-    font-size: 0.9rem;
-    color: #a5b4fc;
-    min-height: 1.2rem;
-}
-.input-prompt {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #1e293b;
-    margin-bottom: 0.5rem;
-}
-@keyframes anim-idle {
-    0% { transform: translate(-50%, 0px) scale(var(--char-scale)); }
-    50% { transform: translate(-50%, 12px) scale(var(--char-scale)); }
-    100% { transform: translate(-50%, 0px) scale(var(--char-scale)); }
-}
-@keyframes anim-shake {
-    0%, 100% { transform: translate(-50%, 0) rotate(0deg) scale(var(--char-scale)); }
-    10%, 30%, 50%, 70%, 90% { transform: translate(-52%, 0) rotate(-2deg) scale(var(--char-scale)); }
-    20%, 40%, 60%, 80% { transform: translate(-48%, 0) rotate(2deg) scale(var(--char-scale)); }
-}
-@keyframes anim-bounce {
-    0%, 100% { transform: translate(-50%, 0) scale(var(--char-scale)); }
-    25% { transform: translate(-50%, -30px) scale(var(--char-scale)); }
-    50% { transform: translate(-50%, 0) scale(var(--char-scale)); }
-    75% { transform: translate(-50%, -15px) scale(var(--char-scale)); }
-}
-@keyframes anim-pulse {
-    0%, 100% { transform: translate(-50%, 0) scale(var(--char-scale)); }
-    50% { transform: translate(-50%, 0) scale(calc(var(--char-scale) * 1.05)); }
-}
-"""
-
-ENUMERATE_CAMERAS_JS = """
-async (currentDevices) => {
-    if (!navigator.mediaDevices?.enumerateDevices) {
-        return currentDevices || [];
-    }
-    try {
-        const devices = await navigator.mediaDevices.enumerateDevices();
-        return devices
-            .filter((device) => device.kind === "videoinput")
-            .map((device, index) => ({
-                label: device.label || `Camera ${index + 1}`,
-                deviceId: device.deviceId || null,
-            }));
-    } catch (error) {
-        console.warn("enumerateDevices failed", error);
-        return currentDevices || [];
-    }
-}
-"""
-
-def load_dxl_script_js() -> str:
-    """Generate JavaScript to dynamically load the DXL script from static files."""
-    import time
-    timestamp = int(time.time())
-    return f"""
-() => {{
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = '/web/dxl_webserial.js?v={timestamp}';
-    script.onerror = () => console.error("[DXL] Failed to load motor control script");
-    document.head.appendChild(script);
-}}
-"""
-
-
-def dxl_send_and_receive_js() -> str:
-    """JavaScript to send packet bytes and receive response via Web Serial."""
-    return """
-async (packet_bytes) => {
-    // Check if dxlSerial is available and connected
-    if (typeof window.dxlSerial === 'undefined' || !window.dxlSerial) {
-        console.error("[DXL] Serial not available - connect first");
-        return [];
-    }
-
-    if (!window.dxlSerial.connected) {
-        console.error("[DXL] Not connected to serial port");
-        return [];
-    }
-
-    try {
-        await window.dxlSerial.writeBytes(packet_bytes);
-        const response = await window.dxlSerial.readPacket(800);
-        return response;
-    } catch (err) {
-        console.error("[DXL] Communication error:", err.message);
-        return [];
-    }
-}
-"""
-
-
-def execute_motor_packets_js() -> str:
-    """JavaScript to execute pre-built motor packets."""
-    return """
-async (packets) => {
-    if (!packets || packets.length === 0) {
-        return;  // No packets to execute
-    }
-
-    // Check if serial is available
-    if (typeof window.dxlSerial === 'undefined' || !window.dxlSerial || !window.dxlSerial.connected) {
-        return;  // Silently skip if not connected
-    }
-
-    // Execute each packet sequentially
-    for (const pkt of packets) {
-        try {
-            await window.dxlSerial.writeBytes(pkt);
-            await window.dxlSerial.readPacket(800);
-        } catch (err) {
-            console.error(`[Motors] Error:`, err.message);
-        }
-    }
-}
-"""
-
-
-def play_scene_audio_js() -> str:
-    """JavaScript to play audio file."""
-    return """
-(audio_path) => {
-    if (!audio_path || audio_path === '') {
-        return;  // No audio to play
-    }
-
-    // Create or reuse audio element
-    let audio = document.getElementById('scene-audio-player');
-    if (!audio) {
-        audio = new Audio();
-        audio.id = 'scene-audio-player';
-    }
-
-    console.log('[Audio] Playing:', audio_path);
-    audio.src = audio_path;
-    audio.play().catch(err => console.error('[Audio] Playback failed:', err));
-}
-"""
-
-
-def load_robot_ws_script_js() -> str:
-    """JavaScript to initialize WebSocket connection to Reachy Mini robot."""
-    return """
-() => {
-    console.log('[Robot] Initializing WebSocket connection...');
-
-    // Define global initialization function if not already defined
-    if (!window.loadRobotWebSocket) {
-        window.loadRobotWebSocket = function() {
-    const hostDiv = document.getElementById('robot-ws-host');
-    if (!hostDiv) {
-        console.error('[Robot] Cannot initialize - host div not found');
-        return;
-    }
-
-    const ROBOT_URL = 'localhost:8000';
-    const WS_URL = `ws://${ROBOT_URL}/api/move/ws/set_target`;
-
-    console.log('[Robot] Connecting to:', WS_URL);
-
-    // Global robot state
-    window.reachyRobot = {
-        ws: null,
-        connected: false
-    };
-
-    // Create UI
-    hostDiv.innerHTML = `
-        <div id="robot-connection-status" style="padding: 8px; border-radius: 4px; background: #f8d7da; color: #721c24; margin-bottom: 10px;">
-            <span id="robot-status-dot" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc3545; margin-right: 6px;"></span>
-            <span id="robot-status-text">Disconnected - Trying to connect...</span>
-        </div>
-    `;
-
-    function updateStatus(connected) {
-        const statusDiv = document.getElementById('robot-connection-status');
-        const dot = document.getElementById('robot-status-dot');
-        const text = document.getElementById('robot-status-text');
-
-        if (connected) {
-            statusDiv.style.background = '#d4edda';
-            statusDiv.style.color = '#155724';
-            dot.style.background = '#28a745';
-            dot.style.boxShadow = '0 0 10px #28a745';
-            text.textContent = 'Connected to robot';
-        } else {
-            statusDiv.style.background = '#f8d7da';
-            statusDiv.style.color = '#721c24';
-            dot.style.background = '#dc3545';
-            dot.style.boxShadow = 'none';
-            text.textContent = 'Disconnected - Reconnecting...';
-        }
-    }
-
-    function connectWebSocket() {
-        console.log('[Robot] Connecting to WebSocket:', WS_URL);
-
-        window.reachyRobot.ws = new WebSocket(WS_URL);
-
-        window.reachyRobot.ws.onopen = () => {
-            console.log('[Robot] WebSocket connected');
-            window.reachyRobot.connected = true;
-            updateStatus(true);
-        };
-
-        window.reachyRobot.ws.onclose = () => {
-            console.log('[Robot] WebSocket disconnected');
-            window.reachyRobot.connected = false;
-            updateStatus(false);
-            // Reconnect after 2 seconds
-            setTimeout(connectWebSocket, 2000);
-        };
-
-        window.reachyRobot.ws.onerror = (error) => {
-            console.error('[Robot] WebSocket error:', error);
-        };
-
-        window.reachyRobot.ws.onmessage = (event) => {
-            try {
-                const message = JSON.parse(event.data);
-                if (message.status === 'error') {
-                    console.error('[Robot] Server error:', message.detail);
-                }
-            } catch (e) {
-                console.error('[Robot] Failed to parse message:', e);
-            }
-        };
-    }
-
-    connectWebSocket();
-        };  // End of window.loadRobotWebSocket definition
-    }
-
-    // Try to initialize (with multiple retries)
-    let retryCount = 0;
-    const maxRetries = 10;
-
-    function tryInit() {
-        const hostDiv = document.getElementById('robot-ws-host');
-        if (!hostDiv) {
-            retryCount++;
-            if (retryCount <= maxRetries) {
-                console.warn(`[Robot] Host div not found, retry ${retryCount}/${maxRetries} in 1 second`);
-                setTimeout(tryInit, 1000);
-            } else {
-                console.warn('[Robot] Gave up waiting for robot widget div. Will initialize on first use.');
-            }
-            return;
-        }
-
-        if (window.reachyRobot) {
-            console.log('[Robot] Already initialized');
-            return;
-        }
-
-        // Initialize now
-        console.log('[Robot] Found host div, initializing...');
-        window.loadRobotWebSocket();
-    }
-
-    tryInit();
-}
-"""
-
-
-def send_robot_pose_js() -> str:
-    """JavaScript to send robot pose via WebSocket."""
-    return """
-async (pose_data) => {
-    if (!pose_data) {
-        return;  // No pose to send
-    }
-
-    // Initialize WebSocket if not already done (lazy initialization)
-    if (!window.reachyRobot) {
-        console.log('[Robot] Lazy initialization on first pose send');
-        if (window.loadRobotWebSocket) {
-            window.loadRobotWebSocket();
-            // Wait a bit for connection to establish
-            await new Promise(resolve => setTimeout(resolve, 500));
-        }
-    }
-
-    if (!window.reachyRobot || !window.reachyRobot.connected || !window.reachyRobot.ws || window.reachyRobot.ws.readyState !== WebSocket.OPEN) {
-        console.warn('[Robot] WebSocket not connected, skipping pose command');
-        return;
-    }
-
-    try {
-        console.log('[Robot] Sending pose:', pose_data);
-        window.reachyRobot.ws.send(JSON.stringify(pose_data));
-    } catch (error) {
-        console.error('[Robot] Failed to send pose:', error);
-    }
-}
-"""
-
-
-
-def build_app() -> gr.Blocks:
-    with gr.Blocks(title="Gradio Visual Novel") as demo:
-        gr.HTML(f"<style>{CUSTOM_CSS}</style>", elem_id="vn-styles")
-        story_state = gr.State()
-
-        with gr.Row():
-            with gr.Column(scale=3, min_width=640):
-                stage = gr.HTML(label="Stage", elem_id="stage-container")
-                dialogue = gr.Markdown(label="Dialogue")
-                meta = gr.Markdown(label="Scene Info", elem_id="scene-info")
-
-                # Choice selection
-                choice_radio = gr.Radio(label="Make a choice", visible=False)
-
-                # Text input
-                with gr.Group(visible=False) as input_group:
-                    input_prompt = gr.Markdown("", elem_classes=["input-prompt"])
-                    with gr.Row():
-                        user_input = gr.Textbox(label="Your answer", scale=4)
-                        input_submit_btn = gr.Button("Submit", variant="primary", scale=1)
-
-                with gr.Row():
-                    prev_btn = gr.Button("⟵ Back", variant="secondary")
-                    next_btn = gr.Button("Next ⟶", variant="primary")
-            with gr.Column(scale=1, min_width=320, elem_classes=["camera-column"], visible=False) as right_column:
-                gr.Markdown("### Live Camera (WebRTC)")
-                camera_hint = gr.Markdown(
-                    camera_hint_text(False), elem_classes=["camera-hint"]
-                )
-                gr.Markdown(
-                    "Allow camera access when prompted. The webcam appears only in scenes that request it.",
-                    elem_classes=["camera-hint"],
-                )
-                with gr.Group(elem_id="camera-wrapper"):
-                    webrtc_component = WebRTC(
-                        label="Webcam Stream",
-                        mode="send-receive",
-                        modality="video",
-                        full_screen=False,
-                        visible=False,
-                    )
-                webrtc_component.stream(
-                    fn=passthrough_stream,
-                    inputs=[webrtc_component],
-                    outputs=[webrtc_component],
-                )
-                voice_hint = gr.Markdown(
-                    voice_hint_text(False), elem_classes=["camera-hint"]
-                )
-                with gr.Group(visible=False, elem_id="voice-wrapper") as voice_section:
-                    with gr.Accordion("Voice & Audio Agent", open=True):
-                        gr.Markdown(
-                            "Record a short line to pass to your AI companion. "
-                            "We play back your clip and a synthetic confirmation tone.",
-                            elem_classes=["camera-hint"],
-                        )
-                        voice_prompt = gr.Textbox(
-                            label="Prompt/context",
-                            value="React to the current scene with a friendly reply.",
-                            lines=2,
-                        )
-                        mic = gr.Audio(
-                            sources=["microphone", "upload"],
-                            type="numpy",
-                            label="Record or upload audio",
-                        )
-                        send_voice_btn = gr.Button(
-                            "Send to voice agent", variant="secondary"
-                        )
-                        voice_summary = gr.Markdown("No audio captured yet.")
-                        playback = gr.Audio(label="Your recording", interactive=False)
-                        ai_voice_text = gr.Markdown("AI response will appear here.")
-                        ai_voice_audio = gr.Audio(
-                            label="AI voice reply (synthetic tone)", interactive=False
-                        )
-                        send_voice_btn.click(
-                            fn=process_voice_interaction,
-                            inputs=[mic, voice_prompt],
-                            outputs=[
-                                voice_summary,
-                                playback,
-                                ai_voice_text,
-                                ai_voice_audio,
-                            ],
-                        )
-                motor_hint = gr.Markdown(
-                    motor_hint_text(False), elem_classes=["camera-hint"]
-                )
-                with gr.Group(visible=False, elem_id="dxl-panel-container") as motor_group:
-                    with gr.Accordion("Dynamixel XL330 Control", open=True):
-                        gr.Markdown(
-                            "**Web Serial Control** - Use Chrome/Edge desktop. Connect to serial port, then control motors.",
-                            elem_classes=["camera-hint"],
-                        )
-
-                        # Serial connection panel (still handled by JavaScript)
-                        gr.HTML('<div id="dxl-panel-host"></div>', elem_id="dxl-panel-host-wrapper")
-
-                        # Motor control inputs (Python-based)
-                        with gr.Row():
-                            motor_id_input = gr.Number(
-                                label="Motor ID",
-                                value=1,
-                                minimum=0,
-                                maximum=252,
-                                precision=0,
-                            )
-                        with gr.Row():
-                            goal_slider = gr.Slider(
-                                label="Goal Position (degrees)",
-                                minimum=0,
-                                maximum=360,
-                                value=90,
-                                step=1,
-                            )
-                        with gr.Row():
-                            ping_btn = gr.Button("Ping", size="sm")
-                            torque_on_btn = gr.Button("Torque ON", size="sm", variant="secondary")
-                            torque_off_btn = gr.Button("Torque OFF", size="sm")
-                        with gr.Row():
-                            send_goal_btn = gr.Button("Send Goal Position", variant="primary")
-                        motor_status = gr.Markdown("Status: Ready")
-
-                # Robot Control (Reachy Mini via WebSocket)
-                robot_hint = gr.Markdown(
-                    robot_hint_text(False), elem_classes=["camera-hint"]
-                )
-                with gr.Group(visible=False, elem_id="robot-panel-container") as robot_group:
-                    with gr.Accordion("Reachy Mini Robot Control", open=True):
-                        gr.Markdown(
-                            "**WebSocket Control** - Connects to localhost:8000 for real-time robot control.",
-                            elem_classes=["camera-hint"],
-                        )
-
-                        # WebSocket connection area (will be managed by JavaScript)
-                        # Status is shown dynamically by JavaScript inside this div
-                        gr.HTML('<div id="robot-ws-host"></div>', elem_id="robot-ws-host-wrapper")
-
-        # Wire up event handlers
-        all_outputs = [
-            story_state,
-            stage,
-            dialogue,
-            meta,
-            camera_hint,
-            webrtc_component,
-            voice_hint,
-            voice_section,
-            motor_hint,
-            motor_group,
-            robot_hint,
-            robot_group,
-            choice_radio,
-            input_prompt,
-            input_group,
-            prev_btn,
-            next_btn,
-            right_column,
-        ]
-
-        # Hidden JSON for passing packet bytes between Python and JavaScript
-        # Note: gr.State doesn't work well with JavaScript, so we use JSON
-        packet_bytes_json = gr.JSON(visible=False, value=[])
-        response_bytes_json = gr.JSON(visible=False, value=[])
-        motor_packets_json = gr.JSON(visible=False, value=[])  # For scene motor commands
-
-        # Hidden textbox for passing audio path to JavaScript
-        audio_path_box = gr.Textbox(visible=False, value="")
-
-        # Hidden JSON for passing robot pose to JavaScript
-        robot_pose_json = gr.JSON(visible=False, value=None)
-
-        # Load initialization scripts
-        combined_init_js = f"""
-() => {{
-    // Initialize Dynamixel
-    ({load_dxl_script_js()})();
-    // Initialize Robot WebSocket
-    ({load_robot_ws_script_js()})();
-}}
-"""
-
-        demo.load(
-            fn=load_initial_state,
-            inputs=None,
-            outputs=all_outputs,
-            js=combined_init_js,
-        )
-
-        # Navigation buttons with automatic motor command execution, audio playback, and robot control
-        # Create parallel chains for audio, motors, and robot to ensure all get the updated state
-
-        # Previous button
-        prev_event = prev_btn.click(
-            fn=lambda state: change_scene(state, -1),
-            inputs=story_state,
-            outputs=all_outputs,
-        )
-        # Audio chain
-        prev_event.then(
-            fn=get_scene_audio,
-            inputs=[story_state],
-            outputs=[audio_path_box],
-        ).then(
-            fn=None,
-            inputs=[audio_path_box],
-            outputs=[],
-            js=play_scene_audio_js(),
-        )
-        # Motor chain (parallel)
-        prev_event.then(
-            fn=get_scene_motor_packets,
-            inputs=[story_state],
-            outputs=[motor_packets_json],
-        ).then(
-            fn=None,
-            inputs=[motor_packets_json],
-            outputs=[],
-            js=execute_motor_packets_js(),
-        )
-        # Robot chain (parallel)
-        prev_event.then(
-            fn=get_scene_robot_pose,
-            inputs=[story_state],
-            outputs=[robot_pose_json],
-        ).then(
-            fn=None,
-            inputs=[robot_pose_json],
-            outputs=[],
-            js=send_robot_pose_js(),
-        )
-
-        # Next button
-        next_event = next_btn.click(
-            fn=lambda state: change_scene(state, 1),
-            inputs=story_state,
-            outputs=all_outputs,
-        )
-        # Audio chain
-        next_event.then(
-            fn=get_scene_audio,
-            inputs=[story_state],
-            outputs=[audio_path_box],
-        ).then(
-            fn=None,
-            inputs=[audio_path_box],
-            outputs=[],
-            js=play_scene_audio_js(),
-        )
-        # Motor chain (parallel)
-        next_event.then(
-            fn=get_scene_motor_packets,
-            inputs=[story_state],
-            outputs=[motor_packets_json],
-        ).then(
-            fn=None,
-            inputs=[motor_packets_json],
-            outputs=[],
-            js=execute_motor_packets_js(),
-        )
-        # Robot chain (parallel)
-        next_event.then(
-            fn=get_scene_robot_pose,
-            inputs=[story_state],
-            outputs=[robot_pose_json],
-        ).then(
-            fn=None,
-            inputs=[robot_pose_json],
-            outputs=[],
-            js=send_robot_pose_js(),
-        )
-
-        # Choice handler
-        choice_event = choice_radio.change(
-            fn=handle_choice,
-            inputs=[story_state, choice_radio],
-            outputs=all_outputs,
-        )
-        # Audio chain
-        choice_event.then(
-            fn=get_scene_audio,
-            inputs=[story_state],
-            outputs=[audio_path_box],
-        ).then(
-            fn=None,
-            inputs=[audio_path_box],
-            outputs=[],
-            js=play_scene_audio_js(),
-        )
-        # Motor chain (parallel)
-        choice_event.then(
-            fn=get_scene_motor_packets,
-            inputs=[story_state],
-            outputs=[motor_packets_json],
-        ).then(
-            fn=None,
-            inputs=[motor_packets_json],
-            outputs=[],
-            js=execute_motor_packets_js(),
-        )
-        # Robot chain (parallel)
-        choice_event.then(
-            fn=get_scene_robot_pose,
-            inputs=[story_state],
-            outputs=[robot_pose_json],
-        ).then(
-            fn=None,
-            inputs=[robot_pose_json],
-            outputs=[],
-            js=send_robot_pose_js(),
-        )
-
-        # Input submit button
-        input_submit_event = input_submit_btn.click(
-            fn=handle_input,
-            inputs=[story_state, user_input],
-            outputs=all_outputs,
-        )
-        # Audio chain
-        input_submit_event.then(
-            fn=get_scene_audio,
-            inputs=[story_state],
-            outputs=[audio_path_box],
-        ).then(
-            fn=None,
-            inputs=[audio_path_box],
-            outputs=[],
-            js=play_scene_audio_js(),
-        )
-        # Motor chain (parallel)
-        input_submit_event.then(
-            fn=get_scene_motor_packets,
-            inputs=[story_state],
-            outputs=[motor_packets_json],
-        ).then(
-            fn=None,
-            inputs=[motor_packets_json],
-            outputs=[],
-            js=execute_motor_packets_js(),
-        )
-        # Robot chain (parallel)
-        input_submit_event.then(
-            fn=get_scene_robot_pose,
-            inputs=[story_state],
-            outputs=[robot_pose_json],
-        ).then(
-            fn=None,
-            inputs=[robot_pose_json],
-            outputs=[],
-            js=send_robot_pose_js(),
-        )
-
-        # Input enter key
-        input_enter_event = user_input.submit(
-            fn=handle_input,
-            inputs=[story_state, user_input],
-            outputs=all_outputs,
-        )
-        # Audio chain
-        input_enter_event.then(
-            fn=get_scene_audio,
-            inputs=[story_state],
-            outputs=[audio_path_box],
-        ).then(
-            fn=None,
-            inputs=[audio_path_box],
-            outputs=[],
-            js=play_scene_audio_js(),
-        )
-        # Motor chain (parallel)
-        input_enter_event.then(
-            fn=get_scene_motor_packets,
-            inputs=[story_state],
-            outputs=[motor_packets_json],
-        ).then(
-            fn=None,
-            inputs=[motor_packets_json],
-            outputs=[],
-            js=execute_motor_packets_js(),
-        )
-        # Robot chain (parallel)
-        input_enter_event.then(
-            fn=get_scene_robot_pose,
-            inputs=[story_state],
-            outputs=[robot_pose_json],
-        ).then(
-            fn=None,
-            inputs=[robot_pose_json],
-            outputs=[],
-            js=send_robot_pose_js(),
-        )
-
-        # Motor control event handlers
-        # Pattern: Python builds packet -> JS sends/receives -> Python parses
-
-        # Ping button
-        ping_btn.click(
-            fn=dxl_build_ping_packet,
-            inputs=[motor_id_input],
-            outputs=[packet_bytes_json],
-        ).then(
-            fn=None,
-            inputs=[packet_bytes_json],
-            outputs=[response_bytes_json],
-            js=dxl_send_and_receive_js(),
-        ).then(
-            fn=dxl_parse_response,
-            inputs=[response_bytes_json],
-            outputs=[motor_status],
-        )
-
-        # Torque ON button
-        torque_on_btn.click(
-            fn=lambda motor_id: dxl_build_torque_packet(motor_id, True),
-            inputs=[motor_id_input],
-            outputs=[packet_bytes_json],
-        ).then(
-            fn=None,
-            inputs=[packet_bytes_json],
-            outputs=[response_bytes_json],
-            js=dxl_send_and_receive_js(),
-        ).then(
-            fn=dxl_parse_response,
-            inputs=[response_bytes_json],
-            outputs=[motor_status],
-        )
-
-        # Torque OFF button
-        torque_off_btn.click(
-            fn=lambda motor_id: dxl_build_torque_packet(motor_id, False),
-            inputs=[motor_id_input],
-            outputs=[packet_bytes_json],
-        ).then(
-            fn=None,
-            inputs=[packet_bytes_json],
-            outputs=[response_bytes_json],
-            js=dxl_send_and_receive_js(),
-        ).then(
-            fn=dxl_parse_response,
-            inputs=[response_bytes_json],
-            outputs=[motor_status],
-        )
-
-        # Send goal position button
-        send_goal_btn.click(
-            fn=dxl_build_goal_position_packet,
-            inputs=[motor_id_input, goal_slider],
-            outputs=[packet_bytes_json],
-        ).then(
-            fn=None,
-            inputs=[packet_bytes_json],
-            outputs=[response_bytes_json],
-            js=dxl_send_and_receive_js(),
-        ).then(
-            fn=dxl_parse_response,
-            inputs=[response_bytes_json],
-            outputs=[motor_status],
-        )
-
-    return demo
-
-
-def main() -> None:
-    """Launch the Visual Novel Gradio app with FastAPI for static file serving."""
-    # Create FastAPI app
-    fastapi_app = FastAPI()
-
-    # Mount static files for assets and web scripts
-    script_dir = os.path.dirname(os.path.abspath(__file__))
-    assets_dir = os.path.join(script_dir, "assets")
-    web_dir = os.path.join(script_dir, "web")
-    fastapi_app.mount("/user-assets", StaticFiles(directory=assets_dir), name="user-assets")
-    fastapi_app.mount("/web", StaticFiles(directory=web_dir), name="web")
-
-    # Build and mount Gradio app
-    gradio_app = build_app()
-    fastapi_app = gr.mount_gradio_app(fastapi_app, gradio_app, path="/")
-
-    # Launch with proper shutdown handling
-    import uvicorn
-    try:
-        uvicorn.run(
-            fastapi_app,
-            host="127.0.0.1",
-            port=7860,
-            log_level="info",
-            timeout_graceful_shutdown=1  # Quick shutdown
-        )
-    except KeyboardInterrupt:
-        print("\n[INFO] Server stopped")
-
-
-
-if __name__ == "__main__":
-    main()