Node + HTML搭建自己的ChatGPT [基础版]

2024-10-22 07:12:10

文章目录

- 明明外面的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

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版本的后端服务器代码，敬请期待。

码农公寓