AI powered movie recommendations
Tags: openai, svelte, ai, github
Published: 2023-03-09 15:36:16

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](https://github.com/StephDietz) has done it with watcththis!

{% twitter 1625888371141664768 %}

_header image was generated using [midjourney](https://www.midjourney.com/app/jobs/be173d4a-a733-4867-932c-47a1755bc35b/)_

## What is watchthis.dev?
[watchthis](https://watchthis.dev) 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.

{% github StephDietz/watch-this noreadme %}

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](https://github.com/StephDietz/watch-this/blob/main/src/routes/api/getMediaDetails/%2Bserver.ts) is powering the interaction to IMDB.  

```js
// 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](https://dev.to/bdougieyo/ai-generated-twitter-bio-2lcn).

Below is the final interaction that streams the response from the API from the [getRecommendation](https://github.com/StephDietz/watch-this/blob/main/src/routes/api/getRecommendation/%2Bserver.ts) service.
 
```js
// 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](https://platform.openai.com/docs/api-reference/completions)._

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. 

```html
<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](https://dev.to/bdougieyo/30-days-of-openai-1ek6).

_Find more AI projects using [OpenSauced](https://insights.opensauced.pizza/ai/repositories/filter/recent)_

Stay saucy.