Note
Work in progress 🚧
- Search images using text descriptions of their contents
- Image Similarity search
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.
├── 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 configTo 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 iStart typesense server
npm run start:typesense # or: docker compose upDownload sample data:
# From the root of the repo:
curl -o ./scripts/data/20-images.jsonl https://ai-image-search-images.typesense.org/20-images.jsonlIndex data into typesense
npm run index:typesenseStart the dev server
npm run devOpen http://localhost:3000 to see the app ✌️
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent