Nano Banana Virtual Try-On

A WordPress/WooCommerce plugin that enables AI-powered virtual try-on for clothing products using Google's Gemini 2.5 Flash Image (Nano Banana) API.

Features

• AI-Powered Try-On: Uses Google Gemini 2.5 Flash Image for realistic virtual try-on generation
• Easy Upload: Drag-and-drop or browse file upload for user photos
• WooCommerce Integration: Seamlessly integrates with WooCommerce product pages
• Session Management: Tracks and stores all try-on sessions in database
• Product Mapping: Map specific garment images to products for accurate try-on
• Admin Dashboard: Monitor usage, sessions, and statistics
• HPOS Compatible: Fully compatible with WooCommerce High-Performance Order Storage
• REST API: Complete REST API for programmatic access

Demo

Upload your photo, see yourself wearing the clothes before you buy!

Requirements

• WordPress 5.0 or higher
• WooCommerce 3.0 or higher
• PHP 7.4 or higher
• MySQL 5.6 or higher
• Google AI Studio API Key (Get one here)

Installation

Method 1: WordPress Admin (Recommended)

1. Download the latest release ZIP file
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
3. Upload the ZIP file and click "Install Now"
4. Activate the plugin

Method 2: Manual Installation

1. Clone this repository or download the ZIP:

   git clone https://github.com/curlyfunk/nano-banana-tryon.git

2. Upload the nano-banana-tryon folder to /wp-content/plugins/

3. Activate the plugin through the WordPress admin panel

Configuration

1. Get Google AI Studio API Key

1. Visit Google AI Studio
2. Create a new API key
3. Copy the API key

2. Configure Plugin Settings

1. Go to WordPress Admin → Virtual Try-On → Settings
2. Enter your Google AI Studio API key
3. Configure other settings:
   • API Endpoint: https://generativelanguage.googleapis.com/v1beta (default)
   • Image Quality: 90 (default)
   • Session Expiry: 24 hours (default)
4. Click "Test Connection" to verify API connectivity
5. Save settings

3. Configure Products

For each product you want to enable virtual try-on:

1. Edit the product in WooCommerce
2. Scroll to the "Virtual Try-On" meta box
3. Enable "Enable Virtual Try-On"
4. Select the garment image from the product gallery
5. Choose garment category (Top, Bottom, Dress, Jacket, etc.)
6. Add any notes for best results
7. Update the product

4. Bulk Configuration (Optional)

Use the Garment Mapper for bulk configuration:

1. Go to Virtual Try-On → Garment Mapper
2. View all products with images
3. Enable/disable try-on for multiple products
4. Map garment images in bulk

Usage

For Customers

1. Visit any product page with Virtual Try-On enabled
2. Click the "Virtual Try-On" button
3. Upload your photo (drag-and-drop or browse)
4. Wait for AI to generate the result
5. View your virtual try-on result
6. Download the image or add product to cart

For Administrators

Dashboard: View statistics and recent sessions

• Go to Virtual Try-On → Dashboard

Monitor Sessions: View all try-on attempts

• Go to Virtual Try-On → Sessions

Bulk Product Management: Configure multiple products

• Go to Virtual Try-On → Garment Mapper

🔧 Technical Details

Database Tables

The plugin creates two custom tables:

wp_tryon_sessions: Stores try-on session data

- id: bigint(20) AUTO_INCREMENT
- user_id: bigint(20) NULL
- session_id: varchar(255) NOT NULL
- user_photo_url: text NULL
- product_id: bigint(20) NULL
- garment_photo_url: text NULL
- result_url: text NULL
- status: enum('pending','processing','completed','failed')
- api_response: longtext NULL
- created_at: datetime NOT NULL
- expires_at: datetime NOT NULL

wp_tryon_product_meta: Stores product garment mappings

- id: bigint(20) AUTO_INCREMENT
- product_id: bigint(20) NOT NULL
- garment_image_id: bigint(20) NOT NULL
- garment_category: varchar(50) NULL
- garment_position: varchar(50) NULL
- is_tryon_enabled: tinyint(1) DEFAULT 0
- garment_notes: text NULL
- created_at: datetime NOT NULL
- updated_at: datetime NOT NULL

REST API Endpoints

Upload User Photo

POST /wp-json/nano-tryon/v1/upload-user-photo
Body: { photo: base64_string, sessionId: string }

Start Try-On

POST /wp-json/nano-tryon/v1/start-tryon
Body: { sessionId: string, productId: int }

Get Status

GET /wp-json/nano-tryon/v1/get-status/{session_id}

Get Result

GET /wp-json/nano-tryon/v1/get-result/{session_id}

Get Product Garment

GET /wp-json/nano-tryon/v1/product-garment/{product_id}

List Try-On Products

GET /wp-json/nano-tryon/v1/tryon-products

File Structure

nano-banana-tryon/
├── admin/                      # Admin interface files
│   ├── class-admin.php        # Main admin class
│   └── product-meta-box.php   # Product edit meta box
├── includes/                   # Core plugin files
│   ├── class-plugin.php       # Main plugin orchestration
│   ├── class-api-handler.php  # Google Gemini API integration
│   ├── class-database.php     # Database operations
│   ├── class-product-manager.php  # Product management
│   └── class-image-handler.php    # Image upload/processing
├── public/                     # Frontend files
│   ├── class-public.php       # Frontend functionality
│   ├── css/                   # Styles
│   │   └── public-styles.css
│   └── js/                    # JavaScript
│       └── tryon-app.js       # Main frontend app
├── templates/                  # Template files
│   └── tryon-modal.php        # Try-on modal HTML
├── nano-banana-tryon.php      # Main plugin file
└── README.md                  # This file

Customization

Styling

Override plugin styles in your theme:

/* Customize modal appearance */
.nano-tryon-modal-content {
    max-width: 800px;
    border-radius: 20px;
}

/* Customize button */
.nano-tryon-trigger-button {
    background: #your-color;
    color: white;
}

Hooks & Filters

Actions:

// Before modal is rendered
do_action('nano_tryon_before_modal', $product_id);

// After try-on completed
do_action('nano_tryon_completed', $session_id, $result_url);

Filters:

// Modify API request body
add_filter('nano_tryon_api_request', function($body, $user_photo, $garment_photo) {
    // Modify the API request
    return $body;
}, 10, 3);

// Modify button text
add_filter('nano_tryon_button_text', function($text) {
    return 'Try This On!';
});

Troubleshooting

API Connection Failed

1. Verify your API key is correct
2. Check API endpoint: https://generativelanguage.googleapis.com/v1beta
3. Ensure model is: gemini-2.5-flash-image
4. Check server can make outbound HTTPS requests

Images Not Generating

1. Check WordPress debug log: /wp-content/debug.log
2. Verify product has garment image mapped
3. Check user uploaded a valid image (JPG, PNG, max 10MB)
4. Test API connection in Settings

Browse Button Not Working

1. Clear browser cache (Ctrl+Shift+R)
2. Check browser console for JavaScript errors
3. Ensure jQuery is loaded

Database Errors

1. Deactivate and reactivate plugin to recreate tables
2. Check database user has CREATE TABLE permissions
3. Verify WordPress table prefix in wp-config.php

📈 Performance Tips

1. Image Optimization: Enable image compression in Settings
2. Caching: Use object caching (Redis/Memcached) for better performance
3. CDN: Serve generated images from CDN
4. Cleanup: Regularly clean old sessions (automatic after expiry time)

Security

• All API requests use HTTPS
• User uploads validated for type and size
• SQL injection protection via prepared statements
• XSS protection via proper escaping
• CSRF protection via WordPress nonces

Contributing

Contributions are welcome! This project was created with limited time and resources, so any improvements are appreciated.

How to Contribute

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Setup

# Clone the repo
git clone https://github.com/curlyfunk/nano-banana-tryon.git

# For local development with Docker:
cd wordpress-test
docker-compose up -d

# WordPress will be available at http://localhost:8080

Roadmap

• [ ] Optimize AI prompts for better results
• [ ] Add image quality validation (face detection)
• [ ] Implement retry mechanism
• [ ] Mobile UX improvements
• [ ] Analytics and usage tracking
• [ ] Multi-language support (i18n)
• [ ] Support for more garment types
• [ ] Batch processing for multiple products
• [ ] Integration with other e-commerce platforms

License

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

Acknowledgments

• Built with Google Gemini 2.5 Flash Image (Nano Banana)
• Inspired by the need for better online shopping experiences
• Created with limited time and resources - community contributions welcome!

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

Disclaimer

This plugin uses Google's Gemini API which may have usage costs. Please review Google AI Studio pricing before deploying to production.

---

Made with ❤️ by the community. If someone decides to commit and improve this repo - thank you!