🐾 Day 5|桌面数字人-接入llm可以对话啦

一、项目介绍:这是啥玩意儿?

先唠两句背景。我在做一个叫 dg-man(桌面数字人) 的小软件,本质上是一只 趴在电脑桌面的 3D 虚拟桌宠 🐾。

它长这样:

  • 一个 瘦长的小窗口(300×560),默认贴在你屏幕右下角;
  • 里面是个 3D 小人,用了 MToon 卡通材质(就是那种二次元质感),会待机、会眨眼、会挥手、会跟你「对视」(视线追踪);
  • 窗口是 透明的,鼠标平时能「穿」过它去点下面的东西,hover 上去才显示控制条;
  • 还带 FPS 计数器和气泡聊天功能。

技术栈一句话带过:Electron(套壳跑网页技术)+ Vue3(界面)+ three.js / VRM(3D 模型)。

简单理解:它就是一个住在你桌面角落、能陪你说话的二次元小跟班。

目前项目在 v2.0.0 阶段,主线目标就一个:先把「能聊天」这个基础能力打通,后面再慢慢加语音、记忆这些大招。


二、本次实现内容:这周我干了啥?

这波主要啃两块:一个是服务设置里的两个小功能(4.3 收尾),一个是重头戏------让数字人真的能对话(需求-4.4)。

1️⃣ 音色按性别「自动对号入座」

之前音色下拉框把所有声线都堆一起,乱。现在:

  • 选了「女」模型,就只给你看女声线;选了「男」就只看男声线;
  • 默认直接选列表里第一个,不用手动挑。

2️⃣ 快捷键「防手滑校验」

服务设置里能设快捷键,但以前乱设会冲突。现在加了判重 + 保留热键校验:

  • 像 Ctrl+C(复制)、Ctrl+V(粘贴)、Ctrl+Z(撤销)、Tab(切窗口)这些系统常用键被锁死,不让当热键用;
  • 设重复了、或者只按了纯修饰键(比如只按 Shift),会直接红字提醒。

3️⃣ 重头戏:对接大模型,数字人开口说话了!💬

这是核心。规格很克制(先不做语音、不做记忆、不做表情动作),只做纯文字版基础对话:

  • 封装了一个 llm.js:在主程序里调大模型(参考官方用 OpenAI 兼容接口 + 腾讯云 MaaS 地址),好处是密钥不落到前端、还能绕开网页跨域限制;
  • 人物设定按性别初始化:男/女各一套「人设」文案,自动写进配置;
  • 对话动作类型分了 6 类(聊天 / 用户说话 / 播放语音 / 截图 / 鼠标操作 / 键盘操作),方便以后存流水账;
  • 对话框 UI 反复打磨 ,最终形态是:
    • 默认只露「头部」(对话历史 / 上传图片 / 关闭 三个按钮)+「尾部」(输入框 + 发送);
    • 点「对话历史」才展开中间聊天区(最高 300px),再点收起;
    • 「对话历史」和「上传图片」两个面板互斥,开一个关另一个;
    • 你发的在左、数字人回的在右,数字人头像用的就是当前模型的图片;
    • 每次重新打开对话框,会重置位置和内容;
    • 所有对话(你发的 + 它回的)都写进数据库,方便查「今天聊了啥」。

4️⃣ 顺手修了个测试数据库的坑

开发时测试数据总被清掉,把数据库路径固定写到了 src/main/db/dgman.test.db,省得每次打包把测试记录冲没了。


三、卡点难点:踩过的坑(血泪史)

折腾过程里卡了好几处,挑最典型的唠唠:

🔧 控制台中文变乱码 本来想改终端编码,结果发现 GUI 子进程改不了代码页。换路子:日志同时写进一个 UTF-8 文件,既能看输入也能看输出。

🔧 面板展开有「动画打架」 高度过渡动画和实时算高度抢节奏,读到了中间值导致跳动 → 干脆去掉过渡动画。

🔧 flex 布局把「收起」撑破了 收起时设了 max-height:0,但 flex 子项默认 min-height:auto 会强行保留 ~30px 深色条 → 补一句 min-height:0 解决。

🔧 数据库「看起来是空的」 用了 WAL 写入模式,数据先囤在临时文件里,外部工具一眼看过去主库像没存 → 每次写入后主动 wal_checkpoint 落盘。

🔧 数据库路径迷路 开发时跑的库其实在 out/ 编译目录里,不是源码目录,害我查半天记录。最后用 app.getAppPath() 锁死到源码目录下的测试库。

一句话总结难点:桌面端「窗口高度自适应 + 数据库落盘 + 路径定位」这三件事,每一件都能让你怀疑人生。


四、后续规划:还差啥?

v2.0.0 把「能聊」打通只是起点,后面路子还很宽:

🚀 v3.0 大版本 :接入 TTS(语音合成)/ ASR(语音识别)/ 记忆系统 / 微表情动作 ,让数字人从「打字聊」进化到「开口说 + 记得你」; 🚀 聊天升级 :独立聊天窗口、记忆卡片 Tab(和流水账分离)、按设定长期记住你的偏好; 🚀 开发课程 :把这套「从 0 做桌面数字人」的经验做成课程; 🚀 笔记归档:开发笔记同步发小红书 / 掘金,并整理进腾讯文档。


五、邀请加入:一起来玩!

如果你也对 「在桌面养个会陪你的人工智能小伙伴」 感兴趣,或者你在折腾 Electron / three.js / 大模型接入时踩过类似的坑------

👋 欢迎来评论区唠唠,或者关注我,后续 v3.0 的语音 + 记忆实战会持续更新!

一起把冷冰冰的桌面,变成有点温度的小角落吧 🌿

相关推荐
沧沧凉凉6 小时前
一段需求、零素材,Claude Code 派了 33 个代理给我做了个 3D 动作游戏
游戏·ai编程·three.js
福兮说7 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理8 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6668 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)9 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan9 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_10 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒10 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技10 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu11 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub