face-shape-detection-backend

Face Shape Analysis Application

This is a full-stack application that analyzes face shapes using AI. It consists of a Flask backend for face detection and analysis, and a Next.js frontend with two different result display components.

Features

• Face Shape Detection: Uses MediaPipe and a trained Random Forest model to detect face shapes (Heart, Oval, Round, Square)
• Dual Result Display:
  • AnalysisCard: Beautiful, animated display with personality insights and styling recommendations
  • ResultSection: Detailed facial measurements and technical data
• Real-time Processing: Processes uploaded images and displays results immediately
• Modern UI: Next.js frontend with beautiful animations and responsive design

Project Structure

Face_Detection/
├── app.py                 # Flask backend with face analysis logic
├── app/                   # Next.js frontend
│   ├── page.tsx          # Main application page
│   └── api/              # API routes for frontend-backend communication
├── components/           # React components
│   ├── result-section.tsx # Detailed measurements display
│   ├── analysis-card.tsx  # Enhanced result display with personality insights
│   └── upload-section.tsx # File upload component
├── uploads/              # Directory for uploaded images
├── templates/            # Flask templates
└── requirements.txt      # Python dependencies

Setup Instructions

1. Install Python Dependencies

pip install -r requirements.txt

2. Install Node.js Dependencies

npm install
# or
pnpm install

3. Run the Application

Start the Flask Backend

python app.py

The Flask server will run on http://localhost:5000

Start the Next.js Frontend

npm run dev
# or
pnpm dev

The Next.js app will run on http://localhost:3000

How It Works

1. Image Upload: Users upload images through the Next.js frontend
2. Backend Processing: Flask backend processes images using MediaPipe face detection
3. Face Shape Analysis: The trained Random Forest model predicts face shape
4. Dual Display: Results are shown in two formats:
   • AnalysisCard: Enhanced display with personality traits, characteristics, and styling advice
   • ResultSection: Technical measurements and facial proportions
5. Processed Images: Shows original image with facial landmarks and face shape label

API Endpoints

• POST /analyze - Analyzes a face image and returns face shape results with measurements
• GET /uploads/<filename> - Serves processed images
• POST /upload - Handles file uploads (Next.js API route)

Face Shapes Supported

• Heart: Wider forehead, pointed chin, romantic silhouette
• Oval: Balanced proportions, most versatile for styling
• Round: Soft curves, full cheeks, warm appearance
• Square: Strong jawline, defined angles, commanding presence

Components

AnalysisCard

• Beautiful animated display
• Personality insights and characteristics
• Styling recommendations
• Career compatibility suggestions
• Confidence meter and visual effects

ResultSection

• Detailed facial measurements
• Technical data (face length, cheekbone width, etc.)
• Processed image with landmarks
• Jaw curve ratio and proportions

Technologies Used

• Backend: Flask, MediaPipe, OpenCV, scikit-learn
• Frontend: Next.js, React, TypeScript, Tailwind CSS
• AI/ML: Random Forest model for face shape classification
• Computer Vision: MediaPipe for facial landmark detection

Testing

Run the test script to verify the backend is working:

python test_setup.py

Notes

• Both result components display the same analysis data in different formats
• The AnalysisCard provides a more user-friendly, personality-focused experience
• The ResultSection provides detailed technical measurements for analysis
• All processed images are saved with landmarks drawn on them
• CORS is enabled for frontend-backend communication