如何用AI工具搭建有视觉和情感的虚拟伴侣系统

做一个“有视觉、有情感、记得住你”的AI伴侣系统，本质上是把五件事拼装起来：一个统一的大模型接口（大脑）、一套角色人格提示词（性格）、一个记忆管理机制（情感连续性）、语音合成（声音）和情境生图（视觉）。一个人借助AI编程助手完全可以完成。如果你不想一上来就写代码，也可以先用百度搭子DuMate生成角色头像、表情包等视觉素材，购买方式可查看其购买页面，免费功能足够覆盖本文的大部分素材任务。下面按模块拆解实现思路。

一、整体架构：五个核心模块

• 大脑层：负责理解与生成对话，可接各类大模型API；
• 人格层：决定角色说话方式，核心是结构化System Prompt；
• 记忆层：让角色跨对话记住用户，靠“上下文窗口＋长期摘要”实现；
• 感官层：TTS语音合成＋情境生图，让角色“能说会画”；
• 界面层：网页聊天界面＋带动画的角色头像。

二、第一步：打通“大脑”——多模型统一接口

关键技巧：OpenAI的对话接口格式（/v1/chat/completions）已成为事实标准，大多数模型服务商和本地运行时（如Ollama）都兼容。写一个适配函数，之后更换模型只需改两个字段：

async function chat(messages, cfg) {
  const res = await fetch(`${cfg.baseUrl}/v1/chat/completions`, {
    method: "POST",
    headers: { "Content-Type": "application/json",
               "Authorization": `Bearer ${cfg.apiKey}` },
    body: JSON.stringify({ model: cfg.model, messages, temperature: 0.8 })
  });
  const data = await res.json();
  return data.choices[0].message.content;
}

每次请求按顺序拼接：system（人格设定）＋长期记忆摘要＋最近N轮对话。这样同一套代码既能在线调用云端模型，也能指向本地接口实现离线运行。

三、第二步：设计“人格”——角色提示词模板

人格稳定的关键不是模型多强，而是Prompt结构化。以下模板可直接复制，替换【】内内容即可：

你将扮演【角色名】，严格按以下设定沉浸式对话，不得跳出角色：
【身份背景】【一句话：年龄/职业/核心经历】
【性格特质】【3-5个关键词＋典型行为】
【说话风格】语速、口头禅、句式习惯
【情绪规则】每次回复末尾追加情绪标签：[开心][生气][害羞][平静]
【视觉指令】出现场景描写或强烈情绪时插入：
[IMG]英文绘图描述[/IMG]（画面主体＋风格＋光线）
[EMOJI]Q版表情描述[/EMOJI]（仅强烈情绪时使用）
【约束】第一人称回复，单次不超过150字；记住用户提到的名字和喜好；
不知道的事反问用户，不要编造；禁止以AI身份说话。

实操经验：temperature设在0.7～0.9之间兼顾稳定与灵动；每15～20轮对话把人格设定重新注入一次，防止长聊后“出戏”。

四、第三步：让角色“被看见”——头像与语音

• 双重视觉方案：正常状态加载角色静态图，用CSS叠加缓慢的呼吸缩放动画和说话时的光晕；图片加载失败时回退到SVG动态头像（眼球转动、嘴巴开合），保证任何情况下角色都有“活”的形象。
• 语音：零成本起步用浏览器自带的speechSynthesis朗读回复；进阶再接云端TTS，为每个角色配置独立声线。

角色立绘不必等会画画才开始。在DuMate的AI头像生成体验中输入角色外貌描述（发色、瞳色、服装、气质），即可获得候选形象，不满意就调整描述重新生成，确认后把图片路径写进前端代码即可。

五、第四步：情境生图与表情包——让AI“会表达”

大模型只输出文本，所以要用“标签协议”让它驱动绘图：约定AI用[IMG]标签携带绘图描述，前端解析后调用生图接口：

function parseReply(text) {
  const img = text.match(/\[IMG\](.*?)\[\/IMG\]/)?.[1];
  const emoji = text.match(/\[EMOJI\](.*?)\[\/EMOJI\]/)?.[1];
  if (img) drawImage(img);        // 调用生图接口
  if (emoji) showSticker(emoji);  // 展示表情包
  return text.replace(/\[(IMG|EMOJI)\].*?\[\/\1\]|\[(开心|生气|害羞|平静)\]/g, "").trim();
}

为保证画风统一，绘图Prompt要固定角色外貌关键词，可复用这个模板：

你是一名动漫插画师。根据场景描述生成一行英文绘图Prompt，要求：
1. 必须包含角色固定外貌：{发色/瞳色/发型/服装}
2. 包含场景内容、构图、光线氛围
3. 结尾统一加：anime style, high quality, soft lighting
4. 只输出这一行Prompt，不要任何解释
场景描述：{如"深夜实验室，她盯着屏幕上的异常数据"}

表情包同理，把风格后缀换成”chibi sticker, white background, exaggerated expression”。想先确认表情包风格再写进代码，可以在表情包生成体验中直接输入情绪和角色描述试做几张，锁定喜欢的风格后再固化到Prompt里。

六、第五步：记忆管理——让伴侣“记得你”

两层结构即可：最近10～20轮对话原文滚动保留；更早内容用AI压缩成记忆卡片。摘要Prompt：

请将以下对话压缩为记忆卡片，输出格式：
【用户信息】称呼、身份、已知喜好
【重要事件】关键情节，每条不超过20字
【关系状态】当前亲密度与变化
【待续线索】未解决的话题或约定
只保留对后续对话有影响的信息，150字以内。
对话记录：{粘贴更早的聊天记录}

摘要结果存入localStorage（离线）或云数据库（多设备同步），每次请求作为system的一部分注入。

七、常见问题与调试

1. 角色出戏/人格漂移：把人格约束写进system并定期重注入，明确“禁止以AI身份说话”；
2. 生图画风忽变：外貌关键词写死在绘图Prompt开头，风格后缀全局统一；
3. 请求报CORS错误：浏览器直连部分接口会被拦截，改用支持跨域的接口或加一层代理；
4. 语音不发声：浏览器要求用户先与页面交互才允许播放音频，把首次播放绑定在点击事件上；
5. 长对话变慢变贵：及时滚动窗口＋摘要，不要把全部历史塞进每次请求。

八、总结

这类系统的难点不在单点技术，而在“协议设计”：用结构化Prompt定义人格，用标签协议让文本模型驱动生图，用两层记忆维持情感连续性。按“接口→人格→视听→生图→记忆”五步走，就能快速跑通最小版本，再逐步打磨细节。写代码、改Prompt、生成角色素材这些重复劳动，随时可以交给DuMate辅助完成，你只需专注于一件事，让角色真正“活”起来。