# Image Search Functionality

## Overview
This implementation adds Google Lens-like image search functionality to the e-commerce application, allowing users to search for products by uploading images or taking photos.

## Features

### 🎯 **Core Functionality**
- **Image Upload**: Drag & drop or file picker for image uploads
- **URL Input**: Paste image URLs directly
- **Camera Capture**: Take photos using device camera
- **Real-time Search**: Instant product matching using AI/ML API
- **Results Display**: Beautiful product grid with details

### 📱 **User Experience**
- Modern, responsive UI with animations
- Loading states and error handling
- Product cards with images, titles, SKUs, and stock status
- Category tags and navigation
- Direct links to product pages

## API Integration

### **Endpoint**
```
POST http://93.127.197.210:6546/match/
Content-Type: multipart/form-data
```

### **Request Format**
```javascript
const formData = new FormData();
formData.append('file', imageFile);
```

### **Response Format**
```json
{
  "status": "no-auth",
  "products": {
    "current_page": 1,
    "data": [
      {
        "ID": 856,
        "title": "Product Title",
        "slug": "product-slug",
        "thumbnail_url": "https://...",
        "categories": [...],
        "meta": [...]
      }
    ],
    "total": 7
  }
}
```

## Components

### **1. GoogleLenseModal.jsx**
- Main modal for image upload and URL input
- Handles file uploads and URL processing
- Integrates with image search API

### **2. CaptureImage.jsx**
- Webcam capture functionality
- Photo capture and retake options
- Direct integration with search API

### **3. ImageSearchResults.jsx**
- Displays search results in a grid layout
- Product cards with images and details
- Loading states and error handling

### **4. NewSearchBar.jsx**
- Integration point in the main search bar
- Google Lens icon and image preview
- State management for search flow

## Usage

### **For Users:**
1. Click the Google Lens icon (🔍) in the search bar
2. Choose upload method:
   - **Upload**: Drag & drop or select file
   - **URL**: Paste image URL
   - **Camera**: Take a photo
3. Click "Search Products" to find matches
4. Browse results and click on products to view details

### **For Developers:**
```javascript
// Import the API hook
import { useImageSearchApiMutation } from '@/redux/features/product/productApi';

// Use in component
const [imageSearchApi, { isLoading }] = useImageSearchApiMutation();

// Call the API
const result = await imageSearchApi(imageFile).unwrap();
```

## File Structure
```
src/app/Components/GoogleLense/
├── GoogleLenseModal.jsx      # Main upload modal
├── CaptureImage.jsx          # Camera capture
└── ImageSearchResults.jsx    # Results display

src/redux/features/product/
└── productApi.js            # API integration

src/API/
└── url.js                   # API endpoints
```

## Error Handling
- Network errors with user-friendly messages
- Invalid image formats
- No results found scenarios
- API timeout handling

## Future Enhancements
- [ ] Pagination for large result sets
- [ ] Image preprocessing (resize, compress)
- [ ] Search history
- [ ] Favorite searches
- [ ] Advanced filtering options
- [ ] Batch image search

## Dependencies
- `react-webcam` - Camera functionality
- `framer-motion` - Animations
- `@reduxjs/toolkit` - State management
- `react-query` - API caching

## Notes
- Currently no authentication required for the API
- Supports common image formats (JPEG, PNG, etc.)
- Responsive design for mobile and desktop
- Optimized for performance with loading states