import gradio as gr

VIDEO_URL = "https://huggingface.co/datasets/squaredcuber/chalktalk-demo/resolve/main/chalktalk-demo.mp4"
LIVE_DEMO = "https://belong-picking-platinum-represents.trycloudflare.com"

HTML = f"""
<div style="max-width:900px;margin:0 auto;font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.55">
  <h1 style="margin-bottom:4px">\U0001F393 ChalkTalk</h1>
  <h3 style="margin-top:0;color:#555;font-weight:600">The AI tutor that talks <em>and</em> draws &mdash; live.</h3>
  <p>Type a topic and a full-duplex voice tutor (<b>PersonaPlex</b>) teaches it out loud while an
  <b>NVIDIA Nemotron</b> director draws a labeled diagram on a whiteboard. Every part lights up the
  moment the tutor says its name.</p>
  <video controls playsinline style="width:100%;border-radius:14px;box-shadow:0 10px 40px #0003" src="{VIDEO_URL}"></video>
  <p style="margin-top:18px">&#9654; <b>Live demo:</b> <a href="{LIVE_DEMO}" target="_blank" rel="noopener">{LIVE_DEMO}</a></p>
  <h3>How it works</h3>
  <ul>
    <li><b>PersonaPlex</b> &mdash; a full-duplex, Moshi-architecture 7B speech model: it listens and speaks at the same time, so you can interrupt and ask questions mid-explanation.</li>
    <li><b>Nemotron SVG director</b> &mdash; draws a clean, labeled diagram for each part of the lesson, streamed to a live whiteboard.</li>
    <li><b>Synced reveal</b> &mdash; each labeled element appears the instant its keyword is spoken (synonym-aware, so paraphrases still land).</li>
    <li><b>Auto-progressing lessons</b> &mdash; it teaches one part deeply, then voice and visuals advance together.</li>
    <li>Runs locally on a single GPU, wrapped in a shader-animated Gradio app.</li>
  </ul>
  <p style="color:#888"><em>Built by Codex.</em></p>
</div>
"""

with gr.Blocks(title="ChalkTalk") as demo:
    gr.HTML(HTML)

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860)