借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站

简介: 借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站

随着OpenAI ChatGPT的大火🔥,再加之互联网的推动,在这个AI浪潮下,涌现出了一大批ChatGPT产品,观察体验了很多国内ChatGPT镜像站,有免费有付费。大多数镜像站的UI界面、网页布局及相关功能都是大同小异的。这些镜像站开发人员其实他们只需要准备好OpenAI账号及API Key即可,网站直接使用开源的前端Chat-Web项目即可搭建起来,可以说哪怕是技术小白或者非技术人员,只需要一台服务器、一个OpenAi账号、Chat-Web开源项目即可完成GPT镜像站的搭建。

image.png

chat-web


那么我们如何搭建属于自己的ChatGPT镜像站呢?服务器和OpenAI账号可以自行准备解决,本篇文章小编就不展开了。本文主要介绍下Chat-Web开源前端项目。


ChatGPT-Web 项目介绍


ChatGPT-Web 项目是用 Express 和 Vue3 搭建的 ChatGPT 演示网页。模仿 OpenAI Chat 官方样式而开发并开源的。目前项目在 Github 已达 22.4k star量,在 Gitcode上也已达 22.3k star量,可见使用人数何其之多,借助该项目搭建 ChatGPT 镜像站的也数不胜数。(可借助镜像站进行引流)


Github:https://github.com/Chanzhaoyu/chatgpt-web

Gitcode:https://gitcode.net/mirrors/Chanzhaoyu/chatgpt-web

image.png

支持双模型,提供了两种非官方 ChatGPT API 方法


方式 免费? 可靠性 质量
ChatGPTAPI(gpt-3.5-turbo-0301) 可靠 相对较笨
ChatGPTUnofficialProxyAPI(网页 accessToken) 相对不可靠 聪明


对比:

  1. ChatGPTAPI 使用 gpt-3.5-turbo 通过 OpenAI 官方 API 调用 ChatGPT
  2. ChatGPTUnofficialProxyAPI 使用非官方代理服务器访问 ChatGPT 的后端API,绕过Cloudflare(依赖于第三方服务器,并且有速率限制)


项目搭建


前置要求


安装 Node


1、SSH 连接服务器后,通过 wget 命令下载 Node 安装包(尽量高点的版本)

cd /usr/local
wget https://npmmirror.com/mirrors/node/v16.18.1/node-v16.18.1-linux-x64.tar.xz

2、解压重命名为 nodejs 并删除安装包

tar -xvf node-v16.18.1-linux-x64.tar.xz
mv node-v16.18.1-linux-x64 nodejs
rm -rf node-v16.18.1-linux-x64.tar.xz

3、创建软连接

ln -s /usr/local/nodejs/bin/node /usr/bin
ln -s /usr/local/nodejs/bin/npm /usr/bin
ln -s /usr/local/nodejs/bin/npx /usr/bin

4、最后终端执行命令 node -v ,查看版本(如果能够正常打印版本号,说明 Node 已安装成功

node -v  //v16.18.1

安装 PNPM


1、安装 PNPM 并创建软连接

npm install -g pnpm
ln -s /usr/local/nodejs/bin/pnpm /usr/bin
ln -s /usr/local/nodejs/bin/pnpx /usr/bin

2、查看 PNPM 版本(如果能够正常打印版本,说明 PNPM 已安装成功

pnpm -v  //v7.29.3

安装 Docker


1、安装 yum-utils

yum install -y yum-utils

2、设置镜像仓库(这里选择阿里镜像)

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3、更新 yum 软件包索引

yum makecache fast

4、安装 docker-ce(社区版)

yum install docker-ce docker-ce-cli containerd.io

5、查看 docker 版本(如果能够正常打印版本,说明 Docker 已安装成功

docker version

6、最后启动 Docker

systemctl start docker

部署 ChatGPT-Web 到服务器


1、克隆 chatgpt-web 项目(确保服务器已安装 git )

git clone https://github.com/Chanzhaoyu/chatgpt-web.git

2、配置密钥

chatgpt-web/service/ 目录下文件.env.example 改名为.env,并修改文件中的 OPENAI_API_KEY 值,改为上文中获取的 API Keys,注意不需要加引号。

# OpenAI API Key - https://platform.openai.com/overview
OPENAI_API_KEY=your_api_key

3、安装依赖


chatgpt-web/service/ 目录下安装后端依赖

pnpm install

chatgpt-web/ 目录下安装前端依赖

pnpm bootstrap

打包运行服务


chatgpt-web/ 目录下执行 build 操作

docker build -t chatgpt-web .

build 成功后就可以运行项目

docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web

运行成功后访问 https://ip:3002 就可以访问 ChatGPT Web 页面啦,是不是特别简单,只需要按照命令一步步来,就可以搭建属于自己的ChatGPT镜像站了


注意:个人搭建的镜像站,随着访问量加大,账号被封的可能性也会大

搭建属于自己的GPT镜像站教程就是这么简单,当然真正搭建过程中,可能会由于服务器本身原因或网络、账号等因素,影响最终的正常使用,这个就需要自己去摸索、查验、解决。

相关文章
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
361 108
|
3月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
709 1
|
2月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
580 0
|
6月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1288 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
8月前
|
人工智能 Linux API
Omnitool:开发者桌面革命!开源神器一键整合ChatGPT+Stable Diffusion等主流AI平台,本地运行不联网
Omnitool 是一款开源的 AI 桌面环境,支持本地运行,提供统一交互界面,快速接入 OpenAI、Stable Diffusion、Hugging Face 等主流 AI 平台,具备高度扩展性。
839 94
Omnitool:开发者桌面革命!开源神器一键整合ChatGPT+Stable Diffusion等主流AI平台,本地运行不联网
|
3月前
|
Web App开发 前端开发 关系型数据库
GitHub 2.8k star 开源既封神,“Liquid‑Glass‑React”,让你前端界面瞬间拥有苹果级液态玻璃效果!
Liquid-Glass-React 是一款开源前端组件,旨在将 Apple iOS 26 的“液态玻璃”视觉效果引入 React 应用。凭借逼真折射、多种反射模式、响应式交互及高度可配置性,它已获得 2.8k stars,成为提升 UI 质感的热门工具。
358 0
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
134 1
|
6月前
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
808 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
4月前
|
人工智能 前端开发 数据可视化
天都塌了,17K+ Star 的AI开源神器!Onlook 如何颠覆前端开发与设计协作?怎么办
Onlook是一款开源的视觉优先代码编辑器,结合Figma直观操作与VS Code强大功能,支持浏览器中实时构建、编辑和部署React应用。项目已获17K+Star,提供快速创建Next.js应用、所见即所得的可视化编辑、AI驱动开发工具及一键部署协作等功能,是前端开发与设计协作的理想选择。
780 0

热门文章

最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 9
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 10
    前端如何禁止用户打开 F12 开发者工具