rename main.py

app.py

@@ -0,0 +1,1448 @@
+"""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()