Fashion Shot Generator

An intelligent web application that automatically generates different cropped shots (Neck, Sleeve, Waist) from full-body fashion product images. This project leverages client-side machine learning with TensorFlow.js and a Node.js backend for data persistence.

✨ Features

• Real-Time Single Image Processing: Upload an image file or provide a URL to instantly generate and view cropped shots.
• Dynamic UI: The interface smartly disables URL input when a file is uploaded (and vice-versa) to prevent conflicts.
• Client-Side ML: Utilizes TensorFlow.js with the PoseNet model directly in the browser, eliminating complex backend ML setups.
• CORS Proxy: A dedicated backend endpoint fetches images from URLs, bypassing browser CORS restrictions for a smooth user experience.
• Dynamic Batch Processing: Process multiple images by dynamically adding or removing URL input fields.
• Modern UI: A clean, responsive, and user-friendly interface with clear status indicators, loading spinners, and styled result cards.
• Persistent Storage: All batch processing results are saved to a MongoDB database.

🛠️ Tech Stack

• Frontend:
  • React.js
  • TensorFlow.js with the PoseNet model for pose estimation.
  • Standard CSS for styling.
• Backend:
  • Node.js
  • Express.js for the REST API.
  • MongoDB with Mongoose for data modeling and storage.

🚀 Local Setup and Installation

Follow these steps to get the project running on your local machine.

Prerequisites

• Node.js (v20.x - LTS recommended)
• MongoDB Community Server installed and running.
• An npm package manager.

1. Clone the Repository

git clone <your-repository-url>
cd fashion-shot-generator

2. Backend Setup

Navigate to the backend directory and set up the environment.

cd backend

# Install dependencies
npm install

Create a .env file in the 'backend' folder and add your configuration:

backend/.env

MONGO_URI=mongodb://localhost:27017/fashion-shot-generator
PORT=5000

3. Frontend Setup

In a separate terminal, navigate to the frontend directory.

cd frontend
# Install dependencies
npm install

⚡ Running the Application

Start the Backend Server: In the backend directory terminal, run:

npm start

The server will start on http://localhost:5000 and connect to MongoDB. Start the Frontend App: In the frontend directory terminal, run: npm start

The React application will open in your browser at http://localhost:3000.

📂 Project Structure

fashion-shot-generator/
├── backend/
│   ├── controllers/
│   │   └── imageController.js  # Handles API logic
│   ├── models/
│   │   └── Image.js            # Mongoose schema for images
│   ├── routes/
│   │   └── imageRoutes.js      # Defines API endpoints
│   ├── .env                    # Environment variables
│   ├── package.json
│   └── server.js               # Main Express server file
│
└── frontend/
    ├── src/
    │   ├── components/
    │   │   ├── ImageUpload.js
    │   │   ├── BatchProcess.js
    │   │   └── ProcessedImages.js
    │   ├── services/
    │   │   └── api.js              # Functions to call the backend
    │   ├── App.css                 # Main stylesheet
    │   ├── App.js                  # Main application component
    │   └── index.js
    └── package.json

🔌 API Endpoints

The backend provides the following RESTful API endpoints:

POST /api/images/proxy-image: Fetches an image from a given URL to bypass CORS issues.
Body: { "url": "image-url-here" }
POST /api/images/save-batch: Saves the results of a batch process to the database.
Body: { "processedData": [...] }
GET /api/images: Retrieves all previously processed image records from the database.

💡 How It Works

Pose Detection: When an image is provided on the frontend, the PoseNet model from TensorFlow.js analyzes it to detect the keypoints of a human figure (e.g., shoulders, elbows, eyes).

Cropping Logic: Based on the detected keypoints, the application calculates the bounding boxes for the "Neck," "Sleeve," and "Waist" shots.

Image Generation: The original image is drawn onto a hidden HTML5 <canvas>, and the calculated bounding boxes are used to crop the image. The cropped sections are then converted to Base64 data URLs for display.

Data Persistence: For batch processing, the final array of results (original URLs, status, and generated shot data URLs) is sent to the backend and stored in the MongoDB database.