手把手搭一套ChatGPT聊天服务(附源码:前端+后端)

您所在的位置:网站首页 网页机器人网站源码 手把手搭一套ChatGPT聊天服务(附源码:前端+后端)

手把手搭一套ChatGPT聊天服务(附源码:前端+后端)

2024-04-05 10:06| 来源: 网络整理| 查看: 265

IMG_0101.PNG

最近发现ChatGPT越来越好用了,特别是工作和学习的时候,比搜索引擎更能给出靠谱的引导和总结。

非常适合学习一门新技能,他能给出更靠谱且更容易理解的答案。

但有个问题:只能PC上用,最近新换的手机,没有梯子(iOS用户的翻墙成本是在太高)

所以抽空速度肝了一个WebApp出来,适配移动端页面,手机上随时访问,且不必翻墙,终于可以随心所欲啦~~

体验Demo

ChatGPT Service​chat.webinfra.cloud

项目结构说明

├── client

├── node-api

├── Dockerfile

├── README.md

├── assets

├── LICENSE

client:前端代码,一个独立的 React 项目 node-api:服务端代码,nodejs 启动的 server,整合前端数据和对话上下文,调用 ChatGPT 的API README.md:项目文档 Dockerfile:容器配置文件 assets:静态资源目录 LICENSE:LICENSE 说明

服务端项目fork自 upstream 项目,该项目最开始用做调用OpenAI内部训练的免费模型,不过稳定性不好,维护成本较高,目前不推荐了。 也保留了该项目的README文件用做参考或者直接去原项目查看详情。

快速开始

因为vercel被墙,国内体验并不友好,所以也没有做自动部署,大家直接看源码即可

启动服务端

服务端代码在 node-api 目录中,是个标准的 nodejs 项目

进入目录中,先安装依赖:

npm install

启动项目

npm run start

注意:项目启动时唯一需要配置的是 OpenAI 账户的 ApiKey,可以通过命令行中直接配置环境变量 OPENAI_API_KEY,在生成环境,建议通过 settings.js 来配置。

另外,如需同时配置多个ApiKey,只需要将多个key中间用 "," 隔开即可,注意中英文切换,例如

OPENAI_API_KEY=sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc

配置项

服务端启动成功

启动前端页面

前端页面代码在目录 client 中,是个简单的CRA项目

进入目录中,先安装依赖:

npm install

然后,启动项目

npm run start

即可开始愉快地聊天啦~

功能列表 已开发功能 基本完善的聊天界面 聊天消息的复制/删除 聊天响应主动取消 请求流式调用 自动记录上下文 服务端支持ChatGPT/BingAI/或许还有更多的AI 支持配置多ChatGPT账户,防止一个账户被刷爆 支持服务端配置代理 待开发功能 账户系统(已有功能,但迁移到开源版本还需要时间) 流量控制(已有功能,但迁移到开源版本还需要时间) 监控报警 前端WebApp预设prompt 国际化 其他 源码

这里把代码分享出来,动手能力强的小伙伴们,也可以自己部署一套

欢迎PR和提issue

Github链接:

GitHub - frontend-engineering/chatgpt-webapp-fullstack: A fullstack chat webapp based on ChatGPT/BingAI/AndMore...​github.com/frontend-engineering/chatgpt-webapp-fullstack/tree/main



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3