哪里医院做无痛人流便宜 咨询网站在线,网站现状分析,做网站备案时间,郑州网站优化排名文章目录 明明外面的ChatGPT产品那么多了#xff0c;为什么要在本地搭建自己的ChatGPT呢#xff1f;整体架构流程1. 获取APIKey1.1 常见的AI模型1.2 为什么选DeepSeek1.3 怎么获取DeepSeek的APIKey1.3.1 注册并登录DeepSeek开放平台1.3.2 选择API keys1.3.3 创建API key1.3.4… 文章目录 明明外面的ChatGPT产品那么多了为什么要在本地搭建自己的ChatGPT呢整体架构流程1. 获取APIKey1.1 常见的AI模型1.2 为什么选DeepSeek1.3 怎么获取DeepSeek的APIKey1.3.1 注册并登录DeepSeek开放平台1.3.2 选择API keys1.3.3 创建API key1.3.4 复制API key1.3.5 在backend/main.js中使用APIKey 2. 项目搭建2.1 项目目录2.2 创建基础的HTML界面2.2.1 frontend/index.html2.2.2 frontend/chat.js 2.3 使用Node.js搭建后端2.3.1 backend/main.js2.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元/百万输入 TokensGPT 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.jspackage.json frontend index.htmlchat.jspackage.json
2.2 创建基础的HTML界面
我们需要一个简单的HTML页面让用户可以输入文本并发送消息。可以参考这个基础的HTML结构
2.2.1 frontend/index.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://cdn.jsdelivr.net/npm/marked/marked.min.js/scriptlink relstylesheethrefhttps://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.csstitleAI Chat Interface/titlestylebody {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[typetext] {width: calc(100% - 100px);flex-grow: 1;padding: 10px;margin-right: 5px;border-radius: 5px;border: 1px solid #ddd;}input[typesubmit] {width: 100px;padding: 10px 15px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;}/style
/headbodydiv classchat-containerdiv classchat-box idchatBox/divdiv classuser-inputinput typetext iduserInput placeholderType your message here... onkeyupenterSendMessage()input typesubmit valueSend onclicksendMessage()/div/divscript srcchat.js/script
/body/html2.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版本的后端服务器代码敬请期待。
