An open API service indexing awesome lists of open source software.

https://github.com/attarmau/fastmcp_recsys

A fashion recommendation system built with FastAPI, React, MongoDB, and Docker. It uses CLIP for image-based clothing tagging and provides a simple UI for users to upload images and receive recommendations
https://github.com/attarmau/fastmcp_recsys

clip fastapi mcp recommender-system

Last synced: about 1 year ago
JSON representation

A fashion recommendation system built with FastAPI, React, MongoDB, and Docker. It uses CLIP for image-based clothing tagging and provides a simple UI for users to upload images and receive recommendations

Awesome Lists containing this project

README

          

# FastMCP_RecSys
This is a CLIP-Based Fashion Recommender with MCP.

# Folder Structure
```
/project-root

├── /backend
│ ├── Dockerfile # Backend Dockerfile
│ ├── /app
│ │ ├── main.py # FastAPI app code
│ │ └── requirements.txt # Python dependencies for the backend
│ └── .env # Environment variables (make sure to add this to .gitignore)

├── /frontend
│ ├── Dockerfile # Frontend Dockerfile
│ ├── package.json # Node.js dependencies (for React)
│ ├── package-lock.json # Lock file for React dependencies
│ ├── /public
│ │ └── index.html # HTML file for the frontend (React app is mounted here)
│ ├── /src
│ │ ├── App.js # Main React component
│ │ └── index.js # React entry point
│ ├── tailwind.config.js # Tailwind CSS config
│ ├── postcss.config.js # PostCSS config
│ └── .env # Frontend environment variables (add to .gitignore)

├── .gitignore # Git ignore file (include .env, node_modules, etc.)
├── docker-compose.yml # Docker Compose configuration
└── README.md # Project documentation

```

## Step 1

Update mongo service to add the same credentials:
```
mongo:
image: mongo:latest
ports:
- "27017:27017"
environment:
MONGO_INITDB_ROOT_USERNAME: root
MONGO_INITDB_ROOT_PASSWORD: example
volumes:
- mongo-data:/data/db
```

Note: Since using environment variables in the FastAPI app, the Mongo URL should look like this:
MONGO_URL = "mongodb://root:example@mongo:27017"

Once it's running, open the browser and go to 👉 http://localhost:8081

Login with: Username: root / Password: example (temporarily setting)

## Step 2
docker-compose up --build

This will:

- Start FastAPI backend with hot reload
- Start MongoDB
- Start Mongo Express (for DB UI) (Frontend will not be built automatically in this mode)

## Step 3
- Access the frontend (React app) at: http://localhost:3000
- Access the backend (FastAPI app) at: http://localhost:8000

### 📌 Quick Tips

Visit your app at: http://localhost:8000/docs

View MongoDB UI: http://localhost:8081 (use user: root, password: example)

mongo-seed runs only once at startup to populate your tags collection.

### 📌 Sample Components for UI

1. Image upload
2. Submit button
3. Display clothing tags + recommendations