Trion: Virtual Try-On Chrome Extension

Trion is a Chrome extension that allows you to virtually try on clothing from any image on the web. Using the power of generative AI, you can see how a garment would look on you by simply providing a photo of yourself and an image of the clothing.

Features

• Virtual Try-On: See how clothes look on you before you buy.
• Context Menu Integration: Right-click on any image online to start a virtual try-on.
• Multi-Garment Support: Combine up to 10 garments in a single virtual try-on.
• Text-to-Outfit: Generate outfits from a text description.
• Side Panel UI: Easy-to-use interface that opens in the browser's side panel.
• Settings: Configure your OpenRouter API key and other preferences.
• Theme Support: Light, dark, and automatic theme switching.

How to Use

1. Open the Side Panel: Click the Trion extension icon in your browser's toolbar, or right-click on a webpage and select "Trion - Open Side Panel".
2. Set Up Your API Key: In the side panel, go to the settings page and enter your OpenRouter API key.
3. Upload Your Photo: Upload a photo of yourself. This will be used as the base for the virtual try-on.
4. Add Garments:
   • From the Web: Right-click on an image of a garment and select "Trion: Try this on".
   • From Your Computer: Click the "add garments" button in the side panel to upload images from your computer.
5. Generate: Click the "Trion" button to generate the virtual try-on image. You can also provide a text prompt to further customize the result.

Installation

1. Clone this repository or download the source code.
2. Install the dependencies by running npm install.
3. Build the extension by running npm run build.
4. Open Chrome and navigate to chrome://extensions.
5. Enable "Developer mode".
6. Click "Load unpacked" and select the dist directory.

Tech Stack

• React: For building the user interface.
• TypeScript: For type-safe JavaScript.
• Zustand: For state management.
• Tailwind CSS: For styling.
• esbuild: For bundling the extension.
• OpenRouter API: For the image generation.

Project Structure

/
├── public/ # Manifest and icons
├── src/ # Source code
│   ├── background/ # Background service worker
│   ├── components/ # React components
│   ├── content/ # Content scripts
│   ├── hooks/ # React hooks
│   ├── lib/ # Utility functions
│   ├── services/ # API services
│   └── sidepanel/ # Side panel UI
├── esbuild.config.cjs # esbuild configuration
├── package.json # Project dependencies
└── tsconfig.json # TypeScript configuration

Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.