RecoShop is a full‑stack web application that mimics a Pinterest‑style image browsing experience and enhances it with an AI‑based recommendation engine. The project demonstrates how modern computer vision models can be integrated into a real web application to provide personalized, visually similar image suggestions.
The system uses React for the frontend, Flask for the backend, the Unsplash API for image data, and OpenAI’s CLIP model to generate image embeddings for similarity‑based recommendations.
You can add a demonstration video of the project below. Simply replace the placeholder link with your own video URL.
Project Walkthrough Video: Click here to watch the demo video
- Dynamic image feed fetched from Unsplash API
- Multi‑category browsing (Nature, City, Technology, Night Life)
- AI‑powered visual recommendations using CLIP embeddings
- Cosine similarity ranking for accurate results
- Clean and responsive React UI
- Flask REST API backend
- Real‑time interaction between frontend and backend
- React.js
- JavaScript
- HTML & CSS
- Python
- Flask
- Flask‑CORS
- Requests
- OpenAI CLIP Model
- PyTorch
- Scikit‑learn (Cosine Similarity)
- Unsplash Image API
The project follows a three‑layer architecture:
-
Frontend Layer (React)
- Displays images to users
- Sends user interactions to backend
- Renders AI‑generated recommendations
-
Backend Layer (Flask API)
- Handles API requests from React
- Communicates with Unsplash API
- Coordinates AI processing
-
AI Layer (CLIP Model)
- Generates embeddings for images
- Computes similarity between images
- Ranks recommendations based on visual features
User Click → React Frontend → Flask API → CLIP Embedding → Unsplash Candidates → Similarity Ranking → Recommendations Returned → Displayed in UI
- User clicks an image on the main feed.
- The frontend sends the image URL to the backend.
- The backend generates an embedding using the CLIP model.
- Candidate images are fetched from Unsplash.
- Each candidate is embedded and compared to the clicked image using cosine similarity.
- The most visually similar images are returned as recommendations.
- React displays these images dynamically.
- Python 3.x
- Node.js
- Unsplash Developer Account
- Navigate to the server directory
cd server
- Install dependencies
pip install -r requirements.txt
- Create a .env file
UNSPLASH_ACCESS_KEY=your_access_key_here
- Run Flask server
python app.py
- Navigate to frontend directory
cd client
- Install dependencies
npm install
- Start the React app
npm run dev
Returns a diverse set of images from multiple categories for the main feed.
Request body:
{
"image": "image_url"
}
Returns AI-generated visually similar images ranked using CLIP embeddings and cosine similarity. Returns AI‑generated visually similar images.
- Add user authentication
- Save user preferences and history
- Caching of embeddings for faster performance
- Pagination and infinite scrolling
- Support for more image categories
- Mobile application version
Because the recommendation system uses the CLIP deep learning model to compute image embeddings in real time, generating recommendations involves multiple neural network inferences and similarity calculations. As a result:
- Recommendation latency can be higher than normal API responses (typically a few seconds per request)
- Performance depends on CPU/GPU speed and internet connection
- Each click requires downloading and processing multiple images
Created as a personal learning project in full‑stack AI integration.
Feel free to contribute or improve the project!
This project is for educational purposes and uses the Unsplash API under their developer guidelines.