This web application allows users to find visually similar products from a catalog by uploading an image or providing an image URL. It leverages the Google Gemini AI model to analyze images and determine similarity based on visual characteristics. This project was built to fulfill a project specification requiring an image-based product search interface, a mock product database, and a responsive design.
● Dual Image Input : Supports both direct file uploads (drag-and-drop or file picker) and
image URL submission.
● AI-Powered Analysis : Uses the Gemini 2.5 Flash model to analyze the uploaded image
and extract key visual tags.
● Similarity Scoring : A client-side algorithm compares the AI-generated tags against a
predefined product database to calculate a similarity score for each item.
● Dynamic Filtering : Results can be filtered in real-time using a slider for the minimum
similarity score.
● Responsive UI : The interface is fully responsive and provides a seamless experience on
mobile, tablet, and desktop devices.
● Clear UX States : Includes loading indicators during processing and clear error messages
for failed uploads or API calls.
● Mock Database : Contains a built-in database of 50 sample products with images and
descriptive tags.
● Frontend : React.js
● Styling : Tailwind CSS
● AI / Image Analysis : Google Gemini API
● Language : JavaScript (ES6+)
To run this project locally, you will need Node.js and npm (or yarn) installed.
● A Google AI API Key with the Gemini API enabled. You can get one from Google AI Studio.
- Set up a React project: If you don't have one, you can quickly create one using Vite (recommended):
npm create vite@latest my-visual-search-app -- --template react
cd my-visual-search-app
- Install Tailwind CSS (Optional): Follow the official guide to install Tailwind CSS with Vite.(optional)
- Replace the source code: Copy the entire content of the VisualProductMatcher.jsx file provided and replace the contents of src/App.jsx in your new project.
- Important: Add your API Key: In VisualProductMatcher.jsx, find the following line: const apiKey = ""; // Canvas will provide the key Replace the empty string with your actual Google AI API key. Note: For production, it is crucial to manage API keys securely using environment variables and a backend proxy, not by embedding them directly in the client-side code.
- Run the application: npm install npm run dev The application will now be running on your local server, typically http://localhost:5173.
- The user provides an image via file upload or URL.
- The image is converted into a base64-encoded string.
- This string is sent to the Gemini API with a prompt asking it to extract descriptive visual tags (e.g., "blue sneakers", "running shoe", "sporty").
- The application receives the comma-separated tags from the API.
- It then iterates through its local product database. For each product, it calculates a similarity score based on how many of its predefined tags match the tags generated by the AI.
- The products are displayed to the user, sorted by the highest similarity score.
- The user can then use a slider to filter out results that fall below a certain similarity threshold.