sweta-chovatiya/AI-code-Explainer
๐ง 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.
โจ 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)
# 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.pyOption 2: Run with Docker
# 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:7860Option 3: Deploy to Hugging Face Spaces
- Fork this repository
- Create a new Space on Hugging Face
- Select "Docker" as the SDK
- Add your
GROQ_API_KEYas a secret in Space settings - 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
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
Available Models
๐ฏ 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:
# 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:8000API Endpoints
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.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - 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>
