Sayista Yazdani

Posted on May 18 • Edited on May 22

# 🚀 Gemma Doc Pro: Privacy-First Codebase Intelligence Dashboard

#devchallenge #gemmachallenge #gemma #agents

Gemma 4 Challenge: Build With Gemma 4 Submission

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

Transform any codebase into a production-grade developer guide using Gemma 4. Visual architecture maps, security auditing, API surface detection, and smart Q&A — all 100% private and browser-native.

💡 What I Built

Gemma Doc Pro is a privacy-first, serverless codebase auditing and interactive documentation platform.

The Problem

When onboarding to a massive or legacy repository, developers waste days mapping out dependencies, identifying API surfaces, and detecting security gaps. Uploading proprietary enterprise code to cloud-hosted AI engines exposes businesses to critical compliance and IP leaks.

The Solution

Gemma Doc Pro solves this by performing 100% browser-native static analysis combined with the intelligent reasoning of Gemma 4. It processes local folders or direct public GitHub URLs, generates interactive 2D/3D visualizations, identifies API endpoints, evaluates OWASP security risks, and lets you chat with your codebase — all without a backend server.

💻 GitHub Repository

🔒 Why Browser-Native Analysis Matters

Traditional AI auditing tools often require uploading proprietary repositories to external servers, introducing privacy and compliance concerns.

Gemma Doc Pro performs dependency mapping, static analysis, and security heuristics directly in the browser. Only structured telemetry is processed by Gemma 4, minimizing exposure of sensitive source code while keeping infrastructure costs near zero.

📈 Performance Benchmarks

By moving the heavy lifting entirely to the browser, we unlocked incredible performance metrics:

⚡ Zero-Server Scalability: Analyzed repositories containing ~2,500 lightweight source files in under 8 seconds on modern desktop hardware..
🚀 Instant Tab-Switching: Mermaid SVG caching reduced re-render latency by 40% to 60% (rendering instantly on tab switch).
🌐 Fast GitHub API Sync: Cloned, parsed, and audited a repository (e.g., expressjs/express) in less than 15 seconds directly in the browser.

🗺️ Architectural Flow

Here is how Gemma Doc Pro parses, visualizes, and reason-audits your code client-side:

[ User Input ] 
    ├➔ Local Folder Upload (Dropzone)
    └➔ GitHub URL ➔ Batch API Content Fetcher (8 Concurrent Requests)
           │
           ▼
[ Browser Static Analysis Engine ]
    ├➔ Heuristic AST-like Tokenizer
    ├➔ File Dependency Import Mapper
    └➔ OWASP Vulnerability & Secret Scanner
           │
           ▼
[ High-Density Telemetry (DocData JSON) ]
    ├➔ 2D Mermaid Chart (With in-memory SVG Cache)
    ├➔ 3D Force-Directed Neural Map
    └➔ Framework Classification Labels
           │
           ▼
[ Gemma 4 Cognitive Synthesis ]
    ├➔ Automated Security Remediation (Roadmap Diff Engine)
    └➔ Contextual Q&A (Codebase Interactive Chat)

🔍 Real Security Detection Examples

Our TS static engine extracts vulnerabilities and passes them to Gemma 4 to generate immediate, secure code recommendations:

1. SQL Injection Detection

Vulnerable Code Detected:

$id = $_POST['id'];
$query = "SELECT * FROM users WHERE id = " . $id;
$result = mysql_query($query);

Gemma 4 Remediation Roadmap Recommendation:

// Safe Parameterized Query
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = :id');
$stmt->execute(['id' => $id]);
$user = $stmt->fetch();

2. XSS (Cross-Site Scripting) Injection

Vulnerable Code Detected:

const userInput = new URLSearchParams(window.location.search).get('name');
document.getElementById('welcome').innerHTML = 'Hello ' + userInput;

Gemma 4 Remediation Roadmap Recommendation:

// Secure text assignment preventing DOM XSS
const userInput = new URLSearchParams(window.location.search).get('name');
document.getElementById('welcome').textContent = 'Hello ' + userInput;

🧠 How I Used Gemma 4

We selected Gemma 4 (Instruct) for this project. Because codebase context can be massive, we run a local heuristic model to reduce thousands of lines of raw code down to high-density structured telemetry (routes, file imports, code violations, structure maps). This structured metadata (DocData) is then fed to Gemma 4, allowing the model to work within a highly optimized context window.

1. Cognitive Roadmap (AI Refactoring)

Gemma 4 processes detected vulnerabilities (e.g., OWASP violations or hardcoded secrets) and generates exact, production-ready secure refactoring suggestions (as shown in our code examples).

2. Conversational Q&A (Gemma Chat)

Using the pre-compiled static telemetry context, Gemma 4 powers an interactive developer chat:

User: "Does our Express API handle user input sanitization properly in our database routes?"

Gemma 4: "Looking at your routing table: /api/users uses direct string query evaluation without standard sanitization middlewares. You should install express-validator and add... [Code Snippet]"

🛠️ Challenges Faced (And How We Solved Them!)

Challenge 1: The XAMPP / Git Executable Bottleneck 🚪

The Issue: Initially, GitHub syncing required cloning repositories via a server-side PHP script. In local developer environments (like XAMPP), Apache permission limitations and missing git path variables made server-side cloning extremely unstable and slow.
The Fix: We completely removed the server dependency! We rewrote the sync utility to consume the GitHub REST API directly from the frontend. It fetches repository file trees recursively and downloads files in throttled parallel batches of 8, decoding base64 content directly into browser-native virtual File arrays.

Challenge 2: Mermaid.js Rendering Chokehold 🗺️

The Issue: Complex dependency diagrams require heavy computational power to render. In React, switching back and forth between tabs triggered mermaid.render() from scratch every time, freezing the UI for 1–2 seconds.
The Fix: We built an in-memory useRef SVG rendering cache. When a graph is rendered once, its output is keyed by the codebase hash and cached. Returning to the tab loads the cached layout instantly, keeping page navigation incredibly fast and lag-free.

🧩 Supported Framework Detection

Gemma Doc Pro can automatically classify and analyze projects built with:

React / Next.js
Express.js
Laravel
Django
FastAPI
Vue
Node.js
TypeScript Monorepos
PHP MVC Architectures

💻 Getting Started

1. Clone & Install

git clone https://github.com/your-username/gemma-doc-pro.git
cd gemma-doc-pro
npm install

2. Set Up Environment Variables

Create a .env file in your root directory:

VITE_GEMMA_API_KEY=your_google_gemini_api_key_here

3. Run Locally

npm run dev

Open http://localhost:5173 in your browser!

🏆 Dev.to Contest Categories

Build Category

Gemma Agent Smart Use: Splits workloads by using a fast AST tokenizer locally and reserving Gemma 4 for high-value reasoning (audit suggestions and codebase chat).
Code Quality: Clean TypeScript (strict mode), batched async fetch pools, modular component design, and zero-backend portability.
Usability: Seamless dynamic state resets, in-memory layout caching, bilingual language toggling, and adaptive mobile-first layouts.

Writing Category

Clear Explanation: Structured visual architecture flows, detailed real-world security examples, and technical problem-solving breakdowns.
Originality: Moving away from standard cloud-centric AI wrappers to build a 100% private, serverless, browser-native developer tool.

Gemma Doc Pro makes software architecture readable, audits instant, and code security accessible to developers everywhere, privately and locally.

DEV Community