I found it intriguing to develop a user-friendly front end for OpenAI's API to enhance customization. This project marks the initial stages of that project.
The primary focus was on establishing a strong foundation, given my intent to integrate this tool into my daily routine. By following this guide, you can create a simple web interface for interacting with OpenAI's chatGPT. As a learner myself, I understand some of the challenges in finding guides, so I tailored this content with beginners in mind but also short and to the point.
Moving forward, my goal is to expand this project by adding features like a chat history and individual user accounts. This serves as the first installment of the project.
How to Set Up the OpenAI API with Python and Flask
Create your project folder.
mkdir homeGPT
cd homeGPT
Create your virtual environment
python3 -m venv homeGPT
Activate the virtual environment
source homeGPT/bin/activate
Install flask, requests, python-dotenv
pip install flask requests python-dotenv
Create file app.py. I use vim.
vim app.py
Add this code to app.py
from flask import Flask, render_template, request
import os
from openai import OpenAI
from dotenv import load_dotenv
load_dotenv() # Load environment variables from .env
OPENAI_API_KEY = os.getenv('OPENAI_API_KEY')
client = OpenAI(api_key=OPENAI_API_KEY)
app = Flask(name)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
prompt = request.form['prompt']
response = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "You are a poetic assistant, skilled in explaining complex programming concepts with creative flair."},
{"role": "user", "content": prompt}
]
)
return render_template('home.html', prompt=prompt, response=response.choices[0].message.content)
else:
return render_template('home.html')
if name == 'main':
app.run(debug=True)
Create a templates folder
mkdir templates
Create a file home.html within templates
vim home.html
Add this code to home.html
<!DOCTYPE html>
<html>
<head>
<title>HomeGPT</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>HomeGPT</h1>
<form method="POST">
<div class="form-group">
<input type="text" name="prompt" class="form-control" placeholder="Enter your prompt">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% if response %}
<div class="mt-3">
<h2>The AI Says:</h2>
<pre class="bg-light p-3">{{ response }}</pre>
</div>
{% endif %}
</div>
</body>
</html>
Your file structure should look like this.
project_folder/
├── app.py
├── templates/
│ └── home.html
Grab your OpenAI API key Link
Set it as an environment variable
vim ~/.bashrc
Add this line at the end with your own api key.
export OPENAI_API_KEY="yourAPIkey"
This will let you use your new key.
source ~/.bashrc
Now let's test, you should see your api key.
echo $OPENAI_API_KEY
Startup the app
flask run
Assuming no errors, you should see this!
Top comments (0)