用海外VPS云服务器部署ChatGPT web网站

原创 admin  2023-04-04 15:16  阅读 351 次

前言

chatgpt做为近期爆火的人工智能服务，其账号和api接口的价格水涨船高。这里给出一个粗略的api部署方法，仅供参考。

云服务器环境准备

说明：服务器版本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

前端设计

由于设计仓促，有些变量只是随便声明，有空再修改 

<!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","api接口");
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>

 

来源：https://www.huanp.com/idc/139414.html
声明：欢迎分享本文，转载请保留出处！

发表评论


表情