Upload folder using huggingface_hub

.gitignore

@@ -58,7 +58,6 @@ backend/data/storage/
 backend/data/temp/
 backend/data/tts_cache/
 backend/data/agents/
-data/
 *.db
 
 # Test data (optional - uncomment if you want to include)

Dockerfile

@@ -1,45 +1,31 @@
-# Stage 1: Build Frontend
-FROM node:18-alpine AS frontend-builder
-WORKDIR /app/frontend
-COPY frontend/package*.json ./
-RUN npm ci || npm install
-COPY frontend/ ./
-ENV REACT_APP_API_URL=""
-RUN npm run build
-
-# Stage 2: Python Backend Runtime
-FROM python:3.11-slim
-
-WORKDIR /app
-
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
-    gcc \
-    g++ \
-    postgresql-client \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy requirements and install Python packages
-COPY backend/requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-RUN python -m spacy download en_core_web_sm
-
-# Copy backend application code
-COPY backend/ ./backend/
-
-# Copy built frontend assets into backend/static
-COPY --from=frontend-builder /app/frontend/build/ ./backend/static/
-
-# Entry point environment
-ENV PYTHONPATH=/app/backend
-
-# Set environment for model caching to /tmp (only writable dir in HF Spaces)
-ENV HF_HOME=/tmp/.cache/huggingface
-ENV FASTEMBED_CACHE_PATH=/tmp/.cache/fastembed
-ENV SENTENCE_TRANSFORMERS_HOME=/tmp/.cache/sentence-transformers
-
-# Expose port 7860 (required by Hugging Face Spaces)
-EXPOSE 7860
-
-# Run FastAPI with uvicorn
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    postgresql-client \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python packages
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+RUN python -m spacy download en_core_web_sm
+
+# Copy application code from backend directory
+COPY backend/ ./backend/
+# Main entry point needs to be at root level for some runners, or we point pythonpath
+ENV PYTHONPATH=/app/backend
+
+# Set environment for model caching to /tmp (only writable dir in HF Spaces)
+ENV HF_HOME=/tmp/.cache/huggingface
+ENV FASTEMBED_CACHE_PATH=/tmp/.cache/fastembed
+ENV SENTENCE_TRANSFORMERS_HOME=/tmp/.cache/sentence-transformers
+
+# Expose port 7860 (required by Hugging Face Spaces)
+EXPOSE 7860
+
+# Run FastAPI with uvicorn (pointing to nested app)
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -3,7 +3,7 @@ title: Mexar
 emoji: 🧠
 colorFrom: blue
 colorTo: indigo
-sdk: static
+sdk: docker
 pinned: false
 license: mit
 ---

backend/main.py

@@ -1,193 +1,172 @@
-"""
-MEXAR Core Engine - FastAPI Backend Application
-Main entry point for the MEXAR Phase 2 API.
-
-This is a clean, minimal main.py that only includes routers.
-All endpoints are handled by the api/ modules.
-"""
-
-import os
-import logging
-from pathlib import Path
-from contextlib import asynccontextmanager
-
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
-from dotenv import load_dotenv
-
-# Load environment variables
-load_dotenv()
-
-# Configure logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
-)
-logger = logging.getLogger(__name__)
-
-# Ensure data directories exist
-DATA_DIRS = [
-    Path("data/storage"),
-    Path("data/temp"),
-]
-for dir_path in DATA_DIRS:
-    dir_path.mkdir(parents=True, exist_ok=True)
-
-
-# Lifespan context manager
-@asynccontextmanager
-async def lifespan(app: FastAPI):
-    """Application lifespan handler - database initialization."""
-    logger.info("MEXAR Core Engine starting up...")
-    
-    # Initialize database tables
-    try:
-        from core.database import engine, Base
-        from models.user import User
-        from models.agent import Agent, CompilationJob
-        from models.conversation import Conversation, Message
-        from models.chunk import DocumentChunk
-        from sqlalchemy import text
-
-        # Enable vector extension only for postgres
-        if "sqlite" not in str(engine.url):
-            try:
-                with engine.connect() as conn:
-                    conn.execute(text("CREATE EXTENSION IF NOT EXISTS vector"))
-                    conn.commit()
-            except Exception as vector_err:
-                logger.warning(f"Vector extension check skipped: {vector_err}")
-
-        Base.metadata.create_all(bind=engine)
-        logger.info("Database tables created/verified successfully")
-    except Exception as e:
-        logger.warning(f"Database initialization: {e}")
-    
-    yield
-    logger.info("MEXAR Core Engine shutting down...")
-
-
-# Create FastAPI app
-app = FastAPI(
-    title="MEXAR Core Engine",
-    description="Multimodal Explainable AI Reasoning Assistant - Phase 2",
-    version="2.0.0",
-    lifespan=lifespan
-)
-
-# Configure CORS
-# Configure CORS
-# CRITICAL: Configure CORS for Vercel frontend
-FRONTEND_URL = os.getenv("FRONTEND_URL", "http://localhost:3000")
-
-allow_origins = [
-    "*", 
-    FRONTEND_URL, 
-    "https://*.vercel.app", 
-    "http://localhost:3000",
-    "http://localhost:3001"
-]
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=allow_origins,
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Import and include Phase 2 routers
-from api import auth, agents, chat, compile, websocket, admin, prompts, diagnostics
-
-app.include_router(auth.router)
-app.include_router(agents.router)
-app.include_router(chat.router)
-app.include_router(compile.router)
-app.include_router(websocket.router)
-app.include_router(admin.router)
-app.include_router(prompts.router)
-app.include_router(diagnostics.router)
-
-
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
-
-STATIC_DIR = Path(__file__).parent / "static"
-
-# Mount static subfolder for compiled CSS/JS assets if present
-if (STATIC_DIR / "static").exists():
-    app.mount("/static", StaticFiles(directory=str(STATIC_DIR / "static")), name="static_assets")
-
-
-# ===== CORE UTILITY ENDPOINTS =====
-
-@app.get("/api/health")
-async def health_check():
-    """Health check endpoint."""
-    return {
-        "status": "healthy",
-        "groq_configured": bool(os.getenv("GROQ_API_KEY"))
-    }
-
-
-@app.get("/{full_path:path}")
-async def serve_spa(full_path: str):
-    """Serve React SPA frontend for root and all client-side routes."""
-    # Do not intercept API, docs, or WebSocket endpoints
-    if full_path.startswith("api/") or full_path.startswith("ws/") or full_path in ["docs", "redoc", "openapi.json"]:
-        return JSONResponse(status_code=404, content={"detail": "Not found"})
-
-    # Direct static file request (e.g. favicon.ico, asset-manifest.json)
-    if full_path:
-        file_path = STATIC_DIR / full_path
-        if file_path.exists() and file_path.is_file():
-            return FileResponse(file_path)
-
-    # Fallback to index.html for SPA routing
-    index_path = STATIC_DIR / "index.html"
-    if index_path.exists():
-        return FileResponse(index_path, media_type="text/html")
-
-    return JSONResponse(
-        status_code=404,
-        content={
-            "name": "MEXAR Core Engine",
-            "version": "2.0.0",
-            "status": "operational",
-            "docs": "/docs"
-        }
-    )
-
-
-
-
-
-
-# ===== ERROR HANDLERS =====
-
-@app.exception_handler(Exception)
-async def global_exception_handler(request, exc):
-    """Global exception handler."""
-    logger.error(f"Unhandled exception: {exc}")
-    return JSONResponse(
-        status_code=500,
-        content={
-            "success": False,
-            "error": "Internal server error",
-            "detail": str(exc)
-        }
-    )
-
-
-# ===== MAIN ENTRY POINT =====
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(
-        "main:app",
-        host="0.0.0.0",
-        port=8000,
-        reload=True,
-        log_level="info"
-    )
+"""
+MEXAR Core Engine - FastAPI Backend Application
+Main entry point for the MEXAR Phase 2 API.
+
+This is a clean, minimal main.py that only includes routers.
+All endpoints are handled by the api/ modules.
+"""
+
+import os
+import logging
+from pathlib import Path
+from contextlib import asynccontextmanager
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Ensure data directories exist
+DATA_DIRS = [
+    Path("data/storage"),
+    Path("data/temp"),
+]
+for dir_path in DATA_DIRS:
+    dir_path.mkdir(parents=True, exist_ok=True)
+
+
+# Lifespan context manager
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Application lifespan handler - database initialization."""
+    logger.info("MEXAR Core Engine starting up...")
+    
+    # Initialize database tables
+    try:
+        from core.database import engine, Base
+        from models.user import User
+        from models.agent import Agent, CompilationJob
+        from models.conversation import Conversation, Message
+        from models.chunk import DocumentChunk
+        from sqlalchemy import text
+
+        # Enable vector extension only for postgres
+        if "sqlite" not in str(engine.url):
+            try:
+                with engine.connect() as conn:
+                    conn.execute(text("CREATE EXTENSION IF NOT EXISTS vector"))
+                    conn.commit()
+            except Exception as vector_err:
+                logger.warning(f"Vector extension check skipped: {vector_err}")
+
+        Base.metadata.create_all(bind=engine)
+        logger.info("Database tables created/verified successfully")
+    except Exception as e:
+        logger.warning(f"Database initialization: {e}")
+    
+    yield
+    logger.info("MEXAR Core Engine shutting down...")
+
+
+# Create FastAPI app
+app = FastAPI(
+    title="MEXAR Core Engine",
+    description="Multimodal Explainable AI Reasoning Assistant - Phase 2",
+    version="2.0.0",
+    lifespan=lifespan
+)
+
+# Configure CORS
+# Configure CORS
+# CRITICAL: Configure CORS for Vercel frontend
+FRONTEND_URL = os.getenv("FRONTEND_URL", "http://localhost:3000")
+
+allow_origins = [
+    "*", 
+    FRONTEND_URL, 
+    "https://*.vercel.app", 
+    "http://localhost:3000",
+    "http://localhost:3001"
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=allow_origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Import and include Phase 2 routers
+from api import auth, agents, chat, compile, websocket, admin, prompts, diagnostics
+
+app.include_router(auth.router)
+app.include_router(agents.router)
+app.include_router(chat.router)
+app.include_router(compile.router)
+app.include_router(websocket.router)
+app.include_router(admin.router)
+app.include_router(prompts.router)
+app.include_router(diagnostics.router)
+
+
+# ===== CORE UTILITY ENDPOINTS =====
+
+@app.get("/")
+async def root():
+    """Root endpoint - serves landing page."""
+    from fastapi.responses import FileResponse
+    from pathlib import Path
+    
+    html_path = Path(__file__).parent / "static" / "index.html"
+    if html_path.exists():
+        return FileResponse(html_path, media_type="text/html")
+    else:
+        # Fallback to JSON if HTML not found
+        return {
+            "name": "MEXAR Core Engine",
+            "version": "2.0.0",
+            "status": "operational",
+            "docs": "/docs"
+        }
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint."""
+    return {
+        "status": "healthy",
+        "groq_configured": bool(os.getenv("GROQ_API_KEY"))
+    }
+
+
+
+
+
+# ===== ERROR HANDLERS =====
+
+@app.exception_handler(Exception)
+async def global_exception_handler(request, exc):
+    """Global exception handler."""
+    logger.error(f"Unhandled exception: {exc}")
+    return JSONResponse(
+        status_code=500,
+        content={
+            "success": False,
+            "error": "Internal server error",
+            "detail": str(exc)
+        }
+    )
+
+
+# ===== MAIN ENTRY POINT =====
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=True,
+        log_level="info"
+    )

backend/static/index.html

@@ -1 +1,957 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#6366f1"/><meta name="description" content="MEXAR ULTIMATE - Advanced Multimodal AI Reasoning Engine"/><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><title>MEXAR Ultimate</title><script defer="defer" src="/static/js/main.c544f0ac.js"></script><link href="/static/css/main.c45c55fa.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MEXAR — Multimodal Explainable AI Reasoning Assistant</title>
+    <meta name="description" content="Build domain-specific AI agents from your documents. Grounded, cited, and faithfully scored answers with full explainability.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #080c14;
+            --bg-secondary: #0d1420;
+            --bg-card: #111827;
+            --bg-card-hover: #1a2236;
+            --border: rgba(99, 120, 255, 0.15);
+            --border-bright: rgba(99, 120, 255, 0.4);
+            --accent-blue: #6378ff;
+            --accent-cyan: #00d4ff;
+            --accent-purple: #a855f7;
+            --accent-green: #10b981;
+            --accent-orange: #f59e0b;
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --text-muted: #475569;
+            --glow-blue: rgba(99, 120, 255, 0.3);
+            --glow-cyan: rgba(0, 212, 255, 0.2);
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        /* ── Animated gradient background ── */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: 
+                radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99,120,255,0.08) 0%, transparent 60%),
+                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168,85,247,0.06) 0%, transparent 60%),
+                radial-gradient(ellipse 50% 30% at 50% 50%, rgba(0,212,255,0.04) 0%, transparent 60%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        /* ── NAV ── */
+        nav {
+            padding: 1.5rem 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .nav-logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            font-size: 1.35rem;
+            font-weight: 800;
+            letter-spacing: -0.5px;
+        }
+
+        .nav-logo .brain { font-size: 1.6rem; }
+
+        .nav-logo .text-gradient {
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .nav-links { display: flex; gap: 0.75rem; align-items: center; }
+
+        .nav-link {
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            text-decoration: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            transition: all 0.2s;
+            border: 1px solid transparent;
+        }
+
+        .nav-link:hover {
+            color: var(--text-primary);
+            background: rgba(255,255,255,0.06);
+            border-color: var(--border);
+        }
+
+        .nav-link.primary {
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            color: white;
+            border: none;
+        }
+
+        .nav-link.primary:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 20px var(--glow-blue);
+        }
+
+        /* ── HERO ── */
+        .hero {
+            padding: 5rem 0 4rem;
+            text-align: center;
+        }
+
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 1rem;
+            border-radius: 100px;
+            background: rgba(99,120,255,0.1);
+            border: 1px solid rgba(99,120,255,0.3);
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: var(--accent-cyan);
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            margin-bottom: 2rem;
+        }
+
+        .hero-badge .dot {
+            width: 6px; height: 6px;
+            border-radius: 50%;
+            background: var(--accent-cyan);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+
+        .hero h1 {
+            font-size: clamp(2.8rem, 6vw, 5rem);
+            font-weight: 900;
+            line-height: 1.05;
+            letter-spacing: -2px;
+            margin-bottom: 1.5rem;
+        }
+
+        .hero h1 .line1 { display: block; color: var(--text-primary); }
+        .hero h1 .line2 {
+            display: block;
+            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--accent-purple) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .hero-subtitle {
+            font-size: 1.15rem;
+            color: var(--text-secondary);
+            max-width: 600px;
+            margin: 0 auto 2.5rem;
+            line-height: 1.7;
+            font-weight: 400;
+        }
+
+        .hero-cta {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 3.5rem;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.85rem 1.8rem;
+            border-radius: 10px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.25s;
+            cursor: pointer;
+            border: none;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            color: white;
+            box-shadow: 0 4px 24px var(--glow-blue);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 32px rgba(99,120,255,0.5);
+        }
+
+        .btn-secondary {
+            background: rgba(255,255,255,0.05);
+            color: var(--text-primary);
+            border: 1px solid var(--border);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255,255,255,0.1);
+            border-color: var(--border-bright);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--text-secondary);
+            border: 1px solid var(--border);
+        }
+
+        .btn-outline:hover {
+            color: var(--text-primary);
+            border-color: var(--border-bright);
+        }
+
+        /* ── STATS ROW ── */
+        .stats-row {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1px;
+            background: var(--border);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            margin-bottom: 5rem;
+        }
+
+        .stat-item {
+            background: var(--bg-card);
+            padding: 1.5rem;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 1.8rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            display: block;
+            margin-bottom: 0.25rem;
+        }
+
+        .stat-label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        /* ── PIPELINE SECTION ── */
+        .section { margin-bottom: 5rem; }
+
+        .section-label {
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--accent-cyan);
+            margin-bottom: 0.75rem;
+        }
+
+        .section-title {
+            font-size: 2rem;
+            font-weight: 800;
+            letter-spacing: -0.5px;
+            margin-bottom: 0.75rem;
+        }
+
+        .section-subtitle {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            line-height: 1.7;
+            max-width: 560px;
+            margin-bottom: 2.5rem;
+        }
+
+        /* Pipeline steps */
+        .pipeline {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .pipeline-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 1.25rem;
+            padding: 1.25rem 1.5rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            transition: all 0.25s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .pipeline-step::before {
+            content: '';
+            position: absolute;
+            left: 0; top: 0; bottom: 0;
+            width: 3px;
+            background: linear-gradient(180deg, var(--accent-blue), var(--accent-cyan));
+            opacity: 0;
+            transition: opacity 0.25s;
+        }
+
+        .pipeline-step:hover {
+            border-color: var(--border-bright);
+            background: var(--bg-card-hover);
+        }
+
+        .pipeline-step:hover::before { opacity: 1; }
+
+        .step-number {
+            min-width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: rgba(99,120,255,0.15);
+            border: 1px solid rgba(99,120,255,0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.8rem;
+            font-weight: 700;
+            color: var(--accent-blue);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .step-content { flex: 1; }
+
+        .step-title {
+            font-size: 0.95rem;
+            font-weight: 600;
+            margin-bottom: 0.3rem;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+
+        .step-desc {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            line-height: 1.5;
+        }
+
+        .step-tag {
+            font-size: 0.72rem;
+            font-weight: 600;
+            padding: 0.2rem 0.55rem;
+            border-radius: 6px;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .tag-blue { background: rgba(99,120,255,0.15); color: var(--accent-blue); }
+        .tag-cyan { background: rgba(0,212,255,0.12); color: var(--accent-cyan); }
+        .tag-green { background: rgba(16,185,129,0.12); color: var(--accent-green); }
+        .tag-purple { background: rgba(168,85,247,0.12); color: var(--accent-purple); }
+        .tag-orange { background: rgba(245,158,11,0.12); color: var(--accent-orange); }
+
+        /* ── FEATURES GRID ── */
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.25rem;
+        }
+
+        .feature-card {
+            padding: 1.75rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature-card::after {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .feature-card:hover {
+            border-color: var(--border-bright);
+            background: var(--bg-card-hover);
+            transform: translateY(-2px);
+        }
+
+        .feature-card:hover::after { opacity: 1; }
+
+        .feature-icon {
+            font-size: 1.8rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+
+        .feature-title {
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .feature-desc {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        /* ── ENDPOINTS ── */
+        .endpoints-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            overflow: hidden;
+        }
+
+        .endpoints-table th {
+            padding: 0.9rem 1.25rem;
+            background: rgba(99,120,255,0.08);
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.07em;
+            color: var(--text-muted);
+            text-align: left;
+        }
+
+        .endpoints-table td {
+            padding: 0.85rem 1.25rem;
+            font-size: 0.875rem;
+            border-top: 1px solid var(--border);
+            color: var(--text-secondary);
+        }
+
+        .endpoints-table tr:hover td {
+            background: rgba(255,255,255,0.02);
+            color: var(--text-primary);
+        }
+
+        .method-badge {
+            display: inline-block;
+            padding: 0.2rem 0.55rem;
+            border-radius: 5px;
+            font-size: 0.72rem;
+            font-weight: 700;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .method-get { background: rgba(16,185,129,0.15); color: var(--accent-green); }
+        .method-post { background: rgba(99,120,255,0.15); color: var(--accent-blue); }
+        .method-ws { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
+        .method-delete { background: rgba(239,68,68,0.15); color: #f87171; }
+
+        .endpoint-path {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.85rem;
+            color: var(--text-primary);
+        }
+
+        /* ── TECH STACK ── */
+        .tech-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .tech-card {
+            padding: 1.25rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            text-align: center;
+            transition: all 0.25s;
+        }
+
+        .tech-card:hover {
+            border-color: var(--border-bright);
+            transform: translateY(-2px);
+        }
+
+        .tech-name {
+            font-size: 0.9rem;
+            font-weight: 600;
+            margin-bottom: 0.3rem;
+        }
+
+        .tech-desc {
+            font-size: 0.78rem;
+            color: var(--text-muted);
+        }
+
+        /* ── FALLBACK CHAIN ── */
+        .fallback-chain {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 0;
+            padding: 1.5rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+        }
+
+        .fallback-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .model-chip {
+            padding: 0.4rem 0.9rem;
+            background: rgba(99,120,255,0.1);
+            border: 1px solid rgba(99,120,255,0.25);
+            border-radius: 8px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--accent-blue);
+            white-space: nowrap;
+        }
+
+        .model-chip.primary { 
+            background: rgba(168,85,247,0.1);
+            border-color: rgba(168,85,247,0.25);
+            color: var(--accent-purple);
+        }
+
+        .arrow-down {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            padding: 0 0.5rem;
+        }
+
+        /* ── FOOTER ── */
+        footer {
+            padding: 2.5rem 0;
+            border-top: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .footer-brand {
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .footer-links { display: flex; gap: 1.5rem; }
+        .footer-link {
+            font-size: 0.875rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .footer-link:hover { color: var(--text-primary); }
+
+        /* ── CODE BLOCK ── */
+        .code-block {
+            background: #0a0e1a;
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 1.25rem 1.5rem;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.82rem;
+            color: #a8c4e0;
+            line-height: 1.7;
+            overflow-x: auto;
+        }
+
+        .code-block .comment { color: #4a6378; }
+        .code-block .key { color: #6378ff; }
+        .code-block .val { color: #10b981; }
+        .code-block .cmd { color: #f59e0b; }
+
+        /* ── Divider ── */
+        .divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
+            margin: 4rem 0;
+        }
+
+        @media (max-width: 768px) {
+            .stats-row { grid-template-columns: repeat(2, 1fr); }
+            .nav-links .nav-link:not(.primary) { display: none; }
+            .hero h1 { letter-spacing: -1px; }
+            footer { flex-direction: column; text-align: center; }
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <!-- NAV -->
+    <nav>
+        <div class="nav-logo">
+            <span class="brain">🧠</span>
+            <span class="text-gradient">MEXAR</span>
+        </div>
+        <div class="nav-links">
+            <a href="/docs" class="nav-link">API Docs</a>
+            <a href="/redoc" class="nav-link">ReDoc</a>
+            <a href="https://github.com/devrajsinh2012/Mexar" class="nav-link" target="_blank">GitHub</a>
+            <a href="https://mexar.vercel.app" class="nav-link primary" target="_blank">Open App →</a>
+        </div>
+    </nav>
+
+    <!-- HERO -->
+    <section class="hero">
+        <div class="hero-badge">
+            <span class="dot"></span>
+            API v2.0.0 · Operational
+        </div>
+
+        <h1>
+            <span class="line1">AI Agents That Know</span>
+            <span class="line2">What They Don't Know</span>
+        </h1>
+
+        <p class="hero-subtitle">
+            Build domain-specific AI agents from your documents.
+            Every answer is grounded in your data, cited with inline references,
+            and scored for hallucination risk using DeBERTa-v3 NLI.
+        </p>
+
+        <div class="hero-cta">
+            <a href="/docs" class="btn btn-primary">📖 Explore API Docs</a>
+            <a href="https://mexar.vercel.app" class="btn btn-secondary" target="_blank">🚀 Launch App</a>
+            <a href="https://github.com/devrajsinh2012/Mexar" class="btn btn-outline" target="_blank">⭐ GitHub</a>
+        </div>
+
+        <!-- STATS -->
+        <div class="stats-row">
+            <div class="stat-item">
+                <span class="stat-value">~1.2s</span>
+                <span class="stat-label">Faithfulness Scoring</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-value">0.907</span>
+                <span class="stat-label">Guardrail F1 Score</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-value">781</span>
+                <span class="stat-label">Indexed Vector Chunks</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-value">5+</span>
+                <span class="stat-label">Groq Model Fallbacks</span>
+            </div>
+        </div>
+    </section>
+
+    <!-- PIPELINE -->
+    <section class="section">
+        <div class="section-label">How It Works</div>
+        <h2 class="section-title">The MEXAR RAG Pipeline</h2>
+        <p class="section-subtitle">
+            Every query goes through a 9-stage intelligent pipeline — from multimodal input
+            all the way to a cited, faithfulness-verified response.
+        </p>
+
+        <div class="pipeline">
+            <div class="pipeline-step">
+                <div class="step-number">01</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🎤 Multimodal Input Processing
+                        <span class="step-tag tag-orange">optional</span>
+                    </div>
+                    <div class="step-desc">Audio → Groq Whisper v3 STT · Images → Groq Vision · Video → OpenCV frame extraction → Vision</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">02</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🔍 Intent &amp; Prompt Analysis
+                        <span class="step-tag tag-blue">LLM</span>
+                    </div>
+                    <div class="step-desc">Parse query intent (factual / analytical / comparative), detect domain topic, optionally rewrite query for retrieval clarity.</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">03</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🛡️ Domain Guardrail Check
+                        <span class="step-tag tag-green">F1 = 0.9072</span>
+                    </div>
+                    <div class="step-desc">TF-IDF cosine similarity vs agent signature + spaCy NER Jaccard overlap. Threshold = 0.25. Out-of-domain queries rejected with explanation — no hallucination.</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">04</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        ⚡ Hybrid Vector + Keyword Retrieval
+                        <span class="step-tag tag-cyan">pgvector + BM25</span>
+                    </div>
+                    <div class="step-desc">Dense: FastEmbed bge-small-en-v1.5 (384-dim) cosine search via pgvector. Sparse: PostgreSQL tsvector BM25 full-text search. Fused via Reciprocal Rank Fusion (RRF): score = Σ 1/(rank + 60).</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">05</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🎯 Cross-Encoder Reranking
+                        <span class="step-tag tag-purple">sentence-transformers</span>
+                    </div>
+                    <div class="step-desc">Re-scores top-20 retrieved candidates using a cross-encoder for precision. Selects final top-5 context chunks for answer generation.</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">06</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🧠 LLM Answer Generation
+                        <span class="step-tag tag-blue">Groq</span>
+                    </div>
+                    <div class="step-desc">System prompt with retrieved context. Multi-model inference: llama-3.3-70b → llama-3.1-8b → mixtral-8x7b → gemma2-9b. Automatic quota fallback.</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">07</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        📎 Source Attribution
+                        <span class="step-tag tag-cyan">citations</span>
+                    </div>
+                    <div class="step-desc">Match answer sentences to source chunks. Assign [1], [2], [3] inline reference markers. Track provenance per claim.</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">08</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        ✅ DeBERTa-v3 Faithfulness Scoring
+                        <span class="step-tag tag-green">NLI</span>
+                    </div>
+                    <div class="step-desc">Extract claims from answer. For each claim-chunk pair: NLI inference (entailment → faithful, contradiction → hallucinated). Batched via torch.inference_mode() — ~1.2s/query (50× speedup vs baseline).</div>
+                </div>
+            </div>
+
+            <div class="pipeline-step">
+                <div class="step-number">09</div>
+                <div class="step-content">
+                    <div class="step-title">
+                        🔬 Explainability Packaging
+                        <span class="step-tag tag-purple">transparent</span>
+                    </div>
+                    <div class="step-desc">Reasoning trace · Confidence breakdown · Sources cited · Guardrail decision log — all surfaced to the frontend UI panel.</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- FEATURES -->
+    <section class="section">
+        <div class="section-label">Capabilities</div>
+        <h2 class="section-title">Everything You Need</h2>
+        <p class="section-subtitle">A complete RAG platform — from document ingestion to explainable, grounded answers.</p>
+
+        <div class="features-grid">
+            <div class="feature-card">
+                <span class="feature-icon">🔍</span>
+                <div class="feature-title">Hybrid Search + RRF Fusion</div>
+                <div class="feature-desc">Vector cosine (pgvector) and BM25 keyword search fused via Reciprocal Rank Fusion for optimal retrieval across all document types.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">✅</span>
+                <div class="feature-title">Faithfulness Verification</div>
+                <div class="feature-desc">DeBERTa-v3-base NLI model scores every answer claim against retrieved context. Quantified hallucination risk, not just vibes.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">🛡️</span>
+                <div class="feature-title">Domain Guardrails</div>
+                <div class="feature-desc">TF-IDF + spaCy NER Jaccard similarity prevents answering out-of-domain questions. Tuned to F1 = 0.9072 at threshold 0.25.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">📎</span>
+                <div class="feature-title">Inline Source Citations</div>
+                <div class="feature-desc">Every sentence references its source chunk with [1], [2] markers. Click any citation to see the exact source text and file name.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">🗣️</span>
+                <div class="feature-title">Multimodal Input</div>
+                <div class="feature-desc">Ask questions via audio (Groq Whisper), upload images for visual Q&A (Groq Vision), or extract info from video frames (OpenCV).</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">🧠</span>
+                <div class="feature-title">Explainability Panel</div>
+                <div class="feature-desc">Full reasoning trace exposed in the UI: retrieval scores, reranker scores, confidence breakdown, guardrail decision, and sources cited.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">🔊</span>
+                <div class="feature-title">Text-to-Speech</div>
+                <div class="feature-desc">ElevenLabs API integration with per-sentence TTS playback. Falls back to Web Speech API automatically.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">⚡</span>
+                <div class="feature-title">Real-time WebSocket Chat</div>
+                <div class="feature-desc">Streaming responses via WebSocket with compilation progress tracking. No polling required.</div>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">📁</span>
+                <div class="feature-title">5 Document Formats</div>
+                <div class="feature-desc">Upload PDF, DOCX, CSV, JSON, or TXT files. Semantic chunking preserves context boundaries for better retrieval quality.</div>
+            </div>
+        </div>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- ENDPOINTS -->
+    <section class="section">
+        <div class="section-label">REST API</div>
+        <h2 class="section-title">API Endpoints</h2>
+        <p class="section-subtitle">Full interactive documentation available at <a href="/docs" style="color: var(--accent-blue); text-decoration: none;">/docs</a></p>
+
+        <table class="endpoints-table">
+            <thead>
+                <tr>
+                    <th>Method</th>
+                    <th>Endpoint</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><td><span class="method-badge method-post">POST</span></td><td class="endpoint-path">/api/auth/register</td><td>Create a new user account</td></tr>
+                <tr><td><span class="method-badge method-post">POST</span></td><td class="endpoint-path">/api/auth/login</td><td>Login and receive JWT bearer token</td></tr>
+                <tr><td><span class="method-badge method-get">GET</span></td><td class="endpoint-path">/api/agents/</td><td>List all compiled agents for current user</td></tr>
+                <tr><td><span class="method-badge method-post">POST</span></td><td class="endpoint-path">/api/agents/</td><td>Create a new agent</td></tr>
+                <tr><td><span class="method-badge method-post">POST</span></td><td class="endpoint-path">/api/compile/</td><td>Start knowledge compilation from uploaded files</td></tr>
+                <tr><td><span class="method-badge method-get">GET</span></td><td class="endpoint-path">/api/compile/{job_id}</td><td>Poll compilation job status + progress</td></tr>
+                <tr><td><span class="method-badge method-post">POST</span></td><td class="endpoint-path">/api/chat/</td><td>Send a query to an agent (REST)</td></tr>
+                <tr><td><span class="method-badge method-ws">WS</span></td><td class="endpoint-path">/ws/chat/{agent_id}</td><td>Real-time streaming chat via WebSocket</td></tr>
+                <tr><td><span class="method-badge method-get">GET</span></td><td class="endpoint-path">/api/health</td><td>Health check — returns API + Groq status</td></tr>
+            </tbody>
+        </table>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- GROQ FALLBACK -->
+    <section class="section">
+        <div class="section-label">Reliability</div>
+        <h2 class="section-title">Multi-Model Fallback Chain</h2>
+        <p class="section-subtitle">Automatic failover across Groq models when rate limits are hit — zero downtime.</p>
+
+        <div class="fallback-chain">
+            <div class="fallback-item">
+                <span class="model-chip primary">openai/gpt-oss-120b</span>
+                <span class="arrow-down">→ quota →</span>
+            </div>
+            <div class="fallback-item">
+                <span class="model-chip">llama-3.3-70b-versatile</span>
+                <span class="arrow-down">→ quota →</span>
+            </div>
+            <div class="fallback-item">
+                <span class="model-chip">llama-3.1-8b-instant</span>
+                <span class="arrow-down">→ quota →</span>
+            </div>
+            <div class="fallback-item">
+                <span class="model-chip">mixtral-8x7b-32768</span>
+                <span class="arrow-down">→ quota →</span>
+            </div>
+            <div class="fallback-item">
+                <span class="model-chip">gemma2-9b-it</span>
+            </div>
+        </div>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- QUICK START -->
+    <section class="section">
+        <div class="section-label">Getting Started</div>
+        <h2 class="section-title">Quick Integration</h2>
+        <p class="section-subtitle">Start querying your agent in three steps.</p>
+
+        <div class="code-block">
+<span class="comment"># 1. Register and login</span>
+<span class="cmd">POST</span> /api/auth/register  { "email": "you@example.com", "password": "..." }
+<span class="cmd">POST</span> /api/auth/login     → <span class="val">{ "access_token": "eyJ..." }</span>
+
+<span class="comment"># 2. Compile an agent from your documents</span>
+<span class="cmd">POST</span> /api/compile/  <span class="key">Authorization:</span> Bearer {token}
+     <span class="key">Files:</span> report.pdf, research.docx
+     → <span class="val">{ "job_id": 42, "status": "compiling" }</span>
+
+<span class="comment"># 3. Chat with your agent</span>
+<span class="cmd">POST</span> /api/chat/  <span class="key">Authorization:</span> Bearer {token}
+     <span class="val">{ "agent_id": 36, "message": "What are the key findings?" }</span>
+     → <span class="val">{ "answer": "...[1][2]", "faithfulness": 0.87, "sources": [...] }</span>
+        </div>
+    </section>
+
+    <!-- FOOTER -->
+    <footer>
+        <div>
+            <span class="footer-brand">MEXAR Core Engine v2.0.0</span>
+            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem;">
+                Built with FastAPI · pgvector · Groq · DeBERTa-v3
+            </div>
+        </div>
+        <div class="footer-links">
+            <a href="/docs" class="footer-link">API Docs</a>
+            <a href="/redoc" class="footer-link">ReDoc</a>
+            <a href="https://mexar.vercel.app" class="footer-link" target="_blank">Frontend App</a>
+            <a href="https://github.com/devrajsinh2012/Mexar" class="footer-link" target="_blank">GitHub</a>
+        </div>
+    </footer>
+</div>
+
+</body>
+</html>

frontend/package.json

@@ -1,44 +1,44 @@
-{
-    "name": "mexar-frontend",
-    "version": "1.0.0",
-    "description": "MEXAR Core Engine - Frontend",
-    "private": true,
-    "dependencies": {
-        "@emotion/react": "^11.11.3",
-        "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.15.6",
-        "@mui/material": "^5.15.6",
-        "axios": "^1.6.5",
-        "d3": "^7.9.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-dropzone": "^14.2.3",
-        "react-router-dom": "^6.21.3",
-        "react-scripts": "5.0.1",
-        "recharts": "^2.10.4"
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
-    },
-    "proxy": "http://127.0.0.1:8000",
-    "eslintConfig": {
-        "extends": [
-            "react-app"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
+{
+    "name": "mexar-frontend",
+    "version": "1.0.0",
+    "description": "MEXAR Core Engine - Frontend",
+    "private": true,
+    "dependencies": {
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.15.6",
+        "@mui/material": "^5.15.6",
+        "axios": "^1.6.5",
+        "d3": "^7.9.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
+        "react-router-dom": "^6.21.3",
+        "react-scripts": "5.0.1",
+        "recharts": "^2.10.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "CI=false react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "proxy": "http://127.0.0.1:8000",
+    "eslintConfig": {
+        "extends": [
+            "react-app"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }