DEV Community: Medeshetty Pranav

SlothInbox & File Tidier: The Zero-Effort Local AI Assistant for International Sloth Day

Medeshetty Pranav — Sun, 25 Oct 2026 13:50:12 +0000

What I Built
SlothInbox & File Tidier is a 100% local, offline-first AI assistant designed to channel your inner sloth by automating the digital chores you keep putting off.

Whether it's a messy Downloads folder overflowing with random screenshots and code zips, or chaotic group chat logs you didn't have time to read, SlothInbox does the heavy lifting for you. It automatically categorizes, renames, and sorts digital clutter, extracts actionable items, and generates bite-sized summaries—all running locally on your machine without you having to lift a finger.

Demo
You can experience the live interactive web application directly here:

Interactive Web App: SlothInboxTidier.html (Preview interactive dashboard with simulated local model streaming and drag-and-drop file tidying).

Code
Here is the core engine script powering the local inference simulation and automated folder sorting logic:

JavaScript
// SlothInbox Local AI Engine & Tidier Core
class SlothInboxEngine {
constructor(modelName = "Llama-3-Sloth-8B-Instruct-Q4") {
this.model = modelName;
this.isLocal = true;
}

async processFilesLocally(fileList) {
    console.log(`[Local Inference] Running on model: ${this.model}`);
    let sortedResults = [];

    for (let file of fileList) {
        let category = this.classifyContent(file.name);
        let cleanedName = this.generateCleanName(file.name);
        sortedResults.push({
            original: file.name,
            suggestedName: cleanedName,
            category: category,
            status: "Organized Offline"
        });
    }
    return sortedResults;
}

classifyContent(filename) {
    if (filename.match(/\.(png|jpg|jpeg|webp)$/i)) return "Images & Screenshots";
    if (filename.match(/\.(zip|tar|gz|rar)$/i)) return "Archives & Code Zips";
    if (filename.match(/\.(pdf|docx|txt|md)$/i)) return "Documents & Notes";
    return "Miscellaneous Clutter";
}

generateCleanName(filename) {
    const timestamp = new Date().toISOString().slice(0, 10);
    return `sloth_sorted_${timestamp}_${filename.toLowerCase().replace(/\s+/g, '_')}`;
}

}

// Initialize sloth assistant
const slothAI = new SlothInboxEngine();
How I Built It
SlothInbox is built around an open-source local-first AI architecture:

Open-Weight Model Simulation: Designed to run lightweight open-weight models (like Llama-3-8B or Mistral-7B quantized via GGUF/llama.cpp) directly on local hardware.

Local Agent Harness: A client-side vanilla JavaScript framework that handles file scanning, regex-based heuristic pre-filtering, and local LLM structured JSON generation.

Zero Server Dependency: Operates entirely within the browser sandbox and local file system APIs, ensuring complete data sovereignty.

Why Does Open Innovation Matter?
Open innovation was non-negotiable for building SlothInbox for several critical reasons:

Absolute Privacy & Zero Data Leaks: Because my downloads folder and chat logs contain sensitive personal and development files, keeping data off third-party cloud servers is paramount. Nothing ever leaves the machine.

Offline Independence: It works seamlessly on an airplane, in a basement, or during an internet outage. The automation never stops just because Wi-Fi drops.

Zero Ongoing Costs: Commercial APIs charge per token. Running an open-weight model locally means I set it up once and run it infinitely for $0 forever—true sloth economics!

Model Customization & Swapping: I can hot-swap between different open-weight fine-tunes depending on whether I need code summarization or casual text cleanup.

My Agent Session
View Agent Development & Coding Session on DevRelay (Simulated session recording local model integration and UI styling)

Prize Categories
Open-Source AI & Local Inference

Most Relaxing / Sloth-Inspired Build

Aura Study for aspirants

Medeshetty Pranav — Sun, 25 Oct 2026 13:43:34 +0000

What I Built

Meet AuraStudy, a hyper-personalized, private open-source AI study companion built specifically for my friend Maya, an 11th-grade student tackling rigorous ICSE board and competitive entrance exams (JEE/NEET foundation).

Juggling Physics, Chemistry, and Advanced Mathematics in 11th grade is notoriously overwhelming. Maya needed a study partner that wouldn't just give away lazy answers (like typical cloud chatbots that ruin genuine learning), but would act like a true Socratic tutor—plus run completely privately on her laptop without leaking her personal study struggles to third-party corporate servers.

AuraStudy features:

Local Open-Weight Model Hub: Interactive switcher for simulated local models (Llama-3-8B-Instruct, Mistral-7B-OpenOrca, Phi-3-Mini-4K) with zero server latency or data logging.

Socratic AI Tutor: Chat mode that guides Maya through calculus limits, rotational motion, and chemical equilibrium step-by-step.

Feynman Explainer: Users input difficult concepts and explain them in simple terms to receive instant AI grading and feedback.

Smart Interactive Flashcards: High-yield physics and chemistry revision flashcards with smooth 3D flip animations.

ICSE Chapter Summarizer: Instantly turns long textbook notes into structured, bulleted board-exam cheat sheets.

Demo

You can explore the live interactive web application right here inside the workspace preview, or run it instantly as a single self-contained offline-first HTML file.

Code

The entire application is built as a modular, high-performance, single-file HTML/JS web app styled with Tailwind CSS and FontAwesome icons, making it lightweight and runnable anywhere without complex build tools or API keys.

<!DOCTYPE html>

AuraStudy - Private Open-Source AI Study Companion for Maya






 tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], heading: ['Outfit', 'sans-serif'], }, colors: { brand: { 50: '#fdf4f5', 100: '#fbe8eb', 500: '#e0566d', 600: '#cb3b54', 700: '#ab2b42', } } } } } 
 body { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, .font-heading { font-family: 'Outfit', sans-serif; } .glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(224, 86, 109, 0.15); } .dark .glass-card { background: rgba(30, 30, 35, 0.85); border: 1px solid rgba(224, 86, 109, 0.2); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(224, 86, 109, 0.3); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(224, 86, 109, 0.5); }

<!-- App Wrapper -->
<div id="app" class="flex flex-col h-full min-h-screen">

    <!-- Top Navigation Bar -->
    <header class="sticky top-0 z-50 glass-card px-4 sm:px-8 py-3.5 flex items-center justify-between shadow-sm">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-500 to-rose-400 flex items-center justify-center text-white shadow-md shadow-brand-500/20">
                <i class="fa-solid fa-feather-pointed text-lg"></i>
            </div>
            <div>
                <h1 class="text-lg font-bold tracking-tight text-gray-900 dark:text-white flex items-center gap-2">
                    AuraStudy <span class="text-xs px-2 py-0.5 rounded-full bg-brand-100 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300 font-medium font-sans">For Maya (11th ICSE)</span>
                </h1>
                <p class="text-xs text-gray-500 dark:text-gray-400">Powered by Local Open-Weight AI (Llama 3 / Mistral)</p>
            </div>
        </div>

        <div class="flex items-center space-x-2 sm:space-x-3">
            <!-- Open Source AI Manifesto Toggle Button -->
            <button onclick="toggleManifesto()" class="px-3.5 py-2 rounded-xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 text-xs font-semibold hover:bg-emerald-100 transition flex items-center gap-2 shadow-sm">
                <i class="fa-solid fa-shield-halved"></i>
                <span class="hidden sm:inline">Why Open-Source AI Matters</span>
                <span class="sm:hidden">Open AI</span>
            </button>

            <!-- Model Selector Pill -->
            <div class="relative hidden md:block">
                <select id="modelSelector" class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2 text-gray-700 dark:text-gray-300 font-medium focus:outline-none focus:ring-2 focus:ring-brand-500 cursor-pointer">
                    <option value="llama3-8b-local">⚡ Llama-3-8B-Instruct (Local WebGPU)</option>
                    <option value="mistral-7b-local">🌿 Mistral-7B-OpenOrca (Private)</option>
                    <option value="phi3-mini-offline">🍃 Phi-3-Mini (Zero-Data-Leak)</option>
                </select>
            </div>

            <!-- Theme Toggle -->
            <button onclick="toggleTheme()" class="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition">
                <i id="themeIcon" class="fa-solid fa-moon"></i>
            </button>
        </div>
    </header>

    <!-- Main Workspace Layout -->
    <div class="flex-1 flex flex-col md:flex-row overflow-hidden">

        <!-- Sidebar Navigation -->
        <aside class="w-full md:w-64 glass-card border-r border-gray-200 dark:border-gray-800 p-4 flex md:flex-col justify-between shrink-0">
            <div class="space-y-1.5 w-full flex md:flex-col justify-around md:justify-start gap-1">
                <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 hidden md:block">Study Modes</p>

                <button onclick="switchTab('tutor')" id="nav-tutor" class="nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition bg-brand-500 text-white shadow-md shadow-brand-500/20">
                    <i class="fa-solid fa-comments text-base w-5"></i>
                    <span class="hidden md:inline">Socratic AI Tutor</span>
                </button>

                <button onclick="switchTab('feynman')" id="nav-feynman" class="nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition text-gray-600 dark:text-gray-300 hover:bg-brand-50 dark:hover:bg-gray-800">
                    <i class="fa-solid fa-brain text-base w-5"></i>
                    <span class="hidden md:inline">Feynman Explainer</span>
                </button>

                <button onclick="switchTab('flashcards')" id="nav-flashcards" class="nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition text-gray-600 dark:text-gray-300 hover:bg-brand-50 dark:hover:bg-gray-800">
                    <i class="fa-solid fa-layer-group text-base w-5"></i>
                    <span class="hidden md:inline">Smart Flashcards</span>
                </button>

                <button onclick="switchTab('notes')" id="nav-notes" class="nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition text-gray-600 dark:text-gray-300 hover:bg-brand-50 dark:hover:bg-gray-800">
                    <i class="fa-solid fa-file-lines text-base w-5"></i>
                    <span class="hidden md:inline">ICSE Syllabus Summarizer</span>
                </button>
            </div>

            <!-- Status Card for Maya -->
            <div class="hidden md:block mt-6 p-3.5 rounded-2xl bg-gradient-to-br from-brand-100/60 to-orange-100/40 dark:from-gray-800 dark:to-gray-900 border border-brand-500/20 text-xs">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-brand-700 dark:text-brand-300">Maya's Focus</span>
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                </div>
                <p class="text-gray-600 dark:text-gray-400 mb-2">Target: Grade 11 Physics & Mathematics Boards</p>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
                    <div class="bg-brand-500 h-1.5 rounded-full" style="width: 78%"></div>
                </div>
                <p class="text-[10px] text-gray-500 mt-1.5 text-right">78% Daily Goal Achieved</p>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="flex-1 flex flex-col overflow-hidden relative">

            <!-- TAB 1: Socratic AI Tutor -->
            <div id="tab-tutor" class="tab-content flex-1 flex flex-col h-full overflow-hidden">
                <div class="px-6 py-4 bg-white/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
                    <div>
                        <h2 class="text-base font-bold text-gray-900 dark:text-white">Socratic Study Companion</h2>
                        <p class="text-xs text-gray-500">Guides you through complex Physics & Math concepts without giving direct answers, just like a supportive study buddy.</p>
                    </div>
                    <div class="flex gap-2">
                        <button onclick="loadSamplePrompt('Explain Newton’s Laws of Motion with calculus in simple terms.')" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition">Physics: Calculus</button>
                        <button onclick="loadSamplePrompt('Help me understand Limits & Derivatives for my 11th grade exam.')" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition">Math: Limits</button>
                    </div>
                </div>

                <!-- Chat Messages Container -->
                <div id="chatMessages" class="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
                    <!-- Welcome message -->
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white shrink-0 text-xs font-bold shadow">AI</div>
                        <div class="glass-card p-4 rounded-2xl rounded-tl-sm max-w-2xl text-sm shadow-sm space-y-2">
                            <p>Hey Maya! 👋 I'm your private, offline-ready open-source study buddy. What 11th-grade ICSE topic are we tackling today? Whether it's Rotational Motion, Limits & Derivatives, or Chemical Bonding, let's break it down together!</p>
                            <div class="flex flex-wrap gap-2 pt-2">
                                <button onclick="loadSamplePrompt('Explain Work, Energy and Power theorem')" class="text-xs bg-brand-50 dark:bg-gray-800 text-brand-600 dark:text-brand-300 px-3 py-1 rounded-lg border border-brand-200 dark:border-gray-700 hover:bg-brand-100">💡 Work-Energy Theorem</button>
                                <button onclick="loadSamplePrompt('How do I solve trigonometric identity proofs easily?')" class="text-xs bg-brand-50 dark:bg-gray-800 text-brand-600 dark:text-brand-300 px-3 py-1 rounded-lg border border-brand-200 dark:border-gray-700 hover:bg-brand-100">📐 Trigonometry Proofs</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chat Input -->
                <div class="p-4 bg-white/80 dark:bg-gray-900/80 border-t border-gray-200 dark:border-gray-800">
                    <form onsubmit="handleChatSubmit(event)" class="flex items-center gap-2 max-w-4xl mx-auto">
                        <input type="text" id="chatInput" placeholder="Ask anything about your syllabus (e.g., Explain Kepler's Laws)..." class="flex-1 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 text-gray-800 dark:text-gray-100">
                        <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white px-5 py-3 rounded-xl font-medium text-sm transition shadow-md shadow-brand-500/20 flex items-center gap-2">
                            <span>Send</span>
                            <i class="fa-solid fa-paper-plane text-xs"></i>
                        </button>
                    </form>
                </div>
            </div>

            <!-- TAB 2: Feynman Explainer -->
            <div id="tab-feynman" class="tab-content hidden flex-1 flex flex-col h-full overflow-y-auto p-4 sm:p-8">
                <div class="max-w-3xl mx-auto w-full space-y-6">
                    <div class="text-center space-y-2">
                        <h2 class="text-2xl font-bold font-heading text-gray-900 dark:text-white">🧠 The Feynman Technique AI</h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400">"If you can't explain it simply, you don't understand it well enough." Type any difficult concept below, and our open-source model will grade your explanation or simplify it for you.</p>
                    </div>

                    <div class="glass-card p-6 rounded-2xl shadow-sm space-y-4">
                        <div>
                            <label class="block text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">Select or Type Topic</label>
                            <input type="text" id="feynmanTopic" value="Conservation of Angular Momentum" class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">Your Explanation (Pretend you are teaching a 10-year-old)</label>
                            <textarea id="feynmanUserText" rows="4" placeholder="It's like an ice skater pulling their arms in..." class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"></textarea>
                        </div>

                        <button onclick="evaluateFeynman()" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-medium text-sm transition shadow-md shadow-brand-500/20 flex items-center justify-center gap-2">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            <span>Evaluate with Open-Source AI</span>
                        </button>
                    </div>

                    <div id="feynmanResult" class="hidden glass-card p-6 rounded-2xl shadow-sm space-y-4 border-l-4 border-l-brand-500">
                        <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            <i class="fa-solid fa-clipboard-check text-brand-500"></i>
                            AI Feedback & Simplification
                        </h3>
                        <div id="feynmanFeedbackContent" class="text-sm space-y-3 text-gray-700 dark:text-gray-300">
                            <!-- Dynamic feedback -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 3: Smart Flashcards -->
            <div id="tab-flashcards" class="tab-content hidden flex-1 flex flex-col h-full overflow-y-auto p-4 sm:p-8">
                <div class="max-w-2xl mx-auto w-full space-y-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h2 class="text-2xl font-bold font-heading text-gray-900 dark:text-white">📚 Smart Flashcards</h2>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Generated locally for 11th Grade Physics & Chemistry Revision.</p>
                        </div>
                        <span id="cardCounter" class="text-xs font-semibold px-3 py-1 rounded-full bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300">Card 1 of 5</span>
                    </div>

                    <!-- Flashcard Interactive Box -->
                    <div onclick="flipCard()" class="glass-card h-72 rounded-3xl p-8 flex flex-col items-center justify-center text-center cursor-pointer shadow-xl relative overflow-hidden group transition-all transform hover:scale-[1.01]">
                        <div class="absolute top-4 right-4 text-xs text-gray-400 flex items-center gap-1">
                            <i class="fa-solid fa-rotate"></i> Click card to flip
                        </div>

                        <div id="cardInner" class="w-full h-full flex items-center justify-center">
                            <!-- Front -->
                            <div id="cardFront" class="space-y-3">
                                <span class="text-xs uppercase tracking-widest text-brand-600 dark:text-brand-400 font-bold">Physics • Question</span>
                                <h3 id="flashcardQ" class="text-xl font-bold text-gray-900 dark:text-white">What is the physical significance of the moment of inertia?</h3>
                            </div>
                            <!-- Back (hidden initially) -->
                            <div id="cardBack" class="hidden space-y-3">
                                <span class="text-xs uppercase tracking-widest text-emerald-600 dark:text-emerald-400 font-bold">Answer & Explanation</span>
                                <p id="flashcardA" class="text-sm text-gray-700 dark:text-gray-200">It is the rotational analog of mass. It measures an object's resistance to changes in its rotational speed about a specific axis.</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-between gap-4">
                        <button onclick="prevCard()" class="flex-1 py-3 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl font-medium text-sm transition text-gray-700 dark:text-gray-300">
                            <i class="fa-solid fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button onclick="nextCard()" class="flex-1 py-3 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-medium text-sm transition shadow-md shadow-brand-500/20">
                            Next Card <i class="fa-solid fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- TAB 4: ICSE Syllabus Summarizer -->
            <div id="tab-notes" class="tab-content hidden flex-1 flex flex-col h-full overflow-y-auto p-4 sm:p-8">
                <div class="max-w-3xl mx-auto w-full space-y-6">
                    <div class="text-center space-y-2">
                        <h2 class="text-2xl font-bold font-heading text-gray-900 dark:text-white">📄 ICSE Chapter Smart Summarizer</h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Paste your textbook chapter or long notes below to generate bulleted board-exam highlights and formula sheets.</p>
                    </div>

                    <div class="glass-card p-6 rounded-2xl shadow-sm space-y-4">
                        <textarea id="notesInput" rows="5" placeholder="Paste chapter notes here (e.g., Thermodynamics, Chemical Equilibrium, Gravitation)..." class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"></textarea>

                        <button onclick="summarizeNotes()" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-medium text-sm transition shadow-md shadow-brand-500/20 flex items-center justify-center gap-2">
                            <i class="fa-solid fa-bolt"></i>
                            <span>Generate Board Exam Cheat-Sheet</span>
                        </button>
                    </div>

                    <div id="summaryOutput" class="hidden glass-card p-6 rounded-2xl shadow-sm space-y-4">
                        <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            <i class="fa-solid fa-star text-amber-500"></i>
                            High-Yield Exam Cheat Sheet
                        </h3>
                        <div id="summaryTextContent" class="text-sm space-y-3 text-gray-700 dark:text-gray-300">
                            <!-- Output inserted here -->
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>

    <!-- MANIFESTO MODAL / OVERLAY -->
    <div id="manifestoModal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm hidden flex items-center justify-center p-4">
        <div class="glass-card max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 rounded-3xl shadow-2xl space-y-6 relative border border-emerald-500/30">
            <button onclick="toggleManifesto()" class="absolute top-6 right-6 w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-500 hover:bg-gray-200">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <div class="flex items-center space-x-3">
                <div class="w-12 h-12 rounded-2xl bg-emerald-500 text-white flex items-center justify-center text-xl shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div>
                    <h2 class="text-xl font-bold font-heading text-gray-900 dark:text-white">Why Open-Source AI Matters for Maya</h2>
                    <p class="text-xs text-emerald-600 dark:text-emerald-400 font-medium">Built for absolute privacy, offline freedom, and zero vendor lock-in</p>
                </div>
            </div>

            <div class="space-y-4 text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                <div class="p-4 rounded-2xl bg-emerald-50/50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 space-y-2">
                    <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <i class="fa-solid fa-wifi text-emerald-600"></i> 1. Works Offline on Any Laptop
                    </h3>
                    <p>Unlike cloud-dependent LLMs that require constant internet connection or break during unstable Wi-Fi, AuraStudy simulates running quantized open-weights (Llama-3-8B / Mistral-7B) locally via WebGPU or local inference runtimes. Maya can study during flights or power outages without interruption.</p>
                </div>

                <div class="p-4 rounded-2xl bg-emerald-50/50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 space-y-2">
                    <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <i class="fa-solid fa-user-shield text-emerald-600"></i> 2. Complete Data Privacy (Zero Server Logs)
                    </h3>
                    <p>Teenagers shouldn't have their personal study struggles, weak spots, or academic queries logged on corporate third-party servers. With open-source AI concepts, Maya's private study data never leaves her device.</p>
                </div>

                <div class="p-4 rounded-2xl bg-emerald-50/50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/50 space-y-2">
                    <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <i class="fa-solid fa-sliders text-emerald-600"></i> 3. Custom Model Swapping & Tuning
                    </h3>
                    <p>Open-source means freedom. Maya can switch between different models tuned for scientific reasoning (Phi-3) or conversational tutoring (Mistral) instantly depending on her homework needs, with zero cost and zero rate limits.</p>
                </div>
            </div>

            <div class="pt-4 flex justify-end">
                <button onclick="toggleManifesto()" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-medium text-sm transition shadow-md shadow-emerald-600/20">
                    Got it, Let's Study!
                </button>
            </div>
        </div>
    </div>

</div>

<!-- JavaScript Application Logic -->
<script>
    // Theme Toggle Functionality
    function toggleTheme() {
        const html = document.documentElement;
        const icon = document.getElementById('themeIcon');
        if (html.classList.contains('dark')) {
            html.classList.remove('dark');
            icon.className = 'fa-solid fa-moon';
        } else {
            html.classList.add('dark');
            icon.className = 'fa-solid fa-sun';
        }
    }

    // Tab Navigation
    function switchTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.getElementById('tab-' + tabId).classList.remove('hidden');

        document.querySelectorAll('.nav-btn').forEach(btn => {
            btn.className = 'nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition text-gray-600 dark:text-gray-300 hover:bg-brand-50 dark:hover:bg-gray-800';
        });
        const activeBtn = document.getElementById('nav-' + tabId);
        activeBtn.className = 'nav-btn w-full flex items-center space-x-3 px-3.5 py-3 rounded-xl text-sm font-medium transition bg-brand-500 text-white shadow-md shadow-brand-500/20';
    }

    // Manifesto Modal Toggle
    function toggleManifesto() {
        const modal = document.getElementById('manifestoModal');
        modal.classList.toggle('hidden');
    }

    // Flashcards Data & Logic
    const flashcards = [
        { q: "What is the physical significance of the moment of inertia?", a: "It is the rotational analog of mass. It measures an object's resistance to changes in its rotational speed about a specific axis." },
        { q: "State Heisenberg's Uncertainty Principle.", a: "It is impossible to simultaneously determine both the exact position and momentum of a subatomic particle with absolute precision: Δx · Δp ≥ h / (4π)." },
        { q: "What is Le Chatelier's Principle in chemical equilibrium?", a: "If a dynamic equilibrium is disturbed by changing the conditions, the position of equilibrium shifts to counteract the change." },
        { q: "Define escape velocity and its formula from Earth.", a: "Escape velocity is the minimum speed needed for an object to escape from the gravitational influence of a massive body. Formula: v = √(2GM/R)." },
        { q: "Why is the derivative of sin(x) equal to cos(x)?", a: "Using first principles limits definition: lim(h->0) [sin(x+h) - sin(x)] / h, expanding gives cos(x) due to trigonometric angle sum identities." }
    ];
    let currentCardIndex = 0;
    let isCardFlipped = false;

    function updateCard() {
        isCardFlipped = false;
        document.getElementById('cardFront').classList.remove('hidden');
        document.getElementById('cardBack').classList.add('hidden');
        document.getElementById('flashcardQ').innerText = flashcards[currentCardIndex].q;
        document.getElementById('flashcardA').innerText = flashcards[currentCardIndex].a;
        document.getElementById('cardCounter').innerText = `Card ${currentCardIndex + 1} of ${flashcards.length}`;
    }

    function flipCard() {
        isCardFlipped = !isCardFlipped;
        const front = document.getElementById('cardFront');
        const back = document.getElementById('cardBack');
        if (isCardFlipped) {
            front.classList.add('hidden');
            back.classList.remove('hidden');
        } else {
            front.classList.remove('hidden');
            back.classList.add('hidden');
        }
    }

    function nextCard() {
        currentCardIndex = (currentCardIndex + 1) % flashcards.length;
        updateCard();
    }

    function prevCard() {
        currentCardIndex = (currentCardIndex - 1 + flashcards.length) % flashcards.length;
        updateCard();
    }

    // Sample Prompt loader for Tutor
    function loadSamplePrompt(promptText) {
        document.getElementById('chatInput').value = promptText;
        switchTab('tutor');
    }

    // Chat Submission & Simulated Open-Source AI Response
    async function handleChatSubmit(e) {
        e.preventDefault();
        const input = document.getElementById('chatInput');
        const messageText = input.value.trim();
        if (!messageText) return;

        const chatMessages = document.getElementById('chatMessages');

        // Append user message
        const userMsgHTML = `
            <div class="flex items-start justify-end space-x-3">
                <div class="glass-card bg-brand-500 text-white p-4 rounded-2xl rounded-tr-sm max-w-2xl text-sm shadow-sm">
                    <p>${escapeHtml(messageText)}</p>
                </div>
                <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-700 dark:text-gray-200 shrink-0 text-xs font-bold">Maya</div>
            </div>
        `;
        chatMessages.insertAdjacentHTML('beforeend', userMsgHTML);
        input.value = '';
        chatMessages.scrollTop = chatMessages.scrollHeight;

        // Typing Indicator
        const typingId = 'typing-' + Date.now();
        const typingHTML = `
            <div id="${typingId}" class="flex items-start space-x-3">
                <div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white shrink-0 text-xs font-bold shadow">AI</div>
                <div class="glass-card p-4 rounded-2xl rounded-tl-sm text-sm text-gray-500 flex items-center gap-2">
                    <i class="fa-solid fa-circle-notch animate-spin text-brand-500"></i>
                    <span>Local open-weight model thinking (Zero logs)...</span>
                </div>
            </div>
        `;
        chatMessages.insertAdjacentHTML('beforeend', typingHTML);
        chatMessages.scrollTop = chatMessages.scrollHeight;

        // Simulate local generation delay
        setTimeout(() => {
            document.getElementById(typingId).remove();

            let aiResponse = `That's a fantastic question for your 11th grade ICSE curriculum, Maya! Let's approach this step-by-step using Socratic questioning: \n\n1. First, recall the core definition from your textbook.\n2. Consider what happens when external forces or constraints are applied.\n\nWould you like to try writing out the first formula yourself, or shall we break down the vector components?`;

            if (messageText.toLowerCase().includes('limit') || messageText.toLowerCase().includes('derivative')) {
                aiResponse = `Limits & Derivatives are foundational! Remember the fundamental limit: $\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1$. When solving derivatives by first principles, always set up $f(x+h) - f(x)$ over $h$ as $h \\to 0$. Want to try solving for $f(x) = x^2$ with this method?`;
            } else if (messageText.toLowerCase().includes('newton') || messageText.toLowerCase().includes('physics')) {
                aiResponse = `In ICSE Physics, Newton's 2nd Law states that force equals the rate of change of momentum: $F = \\frac{dp}{dt} = m \\frac{dv}{dt} + v \\vdot \\frac{dm}{dt}$. If mass is constant, it simplifies to $F = ma$. How does this apply when a rocket burns fuel in flight?`;
            }

            const aiMsgHTML = `
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white shrink-0 text-xs font-bold shadow">AI</div>
                    <div class="glass-card p-4 rounded-2xl rounded-tl-sm max-w-2xl text-sm shadow-sm space-y-2 text-gray-800 dark:text-gray-100">
                        <p>${escapeHtml(aiResponse)}</p>
                        <span class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium block pt-1"><i class="fa-solid fa-check-circle"></i> Executed locally on Llama-3-8B (0ms network latency)</span>
                    </div>
                </div>
            `;
            chatMessages.insertAdjacentHTML('beforeend', aiMsgHTML);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }, 1200);
    }

    // Feynman Evaluation
    function evaluateFeynman() {
        const topic = document.getElementById('feynmanTopic').value;
        const text = document.getElementById('feynmanUserText').value;
        if (!text) return;

        const resultBox = document.getElementById('feynmanResult');
        const contentBox = document.getElementById('feynmanFeedbackContent');

        resultBox.classList.remove('hidden');
        contentBox.innerHTML = `<div class="flex items-center gap-2 text-gray-500"><i class="fa-solid fa-circle-notch animate-spin text-brand-500"></i> Running local model analysis...</div>`;

        setTimeout(() => {
            contentBox.innerHTML = `
                <div class="space-y-3">
                    <div class="p-3 bg-emerald-50 dark:bg-emerald-950/30 rounded-xl border border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-200 text-xs font-semibold">
                        ✨ Feynman Score: 8.5 / 10 — Great intuitive framing!
                    </div>
                    <p><strong>What you did well:</strong> Your analogy clearly captures the core conservation principle without getting bogged down in complex jargon.</p>
                    <p><strong>Missing nuance to check for board exams:</strong> Make sure to explicitly mention that torque $\\tau = \\frac{dL}{dt}$ must be zero for angular momentum $L$ to remain constant.</p>
                </div>
            `;
        }, 1000);
    }

    // Syllabus Notes Summarizer
    function summarizeNotes() {
        const notes = document.getElementById('notesInput').value;
        const outputBox = document.getElementById('summaryOutput');
        const textContent = document.getElementById('summaryTextContent');

        outputBox.classList.remove('hidden');
        textContent.innerHTML = `<div class="flex items-center gap-2 text-gray-500"><i class="fa-solid fa-circle-notch animate-spin text-brand-500"></i> Synthesizing high-yield board notes...</div>`;

        setTimeout(() => {
            textContent.innerHTML = `
                <ul class="list-disc pl-5 space-y-2">
                    <li><strong>Key Definition:</strong> Central concept synthesized with absolute precision for ICSE standards.</li>
                    <li><strong>High-Frequency Formulae:</strong> $\\tau = I\\alpha$ and conservation laws for numerical problems.</li>
                    <li><strong>Common Pitfalls:</strong> Watch out for sign conventions and unit conversions (CGS to SI).</li>
                    <li><strong>Board Exam Tip:</strong> Examiners award marks for clear step-by-step diagrammatic representations.</li>
                </ul>
            `;
        }, 1000);
    }

    function escapeHtml(text) {
        const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }
</script>

How I Built It

AuraStudy is designed around the core philosophy of Open-Source AI and local inference.

Open-Weight Models: The architecture mimics local execution pipelines (WebGPU / llama.cpp web runtimes) where weights like Llama 3 8B and Phi-3 run locally on device.

Agentic Socratic Framework: Instead of returning static prompt responses, the agent harness dynamically adjusts its pedagogical tone based on the subject (Physics vs. Mathematics vs. Chemistry).

Zero-Dependency Architecture: Built using single-file vanilla JavaScript, Tailwind CSS, and embedded UI state management so Maya can open it locally as an .html file even when her Wi-Fi is turned off.

Why Does Open Innovation Matter?

Open innovation was non-negotiable for what I built for three crucial reasons:

Absolute Data Privacy: Teenagers shouldn't have their personal academic weak spots, grades, and study queries logged on corporate cloud servers. Open-source AI running locally keeps Maya's data 100% on her device.

Offline Freedom: Maya frequently studies during late-night hours or on flights/commutes where Wi-Fi is spotty or absent. Local open-weight models work anywhere with zero internet dependency.

Zero Cost & Complete Customization: Closed APIs impose strict rate limits, subscription fees, and black-box behavioral restrictions. Open-source models allowed me to customize system prompts specifically for ICSE board pedagogy for free.

My Agent Session

(Built collaboratively using intelligent coding agents and local web development tools to craft a polished, distraction-free learning environment tailored to Maya's exact curriculum needs.)

Prize Categories

Open-Source AI Integration (Running local open-weight model concepts & offline-first agent harnesses)

Build for a Friend (Tailored explicitly to solve 11th-grade board exam stress for Maya)