Use Gadget and OpenAI to build a chatbot that generates custom movie scenes 

1type Dataset = {
2  rows: {
3    row: {
4      quote: string;
5      movie: string;
6      type: string;
7      year: number;
8    };
9  }[];
10};
11
12export const run: ActionRun = async ({ logger, api, connections }) => {
13  // use Node's fetch to make a request to https://huggingface.co/datasets/ygorgeurts/movie-quotes
14  const response = await fetch(
15    "https://datasets-server.huggingface.co/first-rows?dataset=ygorgeurts%2Fmovie-quotes&config=default&split=train",
16    {
17      method: "GET",
18      headers: { "Content-Type": "application/json" },
19    }
20  );
21
22  const responseJson: Dataset = await response.json();
23
24  // log the response
25  logger.info(
26    { responseJson },
27    "here is a sample of movies returned from hugging face"
28  );
29
30  // get the data in our record's format
31  const movies = responseJson.rows.map((movie) => ({
32    title: movie.row.movie,
33    quote: movie.row.quote,
34    embedding: [] as number[],
35  }));
36
37  // also get input data for the OpenAI embeddings API
38  const input = responseJson.rows.map(
39    (movie) => `${movie.row.movie} from the movie ${movie.row.quote}`
40  );
41  const embeddings = await connections.openai.embeddings.create({
42    input,
43    model: "text-embedding-ada-002",
44  });
45
46  // append embeddings to movies
47  embeddings.data.forEach((movieEmbedding, i) => {
48    movies[i].embedding = movieEmbedding.embedding;
49  });
50
51  // use the internal API to bulk create movie records
52  await api.internal.movie.bulkCreate(movies);
53};

1export const run: ActionRun = async ({ params, api, connections }) => {
2  const { quote } = params;
3
4  // throw an error if a quote wasn't passed in
5  if (!quote) {
6    throw new Error("Missing quote!");
7  }
8
9  // create an embedding from the entered quote
10  const response = await connections.openai.embeddings.create({
11    input: quote,
12    model: "text-embedding-ada-002",
13  });
14
15  // get the 4 most similar movies that match your quote, and return them to the frontend
16  const movies = await api.movie.findMany({
17    sort: {
18      embedding: {
19        cosineSimilarityTo: response.data[0].embedding,
20      },
21    },
22    first: 4,
23    select: {
24      id: true,
25      title: true,
26    },
27  });
28
29  // remove duplicates
30  const filteredMovies = movies.filter(
31    (movie, index) => movies.findIndex((m) => m.title === movie.title) === index
32  );
33  return filteredMovies;
34};
35
36// define custom params to pass values to your global action
37export const params = {
38  quote: { type: "string" },
39};

1// get the 4 most similar movies that match your quote, and return them to the frontend
2const movies = await api.movie.findMany({
3  sort: {
4    embedding: {
5      cosineSimilarityTo: response.data[0].embedding,
6    },
7  },
8  first: 4,
9  select: {
10    id: true,
11    title: true,
12  },
13});

1import { RouteHandler } from "gadget-server";
2import { openAIResponseStream } from "gadget-server/ai";
3
4/**
5 * Route handler for POST chat
6 *
7 * See: https://docs.gadget.dev/guides/http-routes/route-configuration#route-context
8 */
9const route: RouteHandler<{
10  Body: { quote: string; movie: string };
11}> = async ({ request, reply, api, logger, connections }) => {
12  const prompt = `Here is a fake movie quote: "${request.body.quote}" and a movie selected by a user: "${request.body.movie}". Write a fake scene for that movie that makes use of the quote. Use a maximum of 150 words.`;
13
14  // get streamed response from OpenAI
15  const stream = await connections.openai.chat.completions.create({
16    model: "gpt-3.5-turbo",
17    messages: [
18      {
19        role: "system",
20        content: `You are an expert, hilarious AI screenwriter tasked with generating funny, quirky movie scripts.`,
21      },
22      { role: "user", content: prompt },
23    ],
24    stream: true,
25  });
26
27  await reply.send(openAIResponseStream(stream));
28};
29
30export default route;

1import { useGlobalAction, useFetch, useMaybeFindFirst, useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3import { useState } from "react";
4
5export default function () {
6  // see if movie data exists in the database!
7  const [{ data: movieDataIngested, fetching: checkingIfMovieDataExists, error: errorCheckingForData }, retry] = useMaybeFindFirst(
8    api.movie
9  );
10  // fire action used to ingest data from HuggingFace model
11  const [{ fetching: ingestingData, error: errorIngestingData }, ingestData] = useGlobalAction(api.ingestData);
12
13  return (
14    <main style={{ width: "60vw", position: "absolute", top: 40 }}>
15      <div>
16        <h1>Make-a-movie scene (with AI)</h1>
17        <p>Write a fake movie quote, pick a suggested movie, and let OpenAI generate a new scene!</p>
18      </div>
19
20      <br />
21
22      {checkingIfMovieDataExists && <div className="loader"></div>}
23
24      {ingestingData && (
25        <div className="row">
26          <h2>Fetching movie data...</h2>
27        </div>
28      )}
29
30      {errorCheckingForData && <p className="error">{errorCheckingForData.message}</p>}
31
32      {errorIngestingData && <p className="error">{errorIngestingData.message}</p>}
33
34      {!movieDataIngested && !checkingIfMovieDataExists && (
35        <button
36          onClick={async () => {
37            await ingestData();
38            await retry();
39          }}
40          disabled={ingestingData}
41        >
42          Ingest data
43        </button>
44      )}
45
46      {movieDataIngested && <MovieQuoteForm />}
47    </main>
48  );
49}
50
51const MovieQuoteForm = () => {
52  // used to track the reset state of the form
53  const [isReset, setIsReset] = useState(true);
54  // state for the currently selected movie
55  const [movie, setMovie] = useState("");
56  // action for finding movies with similar quotes
57  const { submit, register, actionData, error, formState, watch, reset } = useActionForm(api.findSimilarMovies);
58  const similarMovies = actionData as { id: string; title: string }[] | undefined;
59
60  // watch changes to the quote state in our form, and store in a variable
61  const quote = watch("quote");
62
63  return (
64    <>
65      <form
66        onSubmit={async (e) => {
67          e.preventDefault();
68          await submit();
69          setIsReset(true);
70        }}
71        style={{ maxWidth: "100%" }}
72        autoComplete="off"
73      >
74        <div className="row" style={{ display: "flex" }}>
75          <input
76            style={{ flex: "1", marginRight: "4px" }}
77            placeholder="Enter a fake movie quote! Ex. Here's a toast to you, my dear."
78            {...register("quote")}
79            disabled={formState.isSubmitting}
80          />
81          <button type="submit" disabled={formState.isSubmitting} style={{ marginRight: "4px" }}>
82            Find quotes
83          </button>
84          <button
85            disabled={!formState.isDirty}
86            onClick={() => {
87              // reset the form
88              reset();
89              setIsReset(false);
90            }}
91          >
92            Reset
93          </button>
94        </div>
95      </form>
96
97      {error && <p className="error">There was an error fetching similar movies. Check your Gadget logs for more details!</p>}
98
99      {quote && similarMovies && isReset && (
100        <>
101          <div className="row" style={{ textAlign: "left", paddingBottom: 8 }}>
102            <b>Movies with similar quotes:</b>
103          </div>
104          <form>
105            <div
106              className="row"
107              style={{
108                display: "flex",
109                flexWrap: "wrap",
110                textAlign: "left",
111                gap: 16,
112              }}
113            >
114              {similarMovies.map((movieRecord, i) => (
115                <span key={`movie_option_${i}`}>
116                  <input
117                    type="radio"
118                    checked={movieRecord.title == movie}
119                    value={movieRecord.title}
120                    onChange={(e) => setMovie(e.target.value)}
121                    id={movieRecord.id}
122                  />
123                  <label htmlFor={movieRecord.id}>{movieRecord.title}</label>
124                </span>
125              ))}
126            </div>
127          </form>
128        </>
129      )}
130      {movie && quote && isReset && <SceneGenerator movie={movie} quote={quote} />}
131    </>
132  );
133};
134
135const SceneGenerator = ({ movie, quote }: { movie: string; quote: string }) => {
136  // call HTTP route and stream response from OpenAI
137  const [{ data, fetching, error }, sendPrompt] = useFetch("/chat", {
138    method: "post",
139    body: JSON.stringify({ movie, quote }),
140    headers: {
141      "content-type": "application/json",
142    },
143    stream: "string",
144  });
145
146  return (
147    <section>
148      <button onClick={() => void sendPrompt()}>Generate scene</button>
149      {error && <p className="error">{error.message}</p>}
150      {fetching && <div className="loader" />}
151      {data && (
152        <pre
153          style={{
154            border: "dashed black 1px",
155            background: "#f5f5f5",
156            padding: "10px",
157            maxHeight: "45vh",
158            overflowY: "scroll",
159            whiteSpace: "pre-wrap",
160            textAlign: "left",
161          }}
162        >
163          {data}
164        </pre>
165      )}
166    </section>
167  );
168};