Note

Work in progress 🚧

🤖 AI Image Search, powered by Typesense

This is a demo that showcase Typesense's Image Search feature which includes:

• Search images using text descriptions of their contents
• Image Similarity search

Tech Stack

• Typesense
• NextJS
• Typescript
• Tailwind

The data contains 1265 best images out of the first 5000 image-prompt pairs which were taken from DiffusionDB and then filtered based on aesthetics using aesthetics-scorer.

Project Structure

├── scripts/
│   ├── data/
│   │   └── 20-images.json
│   └── indexTypesense.ts # script that index data from 20-images.json into typesense server
└── src/
    ├── app/
    │   ├── [slug]/
    │   │   └── page.tsx # explore similar style (search similar images with image)
    │   └── page.tsx # search images using text descriptions
    ├── components/
    │   └── UI components...
    ├── hooks/
    │   └── useImageSearch.ts
    └── lib/
        └── typesense.ts # typesense client config

Development

To run this project locally, make sure you have docker and nodejs, install dependencies and start the dev server:

Installation

git clone https://github.com/typesense/showcase-ai-image-search.git

cd showcase-ai-image-search

npm i

Start typesense server

npm run start:typesense # or: docker compose up

Download sample data:

# From the root of the repo:

curl -o ./scripts/data/20-images.jsonl https://ai-image-search-images.typesense.org/20-images.jsonl

Index data into typesense

npm run index:typesense

Start the dev server

npm run dev

Open http://localhost:3000 to see the app ✌️

Environment

Set env variables in .env file to point the app to the Typesense Cluster

NEXT_PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY=xxx
NEXT_PUBLIC_TYPESENSE_HOST=xxx.typesense.net
NEXT_PUBLIC_TYPESENSE_PORT=443
NEXT_PUBLIC_TYPESENSE_PROTOCOL=https
NEXT_PUBLIC_IMAGE_BASE_URL=...

Only for indexing:

DIFFUSION_DB_JSONL_FILE=...
TYPESENSE_ADMIN_API_KEY=...
INDEXING_BATCH_SIZE=100