Skip to content

Commit 5b17ecf

Browse files
logankilpatricklogankilpatrick
committed
Stage udpates
1 parent 6feb9c5 commit 5b17ecf

File tree

9 files changed

+207
-126
lines changed

9 files changed

+207
-126
lines changed

‎.env.example

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ FLASK_APP=app
22
FLASK_ENV=development
33

44
# Once you add your API key below, make sure to not share it with anyone! The API key should remain private.
5-
OPENAI_API_KEY=
5+
OPENAI_API_KEY=abc-123

‎ChatCompletions/app.py

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import os
2+
from openai import OpenAI
3+
from flask import Flask, redirect, render_template, request, url_for
4+
5+
client = OpenAI()
6+
7+
app = Flask(__name__)
8+
9+
chat_history = [
10+
{"role": "system", "content": "You are a helpful assistant."},
11+
]
12+
13+
14+
@app.route("/", methods=("GET", "POST"))
15+
def index():
16+
if request.method == "POST":
17+
user_message = request.form["message"]
18+
chat_history.append({"role": "user", "content": user_message})
19+
20+
completion = client.chat.completions.create(
21+
model="gpt-3.5-turbo",
22+
messages=chat_history,
23+
)
24+
chat_history.append(
25+
{"role": "assistant", "content": completion.choices[0].message.content}
26+
)
27+
return redirect(url_for("index"))
28+
29+
return render_template("index.html", chat_history=chat_history)

‎ChatCompletions/static/main.css

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@font-face {
2+
font-family: "ColfaxAI";
3+
src:
4+
url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2) format("woff2"),
5+
url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
6+
font-weight: normal;
7+
font-style: normal;
8+
}
9+
10+
@font-face {
11+
font-family: "ColfaxAI";
12+
src:
13+
url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
14+
url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
15+
font-weight: bold;
16+
font-style: normal;
17+
}
18+
19+
body,
20+
input {
21+
font-size: 16px;
22+
line-height: 24px;
23+
color: #353740;
24+
font-family: "ColfaxAI", Helvetica, sans-serif;
25+
}
26+
27+
body {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
padding-top: 60px;
32+
}
33+
.icon {
34+
width: 34px;
35+
}
36+
h3 {
37+
font-size: 32px;
38+
line-height: 40px;
39+
font-weight: bold;
40+
color: #202123;
41+
margin: 16px 0 40px;
42+
}
43+
44+
.chat-container {
45+
max-width: 600px;
46+
width: 100%;
47+
margin: 0 auto;
48+
padding-top: 20px;
49+
display: flex;
50+
flex-direction: column;
51+
align-items: center;
52+
padding-bottom: 160px;
53+
margin-bottom: 20px;
54+
overflow: auto;
55+
}
56+
57+
.user-message,
58+
.assistant-message {
59+
padding: 12px 16px;
60+
border: 1px solid #10a37f;
61+
border-radius: 4px;
62+
margin-bottom: 8px;
63+
max-width: 80%;
64+
word-wrap: break-word;
65+
}
66+
67+
.user-message {
68+
align-self: flex-end;
69+
background-color: #daf8e3;
70+
}
71+
72+
.assistant-message {
73+
align-self: flex-start;
74+
background-color: #f1f1f1;
75+
}
76+
77+
.message-input-container {
78+
position: fixed;
79+
bottom: 0;
80+
left: 0;
81+
right: 0;
82+
padding: 20px;
83+
background: #fff;
84+
border-top: 1px solid #eaeaea;
85+
display: flex;
86+
justify-content: center;
87+
height: auto;
88+
padding-bottom: 20px;
89+
}
90+
91+
form {
92+
max-width: 600px;
93+
width: 100%;
94+
margin: 0 auto;
95+
display: flex;
96+
flex-direction: column;
97+
align-items: center;
98+
}
99+
100+
textarea {
101+
padding: 12px 16px;
102+
border: 1px solid #10a37f;
103+
border-radius: 4px;
104+
margin-bottom: 24px;
105+
width: 100%;
106+
min-height: 50px;
107+
resize: both;
108+
overflow: auto;
109+
}
110+
111+
input[type="submit"] {
112+
padding: 12px 16px;
113+
width: 100%;
114+
color: #fff;
115+
background-color: #10a37f;
116+
border: none;
117+
border-radius: 4px;
118+
text-align: center;
119+
cursor: pointer;
120+
}
121+
122+
input[type="text"] {
123+
padding: 12px 16px;
124+
border: 1px solid #10a37f;
125+
border-radius: 4px;
126+
margin-bottom: 24px;
127+
}
128+
129+
::placeholder {
130+
color: #8e8ea0;
131+
opacity: 1;
132+
}
133+
134+
.result {
135+
font-weight: bold;
136+
margin-top: 40px;
137+
}

‎ChatCompletions/templates/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>OpenAI Chat</title>
5+
<link
6+
rel="stylesheet"
7+
href="{{ url_for('static', filename='main.css') }}"
8+
/>
9+
</head>
10+
<body>
11+
<h1>OpenAI Chat Completion Quickstart</h1>
12+
<div class="chat-container">
13+
{% for message in chat_history %}
14+
<div
15+
class="{{ 'user-message' if message.role == 'user' else 'assistant-message' }}"
16+
>
17+
{{ message.content }}
18+
</div>
19+
{% endfor %}
20+
</div>
21+
<div class="message-input-container">
22+
<form action="/" method="post">
23+
<textarea
24+
name="message"
25+
placeholder="Type your message here..."
26+
required
27+
></textarea>
28+
<input type="submit" value="Send" />
29+
</form>
30+
</div>
31+
<script>
32+
window.onload = function () {
33+
window.scrollTo(0, document.body.scrollHeight);
34+
};
35+
</script>
36+
</body>
37+
</html>

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# OpenAI API Quickstart - Python example app
22

3-
This is an example pet name generator app used in the OpenAI API [quickstart tutorial](https://beta.openai.com/docs/quickstart). It uses the [Flask](https://flask.palletsprojects.com/en/2.0.x/) web framework. Check out the tutorial or follow the instructions below to get set up.
3+
This is an example chat app intended to get you started with your first OpenAI API [quickstart tutorial](https://platform.openai.com/docs/quickstart) project. It uses the Chat Completions API to create a simple general purpose chat.
44

55
## Setup
66

@@ -33,12 +33,12 @@ This is an example pet name generator app used in the OpenAI API [quickstart tut
3333
$ cp .env.example .env
3434
```
3535

36-
7. Add your [API key](https://beta.openai.com/account/api-keys) to the newly created `.env` file.
36+
7. Add your [API key](https://platform.openai.com/api-keys) to the newly created `.env` file.
3737

3838
8. Run the app:
3939

4040
```bash
4141
$ flask run
4242
```
4343

44-
You should now be able to access the app at [http://localhost:5000](http://localhost:5000)! For the full context behind this example app, check out the [tutorial](https://beta.openai.com/docs/quickstart).
44+
You should now be able to access the app at [http://localhost:5000](http://localhost:5000)!

‎app.py

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎static/dog.png

-1.71 KB
Binary file not shown.

‎static/main.css

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎templates/index.html

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)