Building a Movie Recommendation App with ChatGPT : Rafal Kaluzny
by: Rafal Kaluzny
blow post content copied from Finxter
click here to view original post
In this article, I will show you how I have built a simple but quite powerful movie recommendation app.
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
flask
andopenai
libraries - 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:
.env
api/index.py
api/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.html
to 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="" /> <link rel="stylesheet" href="" /> </head> <body> <img src="" 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> </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.
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.
Happy coding!
February 14, 2023 at 09:35PM
Click here for more details...
=============================
The original post is available in Finxter by Rafal Kaluzny
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================
Post a Comment