chatgpt-web

基于OpenAI API的纯JavaScript ChatGPT演示

纯JS实现的ChatGPT项目，基于OpenAI API

部署一个HTML文件即可使用。

支持复制/更新/刷新会话，语音输入，朗读等功能，以及众多自定义选项。

支持搜索会话，深色模式，自定义头像，快捷键，多语言，环境变量，PWA应用，API额度显示等。

支持加密HTML文件。

参考项目: markdown-it, highlight.js, github-markdown-css, chatgpt-html, markdown-it-copy, markdown-it-texmath, awesome-chatgpt-prompts-zh

Demo

在线预览 （使用需配置OpenAI接口和API密钥）

使用方法

注意：部署反代接口请注意OpenAI的支持地区，部署在不支持地区的服务器可能导致封号！最好配置https，公网以http方式明文传输API key非常不安全！

---

• 仅部署HTML

  使用任意http server部署index.html。打开网页设置，填写API密钥，填写OpenAI接口，当本地

  • 可正常访问api.openai.com，填写https://api.openai.com/

  • 不可正常访问api.openai.com，填写其反代地址（可使用Cloudflare Worker等反代），注意：反代接口响应需添加跨域Header Access-Control-Allow-Origin

  • OpenAI接口也可以在环境变量中单独配置。

• 同时部署HTML和OpenAI反代接口

  注意：服务器需正常访问官方api接口，可统一所有api接口为一个自定义密钥

  • 使用nginx，示例配置如下

    server {
        listen      80;
        server_name example.com;
        #开启openai接口的gzip压缩，大量重复文本的压缩率高，节省服务端流量
        gzip on;
        gzip_min_length 1k;
        gzip_types text/event-stream;
    
        #统一所有api接口为一个自定义密钥
        set $custom_key "sk-12345678";
        set $openai_key "sk-xxxxxx";
        set $deepseek_key "sk-xxxxxx";
        set $gemini_key "xxx-xxx";
        set $claude_key "sk-ant-xxx";
    
        #DeepSeek, 网页端需单独设置DeepSeek接口为deepseek
        location ^~ /deepseek {
            if ($http_authorization != "Bearer ${custom_key}") {
                return 401;
            }
            proxy_pass https://api.deepseek.com/;
            proxy_set_header Host api.deepseek.com;
            proxy_ssl_name api.deepseek.com;
            proxy_ssl_server_name on;
            proxy_set_header Authorization "Bearer ${deepseek_key}";
            proxy_buffering off;
        }
    
        #Gemini
        location ^~ /v1/models {
            if ($arg_key != $custom_key) {
                return 401;
            }
            proxy_pass https://generativelanguage.googleapis.com$uri?alt=sse&key=$gemini_key;
            proxy_buffering off;
        }
    
        #Claude
        location ^~ /v1/messages {
            if ($http_x_api_key != $custom_key) {
                return 401;
            }
            proxy_pass https://api.anthropic.com/v1/messages;
            proxy_set_header Host api.anthropic.com;
            proxy_ssl_name api.anthropic.com;
            proxy_ssl_server_name on;
            proxy_set_header X-Api-Key $claude_key;
            proxy_buffering off;
        }
    
        #Openai
        location ^~ /v1 {
            if ($http_authorization != "Bearer ${custom_key}") {
                return 401;
            }
            proxy_pass https://api.openai.com/v1;
            proxy_set_header Host api.openai.com;
            proxy_ssl_name api.openai.com;
            proxy_ssl_server_name on;
            proxy_set_header Authorization "Bearer ${openai_key}";
            proxy_buffering off;
        }
    
        location / {
            alias /usr/share/nginx/html/;
            index index.html;
        }
    }
    

    如服务器无法正常访问api.openai.com，可配合socat反代和http代理使用，proxy_pass配置改成

    proxy_pass https://127.0.0.1:8443/v1;
    

    并打开socat

    socat TCP4-LISTEN:8443,reuseaddr,fork PROXY:http代理地址:api.openai.com:443,proxyport=http代理端口
    

  • 使用Caddy，可以自动生产HTTPS证书，示例配置如下

    yourdomain.example.com {
        reverse_proxy /v1/* https://api.openai.com {
            header_up Host api.openai.com
            header_up Authorization "{http.request.header.Authorization}"
            header_up Authorization "Bearer sk-your-token"
        }
    
        file_server / {
            root /var/wwwroot/chatgpt-web
            index index.html
        }
    }
    

    Caddy 2.6.5及之后版本支持https_proxy和http_proxy环境变量，如服务器无法正常访问api.openai.com，可先设置代理环境变量

环境变量

OpenAI接口和密钥可以单独在环境变量文件中配置。

新建环境变量文件env.js到index.html同目录下，示例如下。

envAPIEndpoint="https://api.openai.com/"
envAPIKey="sk-your-token"

PWA应用

部署文件icon.png，manifest.json，sw.js到index.html同目录下，即可支持PWA应用。

注意：如果重命名index.html使用，则sw.js文件中./index.html也需修改。

部署PWA应用后，更新html文件需同步更新sw.js，不然无法更新成功。

自定义选项

• 左边栏支持，搜索会话，新建/重命名/删除(会话/文件夹)，中英双语，浅色/深色/自动主题模式，导出/导入/重置会话和设置数据，快捷键，显示API额度，显示本地存储。

• 可选GPT模型，默认gpt-3.5，当前使用gpt-4模型需通过OpenAI的表单申请，或使用ChatGPT-to-API模拟网页ChatGPT为API使用（使用gpt-4需Plus账户）。

• 可选OpenAI接口地址，使用nginx或caddy部署反代后可以不设置。

• 可选API密钥，默认不设置，如需网页设置自定义API密钥使用，反代接口最好配置https，公网以http方式明文传输API key极易被中间人截获。

• 可选用户头像，可修改为任意图片地址。

• 可选系统角色，默认不开启，有四个预设角色，并动态加载awesome-chatgpt-prompts-zh或awesome-chatgpt-prompts中的角色。

• 可选角色性格，默认灵活创新，对应接口文档的top_p参数。

• 可选回答质量，默认平衡，对应接口文档的temperature参数。

• 修改打字机速度，默认较快，值越大速度越快。

• 可选连续会话上下文信息限制，默认25条，对话中包含上下文信息，会导致api费用增加。设置为0条则关闭连续会话。

• 允许长回复，默认关闭，开启后可能导致api费用增加，并丢失全部上下文，对于一些要发送继续才完整的回复，不用发继续了。

• 选择语音，默认Bing语音，支持Azure语音和系统语音，可分开设置提问语音和回答语音。

• 音量，默认最大。

• 语速，默认正常。

• 音调，默认正常。

• 全部允许连续朗读，默认开启，连续郎读到所有对话结束。

• 全部允许自动朗读，默认关闭，自动朗读新的回答。iOS需打开设置-自动播放视频预览，Mac上Safari需打开此网站的设置-允许全部自动播放

• 支持语音输入，默认识别为普通话，可长按语音按钮修改识别语言选项。语音识别必需条件：使用chrome内核系浏览器 + https网页或本地网页，允许网页的麦克风权限，并已安装麦克风设备。

• 自动发送关键词，默认为空，识别到关键词后自动发送。

• 自动停止关键词，默认为空，识别到关键词后自动停止识别。

• 自动发送延迟时间，默认为0秒，即不自动发送。不为0秒时，表示识别到内容后，自动发送延迟的时间。

• 保持监听，默认关闭，保持麦克风一直处于监听状态，除非识别报错或手动关闭识别。

加密HTML文件

使用加密网页可加密index.html文件。

• 密码，打开加密HTML的密码。

• 是否压缩，默认允许，较大HTML可减少加密后文件体积。

• 允许记住密码，默认允许，是否允许前端记住密码。

• 记住密码有效期，默认永不过期，过期后需重新输入密码。

• 拷贝index.html内容到要加密的HTML文本框，点击生成按钮后，即可下载加密HTML，并替换index.html使用。

注意：该方式仅加密前端HTML，不加密OpenAI反代接口。

可取消OpenAI反代接口的默认API密钥，打开index.html代码，此行结尾添加代码value="sk-xxx"，则默认使用该密钥

chatgpt-web 快速上手指南

环境准备

本项目为纯前端实现，无需复杂的后端环境或依赖安装。

• 系统要求：任意支持现代浏览器的操作系统（Windows, macOS, Linux, iOS, Android）。
• 前置依赖：
  • 一个可用的 HTTP 服务器（如 Nginx, Caddy, Python http.server, 或任何静态文件托管服务）。
  • OpenAI API Key（或其他兼容接口的密钥，如 DeepSeek, Gemini, Claude）。
  • 网络环境：
    • 若直接访问 api.openai.com，需确保网络通畅。
    • 若无法直接访问，需准备反向代理地址（如 Cloudflare Worker）或配置服务器端反代。
  • 安全建议：生产环境部署务必配置 HTTPS，避免 API Key 在公网通过 HTTP 明文传输被截获。

安装步骤

本项目核心仅需部署一个 index.html 文件。

方案一：仅部署前端 HTML（推荐个人快速试用）

1. 下载项目中的 index.html 文件。
2. 将文件放置于任意 HTTP 服务器根目录，或使用本地简单服务启动：

   # 使用 Python 快速启动本地服务
   python3 -m http.server 8000
   

3. 浏览器访问 http://localhost:8000。
4. 在网页设置中填写 API 密钥 和 OpenAI 接口地址：
   • 能直连官方：填写 https://api.openai.com/
   • 需反代：填写你的反代地址（需支持 CORS，即响应头包含 Access-Control-Allow-Origin）。

方案二：部署前端 + 服务端反代（Nginx 示例）

适用于需要统一密钥管理、隐藏真实 Key 或解决跨域/网络限制的场景。

1. 安装 Nginx 并将 index.html 放入指定目录（如 /usr/share/nginx/html/）。
2. 修改 Nginx 配置文件（nginx.conf），参考以下核心配置：

server {
    listen      80;
    server_name example.com;
    
    # 开启 Gzip 压缩节省流量
    gzip on;
    gzip_min_length 1k;
    gzip_types text/event-stream;

    # 定义自定义密钥和各平台真实密钥
    set $custom_key "sk-12345678";
    set $openai_key "sk-xxxxxx";
    
    # OpenAI 反代配置
    location ^~ /v1 {
        if ($http_authorization != "Bearer ${custom_key}") {
            return 401;
        }
        proxy_pass https://api.openai.com/v1;
        proxy_set_header Host api.openai.com;
        proxy_ssl_name api.openai.com;
        proxy_ssl_server_name on;
        proxy_set_header Authorization "Bearer ${openai_key}";
        proxy_buffering off;
    }

    # 静态文件服务
    location / {
        alias /usr/share/nginx/html/;
        index index.html;
    }
}

3. 重启 Nginx 使配置生效。
4. 网页端设置接口地址为 http://example.com/v1，密钥填写 $custom_key。

注：若服务器无法直连 api.openai.com，可配合 socat 进行端口转发或使用 HTTP 代理，具体配置请参考原文档“使用方法”部分。

可选：配置环境变量

若希望硬编码接口和密钥，可在 index.html 同目录下新建 env.js 文件：

envAPIEndpoint="https://api.openai.com/"
envAPIKey="sk-your-token"

基本使用

1. 启动访问：打开部署好的网页链接。
2. 初始配置：
   • 点击左下角或侧边栏的“设置”图标。
   • 输入 API Key。
   • 确认 API 接口地址（若使用 Nginx 反代且已统一路径，此处可不填或填相对路径）。
3. 开始对话：
   • 在底部输入框输入问题，按 Enter 发送。
   • 支持 语音输入（需 Chrome 内核浏览器 + HTTPS/本地环境 + 麦克风权限）。
   • 支持 语音朗读 回答内容。
4. 高级功能：
   • 切换模型：在设置中选择 GPT-3.5, GPT-4 或其他兼容模型。
   • 会话管理：左侧栏支持新建、重命名、搜索、导出/导入会话记录。
   • 角色预设：开启系统角色，加载预设 Prompt（如“扮演翻译官”、“代码专家”等）。
   • PWA 安装：若部署了 manifest.json 和 sw.js，可将网页添加为桌面应用离线使用。

提示：首次使用建议先测试小额度，确认接口连通性及费用扣除正常后再进行长对话。