| # 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 |