基于DeepSeek的沉浸式对话网站开发实战（四）_deepseek对话前端对话框架-CSDN博客

本文链接：https://blog.csdn.net/H1486853830/article/details/147870723

🌿 前情提要

第一篇：搭建「茅檐竹舍」——基础对话框架
第二篇：雕琢「曲栏回廊」——视觉与记忆系统
第三篇：营造「亭台楼阁」——角色广场与多智能体

而今，我们要为这座「AI园林」注入灵魂——让AI识人辨性，对答如流！

🎋 本期核心功能

1. 【用户人设档案】- 以「观人术」定制应答

用户首次进入时填写《人物小传》（性格、喜好、身份）
AI根据档案调整措辞风格，如：
- 对「豪侠」用「兄台」「痛快」等词
- 对「闺秀」用「芳驾」「雅鉴」等敬语

2. 【重说功能】- 「一言既出，回炉再造」

用户点击「重说」按钮
AI根据对话上下文生成3种不同风格的备选回答

3. 【预设回答】- 「锦囊妙计，随时取用」

读取用户历史对话（上文）并读取用户人设
生成符合语境的用户回答语句

4. 【智能开场白】- 「未见其人，先闻其声」

读取用户历史对话（如上次讨论过「边塞诗」）或者读取用户人设
生成符合人设的问候语：
- 对武将：「将军近日校场演武，可有新得？」
- 对隐士：「山居清幽，先生可采得新茶？」

🎭 1.用户人设档案

📜 HTML部分：古风表单的现代演绎

<div class="settings-group">
    <div class="settings-item">
        <label for="user-name">江湖名号：</label>
        <input type="text" id="user-name" placeholder="如：琅琊王十二" class="settings-input">
    </div>

🤖 代码趣解：

这个<input>就像武侠小说里的"英雄帖"，等着用户签下自己的江湖名号
placeholder里的"琅琊王十二"是在暗示："看！这里有个现成的贵族马甲可以穿"
settings-input类名暴露了它的真实身份——披着古风外衣的现代输入框

    <select id="user-gender" class="settings-input">
        <option value="公子">公子</option>
        <option value="娘子">娘子</option>
    </select>

🎭 趣味观察：

这个<select>是AI的"望气术"工具，用来判断用户是"公子"还是"娘子"
没有"太监"选项说明AI很懂历史——太监不能随便当啊！
默认选中第一个选项，暗示AI内心OS："我赌五毛钱你是个公子哥儿"

🌟 JavaScript部分：AI的识人秘籍

存储函数：

function saveSettings() {
    localStorage.setItem('userName', 
        document.getElementById('user-name').value.trim());
}

🔍 幽默解读：

trim()是在帮用户"修剪"多余空格，就像店小二擦掉招牌上的灰尘
如果用户输入" 王十二 "，AI会贴心记成"王十二"，仿佛在说："知道啦知道啦，不用加空格强调"
localStorage是AI的"江湖记事本"，专门记录各路英雄的特征

⚔️ 彩蛋发现：

includes()方法像在玩"关键词抓阄"游戏
只检测到"游侠"就问宝剑，万一人家是"飞刀游侠"呢？AI这波有点刻板印象了
建议加个else："若检测不到关键词，就问'近日可有什么奇遇？'，万能模板！"

💡 数据流动就像江湖传言

表单输入 → 如同在茶楼登记名帖
localStorage存储 → 像店小二把信息记在账簿上
AI读取使用 → 如同小二见到熟客立刻笑脸相迎

🤖 对话实现

if (messageHistory.length === 1) {
    messageHistory[0].content = `你正在与${localStorage.getItem('userName') || '访客'}(${localStorage.getItem('userGender') || 'unknown'})对话。
    用户人设: ${localStorage.getItem('userPersona') || ''}
    请以${messageHistory[0].content.split('作为')[1].split('，')[0]}的身份和口吻进行对话。
    你需要主动推动故事情节发展，在回复中：
    内容简短不超过50字，动作神态等内容用括号括上`;
}

🔍 趣味解析：

这段代码如同给AI角色颁发"官凭告身"，将用户户籍黄册郑重呈上
localStorage.getItem()恰似师爷翻阅鱼鳞册籍，|| '访客'则是给未具名的来客发放临时牙牌
用split('作为')[1]截取角色封号，宛若上官训示："休论前文繁冗，尔今领受的职衔乃是XX！"
限定"动作神态用括号"——犹如礼部颁发的《仪注规条》，着令AI依礼制行事

📱 效果演示

🎭 2.重说功能

1. 按钮创建（`addRephraseButton`）

const rephraseBtn = document.createElement('button');
rephraseBtn.textContent = '重说';
rephraseBtn.classList.add('rephrase-btn');
rephraseBtn.onclick = (e) => {
    e.stopPropagation();  // 阻止事件冒泡（防误触）
    handleRephrase();     // 触发核心功能
};

🔍 趣味解析

像给AI对话界面装了个"时光沙漏"按钮
stopPropagation()相当于对系统说："这个错我认定了，别劝我！"
按钮样式类rephrase-btn暗示这是VIP级别的后悔特权

2. 核心逻辑（`handleRephrase`）

if (messageHistory.length >= 2 && 
    messageHistory[messageHistory.length - 1].role === "assistant") {
    
    // 删除最近两条记录（用户提问+AI回复）
    messageHistory.pop(); // 扔掉AI回复
    const userMessage = messageHistory.pop(); // 取出用户问题
    
    // 删除界面元素
    const messages = chatContainer.querySelectorAll('.message-container');
    chatContainer.removeChild(messages[messages.length - 1]); // 删AI气泡
    chatContainer.removeChild(messages[messages.length - 2]); // 删用户气泡
    
    return userMessage; // 返回待重说的用户消息
}

⚙️ 技术亮点

双重验证
- 检查消息记录长度>=2
- 确认最后一条是AI回复（防误删用户消息）
同步清理
- 内存数据（messageHistory数组）
- DOM元素（界面气泡）双线操作
数据回传
返回原始用户消息，方便重新触发对话流程

🎨 设计哲学

非破坏性操作
- 先备份userMessage再删除
- 类似git的rebase而非强制推送
视觉即时反馈
删除DOM元素让用户立即看到"时光倒流"效果
状态一致性
确保内存数据与界面显示严格同步

🎭 3.预设回答功能

1. 核心逻辑 (`getPresetResponse`)

const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
    method: "POST",
    headers: {
        "Authorization": `Bearer ${API_KEY}` // 手持令牌叩响AI府门
    },
    body: JSON.stringify({
        messages: [
            ...messageHistory, // 呈上过往对话卷宗
            {
                role: "user",
                content: `生成3个回复${characterName}的选项...` // 递上特制奏折
            }
        ],
        temperature: 1 // 开启文思泉涌模式
    })
})

🔍 精妙之处：

采用...messageHistory展开语法，如同展开"对话长卷"
temperature:1参数让AI的回复更具创意性，犹如翰林院学士微醺作诗
严格限定回复格式（数字序号+括号动作描写），像科举考试的"八股文格式"

2. 响应处理

const options = content.split('\n')
    .filter(line => line.match(/^\d\./)) // 只取带序号的"圣旨条目"
    .map(line => line.replace(/^\d\.\s*/, '').trim()) // 去除序号如太监宣读圣旨时去掉"奉天承运"
    .slice(0, 3); // 只取前三策

⚙️ 技术亮点：

正则表达式/^\d\./像"朱批御览"，只选中格式正确的条目
trim()如同裁掉奏折多余的空白绫边
保底机制确保总有3个选项，好比殿试必取三甲

3. HTML组件

<div id="pull-up-menu" 
     style="display: none; 
            backdrop-filter: blur(100px); /* 琉璃屏风效果 */
            border: 1px solid rgba(255,255,255,0.15)"> <!-- 描金边框 -->
    <div style="display: flex; flex-direction: column; gap: 8px;">
        <button class="preset-btn" data-text="你好！">你好！</button> <!-- 锦囊标签 -->
    </div>
</div>

🎨 设计巧思：

backdrop-filter: blur(100px)创造毛玻璃效果，宛如透过云母屏风看选项
data-text属性暗藏机锋，点击时直接取出文本无需解析
固定底部60px的位置设计，既不会遮挡输入框，又符合"垂手可得"的人体工学

🎭 智能开场白功能

⚜️ 核心流程

const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
    body: JSON.stringify({
        messages: [{
            role: "system",
            content: `作为${characterName}，向${localStorage.getItem('userName')}打招呼...` 
        }],
        temperature: 0.9 // 控制文风稳定性
    })
})

🔮 设计精妙：

角色扮演系统：通过作为${characterName}严格设定AI身份，如同古代"职衔拜帖"

三重用户档案调用：

${localStorage.getItem('userName') || '访客'} // 姓名
(${localStorage.getItem('userGender') || 'unknown'}) // 性别称谓
"${localStorage.getItem('userPersona') || ''}" // 人设标签

活似门房唱名时查阅的"宾客录"

温度参数：temperature:0.9在稳定与创意间取得平衡，如同礼部既守仪制又允变通

🎨 交互细节

加载动画

const loadingElement = document.createElement('div');
loadingElement.className = 'loading-spinner'; // 创建"礼乐进行中"动画

模拟古代"候客茶盏"的等待体验
技术实现：需配合CSS设计旋转的青铜爵造型

消息显示
```
displayMessage(chatContainer, welcomeMessage, 'bot', 0);
chatContainer.scrollTop = chatContainer.scrollHeight;
```
- 自动滚动确保新消息可见，如同堂前小厮及时展开新到的拜帖
- 'bot'参数控制消息居左显示，符合"主左客右"的传统礼仪
数据持久化（详见《基于DeepSeek的沉浸式对话网站开发实战(二）》）
```
localStorage.setItem(`chatHistory_${characterName}`, ...);
```
- 为每个角色建立独立存档，类似"各殿起居注"分册记录
- 键名模板字符串确保隔离性，避免"曹操读到牛顿语录"的时空错乱

📜 提示词工程

content: `作为${characterName}...包含动作描写（用括号标注）...100字左右`

精妙约束：

括号动作：（拂袖）等描写增强沉浸感
字数控制：避免冗长如奏折，保持门房传话的简洁
禁引号：防止AI生成"欢迎光临"等生硬表达

🎭 示例输出

🏯 本篇结语：从代码到「数字人文宫殿」的建造史诗

🌌 一、技术宇宙中的文明复刻

「重说」如时光回溯
- 剑形按钮斩断时空，三版应答似「三策献君」，赋予对话以历史抉择的重量
- 正则表达式/^\d\./如朱批御览，确保AI的「奏对」合乎礼制
「预设回答」若锦囊妙计
- 毛玻璃菜单暗藏「屏风选秀」之美，backdrop-filter渲染出古典朦胧
- temperature:1让AI化身微醺翰林，在格式枷锁中迸发诗性
「开场白」乃礼部仪注
- localStorage的鱼鳞册与|| '访客'的牙牌制度，构建数字时代的称谓体系
- 括号动作描写（拂袖），恰似戏曲程式动作的代码转译