搭建一个chatgpt网页聊天界面

sockstack / 141 / 2023-11-14 11:47:29

<p><span style="color: red; font-size: 18px">ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。</span><br><a href="https://ckai.xyz/?sockstack&section=detail" target="__blank">https://ckai.xyz</a><br><br></p> <article class="_2rhmJa"><h1>缘起</h1>
<p>最近chatgpt很火啊，刚出来的时候没怎么在意，后来试用了一下，在一些问题上它的回答还是蛮靠谱的，特别是用于翻译方面的问题。于是想着自己搭一个用用，访问起来方便些。</p>
<h1>折腾</h1>
<p>首先我们需要一台服务器，得是国外的，国内暂时没法访问，要是有代理的话可以试试。然后还需要准备一个chatgpt账号，有api也行。首先如果有账号的话就去chatgpt管理页面获取个api，进到首页，点击右上角头像，下拉菜单中点击“View API keys”，进去新建个api即可，这个过程需要上网环境的支持，所以还是花点小钱直接买比较方便。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 602px; background-color: transparent;">
<div class="image-container-fill" style="padding-bottom: 75.72%;"></div>
<div class="image-view" data-width="795" data-height="602"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-6771eb6081b0401e.jpg" data-original-width="795" data-original-height="602" data-original-format="image/jpeg" data-original-filesize="16024" data-image-index="0" style="cursor: zoom-in;" class="" src="//upload-images.jianshu.io/upload_images/27874204-6771eb6081b0401e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/795/format/webp"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 517px;">
<div class="image-container-fill" style="padding-bottom: 73.75%;"></div>
<div class="image-view" data-width="1124" data-height="829"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-f532e9997181bea1.jpg" data-original-width="1124" data-original-height="829" data-original-format="image/jpeg" data-original-filesize="62327" data-image-index="1" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p>准备好api后，我们去github上找到“Chanzhaoyu/chatgpt-web”这个项目，可以看到关于项目的详细介绍，还有部署方式，我们这里用docker部署，比较方便。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 604px;">
<div class="image-container-fill" style="padding-bottom: 86.24000000000001%;"></div>
<div class="image-view" data-width="1112" data-height="959"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-78be1df1685a46b0.jpg" data-original-width="1112" data-original-height="959" data-original-format="image/jpeg" data-original-filesize="30179" data-image-index="2" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p>方便的话打开docker的管理界面操作，没有的话也可以参考docker项目的部署命令，我这里用宝塔的docker管理器演示，其他的管理器操作类似的。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 865px;">
<div class="image-container-fill" style="padding-bottom: 123.55000000000001%;"></div>
<div class="image-view" data-width="1015" data-height="1254"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-16c11f630e25da5e.jpg" data-original-width="1015" data-original-height="1254" data-original-format="image/jpeg" data-original-filesize="75808" data-image-index="3" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p>来到“镜像管理”界面，点击“镜像搜索”，在搜索框内输入“chenzhaoyu94/chatgpt-web”找到正确的镜像拉取下来。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 379px;">
<div class="image-container-fill" style="padding-bottom: 54.02%;"></div>
<div class="image-view" data-width="1368" data-height="739"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-3e33e9ee15add229.jpg" data-original-width="1368" data-original-height="739" data-original-format="image/jpeg" data-original-filesize="44298" data-image-index="4" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p>然后来到“容器列表”界面，点击“创建容器”，“镜像”选取刚才拉取的镜像；“端口映射”容器端口是3002，外部端口选一个你开放了的端口不然访问不了；“环境变量”里一般填一个OPENAI_API_KEY即你的chatgpt api 就可以了，当然你需要设置其他的话就参考下官方文档。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 460px;">
<div class="image-container-fill" style="padding-bottom: 65.61%;"></div>
<div class="image-view" data-width="1384" data-height="908"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-f0e1366814a06f59.jpg" data-original-width="1384" data-original-height="908" data-original-format="image/jpeg" data-original-filesize="69424" data-image-index="5" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 544px;">
<div class="image-container-fill" style="padding-bottom: 77.69%;"></div>
<div class="image-view" data-width="1022" data-height="794"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-876f567c50805f1d.jpg" data-original-width="1022" data-original-height="794" data-original-format="image/jpeg" data-original-filesize="69097" data-image-index="6" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p>确认无误后，点击“提交”，过一会儿容器创建好后就可以访问你服务器IP+端口，来和chatgpt愉快的聊天了。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 510px;">
<div class="image-container-fill" style="padding-bottom: 72.8%;"></div>
<div class="image-view" data-width="1702" data-height="1239"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-ab55af6b7723c46d.jpg" data-original-width="1702" data-original-height="1239" data-original-format="image/jpeg" data-original-filesize="174100" data-image-index="7" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<h1>总结</h1>
<p>现阶段的ai已经很厉害了，如果继续发展下去的话可能好多人饭碗不保啊，不过总的来说还是会极大的助力我们的工作和生活，一个随时随地有问必答的助理在身边以前想想就很科幻，现在在慢慢变成现实了。</p>
<p></p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 344px;">
<div class="image-container-fill" style="padding-bottom: 18.2%;"></div>
<div class="image-view" data-width="1890" data-height="344"><img referrerpolicy="no-referrer"  data-original-src="//upload-images.jianshu.io/upload_images/27874204-8f470875ceef1cfa.png" data-original-width="1890" data-original-height="344" data-original-format="image/png" data-original-filesize="53086" data-image-index="8" style="cursor: zoom-in;" class="image-loading"></div>
</div>
<div class="image-caption"></div>
</div>
<p></p>
<p><br></p></article>

搭建一个chatgpt网页聊天界面

作者

sockstack

许可协议

CC BY 4.0

发布于

2023-11-14

修改于

2024-10-22

上一篇：软件：常用 Linux 软件汇总，值得收藏下一篇：为什么要加入ChatGPT圈子？

尚未登录

搭建一个chatgpt网页聊天界面

文章分类

博客重构之路

Spring Boot简单入门

k8s 入门教程

MySQL 知识

NSQ 消息队列

ThinkPHP5 源码分析

使用 Docker 从零开始搭建私人代码仓库

日常开发汇总

标签列表

springboot

hyperf

swoole

webman

php

多线程

数据结构

docker

k8s

thinkphp

mysql

tailwindcss

flowbite

css

前端