【生活娱乐赛道】你的爱播出道啦！——虚拟主播一站式赛博励志孵化器

TRAE AI 创造力大赛 【大赛复赛专区】
1

【生活娱乐赛道】《你的爱播出道啦！》

标签：生活娱乐

零、关于创作者

我是凪音澪，一个程序员，也是从小泡在二次元里的初音未来粉。

这个项目是我一个人用 TRAE 从零敲出来的——从产品策划、视觉设计、前端代码、Live2D 集成、AI 接入、面捕调试到后端 PHP，全链路独立完成。编程年限不算长，但胜在"什么都想自己试一遍"的执拗，和"想让想成为小偶像的人有路可走"的那点信念。

在 AI 主播满地跑、连中之人的台词都能让 AI 来写的今天，我反而越来越想做一个为人服务的东西。不是因为我抗拒 AI——这个项目本身就深度依赖智谱 GLM——而是我始终觉得，当所有娱乐都能被 AI 取代的时候，那个在屏幕后面真实存在、会因为一句弹幕笑出来、会因为没人回应而失落的人，才是虚拟主播真正不可替代的部分。

如果非要用一个标签形容自己，大概是：一个想用代码给二次元造一点美好、并且相信"人味儿"无可替代的程序员。

一、产品简介

一句话定位

《你的爱播出道啦！》是一个面向"想成为虚拟主播却不知从何入手"的二次元爱好者的一站式 Vup 出道体验网站——从灵魂人设生成、免费公皮挑选、直播间装修、真实开播面捕驱动、困境应对，到价值观引导与复盘收官，把一个完整虚拟主播的出道旅程，浓缩成一次可以一口气走完的赛博仪式。

完整功能清单与用户路径

项目共 10 + 1 个模块，按出道路径串联如下：

[起点] 人设选择

  1. 灵魂编织器 — 终端式信念输入，接入智谱 GLM-4-Flash 真 AI，基于"偶像主义"逻辑为你生成带代号、口头禅、动作锚点、低谷反应的专属人设卡。

image
image1398×802 215 KB

[截图：灵魂编织器]

[第二站] 搭建出道
2. 零元出道战 — 三套免费公皮衣橱（水色小天使 / 甜酷美少女 / 冷冷小可爱），每张卡片做成全息橱窗样式（conic 流光边框 + 四角衣架挂钩 + 两侧挂杆 + 价签标签），内嵌真实 Live2D 模型实时呼吸预览，作者署名可跳转 B 站主页。
3. 皮套工坊 — PNG 立绘上传预览，弹跳/摇摆动画反馈，理解"皮套"概念的最小门槛。
4. 软件武器库 — 面捕驱动/直播录制/剪辑特效/运营变现的软件卡片库。
5. 直播间装修站 — 16:9 多图层预览模拟器，背景/边框/LIVE 标/弹幕层全可调，含应援弹出框与素材站推荐。
6. 直播间装修规划器 — 初配信/杂谈/歌回/游戏回 4 种布局 Grid 示意，一键保存到 localStorage。
7. 粉丝应援所 — 三档周边方案 + 出道购物清单生成 + 粉丝运营终端策略。

[第三站] 直播体验
9. 直播间模拟器 — 仿 B 站布局，独立 Live2D 半身渲染，弹幕/SC/礼物/观众全员联动。
10. 真实直播系统 — 主播端 getUserMedia 采集摄像头 + MediaPipe FaceMesh + KalidoKit 解算面捕参数 → PHP API 轮询 → 观众端实时驱动本地 Live2D 模型。这是真正可用的直播系统，不是模拟器。

[截图：主播端面捕驱动 + 观众端实时同步]

[第四站] 遇到困境
11. 主播困境模拟器 — 5 个真实场景（话题发散/没人回应/游戏势/数据停滞/V感），每个 3 选项，选择实时影响在线人数/弹幕密度/热度曲线。

[第五站] 价值观引导
12. Vup 出道守则 — 困境之后、复盘之前的叙事模块，三条守则强调"人设是灵魂不可脱离"“中之人不可见不可营业”“保持二次元的美好”——这是整个项目的灵魂锚点。"中之人不可见"在这里有两层含义：表层是行业规范（不泄露中之人的真实身份），深层是**"中之人必须存在"的坚持**——在 AI 主播可以替代一切的时代，我们坚持那个在皮套后面、会笑会难过会鼻酸的人，才是虚拟主播不可替代的灵魂。

[第六站] 复盘成长
13. 直播复盘报告 — 数据面板 + Canvas 在线曲线图 + S/A/B/C/D 评级 + count-up 数字动画 + 出道小礼包（11 节经验帖打字机展开）。

[终点] 收获蜕变 — 探索进度条 10 节点 localStorage 持久化，鼠标跟随导航器随时跳转，全流程闭环。

相比初赛 Demo 的升级

初赛我们交付的是一个基础模块展示页：静态卡片 + PNG 占位 + 本地伪 AI。复赛阶段我们把它打磨成了一个真正能开播、能面捕、能直播同步、有价值观的完整产品：

升级项 初赛 复赛
a. Live2D 渲染 无 半身渲染 + 双实例互斥 + pause/resume（不 destroy）
b. AI 接入 本地伪随机 智谱 GLM-4-Flash 真 AI + PHP 代理 + 灵魂编织器
c. 视觉体系 单色背景 深海赛博配色 + 视差光斑背景 + 全屏滚动 scroll-snap
d. 交互细节 无 鼠标跟随导航器 + 标题 Decode 入场 + HUD 角框 + 多层光效
e. 面部捕捉 无 MediaPipe FaceMesh + KalidoKit 驱动 Live2D
f. 多模型 占位卡 零元出道战 3 模型共用 WebGL 上下文
g. 价值观模块 无 Vup 出道守则（三条精神守则）
h. 性能 卡顿 定时器 pause/resume / blur 删除 / reflow 优化 / CRT 合并
i. 安全 裸输出 XSS 防护 + fetch 超时 + 转义统一 + z-index 令牌化
j. 布局 长滚动 全屏滚动 + 三档背景轮替
k. 直播系统 无 主播端开播 + 观众端实时观看 + 面捕参数传输
l. 面捕驱动 无 摄像头实时捕捉表情驱动 Live2D 头部/眨眼/嘴形
m. 弹幕同步 单机 PHP+MySQL 轮询，主播观众双向可见
n. 直播间 UI 普通 Windows XP 桌面风格，可拖动窗口+任务栏+时钟
o. 掉线恢复 无 心跳机制 + 10 分钟挂起保留期，弹幕历史不丢

二、产品创作历程

想法来源

我从小喜欢初音未来，喜欢二次元这种文化。在这个圈子里泡久了，看见太多想成为虚拟主播的朋友卡在第一步：定制一个 Live2D 模型动辄几千上万，面捕/动捕/直播软件的专业术语让人一头雾水，有了皮套却不知道怎么立人设，找画师、买设备、学直播技巧的信息散落在无数个 QQ 群和 B 站专栏里。

身边就有朋友这样的烦恼——启动资金高、技术门槛高、缺乏人设指引、信息碎片化。四座大山压在每一个想出道的二次元爱好者头上。

现在的直播市场已经饱和了，AI 主播也越来越多。 她们有完美的皮套、永不停播的体力、不会塌房的人设、还能 AI 实时回复观众的每一句弹幕。从效率上讲，她们比任何人类主播都"完美"。

PS.我最喜欢的AI主播是 **Neuro-sama**

image
image466×510 82.6 KB

可我每次看这种直播，总觉得差点什么。差的那点东西，我管它叫"人味儿"。

AI 不会因为一条老粉的回归弹幕突然鼻酸，不会在深夜直播里说出一句暴露真实情绪的话，不会因为数据停滞而真的难过，也不会因为收到一封长信而在镜头前愣住三秒。这些"不完美"恰恰是人类主播最珍贵的东西——她们在用自己的真实情绪，给屏幕另一端的人以真实的陪伴。

所以我还是想做虚拟主播的指南，支持中之人是真实的人类来扮演。但我看到过太多先例——中之人撕破皮套去经营皮下，把皮下人类和这个皮绑定在一起。这就违背了二次元的人设。人会塌房，如果中之人被绑定上坏事，就会影响到这个人设本身。“中之人不可见、人设不可崩”——这是虚拟主播文化的底线，也是我们把它单独做成"Vup 出道守则"模块的原因。技术可以降门槛，但精神锚点不能丢。

于是有了这个项目的核心信念：创造一个二次元美好的世界，让想成为小偶像的人有路可走。

从初赛到复赛的演进

初赛阶段：我们搭起了 7 个基础模块的骨架——灵魂编织器（本地伪 AI）、零元出道战（占位卡）、皮套工坊、直播间装修站、软件武器库、粉丝应援所。视觉上是赛博励志风，但功能上是"展示"多于"体验"。

复赛阶段：我们做了三件大事——

  1. 把"展示"变成"体验"：接入真 AI、接入真 Live2D、接入真面捕、接入真直播同步。让用户不是在看一个介绍页，而是真的在走一遍出道路。
  2. 把"工具集合"变成"仪式感体验"：加入困境模拟器、Vup 出道守则、复盘报告、出道小礼包，让每个模块都是出道路上的一个站点，有起伏、有抉择、有价值观、有蜕变。
  3. 把"能跑"变成"跑得稳"：性能优化（4 项关键优化）、安全修复（XSS/超时/转义）、代码体检（transition 清理、颜色令牌化、CSS 拆分）、无障碍（prefers-reduced-motion / aria-label）。

遇到的最大技术挑战：Live2D WebGL 上下文冲突

这是复赛最折腾的一段时间，也是我们最想分享给评委的踩坑经历。

故事是这样的：直播间模拟器要内嵌真实 Live2D 半身渲染，用户滚出直播间再滚回来时模型要能恢复。最初我们用 destroy(true) 销毁实例——结果变量没重置，init 直接跳过。第二轮改成 destroy(false) 保留 canvas——结果 canvas 上的 WebGL 上下文已死，新 PIXI.Application 绑定死上下文，黑屏 + img 已隐藏 = 白屏。第三轮加 ensureCanvas/ensureFallbackImg——canvas 还在（死的），照样失败。

根因是 WebGL 的硬限制：canvas 的 WebGL 上下文一旦 destroy 不可复用，必须创建全新 canvas 才能获得新上下文。

最终方案：不再销毁 PIXI 实例，只暂停/恢复 ticker + 切换 canvas/img 可见性。模型留在内存中（约十几 MB，可接受），滚回瞬间恢复。这就是 pause/resume 替代 destroy/recreate 的由来。

后来零元出道战要同时加载 3 个模型，又踩了第二个坑：Cubism Core 的 CubismFramework 是全局单例，shader program 绑定到第一个 WebGL 上下文。新建 PIXI.Application 会触发 bindTexture: object does not belong to this context 错误。解决方案是所有模块共用舞台的 PIXI.Application，通过 window.__live2dShared 引用计数管理 ticker 启停，canvas 挪到 body 全屏 fixed 实现视觉隔离。

再后来还遇到一个并发竞态：3 个模型并发 Live2DModel.from() 时，第一个加载完成会重置 Cubism Core 全局状态，导致已加载的后两个模型停止 update。最终改成串行加载解决。

设计哲学

“用最硬核的赛博视觉，讲最温柔的偶像故事”。

视觉外壳是《主播女孩重度连接》式的 Y2K 故障风、CRT 扫描线、霓虹闪烁，制造赛博压迫感；精神内核却是绝对积极向上的"偶像主义"——偶像是在黑暗中给人带来光的人，我们用最混沌的数字代码，承载最热血的追梦宣言。

这套视觉和内核的反差，本身就是一种态度：我们可以用最"AI"的皮，讲最"人"的核。技术外壳越冷硬，里面那颗想成为偶像的心就越发烫。

每个模块都是出道路上的一个站点：灵魂编织器是"找到自己"，零元出道战是"披上战衣"，直播间是"第一次开播"，困境模拟器是"遇到挫折"，Vup 出道守则是"守住底线"，复盘报告是"完成蜕变"。不是工具集合，是完整的仪式感体验。

而整条路径最核心的设计意图，是让用户在走完之后能感受到一件事：成为虚拟主播的难关可以靠工具降下来，但能不能成为照亮别人的那束光，只能靠自己。这也是我们坚持做"真实直播系统 + 面部捕捉"的原因——让用户真的用自己的脸去驱动一个皮套，真的面对真的弹幕，真的经历真的冷场。这一层"真实"，是任何 AI 模拟都给不了的。

三、TRAE 实践过程

开发流程概述

全程使用 TRAE IDE + GLM-5.2 模型开发，代码 100% 由 TRAE 完成。

项目采用模块化架构，实际交付 19 个 JS 文件 + 21 个 CSS 文件按职责拆分，零构建工具、零框架依赖，纯原生 HTML + CSS + JavaScript。TRAE 在这个过程中扮演的不是"代码补全工具"，而是"全程协作者"——从架构决策、踩坑诊断、性能优化到安全审计，每一个关键技术决策都有 TRAE 的参与。

20260803171402
20260803171402283×372 7.83 KB

[截图1：项目文件结构/文件树]

Session ID

  • Session ID 1:
    2191739104268640:97a655e1aa43189698ac43ab9e7fe0cf_6a30e78a2f8ede777a712794.6a61af239826076c461efcf3.6a61af229826076c461efcf1:TRAE Work CN.0.1.39.no_sid.no_ppe.T(2026/7/23 14:05:23)
    2191739104268640:dbb808f06dc05d31fa535526f0b2387a_6a30e78a2f8ede777a712794.6a61b0469826076c461efd21.6a61b0469826076c461efd1f:TRAE Work CN.0.1.39.no_sid.no_ppe.T(2026/7/23 14:10:14)

    重要改动1
    重要改动11440×914 64.4 KB

  • Session ID 2:674439197626436:4cb31defa8682f1117c1b75a2234b288_6a6330dc64107965e26c6f63.6a6334c864107965e26c70ab.6a6334c864107965e26c70a9:TRAE Work CN.0.1.39.no_sid.no_ppe.T(2026/7/24 17:47:52)

    重要改动2
    重要改动21096×859 41.8 KB

  • Session ID 3: 2191739104268640:a504397f79385400e67fede8dfc4bc44_6a66e7c74eb75b41fe2940c3.6a6979aff74ea0022e1df34b.6a6979aff74ea0022e1df349:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/29 11:55:27)

    重要改动3
    重要改动3959×777 31.8 KB

关键 Prompt 示例

Prompt 1（Live2D pause/resume 方案）：

直播间 Live2D 滚出去再滚回来白屏，destroy(true) 和 destroy(false) 都试过了，变量重置也加了。根因是什么？给我一个不销毁实例的方案，要能解释为什么 WebGL 上下文不能复用。

TRAE 不仅给出了 pause/resume（ticker.stop/start + canvas/img 显隐）的方案，还准确诊断出"canvas 的 WebGL 上下文一旦 destroy 不可复用，必须创建全新 canvas"的根因，并主动提示"模型留在内存约十几 MB 可接受"的工程权衡。

Prompt 2（深海赛博配色替换）：

全项目 13 个 CSS 文件共 52 处硬编码 rgba 背景色，背景调亮一档，从 #0a0e1a 改到 #0e1426，所有透明度保留，新增 --bg-deep-rgb 辅助变量，不要漏一处。

TRAE 一次性扫描全部 13 个 CSS 文件，逐处替换硬编码 rgba，并主动新增了 --bg-deep-rgb / --bg-panel-rgb / --bg-card-rgb 三个辅助变量供后续 rgba(var(--bg-deep-rgb), 0.7) 使用，没有遗漏。

image
image1047×825 44.7 KB

Prompt 3（性能优化诊断）：

页面打开后整机卡顿，输入法无法正常打字。排查 5 个性能瓶颈，给我优先级排序和修复方案，不要碰 Live2D 16384 纹理（那个另外处理）。

TRAE 诊断出 5 个瓶颈并排序：①16384² 纹理（暂不动）②live-room.js 4 个 setInterval 永不停止 ③parallax-bg 全屏 filter:blur() ④parallax.js 每帧 23 次 getBoundingClientRect ⑤CRT 扫描线+暗角双全屏合成层。每一项都给出了精确的修复方案（具名 interval + pause/resume、删 blur 改大半径渐变、IntersectionObserver 维护可见集合、合并单层 background-image），后续逐项落地后整机卡顿消失。

image
image943×724 37.4 KB

四、技术方案（加分项）

技术栈

  • 前端：纯原生 HTML + CSS + JavaScript，零构建工具，零框架
  • Live2D：PixiJS v6.5.10 + Cubism 4 Core + pixi-live2d-display v0.4.0
  • AI：InfinityFree PHP 代理（test_outbound.php）+ 智谱 GLM-4-Flash（纯 requests+json 裸调，key 不进前端）（ps.免费模型随时可以升级成高级模型）
  • 面捕：MediaPipe FaceMesh（468 关键点）+ KalidoKit（参数解算）
  • 直播同步：PHP + MySQL 轮询
  • 部署：Vercel（前端）+ InfinityFree（PHP API + MySQL）

架构亮点

1. WebGL 上下文管理：多模型共用单上下文 + pause/resume

这是整个项目最硬核的工程决策。Cubism Core 的 CubismFramework 是全局单例，shader program 绑定到第一个 WebGL 上下文。我们让舞台、直播间、零元出道战三个模块的 Live2D 实例共用舞台的 PIXI.Application，通过 window.__live2dShared 统一管理：

  • acquireApp() / releaseApp() 引用计数协调 ticker 启停
  • safeStop() 尊重引用计数，避免某模块 release 冻死其他模块
  • canvas 挪到 body 全屏 fixed + pointer-events:none 实现视觉隔离
  • 模型用全局坐标定位，scroll 时 rAF 节流重新 position
  • 用 pause/resume（ticker.stop/start）替代 destroy/recreate，避免 WebGL 上下文死锁

2. 性能优化（4 项关键）

  • 定时器 pause/resume：直播间 4 个 setInterval（弹幕/SC/观众/计时器）随模块可见性 pause/resume，离开视口 clearInterval + 清空 DOM
  • blur 删除：视差背景删除 filter:blur()，改用大半径 radial-gradient 模拟模糊，GPU 开销骤降
  • reflow 优化：parallax.js 用 IntersectionObserver 维护可见元素集合（≤3 个），替代每帧 23 次 getBoundingClientRect
  • 合成层合并：CRT 扫描线 + 暗角合并为单层 body::before background-image 平铺，减少 1 个全屏合成层

3. 安全

  • XSS 防护：弹幕/动态文本统一走 DOM API（createElement + textContent）或完整版 esc() 转义（& < > " ' / 六字符）
  • fetch 超时：AI 代理 fetch 必须用 AbortController + setTimeout(20000) 包装，超时走 fallback 并释放锁
  • 转义统一：canvas.toDataURL 包 try/catch 防 CORS，URL 提取用正则禁止 slice
  • z-index 令牌化：全局魔法数字全部收口到 --z-parallax-bg / --z-content / --z-crt-scanline / --z-progress / --z-nav / --z-stage / --z-overlay / --z-modal

4. 无障碍

  • prefers-reduced-motion 覆盖（标题解码降级为 0.3s opacity fade-in，视差停止）
  • 表单元素补 aria-label，icon-only 按钮补 aria-label
  • 所有 <button> 加 type=“button”，外部链接全部 rel=“noopener noreferrer”
  • 所有 <img> 加 loading=“lazy” decoding=“async”

项目文件结构

模块 CSS JS
基础+变量+动画 base.css common.js
通用组件+HUD components.css ui.js
舞台/Live2D/应援 stage.css stage.js
灵魂编织器 soul.css soul.js
零元出道/痛点/计划 debut.css modules.js
皮套工坊 avatar.css modules.js
直播间装修模拟器 decorate.css modules.js
软件武器库 software.css modules.js
粉丝应援所 fans.css modules.js
外部链接传送门 cyber-link.css modules.js
公共布局规则 modules.css —
直播间模拟器 live-room.css live-room.js
直播间装修规划 live-decorate.css live-decorate.js
困境+复盘+礼包+守则 dilemma.css dilemma.js
全局视差背景 base.css (.parallax-bg) parallax.js
鼠标跟随导航器 nav-cursor.css nav-cursor.js
标题解码入场 — title-decode.js
模型注册表 — models.js
战袍 Live2D — debut-live2d.js
Live2D 共享管理 — live2d-shared.js
面部捕捉 face-capture.css face-capture.js
真实直播系统 stream.css stream.js
进入直播间 — enter-stream.js
邀请码申请 invite-apply.css invite-apply.js
响应式适配 responsive.css —

20260803171402
20260803171402283×372 7.83 KB

直播架构

这是复赛最核心的新增能力，不是模拟器，是真实可用的直播系统：

  • 主播端：getUserMedia 采集摄像头 → MediaPipe FaceMesh 检测 468 个人脸关键点 → KalidoKit 解算头部旋转/眨眼/嘴形参数 → 节流 100ms 上传到 face.php 覆盖存储
  • 数据传输：面捕参数 + 弹幕通过 PHP API 轮询（InfinityFree 免费主机不支持 WebSocket，用轮询替代）
  • 观众端：轮询拉取面捕参数 → LERP 0.5 平滑 → 每帧写入本地 Live2D 模型的 coreModel 参数 → 主播表情实时同步到观众端模型
  • 弹幕系统：PHP + MySQL 轮询，主播与观众双向弹幕，5 个模块联动，全员可见可发
  • 掉线处理：心跳机制（30s 间隔）+ 10 分钟挂起保留期，断线重连恢复直播状态，弹幕历史不丢
  • UI 风格：直播间采用 Windows XP 桌面风格（银色金属 Chrome + Luna 开始按钮 + 可拖动窗口 + 任务栏 + 时钟），复古与赛博形成反差

音频同步架构已搭建（MediaRecorder → base64 → PHP → 轮询播放），受免费主机限制暂未完全稳定，复赛后计划升级 VPS 支持 WebSocket 实现完整音画同步。

五、产品演示视频

演示视频

写在最后：这个项目最大的爆点在于"用最硬核的赛博视觉，讲最温柔的偶像故事"。

在 AI 主播可以完美替代人类主播的今天，我们偏偏要做一件"不完美"的事——让真人用自己的脸、自己的情绪、自己的不完美去驱动一个皮套。因为我们相信，当所有的娱乐都被 AI 取代的时候，那个会因为一条弹幕笑出来、会因为没人回应而失落的人，才是虚拟主播真正不可替代的部分。

技术是手段，偶像才是答案。而偶像之所以是偶像，是因为她身后有一个真实的人。