02-15-2023, 09:57 PM
Building a Movie Recommendation App with ChatGPT
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1132950","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>In this article, I will show you how I have built a simple but quite powerful movie recommendation app.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Try It Yourself</strong>: <a href="https://vercel-openai.vercel.app/" data-type="URL" data-id="https://vercel-openai.vercel.app/" target="_blank" rel="noreferrer noopener">You can play with the live demo here.</a></p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/building-a-movie-recommendation-app-with-chatgpt/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6xHg66qGjdQ%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<p>I built it for two reasons: </p>
<ul>
<li>(i) to keep educating myself on modern technologies, </li>
<li>(ii) to see which movies can entertain me on a weekend night.</li>
</ul>
<p>This app uses Python, HTML/CSS, Flask, Vercel, and the OpenAI API capabilities.</p>
<h2>Prerequisites</h2>
<ul>
<li>Python with <strong><code><a href="https://blog.finxter.com/build-website-with-flask/" data-type="post" data-id="420533" target="_blank" rel="noreferrer noopener">flask</a></code></strong> and <strong><code><a href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent/" data-type="post" data-id="1081478" target="_blank" rel="noreferrer noopener">openai</a></code></strong> libraries</li>
<li>OpenAI secret key from<br /><a rel="noreferrer noopener" href="https://beta.openai.com/account/api-keys" target="_blank">https://beta.openai.com/account/api-keys<br /></a>(see a nice <a rel="noreferrer noopener" href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent" data-type="URL" data-id="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent" target="_blank">Finxter tutorial</a> on how to get it)</li>
<li>Vercel account for cloud deployment<br /><a href="https://vercel.com/" target="_blank" rel="noreferrer noopener">https://vercel.com/</a></li>
<li>GitHub account for code storage<br />Feel free to use/fork the below code from the <a rel="noreferrer noopener" href="https://github.com/finxter/vercel-openai" data-type="URL" data-id="https://github.com/finxter/vercel-openai" target="_blank">GitHub</a></li>
</ul>
<h2>Files in this project</h2>
<p>Here is the snapshot of my code from GitHub.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="930" height="924" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-192.png" alt="" class="wp-image-1132962" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-192.png 930w, https://blog.finxter.com/wp-content/uplo...00x298.png 300w, https://blog.finxter.com/wp-content/uplo...50x150.png 150w, https://blog.finxter.com/wp-content/uplo...68x763.png 768w" sizes="(max-width: 930px) 100vw, 930px" /></figure>
</div>
<p>The key files are these:</p>
<ul>
<li><code>.env</code></li>
<li><code>api/index.py</code></li>
<li><code>api/templates/index.html</code></li>
</ul>
<p>First, I use the <code>.env</code> file and add my secret key.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">FLASK_APP=app
FLASK_DEBUG=1
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</pre>
<p>Then goes the Python file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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)
</pre>
<p>The imports I use are the following:</p>
<ul>
<li><code><a href="https://blog.finxter.com/exploring-pythons-os-module/" data-type="post" data-id="19050" target="_blank" rel="noreferrer noopener">os</a></code> – to work with the functionality dependent on the operating system</li>
<li><code><a href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent/" data-type="post" data-id="1081478" target="_blank" rel="noreferrer noopener">openai</a></code> – to get the best of OpenAI artificial intelligence</li>
<li><code><a href="https://blog.finxter.com/build-website-with-flask/" data-type="post" data-id="420533" target="_blank" rel="noreferrer noopener">flask</a></code> – to have a nice-looking frontend framework for Python</li>
</ul>
<p>Some Flask basics. </p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">@app.route("/", methods=("GET", "POST"))</pre>
<p>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 <code>localhost/</code> or <code>www.mysite.com/</code>.</p>
<p>The following function <code>index()</code> is taking information from the HTML form (see <code>index.html</code>) and preparing the data to be displayed back by the <code>index.html</code> site.</p>
<p>Here’s what happens the moment you hit the “<code>Generate titles</code>” button on your site:</p>
<ul>
<li><code>index()</code> function takes the input being “number” and “category” from the form,</li>
<li>feeds it into the <code>generate_prompt()</code> function, </li>
<li>which crafts and passes back a question to be asked,</li>
<li>which then – via the API – is sent to OpenAI to get a “response”, </li>
<li>that is then passed as “result” onto <code>index.html</code> to render on the screen.</li>
</ul>
<p>Let’s also have a look at the <code>index.html</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><!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>
</pre>
<p>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.</p>
<p>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.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> {% if result %} <div class="result"> {{ result }} </div> {% endif %}
</pre>
<p>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.</p>
<h2>Run the App Locally</h2>
<p>Running an app is simple. I just run the <code>index.py</code> file.</p>
<p>With the “<code>host</code>” and “<code>port</code>” attributes specified in the <code>index.py</code> file, Flask will run a local web server with the site.</p>
<p>This is how it looks in my Visual Studio Code:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="637" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-193-1024x637.png" alt="" class="wp-image-1132977" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-193-1024x637.png 1024w, https://blog.finxter.com/wp-content/uplo...00x187.png 300w, https://blog.finxter.com/wp-content/uplo...68x478.png 768w, https://blog.finxter.com/wp-content/uplo...36x955.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-193.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>And this is the browser view:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="581" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-194-1024x581.png" alt="" class="wp-image-1132978" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-194-1024x581.png 1024w, https://blog.finxter.com/wp-content/uplo...00x170.png 300w, https://blog.finxter.com/wp-content/uplo...68x436.png 768w, https://blog.finxter.com/wp-content/uplo...36x872.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-194.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Vercel deployment</h2>
<p>Alright, the app is built and works fine on my local machine. </p>
<p>Now – let’s get it shipped to the world!</p>
<p>First, I put the whole project into my <a rel="noreferrer noopener" href="https://github.com/finxter/vercel-openai" data-type="URL" data-id="https://github.com/finxter/vercel-openai" target="_blank">personal GitHub repo</a>. 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.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f6d1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Warning</strong>: 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?</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="607" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-195-1024x607.png" alt="" class="wp-image-1132980" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-195-1024x607.png 1024w, https://blog.finxter.com/wp-content/uplo...00x178.png 300w, https://blog.finxter.com/wp-content/uplo...68x456.png 768w, https://blog.finxter.com/wp-content/uplo...36x911.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-195.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Now, I log in to the Vercel dashboard and click on “Add New…” and select “Project”.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="353" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-196-1024x353.png" alt="" class="wp-image-1132982" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-196-1024x353.png 1024w, https://blog.finxter.com/wp-content/uplo...00x103.png 300w, https://blog.finxter.com/wp-content/uplo...68x264.png 768w, https://blog.finxter.com/wp-content/uplo...36x529.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-196.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Selecting GitHub as Git provider.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="717" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-197-1024x717.png" alt="" class="wp-image-1132983" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-197-1024x717.png 1024w, https://blog.finxter.com/wp-content/uplo...00x210.png 300w, https://blog.finxter.com/wp-content/uplo...68x538.png 768w, https://blog.finxter.com/wp-content/uplo...ge-197.png 1422w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Selecting the repository and importing it.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="666" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-198-1024x666.png" alt="" class="wp-image-1132984" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-198-1024x666.png 1024w, https://blog.finxter.com/wp-content/uplo...00x195.png 300w, https://blog.finxter.com/wp-content/uplo...68x499.png 768w, https://blog.finxter.com/wp-content/uplo...ge-198.png 1406w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Arrived at the “<strong>You’re almost done.</strong>” 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 <code>OPENAI_API_KEY</code>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="399" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-199-1024x399.png" alt="" class="wp-image-1132986" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-199-1024x399.png 1024w, https://blog.finxter.com/wp-content/uplo...00x117.png 300w, https://blog.finxter.com/wp-content/uplo...68x299.png 768w, https://blog.finxter.com/wp-content/uplo...36x598.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-199.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Making sure this is indeed saved properly.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="109" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-200-1024x109.png" alt="" class="wp-image-1132987" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-200-1024x109.png 1024w, https://blog.finxter.com/wp-content/uplo...300x32.png 300w, https://blog.finxter.com/wp-content/uplo...768x82.png 768w, https://blog.finxter.com/wp-content/uplo...36x164.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-200.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>This is it. Hitting “Deploy” and watching the wheels spin.</p>
<p>Vercel builds it for me and assigns some public domains to the app.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="506" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-201-1024x506.png" alt="" class="wp-image-1132993" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-201-1024x506.png 1024w, https://blog.finxter.com/wp-content/uplo...00x148.png 300w, https://blog.finxter.com/wp-content/uplo...68x380.png 768w, https://blog.finxter.com/wp-content/uplo...36x759.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-201.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>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! </p>
<p>If you liked this journey, you can <a href="https://github.com/ralpho79/vercel-openai" data-type="URL" data-id="https://github.com/ralpho79/vercel-openai" target="_blank" rel="noreferrer noopener">give me a star in my GitHub repo</a> or this article <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f609.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> </p>
<p>Any doubts or comments, drop me a line.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Try It Yourself</strong>: <a href="https://vercel-openai.vercel.app/" data-type="URL" data-id="https://vercel-openai.vercel.app/" target="_blank" rel="noreferrer noopener">You can play with the live demo here.</a></p>
<p>Happy coding!</p>
<h2>Get Your Personal Certificate Proving Your ChatGPT-Powered Coding Skills</h2>
<p>If you’re a premium member, you can also go through <a rel="noreferrer noopener" href="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" data-type="URL" data-id="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" target="_blank">this mini-course project on the Finxter Academy</a> and certify your newly-acquired skills. </p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" target="_blank" rel="noreferrer noopener"><img decoding="async" loading="lazy" width="880" height="1024" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-202-880x1024.png" alt="" class="wp-image-1133475" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-202-880x1024.png 880w, https://blog.finxter.com/wp-content/uplo...58x300.png 258w, https://blog.finxter.com/wp-content/uplo...68x894.png 768w, https://blog.finxter.com/wp-content/uplo...ge-202.png 915w" sizes="(max-width: 880px) 100vw, 880px" /></a></figure>
</div>
<p>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). <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f609.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
https://www.sickgaming.net/blog/2023/02/...h-chatgpt/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1132950","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>In this article, I will show you how I have built a simple but quite powerful movie recommendation app.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Try It Yourself</strong>: <a href="https://vercel-openai.vercel.app/" data-type="URL" data-id="https://vercel-openai.vercel.app/" target="_blank" rel="noreferrer noopener">You can play with the live demo here.</a></p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"><a href="https://blog.finxter.com/building-a-movie-recommendation-app-with-chatgpt/"><img src="https://blog.finxter.com/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6xHg66qGjdQ%2Fhqdefault.jpg" alt="YouTube Video"></a><figcaption></figcaption></figure>
<p>I built it for two reasons: </p>
<ul>
<li>(i) to keep educating myself on modern technologies, </li>
<li>(ii) to see which movies can entertain me on a weekend night.</li>
</ul>
<p>This app uses Python, HTML/CSS, Flask, Vercel, and the OpenAI API capabilities.</p>
<h2>Prerequisites</h2>
<ul>
<li>Python with <strong><code><a href="https://blog.finxter.com/build-website-with-flask/" data-type="post" data-id="420533" target="_blank" rel="noreferrer noopener">flask</a></code></strong> and <strong><code><a href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent/" data-type="post" data-id="1081478" target="_blank" rel="noreferrer noopener">openai</a></code></strong> libraries</li>
<li>OpenAI secret key from<br /><a rel="noreferrer noopener" href="https://beta.openai.com/account/api-keys" target="_blank">https://beta.openai.com/account/api-keys<br /></a>(see a nice <a rel="noreferrer noopener" href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent" data-type="URL" data-id="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent" target="_blank">Finxter tutorial</a> on how to get it)</li>
<li>Vercel account for cloud deployment<br /><a href="https://vercel.com/" target="_blank" rel="noreferrer noopener">https://vercel.com/</a></li>
<li>GitHub account for code storage<br />Feel free to use/fork the below code from the <a rel="noreferrer noopener" href="https://github.com/finxter/vercel-openai" data-type="URL" data-id="https://github.com/finxter/vercel-openai" target="_blank">GitHub</a></li>
</ul>
<h2>Files in this project</h2>
<p>Here is the snapshot of my code from GitHub.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="930" height="924" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-192.png" alt="" class="wp-image-1132962" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-192.png 930w, https://blog.finxter.com/wp-content/uplo...00x298.png 300w, https://blog.finxter.com/wp-content/uplo...50x150.png 150w, https://blog.finxter.com/wp-content/uplo...68x763.png 768w" sizes="(max-width: 930px) 100vw, 930px" /></figure>
</div>
<p>The key files are these:</p>
<ul>
<li><code>.env</code></li>
<li><code>api/index.py</code></li>
<li><code>api/templates/index.html</code></li>
</ul>
<p>First, I use the <code>.env</code> file and add my secret key.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">FLASK_APP=app
FLASK_DEBUG=1
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</pre>
<p>Then goes the Python file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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)
</pre>
<p>The imports I use are the following:</p>
<ul>
<li><code><a href="https://blog.finxter.com/exploring-pythons-os-module/" data-type="post" data-id="19050" target="_blank" rel="noreferrer noopener">os</a></code> – to work with the functionality dependent on the operating system</li>
<li><code><a href="https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent/" data-type="post" data-id="1081478" target="_blank" rel="noreferrer noopener">openai</a></code> – to get the best of OpenAI artificial intelligence</li>
<li><code><a href="https://blog.finxter.com/build-website-with-flask/" data-type="post" data-id="420533" target="_blank" rel="noreferrer noopener">flask</a></code> – to have a nice-looking frontend framework for Python</li>
</ul>
<p>Some Flask basics. </p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">@app.route("/", methods=("GET", "POST"))</pre>
<p>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 <code>localhost/</code> or <code>www.mysite.com/</code>.</p>
<p>The following function <code>index()</code> is taking information from the HTML form (see <code>index.html</code>) and preparing the data to be displayed back by the <code>index.html</code> site.</p>
<p>Here’s what happens the moment you hit the “<code>Generate titles</code>” button on your site:</p>
<ul>
<li><code>index()</code> function takes the input being “number” and “category” from the form,</li>
<li>feeds it into the <code>generate_prompt()</code> function, </li>
<li>which crafts and passes back a question to be asked,</li>
<li>which then – via the API – is sent to OpenAI to get a “response”, </li>
<li>that is then passed as “result” onto <code>index.html</code> to render on the screen.</li>
</ul>
<p>Let’s also have a look at the <code>index.html</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><!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>
</pre>
<p>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.</p>
<p>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.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> {% if result %} <div class="result"> {{ result }} </div> {% endif %}
</pre>
<p>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.</p>
<h2>Run the App Locally</h2>
<p>Running an app is simple. I just run the <code>index.py</code> file.</p>
<p>With the “<code>host</code>” and “<code>port</code>” attributes specified in the <code>index.py</code> file, Flask will run a local web server with the site.</p>
<p>This is how it looks in my Visual Studio Code:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="637" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-193-1024x637.png" alt="" class="wp-image-1132977" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-193-1024x637.png 1024w, https://blog.finxter.com/wp-content/uplo...00x187.png 300w, https://blog.finxter.com/wp-content/uplo...68x478.png 768w, https://blog.finxter.com/wp-content/uplo...36x955.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-193.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>And this is the browser view:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="581" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-194-1024x581.png" alt="" class="wp-image-1132978" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-194-1024x581.png 1024w, https://blog.finxter.com/wp-content/uplo...00x170.png 300w, https://blog.finxter.com/wp-content/uplo...68x436.png 768w, https://blog.finxter.com/wp-content/uplo...36x872.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-194.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h2>Vercel deployment</h2>
<p>Alright, the app is built and works fine on my local machine. </p>
<p>Now – let’s get it shipped to the world!</p>
<p>First, I put the whole project into my <a rel="noreferrer noopener" href="https://github.com/finxter/vercel-openai" data-type="URL" data-id="https://github.com/finxter/vercel-openai" target="_blank">personal GitHub repo</a>. 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.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f6d1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Warning</strong>: 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?</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="607" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-195-1024x607.png" alt="" class="wp-image-1132980" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-195-1024x607.png 1024w, https://blog.finxter.com/wp-content/uplo...00x178.png 300w, https://blog.finxter.com/wp-content/uplo...68x456.png 768w, https://blog.finxter.com/wp-content/uplo...36x911.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-195.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Now, I log in to the Vercel dashboard and click on “Add New…” and select “Project”.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="353" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-196-1024x353.png" alt="" class="wp-image-1132982" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-196-1024x353.png 1024w, https://blog.finxter.com/wp-content/uplo...00x103.png 300w, https://blog.finxter.com/wp-content/uplo...68x264.png 768w, https://blog.finxter.com/wp-content/uplo...36x529.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-196.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Selecting GitHub as Git provider.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="717" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-197-1024x717.png" alt="" class="wp-image-1132983" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-197-1024x717.png 1024w, https://blog.finxter.com/wp-content/uplo...00x210.png 300w, https://blog.finxter.com/wp-content/uplo...68x538.png 768w, https://blog.finxter.com/wp-content/uplo...ge-197.png 1422w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Selecting the repository and importing it.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="666" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-198-1024x666.png" alt="" class="wp-image-1132984" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-198-1024x666.png 1024w, https://blog.finxter.com/wp-content/uplo...00x195.png 300w, https://blog.finxter.com/wp-content/uplo...68x499.png 768w, https://blog.finxter.com/wp-content/uplo...ge-198.png 1406w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Arrived at the “<strong>You’re almost done.</strong>” 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 <code>OPENAI_API_KEY</code>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="399" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-199-1024x399.png" alt="" class="wp-image-1132986" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-199-1024x399.png 1024w, https://blog.finxter.com/wp-content/uplo...00x117.png 300w, https://blog.finxter.com/wp-content/uplo...68x299.png 768w, https://blog.finxter.com/wp-content/uplo...36x598.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-199.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Making sure this is indeed saved properly.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="109" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-200-1024x109.png" alt="" class="wp-image-1132987" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-200-1024x109.png 1024w, https://blog.finxter.com/wp-content/uplo...300x32.png 300w, https://blog.finxter.com/wp-content/uplo...768x82.png 768w, https://blog.finxter.com/wp-content/uplo...36x164.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-200.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>This is it. Hitting “Deploy” and watching the wheels spin.</p>
<p>Vercel builds it for me and assigns some public domains to the app.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="506" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-201-1024x506.png" alt="" class="wp-image-1132993" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-201-1024x506.png 1024w, https://blog.finxter.com/wp-content/uplo...00x148.png 300w, https://blog.finxter.com/wp-content/uplo...68x380.png 768w, https://blog.finxter.com/wp-content/uplo...36x759.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-201.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>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! </p>
<p>If you liked this journey, you can <a href="https://github.com/ralpho79/vercel-openai" data-type="URL" data-id="https://github.com/ralpho79/vercel-openai" target="_blank" rel="noreferrer noopener">give me a star in my GitHub repo</a> or this article <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f609.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> </p>
<p>Any doubts or comments, drop me a line.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Try It Yourself</strong>: <a href="https://vercel-openai.vercel.app/" data-type="URL" data-id="https://vercel-openai.vercel.app/" target="_blank" rel="noreferrer noopener">You can play with the live demo here.</a></p>
<p>Happy coding!</p>
<h2>Get Your Personal Certificate Proving Your ChatGPT-Powered Coding Skills</h2>
<p>If you’re a premium member, you can also go through <a rel="noreferrer noopener" href="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" data-type="URL" data-id="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" target="_blank">this mini-course project on the Finxter Academy</a> and certify your newly-acquired skills. </p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://academy.finxter.com/university/chatgpt-at-the-heart-building-a-movie-recommendation-python-web-app-in-2023/" target="_blank" rel="noreferrer noopener"><img decoding="async" loading="lazy" width="880" height="1024" src="https://blog.finxter.com/wp-content/uploads/2023/02/image-202-880x1024.png" alt="" class="wp-image-1133475" srcset="https://blog.finxter.com/wp-content/uploads/2023/02/image-202-880x1024.png 880w, https://blog.finxter.com/wp-content/uplo...58x300.png 258w, https://blog.finxter.com/wp-content/uplo...68x894.png 768w, https://blog.finxter.com/wp-content/uplo...ge-202.png 915w" sizes="(max-width: 880px) 100vw, 880px" /></a></figure>
</div>
<p>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). <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f609.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
https://www.sickgaming.net/blog/2023/02/...h-chatgpt/