用VPS云服务器部署ChatGPT
前言
chatgpt做为近期爆火的人工智能服务，其账号和api接口的价格水涨船高。这里给出一个粗略的api部署方法，仅供参考。
文章结构：
-
注册ChatGPT
-
安装nginx
-
安装flask
-
安装gunicorn
-
设计html页面
最终成品页面：
ChatGPT注册
云服务器环境准备
说明：服务器版本centos7，莫斯科服务器，为了能够确保能够正常访问ChatGPT的api接口，请使用国外服务器
安装nginx
安装依赖
yum install -y gcc gcc-c++ make libtool wget pcre pcre-devel zlib zlib-devel openssl openssl-devel
nginx下载
wget http://nginx.org/download/nginx-1.18.0.tar.gz
解压
tar -zxvf nginx-1.18.0.tar.gz
安装
cd nginx-1.18.0
./configure
make && make install
最终nginx会安装在/usr/local目录下
nginx基础命令
普通启动服务：
/usr/local/nginx/sbin/nginx
配置文件启动：
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
重新加载进程：
/usr/local/nginx/sbin/nginx -s reload
查看相关进程：
ps -ef | grep nginx
nginx启动服务提示98: Address already in use错误：
查看80端口
netstat -tnulp|grep 80
杀掉占用80端口的进程
kill -9 xxxx
最后启动nginx
无法打开网页情况：
检查nginx是否正常运行
ps aux|grep nginx
检查80端口是否分配给nginx
netstat -ntlp
设置80防火墙
firewall-cmd --zone=public --add-port=80/tcp --permanent
重启防火墙
systemctl restart firewalld.service
说明：
firewall-cmd --reload # 配置nginx环境时，此命令无法生效
配置flask
安装flask
pip install flask
安装flask-cors
目的是为了实现XHR跨域拿到后端的python数据
pip install flask-cors
为方便管理，建议在nginx的文件夹内放置flask的.py文件
该文件配置如下
from flask import Flask
from flask import request
from flask_cors import CORS
import openai
openai.api_key = "chatgpt的api"
app = Flask(__name__)
CORS(app, resource=r'/*')
@app.route("/post_test", methods=["POST"])
def chat():
if request.method == "POST":
name = request.form.get("name")
completion = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "user", "content": name}
]
)
return completion['choices'][0]['message']['content']
if __name__ == "__main__":
app.run(host='0.0.0.0', port=81)
记得把81端口打开
安装和配置gunicorn
pip install gunicorn
在与flask同目录下创建一个gunicorn的python文件，并写入
bind = "0.0.0.0:81"
daemon = True
# 端口须和flask一致
用gunicorn启动flask
gunicorn -c gunicorn的python文件 flask的python文件名称：app
示例：
gunicorn -c gunicorn_test.py flask_test：app
参考文章：
通过Nginx部署flask项目 - 神雕爱大侠 - 博客园
前端设计
由于设计仓促，有些变量只是随便声明，有空再修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChatGPT</title>
<style type="text/css">
.talk_con{
width:600px;
height:700px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:620px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>您好，我是ChatGPT，请输入您想查询的问题。</span></div>
</div>
<div class="talk_input">
<input type="text" class="talk_word" id="talkwords">
<input type="submit" value="发送" class="talk_sub" id="submit">
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById('submit').onclick=()=>{
//获取问题并清空问题框
var b = document.getElementById('talkwords').value
//添加问题到对话
const d=document.createElement('div');
Ques = '<div class="btalk"><span>'+b+'</span></div>'
d.innerHTML=Ques;
const chatbox = document.getElementById('words')
chatbox.insertBefore(d, chatbox.nextSiblings)
const d2=document.createElement('div');
think = '<div class="atalk"><span>我正在思考，大约需要一分钟，请稍等一会...</span></div>'
d2.innerHTML=think;
chatbox.insertBefore(d2, chatbox.nextSiblings)
//xhr
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("Mincrosoft.XMLHTTP");
};
ajax.open("POST","http://harl02.top:81/post_test");
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")
ajax.send('name='+document.getElementById('talkwords').value)
document.getElementById('talkwords').value=''
ajax.onreadystatechange = function(){
if(ajax.readyState == 4&& ajax.status ==200){
//左边的对话
a = ajax.responseText
const d=document.createElement('div');
ih = '<div class="atalk"><span>'+a+'</span></div>'
d.innerHTML=ih;
const kk = document.getElementById('words')
kk.insertBefore(d, kk.nextSiblings)
}
}
};
</script>
</html>
参考的文章：
标签：gunicorn,VPS,flask,nginx,ajax,10px,服务器,ChatGPT,document From： https://www.cnblogs.com/harl02/p/17199398.html