AI-powered e-commerce platform where you can upload any image and instantly find visually similar products using CLIP + FAISS technology.
- 📸 Visual Search — Upload any image and find similar products using OpenAI's CLIP model + FAISS vector search
- 🛍️ Product Catalog — Browse, search, and filter products across multiple categories
- 🔐 JWT Authentication — Secure user registration, login, and session management
- 🛒 Shopping Cart — Add to cart, update quantities, and remove items (synced with backend)
- 📦 Checkout & Orders — Address form, order placement, and order history stored in database
- 🎨 Premium UI — Dark glassmorphism design with liquid animations, smooth transitions, and Framer Motion
- 📱 Responsive — Fully responsive across desktop, tablet, and mobile
┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐
│ Next.js Frontend │────▶│ Spring Boot API │────▶│ MySQL DB │
│ (Port 3000) │ │ (Port 8080) │ │ │
└────────┬───────────┘ └────────────────────┘ └────────────────────┘
│
│ Visual Search
▼
┌────────────────────┐
│ Python AI Service │
│ CLIP + FAISS │
│ (Port 8001) │
└────────────────────┘
| Layer | Technology | Description |
|---|---|---|
| Frontend | Next.js 14, TypeScript, Tailwind CSS, Framer Motion | UI with visual search, product browsing, cart, checkout |
| Backend | Spring Boot 3.4, Java 17, Spring Security, JPA | REST APIs for products, auth, cart, orders |
| AI Service | Python, FastAPI, OpenAI CLIP (ViT-B/32), FAISS | Image embedding & similarity search |
| Database | MySQL 8.0 | Products, users, cart, orders, order items |
Smart-Ecommerce-with-Visual-AI/
├── src/ # Next.js Frontend
│ ├── app/ # App router pages
│ │ ├── page.tsx # Landing page
│ │ ├── products/ # Product listing & detail
│ │ ├── search/ # Visual search page
│ │ ├── cart/ # Shopping cart & checkout
│ │ ├── login/ # Login page
│ │ └── signup/ # Registration page
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Button, Input, Badge, etc.
│ │ ├── layout/ # Navbar, Footer
│ │ ├── product/ # Product card
│ │ └── cart/ # Cart sheet
│ └── lib/ # Utilities & contexts
│ ├── api.ts # API service layer
│ ├── auth-context.tsx # Auth state management
│ ├── cart-context.tsx # Cart state management
│ └── types.ts # TypeScript interfaces
│
├── backend/ # Spring Boot Backend
│ └── src/main/java/com/visualai/backend/
│ ├── controller/ # REST controllers
│ ├── entity/ # JPA entities
│ ├── repository/ # Spring Data repositories
│ ├── service/ # Business logic
│ └── config/ # Security & CORS config
│
├── ai-service/ # Python AI Service
│ ├── main.py # FastAPI app entry
│ ├── config.py # Configuration
│ ├── models/
│ │ ├── clip_model.py # CLIP model wrapper
│ │ └── faiss_index.py # FAISS index management
│ ├── routes/
│ │ ├── search.py # Visual search endpoint
│ │ └── index.py # Index rebuild endpoint
│ ├── utils/
│ │ └── image_utils.py # Image loading utilities
│ └── requirements.txt # Python dependencies
│
├── package.json # Frontend dependencies
├── tailwind.config.ts # Tailwind configuration
├── next.config.mjs # Next.js configuration
└── README.md
- Node.js 18+ and npm
- Java 17+ (JDK)
- Python 3.9+
- MySQL 8.0+
- Maven (or use the included
mvnwwrapper)
git clone https://github.com/ItsOmkara/Smart-Ecommerce-with-Visual-AI.git
cd Smart-Ecommerce-with-Visual-AICreate a MySQL database:
CREATE DATABASE visual_ecommerce_db;The tables are auto-created by Hibernate when the backend starts (
spring.jpa.hibernate.ddl-auto=update).
cd backend
./mvnw spring-boot:runOr open the backend/ folder in IntelliJ IDEA and run the application.
The backend will start on http://localhost:8080.
cd ai-service
python -m venv venv
# Windows
.\venv\Scripts\activate
# macOS/Linux
source venv/bin/activate
pip install -r requirements.txt
python main.pyThe AI service will start on http://localhost:8001.
⚠️ First startup downloads the CLIP model (~350MB). FAISS index is built automatically from database products.
# From the project root
npm install
npm run devThe frontend will start on http://localhost:3000.
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/auth/register |
Register a new user |
| POST | /api/auth/login |
Login (returns JWT) |
| GET | /api/auth/me |
Get current user info |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/products |
List all products |
| GET | /api/products?category= |
Filter by category |
| GET | /api/products/:id |
Get product by ID |
| GET | /api/products/search?q= |
Text search |
| GET | /api/products/:id/related |
Related products |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/cart |
Get cart items |
| POST | /api/cart |
Add to cart |
| PUT | /api/cart/:productId |
Update quantity |
| DELETE | /api/cart/:productId |
Remove item |
| DELETE | /api/cart |
Clear cart |
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/orders |
Place order (with shipping address) |
| GET | /api/orders |
Order history |
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/search/visual |
Upload image for visual search |
| POST | /api/index/rebuild |
Rebuild FAISS index |
- User uploads an image on the search page
- CLIP (ViT-B/32) encodes the image into a 512-dimensional embedding
- FAISS index performs approximate nearest neighbor search against pre-computed product embeddings
- Top-K similar products are returned with similarity scores
- Full product details are fetched from the Spring Boot API
| Category | Technologies |
|---|---|
| Frontend | Next.js 14, React 18, TypeScript, Tailwind CSS 3, Framer Motion, Radix UI |
| Backend | Java 17, Spring Boot 3.4, Spring Security, Spring Data JPA, Lombok |
| AI/ML | Python, FastAPI, OpenAI CLIP, FAISS, PyTorch, NumPy |
| Database | MySQL 8.0, Hibernate ORM |
| Auth | JWT (jjwt 0.12.6), Spring Security |
Omkar Birajdar — @ItsOmkara