DEV Community

Cover image for AI powered movie recommendations
Brian Douglas
Brian Douglas

Posted on

AI powered movie recommendations

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 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 {
  } = await request.json();
  const url = `${OMDB_API_KEY}&t=${title}`;

  const res = await fetch(url);
  const details = await res.json();
  return json(details);
Enter fullscreen mode Exit fullscreen mode

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: any
}) {
  const {
  } = 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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 30 days of OpenAI series.

Find more AI projects using OpenSauced

Stay saucy.

Latest comments (3)

prispither1900 profile image
Doherty Nutrition

We value your opinion! Give us your feedback and stand a chance to win amazing prizes. At our company, we believe in continuously improving our products and littlecaesarslistens services to better serve you. We highly value the input of our customers and want to ensure that we are meeting their needs and expectations. Your feedback is invaluable in helping us make informed decisions and identify areas for improvement.

jonrandy profile image
Jon Randy 🎖️

Recommends series when I asked for films

bdougieyo profile image
Brian Douglas

When will the machines learn?