DEV Community: SRG-Cy

StyleCast: an AI outfit planner that runs on your phone

SRG-Cy — Sat, 17 Oct 2026 13:59:36 +0000

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

SRG-Cy / StyleCast

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…

View on GitHub

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.

LevelOut: an anime-style System that levels you up at a real skill, outside

SRG-Cy — Sun, 11 Oct 2026 12:13:23 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

LevelOut turns learning a real skill into a leveling anime.

You know the trope: a weak hero gets chosen by a mysterious System that hands out daily quests, and every completed quest makes them stronger. I wanted that feeling for real life, with the quests happening outside.

Pick a skill. Football, cricket bowling, badminton footwork, skipping, a 5K, or type anything.
Tell the System what you have: a wall, stairs, water bottles, a ball, or nothing at all.
Take the trial. The open-weight model writes 6 questions for your skill, including an injury check.
Awaken. You get a rank (E to S), a title like E-Rank Striker, five stats (STR / AGI / VIT / SKL / FOC), a 30-day goal, a rank-up test and a weekly plan.
Daily Quest. Warm-up, drills, cool-down, bonus. Every drill works alone, outdoors, with only the things you said you have.
Pocket your phone. Accepting the quest starts a timer and tells you to go.
Report back. Rate each drill Easy / Just right / Hard / Hurt / Skipped. You earn XP, stats and levels, and the next quest adapts. Drills that hurt are replaced with gentler ones for a different body part.

To rank up you have to pass a real-world test the System set for you, such as "juggle 25 times in a row". The game only moves when you do.

Demo

🔗 Try it live: https://levelout.onrender.com

Code

SRG-Cy / LevelOut

⚔️ LevelOut

Train outside. Level up for real.

LevelOut turns learning a real skill into a leveling anime. An open-weight AI model plays the System: it tests you, assigns you a rank, and gives you a Daily Quest of outdoor drills you can do alone, with little or no equipment. Complete it, report back, and you gain XP, stats and levels, while the System adapts tomorrow's quest to how you actually did.

Built for the MLH × DEV Hacktoberfest Open-Source AI Challenge, Week 1: "Touch Grass".

How it plays

Accept the System. "You have met the conditions to become a Player."
Choose your path. Pick any skill (football, cricket bowling, badminton footwork, skipping, a 5K, parkour, anything) and tick what you have: a wall, stairs, water bottles, a ball, a bench, or nothing at all.
The trial. The model writes 6 assessment questions for your skill, including…

View on GitHub

How I Built It

LevelOut runs an open-weight model, and it can run that model locally too.

Open-weight model: the System runs on gpt-oss-120b, an open-weight model (Apache 2.0), served by Groq through its OpenAI-compatible API and called with the open-source huggingface_hub client. Any open model works: Qwen through Hugging Face Inference Providers is built in, and Llama, Gemma or Mistral are one environment variable away.
Local inference (optional): set LLM_BASE_URL to an Ollama, llama.cpp or vLLM server and the same app runs entirely on weights you host yourself, with no code changes.

The open model isn't decoration. It is the game master. Without it there is no trial, no rank, no quest and no adaptation. It does three jobs, each with a strict JSON contract:

Step	What the open model does
Trial	Writes level-check questions specific to the chosen skill
Awakening	Rates the Player honestly (most people start at E or D), sets stats, a 30-day goal, a rank-up test and a 7-day plan
Daily Quest	Designs drills from the Player's own equipment, then adapts them using the last report. Drills that hurt are replaced.

The game maths (XP curve, levels, rank gates, streaks, penalty quests) is deterministic JavaScript in the browser, so the model can't "inflate" your progress. You only level up by doing the drills.

Why Does Open Innovation Matter?

Your training data stays yours. Fitness and injury answers are personal. Because the System is an open-weight model, you can run the exact same app on your own machine or server with LLM_BASE_URL, and nothing leaves it.
No lock-in. The model is a setting, not a dependency: gpt-oss today, Qwen, Llama or Gemma tomorrow, on any host or none.
Anyone can audit the coach. The prompts (prompts.py) and the model weights are both public, so you can see exactly why the System gave you a drill, and change it if it's wrong for you.
Free to run. Open models on free hosts, or on your own hardware, mean a student can use a personal coach without a subscription.

Prize Categories

Render. LevelOut is deployed on Render's free tier from a render.yaml Blueprint in the repo, so anyone can fork it and get their own System running in a few clicks: Render reads the build and start commands, pins Python, sets the open-model settings, and only asks you to paste your own API key, which never touches the repo. Two choices were shaped by running it as a public Render service: a 120-second gunicorn timeout, because reasoning models like gpt-oss can think for a while before answering, and a per-visitor limit on AI calls so a public link can't drain the key's free quota.

Built with Flask, vanilla JS, and the open-weight gpt-oss-120b model served by Groq. MIT licensed.