<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Christian Boateng</title>
    <description>The latest articles on DEV Community by Christian Boateng (@christian_boateng_1a9bab9).</description>
    <link>https://dev.to/christian_boateng_1a9bab9</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3089761%2F7baacfaf-e1a3-47e4-bf31-82648571ab99.png</url>
      <title>DEV Community: Christian Boateng</title>
      <link>https://dev.to/christian_boateng_1a9bab9</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/christian_boateng_1a9bab9"/>
    <language>en</language>
    <item>
      <title>Stop Describing Your Bugs — Just Screenshot Them</title>
      <dc:creator>Christian Boateng</dc:creator>
      <pubDate>Sat, 23 May 2026 13:52:40 +0000</pubDate>
      <link>https://dev.to/christian_boateng_1a9bab9/stop-describing-your-bugs-just-screenshot-them-5a35</link>
      <guid>https://dev.to/christian_boateng_1a9bab9/stop-describing-your-bugs-just-screenshot-them-5a35</guid>
      <description>&lt;p&gt;This is a submission for the Gemma 4 Challenge: Build with Gemma 4&lt;/p&gt;

&lt;p&gt;What I Built&lt;br&gt;
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.&lt;br&gt;
No more copy-pasting stack traces or describing your screen to a chatbot. Just screenshot and drop it in.&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://chris-code-tech.github.io/buglens/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;chris-code-tech.github.io&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;Code&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Chris-code-tech" rel="noopener noreferrer"&gt;
        Chris-code-tech
      &lt;/a&gt; / &lt;a href="https://github.com/Chris-code-tech/buglens" rel="noopener noreferrer"&gt;
        buglens
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      My Gemma 4 challenge project
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;BugLens 🔬&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Built for the &lt;a href="https://dev.to/challenges/google-gemma-2026-05-06" rel="nofollow"&gt;Gemma 4 Challenge&lt;/a&gt;.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What it does&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Drop in any error screenshot and BugLens returns:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Error Type&lt;/strong&gt; — what kind of bug it is&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Severity&lt;/strong&gt; — High / Medium / Low&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Root Cause&lt;/strong&gt; — why it's happening&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Affected Area&lt;/strong&gt; — what part of the code is involved&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;How to Fix&lt;/strong&gt; — step-by-step solution with code examples&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prevention&lt;/strong&gt; — how to avoid it in the future&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;How it works&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;BugLens sends your screenshot directly to &lt;strong&gt;Gemma 4 31B Dense&lt;/strong&gt; (&lt;code&gt;gemma-4-31b-it&lt;/code&gt;) 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.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Getting started&lt;/h2&gt;

&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Clone the repo&lt;/li&gt;
&lt;li&gt;Open &lt;code&gt;index.html&lt;/code&gt; in your…&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Chris-code-tech/buglens" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;How I Used Gemma 4&lt;br&gt;
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.&lt;br&gt;
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.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gemmachallenge</category>
      <category>gemma</category>
    </item>
  </channel>
</rss>
