【学习工作】AI 漫剧工坊 — 一句话生成竖屏漫剧 Demo
一、Demo 简介
AI 漫剧工坊是一个浏览器内的竖屏漫剧生成工具。输入一句中文故事，它会在本地自动拆解剧本、设计两个角色、生成六个分镜，并在 9:16 播放器中播放带字幕与配音的成片，最后可导出 WebM、SRT 字幕或 HTML 文件。
面向用户：短视频创作者、小说作者、学生剧组、内容运营者等需要将文字快速转成可视样片的人。
核心功能：
-
极速体验模式：无需注册、无需 API Key，输入故事后 4–6 秒生成分镜。
-
三种原创程序化画风：霓虹悬疑、治愈绘本、国风水墨，同一输入切换画风即可看到不同视觉。
-
竖屏播放与导出：9:16 播放器支持浏览器语音朗读与程序化背景音，可导出 720×1280 WebM 成片。
二、Demo 创作思路
灵感来自身边朋友写短剧剧本时的困扰：一个好点子从文字到能给别人看的样片，通常要经历写分镜、找参考图、做 PPT 或剪辑等多个步骤，门槛高、耗时长。AI 漫剧工坊想把这个流程压缩成“一句话 → 可播放样片”，让创作者在几分钟内拿到第一版视觉叙事。
痛点：
-
文字创作者不善于画分镜，沟通成本高。
-
现有 AI 视频工具多面向横屏或需要排队生成，竖屏短剧场景不够直接。
-
很多工具需要配置国外 API 或付费订阅，初次体验门槛高。
做这个方向，是因为竖屏漫剧是当下短视频和短剧市场最直观的内容形态，而“本地极速生成 + 可选真实 AI”的混合路线能在保证体验的同时降低使用成本。
三、Demo 体验地址
本 Demo 为单文件 HTML，无外部依赖、无后端，解压后用 Chrome / Edge 打开即可体验。
附件：ai-comic-workshop-demo.zip（约 14 KB，小于 20 MB）
ai-comic-workshop-demo.zip (13.9 KB)
使用方式：
-
下载并解压附件。
-
双击
index.html。 -
在左侧输入故事或选择灵感，点击“一键生成漫剧”。
-
切换“成片”标签播放，切换“导出”标签下载 WebM / SRT / HTML。
四、TRAE 实践过程
整个 Demo 用 TRAE Work 从零开始开发，拆成了三个主要 Session：
-
Session 1：项目脚手架与本地生成器
-
搭建 Vue 3 + Vite + TypeScript 项目结构。
-
实现基于 FNV-1a 哈希与 LCG 的确定性本地生成器，保证同一输入得到稳定结果。
-
完成工作台 UI 与单元测试。
-
-
Session 2：程序化分镜、播放器与导出
-
用 Canvas 2D 绘制 720×1280 竖屏画面。
-
接入 Web Speech API 实现浏览器配音，Web Audio API 实现程序化背景音。
-
使用 MediaRecorder 实现 WebM 导出。
-
增加分镜文本编辑、发布检查、真实 AI 设置界面。
-
-
Session 3：测试、验证与提交材料
-
运行
npm run test，10 个测试全部通过。 -
运行
npm run build，生成静态dist/。 -
将单文件 Demo 打包为 Zip，验证解压后可直接打开。
-
关键任务 Session ID：
-
Session 1（脚手架与本地生成器）：3088959980453588:9866a22bcc5207ee6890b869451df953_6a339b78a4ae66ea97fc2284.6a571b027f98154a80a6e410.6a571b027f98154a80a6e40e:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 13:30:42)`
-
Session 2（播放器与导出）：
6a339b78a4ae66ea97fc2284 -
Session 3（验证与提交）：
6a339b78a4ae66ea97fc2284
（注：Session ID 请从 TRAE Work 对应对话中双击头像复制后填入。更新版本后，后面两个没办法双击复制了，只能问trae给的id）
五.源码
ai-comic-workshop-demo.zip (13.9 KB)
备用 dist 包
ai-comic-workshop-demo-dist.zip (46.3 KB)
报名帖链接：报名帖 URL