文章目录
- 明明外面的ChatGPT产品那么多了，为什么要在本地搭建自己的ChatGPT呢？
- 整体架构流程
- 1. 获取APIKey
- 1.1 常见的AI模型
- 1.2 为什么选DeepSeek
- 1.3 怎么获取DeepSeek的APIKey
- 1.3.1 注册并登录DeepSeek开放平台
- 1.3.2 选择API keys
- 1.3.3 创建API key
- 1.3.4 复制API key
- 1.3.5 在backend/main.js中使用APIKey
- 2. 项目搭建
- 2.1 项目目录
- 2.2 创建基础的HTML界面
- 2.2.1 frontend/index.html
- 2.2.2 frontend/chat.js
- 2.3 使用Node.js搭建后端
- 2.3.1 backend/main.js
- 2.3.2 backend/package.json
- 小结一下
明明外面的ChatGPT产品那么多了，为什么要在本地搭建自己的ChatGPT呢？
- 控制和定制： 通过在本地搭建ChatGPT，你可以完全控制聊天机器人的行为和回答，根据自己的需求进行定制和优化
- 学习： 搭建自己的ChatGPT可以更好地理解人工智能和自然语言处理的工作原理
- 实验和开发： 在自己的本地环境中，可以自由地进行实验和开发，也可以尝试不同的模型和算法，并且根据他们提供的答案进行对比，选择更合适的AI模型
- 集成和扩展： 在本地搭建的ChatGPT可以更容易地与其他本地系统和应用程序集成，便于扩展功能
- 安全性： 在本地环境中，我们可以实施更严格的安全校验，来减少潜在的安全风险
整体架构流程
1. 获取APIKey
注册并获取你想要使用的AI模型的API密钥，然后使用这个密钥来调用API并获取响应
1.1 常见的AI模型
| 模型名称 | 公司 | 简介 | 访问地址 |
|---|---|---|---|
| CNKI AI学术研究助手 | 同方知网 | 服务于科研全流程的AI辅助研究工具 | 访问链接 |
| 通义千问 | 阿里云 | 阿里达摩院推出的大模型，用于智能问答、知识检索、文案创作等 | 访问链接 |
| 星火大模型 | 科大讯飞 | 支持对话、写作、编程等功能，提供语音交互方式 | 访问链接 |
| 文心一言 | 百度 | 百度全新一代知识增强大语言模型，提供对话互动、问题回答等服务 | 访问链接 |
| 豆包 | 字节跳动 | 为创作者打造的AI助手，支持视频脚本撰写、文案生成等 | 访问链接 |
| 智谱清言 | 智谱华章 | 融合海量知识，可用于商业分析、决策辅助、客户服务等领域 | 访问链接 |
| 盘古 | 华为云 | 华为诺亚方舟实验室研发的大模型，在多领域有优异表现 | 访问链接 |
| 百小应 | 百川智能 | 提供Baichuan-7B、Baichuan-13B两款开源可免费商用的中文大模型 | 访问链接 |
| 腾讯元宝 | 腾讯 | 腾讯AI Lab自研的大规模预训练生成语言模型，擅长开放域聊天等 | 访问链接 |
| Kimi | 月之暗面 | 处理长文本能力强，联网搜索能力也不错 | 访问链接 |
| DeepSeek | 深度求索 | 是在多个大型模型排行榜上名列前茅的模型，在中文和英文综合能力上表现出色，特别擅长数学、编程和逻辑推理任务 | 访问链接 |
1.2 为什么选DeepSeek
DeepSeek官网
DeepSeek-V2 登上全球开源大模型榜首
性能卓越： DeepSeek的模型在多个评测中表现出色，尤其在中文和英文的理解、生成能力上，与国际领先的闭源模型如GPT-4-Turbo和文心4.0处于同一梯队
上下文支持： DeepSeek模型支持长达128K的上下文长度，这对于处理需要大量上下文信息的复杂任务非常有用
兼容性好： DeepSeek的API与OpenAI兼容，熟悉OpenAI的API，可以无缝切换到DeepSeek，减少学习和迁移成本
成本： API定价比其他同类型产品要低很多，1元/百万输入 Tokens，GPT 4o性能相当，但价格却低20多倍
1.3 怎么获取DeepSeek的APIKey
1.3.1 注册并登录DeepSeek开放平台
DeepSeek开放平台
1.3.2 选择API keys
1.3.3 创建API key
1.3.4 复制API key
APIkey只能在创建时复制，尽量在复制后尽快保存，否则只能重新创建APIkey才能进行使用
1.3.5 在backend/main.js中使用APIKey
2. 项目搭建
2.1 项目目录
- MyChatGPT
- backend
- main.js
- package.json
- frontend
- index.html
- chat.js
- package.json
- backend
2.2 创建基础的HTML界面
我们需要一个简单的HTML页面，让用户可以输入文本并发送消息。可以参考这个基础的HTML结构
2.2.1 frontend/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css"><title>AI Chat Interface</title><style>body {font-family: Arial, sans-serif;padding: 20px;}.chat-container {display: flex;flex-direction: column;width: 100%;margin: auto;}.chat-box {display: flex;flex-direction: column;margin-bottom: 20px;overflow-y: auto;}.message {background-color: #f0f0f0;border: 1px solid #ddd;padding: 10px;margin-top: 5px;border-radius: 5px;}.user-input {display: flex;margin-top: 20px;position: sticky;width: 100%;bottom: 20px;}input[type="text"] {width: calc(100% - 100px);flex-grow: 1;padding: 10px;margin-right: 5px;border-radius: 5px;border: 1px solid #ddd;}input[type="submit"] {width: 100px;padding: 10px 15px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;}</style>
</head><body><div class="chat-container"><div class="chat-box" id="chatBox"></div><div class="user-input"><input type="text" id="userInput" placeholder="Type your message here..." onkeyup="enterSendMessage()"><input type="submit" value="Send" onclick="sendMessage()"></div></div><script src="chat.js"></script>
</body></html>
2.2.2 frontend/chat.js
function enterSendMessage() {if (event.keyCode === 13) {sendMessage();event.preventDefault();}
}
async function sendMessage() {const userInput = document.getElementById('userInput').value;if (userInput.trim() === '') return;addMessageToChat('You', userInput);try {document.getElementById('userInput').value = '';const response = await fetch('http://127.0.0.1:3000/chat', {method: 'POST', headers: {'Content-Type': 'application/json',},body: JSON.stringify({ prompt: userInput }),});const chatResponse = await response.text();addMessageToChat('AI', chatResponse);} catch (error) {console.error('Error:', error);}
}function addMessageToChat(sender, message) {const chatBox = document.getElementById('chatBox');const messageElement = document.createElement('div');messageElement.classList.add('message');messageElement.innerHTML = `${sender}: ${message}`;chatBox.appendChild(messageElement);chatBox.scrollTop = chatBox.scrollHeight;
}
2.3 使用Node.js搭建后端
我们需要创建一个Node.js服务器，用来处理前端发送的消息，并与ChatGPT API进行通信。
2.3.1 backend/main.js
import express from 'express';
import OpenAI from "openai";
import MarkdownIt from 'markdown-it';const app = express();
const port = 3000;
// 处理返回的markdown
const md = new MarkdownIt();
// 配置AI
const openai = new OpenAI({baseURL: 'https://api.deepseek.com',apiKey: [apiKey] // 获取到的ApiKey
});
app.use(express.json());
// 允许所有源进行跨域请求
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');res.header('Access-Control-Allow-Headers', 'Content-Type');if (req.method === 'OPTIONS') {res.sendStatus(204); // 无内容响应 OPTIONS 请求} else {next();}
});// 创建一个POST来处理聊天请求
app.post('/chat', async (req, res) => {try {const prompt = req.body.prompt;const completion = await openai.chat.completions.create({messages: [{ role: "system", content: prompt }],model: "deepseek-chat",});const markdonwToHTML = md.render(completion.choices[0].message.content);res.send(markdonwToHTML);} catch (error) {console.error(error);res.status(500).send('Error generating response');}
});app.listen(port, () => {console.log(`Server listening at http://localhost:${port}`);
});
2.3.2 backend/package.json
{"name": "deepseek-try","version": "1.0.0","type": "module","dependencies": {"express": "^4.21.1","markdown-it": "^14.1.0","openai": "^4.67.3"}
}小结一下
好了，这就是我自己在本地搭建自己的ChatGPT系统全部流程了，尽可能的以最简单最基础的办法帮大家搭建自己的ChatGPT，过程会也已经尽可能详细，其中包括获取API密钥、搭建前后端项目具体步骤也是自己亲身试验过可行的，步骤也尽可能去繁就简。
也根据自己的使用帮大家列举了多个常见的AI模型，也是从自己的使用的多款AI中选用了DeepSeek作为本次示例的模型，具体的优点也在文中基本阐述了一下，这个见仁见智，大家也可以使用自己觉得好用AI产品。
项目采用Node + HTML这种最简单易懂的技术栈来编写前端页面和后端服务器，后续如果有兴趣的话也会更新Rust、Python和Go版本的后端服务器代码，敬请期待。
