手把手教你搭建基于chatGPT的智能机器人网页
最近openAI公司的chatGPT是火的一塌糊涂呀，几个月用户过2亿，今天咱们就利用openAI公司提供的API搭建一个自己的智能机器人。
1、服务器准备
到搬瓦工买一台vps，安装centos7服务器，具体部署google、百度，不赘述。具体原理就是用这台VPS部署flask，然后通过代码调用OpenAI公司提供的API接口，再将返回的结果返回给前端展示。前端页面很简单，一个输入框用于用户输入想要提示的问题，一个文本显示框，显示结果，一个提交按钮。原型就长这样：
2、申请openAI的API_KEY
注册openAI用户，国内手机没法注册，需要去搞个虚拟手机（https://sms-activate.org/ 这个网站就能搞），或者这里：https://www.utcplus.com/买一个，然后在openAI官网的如下页面创建自己的API_KEY：
3、安装必要的python组件
（1）因为打算用python的flask进行快速的服务端调用，安装flask ： pip install flask
（2）为解决跨域问题安装 flask cros： pip install flask-cors
（3）安装专门针对flask的web服务进程gunicron：pip install gunicorn
4、准备服务器端代码
（1）在/var/www/下面创建一个文件夹chatGPT，这就是工程所在文件夹了，在chatGPT文件夹下创建callOpenAI.py文件，内容如下：
from flask import Flask,request
from flask_cors import CORS
import os
import openai
app = Flask(__name__)
CORS(app,supports_credentials=True)
@app.route('/',methods=['GET','POST'])
def hello_world():
text=request.args.get('text')
return text
@app.route('/callChatGPT',methods=['GET','POST'])
def callChatGPT():
input = request.args.get('input')
openai.api_key = "xxxxxxxx"
#openai.api_key = os.getenv("OPENAI_API_KEY")
response = openai.Completion.create(model="text-davinci-003",prompt=input,temperature=0.5,max_tokens=500)
return response.choices[0].text
if __name__ == "__main__":
app.run(host='xx.xx.xx.xx',port=xxxx,debug=True)做完上面这步就可以在命令行中输入：python callOpenAI.py，然后通过浏览器的：
http://xx.xx.xx.xx:xxxx/callChatGPT?input=what is your name来进行开发调测
（2）在同一个目录下创建wsgi.py，供gunicorn使用
from callOpenAI import app
if __name__ == "__main__":
app.run()（3）在同一目录下创建gunicorn.conf文件，内容如下：
bind = "xx.xx.xx.xx:xxxx"
workers = 10
errorlog = "/var/www/chatGPT/gunicorn.error.log"
loglevel = "debug"
proc_name = "callChatGPT"然后执行如下命令，即可以正式投产调用接口。
gunicorn --config gunicorn.conf wsgi:app
ps -ef |grep gunicorn
kill xxxx5、准备前端代码
前端调用的时候，直接使用ajax可能会出现跨域调用问题，先要如前所示安装flask-cors，然后在代码中进行配置即可解决，前端示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>安联资管-chatGPT-AI问答系统</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.question-container {
padding: 10px;
}
.questions {
padding: 10px;
}
.answers {
padding: 10px;
}
</style>
</head>
<body>
<div class="question-container">
<h2>安联资管-chatGPT-AI问答系统</h2>
<form>
<div class="questions">
<label>Questions:</label>
<input type="text" id="question" name="提问" placeholder="在这里提问..."/>
</div>
<div class="answers">
<label>Answers:</label>
<textarea name="回答" disabled placeholder ="答案将展示在这里..." ></textarea>
</div>
<input type="submit" value="提交"/>
</form>
</div>
<script>
$(document).ready(function(){
// Submit button click event
$('form').on('submit', function(event){
event.preventDefault();
// Send the data to flask
$.ajax({
url: 'http://xx.xx.xx.xx:xxxx/callChatGPT', // enter your flask endpoint here
type: "GET",
data: "input="+$('#question').val(),
dataType: 'text',
success: function(response) {
console.log(JSON.stringify(response))
// check response and update answer box
if (response) {
alert("success");
$('.answers textarea').val(response);
} else {
alert("没有找到答案，请重新提问.");
}
},
error: function(xhr) {
alert("异常: " + xhr.status + " " + xhr.statusText);
}
});
});
});
</script>
</body>
</html>需要特别注意，因服务端接口callChatGPT返回的是response.choices[0].text，是文本类型，因此前端的传入参数dataType要是text，response直接当成文本使用就可以了，不用再去解析，否则会报错。
6、结果展示
（1）通过浏览器
（2）通过前端页面
solo
