This is a submission for the Gemma 4 Challenge: Build with Gemma 4
What I Built
BugLens is an AI-powered screenshot debugger for developers. You upload a screenshot of any bug, error message, or broken UI, and Gemma 4 instantly analyzes it and returns a structured diagnosis — including the error type, severity, root cause, affected area, a step-by-step fix, and prevention tips.
No more copy-pasting stack traces or describing your screen to a chatbot. Just screenshot and drop it in.
Demo
Code
BugLens 🔬
An AI-powered screenshot debugger built with Gemma 4. Upload a screenshot of any bug, error message, or broken UI — BugLens analyzes it and returns a structured diagnosis in seconds.
Built for the Gemma 4 Challenge.
What it does
Drop in any error screenshot and BugLens returns:
- Error Type — what kind of bug it is
- Severity — High / Medium / Low
- Root Cause — why it's happening
- Affected Area — what part of the code is involved
- How to Fix — step-by-step solution with code examples
- Prevention — how to avoid it in the future
How it works
BugLens sends your screenshot directly to Gemma 4 31B Dense (gemma-4-31b-it) via the Google AI Studio API. The model reads the image, reasons about the error, and returns a structured analysis parsed into clean UI cards.
Getting started
- Clone the repo
- Open
index.htmlin your…
How I Used Gemma 4
BugLens is powered by Gemma 4 31B Dense (gemma-4-31b-it) via the Google AI Studio API. I chose the 31B Dense model because visual debugging demands strong reasoning — the model needs to read error text in screenshots, understand code context, and produce actionable output all in one pass.
Gemma 4's multimodal capability is the entire backbone of the app. Every analysis request sends the screenshot directly to the model as an inline image alongside a structured prompt, and the response is parsed into categorized cards in the UI. Without Gemma 4's vision and reasoning power, the app simply doesn't work — it's not a wrapper, it's the engine.