搭建一个chatgpt网页聊天界面

sockstack / 128 / 2023-11-15 00: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-15

修改于

2024-09-20

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