基于DeepSeek的沉浸式对话网站开发实战(一）

最新推荐文章于 2025-05-09 17:11:59 发布

程序员一粟

最新推荐文章于 2025-05-09 17:11:59 发布

阅读量962

点赞数 10

文章标签： java 人工智能 langchain 开发语言深度学习 ai 编程

本文链接：https://blog.csdn.net/jennycisp/article/details/147796251

版权

一句话介绍：
用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)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI聊天</title>
    <!-- 引入CSS文件，就像给网页穿上漂亮衣服 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 聊天容器 - 这是我们的"数字客厅" -->
    <div id="chat-container"></div>
    
    <!-- 输入区域 - 用户的"数字麦克风" -->
    <div id="input-area">
        <input type="text" id="user-input" placeholder="输入消息...">
        <button id="send-button">发送</button>
    </div>

    <!-- 引入JS文件，就像给网页注入"灵魂" -->
    <script src="script.js"></script>
</body>
</html>

解释：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就像没穿衣服一样被看光光
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输入功能，每次需要手动输入才可以使用（敬请期待）

欢迎大家在评论区建议，讨论，质疑

大模型岗位需求

大模型时代，企业对人才的需求变了，AIGC相关岗位人才难求，薪资持续走高，AI运营薪资平均值约18457元，AI工程师薪资平均值约37336元，大模型算法薪资平均值约39607元。
在这里插入图片描述

掌握大模型技术你还能拥有更多可能性：

• 成为一名全栈大模型工程师，包括Prompt，LangChain，LoRA等技术开发、运营、产品等方向全栈工程；

• 能够拥有模型二次训练和微调能力，带领大家完成智能对话、文生图等热门应用；

• 薪资上浮10%-20%，覆盖更多高薪岗位，这是一个高需求、高待遇的热门方向和领域；

• 更优质的项目可以为未来创新创业提供基石。

可能大家都想学习AI大模型技术，也想通过这项技能真正达到升职加薪，就业或是副业的目的，但是不知道该如何开始学习，因为网上的资料太多太杂乱了，如果不能系统的学习就相当于是白学。为了让大家少走弯路，少碰壁，这里我直接把全套AI技术和大模型入门资料、操作变现玩法都打包整理好，希望能够真正帮助到大家。

读者福利：如果大家对大模型感兴趣，这套大模型学习资料一定对你有用