StyleAI - Virtual Styling Assistant

A comprehensive AI-powered styling assistant that provides virtual try-on, hair styling, background changing, and outfit extraction using cutting-edge AI technology.

🌟 Features

🎽 Virtual Try-On

AI-Powered Clothing Visualization: See how any outfit looks on you with photorealistic results
Multiple Viewing Angles: Front, side, 3/4, and back views for complete outfit assessment
Body Type Support: Accurate fitting for different body builds (Slim, Athletic, Average, Curvy, Plus Size)
Color Customization: Recolor outfits to match your preferred colors
Natural Language Editing: Fine-tune results with custom prompts

👔 Outfit Extraction

AI-Powered Extraction: Extract clothing items from your photos for virtual try-on
Product-Style Results: Clean, professional images suitable for virtual fitting
Save Functionality: Download extracted outfits for future use
Seamless Integration: Automatically loads extracted outfits for immediate try-on

💇 Hair & Beard Styling

Reference-Based Styling: Apply hairstyles from reference images
Style Description: Create new looks using natural language descriptions
Gender-Specific Options: Tailored styling for masculine, feminine, or unisex looks
Professional Results: Realistic hair textures, colors, and styling

🌄 Background Changer

Environment Replacement: Place yourself in any setting or environment
Auto & Manual Placement: AI-assisted or user-directed positioning
Realistic Integration: Natural lighting, shadows, and perspective matching
Creative Freedom: From professional settings to fantasy worlds

📱 Mobile-First Design

Responsive Interface: Optimized for mobile devices and tablets
Touch-Friendly Navigation: Large touch targets and smooth interactions
Bottom Tab Navigation: Easy access to all features with themed colors
Progressive Web App: Install on your device for app-like experience

🚀 Tech Stack

Frontend Architecture

React 19 with TypeScript for modern component development
React Router DOM for seamless multi-page navigation
Tailwind CSS for responsive design and modern UI components
Framer Motion for smooth animations and transitions
Vite for fast development and optimized builds

AI Integration

Google Gemini 2.5 Flash Image Preview with direct API integration
Dual API Support: Direct Google Gemini API or OpenRouter proxy
Professional Prompt Engineering with photography terminology
Multi-Modal Processing supporting both images and text
Advanced Error Handling with user-friendly messages

Image Processing

React Image Crop for advanced cropping functionality
HTML5 Canvas API for image manipulation
Browser File API for secure file handling
Multiple Format Support (PNG, JPG, JPEG)

📋 Prerequisites

Node.js (v18 or higher)
Google Gemini API Key - Get yours from Google AI Studio
OpenRouter API Key (optional alternative) - Get yours from OpenRouter.ai

🛠️ Installation & Setup

Clone the repository
```
git clone <repository-url>
cd styleai
```
Install dependencies
```
npm install
```
Set up your API key
- Primary Option: Get a Google Gemini API key from Google AI Studio
- Alternative: Get an OpenRouter API key from OpenRouter.ai
- Open the app and go to Settings
- Enter your preferred API key and click "Save API Key"
Run the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:5000 to see the application

🎯 How to Use

Virtual Try-On

Upload Your Photo: Take or select a photo of yourself
Crop Your Image: Frame yourself perfectly using the cropping tool
Add Outfit: Upload a clothing item or extract one from another photo
Select Options: Choose viewing angle and body type
Generate: Click "Try It On!" and watch the AI create your virtual fitting

Outfit Extraction

Upload Photo: Use a photo where you're wearing the outfit you want to extract
Extract Outfit: Click "Extract Outfit from My Photo"
Save Result: Download the clean outfit image for future use
Virtual Try-On: The extracted outfit automatically loads for immediate try-on

Hair Styling

Upload Your Photo: Provide a clear photo of yourself
Choose Style Method: Use a reference image or describe your desired style
Set Preferences: Select gender and add custom styling notes
Generate: Let the AI transform your hairstyle

Background Changer

Upload Your Photo: Start with any photo of yourself
Describe Environment: Tell the AI where you want to be placed
Choose Placement: Let AI decide or provide specific instructions
Create Scene: Generate your new environment

🏗️ Project Structure

styleai/
├── components/              # Reusable React components
│   ├── SplashScreen.tsx    # App initialization screen
│   ├── TabNavigation.tsx   # Bottom navigation bar
│   ├── ImageUploader.tsx   # File upload with cropping
│   └── LandingScreen.tsx   # First-time user onboarding
├── pages/                  # Page components for each feature
│   ├── HomePage.tsx        # Welcome screen and feature overview
│   ├── VirtualTryOnPage.tsx# Virtual try-on interface
│   ├── HairStylePage.tsx   # Hair styling interface
│   ├── BackgroundPage.tsx  # Background changing interface
│   ├── AboutPage.tsx       # App information and credits
│   └── SettingsPage.tsx    # API key management and preferences
├── services/               # AI integration services
│   ├── geminiService.ts    # Core AI functionality
│   ├── optimizedGeminiService.ts # Optimized prompt templates
│   └── enhancedGeminiService.ts # Multi-feature support
├── contexts/               # Global state management
│   └── AppContext.tsx      # Application-wide state and functions
├── assets/                 # Static assets and sample images
├── App.tsx                # Main application component with routing
├── index.tsx              # React app entry point
└── vite.config.ts         # Build configuration

🔧 Available Scripts

npm run dev - Start development server (port 5000)
npm run build - Build for production
npm run preview - Preview production build

🎨 Key Features

Advanced AI Prompts

Professional Photography Terminology for high-quality results
Body Type Fidelity ensuring realistic clothing fit
Lighting and Shadow Matching for seamless integration
Multiple Viewing Angles for comprehensive visualization

User Experience

Progressive Loading with contextual status messages
Drag & Drop Interface for easy file uploads
Image Gallery to save and manage generated results
Mobile-Optimized touch interface

Error Handling

Comprehensive Error Messages with clear explanations
API Key Validation with helpful setup instructions
File Format Validation with user-friendly guidance
Network Error Recovery with retry mechanisms

🌐 Deployment

This application is optimized for deployment on modern hosting platforms:

Replit Deployment

Pre-configured to run on port 5000
Environment variable support
Automatic dependency management

Other Platforms

Compatible with Vercel, Netlify, and other static hosts
Build optimization for fast loading
Progressive Web App features

🔐 Configuration

API Keys

The application supports two methods for accessing Google's Gemini AI model:

Primary Method - Direct Google Gemini API:

Sign up at Google AI Studio
Create a new API key
Configure it in the app's Settings page
Provides direct access to Google's latest models

Alternative Method - OpenRouter API:

Sign up at OpenRouter.ai
Get your API key from the dashboard
Configure it in the app's Settings page
Provides access through OpenRouter's proxy service

Storage

API Key: Stored securely in browser localStorage
Generated Images: Temporarily stored in browser memory
User Preferences: Saved locally for personalized experience

📱 Mobile Features

Progressive Web App

Install on mobile devices for app-like experience
Offline capability for basic functionality
Push notifications for updates (future feature)

Touch Optimizations

Large touch targets for easy interaction
Gesture support for image manipulation
Haptic feedback on supported devices

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Use Tailwind CSS for styling
Write clear, descriptive commit messages
Add comments for complex functionality

📄 License

This project is licensed under the Apache 2.0 License - see the license headers in individual files for details.

👨‍💻 Developer

StyleAI was developed with ❤️ by SALAH.A

GitHub: Salahalioui
Facebook: SALAH.ALIOUI32

Full-Stack Developer & AI Enthusiast passionate about creating innovative AI-powered applications that make technology accessible and fun for everyone.

🙏 Acknowledgments

Google AI for the Gemini 2.5 Flash Image Preview model
OpenRouter for providing reliable AI model access
React Team for the amazing React 19 framework
Tailwind CSS for the utility-first styling approach
Framer Motion for smooth animations
Open Source Community for the incredible tools and libraries

🆘 Support

Need help? Here are your options:

Check the About page in the app for feature explanations
Review error messages in the console for technical issues
Verify your API key in Settings if features aren't working
Create an issue in the repository for bugs or feature requests

Ready to transform your style with AI? 🎨✨

Visit the About page in the app to learn more about StyleAI's capabilities and features!

Name		Name	Last commit message	Last commit date
assets		assets
attached_assets		attached_assets
components		components
contexts		contexts
pages		pages
public		public
services		services
.gitignore		.gitignore
.replit		.replit
AGENTS.md		AGENTS.md
App.tsx		App.tsx
README.md		README.md
index.css		index.css
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
replit.md		replit.md
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation