DEV Community: Samar Shetye

CodeMap AI — Helping My Friend Understand Unfamiliar Codebases

Samar Shetye — Sat, 03 Oct 2026 18:11:25 +0000

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

What I Built

When developers join an unfamiliar project, one of the first challenges is understanding how everything fits together.
You open the repository and see something like:
frontend/ backend/ components/ services/ routes/ controllers/ database/ utils/
Then the real questions begin:

Where does the application start?
Which component calls this API?
How does data flow from the frontend to the database?
What files are responsible for authentication?
If I change this file, what else could be affected?

I built CodeMap AI for a friend who was struggling with exactly this problem.
Instead of making them manually explore an unfamiliar repository, CodeMap AI analyzes the project and turns its structure and relationships into an interactive visual codebase map.
I had my friend try CodeMap AI on an unfamiliar project to see whether the visual map and AI explanations actually made the codebase easier to understand.
Using the visual map made it easier for him to understand how the different parts of the project are connected. Instead of opening files one by one, the overall structure could be understood first, followed by the AI explanation for specific parts of the code.

How it works:
The user provides a project/repository:
GitHub Repository
↓
CodeMap AI
↓
Code Analysis
↓
Dependency & Relationship Detection
↓
Interactive Codebase Map
↓
AI-powered explanations

The resulting map lets the user visually explore relationships between different parts of the application.

Demo

Youtube video:

Code

GitHub Repository:

Samar-365 / CodeMap

CodeMap AI is an AI-powered application that helps developers understand unfamiliar software projects by automatically analyzing a codebase and generating an interactive visual map of its architecture, components, dependencies, and data flow.

CodeMap AI

An AI-powered visual codebase navigator for understanding unfamiliar projects.

Problem

Joining a new engineering team, jumping into an open-source project, or inheriting legacy code often feels overwhelming:

Spaghetti Dependencies: Developers spend hours or days manually following imports, function definitions, and API calls across dozens of folders.
Outdated Documentation: Architecture diagrams in READMEs or wikis are frequently stale, incomplete, or missing entirely.
Fear of Breaking Changes: Modifying a utility, route, or model is risky when you cannot clearly visualize all downstream consumers.
Privacy and IP Concerns: Sending proprietary codebases to third-party cloud LLMs violates corporate NDAs, security compliance policies, and incurs recurring API costs.

Solution

CodeMap AI transforms complex, unfamiliar repositories into an interactive, multi-tier architectural map and provides a context-grounded local AI assistant:

Automatic Multi-Tier Layout: Categorizes files into clean architectural layers (Frontend UI, API Endpoints, Services, Data…

View on GitHub

How I Built It

CodeMap AI combines open-weight AI, local semantic search, and code analysis into one pipeline:

Local LLM via Ollama
I use Ollama to run open-weight models entirely on the user's machine. The default model is Gemma 2 (2B) — small enough to run on a laptop CPU, but capable enough to produce clear architectural explanations.
You can swap it for qwen3:4b, llama3.2, or phi4-mini depending on your hardware, all via an environment variable. No API key, no subscription, no cost.
Semantic Embeddings via SentenceTransformers
Every code chunk is embedded using all-MiniLM-L6-v2 — a lightweight, locally-run embedding model from Hugging Face. These embeddings are indexed in FAISS for sub-millisecond vector search.
When you ask a question, the RAG pipeline retrieves the most semantically relevant code chunks from your repository and injects them directly into the LLM's prompt context, making every answer grounded in your actual codebase.
Multi-language Code Analysis
The backend performs multi-language code analysis across Python, JavaScript, TypeScript, JSX/TSX, Java, JSON, YAML, and SQL files using Python's native ast module for Python code and custom tokenization/parsing logic for other supported file types. It extracts:
Imports and dependencies
Class and function definitions
API route handlers (@app.get, Express routes, etc.)
Frontend network calls (fetch, axios)
Database schema definitions
These are then resolved into a directed dependency graph that feeds both the React Flow visualization and the RAG retrieval pipeline.

Tech Stack:

Frontend: React 18 + Vite + React Flow (Dagre)
Backend: Python 3.11 + FastAPI + Uvicorn
AST Parsing: Python ast module + regex tokenizers
Vector Search: FAISS + sentence-transformers
Embeddings: all-MiniLM-L6-v2 (local, free)
Local LLM: Ollama — qwen3:4b, gemma2:2b, llama3.2
Graph Layout: Dagre (hierarchical DAG algorithm)

Why Does Open Innovation Matter?

One of the most important aspects of CodeMap AI is that the application deals with source code.
A developer may want to understand a private project, a college project, or an internal codebase. Sending an entire repository to a closed AI service isn't always desirable.
Using open-source/open-weight AI gives the project more flexibility around how the AI is run and where the source code is processed.
For CodeMap AI, this means the system can be designed around:

Open-weight models
Local inference
Self-hosted AI
Replaceable models
Greater control over source-code processing

The goal isn't simply to add AI to a developer tool.
The goal is to make AI-based codebase understanding possible while giving developers more control over the models and infrastructure involved.
In my implementation, the AI inference can run locally, meaning the source code doesn't have to be sent to a closed third-party AI provider for analysis.

Prize Categories

Gemma — Best Use of Gemma
I used Gemma, Google's open-weight model, as a core part of CodeMap AI's codebase understanding and AI-powered explanation system.
ElevenLabs — Best Use of ElevenLabs
I used ElevenLabs to generate the voice-over narration for my CodeMap AI demo video.
The voice-over walks through the problem CodeMap AI solves, demonstrates the application's workflow, and explains how the visual codebase map and AI-powered analysis work.

Breaking the Language Barrier When Truth Matters Most

Samar Shetye — Sun, 15 Mar 2026 20:37:37 +0000

When global conflicts ignite, the first casualty is often the truth. Local propaganda machines spin narratives, external news sites are blocked, and critical updates from international journalists remain trapped behind a massive barrier: language.

Before I started coding LingualNews, my "blank canvas" was shaped by this massive information asymmetry. I needed to build a solution using a fast frontend (React/Vite) wrapped around a tight set of APIs (Lingo.dev and Groq) with one core mission: What if anyone, anywhere, could paste a URL from any global news outlet and instantly read—or listen to it—in their native tongue?

The problem I am solving is access to unfiltered reality. LingualNews makes the world a better place by ensuring that truth is never paywalled by your geographic location or the language you happen to speak.

The High-Level Architecture
Think of LingualNews as a "Smart Proxy Funnel." You input a foreign news URL. The React client dynamically bypasses CORS constraints through fallback proxies. The raw chaotic HTML is cleaned by a heuristic DOM scraper, stripping away ads and noise. The isolated text is then pushed into a dual-engine AI pipeline: Lingo.dev handles the precise translation, while Groq (LLaMA 3.1) generates concise summaries and acts as a translation fallback. Finally, Native Web Speech APIs vocalize the translated text.

Where the "Magic" Happens
The real magic lives in scraperService.js and translationService.js. These modules transform chaotic, unstructured, ad-riddled foreign websites into clean, localized, readable components in milliseconds.

If I had to isolate the biggest technical breakthrough in the app, it's just a few lines of code in the translation layer. During a geopolitical crisis, traffic spikes. APIs fail. If my primary translation API drops, my app cannot break.

Here is my breakthrough, explained line-by-line:

javascript

} catch (err) {
      console.warn('Lingo.dev translation failed, falling back to Groq:', err.message);
      // Fallback to Groq
      const { translateWithGroq } = await import('./aiService.js');
      return await 
      translateWithGroq(text, targetLang);
}

catch (err): We intercept any failure from the primary Lingo.dev API.
console.warn(...): Gracefully log the error without crashing the user's interface.
const { translateWithGroq } = await import(...): This is the secret sauce. Instead of loading the heavy AI service upfront, we dynamically lazy-load the Groq module only if Lingo.dev fails. This keeps the initial bundle size incredibly small and fast.
return await translateWithGroq(...): We leverage LLaMA 3.1 via Groq to step in as a secondary line of defense, ensuring the user instantly gets their localized news, no matter what.

The Most Frustrating Bug
My biggest headache? Integrating the official Lingo.dev SDK. It was built for Node environments and threw obscure bundling errors that completely broke the Vite build. The undocumented, obscure fix? I threw away the official SDK entirely. I reverse-engineered their REST endpoint out of their docs and crafted a raw fetch POST request with a custom X-API-Key header. Sometimes, raw HTTP beats a polished SDK.

When Clean Design Met Messy Reality
My initial, clean design assumed a simple querySelector('article') would cleanly extract text from any news site perfectly. The reality? Web scraping is a nightmare of custom ad-blockers, captchas, and chaotic div nests.

My clean design broke immediately. I was forced to write a massive, messy array of heuristic CSS selectors and "noise" filters (.cookie-banner, .advertisement). When all else fails, I built a highly functional workaround: dumping the raw HTML directly into Groq AI with a strict prompt: "Return ONLY the article body text."

Technical Debt & Trade-Offs
To cross the finish line quickly, I accepted a notable piece of technical debt: embedding API keys in the frontend environment (import.meta.env). While Vite obscures them in dev, client-side fetches are risky at scale. I accepted this to launch a fast MVP, knowing I can shift to edge functions in V2.

Try It Yourself
You can run this locally with practically zero friction:

bash

git clone https://github.com/Samar-365/LingualNews
cd LingualNews
npm install
Add your .env with VITE_GROQ_API_KEY and VITE_LINGO_API_KEY
npm run dev

What’s Next?
If you fork this repository today, the most obvious missing piece to build is Offline PWA Support (Service Workers). Reading the news shouldn't require a constant, stable internet connection—especially for users in volatile regions. Local caching features could dramatically improve this app's life-saving potential.

Code is more than syntax; it's how we connect the world. What are you building today?

Check out the repo at https://github.com/Samar-365/LingualNews

Special thanks to @sumitsaurabh927 and @maxprilutskiy for their continuous guidance throughout the hackathon and also for providing us this great opportunity.

Happy coding!

Stop Copy-Pasting from Images: Build a Universal Screen Translator with Python

Samar Shetye — Thu, 05 Feb 2026 18:33:50 +0000

Lingo-Live started with a frustration I’m sure you’ve felt too.

Have you ever tried copying text from a YouTube video?
Or translating a Japanese error message inside a game?

Yeah. You can’t.
Because it’s not text — it’s just pixels.

Most of us end up doing one of two things:

painfully typing everything by hand, or
pulling out our phones and using Google Lens, holding it up to the screen like it’s 2010.

It’s clunky. It breaks focus. And honestly, we can do better.

So I built Lingo-Live — a sleek desktop app that lets you translate anything you see on your screen instantly.

The Superpower We Wanted

I didn’t want just another translation app. I wanted something that felt like a superpower.

That meant it had to be:

Invisible – runs quietly in the background
Instant – hit a hotkey, select an area, get a translation
Modern – glassy UI, dark mode, blur effects, no Windows-95 vibes

Press Ctrl + Alt + T, drag over any part of your screen, and boom — translated text appears on top of whatever you’re doing.

The Secret Sauce: How Lingo-Live Works

Python made this possible. It’s basically a Swiss Army knife for building tools like this.

Here’s how everything comes together.

1. The “Glass” Overlay

The trickiest part was creating a window that stays on top without being annoying.

I used CustomTkinter to build a frameless, translucent overlay that feels light and modern.

Key details:

Always on top so translations stay visible
Semi-transparent so you can still see context underneath
Frameless — no ugly title bar; custom drag-and-drop instead

The result feels less like an app and more like a layer on your desktop.

2. The Eyes (OCR)

When you trigger the hotkey, Lingo-Live doesn’t try to “read the screen.”

Instead, it:

Lets you select a region
Takes a screenshot of just that area
Sends it to Tesseract OCR to extract text from the pixels

Conceptually, it looks like this:

screenshot = ImageGrab.grab(bbox=(x1, y1, x2, y2))
text = ocr_engine.extract_text(screenshot)

That’s where the magic starts — turning images into actual text.

3. The Brain (Translation)

Once OCR gives us something like こんにちは, we need a translation that actually makes sense.

This is where Lingo.dev comes in.

Instead of raw dictionary swaps, it handles context properly, which makes a huge difference — especially for UI text, error messages, and game dialogue.

The result feels natural, not robotic.

4. The Voice (Text-to-Speech)

Sometimes you don’t want to read. You just want to hear it.

So I added Edge TTS, which uses the same high-quality voices found in Microsoft Edge.

Now Lingo-Live can read translations out loud — great for pronunciation or just staying hands-free.

“Fish are vertebrate animals that live in water…”

5. Leveling Up: AI Summarization

Full translations are great, but sometimes you just want the gist.

So I added a Summarize button powered by Google Gemini.

Here’s what happens:

The translated text is sent to Gemini
It returns a clean, one-sentence summary
You get the point instantly Perfect for skimming foreign articles, long error messages, or RPG dialogue dumps.

6. Make It Yours: Settings That Actually Matter

I didn’t want Lingo-Live to feel rigid, so I built a full settings system backed by JSON.

You can:

[- Change the hotkey (Alt + Z? Sure.)

Switch themes (dark mode is the correct choice)
Pick different fonts (Roboto > Segoe UI, fight me)](url)

Best part?
All changes apply instantly — no restarts, no reloads.

Conclusion

Building your own tools is one of the most satisfying parts of being a developer.

Lingo-Live solves a problem I run into constantly: text that’s trapped inside images, videos, and games. Instead of working around it, I built something that feels fast, modern, and genuinely useful.

If you’ve ever rage-typed a foreign error message at 2 AM, this app is for you.

Lingo.dev makes localization feel effortless—turning a painful, error-prone task into a smooth, developer-friendly experience.

Check out the repo at https://github.com/Samar-365/lingo_live, clone the code, and stop copy-pasting from pixels.

Special thanks to @sumitsaurabh927 and @maxprilutskiy for their continuous guidance throughout the hackathon and also for providing us this great opportunity.

Happy coding!