AI-Powered Color & Face Shape Analyzer

Live Demo: https://coloranalyzer.netlify.app/

An intelligent web application that analyzes your facial features and skin tone to provide personalized color recommendations, face shape analysis, and style suggestions using AI technology.

✨ Features

• 🎨 Color Analysis: Determines your color season and undertone
• 👤 Face Shape Detection: Identifies your face shape for optimal styling
• 💄 Personalized Recommendations:
  • Foundation shades
  • Lipstick colors
  • Blush tones
  • Neckline suggestions
• 📸 Photo Upload: Simple drag-and-drop interface
• 🤖 AI-Powered: Uses Google Gemini 2.5 for intelligent analysis
• 📱 Responsive Design: Works on desktop and mobile devices

🚀 Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• AI Integration: Google Gemini 2.5 API
• Image Search: Pexels API for outfit inspiration
• Deployment: Netlify with serverless functions
• Styling: Custom CSS with modern design principles

🛠️ Project Structure

├── index.html              # Main application interface
├── script.js               # Core application logic
├── styles.css              # Styling and responsive design
├── netlify/
│   └── functions/
│       ├── gemini-analyze.js    # AI analysis endpoint
│       └── pexels-search.js     # Image search endpoint
├── netlify.toml            # Netlify configuration
└── package.json           # Dependencies and scripts

🚀 Getting Started

Prerequisites

• Node.js (for local development)
• Netlify CLI (optional, for local testing)

Installation

1. Clone the repository

   git clone https://github.com/KnockoutCoder/ai-color-face-analyzer.git
   cd ai-color-face-analyzer

2. Install dependencies

   npm install

3. Set up environment variables

   cp env.example .env

   Add your API keys to .env:

   GEMINI_API_KEY=your_gemini_api_key
   PEXELS_API_KEY=your_pexels_api_key
   

4. Run locally

   netlify dev

🔧 API Configuration

Google Gemini API

• Sign up at Google AI Studio
• Create an API key for Gemini 2.5
• Add to your environment variables

Pexels API

• Sign up at Pexels API
• Get your API key
• Add to your environment variables

📱 Usage

1. Upload a Photo: Click the upload area or drag & drop a clear selfie
2. AI Analysis: The app analyzes your facial features and skin tone
3. Get Recommendations: Receive personalized color and style suggestions
4. Explore Options: Browse outfit inspiration and try different looks

🎯 Key Features Explained

Color Analysis

• Seasonal Color Theory: Determines if you're Spring, Summer, Autumn, or Winter
• Undertone Detection: Identifies warm, cool, or neutral undertones
• Personalized Palette: Suggests specific foundation, lipstick, and blush shades

Face Shape Analysis

• Geometric Analysis: Uses AI to identify face shape (oval, round, square, etc.)
• Styling Recommendations: Suggests necklines and accessories that complement your shape

🌟 Live Demo

Try the application at: https://coloranalyzer.netlify.app/

📸 Screenshots

Upload some screenshots of your application in action

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

KC (KnockoutCoder)

• GitHub: @KnockoutCoder
• Email: kryscel.ninal@gmail.com

🙏 Acknowledgments

• Google Gemini 2.5 for AI analysis capabilities
• Pexels for high-quality stock photography
• Netlify for seamless deployment
• Color theory principles for accurate recommendations

---

⭐ Star this repository if you found it helpful!

Built with ❤️ for the beauty and fashion community