基于Vercel自建ChatGPT网页应用

article/2024/12/22 18:26:02

因为平时我们在使用ChatGPT官方提供的网页应用的时候,总是经常访问不了,或者经常报错,越来越频繁,一旦你离开页面太久,再返回跟它对话的时候,就会出现如下报错等等。

An error occurred. If this issue persists please contact us through our help center at help.openai.com.

发生错误。如果此问题仍然存在,请通过我们的帮助中心 help.openai.com 与我们联系

原因尚不清楚,可以点击重试,“Try again” 按钮。

所以本着这些原因,为了能够更顺畅的对话,就想着自己基于ChatGPT API搭建一个自用的网页应用,方便自己平时使用。

因此,这里是基于开源项目 ChatGPT-Next-Web 搭建的网页应用。

如果自己有OpenAI Key的可以尝试搭建使用。

Part1开始使用

准备好你的OpenAI API Key https://platform.openai.com/account/api-keys

GitHub账户  https://github.com/

Vercel账号 https://vercel.com/dashboard

本文是基于Vercel进行快速搭建的,可以实现一键快速部署网页服务应用

Vercel是什么?

Vercel 是一个全球化的云平台,旨在帮助开发人员更快地构建和部署现代 Web 应用程序。本项目以及许多Web应用可以一键免费部署在Vercel上。无需懂代码,无需懂linux,无需服务器,无需付费,无需设置OpenAI API代理。缺点是需要绑定域名才可以在国内无墙访问

Part2Fork 项目仓库

登录自己的 Github 账号,打开ChatGPT-Next-Web https://github.com/Yidadaa/ChatGPT-Next-Web 的项目主页,将代码仓库 Fork 到自己的账号:

77a9a466f03c760eecfe6973e2721655.png

点击fork后,创建当前的Fork,这样你就可以看到在自己账号仓库下有对应的项目

3c8bab5fd0c9099c996fd556ab65fee7.png

Part3保持更新

1自动更新

开启 Action 权限

为了保持更新,你可以打开项目自动更新,实现自动化更新。

开启此权限是为了让你的 Fork 仓库可以与上游代码库同步更新,并且每次同步完代码,Vercel 就会自动部署,可以说是完全自动化了~

如果你遇到了 Upstream Sync 执行错误,请手动 Sync Fork 一次!

当你 fork 项目之后,由于 Github 的限制,需要手动去你 fork 后的项目的 Actions 页面启用 Workflows,并启用 Upstream Sync Action,启用之后即可开启每小时定时自动更新:

8081cb72282b252b01da9563703fe6a1.png

773efa2399252ed21819ec10e8dcb652.png

2手动更新

如果你想让手动立即更新,可以查看 Github 的文档 了解如何让 fork 的项目与上游代码同步。

你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。

Part4部署在 Vercel

首先你要登录Vercel账号(如果没有可先注册 https://vercel.com/signup , 用Github 连接)

48e5177f1606093121f57d399234d31e.png

3创建项目

进入Vercel控制台 https://vercel.com/dashboard,创建一个新项目

699593e12d24dab490cd783166d242f0.png

此时已经识别到了你的 Github 账号,和教程第一步时 Fork 的代码仓库(ChatGPT-Next-Web),点击 Import:

ef999edb9e3e2379fd59d3e04b7cee34.png

4配置环境变量

本项目大多数配置项都通过环境变量来设置。

OPENAI_API_KEY (必填项)

OpenAI 密钥,你在 openai 账户页面申请的 api key。https://platform.openai.com/account/api-keys

CODE(可选)

访问密码,可选,可以使用逗号隔开多个密码。

警告:如果不填写此项,则任何人都可以直接使用你部署后的网站,可能会导致你的 token 被急速消耗完毕,建议填写此选项。

配置密码后,用户需要在设置页手动填写访问码才可以正常聊天,否则会通过消息提示未授权状态。

警告:请务必将密码的位数设置得足够长,最好 7 位以上,否则会被爆破。

本项目提供有限的权限控制功能,请在 Vercel 项目控制面板的环境变量页增加名为 CODE的环境变量,值为用英文逗号分隔的自定义密码:

code1,code2,code3

BASE_URL(可选)

Default: https://api.openai.com

Examples:  http://your-openai-proxy.com

OpenAI 接口代理 URL,如果你手动配置了 openai 接口代理,请填写此选项。

如果遇到 ssl 证书问题,请将 BASE_URL 的协议设置为 http。

OPENAI_ORG_ID (可选)

指定 OpenAI 中的组织 ID。

增加或修改该环境变量后

53fd0dca481edd5f5af90508d62000eb.png

点击 Deploy 部署:

正在部署,稍等 1-2 分钟,

部署成功:

7116e52dc1f1d15f80fe078aaac1eeb8.png

点击 Continue to Dashboard,去项目的控制台:

这个时候我们就可以看到刚刚部署的项目了。

5访问应用

d4b16b1a515a163b265461a0cab3ad08.png

打开访问页面,

061cdf4e3802d3e68af5b0cdf386a2a3.png

现在你就拥有属于自己的ChatGPT网页应用了,可以进行更加通畅的的对话,这里面还提供了丰富的内置 prompt ,个性化对话。

Part5附加

ChatGPT-Next-Web: https://github.com/Yidadaa/ChatGPT-Next-Web


http://chatgpt.dhexx.cn/article/euJ2JJui.shtml

相关文章

2023全新UI商业版ChatGPT网页版源码V4.7.7+支持Ai绘画

正文: 安装教程: 搭建宝塔 解析域名 上传程序至根目录 配置数据库信息:lib/config.php 导入数据库 PHP选择:7.3 访问网页即可! 配置APIKEY,登录网站后台自定义配置,不然网站无法使用! 网站后台地址/admin 默认账号:admi…

精心设计的ChatGPT网页版源码最聪明的镜像ChatGPT

demo软件园每日更新资源,请看到最后就能获取你想要的: 1.精心设计的 ChatGPT网页版源码 最聪明的镜像ChatGPT ChatGPT网页版源码 最聪明的镜像ChatGPT 支持GPT3.5turbo以及GPT4.0turbo的各种版本模型 精心设计的 UI,响应式设计,支持深色模式 极快的首…

ChatGPT网页版(基于SpringBoot和Vue)

目录 1.使用说明1.1 登录1.2 获取OpenAI KEY或User Token1.3 创建对话1.4 删除会话 1.使用说明 1.1 登录 登录http://chatgpt.alpacos.cn/ 1.2 获取OpenAI KEY或User Token 如果自己有OpenAI的token(sk-xxxx)的话,可以直接输入,点击右上角绑定按钮&am…

ChatGPT实现HTML网页文本提取

网页自动化工具 既然ChatGPT对于编程语言有非常强大的理解能力,那么它是否可以用来自动化地处理网页呢?答案是肯定的。ChatGPT可以使用机器学习算法来识别网页元素中的文本,并抽取出有用的信息。 例如我们提供一段层数比较多的相对来说较为…

【ChatGPT实战】5.使用ChatGPT自动化操作网页

在当今数字化的时代,网页已经成为了人们获取信息、娱乐、社交和购物等方面的主要途径。然而,随着我们对网页的需求和使用不断增加,我们也经常会面临着一些繁琐的网页操作,例如自动填充表单、自动化浏览和搜索等,这些操…

女子用ChatGPT交1000+男友,聊天按分钟收费,一周收入50万

量子位 | 公众号 QbitAI 注意看,这个女人叫卡琳,靠着GPT-4,她现在同时谈着1000男朋友。 对,我知道事情听上去有些离谱。就连GPT-4自己,都直呼“我一个AI都觉得非常不常见”。 但是先别急,因为更让人挠头的事…

安装chatgpt4free环境

pip3 install --index-url https://pypi.douban.com/simple -r requirements.txt 安装request报错解决办法 python -m pip install --upgrade pip 会继续报错,这里由于我们升级了pip,所以对应的镜像源也需要更换(博主这里换成了清华的&…

在pycharm中使用chatgpt

目录 前言 一、插件安装 二、使用步骤 总结 前言 ChatGPT是目前最强大的AI,不仅能够聊天、写小说,甚至码代码也不在话下。 但是在国内要使用chatgpt很麻烦,国内一家团队开发了一款idea插件NexChatGPT,用数据代理的方式&…

技巧|使用Chatgpt练习多种类型口语

练雅思口语——其实练什么语言、什么形式的口语都可以。 ChatGPT作为一款聊天机器人,自然可以用于对练口语——只要你的输入和它的输出都变换为语音的形式即可。 一、语音插件 首先,谷歌搜索voice control for chatgpt,点击第一个chrome……

chatgpt赋能Python-python3_9怎么安装

Python 3.9:安装指南 如果你正在学习编程或者已经是一名程序员,那么一定会了解到Python这个编程语言。Python是一种高级编程语言,其强大的设计特点和易于操作的特性使其成为了开发人员的首选。Python 3.9已经发布了,它虽然不是Py…

Windows 10使用WSL部署Chatgpt_academic

目录 一、在windows10中安装Ubuntu系统 二、在Ubuntu系统中安装anaconda3和GPT_Academic 本文主要介绍windows10使用WSL安装Ubuntu系统,然后通过安装anaconda3来部署chatgpt学术版的整个过程。Chatgpt学术版用来做论文润色等任务还是挺不错的,但是是否…

安装油猴插件解决chatgpt报错问题

转载自Github Daily公众号 Something went wrong. If this issue persists please contact usthrough our help center at help. openai.com. 最近几天,相信大家都发现了 ChatGPT 一个问题,就是官网报错越来越频繁了。 当你需用 ChatGPT 来处理一些比较…

ChatGPT使用学习(二):ChatPaper安装到测试详细教程(一文包会)

ChatPaper 1.简介及功能2.前置准备3.开始使用-命令行4.开始使用-网页 1.简介及功能 ChatPaper是一种基于文本生成技术的研究论文,可以根据用户的输入进行智能回复和互动,具有类似于ChatGPT的功能。它可以根据关键字来获取相应的论文,并通过分…

「部署全流程」 中科院学术专业版chatGPT来啦

前言 上周末的时候,一位开发者将名为「ChatGPT Academic」的项目开源至 GitHub。 仅用了短短一两天,该项目 Star 数便增长到了 21k,成为 GitHub 上又一个基于 ChatGPT 构建的热门开源项目。 这个项目就是《中科院学术专业版 ChatGPT》。 …

chatgpt academic3.37安装教程(haust)

作者邮箱:634494816qq.com chatgpt academic能干啥?具体用法看官网 使用chatgpt academic前置条件: ①需xx上网 ②有key(chatgpt官网注册账户即可免费获得)(注册教程在这,注意:无需付费&…

ChatGPT搭建语音智能助手

环境 python:3 ffmpeg:用于处理视频和语音 gradio:UI界面和读取语音 概述 我们的目的是做一个语音智能助手 下面我们开始 准备工作 下载Visual Studio Code Visual Studio Code 因为需要写python代码,用Visual Studio Code比较方便。 安装pytho…

【利用ChatGPT学习英语口语(包括如何安装插件的详细教程)】

内容目录 一、插入ChatGPT语音播放插件1. 打开谷歌浏览器——右上角三点——更多工具——扩展程序2. 点击扩展程序三个横杠——打开chrome 应用商店3. 搜索Voice Control for ChatGPT——点击如下图第一个——添加至Chrome——添加扩展程序4. 成功安装,打开ChatGPT有…

ChatGPT Plus用户专享:86款高效功能插件,详尽安装与使用全攻略

在前天的文章中,我们介绍了 ChatGPT 开放的全新模式 Web Browsing(网页浏览),启用后 ChatGPT 就可以开始上网,收集最新的互联网资料进行作答。 其他关于chatgpt使用方面:请访问: 链接&#xf…

chatgpt小程序安装指引

chatgpt小程序安装指引 JAVA 创建数据库,名字随意,数据库编码为utf8mb4 导入sql文件,在renren-api/db目录下面 第一次导入数据的先执行chatgpt.sql文件,在根据日期先后顺序执行 已导入过的同志,根据更新已经更新日期来导入 后台管理默认账号密码为admin 修改application-de…

公有云和ChatGPT关系不大

前段时间要过年、休养身体,写长篇,所以公众号停更了两个月。 本文解释了AI云为什么不会成为云厂商的重要营收途径,延伸分析了一些云产品的本质。 1. 流量密码不是财富密码 这两个月才突然热议ChatGPT的朋友,其实技术嗅觉有点迟钝、…