trion

Inspiration

We wanted to solve the common problem of not knowing how clothes will fit when shopping online. Trion was created to be a "virtual dressing room" in your browser, making online fashion more interactive and reducing the uncertainty that leads to returns.

What it does

Trion is a Chrome extension that lets you virtually try on clothes. You upload your photo, and then use the extension to select clothing images from any website. Trion's AI generates an image of you wearing the selected items.

How we built it

We built Trion using a modern tech stack: React and TypeScript for the UI, Tailwind CSS for styling, and Zustand for state management. The core AI functionality is powered by a multimodal model accessed via the OpenRouter API, all packaged as a Chrome extension using esbuild.

Challenges we ran into

Our main hurdles were prompt engineering to get realistic AI-generated images, correctly parsing the API response to extract the final image, and synchronizing state between the extension's background script and the React UI.

Accomplishments that we're proud of

We're proud of creating a seamless user experience, from the simple right-click to the interactive side panel. The multi-garment feature was a key achievement, and we successfully built a practical AI tool that solves a real-world problem.

What we learned

This project taught us a lot about multimodal AI prompting, modern Chrome extension development with React and TypeScript, and handling asynchronous state in a browser extension environment.

What's next for Trion

We plan to improve image realism, add deeper integration with e-commerce sites, introduce features for saving and sharing looks, and optimize performance for faster generation times.

Built With

• bun
• chrome
• chrome.storage.local
• css
• esbuild
• html
• javascript
• lucide-react
• node.js
• openrouter-api
• react
• tailwind-css
• typescript
• zustand