OpenAI GPT3.5/GPT3 + Flask Make your own interactive webpage tutorial | with source code and Github link


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.

insert image description here

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 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.

insert image description here

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

  1. OpenAI API Key
  2. Python 3
  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.
insert image description here
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

from flask import Flask, request, render_template, redirect
import openai

openai.api_key = 'your API key'

server = Flask(__name__)

def send_gpt(prompt):
        response = openai.ChatCompletion.create(
    "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("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__':, host='', 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 ( are placed in the same directory.

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="static/style.css">

    <h1>ChatGPT API</h1>
    <h2>Artificial Intelligence at Your Fingertips</h2>

  <div class="content">
    <form method="post" onsubmit="submit.disabled=true">
      <center><textarea name="question" placeholder="Type your question here." rows="4"></textarea></center>
      <input type="submit" value="Submit" id="submit">
    <div id="loading"><b>Waiting for response...</b></div>

  <div class="dia">                
    {% if question %}
      <div class="result">
        <div class="question"><b>Alittlebean:</b>
   { question }}</pre>
        <div class="response"><b>ChatGPT:</b>
   { res }}</pre>
    {% endif %}

  <script src=""></script>
  <script src="[email protected]/dist/umd/popper.min.js"></script>
  <script src=""></script>
  <script src="static/script.js"></script>


3.3 Style Code CSS

The style code style.css is placed under the static folder.

/* import Bootstrap */
@import url('');

/* 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;

  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', () => {
   = 'block';

4. Github link

GPT 3 + Flask (text-davinci-003 API):

GPT 3.5 + Flask (gpt-3.5-turbo API ):

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 or localhost to access.

insert image description here

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:

insert image description here

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:

  1. Separate html, css, js files and retain the original functions
  2. Practical bootstrap style template for design
  3. 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

insert image description here
GPT 3.5 + Flask Gitgub link:

that's all.

Guess you like