明明外面的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开放平台
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版本的后端服务器代码，敬请期待。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Node + HTML搭建自己的ChatGPT [基础版]
发表评论 取消回复