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

文章目录

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

Chat

  1. 控制和定制: 通过在本地搭建ChatGPT,你可以完全控制聊天机器人的行为和回答,根据自己的需求进行定制和优化
  2. 学习: 搭建自己的ChatGPT可以更好地理解人工智能和自然语言处理的工作原理
  3. 实验和开发: 在自己的本地环境中,可以自由地进行实验和开发,也可以尝试不同的模型和算法,并且根据他们提供的答案进行对比,选择更合适的AI模型
  4. 集成和扩展: 在本地搭建的ChatGPT可以更容易地与其他本地系统和应用程序集成,便于扩展功能
  5. 安全性: 在本地环境中,我们可以实施更严格的安全校验,来减少潜在的安全风险

整体架构流程

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开放平台
DeepSeek开放平台D登录页

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这种最简单易懂的技术栈来编写前端页面和后端服务器,后续如果有兴趣的话也会更新RustPythonGo版本的后端服务器代码,敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux学习】(8)第一个Linux编程进度条程序|git三板斧

前言 第一个Linux编程——进度条git的简单使用 一、第一个Linux编程——进度条 在写进度条之前我们需要两个基础知识&#xff1a; 回车换行缓冲区 1. 回车换行 首先我们需要知道回车换行它是两个概念&#xff0c;回车是回车&#xff0c;换行是换行换行&#xff1a;光标从上往下…

DEVOPS: 认证与调度

概述 不知道大家有没有意识到一个现实&#xff0c;就是大部分时候&#xff0c;我们已经不像以前一样通过命令行&#xff0c;或者可视窗口来使用一个系统了现在我们上微博、或者网购&#xff0c;操作的其实不是眼前这台设备&#xff0c;而是一个又一个集群 通常&#xff0c;这样…

MUX VLAN 实验配置

MUX VLAN&#xff08;Multiplex VLAN&#xff09;是一种高级的VLAN技术&#xff0c;通过在交换机上实现二层流量隔离和灵活的网络资源控制&#xff0c;提供了一种更为细致的网络管理方式 MUX VLAN通过定义主VLAN&#xff08;Principal VLAN&#xff09;和多个子VLAN&#xff0…

海外云手机怎样助力亚马逊店铺运营?

随着全球化的发展&#xff0c;越来越多的企业开始重视海外市场的拓展&#xff0c;尤其是出海企业和B2B外贸企业。亚马逊作为全球最大的电商平台之一&#xff0c;成为了许多企业争夺国际市场的重点战场。本文将深入分析海外云手机在优化亚马逊店铺引流中的作用和优势&#xff0c…

优惠券项目的设计与实现,完结!

你好 我是田哥 我的充电桩项目中&#xff0c;优惠券相关功能已基本完成。另外&#xff0c;关于充电桩项目&#xff0c;我之前分享过一些相关文章&#xff1a; 充电桩项目&#xff0c;开源啦&#xff01; 充电桩项目实战&#xff1a;消息丢失和重复消费问题 用充电桩项目面试&am…

【electron8】electron实现“图片”的另存为

注&#xff1a;该列出的代码&#xff0c;都在文章内示例出 1. 另存为按钮事件&#xff1a; const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的&#xff0c;所以我需要根据接口返回的路…

使用vue+kkFileview组件实现各种类型文件预览

关于kkFileView 【参考】&#xff1a;https://kkfileview.keking.cn/zh-cn/docs/home.html 文档在线预览项目解决方案&#xff0c;项目使用流行的spring boot搭建&#xff0c;易上手和部署。万能的文件预览开源项目&#xff0c;基本支持主流文档格式预览 本项目介绍 项目使用…

低空经济产业链、政策、延伸品调研笔记

文章目录 1 低空经济市场1.1 政策摘要1.2 市场规模预测 3 涉及产业链与核心产品3.1 产业链3.2 原材料3.2.1 上游3.2.2 中游3.2.3下游 3.3 无人机3.4 eVTOL3.5 空管系统 4 应用场景4.1 城市空中出行(UAM)4.2 低空物流4.3 低空旅游与体验4.4 农林植保与监测4.5 基础设施巡检与维护…

JVM基础(内存结构)

文章目录 内存结构JAVA堆方法区 &#xff08;Method Area&#xff09;运行时常量池&#xff08;Runtime Constant Pool&#xff09; 虚拟机栈 &#xff08;Java Virtual Machine Stack&#xff09;本地方法摘栈&#xff08;Native Method Stacks&#xff09;程序计数器&#xf…

Matlab 车牌识别技术

1.1设计内容及要求&#xff1a; 课题研究的主要内容是对数码相机拍摄的车牌&#xff0c;进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发&#xff0c;涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…

智慧共享空间解决方案是什么

一、智慧共享空间解决方案的定义 智慧共享空间解决方案是一种综合性的策略和技术手段&#xff0c;旨在通过整合智慧技术与共享空间的概念&#xff0c;为公众共同使用的空间提供高效、智能、可持续的运营和管理模式&#xff0c;以满足人们在不同环境下的各种需求&#xff0c;并…

C++基于opencv的视频质量检测--画面冻结检测

文章目录 0.引言1. 原始代码分析2. 优化方案3. 优化后的代码4. 代码详细解读 0.引言 视频质量画面冻结检测已在C基于opencv4的视频质量检测中有所介绍&#xff0c;本文将详细介绍其优化版本。 1. 原始代码分析 图像抖动检测的原始代码&#xff1a; bool ScreenFreezeDetect…

AI驱动的低代码未来:加速应用开发的智能解决方案

引言 随着数字化转型的浪潮席卷全球&#xff0c;企业对快速构建应用程序的需求愈发强烈。然而&#xff0c;传统的软件开发周期冗长、成本高昂&#xff0c;往往无法满足快速变化的市场需求。在此背景下&#xff0c;低代码平台逐渐成为开发者和企业的优选方案&#xff0c;以其“低…

【蓝桥杯选拔赛真题77】python计算小球 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析

目录 python计算小球 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python计算小球 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要…

架构师备考-非关系型数据库

基础理论 CAP 理论 C&#xff08;Consistency&#xff09;一致性。一致性是指更新操作成功并返回客户端完成后&#xff0c;所有的节点在同一时间的数据完全一致&#xff0c;与ACID 的 C 完全不同。A &#xff08;Availability&#xff09;可用性。可用性是指服务一直可用&…

内网渗透-初探域渗透

文章目录 环境域信息收集系统基本信息网络信息域控主机信息根据ip查主机名用户信息权限提升网络探针系统命令nbtscanfscannishang 凭据收集 域渗透实战凭据收集(重点)mimikatzProcdumpPwdumpSAMInsidekrbtgt用户hash hash破解解决无法获取明文的问题明文口令传递IPC连接atschta…

windows录屏软件工具推荐!!

如今&#xff0c;科技的进步&#xff0c;互联网的普及&#xff0c;使我们的生活越来越便利&#xff0c;录屏工具的出现&#xff0c;大大提高我们的工作效率。如果你经常需要录制屏幕上的内容&#xff0c;比如制作教学视频、游戏实况记录、演示文稿等等&#xff0c;那这几款软件…

【病毒分析】从无解到破解:Mallox家族linux版本的分析以及解密器的制作

1.背景 Mallox勒索软件首次出现于2021年5月&#xff0c;并在2021年10月扩展到中国市场。截至2024年&#xff0c;它仍然活跃。Mallox通过加密受害者文件并要求支付赎金来恢复数据&#xff0c;使用唯一的加密密钥加密文件&#xff0c;受害者的文件通常会添加“.mallox”或“.mal…

【LeetCode每日一题】——862.和至少为 K 的最短子数组

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 前缀和 二【题目难度】 困难 三【题目编号】 862.和至少为 K 的最短子数组 四【题目描述】 …

容器化核心快速入门

概述 物理机&#xff1a;好比是独立的大船&#xff0c;独立发动机&#xff0c;独立船舱。所有资源共用。运水果的同时就不能运鱼&#xff08; 1964年&#xff09;虚拟机&#xff1a;相当于把大船进行改造&#xff0c;把大船的资源进行独立的拆分&#xff0c;独立的部分都有单独…