Frontend · AI Programming · Trae

A 500ms-Latency 3D Storyteller That Kids Can Interrupt

By 前端梦工厂 · Jul 13, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Most AI storytelling tools are one-way text-to-speech pipelines. This build demonstrates that sub-second latency and true interruptibility—not just smarter models—are what make an AI feel present and responsive to a child, and the same interaction logic ports directly to physical robots.

Summary

A new open-source project combines a large language model with a 3D embodied avatar SDK to build a real-time storytelling companion for children. The frontend, built with Vue 3 and Vite, uses Trae Work for AI-assisted scaffolding and integrates DeepSeek or Tongyi Qianwen as the story-generation brain. The Mofa Nebula XmovAvatar SDK handles the avatar's lip-sync, facial expressions, and body movements, driven by a parameter-stream architecture that keeps end-to-end latency around 500ms.

A standout feature is real-time interruptibility: the `speakWithInterrupt` method lets a child cut off a story mid-sentence to ask a question, and the avatar responds immediately instead of finishing the old narration. The project also includes multi-avatar switching, child-friendly UI copy that hides technical jargon, and a mobile-responsive layout that auto-collapses the chat panel to keep focus on the avatar.

One integration pitfall involved a Tongyi Qianwen model returning empty `content` fields while hiding the actual story inside a `reasoning` field, requiring a custom extraction function to parse out the Chinese text. The entire codebase is designed to be reusable beyond the browser, targeting future deployment on humanoid service robots.

Takeaways

— End-to-end latency stays around 500ms by using a parameter-stream architecture with client-side rendering instead of pre-recorded video.

— The `speakWithInterrupt` method calls `interactiveidle()` before `speak()`, letting the avatar stop mid-sentence when a child asks a new question.

— Tongyi Qianwen's `qwen-plus` model sometimes returns an empty `content` field and hides the story inside a `reasoning` field, requiring regex-based extraction of Chinese text blocks.

— API keys and model configs are stored in localStorage with a fallback to `.env`, and Vite's dev proxy prevents exposing real API domains from the frontend.

— Web Speech API compatibility is uneven across browsers; the composable hides the voice button entirely when `isSupported` is false.

— Re-initializing the XmovAvatar SDK without destroying the previous instance causes rendering-layer duplication and errors.

— Child-facing UI replaces technical terms: AppID becomes "Magic Key Number," AppSecret becomes "Magic Spell," and disconnect becomes "Let the King Rest."

— Message history persists across chat panel open/close by lifting the `messages` state from `ChatPanel.vue` to `App.vue`.

— The same core codebase is designed to run on humanoid service robots without modification.

Conclusions

Real-time interruptibility, not model intelligence, is the feature that makes an AI companion feel present to a child—latency and the ability to stop mid-sentence matter more than story quality.

The gap between a text chatbot and an embodied agent is a standardized SDK that handles lip-sync, expressions, and body movement; Mofa Nebula's parameter-stream approach avoids the cost and rigidity of pre-rendered video.

AI-assisted scaffolding tools like Trae Work are most useful for generating boilerplate and edge-case handling (browser compatibility, error states), not for the integration logic that requires reading third-party SDK documentation.

Model API inconsistencies—like a response format that buries the output in a `reasoning` field—are still a significant source of debugging time and are easy to misdiagnose as prompt engineering failures.

Concepts & terms

Embodied Interactive Intelligence

An AI interaction paradigm where a digital or physical avatar can perceive user input, generate a response, and express it through synchronized speech, facial expressions, and body movements in real time, including the ability to be interrupted mid-response.

Parameter-stream architecture

A rendering approach where animation parameters (lip-sync, expressions, gestures) are streamed and computed on the client side in real time, rather than playing back pre-rendered video files. This reduces latency and allows dynamic interruption.

LAM (Large Action Model)

A text-to-3D multimodal model developed by Mofa Nebula that generates real-time 3D avatar movements, expressions, and lip-sync from text input, forming the 'embodied expression layer' of their platform.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗