Onstyle

Confidence. Expression. Style — reimagined with AI.

Comment

Inspiration

Everyone wants to look good, but most of us struggle to style ourselves with confidence. Finding the right shades, outfits, or accessories for every occasion often feels like guesswork. That’s where OnStyle comes in, born from the idea that style shouldn’t be stressful. OnStyle is your AI-powered personal stylist, helping you instantly discover what looks best on you, for any event, any day.

What it does

OnStyle brings personalized fashion advice directly to your browser. Users receive outfit recommendations based on their body type, occasion, and style preferences, and can even upload images to check if an outfit suits them. Whether shopping online or planning a look for brunch, work, or a night out, OnStyle makes styling effortless and confident.

How I built it

OnStyle is a Chrome extension built with HTML, CSS, and JavaScript to provide a responsive, lightweight interface that runs directly in the browser. The core functionality relies on Google’s Prompt API with Gemini Nano, which receives user inputs — including body type, occasion, style preferences, and uploaded outfit images — and returns personalized outfit recommendations. The extension captures user data through forms and image uploads, sends structured prompts to the API, and dynamically displays the AI’s suggestions within the popup interface. I focused on optimizing the request-response flow so that recommendations appear almost instantly, ensuring a smooth and interactive experience without leaving the current web page.

Challenges I ran into

One of the biggest challenges was integrating the Prompt API with Gemini Nano, because my device didn’t meet the hardware requirements. To handle this, I implemented a fallback system: if Gemini Nano isn’t available, the extension uses simpler, workable code, but it still calls the actual API whenever possible. Another challenge was that Chrome extensions don’t support microphone input, which meant users couldn’t speak their queries directly in the extension. To work around this, I deployed a demo website link where the microphone feature is supported, so users can try voice input without typing. Balancing these limitations while keeping the experience smooth was a key part of development.

Accomplishments that I'm proud of

I’m proud of how I approached obstacles with creative problem-solving to achieve my goals. Instead of letting hardware and platform limitations stop me, I designed flexible solutions that adapt to different environments. I’m also proud of how I structured the extension and demo site so users could still access the core functionality seamlessly, showing that thoughtful engineering can overcome constraints and still deliver a strong user experience.

What I learned

I learned that anything is possible if you stay focused and don’t get distracted from your goal.

What's next for Onstyle

Next, I plan to evolve OnStyle into a complete head-to-toe styling assistant, offering outfit recommendations alongside personalized hair and makeup advice. Users will be able to upload their own images to virtually try on clothes, seeing exactly how outfits and accessories suit them. I also aim to integrate voice interaction for a hands-free experience and make the system smarter over time by learning individual style preferences. Above all, all advice and user data will be private, safe, and fully encrypted, ensuring users can explore their style with confidence and peace of mind.

Built With

Share this project:

Updates