This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle
What I Built
Every morning I check the weather app, open the wardrobe, and guess. Then it's 22 degrees and I'm in a hoodie, or it's pouring and my jacket isn't waterproof.
StyleCast does the guessing for me:
📸 Snap your wardrobe once. An open vision model running in the browser tags each item: type, colour, warmth, waterproof, formality. Every tag is one tap to edit.
🌦️ Get today's outfit. It reads the forecast for where you are (rain, wind, temperature) and your plan for the day (casual, work or gym), then picks from your clothes.
🧺 It remembers. No wearing the same shirt three days running, and anything marked "in the wash" stays out.
🕳️ It spots gaps. "Nothing waterproof for days like today."
🛍️ Budget chat. Ask "I have €50, what should I buy?" and Gemma, running on your device, plans searches from your gaps and shows real products that fit the budget.
Demo
Try it: https://srg-cy.github.io/StyleCast/ (works best in Chrome on a laptop or Android; it installs to your home screen like an app).
Code
StyleCast
Photograph your wardrobe once. Every morning, get an outfit from your own clothes that fits the real forecast.
Built for the DEV Hacktoberfest 2026 Open-Source AI Challenge, Week 2 ("Side Hustle").
Today's outfit stands in a fitting-room mirror under the forecast; the wardrobe hangs on rails, one per category.
What it does
- Wardrobe scan: snap each item. An open model running in your browser tags type, colour, warmth, waterproofing and formality. Every tag is editable.
- Daily outfit: checks today's forecast (rain, wind, temperature) and your occasion (casual, work or gym), then picks an outfit from your wardrobe.
- Wear history: remembers what you wore recently so it doesn't repeat, and lets you mark items "in the wash".
- Gap spotting: tells you what your wardrobe is missing for the weather you actually get ("nothing waterproof for days like today").
- Budget chat (Shop tab): say "I have €50 today, what should I…
It's a static site with no build step, MIT licensed. npm test covers the outfit rules, the budget chat and the shopping server, and CI runs it on every pull request.
How I Built It
Version 1 was a dead end
On day one, StyleCast was a Python server calling Qwen2.5-VL through Ollama on my PC. The outfits were good. The setup was terrible: every user would need to install Ollama and pull a 6 GB model before seeing a single outfit. Nobody pays for that.
So on day two I threw it away and moved the AI into the browser:
- Tagging clothes from photos: CLIP ViT-B/32 via Transformers.js, on your device (WebGPU on laptops, WebAssembly on phones). Budget chat: Gemma 3 1B, or Gemma 3 270M without WebGPU, on your device in a web worker.
- Weather: Open-Meteo, free with no key, called from the browser. Shopping results: SerpApi Google Shopping, through a tiny Node server on Render.
- Wardrobe and photos: IndexedDB, in your browser.
CLIP doesn't describe photos the way a chat model does. It compares a photo with a list of descriptions and picks the closest. For "what kind of clothing is this?" that's enough, and it's small enough to run on a phone. The outfit itself is chosen by plain JavaScript rules: weather first, then occasion, then what you haven't worn lately. I don't need a model to tell me it's raining.
Then my jeans became a jacket
The first thing I photographed on my own phone was a pair of jeans. StyleCast filed them under jackets.
I could have tweaked a prompt and hoped. Instead I wrote a scoring script that runs the tagger over 272 labelled product photos, and it now runs in CI on every pull request that touches the tagger. It found three problems:
Lazy labels. CLIP was matching my photo against "a photo of a jeans". With nothing else to go on, it went by colour and fabric, and blue denim looks like a denim jacket. Each type now gets a few plain descriptions: "a pair of jeans", "blue denim jeans", "denim trousers with two legs".
The centre crop. CLIP crops to a square, which cut tall photos like jeans in half. Photos are now padded to a square instead.
A shortcut that cost accuracy. I'd put phones on an 8-bit model to save memory. Now they use the 16-bit model, loaded in two halves (text first, then image) so it fits in phone memory.
With all three fixed, on the same 272 photos:
📱 Phones: right clothing type went from 55% to 77%, and right category (top, bottom, shoes...) from 90% to 93%.
💻 Laptops: right clothing type went from 72% to 77%, and right category from 92% to 93%.
The cost: phones now download about 300 MB the first time instead of about 150 MB. The browser keeps it after that.
The cost: phones now download about 300 MB the first time instead of about 150 MB. The browser keeps it after that.
The budget chat: Gemma, Render and SerpApi
Ask "I have €50, what should I buy?" and this happens:
Gemma(on your device) reads your wardrobe and the gaps the rules found, and plans up to three searches.
Only the short query ("rain jacket") and a price cap go to a Render server. It holds the SerpApi key, caches each search for six hours, and caps searches per IP and per day.
Rules pick one product per search so the total stays within budget, and Gemma writes a sentence on why each pick fits.
If you name the item ("shoes under 20"), it skips planning and searches for that. If Gemma can't load on your device, the rules plan the searches and write a plain explanation, so the chat still works.
One lesson for anyone running models in the browser: a failed first load can leave ONNX Runtime broken for the rest of the page. Now each model attempt gets a fresh web worker, so a failed WebGPU attempt doesn't break the WebAssembly fallback.
Why Does Open Innovation Matter?
StyleCast is only a viable side hustle because the models are open.
🔒 Privacy. Nobody wants photos of their bedroom wardrobe on a stranger's server. An open model running in the browser means the photos never leave the phone. A hosted vision API can't promise that.
💸 €0 per user. Closed APIs bill per photo and per message. Open weights on the user's device cost me nothing, which is what makes a €2 subscription work.
✈️ Offline. Once the model is downloaded, tagging and outfit picks work without a connection. The last forecast is saved for mornings with bad signal.
🔧 Fixable. When CLIP got my jeans wrong, I could look inside: change the labels, change the preprocessing, compare precisions, and measure every change. A closed API would have left me rewording prompts.
🔁 Swappable. Gemma 1B drops to 270M on weaker devices, and the repo has a test page comparing CLIP with SmolVLM. No vendor decides that for me.
Transformers.js, ONNX Runtime Web, CLIP, Gemma and Open-Meteo did the heavy lifting. My part was gluing them together for one specific morning problem.
My First User
My first users were two friends. They photographed their own clothes on their Android phones, and StyleCast got them right. Their verdict was "good, but it can be improved", which is fair. StyleCast is only a few days old, and their feedback is what goes into the next version.
Before that, my first real test was my own wardrobe, and that's how the jeans bug turned up. That one wrong tag sent me from "it works on the demo photos" to measuring accuracy properly, and it was the most useful thing that happened all week. I've also run the full shopping flow live, with the app on GitHub Pages, the server on Render and real Google Shopping results from SerpApi.
Prize Categories
Best use of Gemma: Gemma 3 runs entirely in the browser and powers the budget chat. It plans searches from the user's wardrobe gaps and explains each pick.
Best use of Render: the shopping server runs on Render from a one-click blueprint (render.yaml) and keeps the SerpApi key off users' devices.
Best use of SerpApi: Google Shopping results with a price cap turn wardrobe gaps into real products within budget.
Top comments (0)