In this article, I will show you how I have built a simple but quite powerful movie recommendation app.
Try It Yourself: You can play with the live demo here.
I built it for two reasons:
- (i) to keep educating myself on modern technologies,
- (ii) to see which movies can entertain me on a weekend night.
This app uses Python, HTML/CSS, Flask, Vercel, and the OpenAI API capabilities.
Prerequisites
- Python with
flaskandopenailibraries - OpenAI secret key from
https://beta.openai.com/account/api-keys
(see a nice Finxter tutorial on how to get it) - Vercel account for cloud deployment
https://vercel.com/ - GitHub account for code storage
Feel free to use/fork the below code from the GitHub
Files in this project
Here is the snapshot of my code from GitHub.
The key files are these:
.envapi/index.pyapi/templates/index.html
First, I use the .env file and add my secret key.
FLASK_APP=app
FLASK_DEBUG=1
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Then goes the Python file.
import os, openai
from flask import Flask, redirect, render_template, request, url_for app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY") @app.route("/", methods=("GET", "POST"))
def index(): if request.method == "POST": category = request.form["category"] number = request.form["number"] response = openai.Completion.create( model="text-davinci-003", prompt=generate_prompt(number, category), temperature=0.5, max_tokens=60, top_p=1, frequency_penalty=0, presence_penalty=0 ) return redirect(url_for("index", result=response.choices[0].text)) result = request.args.get("result") return render_template("index.html", result=result) def generate_prompt(number, category): return """Recommend the best {} {} movies to watch:""".format(number, category.capitalize() ) if __name__ == '__main__': app.run(host='127.0.0.1', port=5050, debug=True)
The imports I use are the following:
os– to work with the functionality dependent on the operating systemopenai– to get the best of OpenAI artificial intelligenceflask– to have a nice-looking frontend framework for Python
Some Flask basics.
@app.route("/", methods=("GET", "POST"))
The first line there is implementing the main route (and the only one in this app). You can think of it as the main URL, whether it is localhost/ or www.mysite.com/.
The following function index() is taking information from the HTML form (see index.html) and preparing the data to be displayed back by the index.html site.
Here’s what happens the moment you hit the “Generate titles” button on your site:
index()function takes the input being “number” and “category” from the form,- feeds it into the
generate_prompt()function, - which crafts and passes back a question to be asked,
- which then – via the API – is sent to OpenAI to get a “response”,
- that is then passed as “result” onto
index.htmlto render on the screen.
Let’s also have a look at the index.html file.
<!DOCTYPE html>
<head> <title>OpenAI Movies</title> <link rel="shortcut icon" href="{{ url_for('static', filename='movie.png') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
</head> <body> <img src="{{ url_for('static', filename='movie.png') }}" class="icon" /> <h3>Recommend the top movies</h3> <form action="/" method="post"> <input type="text" name="number" placeholder="How many proposals, e.g. 1,3,10" required /> <input type="text" name="category" placeholder="Enter the category e.g. thriller, comedy" required /> <input type="submit" value="Generate titles" /> </form> {% if result %} <div class="result"> <pre>{{ result | safe }}</pre> </div> {% endif %}
</body>
I will not go over the HTML tags as these should be familiar to you, and if not, you can get yourself up to speed with that using other web sources.
Initially, the file will feel like an ordinary HTML/CSS site, but after a while, you will notice a strange animal. It is placed here at the bottom of the file.
{% if result %} <div class="result"> {{ result }} </div> {% endif %}
This is where Python co-exists with HTML and allows the “result” that we generate in our “Python backend” to be passed over to the “Flask frontend”. If it exists, the flask engine will render the website with the results at the bottom.
Run the App Locally
Running an app is simple. I just run the index.py file.
With the “host” and “port” attributes specified in the index.py file, Flask will run a local web server with the site.
This is how it looks in my Visual Studio Code:
And this is the browser view:
Vercel deployment
Alright, the app is built and works fine on my local machine.
Now – let’s get it shipped to the world!
First, I put the whole project into my personal GitHub repo. I am using a public one just so that you and other readers can use it. Yet, if you follow my steps here, I would suggest a private one to you.
Warning: The risk with public repo is that it exposes your OpenAI secret key to the world! That would be identified anyways, and your key would rotate, but why bother?
Now, I log in to the Vercel dashboard and click on “Add New…” and select “Project”.
Selecting GitHub as Git provider.
Selecting the repository and importing it.
Arrived at the “You’re almost done.” page. There is no need to alter any of the default parameters there except adding one important variable. In environment variables, I add my own unique OPENAI_API_KEY.
Making sure this is indeed saved properly.
This is it. Hitting “Deploy” and watching the wheels spin.
Vercel builds it for me and assigns some public domains to the app.
Once I arrive at the final page, I open up the app, test it again and if all works ok, share with the family & friends & Finxter readers!
If you liked this journey, you can give me a star in my GitHub repo or this article 
Any doubts or comments, drop me a line.
Try It Yourself: You can play with the live demo here.
Happy coding!
Get Your Personal Certificate Proving Your ChatGPT-Powered Coding Skills
If you’re a premium member, you can also go through this mini-course project on the Finxter Academy and certify your newly-acquired skills.
I’m sure many employers and clients would love to hire coders that can use the latest technological disruptions to build advanced applications (that are also easy to develop).
https://www.sickgaming.net/blog/2023/02/...h-chatgpt/