| import gradio as gr |
|
|
| VIDEO_URL = "https://huggingface.co/datasets/squaredcuber/chalktalk-demo/resolve/main/chalktalk-demo.mp4" |
| LIVE_DEMO = "https://hobbies-rebound-detection-chi.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 — 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">▶ <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> — 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> — draws a clean, labeled diagram for each part of the lesson, streamed to a live whiteboard.</li> |
| <li><b>Synced reveal</b> — each labeled element appears the instant its keyword is spoken (synonym-aware, so paraphrases still land).</li> |
| <li><b>Auto-progressing lessons</b> — 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) |
|
|
