当前位置: 首页 > news >正文

把ChatGPT接入我的个人网站

效果图

在这里插入图片描述

详细内容和使用说明可以查看我的个人网站文章 把ChatGPT接入我的个人网站

献给有外网服务器的小伙伴

如果你本人已经有一台外网的服务器,并且页拥有一个OpenAI API Key,那么下面就可以参照我的教程来搭建一个自己的ChatGPT。

需要的环境

  • Centos7(其他服务器也行)
  • nodejs

这里主要用到了node环境,所有的代码也是由JavaScript编写

安装依赖库

首先需要安装OpenAI提供的js库——openai,使用npm安装即可

npm install openai

然后再安装一个用于后面管理js后台运行的库——forever

npm install forever

编写代码

const WebSocket = require('ws')
const {Configuration, OpenAIApi} = require('openai')const wss = new WebSocket.Server({port:8080})
const config = new Configuration({apiKey: 'OPENAI_API_KEY'}); //这里的OPENAI_API_KEY是你自己的keyconst openai = new OpenAIApi(config);const welcomeStr = "Hello,我是胡海龙,这是我基于OpenAI搭建的类似ChatWindow,你可以像使用ChatGPT一样来使用它,如何搭建以及源码可以联系我:hhlworkspace@qq.com";wss.on('connection', ws=>{ws.on('message', async (message)=>{if(message =='[$check$]'){ws.send('[$alive$]')}else{const completion = await openai.createCompletion({model: 'text-davinci-003',prompt: ''+message,max_tokens: 2048,stream: true,user: 'huhailong1121'},{responseType: 'stream'});completion.data.on("data",(data)=>{const lines = data?.toString()?.split("\n").filter((line) => line.trim() !== "");for (const line of lines) {const message = line.replace(/^data: /, "");if (message === "[DONE]") {break; // Stream finished}try {const parsed = JSON.parse(message);ws.send(parsed.choices[0].text)} catch (error) {console.error("Could not JSON parse stream message", message, error);}}})}})
})

上面的代码含义:开启一个Websocket服务,然后接收到用户发送的消息后,使用openai库发起请求,然后把返回的数据推给前端用户,前端用户接收的时候用解析markdown的组件接收就可以。下面主要说一下请求openai的部分

const {Configuration, OpenAIApi} = require('openai')
const config = new Configuration({apiKey: 'OPENAI_API_KEY'});const openai = new OpenAIApi(config);const completion = await openai.createCompletion({model: 'text-davinci-003',prompt: ''+message,max_tokens: 2048,stream: true,user: 'huhailong1121'},{responseType: 'stream'});completion.data.on("data",(data)=>{const lines = data?.toString()?.split("\n").filter((line) => line.trim() !== "");for (const line of lines) {const message = line.replace(/^data: /, "");if (message === "[DONE]") {break; // Stream finished}try {const parsed = JSON.parse(message);ws.send(parsed.choices[0].text)} catch (error) {console.error("Could not JSON parse stream message", message, error);}}})

首先是引入openai库中的 Configuration, OpenAIApi,然后配置apiKey,配置好以后创建请求——openai.createCompletion,注意,这里要使用同步去处理以下,参数的含义:

  • model:使用的模型,目前新的模型是text-davinci-003
  • prompt:用户的提问和需求
  • max_tokens:这个参数决定了能一次返回多少长度的结果,如果不是用stream的话这个设置的小可能会导致结果被截断
  • stream:是否使用流方式返回结果,我这里使用了流方式返回结果,因为这样可以给用户更全的数据,不会截断,而且不会造成长时间阻塞,可以实时的动态的生成结果,给用户的体验更好
  • user:用户标识,这个不设置也可以,还有其他更多的参数可以参考网上的资料

使用流后需要对data进行监听,监听中将返回的流先转为字符串,然后通过换行截取,去掉头部的data字符串后剩余的可以转为一个json对象,其中choices数组里面的text就是我们要的结果,所以将它发送给用户即可。

前端代码相对简单,就是单纯的websocket接收数据,然后渲染,只是样式上需要设计和调整,如果有需要前端代码的小伙伴也可以联系我,无偿分享,联系方式见文章上半部分。

相关文章:

把ChatGPT接入我的个人网站

效果图 详细内容和使用说明可以查看我的个人网站文章 把ChatGPT接入我的个人网站 献给有外网服务器的小伙伴 如果你本人已经有一台外网的服务器,并且页拥有一个OpenAI API Key,那么下面就可以参照我的教程来搭建一个自己的ChatGPT。 需要的环境 Cento…...

关于数字游民是未来年轻人工作趋势的一种思考

Q:我觉得未来,数字游民会是中国工作的一种主流方式,因为实体行业受到严重冲击,科技的发展是推导支持这样的远程工作形式,而且未来人的时间是越来越离散化、碎片化、原子化的,以订单交付的形式,P2P的形式会是…...

2022年 合肥市经开区信息学竞赛区赛 初中组

2022年 合肥市经开区信息学竞赛区赛 初中组T1.普通排序 题目描述 牛牛是一位编程爱好者,今天第一次参加初中组比赛,看到第一题,不要紧张,来一个简单的排序题做一做,牛牛学过了很多排序,一直想练个手,这回机会来了,给牛牛N个数(n<=100),每个数都在(0 ~ 1000)之间…...

【工作小札】自定义classloader实现热加载jar

文章目录楔子第一步&#xff1a;添加maven依赖第二步&#xff1a;创建jar包路径构造类第三步&#xff1a;定义需要被加载的jar的目录结构第四步&#xff1a;创建自定义类加载器1 继承ClassLoader并实现Closeable接口2 标记该加载器支持并行类加载机制3 私有化构造方法&#xff…...

spring—AOP

系列文章目录 Spring中AOP技术的学习 文章目录系列文章目录前言一、AOP核心概念二、AOP入门案例1.AOP入门案例思路分析2.AOP入门案例实现三、AOP工作流程四、AOP切入点表达式五、AOP通知类型六、案例&#xff1a;测量业务层接口万次执行效率1.项目结构2.实现类七、AOP获取通知…...

自己曾经的C++笔记【在c盘爆满的时候找到的回忆】

文章目录**C与C的区别** (二&#xff09;类和对象构造函数和析构函数C特殊成员C友元C类的继承C虚函数和多态C模板C可变参模板CSTL容器篇C迭代器C仿函数C函数适配器CSTL算法C智能指针C类型推断CIO流C正则表达式具有特殊意义的元字符量词元字符校验数字的表达式校验字符的表达式特…...

Nginx 实战-负载均衡

一、负载均衡今天学习一下Nginx的负载均衡。由于传统软件建构的局限性&#xff0c;加上一台服务器处理能里的有限性&#xff0c;在如今高并发、业务复杂的场景下很难达到咱们的要求。但是若将很多台这样的服务器通过某种方式组成一个整体&#xff0c;并且将所有的请求平均的分配…...

本周大新闻|128GB版Quest 2再降价,Mojo Vision完成“新A轮”融资

本周XR大新闻&#xff0c;AR方面&#xff0c;DigiLens推出SRG表面浮雕光栅衍射光波导&#xff1b;索尼成立Sony Research&#xff1b;NuEyes推出牙医场景AR眼镜NuLoupes&#xff1b;苹果EMG手环、AR/VR眼球追踪专利公布。 VR方面&#xff0c;128GB版Quest 2降至349美元&#x…...

【论文阅读】如何给模型加入先验知识

如何给模型加入先验知识 1. 基于pretain模型给模型加入先验 把预训练模型的参数导入模型中&#xff0c;这些预训练模型在另一个任务中已经p retrain好了模型的weight,往往具备了一些基本图片的能力 2. 基于输入给模型加入先验 比如说鸟类的头部是一个重要的区分部分&#x…...

arm系列交叉编译器各版本区别

目录交叉编译器命名规则具体编译器举例crosstool-ng交叉编译工具样本arm交叉编译器举例几个概念ABI与EABIgnueabi与gnueabihf参考交叉编译器命名规则 交叉编译器的命名规则&#xff1a;arch [-vendor] [-os] [-(gnu)eabi] [-language] arch - 体系架构&#xff0c; 如arm&…...

随笔记录工作日志

工作中遇到的问题随笔记录 1、将map集合中的key/value数据按照一定的需求过滤出来&#xff0c;并将过滤出来的map的key值存到list集合中 首先想到的是stream流&#xff0c;但是我对stream流的用法基本不熟&#xff0c;记不住方法&#xff0c;如果坚持用stream流去实现这个需求…...

LinkedHashMap源码分析以及LRU的应用

LinkedHashMap源码分析以及LRU的应用 LinkedHashMap简介 LinkedHashMap我们都知道是在HashMap的基础上&#xff0c;保证了元素添加时的顺序&#xff1b;除此之外&#xff0c;它还支持LRU可以当做缓存中心使用 源码分析目的 分析保持元素有序性是如何实现的 LRU是如何实现的…...

【每日一题Day166】LC1053交换一次的先前排列 | 贪心

交换一次的先前排列【LC1053】 给你一个正整数数组 arr&#xff08;可能存在重复的元素&#xff09;&#xff0c;请你返回可在 一次交换&#xff08;交换两数字 arr[i] 和 arr[j] 的位置&#xff09;后得到的、按字典序排列小于 arr 的最大排列。 如果无法这么操作&#xff0c;…...

Canal增量数据订阅和消费——原理详解

文章目录 简介工作原理MySQL主备复制原理canal 工作原理Canal-HA机制应用场景同步缓存 Redis /全文搜索 ES下发任务数据异构简介 canal 翻译为管道,主要用途是基于 MySQL 数据库的增量日志 Binlog 解析,提供增量数据订阅和消费。 早期阿里巴巴因为杭州和美国双机房部署,存…...

为什么要使用线程池

Java线程的创建非常昂贵&#xff0c;需要JVM和OS&#xff08;操作系统&#xff09;配合完成大量的工作&#xff1a; (1)必须为线程堆栈分配和初始化大量内存块&#xff0c;其中包含至少1MB的栈内存。 (2)需要进行系统调用&#xff0c;以便在OS&#xff08;操作系统&#xff09;…...

在云服务部署前后端以及上传数据库

1.上传数据库(sql文件) 首先建立一个目录&#xff0c;用于存放要部署的sql文件&#xff0c;然后在此目录中进入mysql 进入后建立一个数据库&#xff0c;create database 数据库名 完成后&#xff0c;通过select * from 表名可以查到数据说明导入成功。 2.部署Maven后端 将Ma…...

Onedrive for Business迁移方案 | 分享一

文章目录 前言 一、Onedrive for Business迁移方案应用范围? 1.准备目标平台 2.导出源平台数据 <...

pt01数据类型、语句选择

python01 pycharm常用快捷键 (1) 移动到本行开头&#xff1a;home键 (2) 移动到本行末尾&#xff1a;end键盘 (3) 注释代码&#xff1a;ctrl / (4) 复制行&#xff1a;ctrl d #光标放行上 (5) 删除行&#xff1a;shift delete (6) 选择列&#xff1a;shift alt 鼠标左键…...

ChatGPT 存在很大的隐私问题

当 OpenAI 发布时 2020 年 7 月的 GPT-3&#xff0c;它提供了用于训练大型语言模型的数据的一瞥。 根据一篇技术论文&#xff0c;从网络、帖子、书籍等中收集的数百万页被用于创建生成文本系统。 在此数据中收集的是您在网上分享的一些关于您自己的个人信息,这些数据现在让 O…...

图的迭代深度优先遍历

图的深度优先遍历(或搜索)类似于树的深度优先遍历(DFS)。这里唯一的问题是,与树不同,图可能包含循环,因此一个节点可能会被访问​​两次。为避免多次处理一个节点,请使用布尔访问数组。 例子: 输入: n = 4, e = 6 0 -> 1, 0 -> 2, 1 -> 2, 2 -> 0, …...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...