# 纯JS实现的ChatGPT在线对话项目xqdoo00o-chatgpt-web

*Published:* 2024-02-16
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年12月29日，已超过 180天没有更新



[![](https://www.xarjtc.com/wp-content/uploads/2024/02/0f8fd7cf6cde32f1e29a47be9cb5e173.webp)](https://www.xarjtc.com/wp-content/uploads/2024/02/0f8fd7cf6cde32f1e29a47be9cb5e173.webp)

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

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

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

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

支持加密HTML文件。

**使用方法：**

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

仅部署HTML

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

可正常访问api.open[ai](https://www.xarjtc.com/tag/ai "查看ai此标签更多文章").com，填写https://api.openai.com/

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

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

同时部署HTML和OpenAI反代接口

注意：服务器需正常访问api.openai.com，不用设置OpenAI接口了

使用nginx，示例配置如下

```
map $http_authorization $gptauth {
    default $http_authorization;
    #配置默认API密钥，在Bearer 后填写。如只允许在网页端设置API密钥使用，请删除下一行。
    ""      "Bearer sk-your-token";
}
server {
    listen      80;
    server_name example.com;
    #开启openai接口的gzip压缩，大量重复文本的压缩率高，节省服务端流量
    gzip on;
    gzip_min_length 1k;
    gzip_types text/event-stream;

    #如需部署在网站子路径，如"example.com/<a class="tag_link" href="https://www.xarjtc.com/tag/chatgpt" target="_blank" title="查看chatgpt此标签更多文章"><abbr title="">chatgpt</abbr></a>"，配置如下
    #location ^~ /chatgpt/v1 {
    location ^~ /v1 {
        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 $gptauth;
        proxy_pass_header Authorization;
        #流式传输，不关闭buffering缓存会卡死，必须配置！！！
        proxy_buffering off;
    }
    #与上面反代接口的路径保持一致
    #location /chatgpt {
    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，可先设置代理环境变量

GitHub地址：https://github.com/xqdoo00o/chatgpt-web

在线网址：https://xqdoo00o.github.io/chatgpt-web/