{"slug": "stylecast-an-ai-outfit-planner-that-runs-on-your-phone", "title": "StyleCast: an AI outfit planner that runs on your phone", "summary": "A developer built StyleCast, a static, MIT-licensed browser app that photographs a wardrobe once, tags each item with an in-browser CLIP vision model, and generates daily outfits from the user's own clothes based on local weather and occasion, with on-device Gemma planning budget shopping searches. After replacing a Python/Ollama server with in-browser inference, the developer added a 272-photo scoring harness to CI that raised phone clothing-type accuracy from 55% to 77% and category accuracy from 90% to 93%, at the cost of a roughly 300 MB first-load model download.", "body_md": "*This is a submission for the [Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle](https://dev.to/challenges/hacktoberfest-week2-2026-10-12)*\n\nEvery 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.\n\nStyleCast does the guessing for me:\n\n📸 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.\n\n🌦️ 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.\n\n🧺 It remembers. No wearing the same shirt three days running, and anything marked \"in the wash\" stays out.\n\n🕳️ It spots gaps. \"Nothing waterproof for days like today.\"\n\n🛍️ 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.\n\nTry it: [https://srg-cy.github.io/StyleCast/](https://srg-cy.github.io/StyleCast/) (works best in Chrome on a laptop or Android; it installs to your home screen like an app).\n\nPhotograph your wardrobe once. Every morning, get an outfit from your own clothes that fits the real forecast.\n\nBuilt for the DEV Hacktoberfest 2026 Open-Source AI Challenge, Week 2 (\"Side Hustle\").\n\nToday's outfit stands in a fitting-room mirror under the forecast; the wardrobe hangs on rails, one per category.\n\nIt'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.\n\n**Version 1 was a dead end**\n\nOn 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.\n\nSo on day two I threw it away and moved the AI into the browser:\n\nCLIP 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.\n\n**Then my jeans became a jacket**\n\nThe first thing I photographed on my own phone was a pair of jeans. StyleCast filed them under jackets.\n\nI 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:\n\n**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\".\n\n**The centre crop**. CLIP crops to a square, which cut tall photos like jeans in half. Photos are now padded to a square instead.\n\n**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.\n\nWith all three fixed, on the same 272 photos:\n\n📱 Phones: right clothing type went from 55% to 77%, and right category (top, bottom, shoes...) from 90% to 93%.\n\n💻 Laptops: right clothing type went from 72% to 77%, and right category from 92% to 93%.\n\nThe cost: phones now download about 300 MB the first time instead of about 150 MB. The browser keeps it after that.\n\n**The budget chat: Gemma, Render and SerpApi**\n\nAsk \"I have €50, what should I buy?\" and this happens:\n\n**Gemma**(on your device) reads your wardrobe and the gaps the rules found, and plans up to three searches.\n\nOnly 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.\n\nRules pick one product per search so the total stays within budget, and Gemma writes a sentence on why each pick fits.\n\nIf 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.\n\nOne 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.\n\nStyleCast is only a viable side hustle because the models are open.\n\n🔒 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.\n\n💸 €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.\n\n✈️ Offline. Once the model is downloaded, tagging and outfit picks work without a connection. The last forecast is saved for mornings with bad signal.\n\n🔧 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.\n\n🔁 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.\n\nTransformers.js, ONNX Runtime Web, CLIP, Gemma and Open-Meteo did the heavy lifting. My part was gluing them together for one specific morning problem.\n\nMy 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.\n\nBefore 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.\n\n**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.\n\n**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.\n\n**Best use of SerpApi**: Google Shopping results with a price cap turn wardrobe gaps into real products within budget.", "url": "https://wpnews.pro/news/stylecast-an-ai-outfit-planner-that-runs-on-your-phone", "canonical_source": "https://dev.to/srgcy/stylecast-an-ai-outfit-planner-that-runs-on-your-phone-414g", "published_at": "2026-10-17 13:59:36+00:00", "updated_at": "2026-10-17 14:05:11.368369+00:00", "lang": "en", "topics": ["artificial-intelligence", "computer-vision", "ai-tools", "ai-products", "generative-ai"], "entities": ["StyleCast", "CLIP", "Gemma", "Ollama", "Qwen2.5-VL", "SerpApi", "Render", "DEV Hacktoberfest"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/stylecast-an-ai-outfit-planner-that-runs-on-your-phone", "markdown": "https://wpnews.pro/news/stylecast-an-ai-outfit-planner-that-runs-on-your-phone.md", "text": "https://wpnews.pro/news/stylecast-an-ai-outfit-planner-that-runs-on-your-phone.txt", "jsonld": "https://wpnews.pro/news/stylecast-an-ai-outfit-planner-that-runs-on-your-phone.jsonld"}}