1. OpenAI GPT API
1.1 GPT 3.5 API (updated)
The real ChatGPT API, gpt-3.5-turbo , is finally here ! Different from the previous api version of GPT3 text-davinci-003. The answers generated by GPT version 3.5 will be very intelligent.
The picture below is the model provided by OpenAI now. Among them, gpt-3.5-turbo is the best model.
1.1 OpenAI GPT3 text-davinci-003 API
ChatGPT is very popular recently, using the same method as InstructGPT, using Reinforcement Learning from Human Feedback (RLHF) from human feedback to train the model, but the data collection settings are slightly different. ChatGPT was fine-tuned on a model in the GPT-3.5 series, which completed training in early 2022.
Now because the official website https://chat.openai.com/ has been fully loaded, I decided to use the public API of GPT-3 to make a website based on python flask. Although the GPT-3 model is not as good as GPT-3.5, its function is still very powerful.
GPT-3 has a total of 4 models, of which davinci is the most capable model, and ada is the fastest model. Davinci's maximum request is 4000 tokens, which contains questions and answers.
The code in this article uses GPT3.5 + Flask. If you want to use GPT3, you can find the Github link of GPT 3 + Flask below.
2. Environment introduction
- OpenAI API Key
- Python 3
- Python library: openai flask
GPT 3 and GPT3.5 use the same API, so brothers who already have an API key do not need to regenerate it.
The computer must have a python 3 environment.
Make sure to install the openai and flask libraries with pip.
pip install openai
pip install flask
If you have installed openai when playing GPT3 before, you need to update the openai library with pip, and update openai to version 0.27.0 .
pip install --upgrade openai
3. GPT 3.5 API + Flask code
3.1 Python Flask code
The python file is main.py.
from flask import Flask, request, render_template, redirect
import openai
openai.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 Web page code HTML
The html webpage (chat3.5.html) is placed in the templates folder, and the templates folder and the python file (main.py) are placed in the same directory.
<!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/[email protected]/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 Style Code CSS
The style code style.css is placed under the static folder.
/* 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 Script code JS
The script code script.js is placed under the static folder.
const loading = document.getElementById('loading');
const form = document.querySelector('form');
form.addEventListener('submit', () => {
loading.style.display = 'block';
});
4. Github link
GPT 3 + Flask (text-davinci-003 API):
https://github.com/redemptionwxy/GPT3-API-Flask-Python_Chat_Website
GPT 3.5 + Flask (gpt-3.5-turbo API ):
https://github.com/redemptionwxy/ChatGPT-API-Flask-Website
5. Website effect display and beautification
5.1 Original web page
After successfully running the python code, it will be displayed as shown in the figure below. Open the browser and enter 127.0.0.1:80 or localhost to access.
This Flask website can customize Temperature, that is, the randomness of GPT-3's answer. Suggestions for temperature settings are also given on the website, and the following is the rendering.
The effect of the website is average, mainly to realize the function. If you want to add variables other than Temperature, you can follow the example.
The original webpage uses chat.html
Github link: https://github.com/redemptionwxy/GPT3-API-Flask-Python_Chat_Website
5.2 After beautification (update)
You can see that the webpage I wrote myself is very simple. So I sent the html code to chatgpt, hoping it can optimize and look good for me. I submit several functions to it:
- Separate html, css, js files and retain the original functions
- Practical bootstrap style template for design
- The Temperature Guide is placed on the right side of the website, click to hide
After some debugging, I finally got this page:
Note: Since the code is too long and repetitive, I only update the beautified code in github .
In github is chat_2.html
GPT 3.5 + Flask Gitgub link:
https://github.com/redemptionwxy/ChatGPT-API-Flask-Website
that's all.