Skip to content

Commit bd72ab3

Browse files
jkd2021jkd2021
committed
0829 python flask chatbot - openai api
0 parents  commit bd72ab3

File tree

8 files changed

+208
-0
lines changed

8 files changed

+208
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# cache / CSS / JavaScript files
2+
.idea/
3+
__pycache__/
4+
css/bootstrap*
5+
js/bootstrap*

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Python Flask Chatbot Web-App using OpenAI API
2+
3+
## Requirements
4+
> **pip install flask**\
5+
> **pip install openai**
6+
7+
8+
## /css & /js --- Bootstrap Frontend Framework for UI
9+
[Bootstrap v5.3](https://getbootstrap.com/docs/5.3/getting-started/download/) --- downloaded .css (CSS) and .js (JavaScript) files under /css & /js
10+
11+
12+
## /static & /templates
13+
/static --- customized static resources (customized CSS & JavaScript files)\
14+
/templates --- HTML template files, used together with Backend framework
15+
16+
17+
## main.py
18+
Python Script for Flask (A lightweight backend framework) Web-App

‎css/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
download /css from https://getbootstrap.com/docs/5.3/getting-started/download/

‎js/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
download /js from https://getbootstrap.com/docs/5.3/getting-started/download/

‎main.py

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import os
2+
from flask import Flask, request, render_template, redirect
3+
from openai import OpenAI
4+
5+
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
6+
server = Flask(__name__)
7+
system_prompt = "You are the personal assistant of Kangdong!"
8+
9+
10+
def send_gpt(prompt):
11+
try:
12+
response = client.chat.completions.create(
13+
model="gpt-4o-mini",
14+
messages=[
15+
{"role": "system", "content":system_prompt},
16+
{"role": "user", "content": prompt}],
17+
temperature=0
18+
)
19+
response_dict = response.model_dump()
20+
response_message = response_dict["choices"][0]["message"]["content"]
21+
return response_message
22+
except Exception as e:
23+
return e
24+
25+
26+
@server.route('/', methods=['GET', 'POST'])
27+
def get_request_json():
28+
if request.method == 'POST':
29+
if len(request.form['question']) < 1:
30+
return render_template(
31+
'chat3.5.html', question="NULL", res="Question can't be empty!")
32+
question = request.form['question']
33+
print("======================================")
34+
print("Receive the question:", question)
35+
res = send_gpt(question)
36+
print("Q：\n", question)
37+
print("A：\n", res)
38+
39+
return render_template('chat3.5.html', question=question, res=str(res))
40+
return render_template('chat3.5.html', question=0)
41+
42+
if __name__ == '__main__':
43+
server.run(debug=True, host='0.0.0.0', port=5000)

‎static/script.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const loading = document.getElementById('loading');
2+
const form = document.querySelector('form');
3+
4+
form.addEventListener('submit', () => {
5+
loading.style.display = 'block';
6+
});

‎static/style.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* import Bootstrap */
2+
@import url('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+
}

‎templates/chat3.5.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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="css/bootstrap.min.css">
9+
<link rel="stylesheet" href="static/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Chatbot - ChatGPT API</h1>
15+
<h2>Personal Assistant of Kangdong</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 something 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>You:</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/[email protected]/dist/umd/popper.min.js"></script>
47+
<script src="css/bootstrap.min.css"></script>
48+
<script src="static/script.js"></script>
49+
</body>
50+
51+
</html>

0 commit comments

Comments
 (0)