设计一个类抖妹酱的ai智能桌宠/或网页智能

Article detail

设计

2025/11/19 · 27 分钟阅读

设计一个类抖妹酱的ai智能桌宠/或网页智能

抖妹酱 — AI 智能桌宠 / 网页桌宠 设计与实现方案

目标:设计并实现一个多骨骼、可表现情绪、支持语音交互与消息通知/自动回复的桌面智能宠物“抖妹酱”。要求可运行在桌面(Windows/macOS/Linux)并可在浏览器中作为候选实现。


1. 概览(高层需求)

  • 多骨骼角色(面部表情、发型、服装、配饰、身体动作、背景)
  • 动画:预定义动画、混合过渡、情感驱动动作
  • 语音交互(STT → 意图理解 → TTS),支持本地与云服务两种模式
  • 情感分析(基于文本/语音)驱动表情和动作
  • 能读取/响应用户的微信、QQ 消息并在桌面或手机端弹出提醒(需用户授权)
  • 可配置:角色皮肤、动作包、行为策略
  • 可部署:原生桌面应用 / 桌面窗口化网页(Electron/CEF) / 系统级悬浮窗

2. 关键组件与数据流

  1. 渲染层(Presentation)

    • 负责绘制角色并播放动画
    • 接收 AnimationPoseExpression 命令
  2. 动画与骨骼系统(Animation Engine)

    • 支持 Spine 或 Live2D 骨骼动画
    • 支持骨骼混合(layered animation)、表情混合、IK(如 Spine 支持)
  3. 交互层(Interaction Manager)

    • 监听输入(鼠标、键盘、点击、系统通知、消息事件、语音事件)
    • 触发状态机和动作
  4. 理解与对话层(NLP/LLM)

    • 解析用户意图、生成回复文本
    • 可接云 API(OpenAI, Azure),或本地 LLM(Llama.cpp, gpt4all 等)
  5. 语音子系统(STT / TTS)

    • STT:Whisper(本地)/ Google Speech-to-Text / Azure Speech
    • TTS:Coqui TTS / Azure / Google / Edge TTS
  6. 情感分析(Emotion)

    • 文本情感:transformers 模型(Hugging Face)或云服务
    • 语音情感(可选):对语音特征进行情感推理
  7. 消息桥接(WeChat/QQ)

    • 采集通知或通过官方/第三方 SDK 与账号授权后获取消息
    • 根据策略触发自动回复(可配置规则)
  8. 持久层

    • 用户偏好、对话上下文、动画资料、皮肤包

数据流简要:输入(鼠标/通知/语音/消息)→ Interaction Manager → NLP/Emotion → Behavior Decision → Animation/TTS → 输出(动画/语音/消息)


3. 资产(角色与动画)

3.1 角色来源

  • 经济拮据:使用开源免费素材(Spine/Live2D 免费资源、OpenGameArt、Kenney)或找独立画师委托(约稿)
  • AI 生成:使用图像生成工具(需注意版权/商用许可),再人工拆分层次或重绘

3.2 格式与 runtime

  • Live2D (Cubism):适合面部表情丰富的 2D 角色,官方有 native / web runtimes(js / c++)。
  • Spine:通用的骨骼 2D 动画,runtime 丰富(C#, C++, JS, Godot)。

建议:如果已在 Spine/Live2D 上建好骨骼,优先使用其官方 runtime;在桌面端可选择对应的 native runtime 或在 Web 环境内用 JS runtime。


4. 桌面显示方式(关键问题:怎么直接在桌面看到,而不仅在浏览器)

方案 A — 原生桌面应用(推荐)

  • 技术栈:C++/Qt (QML) + Live2D/Spine native runtime 或 Electron + CEF + JS runtime

  • 优点:性能好、系统集成深(系统托盘、开机启动、窗口置顶/透明)

  • 实现要点

    • 创建一个无边框、透明背景、始终置顶的窗口;窗口要支持鼠标穿透切换(例如按住某键可拖动)。
    • 使用 GPU 加速(OpenGL / Vulkan)渲染动画。
    • 支持多分辨率与 DPI 缩放。

方案 B — Electron / WebApp 捆绑(开发速度快)

  • 使用 JS/HTML5(例如 pixi.js + spine-js / live2d.js)渲染角色,打包为 Electron 应用。
  • 优点:开发快、易集成第三方 JS 库
  • 缺点:内存占用可能高、需要打包体积大。

方案 C — 系统级桌面小组件

  • Windows:使用 Rainmeter 插件或 Win32 悬浮窗;也可以做成一个透明的 Win32/WinUI 无边框窗口。
  • macOS:使用 Cocoa 创建 NSWindow,设置为无标题栏、透明并允许点击穿透。
  • Linux:使用 Qt / GTK 创建顶层窗口并设置 override-redirect 或使用 compositor API(Wayland/X11)处理透明度和置顶。

结论:若 Qt 对接困难,Electron 做法是常用替代;另一个折衷是用 Qt 的 QWebEngineView 嵌入网页 runtime(这样利用 Live2D/Spine 的 js 版本),解决 Qt 无法直接渲染某些 runtime 的问题。


5. Qt 为什么"对接不了"(排查建议)

常见问题与解决:

  • runtime 语言绑定缺失:Live2D/Spine 提供 C++ runtime,但需要正确编译链接;检查 ABI/编译器兼容(GCC vs Clang)。
  • 渲染冲突:Qt 默认使用自己的 OpenGL context,和 runtime 的 GL 使用须统一或在同一 context 下渲染;可使用 QOpenGLWidgetQQuickFramebufferObject
  • 性能/线程问题:渲染应在 GUI 主线程或使用显式的 GL context 共享。不要在非主线程直接调用 GL 上下文。

替代方案:将 Spine/Live2D 的 JS runtime 放在 QWebEngineView(Chromium)里渲染——这是很多团队的折衷方法。


6. 语音与 NLP 集成(离线/在线选项)

STT(语音转文本)

  • 本地:OpenAI Whisper(离线,需较强 CPU/GPU),Vosk(轻量、低延迟)
  • 云端:Google Speech-to-Text、Azure Speech

TTS(文本转语音)

  • 本地:Coqui TTS、Mozilla TTS
  • 云端:Google/Azure/Edge TTS(高质量)

NLP / 对话

  • 云:OpenAI GPT 系列、Azure OpenAI
  • 本地:Llama.cpp / Mistral / Ollama / gpt4all

建议策略:初期用云服务做 POC(更少集成成本与更好质量),后期按需要迁移到本地模型以减少成本/提升隐私。


7. 情感分析(Emotion)

  • 对用户文本使用轻量情感模型(正/中/负 + 强度)驱动动画层(smile intensity / tears / idle slump)。
  • 对语音可用短时频谱特征 + 分类器估计情绪(可选,复杂度高)。

映射示例:

  • 正面高强度 → 表情:大笑 + 跳跃动画
  • 负面中强度 → 表情:低头 + 微泣动画
  • 中性/困惑 → 眨眼 + 小问号泡泡

8. 微信 / QQ 消息读取与自动回复(法律/合规与实现)

重要提醒(合规与隐私):必须征得用户账号授权,且使用不违反平台的服务条款。自动化登录/抓包/逆向可能违反平台政策并带来封号风险。

可行的实现方式(从安全到冒险按优先顺序)

  1. 官方 API / 企业微信(推荐):使用企业微信、或对接开放平台(如果你的使用场景允许企业账号),通过标准 API 获取消息并回复。
  2. 桌面通知监听(安全、用户授权):在用户的桌面客户端上监听通知(Windows Notification, macOS Notification Center, Linux notify),当微信/QQ 在系统上弹出通知时读取通知内容并触发桌宠逻辑。这种方式较为安全且不涉及账号逆向。
  3. Web 微信 + 授权扫描(半自动):用 Web 微信登录(需扫描 QR),通过 itchat(Python)或 wxpywxbot 等第三方库进行消息收发。注意:这些库依赖 Web 微信接口,可能不稳定或被封禁。
  4. SDK / Third-party clients(有风险):使用非官方 SDK(例如 OICQ/QQBot),能做更多自动化,但存在账号安全和合规问题。

建议:优先采用“通知监听 + 用户授权”的方式作为 MVP;长期看可考虑企业微信或让用户自行在手机端设置『转发到桌面』的授权通道。

自动回复策略:

  • 配置化规则(关键词触发、自动回复模板、免打扰时间段)
  • 智能回复:先用 LLM 生成回复草稿,展示给用户确认或直接回复(视用户偏好)

9. 行为与状态机设计(示例)

基本状态

  • Idle
  • Listening(语音)
  • Thinking(NLP)
  • Happy / Sad / Angry / Sleepy
  • Notified (收到消息)

示例决策树

  • 收到消息 -> emotion.analysis -> if (high-priority) -> popup + play "surprised" + speak short reply
  • 用户唤醒 (语音) -> STT -> intent -> 跳转到对话或执行动作

动画层:优先级从高到低:System Alert > User Interaction > Emotion Idle > Background Idle Animation


10. 性能与包装

  • 使用 GPU 加速渲染(OpenGL/Vulkan/Metal)

  • 音频与模型推理可放到单独进程或服务(避免阻塞 UI)

  • 打包:

    • Windows:MSI / portable EXE(Electron)/ NSIS
    • macOS:.app + notarize
    • Linux:AppImage / .deb

11. MVP(最小可行产品)路线图(4 周示例)

  1. Week 1 — 原型

    • 选择 Spine 或 Live2D 的现成免费角色(或临时占位图)
    • 用 Electron + live2d 做一个能展示角色、播放 3 个动画(idle / smile / surprise)的桌面应用
  2. Week 2 — 交互

    • 加入点击拖拽、鼠标悬停触发表情
    • 加入简单的状态机与表情映射
  3. Week 3 — 语音 & TTS

    • 集成 Whisper(离线小模型)或 Azure STT;集成 TTS(Coqui 或云端)
    • 实现语音唤醒 → 文本回复 → 角色同步表情
  4. Week 4 — 通知与消息桥接

    • 实现系统通知监听(Windows/macOS/Linux);当检测到微信/QQ 通知时弹出提示并执行动画
    • 加入自动回复规则(用户可开/关)

12. 开发资源与库(推荐清单)

  • 动画:Live2D Cubism SDK, Spine Runtime (JS/C++)
  • 渲染:pixi.js(Web)、Qt QOpenGLWidget(原生)、SDL2(跨平台)
  • 桌面打包:Electron, Qt (qmake/CMake)
  • STT:Whisper (OpenAI), Vosk
  • TTS:Coqui TTS, Google/Azure TTS
  • LLM:OpenAI API, Llama.cpp(本地)
  • WeChat/QQ:企业微信 API;桌面通知监听库(WinAPI / macOS APIs / libnotify); Python itchat/wxpy(注意稳定性)

13. 隐私与安全注意事项

  • 所有消息读取/自动回复功能应在明确授权后启用
  • 记录本地对话或云端上传前应征得用户同意
  • 如果使用第三方云服务,告知用户数据可能会被处理于第三方服务器
  • 自动回复默认关闭,用户手动开启并配置策略

14. 示例微交互用例

  • 用户疲惫(情绪识别为负面):桌宠走过去轻拍肩膀(动画)并说:"要不要喝杯水?我来放首轻音乐。"(提供可点击的‘播放音乐’)
  • 收到重要消息(关键词匹配):桌宠突显惊讶并在屏幕角落显示简短预览,提示用户是否需要回复
  • 夜间免打扰:根据系统时间或用户设置,桌宠切换到睡眠模式。

15. 可选进阶功能(后期迭代)

  • 多角色/皮肤商店
  • 用户自定义动画编辑器(小白友好)
  • 记忆系统:长期记住用户偏好与对话历史
  • 跨设备同步(手机/电脑)
  • 小游戏/任务系统,增加长期粘性

16. 结语与下一步建议

  1. 先做一个 Electron 原型(最短路线),验证动画、交互与语音通路是否顺畅。
  2. 若性能或集成受限,再逐步迁移到 Qt/native 实现(使用 native Spine/Live2D runtime)。
  3. 微信/QQ 功能优先做通知监听 + 手动确认回复的安全方案。除非你愿意承担被封号的风险并能够长期维护非官方接口。

如果你愿意,我可以:

  • 帮你把 Week 1 的 Electron + spine-js 的最小原型代码 scaffold 出来;
  • 或者给出一个用 Qt + QWebEngine 嵌入 live2d.js 的最小示例。

请告诉我你更倾向:Electron 原型 还是 Qt 原生(继续排查对接问题),我就直接给出代码骨架与实现步骤。

评论

动作测试