hugging face space commit

Dockerfile

@@ -0,0 +1,89 @@
+# # Use official Python image with a more recent version
+# FROM python:3.11-slim
+
+# # Set working directory
+# WORKDIR /app
+
+# # Install system dependencies
+# RUN apt-get update && apt-get install -y \
+#     gcc \
+#     && rm -rf /var/lib/apt/lists/*
+
+# # Copy requirements from backend and install
+# COPY backend/requirements.txt .
+
+# # Upgrade pip to latest version to resolve dependency conflicts better
+# RUN pip install --upgrade pip
+
+# # Install Python dependencies
+# RUN pip install --no-cache-dir -r requirements.txt
+
+# # Copy the backend code
+# COPY backend/ .
+
+# # Expose the port your FastAPI app runs on
+# EXPOSE 7860
+
+# # Command to run the FastAPI app
+# CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+
+# # Use official Python image with a more recent version
+# FROM python:3.11-slim
+
+# # Set working directory
+# WORKDIR /app
+
+# # Install system dependencies
+# RUN apt-get update && apt-get install -y \
+#     gcc \
+#     && rm -rf /var/lib/apt/lists/*
+
+# # Copy requirements from backend and install
+# COPY backend/requirements.txt .
+
+# # Upgrade pip to latest version to resolve dependency conflicts better
+# RUN pip install --upgrade pip
+
+# # Install Python dependencies
+# RUN pip install --no-cache-dir -r requirements.txt
+
+# # Copy the backend code
+# COPY backend/ .
+
+# # Expose the port your FastAPI app runs on
+# EXPOSE 8000
+
+# # Command to run the FastAPI app
+# CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+
+
+# Use a lightweight Python image
+FROM python:3.11-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the merged requirements.txt
+COPY requirements.txt .
+
+# Upgrade pip and install Python dependencies
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the backend and database code
+COPY backend/ ./backend/
+COPY database/ ./database/
+
+# Copy .env file (see note below)
+COPY .env .env
+
+# Expose the FastAPI port
+EXPOSE 8000
+
+# Start the FastAPI app
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/Dockerfile

@@ -1,28 +0,0 @@
-# Use official Python image with a more recent version
-FROM python:3.11-slim
-
-# Set working directory
-WORKDIR /app
-
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
-    gcc \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy requirements from backend and install
-COPY backend/requirements.txt .
-
-# Upgrade pip to latest version to resolve dependency conflicts better
-RUN pip install --upgrade pip
-
-# Install Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy the backend code
-COPY backend/ .
-
-# Expose the port your FastAPI app runs on
-EXPOSE 7860
-
-# Command to run the FastAPI app
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

backend/main.py

@@ -17,8 +17,8 @@ import structlog
 from dotenv import load_dotenv
 
 # Import routes
-from routes.search import router as search_router
-from routes.feedback import router as feedback_router
+from backend.routes.search import router as search_router
+from backend.routes.feedback import router as feedback_router
 
 # Load environment variables
 load_dotenv()

backend/routes/feedback.py

@@ -6,7 +6,7 @@ import structlog
 import time
 from typing import Dict, Any
 
-from models.schemas import FeedbackRequest, FeedbackResponse, ErrorResponse
+from backend.models.schemas import FeedbackRequest, FeedbackResponse, ErrorResponse
 
 router = APIRouter()
 logger = structlog.get_logger()

backend/routes/search.py

@@ -12,11 +12,11 @@ import uuid
 parent_dir = Path(__file__).parent.parent.parent
 sys.path.append(str(parent_dir))
 
-from models.schemas import SearchRequest, SearchResponse, ErrorResponse, SearchResult
-from services.qdrant_service import QdrantService
-from services.mcp_service import MCPService
-from services.guardrails_service import GuardrailsService
-from services.gemini_service import GeminiService
+from backend.models.schemas import SearchRequest, SearchResponse, ErrorResponse, SearchResult
+from backend.services.qdrant_service import QdrantService
+from backend.services.mcp_service import MCPService
+from backend.services.guardrails_service import GuardrailsService
+from backend.services.gemini_service import GeminiService
 
 router = APIRouter()
 logger = structlog.get_logger()

backend/services/gemini_service.py

@@ -4,7 +4,7 @@ Gemini LLM service for final fallback when both KB and MCP have low confidence.
 import os
 import re
 import structlog
-import google.generativeai as genai
+# import google.generativeai as genai
 from typing import Dict, Optional
 
 logger = structlog.get_logger()
@@ -22,6 +22,7 @@ class GeminiService:
             return
             
         try:
+            import google.generativeai as genai
             genai.configure(api_key=self.api_key)
             self.model = genai.GenerativeModel('gemini-2.0-flash-exp')
             logger.info("Gemini service initialized successfully")

backend/services/qdrant_service.py

@@ -1,19 +1,185 @@
+# """
+# Qdrant service for vector database operations.
+# """
+# import sys
+# from pathlib import Path
+# import structlog
+# from typing import List, Dict, Any, Optional
+
+# # Add parent directory to import database module
+# parent_dir = Path(__file__).parent.parent.parent
+# sys.path.append(str(parent_dir))
+
+# try:
+#     from database.qdrant_manager import QdrantManager
+#     from database.utils import EmbeddingGenerator
+#     from backend.models.schemas import SearchResult, APILogEntry
+# except ImportError as e:
+#     # Services will be initialized when packages are available
+#     pass
+
+# logger = structlog.get_logger()
+
+# class QdrantService:
+#     """Service layer for Qdrant vector database operations."""
+    
+#     def __init__(self):
+#         """Initialize Qdrant service."""
+#         self.qdrant_manager = None
+#         self.embedding_generator = None
+#         self._initialize()
+    
+#     def _initialize(self):
+#         """Initialize Qdrant manager and embedding generator."""
+#         try:
+#             import os
+#             from dotenv import load_dotenv
+            
+#             # Load .env from project root (3 levels up from services)
+#             env_path = Path(__file__).parent.parent.parent / '.env'
+#             load_dotenv(env_path)
+            
+#             # Qdrant configuration from environment variables
+#             qdrant_config = {
+#                 'url': os.getenv('QDRANT_URL'),
+#                 'api_key': os.getenv('QDRANT_API_KEY'),
+#                 'collection_name': os.getenv('QDRANT_COLLECTION', 'nuinamath')
+#             }
+            
+#             if not qdrant_config['url'] or not qdrant_config['api_key']:
+#                 raise ValueError("QDRANT_URL and QDRANT_API_KEY must be set in environment variables")
+            
+#             self.qdrant_manager = QdrantManager(
+#                 url=qdrant_config['url'],
+#                 api_key=qdrant_config['api_key']
+#             )
+            
+#             self.embedding_generator = EmbeddingGenerator()
+            
+#             logger.info("Qdrant service initialized successfully")
+            
+#         except Exception as e:
+#             logger.error("Failed to initialize Qdrant service", error=str(e))
+#             # Service will work in degraded mode
+    
+#     async def search_similar(self, question: str, limit: int = 5) -> List[SearchResult]:
+#         """
+#         Search for similar math problems in the knowledge base.
+        
+#         Args:
+#             question: The math question to search for
+#             limit: Maximum number of results to return
+            
+#         Returns:
+#             List of SearchResult objects
+#         """
+#         if not self.qdrant_manager or not self.embedding_generator:
+#             logger.warning("Qdrant service not properly initialized")
+#             return []
+        
+#         try:
+#             import os
+#             # Generate embedding for the question
+#             query_embedding = self.embedding_generator.embed_text(question)
+            
+#             # Search in Qdrant
+#             collection_name = os.getenv('QDRANT_COLLECTION', 'nuinamath')
+#             results = self.qdrant_manager.search_similar(
+#                 collection_name=collection_name,
+#                 query_vector=query_embedding,
+#                 limit=limit
+#             )
+            
+#             # Convert to SearchResult objects
+#             search_results = []
+#             for result in results:
+#                 payload = result.payload
+#                 search_result = SearchResult(
+#                     problem=payload.get('problem', ''),
+#                     solution=payload.get('solution', ''),
+#                     score=result.score
+#                 )
+#                 search_results.append(search_result)
+            
+#             logger.info("Knowledge base search completed",
+#                        question_length=len(question),
+#                        results_count=len(search_results),
+#                        best_score=search_results[0].score if search_results else 0)
+            
+#             return search_results
+            
+#         except Exception as e:
+#             logger.error("Knowledge base search failed", error=str(e))
+#             return []
+    
+#     async def log_api_call(
+#         self,
+#         endpoint: str,
+#         method: str,
+#         request_data: Dict[str, Any],
+#         response_data: Dict[str, Any],
+#         response_time_ms: float,
+#         source: str
+#     ):
+#         """
+#         Log API call to Qdrant for analytics.
+        
+#         Args:
+#             endpoint: API endpoint called
+#             method: HTTP method
+#             request_data: Request payload
+#             response_data: Response payload
+#             response_time_ms: Response time in milliseconds
+#             source: Source of the response (KB/MCP)
+#         """
+#         if not self.qdrant_manager or not self.embedding_generator:
+#             logger.warning("Cannot log API call - Qdrant service not initialized")
+#             return
+        
+#         try:
+#             # Create log entry
+#             log_entry = APILogEntry(
+#                 endpoint=endpoint,
+#                 method=method,
+#                 request_data=request_data,
+#                 response_data=response_data,
+#                 response_time_ms=response_time_ms,
+#                 source=source,
+#                 status_code=200  # Default to 200 for successful responses
+#             )
+            
+#             # TODO: Store log entry in Qdrant analytics collection
+#             # For now, just log to stdout
+#             logger.info("API call logged",
+#                        endpoint=endpoint,
+#                        method=method,
+#                        response_time_ms=response_time_ms,
+#                        source=source)
+            
+#         except Exception as e:
+#             logger.warning("Failed to log API call", error=str(e))
+
+
 """
 Qdrant service for vector database operations.
 """
 import sys
 from pathlib import Path
 import structlog
-from typing import List, Dict, Any, Optional
+from typing import List, Dict, Any, Optional, TYPE_CHECKING
 
 # Add parent directory to import database module
 parent_dir = Path(__file__).parent.parent.parent
 sys.path.append(str(parent_dir))
 
+# Import for type checking only
+if TYPE_CHECKING:
+    from backend.models.schemas import SearchResult, APILogEntry
+
 try:
     from database.qdrant_manager import QdrantManager
     from database.utils import EmbeddingGenerator
-    from models.schemas import SearchResult, APILogEntry
+    from backend.models.schemas import SearchResult, APILogEntry
 except ImportError as e:
     # Services will be initialized when packages are available
     pass
@@ -62,7 +228,7 @@ class QdrantService:
             logger.error("Failed to initialize Qdrant service", error=str(e))
             # Service will work in degraded mode
     
-    async def search_similar(self, question: str, limit: int = 5) -> List[SearchResult]:
+    async def search_similar(self, question: str, limit: int = 5) -> List['SearchResult']:
         """
         Search for similar math problems in the knowledge base.
         
@@ -79,6 +245,9 @@ class QdrantService:
         
         try:
             import os
+            # Import SearchResult here to avoid NameError
+            from backend.models.schemas import SearchResult
+            
             # Generate embedding for the question
             query_embedding = self.embedding_generator.embed_text(question)
             
@@ -137,6 +306,9 @@ class QdrantService:
             return
         
         try:
+            # Import APILogEntry here to avoid NameError  
+            from backend.models.schemas import APILogEntry
+            
             # Create log entry
             log_entry = APILogEntry(
                 endpoint=endpoint,
@@ -157,4 +329,4 @@ class QdrantService:
                        source=source)
             
         except Exception as e:
-            logger.warning("Failed to log API call", error=str(e))
+            logger.warning("Failed to log API call", error=str(e))

frontend/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "mathgenius-ai-frontend",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.0",
-    "react-scripts": "5.0.1",
-    "katex": "^0.16.4",
-    "react-katex": "^3.0.1",
-    "react-hot-toast": "^2.4.0",
-    "lucide-react": "^0.263.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4"
-  }
-}

frontend/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

frontend/public/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#0ea5e9" />
-    <meta
-      name="description"
-      content="MathGenius AI - Advanced Math Problem Solver using RAG and AI"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    
-    <!-- Google Fonts -->
-    <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&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    
-    <!-- KaTeX CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
-    
-    <title>MathGenius AI - Smart Math Problem Solver</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

frontend/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "MathGenius AI",
-  "name": "MathGenius AI - Smart Math Problem Solver",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#0ea5e9",
-  "background_color": "#ffffff"
-}

frontend/src/App.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { Toaster } from 'react-hot-toast';
-
-// Components
-import Navbar from './components/Navbar';
-import Footer from './components/Footer';
-
-// Pages
-import Home from './pages/Home';
-import Search from './pages/Search';
-import Analytics from './pages/Analytics';
-import About from './pages/About';
-
-function App() {
-  return (
-    <Router>
-      <div className="min-h-screen bg-gray-50 flex flex-col">
-        <Navbar />
-        
-        <main className="flex-1">
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/analytics" element={<Analytics />} />
-            <Route path="/about" element={<About />} />
-          </Routes>
-        </main>
-        
-        <Footer />
-        
-        {/* Toast notifications */}
-        <Toaster
-          position="top-right"
-          toastOptions={{
-            duration: 3000,
-            style: {
-              background: '#fff',
-              color: '#374151',
-              boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-              border: '1px solid #e5e7eb',
-            },
-            success: {
-              iconTheme: {
-                primary: '#10b981',
-                secondary: '#fff',
-              },
-            },
-            error: {
-              iconTheme: {
-                primary: '#ef4444',
-                secondary: '#fff',
-              },
-            },
-          }}
-        />
-      </div>
-    </Router>
-  );
-}
-
-export default App;

frontend/src/components/Footer.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Brain, Sparkles, Github, Linkedin, Mail, Heart } from 'lucide-react';
-
-const Footer = () => {
-  const currentYear = new Date().getFullYear();
-
-  return (
-    <footer className="bg-white border-t border-gray-200">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-          {/* Brand */}
-          <div className="col-span-1 md:col-span-2">
-            <Link to="/" className="flex items-center space-x-3 mb-4">
-              <div className="bg-gradient-to-r from-primary-600 to-secondary-600 p-2 rounded-lg">
-                <Brain className="h-6 w-6 text-white" />
-              </div>
-              <div className="flex items-center space-x-1">
-                <span className="text-xl font-bold gradient-text">MathGenius</span>
-                <Sparkles className="h-4 w-4 text-secondary-500" />
-                <span className="text-xl font-bold text-gray-700">AI</span>
-              </div>
-            </Link>
-            <p className="text-gray-600 mb-4 max-w-md">
-              Advanced AI-powered math problem solver using Retrieval-Augmented Generation (RAG) 
-              to provide accurate, step-by-step solutions from a curated knowledge base.
-            </p>
-            <div className="flex space-x-4">
-              <a
-                href="https://github.com/bhoomika-254"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-400 hover:text-primary-600 transition-colors"
-              >
-                <Github className="h-5 w-5" />
-              </a>
-              <a
-                href="https://linkedin.com/in/bhoomika-254"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-400 hover:text-primary-600 transition-colors"
-              >
-                <Linkedin className="h-5 w-5" />
-              </a>
-              <a
-                href="mailto:[email protected]"
-                className="text-gray-400 hover:text-primary-600 transition-colors"
-              >
-                <Mail className="h-5 w-5" />
-              </a>
-            </div>
-          </div>
-
-          {/* Quick Links */}
-          <div>
-            <h3 className="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">
-              Navigation
-            </h3>
-            <ul className="space-y-2">
-              <li>
-                <Link to="/" className="text-gray-600 hover:text-primary-600 transition-colors">
-                  Home
-                </Link>
-              </li>
-              <li>
-                <Link to="/search" className="text-gray-600 hover:text-primary-600 transition-colors">
-                  Search
-                </Link>
-              </li>
-              <li>
-                <Link to="/analytics" className="text-gray-600 hover:text-primary-600 transition-colors">
-                  Analytics
-                </Link>
-              </li>
-              <li>
-                <Link to="/about" className="text-gray-600 hover:text-primary-600 transition-colors">
-                  About
-                </Link>
-              </li>
-            </ul>
-          </div>
-
-          {/* Technology */}
-          <div>
-            <h3 className="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">
-              Technology
-            </h3>
-            <ul className="space-y-2">
-              <li className="text-gray-600">React + Tailwind CSS</li>
-              <li className="text-gray-600">FastAPI Backend</li>
-              <li className="text-gray-600">Qdrant Vector DB</li>
-              <li className="text-gray-600">RAG Architecture</li>
-              <li className="text-gray-600">KaTeX Math Rendering</li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="mt-12 pt-8 border-t border-gray-200">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="flex items-center space-x-1 text-gray-600">
-              <span>© {currentYear} MathGenius AI. Made with</span>
-              <Heart className="h-4 w-4 text-red-500" />
-              <span>for educational purposes.</span>
-            </div>
-            <div className="mt-4 md:mt-0">
-              <p className="text-sm text-gray-500">
-                Built for recruiters & portfolio showcase
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

frontend/src/components/Navbar.js

@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Calculator, Menu, X, Brain, Sparkles } from 'lucide-react';
-
-const Navbar = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const location = useLocation();
-
-  const navigation = [
-    { name: 'Home', href: '/', icon: null },
-    { name: 'Search', href: '/search', icon: null },
-    { name: 'Analytics', href: '/analytics', icon: null },
-    { name: 'About', href: '/about', icon: null },
-  ];
-
-  const isActivePage = (href) => {
-    if (href === '/') return location.pathname === '/';
-    return location.pathname.startsWith(href);
-  };
-
-  return (
-    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50 backdrop-blur-sm bg-white/95">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
-          {/* Logo */}
-          <Link to="/" className="flex items-center space-x-3 group">
-            <div className="relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-lg blur opacity-25 group-hover:opacity-40 transition-opacity"></div>
-              <div className="relative bg-gradient-to-r from-primary-600 to-secondary-600 p-2 rounded-lg">
-                <Brain className="h-6 w-6 text-white" />
-              </div>
-            </div>
-            <div className="flex items-center space-x-1">
-              <span className="text-xl font-bold gradient-text">MathGenius</span>
-              <Sparkles className="h-4 w-4 text-secondary-500" />
-              <span className="text-xl font-bold text-gray-700">AI</span>
-            </div>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-8">
-            {navigation.map((item) => (
-              <Link
-                key={item.name}
-                to={item.href}
-                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
-                  isActivePage(item.href)
-                    ? 'bg-primary-100 text-primary-700'
-                    : 'text-gray-600 hover:text-primary-600 hover:bg-gray-100'
-                }`}
-              >
-                {item.name}
-              </Link>
-            ))}
-            
-            {/* CTA Button */}
-            <Link
-              to="/search"
-              className="btn btn-primary btn-sm ml-4"
-            >
-              <Calculator className="h-4 w-4 mr-2" />
-              Try Now
-            </Link>
-          </div>
-
-          {/* Mobile menu button */}
-          <div className="md:hidden">
-            <button
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
-              className="inline-flex items-center justify-center p-2 rounded-lg text-gray-600 hover:text-primary-600 hover:bg-gray-100 transition-colors"
-            >
-              {isMenuOpen ? (
-                <X className="h-6 w-6" />
-              ) : (
-                <Menu className="h-6 w-6" />
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Mobile Navigation */}
-        {isMenuOpen && (
-          <div className="md:hidden py-4 border-t border-gray-200">
-            <div className="flex flex-col space-y-2">
-              {navigation.map((item) => (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  onClick={() => setIsMenuOpen(false)}
-                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
-                    isActivePage(item.href)
-                      ? 'bg-primary-100 text-primary-700'
-                      : 'text-gray-600 hover:text-primary-600 hover:bg-gray-100'
-                  }`}
-                >
-                  {item.name}
-                </Link>
-              ))}
-              
-              <Link
-                to="/search"
-                onClick={() => setIsMenuOpen(false)}
-                className="btn btn-primary btn-sm mt-4 self-start"
-              >
-                <Calculator className="h-4 w-4 mr-2" />
-                Try Now
-              </Link>
-            </div>
-          </div>
-        )}
-      </div>
-    </nav>
-  );
-};
-
-export default Navbar;

frontend/src/index.css

@@ -1,131 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    box-sizing: border-box;
-  }
-  
-  body {
-    @apply bg-gray-50 text-gray-900 font-sans;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-  
-  html {
-    scroll-behavior: smooth;
-  }
-}
-
-@layer components {
-  .btn {
-    @apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-  
-  .btn-primary {
-    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-lg hover:shadow-xl;
-  }
-  
-  .btn-secondary {
-    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
-  }
-  
-  .btn-outline {
-    @apply btn border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white focus:ring-primary-500;
-  }
-  
-  .btn-sm {
-    @apply px-3 py-2 text-sm;
-  }
-  
-  .btn-md {
-    @apply px-4 py-2.5 text-base;
-  }
-  
-  .btn-lg {
-    @apply px-6 py-3 text-lg;
-  }
-  
-  .input {
-    @apply w-full rounded-lg border border-gray-300 px-4 py-2.5 text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 transition-all duration-200;
-  }
-  
-  .textarea {
-    @apply input resize-none;
-  }
-  
-  .card {
-    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
-  }
-  
-  .card-hover {
-    @apply card transition-all duration-200 hover:shadow-lg hover:border-gray-300;
-  }
-  
-  .badge {
-    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
-  }
-  
-  .badge-primary {
-    @apply badge bg-primary-100 text-primary-800;
-  }
-  
-  .badge-secondary {
-    @apply badge bg-secondary-100 text-secondary-800;
-  }
-  
-  .badge-success {
-    @apply badge bg-green-100 text-green-800;
-  }
-  
-  .badge-warning {
-    @apply badge bg-yellow-100 text-yellow-800;
-  }
-  
-  .badge-error {
-    @apply badge bg-red-100 text-red-800;
-  }
-  
-  .gradient-text {
-    @apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
-  }
-  
-  .math-content {
-    @apply leading-relaxed text-gray-900;
-  }
-  
-  .math-content .section {
-    @apply mb-6;
-  }
-  
-  .math-content .katex {
-    @apply text-gray-900;
-  }
-  
-  .math-content .katex-display {
-    @apply my-4 text-center;
-  }
-  
-  .math-content h4 {
-    @apply text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2;
-  }
-  
-  .loading-spinner {
-    @apply animate-spin h-5 w-5 border-2 border-gray-300 border-t-primary-600 rounded-full;
-  }
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-  
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-}

frontend/src/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

frontend/src/pages/About.js

@@ -1,371 +0,0 @@
-import React from 'react';
-import { 
-  Brain, 
-  Database, 
-  Zap, 
-  Shield, 
-  Globe, 
-  Target, 
-  Code, 
-  Layers,
-  GitBranch,
-  Server,
-  Cpu,
-  Network
-} from 'lucide-react';
-
-const About = () => {
-  const features = [
-    {
-      icon: Brain,
-      title: "Advanced AI Processing",
-      description: "Powered by state-of-the-art language models and vector search technology for intelligent math problem solving."
-    },
-    {
-      icon: Database,
-      title: "5000+ Math Problems",
-      description: "Comprehensive knowledge base containing over 5,000 carefully curated math problems with detailed solutions."
-    },
-    {
-      icon: Zap,
-      title: "Lightning Fast",
-      description: "Optimized vector search with sub-second response times. Average query resolution in under 1.2 seconds."
-    },
-    {
-      icon: Shield,
-      title: "Quality Assured",
-      description: "Built-in guardrails and validation systems ensure accurate, safe, and educationally appropriate responses."
-    },
-    {
-      icon: Globe,
-      title: "Web-Enhanced",
-      description: "Model Context Protocol (MCP) integration provides real-time web search fallback for comprehensive coverage."
-    },
-    {
-      icon: Target,
-      title: "High Precision",
-      description: "Confidence scoring and quality assessment ensure reliable solutions with 86% average confidence rating."
-    }
-  ];
-
-  const techStack = [
-    {
-      category: "Backend",
-      icon: Server,
-      technologies: [
-        { name: "FastAPI", description: "High-performance Python web framework" },
-        { name: "Qdrant", description: "Vector database for similarity search" },
-        { name: "Sentence Transformers", description: "384-dimensional embeddings" },
-        { name: "Model Context Protocol", description: "Web search integration" }
-      ]
-    },
-    {
-      category: "Frontend",
-      icon: Code,
-      technologies: [
-        { name: "React", description: "Modern UI component library" },
-        { name: "Tailwind CSS", description: "Utility-first styling framework" },
-        { name: "KaTeX", description: "Beautiful math equation rendering" },
-        { name: "React Router", description: "Client-side routing" }
-      ]
-    },
-    {
-      category: "Infrastructure",
-      icon: Network,
-      technologies: [
-        { name: "Hugging Face Spaces", description: "Backend deployment platform" },
-        { name: "Netlify", description: "Frontend hosting and deployment" },
-        { name: "GitHub", description: "Version control and CI/CD" },
-        { name: "VS Code", description: "Development environment" }
-      ]
-    }
-  ];
-
-  const architecture = [
-    {
-      step: "1",
-      title: "Input Validation",
-      description: "Question preprocessing and safety checks using guardrails service",
-      icon: Shield
-    },
-    {
-      step: "2", 
-      title: "Vector Search",
-      description: "Semantic similarity search against 5,000+ problem embeddings in Qdrant",
-      icon: Database
-    },
-    {
-      step: "3",
-      title: "Decision Logic",
-      description: "Intelligent routing between knowledge base and web search based on confidence",
-      icon: GitBranch
-    },
-    {
-      step: "4",
-      title: "Response Generation",
-      description: "Solution synthesis with step-by-step explanations and quality scoring",
-      icon: Cpu
-    },
-    {
-      step: "5",
-      title: "Analytics & Feedback",
-      description: "Performance tracking, user feedback collection, and continuous improvement",
-      icon: Target
-    }
-  ];
-
-  const metrics = [
-    { label: "Math Problems", value: "5,005", suffix: "+" },
-    { label: "Vector Dimensions", value: "384", suffix: "" },
-    { label: "Confidence Threshold", value: "80", suffix: "%" },
-    { label: "Average Response Time", value: "1.2", suffix: "s" },
-    { label: "Knowledge Base Hit Rate", value: "82", suffix: "%" },
-    { label: "Solution Accuracy", value: "94", suffix: "%" }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Hero Section */}
-      <div className="bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800 text-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-          <div className="text-center">
-            <div className="flex justify-center mb-6">
-              <div className="p-4 bg-white/10 rounded-2xl backdrop-blur-sm">
-                <Brain className="h-16 w-16 text-white" />
-              </div>
-            </div>
-            
-            <h1 className="text-4xl md:text-6xl font-bold mb-6">
-              About <span className="bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">MathGenius AI</span>
-            </h1>
-            
-            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
-              An advanced Retrieval-Augmented Generation (RAG) system designed to solve mathematical problems 
-              with high accuracy, speed, and educational value.
-            </p>
-            
-            <div className="mt-10 grid grid-cols-2 md:grid-cols-3 gap-8">
-              {metrics.map((metric, index) => (
-                <div key={index} className="text-center">
-                  <div className="text-3xl md:text-4xl font-bold text-white">
-                    {metric.value}<span className="text-blue-300">{metric.suffix}</span>
-                  </div>
-                  <div className="text-blue-200 text-sm md:text-base mt-1">
-                    {metric.label}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Features Section */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            Why Choose <span className="gradient-text">MathGenius AI</span>?
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Built with cutting-edge technology and designed for both students and educators
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <div key={index} className="card p-8 hover-lift text-center">
-              <div className="flex justify-center mb-4">
-                <div className="p-3 bg-blue-100 rounded-full">
-                  <feature.icon className="h-8 w-8 text-blue-600" />
-                </div>
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">
-                {feature.title}
-              </h3>
-              <p className="text-gray-600 leading-relaxed">
-                {feature.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Architecture Section */}
-      <div className="bg-white py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-              <span className="gradient-text">RAG Architecture</span>
-            </h2>
-            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-              Our 5-step pipeline ensures accurate, fast, and reliable math problem solving
-            </p>
-          </div>
-
-          <div className="space-y-8">
-            {architecture.map((step, index) => (
-              <div key={index} className="flex items-center space-x-6 p-6 bg-gray-50 rounded-xl">
-                <div className="flex-shrink-0">
-                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
-                    <span className="text-2xl font-bold text-white">{step.step}</span>
-                  </div>
-                </div>
-                
-                <div className="flex-1">
-                  <div className="flex items-center space-x-3 mb-2">
-                    <step.icon className="h-6 w-6 text-blue-600" />
-                    <h3 className="text-xl font-semibold text-gray-900">{step.title}</h3>
-                  </div>
-                  <p className="text-gray-600">{step.description}</p>
-                </div>
-                
-                {index < architecture.length - 1 && (
-                  <div className="hidden md:block">
-                    <div className="w-8 h-0.5 bg-gradient-to-r from-blue-500 to-purple-600" />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Technology Stack */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            <span className="gradient-text">Technology Stack</span>
-          </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Built with modern, industry-standard technologies for performance and scalability
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {techStack.map((category, index) => (
-            <div key={index} className="card p-8">
-              <div className="flex items-center space-x-3 mb-6">
-                <div className="p-2 bg-blue-100 rounded-lg">
-                  <category.icon className="h-6 w-6 text-blue-600" />
-                </div>
-                <h3 className="text-xl font-semibold text-gray-900">{category.category}</h3>
-              </div>
-              
-              <div className="space-y-4">
-                {category.technologies.map((tech, techIndex) => (
-                  <div key={techIndex} className="border-l-2 border-blue-200 pl-4">
-                    <h4 className="font-medium text-gray-900">{tech.name}</h4>
-                    <p className="text-sm text-gray-600">{tech.description}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Mission Section */}
-      <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl md:text-4xl font-bold mb-6">Our Mission</h2>
-          <p className="text-xl leading-relaxed text-blue-100 mb-8">
-            To democratize access to high-quality math education by providing instant, accurate, 
-            and detailed solutions to mathematical problems. We believe that everyone deserves 
-            access to excellent mathematical guidance, regardless of their location or resources.
-          </p>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-            <div className="p-6 bg-white/10 backdrop-blur-sm rounded-xl">
-              <Target className="h-10 w-10 text-yellow-400 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold mb-2">Accuracy First</h3>
-              <p className="text-blue-100 text-sm">
-                Every solution is validated through multiple quality checks and confidence scoring
-              </p>
-            </div>
-            
-            <div className="p-6 bg-white/10 backdrop-blur-sm rounded-xl">
-              <Zap className="h-10 w-10 text-yellow-400 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold mb-2">Speed Matters</h3>
-              <p className="text-blue-100 text-sm">
-                Lightning-fast responses help students stay in their learning flow
-              </p>
-            </div>
-            
-            <div className="p-6 bg-white/10 backdrop-blur-sm rounded-xl">
-              <Layers className="h-10 w-10 text-yellow-400 mx-auto mb-4" />
-              <h3 className="text-lg font-semibold mb-2">Always Learning</h3>
-              <p className="text-blue-100 text-sm">
-                Our system continuously improves through user feedback and new data
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Developer Section */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div className="text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
-            Built for <span className="gradient-text">Excellence</span>
-          </h2>
-          
-          <div className="max-w-3xl mx-auto">
-            <p className="text-lg text-gray-600 mb-8">
-              MathGenius AI represents the cutting edge of educational technology, combining advanced 
-              AI research with practical engineering to create a tool that truly helps students learn.
-            </p>
-            
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
-              <div className="p-6 bg-blue-50 rounded-xl">
-                <h3 className="font-semibold text-gray-900 mb-3">For Students</h3>
-                <ul className="space-y-2 text-gray-600">
-                  <li>• Get instant help with math homework</li>
-                  <li>• Learn through step-by-step solutions</li>
-                  <li>• Practice with thousands of problems</li>
-                  <li>• Build confidence in mathematical concepts</li>
-                </ul>
-              </div>
-              
-              <div className="p-6 bg-purple-50 rounded-xl">
-                <h3 className="font-semibold text-gray-900 mb-3">For Educators</h3>
-                <ul className="space-y-2 text-gray-600">
-                  <li>• Supplement classroom instruction</li>
-                  <li>• Provide 24/7 student support</li>
-                  <li>• Access detailed solution analytics</li>
-                  <li>• Enhance learning outcomes</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Contact/Support Section */}
-      <div className="bg-gray-900 text-white py-16">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl font-bold mb-6">Ready to Get Started?</h2>
-          <p className="text-xl text-gray-300 mb-8">
-            Join thousands of students already improving their math skills with MathGenius AI
-          </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <button className="btn btn-primary btn-lg">
-              Start Solving Problems
-            </button>
-            <button className="btn btn-outline btn-lg border-white text-white hover:bg-white hover:text-gray-900">
-              View Analytics
-            </button>
-          </div>
-          
-          <div className="mt-12 pt-8 border-t border-gray-700">
-            <p className="text-gray-400">
-              Built with ❤️ for the math education community
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default About;

frontend/src/pages/Analytics.js

@@ -1,409 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BarChart3, TrendingUp, Database, Clock, Target, Users, Globe, Brain } from 'lucide-react';
-
-const Analytics = () => {
-  const [stats, setStats] = useState({
-    totalQueries: 0,
-    averageResponseTime: 0,
-    kbHitRate: 0,
-    averageConfidence: 0,
-    totalUsers: 0,
-    popularTopics: [],
-    responseTimeHistory: [],
-    confidenceDistribution: [],
-    sourceBreakdown: { KB: 0, MCP: 0 }
-  });
-
-  const [timeframe, setTimeframe] = useState('7d');
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Simulate loading analytics data
-    // In a real app, this would fetch from your backend
-    const loadAnalytics = async () => {
-      setIsLoading(true);
-      
-      // Simulate API delay
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      
-      // Mock data - replace with actual API call
-      const mockData = {
-        totalQueries: 2847,
-        averageResponseTime: 1.2,
-        kbHitRate: 0.82,
-        averageConfidence: 0.86,
-        totalUsers: 156,
-        popularTopics: [
-          { topic: 'Quadratic Equations', count: 342, percentage: 12.0 },
-          { topic: 'Calculus Derivatives', count: 298, percentage: 10.5 },
-          { topic: 'Linear Algebra', count: 267, percentage: 9.4 },
-          { topic: 'Trigonometry', count: 234, percentage: 8.2 },
-          { topic: 'Integration', count: 198, percentage: 7.0 },
-          { topic: 'Statistics', count: 187, percentage: 6.6 }
-        ],
-        responseTimeHistory: [
-          { date: '2024-01-01', avgTime: 1.1 },
-          { date: '2024-01-02', avgTime: 1.3 },
-          { date: '2024-01-03', avgTime: 1.0 },
-          { date: '2024-01-04', avgTime: 1.4 },
-          { date: '2024-01-05', avgTime: 1.2 },
-          { date: '2024-01-06', avgTime: 1.1 },
-          { date: '2024-01-07', avgTime: 1.2 }
-        ],
-        confidenceDistribution: [
-          { range: '90-100%', count: 1520, percentage: 53.4 },
-          { range: '80-89%', count: 823, percentage: 28.9 },
-          { range: '70-79%', count: 341, percentage: 12.0 },
-          { range: '60-69%', count: 118, percentage: 4.1 },
-          { range: '50-59%', count: 45, percentage: 1.6 }
-        ],
-        sourceBreakdown: { KB: 82, MCP: 18 }
-      };
-      
-      setStats(mockData);
-      setIsLoading(false);
-    };
-
-    loadAnalytics();
-  }, [timeframe]);
-
-  const StatCard = ({ icon: Icon, title, value, subtitle, trend, color = 'blue' }) => (
-    <div className="card p-6 hover-lift">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-gray-600 text-sm font-medium">{title}</p>
-          <p className="text-2xl font-bold text-gray-900 mt-1">{value}</p>
-          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
-        </div>
-        <div className={`p-3 rounded-full bg-${color}-100`}>
-          <Icon className={`h-6 w-6 text-${color}-600`} />
-        </div>
-      </div>
-      {trend && (
-        <div className="mt-4 flex items-center">
-          <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
-          <span className="text-sm text-green-600 font-medium">{trend}</span>
-          <span className="text-sm text-gray-500 ml-1">vs last period</span>
-        </div>
-      )}
-    </div>
-  );
-
-  const ProgressBar = ({ label, percentage, color = 'blue' }) => (
-    <div className="mb-4">
-      <div className="flex justify-between text-sm font-medium text-gray-700 mb-1">
-        <span>{label}</span>
-        <span>{percentage.toFixed(1)}%</span>
-      </div>
-      <div className="w-full bg-gray-200 rounded-full h-2">
-        <div
-          className={`bg-${color}-600 h-2 rounded-full transition-all duration-300`}
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    </div>
-  );
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-50 py-8">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center">
-            <div className="loading-spinner mx-auto mb-4" />
-            <p className="text-gray-600">Loading analytics...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex justify-between items-center">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">
-                <span className="gradient-text">Analytics</span> Dashboard
-              </h1>
-              <p className="text-gray-600 mt-2">
-                System performance and usage insights
-              </p>
-            </div>
-            
-            <div className="flex space-x-2">
-              {['24h', '7d', '30d', '90d'].map((period) => (
-                <button
-                  key={period}
-                  onClick={() => setTimeframe(period)}
-                  className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${
-                    timeframe === period
-                      ? 'bg-blue-600 text-white'
-                      : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
-                  }`}
-                >
-                  {period}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Key Metrics */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <StatCard
-            icon={Users}
-            title="Total Queries"
-            value={stats.totalQueries.toLocaleString()}
-            subtitle="Math problems solved"
-            trend="+12.5%"
-            color="blue"
-          />
-          
-          <StatCard
-            icon={Clock}
-            title="Avg Response Time"
-            value={`${stats.averageResponseTime}s`}
-            subtitle="Lightning fast"
-            trend="-8.2%"
-            color="green"
-          />
-          
-          <StatCard
-            icon={Database}
-            title="KB Hit Rate"
-            value={`${(stats.kbHitRate * 100).toFixed(1)}%`}
-            subtitle="Knowledge base efficiency"
-            trend="+3.1%"
-            color="purple"
-          />
-          
-          <StatCard
-            icon={Target}
-            title="Avg Confidence"
-            value={`${(stats.averageConfidence * 100).toFixed(1)}%`}
-            subtitle="Solution accuracy"
-            trend="+5.7%"
-            color="orange"
-          />
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-          {/* Popular Topics */}
-          <div className="card p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold text-gray-900">Popular Topics</h2>
-              <Brain className="h-5 w-5 text-gray-400" />
-            </div>
-            
-            <div className="space-y-4">
-              {stats.popularTopics.map((topic, index) => (
-                <div key={index} className="flex justify-between items-center">
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-sm font-medium text-gray-900">{topic.topic}</span>
-                      <span className="text-sm text-gray-600">{topic.count} queries</span>
-                    </div>
-                    <ProgressBar percentage={topic.percentage} color="blue" />
-                  </div>
-                </div>
-              ))}
-            </div>
-            
-            <div className="mt-4 pt-4 border-t border-gray-200">
-              <p className="text-xs text-gray-500">
-                Based on {stats.totalQueries.toLocaleString()} total queries
-              </p>
-            </div>
-          </div>
-
-          {/* Confidence Distribution */}
-          <div className="card p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold text-gray-900">Confidence Distribution</h2>
-              <Target className="h-5 w-5 text-gray-400" />
-            </div>
-            
-            <div className="space-y-4">
-              {stats.confidenceDistribution.map((range, index) => (
-                <div key={index} className="flex justify-between items-center">
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-sm font-medium text-gray-900">{range.range}</span>
-                      <span className="text-sm text-gray-600">{range.count} responses</span>
-                    </div>
-                    <ProgressBar 
-                      percentage={range.percentage} 
-                      color={index === 0 ? 'green' : index === 1 ? 'blue' : index === 2 ? 'yellow' : 'red'} 
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-            
-            <div className="mt-4 pt-4 border-t border-gray-200">
-              <p className="text-xs text-gray-500">
-                Higher confidence scores indicate more accurate solutions
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Source Breakdown */}
-          <div className="card p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold text-gray-900">Source Breakdown</h2>
-              <Globe className="h-5 w-5 text-gray-400" />
-            </div>
-            
-            <div className="space-y-6">
-              <div className="text-center">
-                <div className="relative inline-flex items-center justify-center w-32 h-32">
-                  <svg className="w-32 h-32 transform -rotate-90">
-                    <circle
-                      cx="64"
-                      cy="64"
-                      r="56"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      fill="transparent"
-                      className="text-gray-200"
-                    />
-                    <circle
-                      cx="64"
-                      cy="64"
-                      r="56"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      fill="transparent"
-                      strokeDasharray={`${2 * Math.PI * 56}`}
-                      strokeDashoffset={`${2 * Math.PI * 56 * (1 - stats.sourceBreakdown.KB / 100)}`}
-                      className="text-blue-600"
-                    />
-                  </svg>
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <span className="text-2xl font-bold text-gray-900">{stats.sourceBreakdown.KB}%</span>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center">
-                    <div className="w-3 h-3 bg-blue-600 rounded-full mr-2" />
-                    <span className="text-sm font-medium text-gray-900">Knowledge Base</span>
-                  </div>
-                  <span className="text-sm text-gray-600">{stats.sourceBreakdown.KB}%</span>
-                </div>
-                
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center">
-                    <div className="w-3 h-3 bg-gray-300 rounded-full mr-2" />
-                    <span className="text-sm font-medium text-gray-900">Web Search (MCP)</span>
-                  </div>
-                  <span className="text-sm text-gray-600">{stats.sourceBreakdown.MCP}%</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* System Health */}
-          <div className="card p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold text-gray-900">System Health</h2>
-              <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse" />
-            </div>
-            
-            <div className="space-y-4">
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-gray-700">Database Status</span>
-                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                  Healthy
-                </span>
-              </div>
-              
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-gray-700">MCP Service</span>
-                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                  Active
-                </span>
-              </div>
-              
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-gray-700">Guardrails</span>
-                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                  Enabled
-                </span>
-              </div>
-              
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-gray-700">Vector Index</span>
-                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                  5,005 entries
-                </span>
-              </div>
-              
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-gray-700">Uptime</span>
-                <span className="text-sm text-gray-600">99.9%</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Performance Metrics */}
-          <div className="card p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold text-gray-900">Performance</h2>
-              <BarChart3 className="h-5 w-5 text-gray-400" />
-            </div>
-            
-            <div className="space-y-4">
-              <div>
-                <div className="flex justify-between text-sm font-medium text-gray-700 mb-1">
-                  <span>Response Time (avg)</span>
-                  <span>{stats.averageResponseTime}s</span>
-                </div>
-                <ProgressBar percentage={85} color="green" />
-              </div>
-              
-              <div>
-                <div className="flex justify-between text-sm font-medium text-gray-700 mb-1">
-                  <span>Accuracy Score</span>
-                  <span>{(stats.averageConfidence * 100).toFixed(1)}%</span>
-                </div>
-                <ProgressBar percentage={stats.averageConfidence * 100} color="blue" />
-              </div>
-              
-              <div>
-                <div className="flex justify-between text-sm font-medium text-gray-700 mb-1">
-                  <span>User Satisfaction</span>
-                  <span>92.3%</span>
-                </div>
-                <ProgressBar percentage={92.3} color="purple" />
-              </div>
-              
-              <div>
-                <div className="flex justify-between text-sm font-medium text-gray-700 mb-1">
-                  <span>Cache Hit Rate</span>
-                  <span>78.5%</span>
-                </div>
-                <ProgressBar percentage={78.5} color="orange" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer Note */}
-        <div className="mt-8 text-center">
-          <p className="text-sm text-gray-500">
-            Analytics data is updated in real-time. All metrics are calculated for the selected time period.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Analytics;

frontend/src/pages/Home.js

@@ -1,210 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ArrowRight, Calculator, Brain, Zap, Shield, Globe, Database } from 'lucide-react';
-
-const Home = () => {
-  const features = [
-    {
-      icon: Brain,
-      title: 'AI-Powered Solutions',
-      description: 'Advanced RAG architecture combines knowledge base search with intelligent web fallback',
-      color: 'primary'
-    },
-    {
-      icon: Database,
-      title: '5,000+ Math Problems',
-      description: 'Curated knowledge base with comprehensive step-by-step solutions',
-      color: 'secondary'
-    },
-    {
-      icon: Zap,
-      title: 'Lightning Fast',
-      description: 'Vector similarity search delivers relevant results in milliseconds',
-      color: 'yellow'
-    },
-    {
-      icon: Shield,
-      title: 'Quality Assured',
-      description: 'Multi-layer validation ensures accurate and safe responses',
-      color: 'green'
-    },
-    {
-      icon: Globe,
-      title: 'Web Fallback',
-      description: 'Intelligent fallback to web search when knowledge base confidence is low',
-      color: 'blue'
-    },
-    {
-      icon: Calculator,
-      title: 'Beautiful Math',
-      description: 'KaTeX rendering for properly formatted mathematical expressions',
-      color: 'purple'
-    }
-  ];
-
-  const stats = [
-    { label: 'Math Problems Solved', value: '10,000+', color: 'primary' },
-    { label: 'Average Response Time', value: '<2s', color: 'secondary' },
-    { label: 'Accuracy Rate', value: '95%', color: 'green' },
-    { label: 'Knowledge Base Size', value: '5,005', color: 'blue' }
-  ];
-
-  const getColorClasses = (color) => {
-    const colors = {
-      primary: 'text-primary-600 bg-primary-100',
-      secondary: 'text-secondary-600 bg-secondary-100',
-      yellow: 'text-yellow-600 bg-yellow-100',
-      green: 'text-green-600 bg-green-100',
-      blue: 'text-blue-600 bg-blue-100',
-      purple: 'text-purple-600 bg-purple-100'
-    };
-    return colors[color] || colors.primary;
-  };
-
-  return (
-    <div className="min-h-screen">
-      {/* Hero Section */}
-      <section className="relative bg-gradient-to-br from-primary-50 via-white to-secondary-50 py-20 overflow-hidden">
-        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center">
-            <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
-              Meet <span className="gradient-text">MathGenius AI</span>
-              <br />
-              Your Smart Math Companion
-            </h1>
-            <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto text-balance">
-              Advanced AI-powered math problem solver using Retrieval-Augmented Generation (RAG) 
-              to provide accurate, step-by-step solutions from a curated knowledge base of 5,000+ problems.
-            </p>
-            
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Link
-                to="/search"
-                className="btn btn-primary btn-lg group"
-              >
-                <Calculator className="h-5 w-5 mr-2" />
-                Try MathGenius AI
-                <ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
-              </Link>
-              
-              <Link
-                to="/about"
-                className="btn btn-outline btn-lg"
-              >
-                Learn How It Works
-              </Link>
-            </div>
-
-            {/* Quick Stats */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
-              {stats.map((stat, index) => (
-                <div key={index} className="text-center">
-                  <div className={`text-3xl font-bold ${stat.color === 'primary' ? 'text-primary-600' : 
-                    stat.color === 'secondary' ? 'text-secondary-600' :
-                    stat.color === 'green' ? 'text-green-600' :
-                    'text-blue-600'}`}>
-                    {stat.value}
-                  </div>
-                  <div className="text-sm text-gray-600 mt-1">{stat.label}</div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-              Powerful Features
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Built with cutting-edge AI technology to deliver the most accurate and helpful math solutions
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className="card-hover p-6 group"
-              >
-                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${getColorClasses(feature.color)} group-hover:scale-110 transition-transform`}>
-                  <feature.icon className="h-6 w-6" />
-                </div>
-                <h3 className="text-xl font-semibold text-gray-900 mb-2">
-                  {feature.title}
-                </h3>
-                <p className="text-gray-600">
-                  {feature.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* How It Works Section */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-              How It Works
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Our 5-step RAG pipeline ensures you get the most accurate and helpful responses
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
-            {[
-              { step: '1', title: 'Input Validation', desc: 'Guardrails ensure safe and valid math questions' },
-              { step: '2', title: 'Knowledge Search', desc: 'Vector similarity search across 5,000+ problems' },
-              { step: '3', title: 'Smart Decision', desc: 'AI decides between knowledge base or web search' },
-              { step: '4', title: 'Response Validation', desc: 'Quality checks and safety validation' },
-              { step: '5', title: 'Analytics & Learning', desc: 'Performance tracking and continuous improvement' }
-            ].map((item, index) => (
-              <div key={index} className="text-center">
-                <div className="w-16 h-16 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-full flex items-center justify-center text-white text-xl font-bold mx-auto mb-4">
-                  {item.step}
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                  {item.title}
-                </h3>
-                <p className="text-sm text-gray-600">
-                  {item.desc}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-20 bg-gradient-to-r from-primary-600 to-secondary-600">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
-            Ready to Solve Your Math Problems?
-          </h2>
-          <p className="text-xl text-primary-100 mb-8">
-            Experience the power of AI-driven math solutions. Get started in seconds.
-          </p>
-          
-          <Link
-            to="/search"
-            className="inline-flex items-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-lg hover:bg-gray-50 transition-colors shadow-lg hover:shadow-xl group"
-          >
-            <Calculator className="h-5 w-5 mr-2" />
-            Start Solving Problems
-            <ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
-          </Link>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default Home;

frontend/src/pages/Search.js

@@ -1,464 +0,0 @@
-import React, { useState } from 'react';
-import { Search as SearchIcon, Send, Clock, Database, Globe, ThumbsUp, ThumbsDown, Copy, Share2 } from 'lucide-react';
-import { InlineMath, BlockMath } from 'react-katex';
-import 'katex/dist/katex.min.css';
-import toast from 'react-hot-toast';
-
-import { searchMathProblem, submitFeedback, formatResponseTime, getSourceDisplayName, getConfidenceLevel } from '../utils/api';
-
-const Search = () => {
-  const [question, setQuestion] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [searchResult, setSearchResult] = useState(null);
-  const [error, setError] = useState(null);
-
-  const handleSearch = async (e) => {
-    e.preventDefault();
-    
-    if (!question.trim()) {
-      toast.error('Please enter a math question');
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    setSearchResult(null);
-
-    try {
-      const result = await searchMathProblem(question);
-      
-      if (result.success) {
-        setSearchResult(result.data);
-        toast.success('Solution found!');
-      } else {
-        setError(result.error);
-        toast.error('Failed to get solution');
-      }
-    } catch (err) {
-      setError('An unexpected error occurred');
-      toast.error('Something went wrong');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleFeedback = async (isCorrect) => {
-    if (!searchResult) return;
-
-    try {
-      const feedbackData = {
-        question: question,
-        response: searchResult.final_answer,
-        correct: isCorrect,
-        response_id: searchResult.response_id
-      };
-
-      const result = await submitFeedback(feedbackData);
-      
-      if (result.success) {
-        toast.success('Thanks for your feedback!');
-      } else {
-        toast.error('Error submitting feedback');
-      }
-    } catch (err) {
-      toast.error('Failed to submit feedback');
-    }
-  };
-
-  const copyToClipboard = (text) => {
-    navigator.clipboard.writeText(text);
-    toast.success('Copied to clipboard!');
-  };
-
-  const shareResult = () => {
-    if (navigator.share) {
-      navigator.share({
-        title: 'MathGenius AI Solution',
-        text: `Question: ${question}\n\nSolution: ${searchResult?.final_answer}`,
-        url: window.location.href,
-      });
-    } else {
-      copyToClipboard(`Question: ${question}\n\nSolution: ${searchResult?.final_answer}`);
-    }
-  };
-
-  const renderMathContent = (content) => {
-    if (!content) return '';
-    
-    // Convert LaTeX \(...\) and \[...\] to $...$ and $$...$$ format
-    let processedContent = content
-      .replace(/\\?\\\(/g, '$')      // \( -> $
-      .replace(/\\?\\\)/g, '$')      // \) -> $
-      .replace(/\\?\\\[/g, '$$')     // \[ -> $$
-      .replace(/\\?\\\]/g, '$$');    // \] -> $$
-    
-    // Handle line breaks and create formatted sections
-    const sections = processedContent.split(/\n\s*\n/); // Split on empty lines
-    
-    return (
-      <div className="space-y-4">
-        {sections.map((section, sectionIndex) => {
-          const lines = section.split('\n');
-          
-          return (
-            <div key={sectionIndex} className="section">
-              {lines.map((line, lineIndex) => {
-                // Check if line is a section header
-                if (line.match(/^(Solution Steps?|Final Answer|Verification):/i)) {
-                  return (
-                    <h4 key={lineIndex} className="text-lg font-semibold text-gray-900 mt-6 mb-3 first:mt-0">
-                      {line}
-                    </h4>
-                  );
-                }
-                
-                // Process math in the line with robust error handling
-                try {
-                  const mathRegex = /\$\$(.+?)\$\$|\$(.+?)\$/g;
-                  const parts = line.split(mathRegex);
-                  
-                  if (parts.length === 1 && !line.trim()) {
-                    return null; // Skip empty lines
-                  }
-                  
-                  return (
-                    <div key={lineIndex} className="mb-2 leading-relaxed">
-                      {parts.map((part, partIndex) => {
-                        if (partIndex % 3 === 1) {
-                          // Block math ($$...$$)
-                          try {
-                            // Clean the math expression before rendering
-                            const cleanMath = part.trim();
-                            if (!cleanMath) return null;
-                            return <BlockMath key={partIndex} math={cleanMath} />;
-                          } catch (e) {
-                            console.warn('KaTeX block math error:', e.message, 'for expression:', part);
-                            return (
-                              <div key={partIndex} className="inline-block text-gray-800 font-mono bg-gray-100 px-2 py-1 rounded border">
-                                {part}
-                              </div>
-                            );
-                          }
-                        } else if (partIndex % 3 === 2) {
-                          // Inline math ($...$)
-                          try {
-                            // Clean the math expression before rendering
-                            const cleanMath = part.trim();
-                            if (!cleanMath) return null;
-                            return <InlineMath key={partIndex} math={cleanMath} />;
-                          } catch (e) {
-                            console.warn('KaTeX inline math error:', e.message, 'for expression:', part);
-                            return (
-                              <span key={partIndex} className="text-gray-800 font-mono bg-gray-100 px-1 rounded border">
-                                {part}
-                              </span>
-                            );
-                          }
-                        } else {
-                          // Regular text
-                          return part ? <span key={partIndex}>{part}</span> : null;
-                        }
-                      })}
-                    </div>
-                  );
-                } catch (e) {
-                  console.warn('Error processing line:', e.message, 'for line:', line);
-                  return <div key={lineIndex} className="mb-2 leading-relaxed text-gray-800">{line}</div>;
-                }
-              })}
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const exampleQuestions = [
-    "Solve the quadratic equation: x² + 5x + 6 = 0",
-    "Find the derivative of f(x) = 3x² + 2x - 1",
-    "What is the integral of sin(x) dx?",
-    "Calculate the limit: lim(x→0) (sin(x)/x)",
-    "Solve the system: 2x + 3y = 7, x - y = 1"
-  ];
-
-  return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            <span className="gradient-text">Search & Solve</span> Math Problems
-          </h1>
-          <p className="text-lg text-gray-600">
-            Ask any math question and get detailed, step-by-step solutions
-          </p>
-        </div>
-
-        {/* Search Form */}
-        <div className="card p-6 mb-8">
-          <form onSubmit={handleSearch} className="space-y-4">
-            <div className="relative">
-              <SearchIcon className="absolute left-3 top-3.5 h-5 w-5 text-gray-400" />
-              <textarea
-                value={question}
-                onChange={(e) => setQuestion(e.target.value)}
-                placeholder="Enter your math question here... (e.g., Solve x² + 5x + 6 = 0)"
-                className="textarea pl-10 h-32 resize-none"
-                disabled={isLoading}
-              />
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-sm text-gray-500">
-                {question.length}/1000 characters
-              </span>
-              
-              <button
-                type="submit"
-                disabled={isLoading || !question.trim()}
-                className="btn btn-primary btn-md"
-              >
-                {isLoading ? (
-                  <>
-                    <div className="loading-spinner mr-2" />
-                    Solving...
-                  </>
-                ) : (
-                  <>
-                    <Send className="h-4 w-4 mr-2" />
-                    Solve Problem
-                  </>
-                )}
-              </button>
-            </div>
-          </form>
-
-          {/* Example Questions */}
-          <div className="mt-6 pt-6 border-t border-gray-200">
-            <h3 className="text-sm font-medium text-gray-700 mb-3">Try these examples:</h3>
-            <div className="flex flex-wrap gap-2">
-              {exampleQuestions.map((example, index) => (
-                <button
-                  key={index}
-                  onClick={() => setQuestion(example)}
-                  disabled={isLoading}
-                  className="text-xs px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition-colors"
-                >
-                  {example}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Error State */}
-        {error && (
-          <div className="card p-6 mb-8 border-red-200 bg-red-50">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
-                  <SearchIcon className="h-5 w-5 text-red-600" />
-                </div>
-              </div>
-              <div className="ml-4">
-                <h3 className="text-lg font-medium text-red-900">Error</h3>
-                <p className="text-red-700">{error}</p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Search Results */}
-        {searchResult && (
-          <div className="space-y-6">
-            {/* Result Header */}
-            <div className="card p-6">
-              <div className="flex items-start justify-between mb-4">
-                <div className="flex-1">
-                  <h2 className="text-xl font-semibold text-gray-900 mb-2">Solution</h2>
-                  <div className="flex items-center space-x-4 text-sm text-gray-600">
-                    <div className="flex items-center">
-                      <Clock className="h-4 w-4 mr-1" />
-                      {formatResponseTime(searchResult.response_time_ms)}
-                    </div>
-                    
-                    <div className="flex items-center">
-                      {searchResult.source === 'KB' ? (
-                        <Database className="h-4 w-4 mr-1" />
-                      ) : (
-                        <Globe className="h-4 w-4 mr-1" />
-                      )}
-                      {getSourceDisplayName(searchResult.source)}
-                    </div>
-                    
-                    {searchResult.metadata?.confidence_score && (
-                      <div className="flex items-center">
-                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
-                          getConfidenceLevel(searchResult.metadata.confidence_score).color === 'green' 
-                            ? 'bg-green-100 text-green-800'
-                            : getConfidenceLevel(searchResult.metadata.confidence_score).color === 'yellow'
-                            ? 'bg-yellow-100 text-yellow-800'
-                            : 'bg-red-100 text-red-800'
-                        }`}>
-                          {getConfidenceLevel(searchResult.metadata.confidence_score).level} Confidence
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                
-                <div className="flex space-x-2">
-                  <button
-                    onClick={() => copyToClipboard(searchResult.final_answer)}
-                    className="btn btn-secondary btn-sm"
-                  >
-                    <Copy className="h-4 w-4" />
-                  </button>
-                  <button
-                    onClick={shareResult}
-                    className="btn btn-secondary btn-sm"
-                  >
-                    <Share2 className="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-
-              <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-                <h3 className="font-medium text-gray-900 mb-2">Your Question:</h3>
-                <p className="text-gray-700">{question}</p>
-              </div>
-            </div>
-
-            {/* Answer */}
-            <div className="card p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Step-by-Step Solution</h3>
-              
-              <div className="prose max-w-none">
-                <div className="bg-white p-6 rounded-lg border border-gray-200 math-content">
-                  {renderMathContent(searchResult.final_answer)}
-                </div>
-              </div>
-
-              {searchResult.explanation && (
-                <div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
-                  <h4 className="font-medium text-blue-900 mb-2">Explanation:</h4>
-                  <p className="text-blue-800 text-sm">{searchResult.explanation}</p>
-                </div>
-              )}
-            </div>
-
-            {/* Additional Results */}
-            {searchResult.results && searchResult.results.length > 1 && (
-              <div className="card p-6">
-                <h3 className="text-lg font-semibold text-gray-900 mb-4">Related Solutions</h3>
-                
-                <div className="space-y-4">
-                  {searchResult.results.slice(1).map((result, index) => (
-                    <div key={index} className="p-4 bg-gray-50 rounded-lg border border-gray-200">
-                      <div className="flex justify-between items-start mb-2">
-                        <h4 className="font-medium text-gray-900">Alternative Solution {index + 1}</h4>
-                        <span className="text-xs text-gray-500">
-                          Score: {(result.score * 100).toFixed(1)}%
-                        </span>
-                      </div>
-                      <p className="text-gray-700 text-sm mb-2">{result.problem}</p>
-                      <div className="text-sm text-gray-600">
-                        {renderMathContent(result.solution)}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Feedback */}
-            <div className="card p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Was this solution helpful?</h3>
-              
-              <div className="flex space-x-4">
-                <button
-                  onClick={() => handleFeedback(true)}
-                  className="btn btn-outline btn-md group"
-                >
-                  <ThumbsUp className="h-4 w-4 mr-2 group-hover:text-green-600" />
-                  Yes, helpful
-                </button>
-                
-                <button
-                  onClick={() => handleFeedback(false)}
-                  className="btn btn-outline btn-md group"
-                >
-                  <ThumbsDown className="h-4 w-4 mr-2 group-hover:text-red-600" />
-                  Needs improvement
-                </button>
-              </div>
-              
-              <p className="text-sm text-gray-600 mt-3">
-                Your feedback helps us improve the quality of our solutions.
-              </p>
-            </div>
-
-            {/* Metadata */}
-            {searchResult.metadata && (
-              <div className="card p-6">
-                <h3 className="text-lg font-semibold text-gray-900 mb-4">Technical Details</h3>
-                
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
-                  <div>
-                    <span className="font-medium text-gray-700">Response ID:</span>
-                    <br />
-                    <span className="text-gray-600 font-mono text-xs">{searchResult.response_id}</span>
-                  </div>
-                  
-                  {searchResult.metadata.confidence_score && (
-                    <div>
-                      <span className="font-medium text-gray-700">Confidence:</span>
-                      <br />
-                      <span className="text-gray-600">{(searchResult.metadata.confidence_score * 100).toFixed(1)}%</span>
-                    </div>
-                  )}
-                  
-                  {searchResult.metadata.kb_results_count !== undefined && (
-                    <div>
-                      <span className="font-medium text-gray-700">KB Results:</span>
-                      <br />
-                      <span className="text-gray-600">{searchResult.metadata.kb_results_count}</span>
-                    </div>
-                  )}
-                  
-                  {searchResult.metadata.search_strategy && (
-                    <div>
-                      <span className="font-medium text-gray-700">Strategy:</span>
-                      <br />
-                      <span className="text-gray-600">{searchResult.metadata.search_strategy}</span>
-                    </div>
-                  )}
-                  
-                  {searchResult.metadata.response_quality && (
-                    <div>
-                      <span className="font-medium text-gray-700">Quality Score:</span>
-                      <br />
-                      <span className="text-gray-600">{(searchResult.metadata.response_quality * 100).toFixed(1)}%</span>
-                    </div>
-                  )}
-                  
-                  {searchResult.metadata.guardrails_applied !== undefined && (
-                    <div>
-                      <span className="font-medium text-gray-700">Safety Check:</span>
-                      <br />
-                      <span className="text-gray-600">
-                        {searchResult.metadata.guardrails_applied ? 'Applied' : 'Passed'}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Search;

frontend/src/utils/api.js

@@ -1,138 +0,0 @@
-// API configuration
-const API_BASE_URL = process.env.NODE_ENV === 'production' 
-  ? 'https://your-huggingface-space-url.hf.space'  // Replace with actual HF Space URL
-  : 'http://localhost:8000';
-
-// API endpoints
-export const API_ENDPOINTS = {
-  search: `${API_BASE_URL}/api/search`,
-  feedback: `${API_BASE_URL}/api/feedback`,
-};
-
-// Search function
-export const searchMathProblem = async (question) => {
-  try {
-    const response = await fetch(API_ENDPOINTS.search, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ question }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return {
-      success: true,
-      data,
-    };
-  } catch (error) {
-    console.error('Search API error:', error);
-    return {
-      success: false,
-      error: error.message,
-    };
-  }
-};
-
-// Feedback function
-export const submitFeedback = async (feedbackData) => {
-  try {
-    const response = await fetch(API_ENDPOINTS.feedback, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(feedbackData),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return {
-      success: true,
-      data,
-    };
-  } catch (error) {
-    console.error('Feedback API error:', error);
-    return {
-      success: false,
-      error: error.message,
-    };
-  }
-};
-
-// Helper function to format response time
-export const formatResponseTime = (ms) => {
-  if (ms < 1000) {
-    return `${Math.round(ms)}ms`;
-  }
-  return `${(ms / 1000).toFixed(2)}s`;
-};
-
-// Helper function to get source display name
-export const getSourceDisplayName = (source) => {
-  switch (source) {
-    case 'KB':
-      return 'Knowledge Base';
-    case 'MCP':
-      return 'Web Search';
-    default:
-      return source;
-  }
-};
-
-// Helper function to get confidence level
-export const getConfidenceLevel = (score) => {
-  if (score >= 0.8) return { level: 'High', color: 'green' };
-  if (score >= 0.6) return { level: 'Medium', color: 'yellow' };
-  if (score >= 0.4) return { level: 'Low', color: 'orange' };
-  return { level: 'Very Low', color: 'red' };
-};
-
-// Mock analytics data - replace with real API call when backend analytics endpoint is ready
-export const getAnalyticsData = async (timeframe = '7d') => {
-  // Simulate API delay
-  await new Promise(resolve => setTimeout(resolve, 500));
-  
-  return {
-    success: true,
-    data: {
-      totalQueries: 2847,
-      averageResponseTime: 1.2,
-      kbHitRate: 0.82,
-      averageConfidence: 0.86,
-      totalUsers: 156,
-      popularTopics: [
-        { topic: 'Quadratic Equations', count: 342, percentage: 12.0 },
-        { topic: 'Calculus Derivatives', count: 298, percentage: 10.5 },
-        { topic: 'Linear Algebra', count: 267, percentage: 9.4 },
-        { topic: 'Trigonometry', count: 234, percentage: 8.2 },
-        { topic: 'Integration', count: 198, percentage: 7.0 },
-        { topic: 'Statistics', count: 187, percentage: 6.6 }
-      ],
-      responseTimeHistory: [
-        { date: '2024-01-01', avgTime: 1.1 },
-        { date: '2024-01-02', avgTime: 1.3 },
-        { date: '2024-01-03', avgTime: 1.0 },
-        { date: '2024-01-04', avgTime: 1.4 },
-        { date: '2024-01-05', avgTime: 1.2 },
-        { date: '2024-01-06', avgTime: 1.1 },
-        { date: '2024-01-07', avgTime: 1.2 }
-      ],
-      confidenceDistribution: [
-        { range: '90-100%', count: 1520, percentage: 53.4 },
-        { range: '80-89%', count: 823, percentage: 28.9 },
-        { range: '70-79%', count: 341, percentage: 12.0 },
-        { range: '60-69%', count: 118, percentage: 4.1 },
-        { range: '50-59%', count: 45, percentage: 1.6 }
-      ],
-      sourceBreakdown: { KB: 82, MCP: 18 }
-    }
-  };
-};

frontend/tailwind.config.js

@@ -1,68 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
-        },
-        secondary: {
-          50: '#fdf4ff',
-          100: '#fae8ff',
-          200: '#f5d0fe',
-          300: '#f0abfc',
-          400: '#e879f9',
-          500: '#d946ef',
-          600: '#c026d3',
-          700: '#a21caf',
-          800: '#86198f',
-          900: '#701a75',
-        },
-        gray: {
-          50: '#f9fafb',
-          100: '#f3f4f6',
-          200: '#e5e7eb',
-          300: '#d1d5db',
-          400: '#9ca3af',
-          500: '#6b7280',
-          600: '#4b5563',
-          700: '#374151',
-          800: '#1f2937',
-          900: '#111827',
-        }
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'monospace'],
-      },
-      animation: {
-        'fade-in': 'fadeIn 0.5s ease-in-out',
-        'slide-up': 'slideUp 0.3s ease-out',
-        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        slideUp: {
-          '0%': { transform: 'translateY(10px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
-        },
-      }
-    },
-  },
-  plugins: [],
-}

requirements.txt

@@ -0,0 +1,42 @@
+# FastAPI and web server
+# fastapi==0.104.1
+fastapi>=0.111.0,<1.0.0
+# uvicorn[standard]==0.24.0
+uvicorn[standard]
+
+# HTTP client
+httpx>=0.26.0
+
+# Qdrant vector database
+qdrant-client==1.8.0
+
+# AI Guardrails
+guardrails-ai==0.4.5
+
+# Google Generative AI (Gemini)
+google-generativeai==0.8.3
+
+# Environment management
+python-dotenv==1.0.0
+
+# Structured logging
+structlog==23.2.0
+
+# Data processing and embeddings
+datasets==2.18.0
+pandas==2.1.4
+sentence-transformers==2.2.2
+huggingface_hub>=0.23.0  # Added to ensure compatibility with datasets==2.18.0
+
+# MCP client (for web search integration)
+# fastmcp==0.3.0
+fastmcp
+
+# Data validation
+pydantic>=2.7.0,<3.0.0
+
+# JSON handling
+orjson==3.9.10
+
+# Progress tracking
+tqdm>=4.66.0