基于DeepSeek的沉浸式对话网站开发实战(一）
一句话介绍：
用JavaScript直接调用DeepSeek官网的API，让虚拟人物“活”过来和你聊天！
技术实现（超直白）：
- 前端：纯HTML + CSS + JavaScript（没用什么复杂框架）
- API调用：直接用了DeepSeek官网的聊天接口（
fetch发个请求就行） - 古人设定：
- 每个古人角色写了个简单的提示词（比如告诉AI：“你现在是李白，说话要豪放，爱喝酒”）
- 用户输入问题 → 发给DeepSeek → 返回古人风格的回答
async function askLiBai(question) {
const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer 你的API_KEY"
},
body: JSON.stringify({
model: "deepseek-chat",
messages: [
{ role: "system", content: "你是唐代诗人李白，回答要狂放不羁，带点醉意" },
{ role: "user", content: question }
]
})
});
const data = await response.json();
return data.choices[0].message.content;
}
// 调用示例
askLiBai("今天心情不好怎么办？").then(answer => {
console.log("李白说：", answer); // 比如输出："哈哈哈！不如与君共饮三百杯！"
});为什么简单但好玩？
- 不用训练模型，不用搞服务器，DeepSeek的API直接搞定AI部分
- 改个提示词就能换角色（比如把李白换成杜甫，语气立刻变沉稳）
- 纯静态网页也能用，丢到GitHub Pages就能分享给朋友
缺点（老实人版）：
- API免费额度用完了可能要付费（但玩玩完全够用，粗略计算，充值十元够用个两个月）
- DeepSeek官网API有时候响应慢，等得让人想“穿越回古代”（可以通过更换阿里云/腾讯云部署的DeepSeek速度能快很多）
| 模型 | deepseek-chat | deepseek-reasoner | |
| 上下文长度 | 64K | 64K | |
| 最大思维链长度(2) | - | 32K | |
| 最大输出长度(3) | 8K | 8K | |
| 标准时段价格 （北京时间 08:30-00:30） |
百万tokens输入（缓存命中）(4) | 0.5元 | 1元 |
| 百万tokens输入（缓存未命中） | 2元 | 4元 | |
| 百万tokens输出 (5) | 8元 | 16元 | |
| 优惠时段价格(6) （北京时间 00:30-08:30） |
百万tokens输入（缓存命中） | 0.25元（5折） | 0.25元（2.5折） |
| 百万tokens输入（缓存未命中） | 1元（5折） | 1元（2.5折） | |
| 百万tokens输出 | 4元（5折） | 4元（2.5折） | |
话不多说，进入正题
1. 注册账号：成为“AI门派弟子”
- 第一步：访问DeepSeek-API开放平台（门派山门）。
- 第二步：点击「注册」，填手机号、设密码（相当于拜师贴）。
- 小贴士：密码要像武林秘籍一样复杂，别用
123456这种“三脚猫功夫”！
2. 领取“秘钥”：一键生成API Key
- 登录后，找到「API Keys」页面（藏经阁的钥匙柜）。
- 点击「创建API Key」——啪！系统瞬间吐出一串神秘代码（比如
sk-李白斗酒诗百篇）。 - 重点：这钥匙只显示一次！复制后立刻藏进保险箱（比如密码管理器），否则丢了只能重新“铸剑”️。
注意事项（避坑指南）
- ❌ 别把Key贴到GitHub！否则会被江湖黑客“顺手牵羊”。
- 偶尔卡顿：AI思考时像老黄牛耕地，加个
加载动画假装它在“酝酿诗兴”。
终极秘籍
想更溜？直接看官方文档（武功秘籍全本）！
现在，你已经是“AI江湖”的持钥少侠了，快去拯救（折腾）世界吧！
1. HTML 文件 (index.html)
AI聊天
解释：HTML文件就像房子的框架，定义了结构但没有任何装饰或功能。它告诉浏览器"这里有个聊天框，那里有个输入框"，但具体长什么样、怎么工作它不管。
2. CSS 文件 (style.css)
/* 给整个"数字客厅"定个基调 */
body {
font-family: Arial; /* 选择清晰易读的字体 */
max-width: 800px; /* 不让聊天室太宽，保持舒适阅读 */
margin: 0 auto; /* 居中显示，像挂在墙上的画 */
padding: 20px; /* 留点呼吸空间 */
}
/* 聊天容器 - 我们的"数字对话泡泡浴缸" */
#chat-container {
height: 400px; /* 限制高度，避免无限延伸 */
overflow-y: auto; /* 消息多了自动滚动，像自动卷纸 */
margin-bottom: 20px; /* 和输入框保持礼貌距离 */
}
/* 用户消息 - 蓝色泡泡，像从右边飘来的云 */
.user-message {
background: #e3f2fd; /* 柔和的蓝色 */
margin-left: auto; /* 靠右对齐 */
max-width: 80%; /* 不让泡泡太宽 */
padding: 10px;
border-radius: 10px 10px 0 10px; /* 圆角只在左侧 */
margin-bottom: 10px;
}
/* AI消息 - 灰色泡泡，像从左边飘来的云 */
.bot-message {
background: #f1f1f1; /* 中性灰色 */
margin-right: auto; /* 靠左对齐 */
max-width: 80%; /* 同样限制宽度 */
padding: 10px;
border-radius: 10px 10px 10px 0; /* 圆角只在右侧 */
margin-bottom: 10px;
}
/* 输入区域 - 我们的"数字麦克风支架" */
#input-area {
display: flex; /* 让输入框和按钮并排站 */
gap: 10px; /* 保持适当距离 */
}
/* 输入框 - 用户打字的"数字键盘" */
#user-input {
flex: 1; /* 占据剩余空间 */
padding: 10px; /* 让文字有呼吸空间 */
border: 1px solid #ddd; /* 优雅的边框 */
border-radius: 5px; /* 轻微圆角 */
}
/* 发送按钮 - 闪亮的"发送火箭" */
button {
padding: 10px 20px;
background: #007bff; /* 明亮的蓝色 */
color: white;
border: none;
border-radius: 5px;
cursor: pointer; /* 鼠标悬停变成小手 */
transition: background 0.3s; /* 平滑的颜色过渡 */
}
/* 当鼠标悬停在按钮上时 - "火箭准备发射"效果 */
button:hover {
background: #0056b3;
}解释：CSS文件是网页的造型师，决定每个元素的外观。它就像室内设计师，决定"对话泡泡应该是蓝色的，圆角在左边，而AI的泡泡是灰色的，圆角在右边"。
3. JavaScript 文件 (script.js)
// 我们的"AI魔法书"的钥匙
const API_KEY = 'your-api-key'; // 替换为你的API密钥
// "记忆宫殿" - 存储对话历史
let messageHistory = [];
// "发送魔法"函数 - 把用户的话变成AI的回复
async function sendMessage() {
const userInput = document.getElementById('user-input').value;
if (!userInput) return; // 如果用户没输入，就像对着空气说话
// 把用户的话放进"记忆宫殿"
displayMessage(userInput, 'user');
document.getElementById('user-input').value = ''; // 清空输入框，准备下一句话
// 开始"魔法仪式" - 调用API
try {
const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}` // 出示"魔法钥匙"
},
body: JSON.stringify({
model: "deepseek-chat", // 选择"魔法书"的版本
messages: [...messageHistory, {role: "user", content: userInput}] // 传递对话历史
})
});
// 解读"魔法书"的回应
const data = await response.json();
const botResponse = data.choices[0].message.content;
// 把AI的智慧放进"记忆宫殿"并展示
displayMessage(botResponse, 'bot');
messageHistory.push(
{role: "user", content: userInput},
{role: "assistant", content: botResponse}
);
} catch (error) {
// 如果"魔法"出错了...
displayMessage("魔法失灵了: " + error.message, 'bot');
}
}
// "展示魔法"函数 - 把消息变成可见的泡泡
function displayMessage(message, sender) {
const chatContainer = document.getElementById('chat-container');
const messageElement = document.createElement('div');
messageElement.classList.add(`${sender}-message`, 'message');
messageElement.textContent = message;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight; // 自动滚动到底部，像自动卷轴
}
// 设置"魔法触发器" - 点击发送按钮或按回车键
document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage(); // 回车键就像"发送火箭"的发射按钮
});解释：JavaScript文件是网页的大脑，负责所有交互和逻辑。它就像魔法师，当用户说话时(输入消息)，它会把消息送到云端AI(魔法书)，然后把AI的回复变成可见的泡泡显示出来。它还负责记住对话历史，就像魔法师的记忆宫殿。
4. 使用说明
- 创建三个文件：
index.html、style.css和script.js - 将上述代码分别复制到对应文件中
- 在
script.js中替换your-api-key为你的实际API密钥 - 在浏览器中打开
index.html即可使用
⚠️ 前方高能预警：你的API Key正在裸奔！
把API Key直接写在前端代码里，就像把家门钥匙插在门锁上还贴张纸条："密码是123456"。黑客们看到这种操作都会感动到流泪——这简直是给他们发"零元购"邀请函啊！
为什么这是作死行为？
- 浏览器脱衣舞：前端代码完全暴露，Chrome开发者工具一按F12，你的Key就像没穿衣服一样被看光光
1
- GitHub公开处刑：无数开发者把带Key的代码上传GitHub，黑客专用爬虫每天能捡到12000+个免费Key（真·白嫖怪快乐日）
- 钱包秒变黑洞：泄露的Key会被用来疯狂刷API，等你发现时，账单已经长得像《三体》里的二向箔
正确姿势（特工级防护）：
// ❌ 自杀式写法（请勿模仿）
const API_KEY = 'sk-我是大冤种';
// ✅ 特工级写法
// 后端："钥匙我藏着，想要？验明正身先！"
fetch('/api/proxy', {
headers: { 'Authorization': '指纹/虹膜验证' }
});紧急补救套餐：
- 立刻甩掉Key！像甩掉前任一样快（控制台点两下的事）
- 给Key上锁：IP白名单+调用限额，比银行金库还严
- 终极奥义：用AWS KMS/阿里云密钥管家，让Key住进钛合金保险箱
记住：前端放Key等于在互联网裸奔，而黑客们都是拿着望远镜的流氓 快用后端代理给Key穿上防弹衣吧！
最优解法：在前端开发一个API-KEY输入功能，每次需要手动输入才可以使用（敬请期待）