File size: 4,223 Bytes
2aee2df | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | # 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
```bash
pip install -r requirements.txt
```
### 2. Install Node.js Dependencies
```bash
npm install
# or
pnpm install
```
### 3. Run the Application
#### Start the Flask Backend
```bash
python app.py
```
The Flask server will run on `http://localhost:5000`
#### Start the Next.js Frontend
```bash
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:
```bash
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 |