Spaces:
Running
Running
| ## 🛡️ CodeSentry Frontend — AI Security Copilot | |
| > AMD Developer Hackathon 2026 — Track 1: AI Agents & Agentic Workflows | |
| **CodeSentry** is an enterprise-grade AI security intelligence platform. Built for the modern agentic workflow, it orchestrates multiple specialized AI agents to scan, analyze, and remediate security threats in real-time. | |
| --- | |
| ## ⚡ Why CodeSentry? | |
| In an era of AI-generated code, vulnerabilities move faster than human reviewers. CodeSentry provides: | |
| - **Agentic Intelligence**: Not just a static scanner. Three specialized agents (Security, Performance, Fix) reason over your code like a senior security team. | |
| - **Cinematic Experience**: A futuristic SOC-style dashboard designed for high-stakes security monitoring. | |
| - **AMD MI300X Live Metrics**: Real-time hardware telemetry (GPU Util, VRAM, Temp, Power, Bandwidth) streamed directly to the dashboard. | |
| - **CUDA → ROCm Migration Advisor**: Scans code for CUDA-specific patterns and provides actionable ROCm migration guidance with an AMD Compatibility Score. | |
| - **Privacy-First**: Optimized for the AMD ecosystem, ensuring high-performance local inference. Your proprietary code never leaves your network. | |
| - **Instant Remediation**: Don't just find bugs—fix them. Get PR-ready patches in seconds. | |
| --- | |
| ## ✨ Demo Flow | |
| 1. **Clone** this repo | |
| 2. **Run** `npm install && npm run dev` | |
| 3. **Open** `http://localhost:5173` | |
| 4. **Click** "Launch Security Scan" — demo runs in mock mode with no backend needed. You will see simulated AMD metrics and migration findings! | |
| --- | |
| ## 🏗️ Architecture | |
| ``` | |
| Frontend (Vite + React) Backend (FastAPI + Python) | |
| ┌────────────────────┐ ┌──────────────────────────┐ | |
| │ Landing Page │ │ POST /api/scan │ | |
| │ Analysis View ───┼─SSE──│ GET /api/scan/stream │ | |
| │ Report Page │ │ │ | |
| └────────────────────┘ │ Security Agent │ | |
| │ Performance Agent │ | |
| │ AMD Migration Advisor │ | |
| │ Fix Agent │ | |
| │ AMD Metrics Collector │ | |
| └──────────────────────────┘ | |
| ``` | |
| ## 🤖 AI Agents & Tools | |
| | Component | Responsibilities | Output | | |
| |-----------|-----------------|--------| | |
| | **Security Agent** | SQL injection, hardcoded secrets, unsafe eval, pickle deserialization, weak hashing | CWE-mapped findings with severity | | |
| | **Performance Agent** | N+1 queries, memory leaks, GPU inefficiencies, FP32 waste | Optimization suggestions | | |
| | **Fix Agent** | Generates before/after patches for all fixable findings | Downloadable diffs | | |
| | **AMD Migration Advisor** | Detects CUDA APIs (nvidia-smi, cudnn, etc) | Compatibility score + ROCm fixes | | |
| | **AMD Metrics Collector**| Polls `rocm-smi` every 2s for hardware stats | Real-time GPU telemetry | | |
| --- | |
| ## 🚀 Quick Start | |
| ### Frontend Only (Mock Mode — demo-safe) | |
| ```bash | |
| npm install | |
| npm run dev | |
| # Open http://localhost:5173 | |
| # VITE_MOCK_MODE=true by default | |
| ``` | |
| ### Full Stack (Frontend + Backend) | |
| ```bash | |
| # Terminal 1 — Frontend | |
| npm install && npm run dev | |
| # Terminal 2 — Backend | |
| cd backend | |
| pip install -r requirements.txt | |
| uvicorn main:app --reload --port 8000 | |
| # Then set in .env: | |
| # VITE_MOCK_MODE=false | |
| ``` | |
| --- | |
| ## 🔧 Environment Variables | |
| | Variable | Default | Description | | |
| |----------|---------|-------------| | |
| | `VITE_MOCK_MODE` | `true` | Use mock data (no backend needed) | | |
| | `VITE_API_URL` | `http://localhost:8000` | Backend API URL | | |
| --- | |
| ## 🔒 Privacy-First Design | |
| - **Zero data retention** — no code stored after session | |
| - **Local inference** — all analysis on-device via vLLM | |
| - **No external API calls** — code never leaves your machine | |
| - **Session data wiped** on completion | |
| - **Cryptographic Audit** — signed ZDR certificates generated | |
| --- | |
| ## 🎨 Tech Stack | |
| | Layer | Technology | | |
| |-------|-----------| | |
| | Frontend | Vite + React 18 | | |
| | Styling | Vanilla CSS with custom design system (`index.css`) | | |
| | Charts | Chart.js + react-chartjs-2 | | |
| | Fonts | Syne (headings) + JetBrains Mono (code) | | |
| | Streaming | Server-Sent Events (SSE) | | |
| --- | |
| ## 📁 Project Structure | |
| ``` | |
| codesentry-frontend/ | |
| ├── src/ | |
| │ ├── components/ | |
| │ │ ├── LandingPage.jsx # Hero + inputs | |
| │ │ ├── AnalysisView.jsx # Live analysis split-panel | |
| │ │ ├── ReportView.jsx # Full report + exports | |
| │ │ ├── AgentCard.jsx # Agent status card | |
| │ │ ├── FindingCard.jsx # Expandable finding | |
| │ │ ├── SeverityBadge.jsx # Severity indicator | |
| │ │ ├── SeverityChart.jsx # Donut chart | |
| │ │ ├── PrivacyCertificate.jsx | |
| │ │ ├── AMDMetricsCard.jsx # Live GPU telemetry card | |
| │ │ ├── AMDMigrationPanel.jsx # ROCm compatibility report | |
| │ │ └── ParticleBackground.jsx | |
| │ ├── context/ | |
| │ │ └── ScanContext.jsx # Global state + SSE reducers | |
| │ ├── services/ | |
| │ │ ├── scanService.js # SSE client | |
| │ │ └── mockService.js # Mock replay engine (simulates AMD data) | |
| │ └── index.css # Cyberpunk design system | |
| ├── public/ | |
| │ ├── mock_analysis.json # Demo data payload | |
| │ └── background.png # Cyberpunk UI background | |
| └── .env # Environment config | |
| ``` | |