Last night my wife and I spent 40 minutes choosing what movie to watch. We finally settled on watching a chick flick, which I only lasted 20 mins watching before I fell asleep.
Would it be nice if AI could recommend me a movie? Well, StephDietz has done it with watcththis!
header image was generated using midjourney
What is watchthis.dev?
watchthis is an AI web app to help you decide what to watch.
It works by picking the categories you like, giving more info about what you're in the mood for, and creating a list of 5 customized options.
This project uses the OpenAI GPT-3 API, and Vercel Edge functions with streaming. It generates five cinema recommendations based on the form and user input, sends it to the GPT-3 API via the Edge function, then streams the response back to the application.
How does it work?
Looking at it, and it is a Svelte project. I have not built more than hello worlds in svelte, so interesting to dig into.
The getMediaDetails is powering the interaction to IMDB.
// api/getMediaDetails/+server.ts
import {OMDB_API_KEY} from '$env/static/private';
import {json} from '@sveltejs/kit';
export async function POST({request}: {request: any) {
const {
title
} = await request.json();
const url = `http://www.omdbapi.com/?apikey=${OMDB_API_KEY}&t=${title}`;
const res = await fetch(url);
const details = await res.json();
return json(details);
}
The AI is powered using a ReadableStream, which I cover in my previous AI generated twitterbio post.
Below is the final interaction that streams the response from the API from the getRecommendation service.
// src/routes/api/getRecommendation/+server.ts
export async function POST({
request
}: {
request: any
}) {
const {
searched
} = await request.json();
const payload = {
model: 'text-davinci-003',
prompt: searched,
temperature: 0.7,
max_tokens: 2048,
top_p: 1.0,
frequency_penalty: 0.0,
stream: true,
presence_penalty: 0.0,
n: 1
}; // all params are explained in the openai completion docs
const stream = await OpenAIStream(payload);
return new Response(stream);
}
All params are explained in the OpenAI completion docs.
My takeaway is that 'text-davinci-003' is consistently used in these OpenAI completions. I will keep that in mind when I build my project real soon.
I didn't dig into the Vercel docs, but I assume what is in the API folder is configured to user Vercel Edge Functions.
It was also lovely to see some Svelte code. This was the first for me. The script tags and this %sveltekit.body% are intriguing.
<body data-sveltekit-preload-data="hover" class="bg-neutral-900 text-slate-100">
<div style="display: contents">%sveltekit.body%</div>
</body>
Also, if you have a project leveraging OpenAI or similar, leave a link in the comments. I'd love to take a look and include it in my 9 days of OpenAI series.
Find more AI projects using OpenSauced
Stay saucy.
Oldest comments (3)
Recommends series when I asked for films
When will the machines learn?
AI-powered movie recommendations are such an exciting development in the world of entertainment. It's fascinating to see how technology can enhance our movie-watching experiences. Speaking of movies, if you're a fan of film-related content, you might want to check out this list of "Top 8 Las Vegas Movies You Must See" at programminginsider.com/top-8-las-v.... It's a fantastic resource for anyone interested in exploring the cinematic side of Las Vegas. Keep up the fantastic work, and I look forward to more engaging tech and entertainment discussions!