OpenAI GPT3.5/GPT3 + Flask 制作自己的交互网页教程

OpenAI GPT3.5/GPT3 + Flask 制作自己的交互网页教程 | 附源码和 Github链接

1. OpenAI GPT API

1.1 GPT 3.5 API （更新）

真正的 ChatGPT API， gpt-3.5-turbo，终于来了！不同于之前的 GPT3 text-davinci-003 的 api 版本。 GPT 3.5 版本生成的回答将十分的智能。

下图是现在OpenAI提供的模型。其中 gpt-3.5-turbo 是效果最好的模型。

在这里插入图片描述

1.1 OpenAI GPT3 text-davinci-003 API

最近ChatGPT很火，使用与InstructGPT相同的方法，使用来自人类反馈的强化学习 Reinforcement Learning from Human Feedback (RLHF) 来训练该模型，但数据收集设置略有不同。ChatGPT是在 GPT-3.5 系列中的一个模型进行微调的，该模型于 2022 年初完成训练。

现在因为官网 https://chat.openai.com/ 一直是满载状态，我决定使用GPT-3的公开API做一个基于python flask的网站。GPT-3的模型虽然比不上GPT-3.5的，但其功能仍然是十分强大。

GPT-3 一共有4个模型，其中davinci是最有能力的模型，而ada是最快的模型。Davinci 最大请求量是4000个tokens，这其中包含了问题和回答。

在这里插入图片描述

本文代码使用的是GPT3.5 + Flask，如果想用GPT3的同学可以在下面找到 GPT 3 + Flask 的 Github 链接。

2. 环境介绍

OpenAI API Key
Python 3
python库：openai flask

GPT 3 和 GPT3.5 用的是同一个 API, 所以已经有 API key 的兄弟不用再重新生成了。
在这里插入图片描述
电脑要有python 3 的环境。
确认用pip安装 openai 和 flask 两个库。

pip install openai
pip install flask

如果说你之前在玩GPT3的时候已经装了openai，这时需要用 pip 更新一下openai库，把openai更新到 0.27.0 版本即可。

pip install --upgrade openai

3. GPT 3.5 API + Flask 代码

3.1 Python Flask 代码

python 文件为 main.py。

from flask import Flask, request, render_template, redirect
import openaiopenai.api_key = 'your API key'server = Flask(__name__)def send_gpt(prompt):try:response = openai.ChatCompletion.create(model='gpt-3.5-turbo',messages=[{"role": "user", "content": prompt}])return response["choices"][0]['message']['content']except Exception as e:return e@server.route('/', methods=['GET', 'POST'])
def get_request_json():if request.method == 'POST':if len(request.form['question']) < 1:return render_template('chat3.5.html', question="NULL", res="Question can't be empty!")question = request.form['question']print("======================================")print("Receive the question:", question)res = send_gpt(question)print("Q：\n", question)print("A：\n", res)return render_template('chat3.5.html', question=question, res=str(res))return render_template('chat3.5.html', question=0)if __name__ == '__main__':server.run(debug=True, host='0.0.0.0', port=80)

3.2 网页代码 HTML

html网页（chat3.5.html）放在templates文件夹里，templates文件夹和python文件（main.py）放在同一目录下。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>ChatGPT</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"><link rel="stylesheet" href="static/style.css">
</head><body><header><h1>ChatGPT API</h1><h2>Artificial Intelligence at Your Fingertips</h2></header><main><div class="content"><form method="post" onsubmit="submit.disabled=true"><br><center><textarea name="question" placeholder="Type your question here." rows="4"></textarea></center><br><input type="submit" value="Submit" id="submit"></form><div id="loading"><b>Waiting for response...</b></div></div><div class="dia">                {% if question %}<div class="result"><div class="question"><b>Alittlebean:</b><pre>{{ question }}</pre></div><hr><div class="response"><b>ChatGPT:</b><pre>{{ res }}</pre></div></div>{% endif %}</div></main><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js"></script><script src="static/script.js"></script>
</body></html>

3.3 样式代码 CSS

样式代码 style.css 放在 static 文件夹下。

/* import Bootstrap */
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');/* add custom styles */
body {font-family: sans-serif;
}header {padding: 1rem;background-color: #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}h1 {margin: 0;font-size: 2rem;
}main {padding: 1rem;
}h2 {margin-top: 1rem;font-size: 1.5rem;
}form {margin-top: 1rem;
}textarea {align-items: center;width: 90%;border: 1px solid #ccc;border-radius: 0.5rem;resize: vertical;font-size: 1.2rem;
}input[type="range"] {width: 60%;margin: 0 1rem;
}input[type="text"] {border: none;background: none;width: 30px;
}input[type="submit"] {display: block;margin: 1rem auto;width: 150px;height: 50px;background-color: lightpink;border: 1px solid #ccc;border-radius: 0.25rem;font-size: 1.5rem;cursor: pointer;
}#loading {display: none;color: gray;margin-top: 1rem;
}pre {margin-top: 1rem;font-size: 1.5rem;white-space: pre-wrap;word-break: break-word;text-align: justify;line-height: 1.5;
}.dia{margin-left: 15px;margin-right: 15px;
}

3.4 脚本代码 JS

脚本代码 script.js 放在static 文件夹下。

const loading = document.getElementById('loading');
const form = document.querySelector('form');form.addEventListener('submit', () => {loading.style.display = 'block';
});