ChatGPT Web：基于Express和Vue3的开源ChatGPT演示网页

Ray

ChatGPT Web：打造你自己的AI助手网页应用

在人工智能快速发展的今天，ChatGPT作为一款革命性的大语言模型，正在改变人们与AI交互的方式。然而，直接使用ChatGPT的官方接口或网页版往往存在一些限制。为了让更多开发者能够方便地将ChatGPT集成到自己的应用中，GitHub上出现了一个备受欢迎的开源项目——ChatGPT Web。这个项目由开发者Chanzhaoyu创建，旨在提供一个基于Express和Vue3搭建的ChatGPT演示网页。

ChatGPT Web界面预览

项目特色：灵活、强大、易用

ChatGPT Web项目具有以下几个突出特点：

双模型支持：项目支持使用官方的ChatGPT API和非官方的Web API两种方式调用ChatGPT。这为用户提供了更多的选择空间，可以根据自己的需求和条件选择合适的接口。
多会话存储：支持创建和管理多个对话会话，并能保存上下文，让用户可以同时进行多个不同主题的对话。
代码格式化：对于ChatGPT生成的代码，项目会自动进行格式化和语法高亮处理，提升代码的可读性。
界面美观：基于Vue3构建的前端界面简洁美观，响应迅速，提供了良好的用户体验。
开源免费：项目采用MIT开源协议，开发者可以自由使用、修改和分发。
部署简便：提供了Docker部署方案，使得项目的部署和迁移变得简单快捷。

技术选型：Express + Vue3的完美结合

ChatGPT Web项目在技术选型上采用了Express作为后端框架，Vue3作为前端框架。这种组合具有以下优势：

Express：轻量级、灵活的Node.js Web应用框架，易于扩展，适合构建API和Web应用。
Vue3：渐进式JavaScript框架，性能优秀，组件化开发，适合构建复杂的单页面应用。
前后端分离：采用前后端分离的架构，有利于项目的维护和扩展。

项目结构：清晰合理的代码组织

ChatGPT Web项目的代码结构清晰，便于开发者理解和二次开发：

/service：后端服务代码
/src：前端Vue3代码
/docker-compose：Docker部署相关配置

如何使用ChatGPT Web

1. 环境准备

使用ChatGPT Web需要准备以下环境：

Node.js（版本 ≥ 16）
PNPM包管理器
OpenAI API Key或ChatGPT Access Token

2. 安装依赖

在项目根目录和/service目录下分别运行：

pnpm install

3. 配置环境变量

在/service目录下创建.env文件，填入必要的配置信息：

OPENAI_API_KEY=your_api_key
# 或者
OPENAI_ACCESS_TOKEN=your_access_token

4. 运行项目

在开发环境中，分别启动后端和前端服务：

# 后端服务
cd service
pnpm start

# 前端页面
pnpm dev

深入探索：项目的核心功能

1. 双模型支持

ChatGPT Web支持两种API调用方式：

ChatGPTAPI：使用OpenAI官方的gpt-3.5-turbo模型
ChatGPTUnofficialProxyAPI：使用非官方代理服务器访问ChatGPT的后端API

这两种方式各有优缺点，开发者可以根据实际需求选择合适的方式。

2. 多会话管理

项目实现了多会话存储和上下文逻辑，允许用户创建多个对话，并在不同对话间切换。这个功能的实现主要依靠前端的状态管理和后端的会话存储机制。

3. 代码格式化

对于ChatGPT生成的代码，项目会自动进行格式化和语法高亮。这个功能的实现可能使用了类似Prism.js的代码高亮库。

4. 数据导入导出

ChatGPT Web支持对话数据的导入导出功能，方便用户备份和迁移自己的对话记录。

部署方案：灵活多样

ChatGPT Web提供了多种部署方案，以适应不同的使用场景：

Docker部署：提供了Dockerfile和docker-compose配置，方便在容器环境中快速部署。
Railway部署：支持一键部署到Railway平台，适合不想自己管理服务器的用户。
手动打包部署：可以手动打包前后端代码，部署到自己的服务器上。

安全性考虑

在使用ChatGPT Web时，需要注意以下安全事项：

不要使用他人提供的公共代理，以防止API Key或Access Token泄露。
在公网部署时，建议设置AUTH_SECRET_KEY来添加访问密码。
修改index.html中的title，避免被关键词搜索到。

项目的未来发展

ChatGPT Web项目目前已经实现了许多实用功能，但仍有很大的发展空间。未来可能的发展方向包括：

支持更多的AI模型，如GPT-4等。
增强数据安全性，如添加端到端加密。
提供更多的自定义选项，如自定义提示词、对话风格等。
集成语音识别和语音合成功能，实现语音交互。
添加插件系统，允许社区开发者扩展功能。

结语

ChatGPT Web项目为开发者提供了一个灵活、强大的ChatGPT Web应用框架。无论是想要快速搭建一个ChatGPT演示网页，还是打算基于此项目进行深度定制，ChatGPT Web都是一个极佳的选择。随着项目的不断发展和社区的积极贡献，相信ChatGPT Web会变得更加完善和强大，为AI应用的普及做出重要贡献。

ChatGPT Web Docker部署示例