构建Voxitale参加Gemini Live Contest的经历让我了解如何使用多种AI工具

Source: Dev.to

Voxitale – 语音优先的故事讲述应用

为 Gemini Live 大赛构建

什么是 Voxitale？

• 受众： 幼儿
• 交互方式： 小朋友在浏览器中直接与名为 Amelia 的角色对话。
• 体验：
  • 小朋友 大声 引导冒险。
  • 随着故事展开，出现配图场景。
  • 故事结束时，系统会基于本次会话生成一段短小的 绘本式电影。

“奇怪”的部分

整个项目中我最喜欢的时刻是修复 Raspberry Pi 上的 Wi‑Fi。

让我解释一下。

我的理念

我讨厌顾问式的说话方式——那种听起来很有格调却空洞的华丽语言。
所以我不会假装这是一段优雅的工程之旅。它实际上是：

• 混乱的
• 快速的
• 工具密集的（一堆 AI 工具）

有些环节确实令人兴奋；而另一些则像在终端之间搬运原木，耗时数小时。
尽管如此，我还是学到了一些有用的东西。

体验（面向用户）

1. Voice Interaction – 一个孩子对 Amelia 说话；系统实时生成带插图的场景和旁白。
2. Story Progression – 页面即时生成，随后组装成类似故事书的体验。
3. Parental Controls – 情绪、节奏、旁白声音、可选的智能灯光效果。

Goal: 让讲故事变得 interactive 而非被动。

为什么 Gemini Live？

我参加 Gemini Live 大赛是为了找个借口围绕实时交互构建一些东西。

• 以往的工作： 一个基于 Gemini Live 的客服原型（RAG 检索、站点导航、视频控制）。
• 结果： 它能运行，但并没有让我感到兴奋。
• 新焦点： 交互式叙事，这需要存在感、快速响应、打断处理以及持续的幻觉。

一个合同告吹了，这让我得到大多数副项目永远得不到的东西：不间断的时间。我以为自己可以应付，因为我已经接触过 Gemini Live——我错了。 实时叙事远比看上去要困难得多。

Source: …

系统概述

Voxitale 成为一个 两种截然不同的节奏 同时运行的系统：

关键需求

• 低延迟语音交互
• 较慢的媒体生成

架构图（文本形式）

+-------------------+        WebSocket        +-------------------+
|   Browser (React |  |   FastAPI (Cloud Run) |
|   / Next.js)      |                         |   - WS handling   |
|   - Audio worklet |                         |   - Orchestration |
|   - UI            |                         |                   |
+-------------------+                         +-------------------+
          |                                            |
          |                                            |
          v                                            v
+-------------------+        Gemini Live      +-------------------+
| Google ADK Agent  |  |  Gemini Live /    |
| (Vertex models)   |                         |  Vertex AI        |
+-------------------+                         +-------------------+
          |                                            |
          |   Media Generation (ElevenLabs,          |
          |   Image models, Home Assistant)          |
          v                                            v
+-------------------+        Storage        +-------------------+
| Cloud Storage     |  | Firestore (metadata) |
+-------------------+                         +-------------------+
          |
          v
+-------------------+
| Cloud Run Job     |
| (MP4 assembly)    |
+-------------------+

• 前端： React/Next.js 使用 Audio Worklets 捕获麦克风音频并通过 WebSocket 进行流式传输。
• 后端： Google Cloud Run 托管 FastAPI，管理 WS 连接、API 路由和会话编排。
• 代理层： Google ADK 运行 Gemini Live + Vertex 模型，处理故事逻辑、提示规则和工具执行。
• 资产： 生成的场景与资源 → Google Cloud Storage；会话元数据与反馈 → Firestore。
• 最终输出： Cloud Run 作业将所有内容组装成 MP4 故事书视频。

开发工作流与 AI 工具

我基本上 即兴编码 了系统的大部分。AI 编码工具的效果取决于你提供的上下文。

上下文管理

• 将文档（WebSockets、Gemini Live、Google ADK、重连逻辑、流式管道）拉入 docs/ 文件夹，以便模型引用它。
• 日志 变得至关重要。

调试循环

1. 说明问题。
2. 提供后端日志。
3. 提供前端日志。
4. 让模型分析故障。
5. 测试修复。

AI 让调试更快，但仍然是调试。

最难的部分：系统稳定性

当人们听到“互动故事讲述者”时，他们会想象有趣的部分：

• 角色配音
• 插图
• 孩子们引导情节

现实： 实际工作是所有底层的内容。从架构的角度来看，两个系统必须保持 同步：

1. 实时对话系统
2. 创意媒体生成管线

如果它们出现偏差，体验就会崩溃。

树莓派 Wi‑Fi 传奇

• 需要一台旧的 Raspberry Pi 来进行 Home Assistant 集成。
• 升级树莓派后，Wi‑Fi 停止工作。
• 花了大约 ~4 小时 进行调试。
• 发现问题：运行的是 32‑bit OS，而不是所需的 64‑bit 版本。

修复这个 Wi‑Fi 问题成了我最喜欢的时刻——它证明即使是微小、凌乱的细节，在混乱的项目中也能带来胜利的感觉。

要点

• 实时互动叙事 是低延迟语音管道和重量级媒体生成的结合。
• AI 编码助手 加速开发，但扎实的文档和日志记录仍然必不可少。
• 系统同步 是关键；任何漂移都会迅速破坏用户体验。