CoolFace
Apppublic

sweta-chovatiya/AI-code-Explainer

sourceHugging Facemitupdated 9mo agoView on Hugging Face
0likes
App README

๐Ÿง  AI Code Explainer

Analyze, understand, and improve your code with AI

A production-ready tool that uses AI to explain code, analyze complexity, detect security issues, generate documentation, and visualize code flow.

Python Streamlit Groq License


โœจ Features

๐Ÿ“– Code Explanation

  • โ€”High-Level Summary: Understand what code does at a glance
  • โ€”Line-by-Line Walkthrough: Step-by-step explanation of each line
  • โ€”ELI5 Mode: Simple explanations with real-world analogies
  • โ€”Audience Levels: Beginner, Intermediate, Expert

๐Ÿ“Š Code Analysis

  • โ€”Complexity Analysis: Time & Space complexity (Big O notation)
  • โ€”Security Scan: Detect common vulnerabilities (SQL injection, hardcoded keys, etc.)
  • โ€”Best Practices Review: PEP8 compliance, naming conventions, code smells

๐Ÿ“ˆ Visualization

  • โ€”Flowchart Generation: Visual representation of code logic
  • โ€”Dependency Graphs: See which functions call which
  • โ€”Mermaid Diagrams: Interactive, copy-ready diagrams

๐Ÿ”„ Code Improvement

  • โ€”Refactoring Suggestions: Improve readability, performance, or maintainability
  • โ€”Before/After Comparison: Side-by-side view of changes
  • โ€”Docstring Generation: Auto-generate documentation in multiple styles

๐Ÿ’ฌ Interactive Chat

  • โ€”Ask Questions: "Why did you use a while loop here?"
  • โ€”Context-Aware: Remembers the conversation history
  • โ€”Deep Understanding: Get detailed answers about specific code sections

๐Ÿš€ Quick Start

Prerequisites

  • โ€”Python 3.10+
  • โ€”Groq API Key (free tier available)

Option 1: Run Locally with uv (Recommended)

bash
# Clone the repository
git clone https://github.com/your-repo/ai-code-explainer.git
cd ai-code-explainer

# Create virtual environment with uv
uv venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Install dependencies
uv pip install -e .

# Copy environment template and add your API key
cp .env.example .env
# Edit .env and add your GROQ_API_KEY

# Run the application
streamlit run src/streamlit_app.py

Option 2: Run with Docker

bash
# Clone the repository
git clone https://github.com/your-repo/ai-code-explainer.git
cd ai-code-explainer

# Copy environment template
cp .env.example .env
# Edit .env and add your GROQ_API_KEY

# Run with Docker Compose (Direct Mode - Default)
docker-compose up --build

# Access at http://localhost:7860

Option 3: Deploy to Hugging Face Spaces

  1. 1.Fork this repository
  2. 2.Create a new Space on Hugging Face
  3. 3.Select "Docker" as the SDK
  4. 4.Add your GROQ_API_KEY as a secret in Space settings
  5. 5.Push to your Space repository

๐Ÿ—๏ธ Architecture

This project follows a "Direct-First" Hybrid Architecture:

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                    AI Code Explainer                        โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚                                                             โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”         โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”‚
โ”‚  โ”‚   Streamlit     โ”‚         โ”‚       Backend           โ”‚   โ”‚
โ”‚  โ”‚   Frontend      โ”‚         โ”‚                         โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚  Direct โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”    โ”‚   โ”‚
โ”‚  โ”‚  components.py  โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ–บโ”‚   services.py   โ”‚    โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚  Import โ”‚  โ”‚  (Business Logic)โ”‚   โ”‚   โ”‚
โ”‚  โ”‚  streamlit_app  โ”‚         โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜    โ”‚   โ”‚
โ”‚  โ”‚     .py         โ”‚         โ”‚           โ”‚             โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚   OR    โ”‚           โ–ผ             โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚         โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”    โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚   HTTP  โ”‚  โ”‚    api.py       โ”‚    โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ–บโ”‚   (FastAPI)     โ”‚    โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚ (--mode โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜    โ”‚   โ”‚
โ”‚  โ”‚                 โ”‚   api)  โ”‚                         โ”‚   โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜         โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ”‚
โ”‚                                                             โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Modes

ModeDescriptionUse Case
Direct Mode (Default)Frontend imports backend services directlyHF Spaces, local dev
API ModeFrontend calls FastAPI endpoints via HTTPMicroservices, scaling

Directory Structure

ai-code-explainer/
โ”œโ”€โ”€ .env.example           # Environment template
โ”œโ”€โ”€ Dockerfile             # Streamlit container (HF Spaces)
โ”œโ”€โ”€ Dockerfile.api         # FastAPI container (API mode)
โ”œโ”€โ”€ docker-compose.yml     # Multi-container orchestration
โ”œโ”€โ”€ pyproject.toml         # uv/pip project configuration
โ”œโ”€โ”€ requirements.txt       # pip-compatible dependencies
โ”œโ”€โ”€ README.md              # This file
โ””โ”€โ”€ src/
    โ”œโ”€โ”€ __init__.py
    โ”œโ”€โ”€ streamlit_app.py   # Main entry point
    โ”œโ”€โ”€ frontend/
    โ”‚   โ”œโ”€โ”€ __init__.py
    โ”‚   โ””โ”€โ”€ components.py  # Reusable UI components
    โ””โ”€โ”€ backend/
        โ”œโ”€โ”€ __init__.py
        โ”œโ”€โ”€ config.py      # Centralized configuration
        โ”œโ”€โ”€ services.py    # Business logic (AI interactions)
        โ””โ”€โ”€ api.py         # FastAPI endpoints

โš™๏ธ Configuration

Environment Variables

VariableRequiredDefaultDescription
GROQ_API_KEYโœ… Yes-Your Groq API key
GROQ_BASE_URLNohttps://api.groq.comAPI base URL (no /openai/v1)
GROQ_MODEL_NAMENollama-3.3-70b-versatileAI model to use
MAX_CODE_LINESNo500Max lines to analyze

Available Models

ModelSpeedQualityBest For
llama-3.3-70b-versatileโญโญโญโญโญโญโญโญComplex code, detailed explanations
llama-3.1-8b-instantโญโญโญโญโญโญโญโญQuick analysis, simple code
llama-3.1-70b-versatileโญโญโญโญโญโญโญAlternative to 3.3
mixtral-8x7b-32768โญโญโญโญโญโญโญโญLarge files (32K context)
gemma2-9b-itโญโญโญโญโญโญโญEfficient, balanced

๐ŸŽฏ Use Cases

๐ŸŽ“ For Students

  • โ€”Understand complex algorithms with ELI5 explanations
  • โ€”Learn from flowchart visualizations
  • โ€”Get analogies that make concepts click

๐Ÿ‘จโ€๐Ÿ’ป For Developers

  • โ€”Document legacy code with auto-generated docstrings
  • โ€”Review code for best practices
  • โ€”Refactor for better readability

๐ŸŽฏ For Interview Prep

  • โ€”Analyze time/space complexity of solutions
  • โ€”Get optimization suggestions
  • โ€”Understand algorithmic patterns

๐Ÿ”’ For Security Review

  • โ€”Detect common vulnerabilities
  • โ€”Find hardcoded secrets
  • โ€”Review for injection risks

๐Ÿ”ง API Mode

For microservices architecture or when you need to scale the backend separately:

bash
# Start both API and Streamlit in API mode
docker-compose --profile api-mode up --build

# Or manually:
# Terminal 1: Start FastAPI
uvicorn src.backend.api:app --host 0.0.0.0 --port 8000

# Terminal 2: Start Streamlit in API mode
streamlit run src/streamlit_app.py -- --mode api --api-url http://localhost:8000

API Endpoints

EndpointMethodDescription
/healthGETHealth check
/modelsGETList available models
/explainPOSTGenerate code explanation
/analyze-complexityPOSTAnalyze time/space complexity
/check-securityPOSTSecurity vulnerability scan
/review-practicesPOSTBest practices review
/generate-docstringPOSTGenerate documentation
/generate-flowchartPOSTGenerate Mermaid flowchart
/refactorPOSTSuggest refactoring
/chatPOSTInteractive Q&A

API documentation available at /docs when running in API mode.


๐Ÿ›ก๏ธ Safety

  • โ€”โœ… No Code Execution: This tool only analyzes code, never runs it
  • โ€”โœ… No Storage: Code is sent to Groq's API but not stored permanently
  • โ€”โœ… Input Limits: Configurable limits on code size to prevent abuse
  • โ€”โœ… API Key Protection: Keys stored securely, never exposed in UI

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. 1.Fork the repository
  2. 2.Create your feature branch (git checkout -b feature/AmazingFeature)
  3. 3.Commit your changes (git commit -m 'Add some AmazingFeature')
  4. 4.Push to the branch (git push origin feature/AmazingFeature)
  5. 5.Open a Pull Request

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


๐Ÿ™ Acknowledgments

  • โ€”Groq for blazing-fast LLM inference
  • โ€”Streamlit for the amazing web framework
  • โ€”FastAPI for the robust API framework
  • โ€”Hugging Face for hosting and deployment

<div align="center"> <p>Built with โค๏ธ using Streamlit and Groq AI</p> <p> <a href="https://github.com/your-repo/ai-code-explainer">GitHub</a> โ€ข <a href="https://huggingface.co/spaces/your-space/ai-code-explainer">Demo</a> โ€ข <a href="https://console.groq.com">Get API Key</a> </p> </div>