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

9,913 阅读3分钟

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