├── .env.example
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── app
├── favicon.ico
├── globals.css
├── layout.tsx
├── opengraph-image.png
└── page.tsx
├── components.json
├── components
├── card-grid-skeleton.tsx
├── deploy-button.tsx
├── error.tsx
├── image-card.tsx
├── image-search.tsx
├── loading-spinner.tsx
├── match-badge.tsx
├── no-images-found.tsx
├── search-box.tsx
├── suspended-image-search.tsx
└── ui
│ ├── alert.tsx
│ ├── badge.tsx
│ ├── button.tsx
│ ├── card.tsx
│ ├── input.tsx
│ └── skeleton.tsx
├── drizzle.config.ts
├── lib
├── ai
│ ├── 0-upload.ts
│ ├── 1-generate-metadata.ts
│ ├── 2-embed-and-save.ts
│ └── utils.ts
├── db
│ ├── api.ts
│ ├── index.ts
│ └── schema.ts
├── hooks
│ └── use-shared-transition.tsx
└── utils.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── public
├── next.svg
└── vercel.svg
├── tailwind.config.ts
└── tsconfig.json
/.env.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=
2 |
3 | BLOB_READ_WRITE_TOKEN=
4 |
5 | POSTGRES_URL=
6 | POSTGRES_PRISMA_URL=
7 | POSTGRES_URL_NO_SSL=
8 | POSTGRES_URL_NON_POOLING=
9 | POSTGRES_USER=
10 | POSTGRES_HOST=
11 | POSTGRES_PASSWORD=
12 | POSTGRES_DATABASE=
13 |
14 | KV_URL=
15 | KV_REST_API_URL=
16 | KV_REST_API_TOKEN=
17 | KV_REST_API_READ_ONLY_TOKEN=
18 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.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 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 | .env
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
39 | /images-to-index
40 | images-with-metadata.json
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2024 Vercel, Inc.
2 |
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Semantic Image Search
4 |
5 |
6 |
7 | An open-source AI semantic image search app template built with Next.js, the Vercel AI SDK, OpenAI, Vercel Postgres, Vercel Blob and Vercel KV.
8 |
9 |
10 |
11 | Features Model Providers Deploy Your Own Running locally Authors
17 | {children}
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/semantic-image-search/a88d9f1d56e79e4eba027e8e875b339966aa4b60/app/opengraph-image.png
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { CardGridSkeleton } from "@/components/card-grid-skeleton";
2 | import { DeployButton } from "@/components/deploy-button";
3 | import { SearchBox } from "@/components/search-box";
4 | import { SuspendedImageSearch } from "@/components/suspended-image-search";
5 | import Link from "next/link";
6 | import { Suspense } from "react";
7 |
8 | export default async function Home({
9 | searchParams,
10 | }: {
11 | searchParams: Promise<{ q?: string }>;
12 | }) {
13 | const query = (await searchParams).q;
14 | return (
15 |
16 |
17 |
18 |
Semantic Search
19 |
20 |
21 |
23 |
24 | This demo showcases how to use the{" "}
25 |
35 |
37 |
38 |
40 |
} key={query}>
41 |
42 |
43 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "app/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils"
16 | }
17 | }
--------------------------------------------------------------------------------
/components/card-grid-skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from "@/components/ui/skeleton";
2 |
3 | export function CardGridSkeleton() {
4 | return (
5 |
6 | {new Array(16).fill("").map((_, i) => (
7 |
10 | );
11 | }
12 |
13 | export function SkeletonCard() {
14 | return (
15 |
16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/components/deploy-button.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { buttonVariants } from "./ui/button";
3 |
4 | export const DeployButton = () => {
5 | return (
6 |
17 | );
18 | };
19 | function IconVercel({ className, ...props }: React.ComponentProps<"svg">) {
20 | return (
21 |
28 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/components/error.tsx:
--------------------------------------------------------------------------------
1 | import { AlertCircle } from "lucide-react";
2 |
3 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
4 |
5 | export function ErrorComponent({ error }: { error: Error }) {
6 | return (
7 |
8 | Error
10 |
11 | {error.message ?? "An error occured. Please try again later."}
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/components/image-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { DBImage } from "@/lib/db/schema";
4 | import Image from "next/image";
5 | import { MatchBadge } from "./match-badge";
6 | import { Card } from "./ui/card";
7 |
8 | export function ImageCard({
9 | image,
10 | similarity,
11 | }: {
12 | image: DBImage;
13 | similarity?: number;
14 | }) {
15 | return (
16 |
20 |
21 | View image
22 |
23 |
31 |
{image.title}
32 |
33 | {image.description}
34 |
35 |
36 | Metadata Generated by GPT-4o
37 |
38 |
41 |
46 | ) : null}
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/components/image-search.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { ImageCard } from "./image-card";
3 | import { DBImage } from "@/lib/db/schema";
4 | import { NoImagesFound } from "./no-images-found";
5 | import { useSharedTransition } from "@/lib/hooks/use-shared-transition";
6 | import { CardGridSkeleton } from "./card-grid-skeleton";
7 |
8 | export const ImageSearch = ({
9 | images,
10 | query,
11 | }: {
12 | images: DBImage[];
13 | query?: string;
14 | }) => {
15 | const { isPending } = useSharedTransition();
16 |
17 | if (isPending) return
29 | {images.map((image) => (
30 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/components/loading-spinner.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * v0 by Vercel.
3 | * @see https://v0.dev/t/tm9EX5NO8KN
4 | * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
5 | */
6 | "use client";
7 |
8 | import { ImageStreamStatus } from "@/lib/utils";
9 |
10 | export function LoadingSpinner({ status }: { status?: ImageStreamStatus }) {
11 | return (
12 |
13 |
14 |
15 |
16 | Searching
17 | {status
18 | ? status?.regular
19 | ? " for direct matches"
20 | : " for semantic results"
21 | : ""}
22 | ...
23 |
24 |
25 |
12 | {type === "semantic" ? (
13 | <>
14 |
18 | Similarity: {similarity?.toFixed(3)}
19 |
20 |
24 | Semantic Match: {similarity?.toFixed(3)}
25 |
26 |
27 | ) : (
28 | Direct Match
29 | )}
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/components/no-images-found.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by v0 by Vercel.
3 | * @see https://v0.dev/t/Q2jvX35BnWA
4 | * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
5 | */
6 |
7 | /** Add fonts into your Next.js project:
8 |
9 | import { Inter } from 'next/font/google'
10 |
11 | inter({
12 | subsets: ['latin'],
13 | display: 'swap',
14 | })
15 |
16 | To read more about using these font, please visit the Next.js documentation:
17 | - App Directory: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
18 | - Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
19 | **/
20 | export function NoImagesFound({ query }: { query: string }) {
21 | return (
22 |
23 |
24 |
25 | No images found
26 |
27 |
28 | There were no results (semantic or direct) found for the query '
29 | {query}'.
30 |
31 |
32 |
(null);
26 | const [isValid, setIsValid] = useState(true);
27 |
28 | const searchParams = useSearchParams();
29 | const q = searchParams.get("q")?.toString() ?? "";
30 | const pathname = usePathname();
31 |
32 | const router = useRouter();
33 |
34 | const handleSearch = useDebouncedCallback((term: string) => {
35 | const params = new URLSearchParams(searchParams);
36 |
37 | if (term) {
38 | params.set("q", term);
39 | } else {
40 | params.delete("q");
41 | }
42 | startTransition &&
43 | startTransition(() => {
44 | router.push(`${pathname}?${params.toString()}`);
45 | });
46 | }, 300);
47 |
48 | const resetQuery = () => {
49 | startTransition &&
50 | startTransition(() => {
51 | router.push("/");
52 | if (inputRef.current) {
53 | inputRef.current.value = "";
54 | inputRef.current?.focus();
55 | }
56 | });
57 | };
58 |
59 | return (
60 |
61 |
62 |
63 |
64 |
95 |
97 | ) : null}
98 |
99 |
100 | {!isValid ? (
101 |
102 | Query must be 3 characters or longer
103 |
104 | ) : (
105 |
106 | )}
107 |
108 |
& VariantProps
25 | >(({ className, variant, ...props }, ref) => (
26 |
32 | ))
33 | Alert.displayName = "Alert"
34 |
35 | const AlertTitle = React.forwardRef<
36 | HTMLParagraphElement,
37 | React.HTMLAttributes
38 | >(({ className, ...props }, ref) => (
39 |
50 | >(({ className, ...props }, ref) => (
51 |
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 |
59 | export { Alert, AlertTitle, AlertDescription }
60 |
--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | variants: {
10 | variant: {
11 | default: "border-transparent bg-primary text-primary-foreground ",
12 | secondary: "border-transparent bg-secondary text-secondary-foreground ",
13 | destructive:
14 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
15 | outline: "text-foreground",
16 | },
17 | },
18 | defaultVariants: {
19 | variant: "default",
20 | },
21 | },
22 | );
23 |
24 | export interface BadgeProps
25 | extends React.HTMLAttributes,
26 | VariantProps {}
27 |
28 | function Badge({ className, variant, ...props }: BadgeProps) {
29 | return (
30 |
31 | );
32 | }
33 |
34 | export { Badge, badgeVariants };
35 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes,
38 | VariantProps {
39 | asChild?: boolean
40 | }
41 |
42 | const Button = React.forwardRef(
43 | ({ className, variant, size, asChild = false, ...props }, ref) => {
44 | const Comp = asChild ? Slot : "button"
45 | return (
46 |
8 | >(({ className, ...props }, ref) => (
9 |
17 | ))
18 | Card.displayName = "Card"
19 |
20 | const CardHeader = React.forwardRef<
21 | HTMLDivElement,
22 | React.HTMLAttributes
23 | >(({ className, ...props }, ref) => (
24 |
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 |
32 | const CardTitle = React.forwardRef<
33 | HTMLParagraphElement,
34 | React.HTMLAttributes
35 | >(({ className, ...props }, ref) => (
36 |
50 | >(({ className, ...props }, ref) => (
51 |
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 |
59 | const CardContent = React.forwardRef<
60 | HTMLDivElement,
61 | React.HTMLAttributes
62 | >(({ className, ...props }, ref) => (
63 |
64 | ))
65 | CardContent.displayName = "CardContent"
66 |
67 | const CardFooter = React.forwardRef<
68 | HTMLDivElement,
69 | React.HTMLAttributes
70 | >(({ className, ...props }, ref) => (
71 |
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 |
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 |
--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 | ) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "drizzle-kit";
2 |
3 | export default {
4 | schema: "./lib/db/schema.ts",
5 | out: "./lib/db/migrations",
6 | dialect: "postgresql",
7 | dbCredentials: {
8 | url: process.env.POSTGRES_URL!,
9 | },
10 | } satisfies Config;
11 |
--------------------------------------------------------------------------------
/lib/ai/0-upload.ts:
--------------------------------------------------------------------------------
1 | import dotenv from "dotenv";
2 | import { getJpgFiles } from "./utils";
3 | import { list, put } from "@vercel/blob";
4 | import fs from "fs";
5 |
6 | dotenv.config();
7 |
8 | async function main() {
9 | const basePath = "images-to-index";
10 | const files = await getJpgFiles(basePath);
11 | const { blobs } = await list();
12 |
13 | for (const file of files) {
14 | const exists = blobs.some((blob) => blob.pathname === file);
15 | if (exists) {
16 | console.log(`File (${file}) already exists in Blob store`);
17 | continue;
18 | }
19 | const filePath = basePath + "/" + file;
20 | const fileContent = fs.readFileSync(filePath);
21 |
22 | console.clear();
23 | console.log(
24 | `Uploading ${file} (${files.indexOf(file) + 1}/${files.length}) to Blob storage`,
25 | );
26 | try {
27 | await put(file, fileContent, { access: "public" });
28 | console.log(`Uploaded ${file}`);
29 | } catch (e) {
30 | console.error(e);
31 | }
32 | }
33 | console.log("All images uploaded!");
34 | process.exit(0);
35 | }
36 |
37 | main().catch(console.error);
38 |
--------------------------------------------------------------------------------
/lib/ai/1-generate-metadata.ts:
--------------------------------------------------------------------------------
1 | import { openai } from "@ai-sdk/openai";
2 | import { generateObject } from "ai";
3 | import dotenv from "dotenv";
4 | import { z } from "zod";
5 | import { ImageMetadata, writeAllMetadataToFile } from "./utils";
6 | import { list } from "@vercel/blob";
7 |
8 | dotenv.config();
9 |
10 | async function main() {
11 | const blobs = await list();
12 | const files = blobs.blobs.map((b) => b.url);
13 |
14 | console.log("files to process:\n", files);
15 |
16 | const images: ImageMetadata[] = [];
17 |
18 | for (const file of files) {
19 | console.clear();
20 | console.log(
21 | `Generating description for ${file} (${files.indexOf(file) + 1}/${files.length})`,
22 | );
23 | const result = await generateObject({
24 | model: openai("gpt-4o"),
25 | schema: z.object({
26 | image: z.object({
27 | title: z.string().describe("an artistic title for the image"),
28 | description: z
29 | .string()
30 | .describe("A one sentence description of the image"),
31 | }),
32 | }),
33 | maxTokens: 512,
34 | messages: [
35 | {
36 | role: "user",
37 | content: [
38 | { type: "text", text: "Describe the image in detail." },
39 | {
40 | type: "image",
41 | image: file,
42 | },
43 | ],
44 | },
45 | ],
46 | });
47 | images.push({ path: file, metadata: result.object.image });
48 | }
49 | await writeAllMetadataToFile(images, "images-with-metadata.json");
50 | console.log("All images processed!");
51 | }
52 |
53 | main().catch(console.error);
54 |
--------------------------------------------------------------------------------
/lib/ai/2-embed-and-save.ts:
--------------------------------------------------------------------------------
1 | import dotenv from "dotenv";
2 | import { embeddingModel, getMetadataFile } from "./utils";
3 | import { embed } from "ai";
4 | import { nanoid } from "nanoid";
5 | import { drizzle } from "drizzle-orm/postgres-js";
6 | import postgres from "postgres";
7 | import { DBImage, dbImageSchema, images } from "../db/schema";
8 |
9 | dotenv.config();
10 |
11 | export const client = postgres(process.env.POSTGRES_URL!);
12 | export const db = drizzle(client);
13 |
14 | const saveImage = async (image: DBImage) => {
15 | try {
16 | const safeImage = dbImageSchema.parse(image);
17 | const [savedImage] = await db.insert(images).values(safeImage);
18 | return savedImage;
19 | } catch (e) {
20 | console.error(e);
21 | }
22 | };
23 |
24 | async function main() {
25 | // read metadata json file
26 | const imagesWithMetadata = await getMetadataFile("images-with-metadata.json");
27 |
28 | // map over it and embed each .metadata key
29 | for (const image of imagesWithMetadata) {
30 | console.clear();
31 | console.log(
32 | `Generating embedding for ${image.path} (${imagesWithMetadata.indexOf(image) + 1}/${imagesWithMetadata.length})`,
33 | );
34 |
35 | // create embedding
36 | const { embedding } = await embed({
37 | model: embeddingModel,
38 | value: image.metadata.title + "\n" + image.metadata.description,
39 | });
40 | //
41 |
42 | console.log(
43 | `Saving ${image.path} to the DB (${imagesWithMetadata.indexOf(image) + 1}/${imagesWithMetadata.length})`,
44 | );
45 | // push to db
46 | try {
47 | await saveImage({
48 | title: image.metadata.title,
49 | description: image.metadata.description,
50 | id: nanoid(),
51 | path: image.path,
52 | embedding,
53 | });
54 | } catch (e) {
55 | console.error(e);
56 | }
57 | }
58 | console.log("Successfully embedded and saved all images!");
59 | process.exit(0);
60 | }
61 |
62 | main().catch(console.error);
63 |
--------------------------------------------------------------------------------
/lib/ai/utils.ts:
--------------------------------------------------------------------------------
1 | import { openai } from "@ai-sdk/openai";
2 | import { embed } from "ai";
3 | import fs from "fs";
4 | import path from "path";
5 |
6 | export type ImageMetadata = {
7 | path: string;
8 | metadata: {
9 | title: string;
10 | description: string;
11 | };
12 | };
13 |
14 | export const embeddingModel = openai.embedding("text-embedding-3-small");
15 |
16 | /**
17 | * Asynchronously gets all `.jpg` files in the specified directory.
18 | *
19 | * @param dir The directory to search within.
20 | * @returns A promise that resolves to an array of filenames.
21 | */
22 | export async function getJpgFiles(dir: string): Promise {
23 | try {
24 | const files = await fs.promises.readdir(dir);
25 | const jpgFiles = files.filter(
26 | (file) => path.extname(file).toLowerCase() === ".jpg",
27 | );
28 | return jpgFiles;
29 | } catch (error) {
30 | console.error("Error reading directory:", error);
31 | throw error; // Re-throw the error for further handling if necessary
32 | }
33 | }
34 |
35 | /**
36 | * Writes all metadata to a single JSON file.
37 | *
38 | * @param metadataArray An array of metadata objects.
39 | * @param outputPath The path including filename to the output JSON file.
40 | */
41 | export async function writeAllMetadataToFile(
42 | metadataArray: ImageMetadata[],
43 | outputPath: string,
44 | ) {
45 | try {
46 | await fs.promises.writeFile(
47 | outputPath,
48 | JSON.stringify(metadataArray, null, 2),
49 | );
50 | console.log(`All metadata written to ${outputPath}`);
51 | } catch (error) {
52 | console.error("Error writing metadata to file:", error);
53 | throw error;
54 | }
55 | }
56 |
57 | export async function getMetadataFile(path: string): Promise {
58 | try {
59 | const rawFile = await fs.promises.readFile(path, { encoding: "utf-8" });
60 | const file = JSON.parse(rawFile) as ImageMetadata[];
61 | return file;
62 | } catch (error) {
63 | console.error("Error reading file:", error);
64 | throw error; // Re-throw the error for further handling if necessary
65 | }
66 | }
67 |
68 | export const generateEmbedding = async (value: string): Promise => {
69 | const input = value.replaceAll("\n", " ");
70 | const { embedding } = await embed({
71 | model: embeddingModel,
72 | value: input,
73 | });
74 | return embedding;
75 | };
76 |
--------------------------------------------------------------------------------
/lib/db/api.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import {
4 | cosineDistance,
5 | desc,
6 | getTableColumns,
7 | gt,
8 | or,
9 | sql,
10 | } from "drizzle-orm";
11 | import { db } from ".";
12 | import { DBImage, images } from "./schema";
13 | import { generateEmbedding } from "../ai/utils";
14 | import { kv } from "@vercel/kv";
15 |
16 | const { embedding: _, ...rest } = getTableColumns(images);
17 | const imagesWithoutEmbedding = {
18 | ...rest,
19 | embedding: sql`ARRAY[]::integer[]`,
20 | };
21 |
22 | export const findSimilarContent = async (description: string) => {
23 | const embedding = await generateEmbedding(description);
24 | const similarity = sql`1 - (${cosineDistance(images.embedding, embedding)})`;
25 | const similarGuides = await db
26 | .select({ image: imagesWithoutEmbedding, similarity })
27 | .from(images)
28 | .where(gt(similarity, 0.28)) // experiment with this value based on your embedding model
29 | .orderBy((t) => desc(t.similarity))
30 | .limit(10);
31 |
32 | return similarGuides;
33 | };
34 |
35 | export const findImageByQuery = async (query: string) => {
36 | const result = await db
37 | .select({ image: imagesWithoutEmbedding, similarity: sql`1` })
38 | .from(images)
39 | .where(
40 | or(
41 | sql`title ILIKE ${"%" + query + "%"}`,
42 | sql`description ILIKE ${"%" + query + "%"}`,
43 | ),
44 | );
45 | return result;
46 | };
47 |
48 | function uniqueItemsByObject(items: DBImage[]): DBImage[] {
49 | const seenObjects = new Set();
50 | const uniqueItems: DBImage[] = [];
51 |
52 | for (const item of items) {
53 | if (!seenObjects.has(item.title)) {
54 | seenObjects.add(item.title);
55 | uniqueItems.push(item);
56 | }
57 | }
58 |
59 | return uniqueItems;
60 | }
61 |
62 | export const getImages = async (
63 | query?: string,
64 | ): Promise<{ images: DBImage[]; error?: Error }> => {
65 | try {
66 | const formattedQuery = query
67 | ? "q:" + query?.replaceAll(" ", "_")
68 | : "all_images";
69 |
70 | const cached = await kv.get(formattedQuery);
71 | if (cached) {
72 | return { images: cached };
73 | } else {
74 | if (query === undefined || query.length < 3) {
75 | const allImages = await db
76 | .select(imagesWithoutEmbedding)
77 | .from(images)
78 | .limit(20);
79 | await kv.set("all_images", JSON.stringify(allImages));
80 | return { images: allImages };
81 | } else {
82 | const directMatches = await findImageByQuery(query);
83 | const semanticMatches = await findSimilarContent(query);
84 | const allMatches = uniqueItemsByObject(
85 | [...directMatches, ...semanticMatches].map((image) => ({
86 | ...image.image,
87 | similarity: image.similarity,
88 | })),
89 | );
90 |
91 | await kv.set(formattedQuery, JSON.stringify(allMatches));
92 | return { images: allMatches };
93 | }
94 | }
95 | } catch (e) {
96 | if (e instanceof Error) return { error: e, images: [] };
97 | return {
98 | images: [],
99 | error: { message: "Error, please try again." } as Error,
100 | };
101 | }
102 | };
103 |
--------------------------------------------------------------------------------
/lib/db/index.ts:
--------------------------------------------------------------------------------
1 | import { sql } from "@vercel/postgres";
2 | import { drizzle } from "drizzle-orm/vercel-postgres";
3 |
4 | export const db = drizzle(sql);
5 |
--------------------------------------------------------------------------------
/lib/db/schema.ts:
--------------------------------------------------------------------------------
1 | import { varchar, index, pgTable, vector, text } from "drizzle-orm/pg-core";
2 | import { nanoid } from "nanoid";
3 | import { z } from "zod";
4 |
5 | export const images = pgTable(
6 | "images",
7 | {
8 | id: varchar("id", { length: 191 })
9 | .primaryKey()
10 | .$defaultFn(() => nanoid()),
11 | title: text("title").notNull(),
12 | description: text("description").notNull(),
13 | path: text("path").notNull(),
14 | embedding: vector("embedding", { dimensions: 1536 }).notNull(),
15 | },
16 | (table) => ({
17 | embeddingIndex: index("embeddingIndex").using(
18 | "hnsw",
19 | table.embedding.op("vector_cosine_ops"),
20 | ),
21 | }),
22 | );
23 |
24 | export const dbImageSchema = z.object({
25 | id: z.string(),
26 | embedding: z.array(z.number()),
27 | title: z.string(),
28 | path: z.string(),
29 | description: z.string(),
30 | similarity: z.number().optional(),
31 | });
32 |
33 | export type DBImage = z.infer;
34 |
--------------------------------------------------------------------------------
/lib/hooks/use-shared-transition.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { createContext, useContext, useTransition } from "react";
4 |
5 | const defaultValue: {
6 | isPending: boolean;
7 | startTransition?: React.TransitionStartFunction;
8 | } = { isPending: false };
9 | const TransitionContext = createContext(defaultValue);
10 |
11 | export const TransitionProvider = ({
12 | children,
13 | }: {
14 | children: React.ReactNode;
15 | }) => {
16 | const [isPending, startTransition] = useTransition();
17 |
18 | return (
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
25 | export const useSharedTransition = () => useContext(TransitionContext);
26 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export type ImageStreamStatus = {
9 | regular: boolean;
10 | semantic: boolean;
11 | };
12 |
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | images: {
4 | remotePatterns: [
5 | {
6 | protocol: 'https',
7 | hostname: 'bodo0tgbs4falkp7.public.blob.vercel-storage.com',
8 | port: '',
9 | },
10 | ],
11 | minimumCacheTTL: 60,
12 | },
13 | };
14 |
15 | export default nextConfig;
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "semantic-image-search",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint",
9 | "db:generate": "drizzle-kit generate",
10 | "db:push": "drizzle-kit push",
11 | "db:studio": "drizzle-kit studio",
12 | "upload": "tsx lib/ai/0-upload.ts",
13 | "generate-metadata": "tsx lib/ai/1-generate-metadata.ts",
14 | "embed-and-save": "tsx lib/ai/2-embed-and-save.ts"
15 | },
16 | "dependencies": {
17 | "@ai-sdk/openai": "^1.2.1",
18 | "@radix-ui/react-slot": "^1.1.0",
19 | "@vercel/blob": "^0.27.0",
20 | "@vercel/kv": "^3.0.0",
21 | "@vercel/postgres": "^0.10.0",
22 | "ai": "^4.1.54",
23 | "class-variance-authority": "^0.7.1",
24 | "clsx": "^2.1.1",
25 | "drizzle-orm": "^0.38.1",
26 | "geist": "^1.3.1",
27 | "lucide-react": "^0.468.0",
28 | "nanoid": "^5.0.9",
29 | "next": "15.1.0",
30 | "postgres": "^3.4.5",
31 | "react": "^19.0.0",
32 | "react-dom": "^19.0.0",
33 | "sharp": "^0.33.5",
34 | "tailwind-merge": "^2.5.5",
35 | "tailwindcss-animate": "^1.0.7",
36 | "use-debounce": "^10.0.4",
37 | "zod": "^3.24.1"
38 | },
39 | "devDependencies": {
40 | "@types/lodash": "^4.17.13",
41 | "@types/node": "^22.10.2",
42 | "@types/react": "^19.0.1",
43 | "@types/react-dom": "^19.0.2",
44 | "dotenv": "^16.4.7",
45 | "drizzle-kit": "^0.30.0",
46 | "eslint": "^9.16.0",
47 | "eslint-config-next": "15.1.0",
48 | "postcss": "^8.4.49",
49 | "tailwindcss": "^3.4.16",
50 | "tsx": "^4.19.2",
51 | "typescript": "^5.7.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 | plugins: {
4 | tailwindcss: {},
5 | },
6 | };
7 |
8 | export default config;
9 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | 
3 |