DEV Community: Shreyash Chaugule

🔍 Explain This Screenshot — Your AI Debugging Friend

Shreyash Chaugule — Sat, 03 Oct 2026 20:59:43 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

Developers often face errors that are much easier to show than explain.

You get a confusing terminal error, a stack trace, a cloud-console warning, or an IDE problem — and then spend time copying text, explaining context, and figuring out what went wrong.

So I built Explain This Screenshot — a privacy-first AI developer assistant that lets you simply take a screenshot and ask your AI friend to figure it out.

📸 Screenshot → 🧠 Understand → 🛠️ Fix

Upload a screenshot of a technical problem and the application analyzes it to provide:

🔍 What I see — understands the screenshot and identifies relevant information
❌ What's wrong — identifies the likely problem
🧠 Why it happened — investigates the possible root cause
🛠️ How to fix it — provides practical solutions
💻 Try this — generates commands or code when appropriate
🧑‍🏫 Beginner explanation — explains the problem in simple language
⚠️ Warnings — highlights potentially risky actions
🎯 Confidence — indicates how confident the system is in its diagnosis

The project is built for developers, students, and anyone who has ever stared at an error message and thought: "What does this even mean?"

The "friend" I'm building for is essentially the developer who needs help debugging without having to perfectly explain the problem first.

Demo

🎥 Video Demo:
currently in development phrase

🌐 Live Demo:

ShreyashChaugule-github / Plugin

This project is build for hacktoberfest 2026 Dev Challenge

Explain This Screenshot

Tagline

Understand the error. Fix the problem.

Explain This Screenshot is a privacy-first AI developer assistant that allows a user to upload a screenshot of a technical problem and receive a clear explanation and actionable solution. It turns that screenshot into an understandable diagnosis and practical fix.

Why Open Innovation?

Screenshots may contain source code, API keys, internal infrastructure, customer information, internal dashboards, logs, and private development environments.

Local inference provides:

Privacy
Offline capability
Model choice
Model swapping
Experimentation
No per-request cloud API cost

Features

Fast Mode: Get a quick structured explanation of the error from a single vision model call.
Deep Analysis: A multi-agent orchestrated pipeline to verify root causes, simplify explanations, and verify the generated solution.
Privacy-first: No database, no user accounts, no cloud storage, and no permanent screenshot storage.
Model Swappable: Bring your own open-weight vision model via Ollama.
Offline…

View on GitHub

The core demo flow is:

Upload Screenshot
       ↓
Fast Explanation
       ↓
Deep Analysis
       ↓
5 Specialized AI Agents
       ↓
Verified Solution

Code

💻 GitHub Repository:

ShreyashChaugule-github / Plugin

This project is build for hacktoberfest 2026 Dev Challenge

Explain This Screenshot

Tagline

Understand the error. Fix the problem.

Why Open Innovation?

Screenshots may contain source code, API keys, internal infrastructure, customer information, internal dashboards, logs, and private development environments.

Local inference provides:

Privacy
Offline capability
Model choice
Model swapping
Experimentation
No per-request cloud API cost

Features

Fast Mode: Get a quick structured explanation of the error from a single vision model call.
Deep Analysis: A multi-agent orchestrated pipeline to verify root causes, simplify explanations, and verify the generated solution.
Privacy-first: No database, no user accounts, no cloud storage, and no permanent screenshot storage.
Model Swappable: Bring your own open-weight vision model via Ollama.
Offline…

View on GitHub

The project is open source and includes the frontend, backend, AI provider integration, agent orchestration, prompts, tests, and documentation.

How I Built It

The most important design decision was to not build another application that simply sends everything to a closed AI API.

I wanted the AI to be:

Open-weight
Local
Replaceable
Privacy-conscious
Useful without requiring an account
Usable without a database

🧠 Open-Weight Vision AI

The project uses an open-weight vision-language model through Ollama.

The model can understand screenshots containing things like:

Terminal errors
Source code
Stack traces
IDE warnings
Docker output
Cloud console errors
Configuration problems
API responses

The model is configurable, so the application isn't permanently tied to one model.

🖥️ Local Inference

The architecture looks like this:

┌──────────────────────┐
│    React Frontend    │
│                      │
│ Upload Screenshot    │
└──────────┬───────────┘
           │
           ↓
┌──────────────────────┐
│ Node.js + Express    │
│                      │
│ Agent Orchestrator   │
└──────────┬───────────┘
           │
           ↓
┌────────────────────────────┐
│      Ollama                 │
│                            │
│ Open-weight Vision Model   │
└────────────────────────────┘

The core inference can therefore happen on the user's own machine.

🤖 The Multi-Agent Pipeline

For the Deep Analysis mode, I split the problem into five specialized AI agents.

                 Screenshot
                     │
                     ▼
          ┌─────────────────────┐
          │ Screenshot Analyzer │
          └──────────┬──────────┘
                     │
                     ▼
          ┌─────────────────────┐
          │ Error Investigator  │
          └──────────┬──────────┘
                     │
                     ▼
          ┌─────────────────────┐
          │ Solution Engineer   │
          └──────────┬──────────┘
                     │
                     ▼
          ┌─────────────────────┐
          │ Beginner Explainer  │
          └──────────┬──────────┘
                     │
                     ▼
          ┌─────────────────────┐
          │ Solution Verifier   │
          └──────────┬──────────┘
                     │
                     ▼
              Verified Fix

1. Screenshot Analyzer

First, the system determines what is actually visible in the screenshot.

It identifies things such as the error, programming language, code, terminal output, and relevant context.

2. Error Investigator

The next agent investigates the likely root cause.

It separates what was directly observed from what is inferred or uncertain.

3. Solution Engineer

This agent generates practical fixes, commands, code, and alternatives.

The application never automatically executes AI-generated commands.

4. Beginner Explainer

Technical debugging can be intimidating, especially for students and newer developers.

This agent converts the diagnosis into a simple explanation of what happened and why.

5. Solution Verifier

Finally, another agent reviews the proposed solution.

It checks whether the solution actually addresses the observed problem, identifies unsupported assumptions, and flags potentially dangerous actions.

This gives the final response an additional verification step rather than blindly displaying the first AI-generated answer.

⚡ Fast Mode vs 🧠 Deep Analysis

I also wanted the application to be useful for both quick questions and deeper debugging.

Fast Mode

Screenshot
    ↓
Vision Model
    ↓
Quick Explanation

Useful when you just want to understand an error quickly.

Deep Analysis

Screenshot
    ↓
5 Specialized Agents
    ↓
Verified Solution

The UI shows the progress of each stage:

✓ Screenshot analyzed
✓ Root cause investigated
✓ Solution generated
✓ Explanation simplified
✓ Solution verified

🔐 Privacy by Design

Screenshots aren't always harmless.

A developer's screenshot might contain:

Source code
API keys
Internal URLs
Customer information
Cloud infrastructure
Logs
Configuration
Private development environments

That's why I designed the project around local inference.

There is:

❌ No authentication
❌ No database
❌ No permanent screenshot storage
❌ No required closed AI API
✅ Local AI inference
✅ Configurable open-weight model
✅ Session-only follow-up context

The goal isn't to claim that local AI makes data automatically "100% secure." Instead, it gives developers the option to keep their screenshots and inference within their own environment.

🛡️ Treating Screenshots as Untrusted Input

Another important part of the implementation is AI safety.

A screenshot might contain text that looks like an instruction or command.

The system explicitly treats everything inside the screenshot as untrusted data to analyze, not instructions for the AI to follow.

The application also does not:

Automatically execute commands
Automatically modify the user's system
Execute code from screenshots
Treat instructions inside screenshots as system instructions

This was especially important because the project is designed to analyze developer environments where screenshots can contain commands and potentially sensitive information.

🧰 Tech Stack

Frontend

React
TypeScript
Vite
Tailwind CSS
shadcn/ui
Lucide React

Backend

Node.js
TypeScript
Express

AI

Ollama
Open-weight Vision-Language Model
Custom multi-agent orchestration

Architecture

The five agents are implemented as specialized modules inside the Node.js application rather than separate microservices.

This keeps the project lightweight and easy to run locally.

Why Does Open Innovation Matter?

This is probably the most important part of the project for me.

A closed AI API could certainly analyze a screenshot.

But using open-weight AI and local inference makes a different architecture possible.

Instead of:

Screenshot
    ↓
Your Application
    ↓
Closed AI API
    ↓
External Cloud

the project can work like:

Screenshot
    ↓
Your Application
    ↓
Ollama
    ↓
Open-weight Model
    ↓
Your Computer

That changes what developers can experiment with.

🔓 Model Freedom

The application can be configured to use different compatible models.

The AI provider isn't deeply embedded throughout the application.

🔒 Local Processing

Developers can run inference locally instead of automatically sending screenshots to an external AI provider.

This is particularly useful for screenshots containing source code, logs, infrastructure information, or other sensitive development context.

🧪 Experimentation

Because the model and agent prompts are accessible, developers can modify the system itself.

Want to change how root-cause analysis works?

Modify the investigator.

Want a different explanation style?

Modify the beginner explainer.

Want another verification step?

Add another agent.

💰 Different Cost Model

There is no per-request charge from a hosted AI API for local inference.

There are still hardware, electricity, and model-running costs, of course.

🌐 Offline Potential

Once the application dependencies and model have been downloaded, the core analysis workflow can operate without an internet connection.

💡 What Open AI Made Possible Here

The biggest thing open innovation enabled wasn't simply "using a free model."

It allowed me to make the AI layer part of the application architecture.

The model can be swapped.

The prompts can be inspected.

The agents can be modified.

The inference can run locally.

The application doesn't need a database or user account.

And developers can take the project, change it, and build something completely different from it.

That's the part of open AI that I wanted to explore with this project.

My Agent Session

Currently used my local model this for short time but will be working on Gemma 4 model and build for friend

Prize Categories

Best Use of ElevenLabs
Best Use of Tinker

Best Use of Backboard
Best Use of Render

🚀 What's Next?

There are several directions I'd like to explore:

Support more open-weight vision models
Add more specialized debugging agents
Improve structured output reliability
Add more language/framework-specific diagnosis
Improve local model performance
Add optional screenshot redaction
Add richer developer-tool integrations
Support more complex multi-screenshot debugging workflows

❤️ Final Thought

Developers don't always need another chatbot.

Sometimes they just need to show someone the problem and hear:

"I see what's happening. Here's why. Here's what you can try."

That's what I wanted Explain This Screenshot to be — a small, local, open AI-powered debugging friend.

📸 Show it the problem.
🧠 Let it understand.
🛠️ Get a fix.

Built for the developers who have ever taken a screenshot and said: "Can someone tell me what's wrong here?"

ElectionIQ: From Prompt Wars Entry to Production-Ready Civic Tech Platform

Shreyash Chaugule — Sun, 07 Jun 2026 17:55:03 +0000

What I Built

ElectionIQ is a state-of-the-art AI-powered educational assistant designed to democratize election literacy for Indian citizens, first-time voters, and candidates. It simplifies complex electoral processes, timelines, and legal forms into an interactive, easy-to-follow digital journey.

The platform combines cutting-edge AI (Google Gemini 2.5 Flash) with a high-fidelity React dashboard, delivering real-time guidance on voter registration, candidate nomination, electoral procedures, and Indian constitutional law—all in 6+ languages including English, Hindi, Marathi, Bengali, Tamil, and Telugu.

Project Repository: github.com/ShreyashChaugule-github/ElectionIQ

Demo

🔗 Live Application

ElectionIQ Live Demo

📸 Screenshots

Dashboard & Exploration

Real-time election pulse monitoring with live statistics

Interactive Roadmaps

Step-by-step guidance for voter registration (Form 6, 6A, 7, 8, 2B, etc.)

AI Assistant in Action

Multilingual AI assistant with thinking animations and context-aware responses

Gamified Learning Quiz

Interactive knowledge checks with confetti celebrations for high-scoring users

The Comeback Story

Where We Started 🚀

ElectionIQ began as an ambitious Prompt Wars Challenge 2 submission with a clear vision but unfinished execution:

✅ What Worked: Core concept validated, Gemini AI integration functional, basic roadmaps structured
❌ What Was Missing:
- Production-grade security (frontend exposed API keys directly to Gemini)
- Incomplete UI/UX polish (glassmorphism design incomplete, animations missing)
- Limited language support (only English, no regional language support)
- No gamification elements (no quiz, no engagement mechanics)
- Unoptimized performance (no caching, no offline functionality)
- Minimal testing (no test suite)
- Incomplete documentation

What Changed in This Revival 🔄

1. Secured the Architecture 🛡️

Implemented Backend Proxy Pattern with Node.js/Express
API keys now handled server-side (zero client-side exposure)
Added prompt sanitization & constitutional context injection
Implemented rate-limiting & high-demand error handling (503 resilience)

2. Polish & Design Elevation ✨

Complete UI redesign with premium glassmorphism design
Added "thinking" animations to AI responses
Implemented canvas-confetti celebrations for quiz achievements
Responsive layouts from mobile → 4K displays
Full WCAG accessibility compliance with semantic HTML & ARIA labels.

3. Multilingual Expansion 🌐

Extended from English-only to 6 languages:
- English, Hindi, Marathi, Bengali, Tamil, Telugu
Context-aware translations maintaining Election Commission terminology accuracy

4. Gamified Learning System 🏆

Built 20+ professionally curated quiz questions on Indian democracy
Interactive feedback mechanism (every wrong answer → learning explanation)
Celebration effects for users scoring 60%+
Reinforcement learning flow (not just testing, but teaching)

5. Enhanced Features

Live Dashboard: Real-time election pulse with sub-second synchronization
Form Roadmaps: Dynamic step-by-step guidance for every major election form
First Vote Journey: Specialized curated path for first-time voters
Bot Activity Tracking: Status monitoring for turnout & misinformation detection bots

6. Quality Assurance ✅

Added comprehensive test suite with Vitest
Generated coverage reports
Validated all election data against 2024 ECI guidelines
Cross-referenced constitutional articles with official sources

7. Developer Experience

Created .env.example with all required configuration
Documented full setup with prerequisite checks
Added architecture diagrams & approach documentation
Production-ready error handling & logging

My Experience with GitHub Copilot

GitHub Copilot was instrumental in accelerating the revival of ElectionIQ from rough submission to production-ready platform.

How Copilot Helped 🤖

1. Rapid Component Development

Used Copilot to scaffold React components with proper hooks patterns
Generated initial code for Chat UI, Dashboard, Roadmap components
Cut component development time by ~40% through intelligent suggestions

2. Complex Logic Implementation

Backend Proxy Pattern: Copilot suggested secure API wrapper patterns and error handling strategies
Quiz Logic: Generated the explanation state machine and feedback flow
Data Engine: Helped structure electionData.js with efficient lookup patterns

3. Security Hardening

Copilot suggested best practices for sanitizing prompts before Gemini API calls
Generated validation functions for user input
Provided template for secure environment variable handling

4. Testing & Quality

Generated Vitest test cases for critical components
Created mock data structures for testing AI responses
Suggested accessibility checks (ARIA labels, semantic HTML)

5. Documentation

Auto-generated code comments explaining complex functions
Created comprehensive README sections with setup instructions
Wrote inline documentation for the Backend Proxy Pattern

6. Optimization

Suggested performance improvements (memoization, lazy loading)
Generated CSS for animations and transitions
Recommended caching strategies for roadmap data

The Multiplier Effect

Without Copilot, the "polish phase" would have added 2-3 weeks of manual coding. Copilot enabled us to:

✅ Maintain code quality while moving fast
✅ Focus on problem-solving, not boilerplate
✅ Implement security best practices consistently
✅ Add comprehensive testing without burnout

Result: What started as an incomplete challenge submission is now a production-grade civic tech platform ready to serve thousands of Indian voters.

Tech Stack

Frontend: React 18, Vite, Vanilla CSS (Glassmorphism Design)
Backend: Node.js, Express (Secure API Proxy)
AI Engine: Google Gemini 2.5 Flash API
Animations: CSS Keyframes, Canvas Confetti
Testing: Vitest
Deployment: [YOUR_DEPLOYMENT_PLATFORM - e.g., Vercel, Firebase Hosting]

- Authentication: Firebase

Key Metrics & Impact

Language Support: 6 languages (Indian regional languages included)
Quiz Questions: 20+ professionally curated questions
Election Forms Covered: 6 major forms (Form 6, 6A, 7, 8, 2B, etc.)
Target Audience: Indian citizens, first-time voters, candidates
Accessibility: WCAG-compliant, responsive design (mobile → 4K)

- Performance: Sub-second dashboard synchronization

Getting Started (For Others)

# Clone the repository
git clone https://github.com/ShreyashChaugule-github/ElectionIQ.git
cd ElectionIQ

# Install dependencies
npm install
cd server && npm install && cd ..

# Set up environment variables
cp .env.example .env
# Fill in: GOOGLE_GEMINI_API_KEY, VITE_FIREBASE_API_KEY

# Run development servers
# Terminal 1:
npm run server

# Terminal 2:
npm run dev

# Test the application
npm test
npm run coverage

Why This Matters

Election literacy is critical for democratic participation. ElectionIQ removes barriers to understanding India's electoral processes by providing:

✅ Accurate, constitution-backed information
✅ Accessible interfaces in regional languages
✅ Interactive learning, not passive information dumps
✅ Secure, privacy-first architecture This project exemplifies how AI + good design + security can serve civic tech at scale.

Credits & Learnings

My Journey:

Started as a Prompt Wars Challenge 2 submission
Realized the potential went beyond the competition
Used GitHub Copilot to rapidly iterate and improve
Focused on security, accessibility, and user experience
Finished what I started! 🎉 Team: [Shreyash Chaugule]

Live Demo: [https://electioniq-409093236435.us-central1.run.app]

Repository: github.com/ShreyashChaugule-github/ElectionIQ

Thanks for reading! If you're building civic tech, educational platforms, or AI-powered solutions, I'd love to hear your thoughts in the comments! 👇