Drawl

纯语音控制的绘画工具：不碰鼠标键盘，只用说话和 AI 一起把一张画一点点画出来。设计说明见 PRODUCT_DESIGN.md。

Demo视频：https://www.bilibili.com/video/BV17PJP6RE5H/?spm_id_from=333.1387.homepage.video_card.click&vd_source=b5d0654d0ea624c555d539c486fc0403

简介

• 纯语音创作 —— 不碰鼠标键盘，用说话创建对象、添加背景与文字、改色、移动、缩放、旋转。
• 圈选消歧 —— 指代不清时，AI 直接在画面上圈出候选、标号，问你"第几个"，而不是念一串清单。
• 撤销与版本回溯 —— 每句话是一个版本，可撤销、回到任意一版、找回删掉的对象。
• 静态 + 动态双画板 —— 静态用 rough.js 画出手绘彩铅感，一句"让它动起来"切到 p5.js 动态画板。
• 实时打断 —— AI 朗读时随时能被你打断，像真的对话。

快速开始

git clone https://github.com/lingjiuu/drawl.git
cd drawl
cp .env.example .env

填入密钥：

DEEPSEEK_API_KEY=...
DASHSCOPE_API_KEY=...

启动：

docker compose pull
docker compose up -d

打开 http://localhost:3000/draw 。停止：docker compose down。

从源代码构建

pnpm install
pnpm deploy:check     # 校验 .env
pnpm deploy:local     # docker compose up --build,后台加 :detached

依赖

工程为 pnpm + turbo 的 monorepo，分 frontend / backend / voice-agent / shared 四个包。

外部服务

依赖	用途
LiveKit（自托管，docker）	实时音频传输、WebRTC、回合与打断
百炼 / DashScope	语音识别（fun-asr-realtime）与语音合成（qwen3-tts-flash-realtime）
DeepSeek	驱动绘图与对话 Agent 的大模型（deepseek-v4-flash）

前端（frontend）

• next / react — 应用框架
• @assistant-ui/* — 聊天/会话 UI 与数据流协议
• livekit-client、@livekit/components-react — 浏览器侧实时语音
• roughjs — 把 SVG 渲染成手绘彩铅风格
• p5.js — 动态画板（沙箱 iframe，脚本随前端内置）
• tailwindcss、radix-ui、lucide-react、zustand — 样式、无障碍组件、图标、状态

后端（backend）

• hono + @hono/node-server — HTTP / WebSocket 服务
• @earendil-works/pi-agent-core、@earendil-works/pi-ai — Agent 编排与模型抽象
• assistant-stream — 向前端推送数据流
• livekit-server-sdk — 签发 LiveKit token
• typebox — 绘图工具参数 schema
• ws — 桥接百炼 STT / TTS 的 WebSocket
• node:sqlite — 会话与场景版本持久化（内置，无需安装）
• ffmpeg（@ffmpeg-installer） — 语音音频格式转换

语音 agent（voice-agent）

• @livekit/agents、@livekit/rtc-node — LiveKit Agents worker 运行时
• @livekit/agents-plugin-silero — Silero VAD，做语音活动检测与打断

共享（shared）

• zod — 跨包共享的 scene graph 与消息类型校验

License

MIT