Brian DouglasLast 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.
