├── .eslintrc.json
├── app
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
├── api
│ ├── movies
│ │ └── route.ts
│ └── search
│ │ └── route.ts
└── add
│ └── page.tsx
├── postcss.config.js
├── sql
├── create-index.sql
├── create-table.sql
└── search.sql
├── .vscode
└── settings.json
├── lib
└── supabase
│ └── supabase-client.ts
├── next.config.js
├── components
├── movies.tsx
├── movie.tsx
└── search-bar.tsx
├── .gitignore
├── public
├── vercel.svg
└── next.svg
├── tailwind.config.js
├── tsconfig.json
├── package.json
├── atoms
└── search-atoms.ts
├── README.md
├── movies.ts
└── yarn.lock
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/batuhanbilginn/semantic-search-openai-supabase-nextjs/HEAD/app/favicon.ico
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/sql/create-index.sql:
--------------------------------------------------------------------------------
1 | create index on public.movies
2 | using ivfflat (embedding vector_cosine_ops)
3 | with (lists = 100);
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | body {
7 | @apply bg-neutral-900;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/lib/supabase/supabase-client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from "@supabase/supabase-js";
2 |
3 | export const supabaseClient = createClient(
4 | process.env.NEXT_PUBLIC_SUPABASE_URL!,
5 | process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6 | );
7 |
--------------------------------------------------------------------------------
/sql/create-table.sql:
--------------------------------------------------------------------------------
1 | create table movies (
2 | id bigserial primary key,
3 | title text,
4 | genre text,
5 | rating int,
6 | type text,
7 | image text,
8 | lang text,
9 | plot text,
10 | embedding vector (1536)
11 | );
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | experimental: {
4 | appDir: true,
5 | },
6 | images: {
7 | domains: ["images-na.ssl-images-amazon.com"],
8 | },
9 | };
10 |
11 | module.exports = nextConfig;
12 |
--------------------------------------------------------------------------------
/components/movies.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { moviesAtom } from "@/atoms/search-atoms";
3 | import { useAtomValue } from "jotai";
4 | import Movie from "./movie";
5 |
6 | const Movies = () => {
7 | const movies = useAtomValue(moviesAtom);
8 | return (
9 |
10 | {movies.map((movie) => (
11 |
12 | ))}
13 |
14 | );
15 | };
16 |
17 | export default Movies;
18 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 |
3 | export const metadata = {
4 | title: "Semantic Search App",
5 | description: "Generated by create next app",
6 | };
7 |
8 | import { Inter } from "next/font/google";
9 |
10 | const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
11 |
12 | export default function RootLayout({
13 | children,
14 | }: {
15 | children: React.ReactNode;
16 | }) {
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./pages/**/*.{js,ts,jsx,tsx}",
5 | "./components/**/*.{js,ts,jsx,tsx}",
6 | "./app/**/*.{js,ts,jsx,tsx}",
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
12 | "gradient-conic":
13 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
14 | },
15 | fontFamily: ["Sans", "--font-sans"],
16 | },
17 | },
18 | plugins: [require("@tailwindcss/line-clamp")],
19 | };
20 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Movies from "@/components/movies";
2 | import SearchBar from "@/components/search-bar";
3 |
4 | export default function Home() {
5 | return (
6 |
7 | {/* Container */}
8 |
9 |
Search Movies
10 |
11 | You can search movies with our Semantic Search feature. Just try to
12 | explain what movie is about?
13 |
14 |
15 | {/* List */}
16 |
17 |
28 |
34 |
35 | );
36 | };
37 |
38 | export default AddDataPage;
39 |
--------------------------------------------------------------------------------
/app/api/search/route.ts:
--------------------------------------------------------------------------------
1 | import { supabaseClient } from "@/lib/supabase/supabase-client";
2 | import { NextResponse } from "next/server";
3 | import { Configuration, OpenAIApi } from "openai";
4 | const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
5 | const openAi = new OpenAIApi(configuration);
6 | export async function GET(request: Request) {
7 | const { searchParams } = new URL(request.url);
8 | const query = searchParams.get("query");
9 |
10 | if (!query) {
11 | return NextResponse.json({ error: "No query provided" });
12 | }
13 |
14 | // Create Embedding
15 | const embeddingResponse = await openAi.createEmbedding({
16 | model: "text-embedding-ada-002",
17 | input: query,
18 | });
19 |
20 | const [{ embedding }] = embeddingResponse.data.data;
21 |
22 | // Search Supabase
23 | const { data, error } = await supabaseClient.rpc("search_movies", {
24 | query_embedding: embedding,
25 | similarity_threshold: 0.75,
26 | match_count: 3,
27 | });
28 |
29 | if (data) {
30 | return NextResponse.json({ data });
31 | }
32 |
33 | return NextResponse.json({ error });
34 | }
35 |
--------------------------------------------------------------------------------
/atoms/search-atoms.ts:
--------------------------------------------------------------------------------
1 | import { movies_data } from "@/movies";
2 | import { atom } from "jotai";
3 |
4 | export enum Action {
5 | SEARCH = "SEARCH",
6 | RESET = "RESET",
7 | }
8 |
9 | // Search Handler Function
10 | const searchHandler = async (query: string) => {
11 | const res = await fetch(`/api/search?query=${query}`);
12 | const { data } = await res.json();
13 | return data;
14 | };
15 |
16 | const searchActiveAtom = atom(false);
17 |
18 | export const queryAtom = atom("", (_get, set, query) => {
19 | if (query === "") {
20 | set(searchAtom, Action.RESET);
21 | }
22 | set(queryAtom, query);
23 | });
24 |
25 | export const searchAtom = atom(
26 | (get) => get(searchActiveAtom),
27 | async (get, set, action: Action) => {
28 | const query = get(queryAtom);
29 | if (action === Action.SEARCH) {
30 | if (query.length === 0) {
31 | return;
32 | } else {
33 | set(searchActiveAtom, true);
34 | const data = await searchHandler(query);
35 | set(moviesAtom, data);
36 | set(searchActiveAtom, false);
37 | }
38 | } else if (action === Action.RESET) {
39 | set(searchActiveAtom, false);
40 | set(moviesAtom, movies_data);
41 | }
42 | }
43 | );
44 |
45 | export const moviesAtom = atom(movies_data);
46 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/movie.tsx:
--------------------------------------------------------------------------------
1 | import { MovieType } from "@/movies";
2 | import Image from "next/image";
3 |
4 | const Movie = ({ movie }: { movie: MovieType }) => {
5 | return (
6 |
7 |
8 |
9 |
10 | {movie.rating.toUpperCase()}
11 |
12 |
13 | {movie.type.toUpperCase()}
14 |
15 |
16 | {movie.genre.toUpperCase()}
17 |
18 |
19 |
20 | {movie.title}
21 |
22 |
{movie.plot}
23 |
24 | {/* Overlay */}
25 |
26 | {/* BG Image */}
27 |
33 |
32 |
33 |
setQuery(e.target.value)}
36 | placeholder="Tell us about the movie."
37 | className="w-full px-4 py-3 bg-transparent rounded-md text-neutral-50 group focus:outline-none"
38 | />
39 | {isSearching ? (
40 |
41 |
57 |
Loading...
58 |
59 | ) : (
60 |
68 | )}
69 |