★ FEATURED ARTICLE 【华为云码道实战】当 AI 童话遇上儿童天赋潜能——「无限想象」睡前故事共创平台参赛作品无限想象 · 儿童 AI 多 Agent 睡前故事共创平台开发方式华为云码道CodeArts 代码智能体人机结对开发技术栈HTML / CSS / JavaScript单文件 Web App Node.js 本地代理 微软 Edge 神经语音 TTS 华为云 MaaS DeepSeek 大模型开源仓库https://atomgit.com/gxhgxh2475698/Dreamloom一、前言从每晚的编故事焦虑说起家里有娃的朋友一定熟悉这个场景晚上九点半孩子抱着枕头眼巴巴地看着你——“爸爸今晚讲什么故事”讲过的故事再讲一遍孩子嫌听过了现编的故事讲到一半自己先逻辑崩了下载的儿童故事 App内容固化、广告弹窗孩子只是被动地听全程零参与。其实孩子想要的从来不只是听故事而是**“这是我们一起编的故事”**。心理学和教育学的研究反复证明共创式叙事collaborative storytelling对 3-8 岁儿童的语言表达、逻辑思维和情感认知发展远胜于被动收听。于是就有了「无限想象」——孩子说一句小心愿哪怕只有几个词五个 AI 小伙伴立刻围过来陪他把心愿织成一个温柔完整的睡前故事讲完之后家长还能在潜能看板上看到孩子今晚在想象力、词汇、表达、叙事、共情、专注六个维度上的成长轨迹。一句话定位一个孩子出1%的心愿、AI 完成99%的编织、最后 100% 属于你们俩的睡前故事共创平台。这个项目从第一行代码到跑通完整闭环我是和**华为云码道CodeArts 代码智能体**结对完成的——需求描述、UI 重设计、API 调试、节奏调优全程人机协作下文第五节专门讲这段体验。二、项目亮点先上总览「无限想象」一共做了五件核心的事1. 五 Agent 协作流水线让生成故事变成一群小伙伴办一件事不做一个输入框 → 一段输出的传统生成式应用。我们把创作过程拆给五个性格鲜明的 Agent孩子能亲眼看到故事是怎么一步步长出来的Agent角色职责 灵感火花接住心愿理解孩子的语音/文字/点选元素提炼故事主题 场景星球搭建世界匹配场景森林/海洋/星空/云端…与角色设定 创作向导编排情节核心生成四步逻辑链再据此写正文✨ 精修精灵打磨文字调整节奏与用词适配睡前氛围安静收尾 天赋瞭望归档成长分析本次创作更新六维潜能雷达每个 Agent 完成时都有进度反馈和一句人话总结比如创作向导会说逻辑线遇见小动静 → 勇敢帮忙 → 安心入睡孩子能直观理解故事是有结构的不是魔法变出来的。2. 双引擎架构AI 大模型 离线模板兜底永远讲得出故事两套引擎按场景分工实测对比如下维度AI 引擎华为云 MaaS DeepSeek模板引擎内置离线故事质量逻辑链完整、用词丰富、mood 可定制骨架固定但主题可织入响应耗时依赖网络秒级毫秒级纯本地同步依赖条件需配置 API Key零依赖断网可用主题覆盖任意心愿均可理解LEX/SYN 词库 topicOf()接住词库外主题兜底关系主引擎AI 失败时自动降级、无感切换AI 引擎接入华为云 MaaS 的 DeepSeek 模型通过精心设计的结构化 Prompt详见第四节生成带四步逻辑链的高质量故事模板引擎内置多套故事骨架配合近义词词库LEX/SYN和topicOf()主题提取——就算孩子说我想要王者荣耀的故事也能把词库之外的主题织进标题和开头对孩子来说故事永远不缺席。3. 微软 Edge 神经语音8 个音色把故事讲出温度集成了msedge-tts提供晓晓、晓伊、云希、云健、云夏、云扬、晓北、晓妮共 8 个 neural 音色支持语速调节。点音色即试听、再点即停止。神经语音失败时自动回退系统语音三层保障。4. 六维潜能雷达 天赋画像给家长的成长彩蛋故事不是听完就结束。每次共创后天赋瞭望 Agent 会更新孩子的六维语言潜能雷达图累计多次后生成天赋画像卡故事演说型 / 意象联想型 / 结构主模型 / 情感共情型 家长可以直观看到孩子的优势是比喻丰富还是因果清晰该往哪个方向鼓励。5. Apple Minimalist 儿童向 UI孩子一眼会用的界面浅色基底#F5F5F7、白色卡片、柔和阴影、squircle 大圆角、玻璃质感底部 Tab——整套视觉遵循 Apple 极简设计语言但文案完全是儿童口吻“说一句小心愿我们就开始”。支持语音输入、点选灵感元素、大字号打字机逐字呈现适配 3-8 岁的操作能力。三、功能与界面展示主界面心愿输入 五 Agent 创作脉络孩子可以说点麦克风、可以打字、也可以点选小元素…下方创作脉络实时展示灵感火花 → 场景星球 → 创作向导的完成状态与四步逻辑线主界面遵循一张卡片一件事的原则顶部问候语定下睡前氛围中间大麦克风按钮是孩子的主入口点一下说话、再点结束下方元素标签让不会打字的孩子也能精确表达我想要小熊猫和打哈欠的云猫咪。最妙的是底部的创作脉络——每个 Agent 完成时会用一句孩子听得懂的话总结自己的工作比如创作向导的逻辑线主角想等伙伴一起道晚安 → 伙伴到来主角发出邀请 → …把 AI 的中间产物变成了可理解的过程。朗读声音8 个神经音色即点即试听晓晓、晓伊、云希、云健、云夏、云扬、晓北、晓妮 8 个音色点一下试听、再点切换语速 0.5×-1.4× 滑块调节提示音效可关AI 故事引擎一分钟接入华为云 MaaS填入华为云 MaaS 的 API 地址与 Key点「测试连接」即完成接入关闭开关或连接失败时自动降级内置模板引擎故事呈现与潜能看板截图占位发布前替换为实际截图逐字打出 同步神经语音朗读段落间留 80ms 音隙家长侧的成长看板四、技术架构与核心实现4.1 整体架构┌─────────────────────────────────────────────────┐ │ index.html单文件 App │ │ UI 层心愿输入 / Agent 时间线 / 故事舞台 / 看板 │ │ 逻辑层五 Agent 流水线 / 双故事引擎 / TTS 控制 │ │ 存储层localStorage故事库/成长数据/设置/AI配置│ └──────────────┬───────────────────┬──────────────┘ │ /tts │ /chat ┌──────────────▼───────────────────▼──────────────┐ │ tts-proxy.jsNode 本地代理 :8787 │ │ ① 静态托管 index.html同源免跨域 │ │ ② /tts → msedge-tts 神经语音合成 │ │ ③ /chat → 华为云 MaaS DeepSeek服务端转发 │ └─────────────────────────────────────────────────┘为什么这样设计单文件前端零构建、零依赖下载即用最大降低试用门槛本地 Node 代理三合一静态托管让前后端同源消灭 CORS 问题、TTS 中转浏览器无法直连 Edge TTS 的 WebSocket 接口、大模型服务端转发API Key 不落前端安全且再次规避跨域。4.2 五 Agent 流水线把生成变成协作五个 Agent 不是五个独立调用而是一条可视化的流水线。核心状态机非常轻量constAGENTS{spark:{name:灵感火花,emoji:,ac:#FF9F40},scene:{name:场景星球,emoji:,ac:#7B6BFF},guide:{name:创作向导,emoji:,ac:#4DC4E1},polish:{name:精修精灵,emoji:✨,ac:#FF6B9D},talent:{name:天赋瞭望,emoji:,ac:#FFD60A}};// 每个阶段只有三种状态排队 → 忙碌带过程文案 → 完成rowBusy(guide,useAI? 创作向导 正在编排情节逻辑…: 创作向导 正在…);// 完成后用一句孩子能懂的人话总结本次工作constguideMsgoutline.length?逻辑线${outline.slice(0,4).join( → )}:先遇见小动静再勇敢帮忙最后安心入睡——结构排好了。;这段代码的巧思在于把中间产物翻译成儿童语言outline 的四步逻辑链直接以A → B → C → D的形式展示出来孩子每次听故事都在潜移默化地吸收因果结构这个概念。4.3 Prompt 工程用四步逻辑链治好 AI 童话的逻辑病直接让大模型写一个睡前故事常见病症是情节跳跃、转折生硬、结尾突兀。我们的解法是强制两段式生成——先出逻辑链再写正文constSYSTEM_PROMPT你是一位给 3-8 岁儿童写中文睡前故事的作家。你写的故事必须『逻辑通顺』// ……篇幅所限节选关键约束先在 outline 里写出四步逻辑链每步一句说明『谁因为什么做了什么导致什么』再据此写正文。;要求模型返回结构化 JSON{title:会唱歌的小海螺,mood:温柔,outline:[小海螺因为想念海浪的歌声夜里偷偷爬上沙滩,它遇到了迷路的小螃蟹决定先帮小螃蟹找回家的路,两个小伙伴互相鼓励终于在天亮前回到了海边,小海螺明白帮助别人之后心里的歌会更响亮],paras:[……,……,……,……]}先搭骨架、再填血肉生成的故事因果完整、结尾安静完全贴合睡前场景。同时前端对 JSON 做了宽松解析容忍 markdown 代码块包裹、字段缺失任何一步异常都会降级到模板引擎。4.4 离线模板引擎词库之外的主题也能接住AI 不可用时的兜底不能是随机故事。内置模板引擎的关键是topicOf()当孩子的心愿不在词库内比如王者荣耀“奥特曼”提取该主题词织入标题与开头让每个心愿都有专属感配合 LEX/SYN 双词库做近义词归一星星/亮晶晶/小星星都能命中星空场景。4.5 神经语音 TTS节奏感是体验的灵魂8 音色即点即试听选中即播、再点即停、切换无缝朗读节奏精调句号/逗号处停 64ms、普通字符 30ms、段落之间留 80ms 音隙——这些数字全部来自反复试听调优让机器朗读有人讲故事的呼吸感三层容错Edge 神经语音 → 系统语音 → 静默字幕任何网络状况下故事都能继续。4.6 实测数据性能到底怎么样光说不练假把式以下是本机Windows 11node tts-proxy.js本地服务的真实实测① 页面加载index.html单文件 74KB未压缩本地服务加载耗时0.22s——单文件零构建架构的优势直接体现在首屏速度上。② 神经语音合成延迟测试文本 26 字音色晓晓语速 85%连续 3 次次数耗时产出音频第 1 次2.72s33,552 字节 MP3第 2 次2.61s33,552 字节 MP3第 3 次2.57s33,552 字节 MP3平均2.63s拿到完整的 24kHz / 48kbps 单声道神经语音经file命令验证为标准 MPEG Layer III。实际体验中故事按段合成、边合成边朗读等待被流水线消化孩子无感知。③ 断网降级链路AI 引擎与神经语音同时失效时模板引擎毫秒级出稿 系统语音接管朗读故事流程不中断——给娃用的 App可用性大于一切。4.7 数据持久化刷新不丢的成长档案全部基于 localStorage按职责拆分 keyKey内容wx_stories故事库最多 30 条可回听wx_tts音色、语速、音效开关wx_llmAI 引擎配置wx_growth六维潜能、创作场次、灵感数、历史轨迹wx_world创作世界时间线记录五、与华为云码道的结对开发实录这个项目最特别的体验它不是我一个人闷头写的也不是 AI 一键生成的而是我提需求 码道写码 我验收的人机结对模式。几个真实片段UI 重设计我只说了一句整体改成 Apple 极简风浅色、大圆角、玻璃质感码道一次产出了约 20 处系统性样式重构还顺手修复了此前编辑事故留下的乱码字符——这种一句话需求 → 成体系交付的密度传统 IDE 给不了。API 踩坑华为云 MaaS 的端点是/v2/chat/completions不是常见的/v1对着 404 调试时是码道建议先核对官方文档路径、再把转发逻辑做进本地代理/chat——一次改动同时解决了 CORS 和 API Key 安全两个问题。节奏调优朗读节奏不舒服这种模糊反馈最难传给机器但码道把不舒服翻译成了可量化参数句号 64ms / 字符 30ms / 段落 75ms / 音隙 80ms试听两轮微调就收敛了。需求演进项目中途我把方向从通用创作平台收敛为睡前故事码道在保留五 Agent 框架的前提下重构了入口流程——大方向调整不推倒重来这是结对开发最大的价值。总结AI 结对编程的正确姿势不是让 AI 写完所有代码而是人负责产品判断和验收码道负责实现密度和细节兜底。五 Agent 流水线、双引擎降级、六维雷达这些设计都是在这样的来回对话中长出来的。六、开发踩坑记真实经验血泪换的MaaS API 地址的坑华为云 MaaS 的推理端点是/v2/chat/completions不是常见的/v1模型名是deepseek-v4.1-flash。对着 404 调了一小时最后在官方文档里确认路径——看文档要看细。浏览器直连大模型 API 的 CORS 死局前端直连第三方 API 必挂跨域。解法是把转发做进本地代理/chat顺便让 API Key 只存在本地 Node 进程里密钥永不进前端代码——这一步同时解决了能用和安全两个问题。TTS 的 WebSocket 无法从浏览器直连Edge TTS 接口走 WebSocket 且有鉴权握手浏览器端直连被协议卡死。同样交给msedge-tts在 Node 侧完成前端只管发 HTTP。AI 返回的 JSON 不总是纯 JSON大模型偶尔会用 markdown 代码块包裹 JSON、或悄悄加一句开场白。宽松解析 降级模板引擎是所有生成式应用都该有的兜底。朗读节奏调优没有银弹语速参数、停顿时长全部人工试听微调。64ms/30ms/80ms 这组数字看似随意背后是几十轮妈妈式验收。七、总结与展望「无限想象」用多 Agent 协作可视化 双引擎兜底 神经语音 成长看板把AI 讲故事这件已经被做烂的事重新做成了AI 陪孩子创造故事并帮家长看见成长。这个项目也验证了一件事华为云码道 清晰的产品判断 一个人也能做出完整闭环的 AI 应用。后续规划共创环节升级故事进行到一半让孩子选择接下来怎么办把 1% 的参与度提到 30%真正实现 branching narrative潜能算法深化目前六维增长采用规则启发式计划引入对生成故事的文本分析词汇丰富度、情感词密度做更精准的归因HarmonyOS 化架构上前端已与后端解耦计划用 ArkUI 重写端侧接入小艺语音与端侧 AI 能力覆盖更多华为设备。陪孩子编一个故事只要十分钟但这十分钟里被点亮的想象力可能会亮很久。附录一分钟跑起来gitclone https://atomgit.com/gxhgxh2475698/Dreamloomcdinfinite-imaginationnpminstall# 安装 msedge-ttsnodetts-proxy.js# 启动本地代理含静态托管浏览器打开http://localhost:8787/index.html即可体验。可选在「设置 → AI 引擎」填入华为云 MaaS 的 API Key解锁大模型创作引擎。
阅读完成 · 觉得有帮助？
