chatgpt-demo：极简 ChatGPT 网页 UI 开源项目

本文介绍 chatgpt-demo，一个基于 OpenAI GPT-3.5 Turbo API 的极简网页 UI 项目。该项目提供了一个轻量级的 ChatGPT 网页界面，支持多种部署方式，帮助开发者快速搭建自己的 ChatGPT 对话应用。

项目简介

chatgpt-demo 是由 ddiu8081 开发的开源项目，现归属于 anse-app 组织。该项目在 GitHub 上已获得超过 8,000 stars 和 3,700 次 fork，是一个广受欢迎的 ChatGPT 网页 UI 解决方案。

项目采用 TypeScript 和 Astro 框架构建，提供了简洁优雅的对话界面，支持实时流式响应、历史记录管理、密码保护等功能。

核心特性

极简设计：干净清爽的界面，专注于对话体验
流式响应：支持 SSE 流式输出，实时显示 AI 回复
历史记录：自动保存对话历史，支持查看和继续之前的对话
多平台部署：支持 Vercel、Netlify、Docker、Sealos 等多种部署方式
密码保护：可选的网站密码保护功能
PWA 支持：支持作为渐进式 Web 应用安装
温度调节：可调整 AI 回复的创造性程度
自动更新：支持通过 GitHub Actions 自动同步上游更新

技术栈

Astro - 现代静态站点生成器
TypeScript - 类型安全的 JavaScript 超集（63%）
SolidJS - 响应式前端框架
UnoCSS - 即时原子化 CSS 引擎
OpenAI API - GPT-3.5/4 API 接口

安装指南

前置要求

Node.js v18 或更高版本
pnpm 包管理器
OpenAI API Key

本地运行

bash

# 克隆项目
git clone https://github.com/anse-app/chatgpt-demo.git
cd chatgpt-demo

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，添加你的 OPENAI_API_KEY

# 启动开发服务器
pnpm run dev

应用将在 http://localhost:3000/ 运行。

部署方式

Vercel 部署

点击以下按钮一键部署到 Vercel：

Docker 部署

bash

# 直接运行
docker run --name=chatgpt-demo \
  -e OPENAI_API_KEY=YOUR_OPEN_API_KEY \
  -p 3000:3000 \
  -d ddiu8081/chatgpt-demo:latest

或使用 Docker Compose：

yaml

version: '3'
services:
  chatgpt-demo:
    image: ddiu8081/chatgpt-demo:latest
    container_name: chatgpt-demo
    restart: always
    ports:
      - '3000:3000'
    environment:
      - OPENAI_API_KEY=YOUR_OPENAI_API_KEY

环境变量配置

变量名	说明	必填	默认值
`OPENAI_API_KEY`	OpenAI API 密钥	是	-
`HTTPS_PROXY`	HTTPS 代理地址	否	-
`OPENAI_API_BASE_URL`	OpenAI API 基础 URL	否	https://api.openai.com
`HEAD_SCRIPTS`	注入到页面的脚本	否	-
`PUBLIC_SECRET_KEY`	用于生成验证签名的密钥	否	-
`SITE_PASSWORD`	网站访问密码	否	-
`OPENAI_API_MODEL`	使用的模型 ID	否	gpt-3.5-turbo

使用示例

部署完成后，访问你的网站即可开始使用：

在输入框中输入你的问题
按 Enter 发送消息
等待 AI 回复（流式显示）
点击对话历史可查看之前的对话
使用滑块调整 Temperature 参数控制回复创造性

常见问题

Q: 出现 "TypeError: fetch failed" 错误？

A: 配置 HTTPS_PROXY 环境变量使用代理，参考 #34

Q: 出现 "is not a ReadableStream" 错误？

A: Node.js 版本需要 v18 或更高，参考 #65

Q: 如何在国内加速访问？

A: 参考 #270 的部署教程

项目链接

GitHub 仓库：https://github.com/anse-app/chatgpt-demo
在线演示：https://chatgpt.ddiu.me
Docker Hub：https://hub.docker.com/r/ddiu8081/chatgpt-demo
许可证：MIT

字节笔记本