├── README.md
├── main.py
├── static
    ├── script.js
    └── style.css
└── templates
    └── chat3.5.html


/README.md:
--------------------------------------------------------------------------------
1 | # ChatGPT-API-Flask-Website
2 | Use ChatGPT API gpt-3.5-turbo and python Flask to build a interactive chat website：
3 | 
4 | My Chinese installation blog:[link](https://blog.csdn.net/qq_41608408/article/details/128946168)
5 | 
6 | ![image](https://user-images.githubusercontent.com/47026637/222842366-6240c87f-c4d3-40e6-8120-356863f4cfaa.png)
7 | 


--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, request, render_template, redirect
 2 | import openai
 3 | 
 4 | openai.api_key = 'your API key'
 5 | 
 6 | server = Flask(__name__)
 7 | 
 8 | def send_gpt(prompt):
 9 |     try:
10 |         response = openai.ChatCompletion.create(
11 |         model='gpt-3.5-turbo',
12 |         messages=[{"role": "user", "content": prompt}]
13 |         )
14 |         return response["choices"][0]['message']['content']
15 |     except Exception as e:
16 |         return e
17 | 
18 | 
19 | @server.route('/', methods=['GET', 'POST'])
20 | def get_request_json():
21 |     if request.method == 'POST':
22 |         if len(request.form['question']) < 1:
23 |             return render_template(
24 |                 'chat3.5.html', question="NULL", res="Question can't be empty!")
25 |         question = request.form['question']
26 |         print("======================================")
27 |         print("Receive the question:", question)
28 |         res = send_gpt(question)
29 |         print("Q：\n", question)
30 |         print("A：\n", res)
31 | 
32 |         return render_template('chat3.5.html', question=question, res=str(res))
33 |     return render_template('chat3.5.html', question=0)
34 | 
35 | if __name__ == '__main__':
36 |     server.run(debug=True, host='0.0.0.0', port=80)
37 | 


--------------------------------------------------------------------------------
/static/script.js:
--------------------------------------------------------------------------------
1 | const loading = document.getElementById('loading');
2 | const form = document.querySelector('form');
3 | 
4 | form.addEventListener('submit', () => {
5 |   loading.style.display = 'block';
6 | });
7 | 


--------------------------------------------------------------------------------
/static/style.css:
--------------------------------------------------------------------------------
 1 | /* import Bootstrap */
 2 | @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
 3 | 
 4 | /* add custom styles */
 5 | body {
 6 |   font-family: sans-serif;
 7 | }
 8 | 
 9 | header {
10 |   padding: 1rem;
11 |   background-color: #fff;
12 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
13 | }
14 | 
15 | h1 {
16 |   margin: 0;
17 |   font-size: 2rem;
18 | }
19 | 
20 | main {
21 |   padding: 1rem;
22 | }
23 | 
24 | h2 {
25 |   margin-top: 1rem;
26 |   font-size: 1.5rem;
27 | }
28 | 
29 | form {
30 |   margin-top: 1rem;
31 | }
32 | 
33 | textarea {
34 |   align-items: center;
35 |   width: 90%;
36 |   border: 1px solid #ccc;
37 |   border-radius: 0.5rem;
38 |   resize: vertical;
39 |   font-size: 1.2rem;
40 | }
41 | 
42 | input[type="range"] {
43 |   width: 60%;
44 |   margin: 0 1rem;
45 | }
46 | 
47 | input[type="text"] {
48 |   border: none;
49 |   background: none;
50 |   width: 30px;
51 | }
52 | 
53 | input[type="submit"] {
54 |   display: block;
55 |   margin: 1rem auto;
56 |   width: 150px;
57 |   height: 50px;
58 |   background-color: lightpink;
59 |   border: 1px solid #ccc;
60 |   border-radius: 0.25rem;
61 |   font-size: 1.5rem;
62 |   cursor: pointer;
63 | }
64 | 
65 | #loading {
66 |   display: none;
67 |   color: gray;
68 |   margin-top: 1rem;
69 | }
70 | 
71 | pre {
72 |   margin-top: 1rem;
73 |   font-size: 1.5rem;
74 |   white-space: pre-wrap;
75 |   word-break: break-word;
76 |   text-align: justify;
77 |   line-height: 1.5;
78 | }
79 | 
80 | .dia{
81 |   margin-left: 15px;
82 |   margin-right: 15px;
83 | }
84 | 


--------------------------------------------------------------------------------
/templates/chat3.5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>ChatGPT</title>
 8 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
 9 |   <link rel="stylesheet" href="static/style.css">
10 | </head>
11 | 
12 | <body>
13 |   <header>
14 |     <h1>ChatGPT API</h1>
15 |     <h2>Artificial Intelligence at Your Fingertips</h2>
16 |   </header>
17 |   <main>
18 | 
19 |   <div class="content">
20 |     <form method="post" onsubmit="submit.disabled=true">
21 |       <br>
22 |       <center><textarea name="question" placeholder="Type your question here." rows="4"></textarea></center>
23 |       <br>
24 |       <input type="submit" value="Submit" id="submit">
25 |     </form>
26 |     <div id="loading"><b>Waiting for response...</b></div>
27 |   </div>
28 |   
29 | 
30 |   <div class="dia">                
31 |     {% if question %}
32 |       <div class="result">
33 |         <div class="question"><b>Alittlebean:</b>
34 |           <pre>{{ question }}</pre>
35 |         </div>
36 |         <hr>
37 |         <div class="response"><b>ChatGPT:</b>
38 |           <pre>{{ res }}</pre>
39 |         </div>
40 |       </div>
41 |     {% endif %}
42 |   </div>
43 | 
44 |   </main>
45 |   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
46 |   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
47 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js"></script>
48 |   <script src="static/script.js"></script>
49 | </body>
50 | 
51 | </html>
52 | 


--------------------------------------------------------------------------------