Clean deployment - 0 binaries

.github/workflows/main.yml

@@ -0,0 +1,49 @@
+name: Sync to Hugging Face
+on:
+  push:
+    branches: [main]
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          # 1. Use a temporary directory outside the project
+          DEPLOY_DIR="../deploy_dir"
+          mkdir -p "$DEPLOY_DIR"
+          
+          # 2. Copy current files to the temp directory
+          cp -r . "$DEPLOY_DIR/"
+          
+          # 3. Enter the temp dir and wipe images
+          cd "$DEPLOY_DIR"
+          rm -rf .git
+          rm -rf services/frontend-service/static/images/*.png
+          rm -rf services/frontend-service/static/images/*.svg
+          rm -f .gitattributes
+          
+          # 4. Initialize a FRESH git repo and set branch to 'main'
+          git init
+          git checkout -b main
+          git config user.name "GitHub Action"
+          git config user.email "action@github.com"
+          
+          # 5. Create a dummy file to keep the images folder structure
+          mkdir -p services/frontend-service/static/images
+          touch services/frontend-service/static/images/.gitkeep
+          
+          # 6. Commit everything
+          git add .
+          git commit -m "Clean deployment - 0 binaries"
+          
+          # 7. Force push to HF
+          git push --force https://x-token:$HF_TOKEN@huggingface.co/spaces/Josedavison/AceNow main

.gitignore

@@ -0,0 +1,37 @@
+# Environment
+.env
+.venv/
+env/
+venv/
+ENV/
+
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.log
+.pytest_cache/
+.coverage
+htmlcov/
+
+# Service Specific
+services/*/uploads/*
+services/*/audio/*
+!services/*/uploads/.gitkeep
+!services/*/audio/.gitkeep
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Project Reference
+AceNowUI/
+Asserts/

Dockerfile

@@ -0,0 +1,33 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy all services
+COPY . .
+
+# Install dependencies from root requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Create non-root user (good practice for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR /app
+
+# Ensure start script is executable
+USER root
+RUN chmod +x start.sh
+USER user
+
+# Default Port for Hugging Face Spaces
+EXPOSE 7860
+
+# Start script
+CMD ["./start.sh"]

MICROSERVICES_ARCHITECTURE.md

@@ -0,0 +1,62 @@
+# AceNow Architecture & Tech Stack
+
+This document details the internal design and technical decisions of the AceNow microservices ecosystem.
+
+## 📡 Service Flow
+
+```mermaid
+graph TD
+    User((User)) -->|HTTPS| Gateway[API Gateway :5000]
+    Gateway -->|Auth Check| Auth[Auth Service :5001]
+    Gateway -->|Parse Req| Parser[File Parser :5002]
+    Gateway -->|AI Req| AIService[AI Service :5003]
+    Gateway -->|Serve UI| Frontend[Frontend Service :5004]
+    
+    AIService -->|API| Gemini((Google Gemini))
+    AIService -->|API| Groq((Groq Cloud))
+    AIService -->|Local| Ollama((Ollama))
+```
+
+## 🛠️ Technology Stack
+
+| Layer | Technology |
+| :--- | :--- |
+| **Framework** | Python / Flask |
+| **Authentication** | Google Identity Services (OAuth 2.0) |
+| **AI Processing** | Google GenAI, Groq (Llama 3.3), Ollama |
+| **File Parsing** | `pdfplumber`, `python-pptx`, `PyPDF2` |
+| **Frontend** | Vanilla JS (ES6+), CSS3 (Glassmorphism), HTML5 |
+| **Parallel Downloads** | `JSZip` (Client-side bundling) |
+| **Containerization** | Docker, Docker Compose |
+
+## 🧠 Specialized Logic
+
+### 1. AI Fallback Engine
+The AI Service implements a robust retry-strategy:
+- **Priority 1**: Gemini 2.0 Flash (Fast & Accurate).
+- **Priority 2**: Groq (Llama 3.3 70B) - if Gemini hits quota/rate limits.
+- **Priority 3**: Ollama (Llama 3.2) - if running locally.
+- **Parsing**: Advanced JSON-repair logic handles varied AI output formats to ensure UI stability.
+
+### 2. File Processing
+- **Scanning**: Multi-threaded metadata fetching from Google Classroom.
+- **Parsing**: Server-side text extraction to keep the frontend light.
+- **Bundling**: Client-side ZIP generation avoids heavy server-side temporary file storage.
+
+### 3. API Gateway Routing
+The Gateway handles CORS and acts as a security buffer:
+- `/auth/*` -> Auth Service
+- `/parse/*` -> File Parser
+- `/ai/*` -> AI Service
+- `/*` (Static) -> Frontend Service
+
+## 📦 Deployment Configuration
+
+- **`Dockerfile`**: A multi-stage setup that installs all dependencies and prepares the environment.
+- **`start.sh`**: A supervisor script that boots all microservices concurrently within a single container (optimized for free hosting like HF Spaces).
+- **`run_dev.py`**: A developer-friendly Python script for parallel local execution with live logs.
+
+## 🔒 Security
+- **No API Keys in Frontend**: All sensitive keys are stored in the backend `.env`.
+- **Stateless Auth**: Uses Google JWT verification.
+- **Proxy Aware**: Optimized for Windows and Unix environments with `NO_PROXY` configurations.

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

README.md

@@ -0,0 +1,83 @@
+---
+title: AceNow
+emoji: 🚀
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+license: mit
+---
+
+# AceNow - AI-Powered Exam Prep Microservices
+
+AceNow is a focused platform for last-minute exam preparation, offering AI-powered summaries, key topics, and quick quizzes for efficient revision. Built with a modern microservices architecture, it integrates seamlessly with Google Classroom to retrieve study materials and uses state-of-the-art AI models for content analysis.
+
+## ✨ Core Features
+
+- **Google Classroom Integration**: Securely fetch documents (PDF/PPTX) and announcements from your enrolled courses.
+- **Smart Study Logic**:
+  - **Key Topics**: Automatically identifies high-priority exam concepts.
+  - **AI Summaries**: Concise oversight of core ideas for fast reading.
+  - **Pedagogical Quizzes**: Scenario-based MCQs with hints and detailed rationales for every answer.
+- **Robust AI Fallback**: Multi-provider engine (Gemini 2.0 -> Groq Llama 3 -> Ollama) ensures 100% uptime even during rate limits.
+- **Parallel Downloads**: Bundle all course materials into a single ZIP file instantly using JSZip.
+- **Modern Responsive UI**: Premium glassmorphic interface with Dark/Light modes and full mobile compatibility.
+- **AI Assistant**: Dedicated academic chat interface for deep-diving into complex topics.
+
+## 🏗️ Architecture
+
+The system is split into specialized microservices:
+
+1.  **API Gateway (Port 5000)**: Single entry point that routes requests and manages cross-service communication.
+2.  **Auth Service (Port 5001)**: Handles Google OAuth2 authentication and configuration.
+3.  **File Parser Service (Port 5002)**: Specialized in extracting text content from PDFs and PPTXs.
+4.  **AI Service (Port 5003)**: The "brain" of AceNow, managing complex prompts and various AI model providers.
+5.  **Frontend Service (Port 5004)**: Serves the web application, styles, and assets.
+
+## 🚀 Quick Start
+
+### 1. Requirements
+- Python 3.9+
+- [Google Cloud Project](GOOGLE_SETUP.md) for Google Classroom API.
+- [Gemini API Key](https://aistudio.google.com/app/apikey) (Primary).
+- [Groq API Key](https://console.groq.com/keys) (Fallback).
+
+### 2. Setup
+Create a `.env` file in the root directory:
+```env
+GOOGLE_CLIENT_ID=your_client_id
+GEMINI_API_KEY=your_gemini_key
+GROQ_API_KEY=your_groq_key
+# Optional: HF_TOKEN=your_huggingface_token
+```
+
+### 3. Run with Docker Compose
+The easiest way to start the entire cluster:
+```bash
+docker-compose up --build
+```
+Access the app at: **http://localhost:5000**
+
+### 4. Run Locally (Dev Mode)
+Alternatively, use the provided development runner:
+```bash
+python run_dev.py
+```
+
+## 🌍 Free Hosting & Deployment
+
+AceNow is designed to run entirely on free-tier services.
+
+### Option A: Hugging Face Spaces (Recommended)
+1.  Create a new **Space** on Hugging Face.
+2.  Select **Docker** as the SDK.
+3.  Upload the project (the `Dockerfile` at the root handles the multi-service build).
+4.  Go to **Settings > Variables & Secrets** and add your `.env` variables.
+
+### Option B: Render (Manual)
+1.  Deploy the **API Gateway** as a Web Service.
+2.  Deploy individual services as **Private Services** (no cost for inter-service communication).
+3.  Link them using the environment variables in the Gateway.
+
+## 📄 License
+© 2026 Jose Davidson. Developed with the assistance of Antigravity.

bundle_images.py

@@ -0,0 +1,28 @@
+import os
+import base64
+import json
+
+image_dir = "services/frontend-service/static/images"
+bundle_file = "services/frontend-service/static/js/image_bundle.js"
+
+images_data = {}
+
+for filename in os.listdir(image_dir):
+    if filename.endswith(('.png', '.svg', '.jpg', '.jpeg')):
+        filepath = os.path.join(image_dir, filename)
+        with open(filepath, "rb") as f:
+            encoded_string = base64.b64encode(f.read()).decode('utf-8')
+            
+            # Determine mime type
+            mime = "image/png"
+            if filename.endswith(".svg"): mime = "image/svg+xml"
+            elif filename.endswith((".jpg", ".jpeg")): mime = "image/jpeg"
+            
+            images_data[filename] = f"data:{mime};base64,{encoded_string}"
+
+with open(bundle_file, "w") as f:
+    f.write("const IMAGE_BUNDLE = ")
+    f.write(json.dumps(images_data, indent=4))
+    f.write(";")
+
+print(f"Successfully bundled {len(images_data)} images into {bundle_file}")

docker-compose.yml

@@ -0,0 +1,50 @@
+version: '3.8'
+
+services:
+  api-gateway:
+    build: ./services/api-gateway
+    ports:
+      - "5000:5000"
+    environment:
+      - PORT=5000
+      - AUTH_SERVICE_URL=http://auth-service:5001
+      - FILE_PARSER_SERVICE_URL=http://file-parser-service:5002
+      - AI_SERVICE_URL=http://ai-service:5003
+      - FRONTEND_SERVICE_URL=http://frontend-service:5004
+    depends_on:
+      - auth-service
+      - file-parser-service
+      - ai-service
+      - frontend-service
+
+  auth-service:
+    build: ./services/auth-service
+    ports:
+      - "5001:5001"
+    environment:
+      - PORT=5001
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+
+  file-parser-service:
+    build: ./services/file-parser-service
+    ports:
+      - "5002:5002"
+    environment:
+      - PORT=5002
+
+  ai-service:
+    build: ./services/ai-service
+    ports:
+      - "5003:5003"
+    environment:
+      - PORT=5003
+      - GEMINI_API_KEY=${GEMINI_API_KEY}
+      - HF_TOKEN=${HF_TOKEN}
+      - HF_API_KEY=${HF_API_KEY}
+
+  frontend-service:
+    build: ./services/frontend-service
+    ports:
+      - "5004:5004"
+    environment:
+      - PORT=5004

requirements.txt

@@ -0,0 +1,16 @@
+flask
+flask-cors
+google-auth
+google-auth-oauthlib
+google-auth-httplib2
+google-api-python-client
+google-generativeai
+python-dotenv
+requests
+PyPDF2
+pdfplumber
+python-pptx
+openai
+groq
+gunicorn
+google-genai

run_dev.py

@@ -0,0 +1,72 @@
+import subprocess
+import os
+import sys
+import time
+import threading
+
+# Define services with their directories and ports
+SERVICES = [
+    {"name": "Auth Service", "dir": "services/auth-service", "port": 5001},
+    {"name": "File Parser", "dir": "services/file-parser-service", "port": 5002},
+    {"name": "AI Service", "dir": "services/ai-service", "port": 5003},
+    {"name": "Frontend", "dir": "services/frontend-service", "port": 5004},
+    {"name": "API Gateway", "dir": "services/api-gateway", "port": 5000},
+]
+
+processes = []
+
+def run_service(service):
+    print(f"Starting {service['name']}...")
+    cwd = os.path.join(os.getcwd(), service['dir'])
+    
+    # Use the current python interpreter
+    cmd = [sys.executable, "app.py"]
+    
+    # Set environment variables if needed
+    env = os.environ.copy()
+    env["PORT"] = str(service["port"])
+    env["NO_PROXY"] = "*" # Disable proxy for inter-service communication
+    
+    process = subprocess.Popen(
+        cmd, 
+        cwd=cwd, 
+        env=env,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+        text=True,
+        bufsize=1
+    )
+    processes.append(process)
+    
+    # Print service logs with prefix
+    for line in iter(process.stdout.readline, ""):
+        print(f"[{service['name']}] {line.strip()}")
+    
+    process.stdout.close()
+
+def main():
+    print("🌟 AceNow Microservices Development Runner")
+    print("==========================================")
+    
+    threads = []
+    for service in SERVICES:
+        t = threading.Thread(target=run_service, args=(service,))
+        t.daemon = True
+        t.start()
+        threads.append(t)
+        time.sleep(1) # Small delay to avoid clashes
+    
+    print("\nAll services started. Access the app at http://localhost:5000")
+    print("Press Ctrl+C to stop all services.\n")
+    
+    try:
+        while True:
+            time.sleep(1)
+    except KeyboardInterrupt:
+        print("\nStopping all services...")
+        for p in processes:
+            p.terminate()
+        sys.exit(0)
+
+if __name__ == "__main__":
+    main()

services/ai-service/.env.example

@@ -0,0 +1,4 @@
+GEMINI_API_KEY=your_gemini_api_key_here
+# HF_API_KEY=your_huggingface_api_key_here
+# HF_TOKEN=your_huggingface_token_here
+PORT=5003

services/ai-service/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

services/ai-service/app.py

@@ -0,0 +1,389 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import os
+import json
+import requests
+from google import genai
+from groq import Groq
+from openai import OpenAI
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# API Keys
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+HF_API_KEY = os.getenv("HF_API_KEY")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+OLLAMA_BASE_URL = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434")
+
+# Initialize Groq Client
+try:
+    if GROQ_API_KEY:
+        groq_client = Groq(api_key=GROQ_API_KEY)
+    else:
+        groq_client = None
+        print("Warning: GROQ_API_KEY not set")
+except Exception as e:
+    groq_client = None
+    print(f"Failed to initialize Groq Client: {e}")
+
+
+
+def configure_genai():
+    """Configure Gemini AI - No longer needed with direct requests but kept for interface compatibility if needed"""
+    pass
+
+# Initialize Google GenAI Client
+try:
+    if GEMINI_API_KEY:
+        client = genai.Client(api_key=GEMINI_API_KEY)
+    else:
+        client = None
+        print("Warning: GEMINI_API_KEY not set")
+except Exception as e:
+    client = None
+    print(f"Failed to initialize Gemini Client: {e}")
+
+def query_gemini_new(prompt, model_id="gemini-2.0-flash"):
+    """Query Gemini 2.0 API using google-genai SDK"""
+    if not client:
+        raise Exception("Gemini Client not initialized")
+    
+    # Map old model names to new ones if necessary, or just use what's passed
+    if model_id == "gemini-1.5-flash":
+        model_id = "gemini-2.0-flash" 
+        
+    try:
+        response = client.models.generate_content(
+            model=model_id,
+            contents=prompt
+        )
+        return response.text
+    except Exception as e:
+        raise Exception(f"Gemini 2.0 Inference Failed: {str(e)}")
+
+def query_groq(prompt, model_id="llama-3.3-70b-versatile"):
+    """Query Groq API"""
+    if not groq_client:
+        raise Exception("Groq Client not initialized (check GROQ_API_KEY)")
+    
+    # Map old model names to new ones
+    if model_id in ["llama3-70b-8192", "llama-3.1-70b-versatile"]:
+        model_id = "llama-3.3-70b-versatile"
+    
+    try:
+        chat_completion = groq_client.chat.completions.create(
+            messages=[
+                {
+                    "role": "user",
+                    "content": prompt,
+                }
+            ],
+            model=model_id,
+        )
+        return chat_completion.choices[0].message.content
+    except Exception as e:
+        raise Exception(f"Groq Inference Failed: {str(e)}")
+
+def query_ollama(prompt, model_id="llama3"):
+    """Query local Ollama instance"""
+    url = f"{OLLAMA_BASE_URL}/api/generate"
+    payload = {
+        "model": model_id,
+        "prompt": prompt,
+        "stream": False
+    }
+    
+    try:
+        response = requests.post(url, json=payload)
+        if response.status_code != 200:
+            raise Exception(f"Ollama Error {response.status_code}: {response.text}")
+        return response.json()['response']
+    except requests.exceptions.ConnectionError:
+        raise Exception("Could not connect to Ollama. Is it running?")
+    except Exception as e:
+        raise Exception(f"Ollama Inference Failed: {str(e)}")
+
+def query_huggingface(prompt, model_id, api_key=None):
+    """Query Hugging Face models"""
+    if not api_key:
+        api_key = os.getenv("HF_TOKEN") or os.getenv("HF_API_KEY")
+    
+    if not api_key:
+        raise Exception("Hugging Face API key missing")
+
+    if not model_id:
+        model_id = "zai-org/GLM-4.7-Flash:novita"
+
+    client = OpenAI(
+        base_url="https://router.huggingface.co/v1",
+        api_key=api_key
+    )
+
+    try:
+        completion = client.chat.completions.create(
+            model=model_id,
+            messages=[{"role": "user", "content": prompt}],
+            temperature=0.7,
+            max_tokens=4096,
+            top_p=0.9
+        )
+        return completion.choices[0].message.content
+    except Exception as e:
+        raise Exception(f"Hugging Face Inference Failed: {str(e)}")
+
+def query_ai_with_fallback(prompt, provider=None, model_id=None):
+    """Unified query function with automatic fallback on failure (e.g. quota limits)"""
+    # Order of fallback: Requested -> Gemini -> Groq -> Ollama
+    providers_to_try = []
+    
+    if provider:
+        providers_to_try.append(provider)
+    
+    # Add others as fallbacks if not already the primary
+    for p in ["gemini", "groq", "ollama"]:
+        if p not in providers_to_try:
+            providers_to_try.append(p)
+    
+    last_error = None
+    for p in providers_to_try:
+        try:
+            print(f"DEBUG: Trying AI provider: {p}")
+            if p == "groq":
+                # Only try Groq if key is available
+                if not GROQ_API_KEY: 
+                    raise Exception("Groq API Key missing")
+                m = model_id if provider == "groq" else "llama-3.3-70b-versatile"
+                return query_groq(prompt, m)
+            
+            elif p == "gemini":
+                # Only try Gemini if key is available
+                if not GEMINI_API_KEY:
+                    raise Exception("Gemini API Key missing")
+                m = model_id if provider == "gemini" else "gemini-2.0-flash"
+                return query_gemini_new(prompt, m)
+                
+            elif p == "ollama":
+                m = model_id if provider == "ollama" else "llama3.2"
+                return query_ollama(prompt, m)
+                
+        except Exception as e:
+            last_error = str(e)
+            print(f"WARNING: Provider {p} failed: {last_error}")
+            # If it's a quota error or connection error, continue to next provider
+            if "429" in last_error or "quota" in last_error.lower() or "connection" in last_error.lower():
+                continue
+            else:
+                # For other errors (like prompt issues), we might want to stop, 
+                # but for safety let's try the next one anyway.
+                continue
+                
+    raise Exception(f"All AI providers failed. Last error: {last_error}")
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Health check endpoint"""
+    return jsonify({
+        "status": "healthy",
+        "service": "ai-service",
+        "hasGeminiKey": bool(GEMINI_API_KEY),
+        "hasGroqKey": bool(GROQ_API_KEY)
+    }), 200
+
+@app.route('/ai/generate-quiz', methods=['POST'])
+def generate_quiz():
+    """Generate quiz using improved pedagogical prompt"""
+    try:
+        data = request.get_json(force=True)
+        text_content = data.get("text", "")
+        provider = data.get("provider", "gemini") # Default to Gemini
+        model_id = data.get("model")
+        num_questions = data.get("numQuestions", 5)
+        difficulty = data.get("difficulty", "Medium")
+
+        if not text_content:
+            return jsonify({"success": False, "error": "No text provided"}), 400
+
+        # Enhanced pedagogical prompt
+        prompt = f"""Act as an Expert Educator and DevOps Architect. Your task is to generate a JSON-formatted practice quiz based on the provided file content.
+
+Follow these strict pedagogical rules:
+1. FOCUS ON APPLICATION: Do not ask for simple definitions. Create scenario-based questions where the user must apply a concept.
+2. RATIONALE-DRIVEN: For every answer option, provide a one-sentence rationale explaining WHY it is correct or WHY it is a common misconception.
+3. ADAPTIVE DIFFICULTY: Group questions into 'Conceptual', 'Hands-on/Syntax', and 'Architectural/Problem Solving'.
+4. STRICT JSON: Ensure all double quotes within text fields are escaped with a backslash. Use only valid JSON characters.
+5. FORMAT: Return only a valid JSON object with the following structure:
+
+{{
+  "title": "Quiz Title",
+  "questions": [
+    {{
+      "question": "string",
+      "answerOptions": [
+        {{"text": "string", "rationale": "string", "isCorrect": boolean}}
+      ],
+      "hint": "string",
+      "category": "Conceptual|Hands-on|Architectural"
+    }}
+  ]
+}}
+
+Generate exactly {num_questions} questions.
+The difficulty level should be: {difficulty}.
+
+Text:
+{text_content[:10000]}
+"""
+
+        # Query AI provider with fallback
+        response_text = query_ai_with_fallback(prompt, provider, model_id)
+
+        # Robust JSON cleaning
+        cleaned = response_text.strip()
+        if cleaned.startswith("```"):
+            # Remove markdown blocks if AI accidentally included them despite JSON mode
+            parts = cleaned.split("```")
+            if len(parts) >= 3:
+                cleaned = parts[1]
+                if cleaned.startswith("json"):
+                    cleaned = cleaned[4:]
+        
+        start = cleaned.find("{")
+        end = cleaned.rfind("}")
+        if start == -1 or end == -1:
+            # Fallback for list-style responses if title/questions wrapper is missing
+            start = cleaned.find("[")
+            end = cleaned.rfind("]")
+            if start == -1 or end == -1:
+                raise Exception("AI did not return valid JSON structure")
+            
+            raw_list = json.loads(cleaned[start:end + 1])
+            quiz_data = {"title": "Practice Quiz", "questions": raw_list}
+        else:
+            quiz_data = json.loads(cleaned[start:end + 1])
+
+        return jsonify({"success": True, "quiz": quiz_data}), 200
+
+    except Exception as e:
+        print(f"Quiz generation error: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/ai/generate-topics', methods=['POST'])
+def generate_topics():
+    """Extract key topics from text"""
+    try:
+        data = request.get_json(force=True)
+        text_content = data.get("text", "")
+        provider = data.get("provider", "gemini") # Changed default to gemini
+        model_id = data.get("model")
+
+        if not text_content:
+            return jsonify({"success": False, "error": "No text provided"}), 400
+
+        prompt = f"""Extract the 5 most important topics from the text below.
+Return ONLY valid JSON:
+
+[
+  {{ "topic": "Topic Name", "description": "One sentence description" }}
+]
+
+Text:
+{text_content[:10000]}
+"""
+
+        # Query AI provider with fallback
+        response_text = query_ai_with_fallback(prompt, provider, model_id)
+
+        cleaned = response_text.strip()
+        if cleaned.startswith("```"):
+            parts = cleaned.split("```")
+            if len(parts) >= 3:
+                cleaned = parts[1]
+                if cleaned.startswith("json"):
+                    cleaned = cleaned[4:]
+
+        start = cleaned.find("[")
+        end = cleaned.rfind("]")
+        if start == -1 or end == -1:
+            # Maybe it returned a single object?
+            start = cleaned.find("{")
+            end = cleaned.rfind("}")
+            if start == -1 or end == -1:
+                raise Exception("AI did not return valid JSON")
+            
+            topics = [json.loads(cleaned[start:end + 1])]
+        else:
+            topics = json.loads(cleaned[start:end + 1])
+
+        return jsonify({"success": True, "topics": topics}), 200
+
+    except Exception as e:
+        print(f"Topics generation error: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/ai/generate-summary', methods=['POST'])
+def generate_summary():
+    """Generate summary of text"""
+    try:
+        data = request.get_json(force=True)
+        text_content = data.get("text", "")
+        provider = data.get("provider", "gemini")
+        model_id = data.get("model")
+
+        if not text_content:
+            return jsonify({"success": False, "error": "No text provided"}), 400
+
+        prompt = f"""Summarize the following text in a concise and easy-to-understand manner for a student.
+Highlight key definitions and core concepts. 
+Limit to 3 paragraphs.
+
+Text:
+{text_content[:15000]}
+"""
+
+        # Query AI provider with fallback
+        response_text = query_ai_with_fallback(prompt, provider, model_id)
+
+        return jsonify({"success": True, "summary": response_text}), 200
+
+    except Exception as e:
+        print(f"Summary generation error: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/ai/explain-topic', methods=['POST'])
+def explain_topic():
+    """Explain a specific topic in detail based on the text context"""
+    try:
+        data = request.get_json(force=True)
+        text_content = data.get("text", "")
+        topic_name = data.get("topic", "")
+        provider = data.get("provider", "gemini")
+        model_id = data.get("model")
+
+        if not text_content or not topic_name:
+            return jsonify({"success": False, "error": "Missing context or topic name"}), 400
+
+        prompt = f"""Explain the topic '{topic_name}' in detail based on its context within the provided text.
+Explain it like you are a helpful teacher. Use simple analogies if possible.
+Keep the explanation focused, professional, and limited to 2-3 detailed paragraphs.
+
+Context Text:
+{text_content[:10000]}
+"""
+
+        # Query AI provider with fallback
+        response_text = query_ai_with_fallback(prompt, provider, model_id)
+
+        return jsonify({"success": True, "explanation": response_text}), 200
+
+    except Exception as e:
+        print(f"Topic explanation error: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5003))
+    print(f"AI Service running on port {port}")
+    app.run(host='0.0.0.0', port=port, debug=True)

services/ai-service/requirements.txt

@@ -0,0 +1,6 @@
+flask
+flask-cors
+python-dotenv
+google-genai
+openai
+requests

services/api-gateway/.env.example

@@ -0,0 +1,5 @@
+PORT=5000
+AUTH_SERVICE_URL=http://localhost:5001
+FILE_PARSER_SERVICE_URL=http://localhost:5002
+AI_SERVICE_URL=http://localhost:5003
+FRONTEND_SERVICE_URL=http://localhost:5004

services/api-gateway/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

services/api-gateway/app.py

@@ -0,0 +1,171 @@
+from flask import Flask, jsonify, request, send_from_directory
+from flask_cors import CORS
+import requests
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__, static_folder=None)
+CORS(app)
+
+# Service URLs
+AUTH_SERVICE_URL = os.getenv("AUTH_SERVICE_URL", "http://localhost:5001")
+FILE_PARSER_SERVICE_URL = os.getenv("FILE_PARSER_SERVICE_URL", "http://localhost:5002")
+AI_SERVICE_URL = os.getenv("AI_SERVICE_URL", "http://localhost:5003")
+FRONTEND_SERVICE_URL = os.getenv("FRONTEND_SERVICE_URL", "http://localhost:5004")
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Health check for API Gateway"""
+    services_health = {}
+    
+    # Check all services
+    services = {
+        "auth": AUTH_SERVICE_URL,
+        "file-parser": FILE_PARSER_SERVICE_URL,
+        "ai": AI_SERVICE_URL,
+        "frontend": FRONTEND_SERVICE_URL
+    }
+    
+    for name, url in services.items():
+        try:
+            response = requests.get(f"{url}/health", timeout=2)
+            print(f"DEBUG: Service {name} at {url} returned status {response.status_code}")
+            services_health[name] = "healthy" if response.status_code == 200 else "unhealthy"
+        except Exception as e:
+            print(f"DEBUG: Service {name} at {url} failed: {str(e)}")
+            services_health[name] = "unreachable"
+    
+    return jsonify({
+        "status": "healthy",
+        "service": "api-gateway",
+        "services": services_health
+    }), 200
+
+# ==================== AUTH ROUTES ====================
+@app.route('/api/config', methods=['GET'])
+def get_config():
+    """Get authentication configuration"""
+    try:
+        response = requests.get(f"{AUTH_SERVICE_URL}/auth/config")
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"Auth service unavailable: {str(e)}"}), 503
+
+@app.route('/api/auth/verify', methods=['POST'])
+def verify_token():
+    """Verify authentication token"""
+    try:
+        response = requests.post(
+            f"{AUTH_SERVICE_URL}/auth/verify",
+            json=request.get_json()
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"Auth service unavailable: {str(e)}"}), 503
+
+# ==================== FILE PARSER ROUTES ====================
+@app.route('/api/parse-file', methods=['POST'])
+def parse_file():
+    """Parse uploaded file"""
+    try:
+        # Forward the file to the file parser service
+        files = {'file': request.files['file']}
+        response = requests.post(
+            f"{FILE_PARSER_SERVICE_URL}/parse-file",
+            files=files
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"File parser service unavailable: {str(e)}"}), 503
+
+# ==================== AI ROUTES ====================
+@app.route('/api/generate-quiz', methods=['POST'])
+def generate_quiz():
+    """Generate quiz from text"""
+    try:
+        response = requests.post(
+            f"{AI_SERVICE_URL}/ai/generate-quiz",
+            json=request.get_json()
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"AI service unavailable: {str(e)}"}), 503
+
+@app.route('/api/generate-topics', methods=['POST'])
+def generate_topics():
+    """Generate key topics from text"""
+    try:
+        response = requests.post(
+            f"{AI_SERVICE_URL}/ai/generate-topics",
+            json=request.get_json()
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"AI service unavailable: {str(e)}"}), 503
+
+@app.route('/api/generate-summary', methods=['POST'])
+def generate_summary():
+    """Generate summary from text"""
+    try:
+        response = requests.post(
+            f"{AI_SERVICE_URL}/ai/generate-summary",
+            json=request.get_json()
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"AI service unavailable: {str(e)}"}), 503
+
+@app.route('/api/explain-topic', methods=['POST'])
+def explain_topic():
+    """Explain a specific topic in detail"""
+    try:
+        response = requests.post(
+            f"{AI_SERVICE_URL}/ai/explain-topic",
+            json=request.get_json()
+        )
+        return jsonify(response.json()), response.status_code
+    except Exception as e:
+        return jsonify({"success": False, "error": f"AI service unavailable: {str(e)}"}), 503
+
+# ==================== FRONTEND ROUTES ====================
+@app.route('/')
+def index():
+    """Serve main page"""
+    try:
+        response = requests.get(f"{FRONTEND_SERVICE_URL}/")
+        # Forward original content type from upstream if available
+        headers = {'Content-Type': response.headers.get('Content-Type', 'text/html')}
+        return response.content, response.status_code, headers
+    except Exception as e:
+        return f"Frontend service unavailable: {str(e)}", 503
+
+@app.route('/static/<path:path>')
+def serve_static(path):
+    """Serve static files"""
+    try:
+        # Construct the upstream URL
+        url = f"{FRONTEND_SERVICE_URL}/static/{path}"
+        response = requests.get(url, stream=True)
+        
+        if response.status_code != 200:
+            return f"Static file not found at upstream: {path} (Checked: {url})", 404
+
+        # Forward important headers, especially Content-Type
+        headers = {}
+        if 'Content-Type' in response.headers:
+            headers['Content-Type'] = response.headers['Content-Type']
+        
+        return response.content, response.status_code, headers
+    except Exception as e:
+        return f"Static file proxy error: {str(e)}", 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5000))
+    print(f"API Gateway running on port {port}")
+    print(f"   Auth Service: {AUTH_SERVICE_URL}")
+    print(f"   File Parser: {FILE_PARSER_SERVICE_URL}")
+    print(f"   AI Service: {AI_SERVICE_URL}")
+    print(f"   Frontend: {FRONTEND_SERVICE_URL}")
+    app.run(host='0.0.0.0', port=port, debug=True)

services/api-gateway/requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-cors
+python-dotenv
+requests

services/auth-service/.env.example

@@ -0,0 +1,2 @@
+GOOGLE_CLIENT_ID=your_google_client_id_here
+PORT=5001

services/auth-service/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

services/auth-service/app.py

@@ -0,0 +1,53 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# Google OAuth Configuration
+GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID", "550475677172-a5kk2v33roru9ujnq8jsq93li6t1dep7.apps.googleusercontent.com")
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Health check endpoint"""
+    return jsonify({"status": "healthy", "service": "auth-service"}), 200
+
+@app.route('/auth/config', methods=['GET'])
+def get_config():
+    """Get Google OAuth configuration"""
+    return jsonify({
+        "clientId": GOOGLE_CLIENT_ID,
+        "success": True
+    }), 200
+
+@app.route('/auth/verify', methods=['POST'])
+def verify_token():
+    """Verify Google OAuth token"""
+    try:
+        data = request.get_json()
+        token = data.get('token')
+        
+        if not token:
+            return jsonify({"success": False, "error": "No token provided"}), 400
+        
+        # In production, verify the token with Google
+        # For now, we'll accept any token for development
+        return jsonify({
+            "success": True,
+            "user": {
+                "email": "user@example.com",
+                "name": "User"
+            }
+        }), 200
+        
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5001))
+    print(f"Auth Service running on port {port}")
+    app.run(host='0.0.0.0', port=port, debug=True)

services/auth-service/requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-cors
+python-dotenv
+google-auth
+google-auth-oauthlib

services/file-parser-service/.env.example

@@ -0,0 +1 @@
+PORT=5002

services/file-parser-service/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

services/file-parser-service/app.py

@@ -0,0 +1,102 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import pdfplumber
+from pptx import Presentation
+import os
+import re
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+def clean_extracted_text(text):
+    """Remove common PDF/binary junk and normalize whitespace"""
+    if not text:
+        return ""
+    
+    # Remove obvious PDF structural markers if they leaked
+    text = re.sub(r'endstream|endobj|\d+ \d+ obj|<<|>>|stream', '', text)
+    
+    # Remove non-printable characters except common punctuation/newlines
+    # Keep standard ASCII and some useful Unicode
+    text = "".join(char for char in text if char.isprintable() or char in "\n\t\r")
+    
+    # Normalize whitespace
+    text = re.sub(r'\s+', ' ', text).strip()
+    return text
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Health check endpoint"""
+    return jsonify({"status": "healthy", "service": "file-parser-service"}), 200
+
+@app.route('/parse-file', methods=['POST'])
+def parse_file():
+    """Parse uploaded file and extract text"""
+    try:
+        if 'file' not in request.files:
+            return jsonify({"success": False, "error": "No file uploaded"}), 400
+
+        file = request.files['file']
+        filename = file.filename.lower()
+        extracted_text = ""
+
+        # Parse PDF files using pdfplumber (more robust)
+        if filename.endswith('.pdf'):
+            try:
+                with pdfplumber.open(file) as pdf:
+                    for page in pdf.pages:
+                        page_text = page.extract_text()
+                        if page_text:
+                            extracted_text += page_text + "\n"
+            except Exception as pdf_err:
+                print(f"pdfplumber failed: {pdf_err}")
+                return jsonify({"success": False, "error": f"PDF parsing failed: {str(pdf_err)}"}), 500
+
+        # Parse PPTX files
+        elif filename.endswith('.pptx'):
+            try:
+                prs = Presentation(file)
+                for slide in prs.slides:
+                    for shape in slide.shapes:
+                        if hasattr(shape, "text"):
+                            extracted_text += shape.text + "\n"
+            except Exception as ppt_err:
+                print(f"PPTX parsing failed: {ppt_err}")
+                return jsonify({"success": False, "error": f"PPTX parsing failed: {str(ppt_err)}"}), 500
+
+        # Parse text files
+        else:
+            try:
+                extracted_text = file.read().decode("utf-8", errors="ignore")
+            except Exception as txt_err:
+                return jsonify({"success": False, "error": f"Text file parsing failed: {str(txt_err)}"}), 500
+
+        # Clean the text to ensure AI doesn't get junk
+        cleaned_text = clean_extracted_text(extracted_text)
+        
+        print(f"Parsed file '{filename}' (Original: {len(extracted_text)}, Cleaned: {len(cleaned_text)})")
+        
+        if not cleaned_text or len(cleaned_text) < 10:
+             return jsonify({
+                "success": False, 
+                "error": "No readable text found in file. Please ensure the file is not just images."
+            }), 400
+
+        return jsonify({
+            "success": True,
+            "text": cleaned_text,
+            "filename": filename,
+            "length": len(cleaned_text)
+        }), 200
+
+    except Exception as e:
+        print(f"Parse error: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5002))
+    print(f"File Parser Service running on port {port}")
+    app.run(host='0.0.0.0', port=port, debug=True)

services/file-parser-service/requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-cors
+python-dotenv
+PyPDF2
+python-pptx

services/frontend-service/.env.example

@@ -0,0 +1 @@
+PORT=5004

services/frontend-service/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

services/frontend-service/app.py

@@ -0,0 +1,27 @@
+from flask import Flask, send_from_directory, jsonify
+from flask_cors import CORS
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__, 
+            static_folder='static', 
+            static_url_path='/static',
+            template_folder='templates')
+CORS(app)
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Health check endpoint"""
+    return jsonify({"status": "healthy", "service": "frontend-service"}), 200
+
+@app.route('/')
+def index():
+    """Serve main HTML page"""
+    return send_from_directory('templates', 'index.html')
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5004))
+    print(f"Frontend Service running on port {port}")
+    app.run(host='0.0.0.0', port=port, debug=True)

services/frontend-service/requirements.txt

@@ -0,0 +1,3 @@
+flask
+flask-cors
+python-dotenv

services/frontend-service/static/css/style.css

@@ -0,0 +1,1522 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap');
+
+:root {
+    --bg-color: #020617;
+    --primary-color: #0ea5e9;
+    --accent-color: #38bdf8;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --card-bg: rgba(30, 41, 59, 0.7);
+    --card-hover: rgba(51, 65, 85, 0.9);
+    --card-border: rgba(255, 255, 255, 0.1);
+    --glass-shine: rgba(255, 255, 255, 0.05);
+    --success: #22c55e;
+    --error: #ef4444;
+}
+
+[data-theme="light"] {
+    --bg-color: #f8fafc;
+    --primary-color: #0284c7;
+    --accent-color: #0ea5e9;
+    --text-primary: #0f172a;
+    --text-secondary: #475569;
+    --card-bg: rgba(255, 255, 255, 0.8);
+    --card-hover: rgba(255, 255, 255, 0.95);
+    --card-border: rgba(0, 0, 0, 0.1);
+    --glass-shine: rgba(0, 0, 0, 0.02);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Outfit', sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    background: radial-gradient(circle at top left, #0f172a, #020617),
+        radial-gradient(circle at bottom right, #1e1b4b, #020617);
+}
+
+/* Background blob effects */
+.blob {
+    position: absolute;
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle, rgba(14, 165, 233, 0.15), transparent 70%);
+    filter: blur(100px);
+    z-index: -1;
+    border-radius: 50%;
+    animation: pulse 15s infinite alternate;
+}
+
+.blob-1 {
+    top: -300px;
+    left: -200px;
+}
+
+.blob-2 {
+    bottom: -300px;
+    right: -200px;
+    background: radial-gradient(circle, rgba(49, 46, 129, 0.2), transparent 70%);
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 0.15;
+    }
+
+    100% {
+        transform: scale(1.1);
+        opacity: 0.25;
+    }
+}
+
+/* --- Login / Landing View --- */
+.login-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    background: #020617;
+    /* Solid base */
+}
+
+/* Remove or simplify the overlay if no image is used */
+.login-container::before {
+    display: none;
+}
+
+.login-content {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    max-width: 800px;
+    padding: 2rem;
+}
+
+/* About Section */
+.about-section {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    width: 100%;
+    margin-bottom: 8rem;
+    padding: 0 2rem;
+    text-align: center;
+}
+
+.about-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 2rem;
+    color: white;
+}
+
+.about-description {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.feature-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
+    margin-top: 4rem;
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.feature-card {
+    background: rgba(30, 41, 59, 0.3);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 32px;
+    padding: 3rem;
+    text-align: left;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.feature-card:hover {
+    background: rgba(30, 41, 59, 0.5);
+    border-color: var(--primary-color);
+    transform: translateY(-10px);
+}
+
+.feature-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.feature-logo {
+    width: 56px;
+    height: 56px;
+    object-fit: contain;
+    background: white;
+    padding: 8px;
+    border-radius: 12px;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: white;
+    margin: 0;
+}
+
+.feature-description {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+.feature-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.9rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s;
+    margin-top: auto;
+}
+
+.feature-link:hover {
+    color: white;
+    transform: translateX(5px);
+}
+
+.brand-title {
+    font-size: 5rem;
+    font-weight: 700;
+    letter-spacing: -0.05em;
+    margin-bottom: 1rem;
+    background: linear-gradient(to right, #fff, var(--primary-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 10px 80px rgba(14, 165, 233, 0.4);
+}
+
+.brand-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-bottom: 3rem;
+    line-height: 1.6;
+}
+
+.btn-login-hero {
+    background: white;
+    color: #0f172a;
+    font-weight: 600;
+    font-size: 1.1rem;
+    padding: 1rem 2.5rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-login-hero:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.4);
+    background: #f8fafc;
+}
+
+.btn-icon-img {
+    width: 24px;
+    height: 24px;
+}
+
+.login-footer {
+    color: white;
+    position: relative;
+    padding: 4rem 0 3rem;
+    width: 100%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.social-links {
+    display: flex;
+    gap: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.social-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0.7;
+}
+
+.social-icon img {
+    width: 20px;
+    height: 20px;
+    /* Apply a light filter to make black svgs white-ish if needed, or leave as is if they match */
+    filter: brightness(0) invert(1);
+}
+
+.social-icon:hover {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    transform: translateY(-5px);
+    opacity: 1;
+    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
+}
+
+.social-icon:hover img {
+    filter: brightness(0) invert(0);
+    /* Black icons on primary background */
+}
+
+/* --- Dashboard Navigation --- */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 2rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(15px);
+    border-bottom: 1px solid var(--card-border);
+    background: rgba(2, 6, 23, 0.5);
+}
+
+.logo-highlight {
+    font-weight: 700;
+    font-size: 1.8rem;
+    /* color: white; */
+    background: linear-gradient(to right, #fff, var(--primary-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 10px 80px rgba(14, 165, 233, 0.4);
+    letter-spacing: -0.03em;
+}
+
+.btn-glass {
+    background: #111827;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.75rem 2rem;
+    border-radius: 100px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    backdrop-filter: blur(10px);
+}
+
+.btn-glass span {
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.btn-glass:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: var(--primary-color);
+}
+
+.btn-primary,
+.btn-secondary {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 600;
+    padding: 0.8rem 2rem;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 0.95rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background: white;
+    color: #0f172a;
+}
+
+.btn-primary:hover {
+    background: #f1f5f9;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.btn-logout,
+.btn-assistant {
+    font-weight: 600;
+    font-size: 0.95rem;
+    padding: 0.6rem 2rem;
+    border-radius: 99px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: none;
+}
+
+.btn-logout {
+    background: white;
+    color: #0f172a;
+}
+
+.btn-logout:hover {
+    background: #f1f5f9;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
+}
+
+.btn-assistant {
+    background: #1e293b;
+    color: white;
+    margin-right: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-assistant:hover {
+    background: #334155;
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+/* --- Assistant View Styles --- */
+.container.assistant-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: calc(100vh - 120px);
+    text-align: center;
+    padding: 2rem 2rem 220px 2rem !important;
+    /* Significant padding to clear the fixed chat bar */
+    animation: fadeIn 0.6s ease;
+    overflow-y: visible;
+    /* Let the body scroll */
+}
+
+.assistant-header-center {
+    margin-bottom: 3rem;
+}
+
+.assistant-prompt {
+    font-size: 2.2rem;
+    color: var(--text-secondary);
+    margin-bottom: 3.5rem;
+    font-weight: 400;
+    max-width: 800px;
+    line-height: 1.3;
+}
+
+.discussion-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+    justify-content: center;
+    max-width: 1000px;
+    margin-bottom: 4rem;
+}
+
+.discussion-pill {
+    background: rgba(30, 41, 59, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #94a3b8;
+    padding: 0.8rem 1.8rem;
+    border-radius: 99px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.discussion-pill:hover {
+    background: rgba(30, 41, 59, 0.8);
+    border-color: var(--primary-color);
+    color: white;
+    transform: translateY(-3px);
+}
+
+.chat-input-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 1.5rem 2rem 2.5rem;
+    /* Reduced padding from 2.5/3.5 */
+    background: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.95) 70%);
+    /* Sharper gradient at the very bottom */
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+    /* Allow clicking through the fade area */
+}
+
+.chat-input-container {
+    pointer-events: all;
+    /* Re-enable for the bar itself */
+    width: 100%;
+    max-width: 800px;
+    background: rgba(30, 41, 59, 0.6);
+    backdrop-filter: blur(20px) saturate(150%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+    border-radius: 24px;
+    padding: 0.6rem 0.6rem 0.6rem 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
+    display: flex;
+    align-items: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chat-input-container:focus-within {
+    background: rgba(30, 41, 59, 0.8);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 40px rgba(14, 165, 233, 0.2);
+    transform: translateY(-2px);
+}
+
+#chat-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: #f8fafc;
+    font-size: 1.1rem;
+    resize: none;
+    outline: none;
+    font-family: inherit;
+    line-height: 1.6;
+    max-height: 200px;
+    padding: 0.5rem 0;
+    display: block;
+}
+
+#chat-input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.btn-send-chat {
+    width: 48px;
+    height: 48px;
+    background: var(--primary-color);
+    color: #020617;
+    border: none;
+    border-radius: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: all 0.2s;
+    margin-left: 1rem;
+    flex-shrink: 0;
+}
+
+.btn-send-chat:hover {
+    background: white;
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
+}
+
+.btn-send-chat:active {
+    transform: scale(0.95);
+}
+
+.assistant-response-area {
+    width: 100%;
+    max-width: 850px;
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+    /* Extra space between response and bottom bar */
+    text-align: left;
+}
+
+.response-card {
+    background: rgba(30, 41, 59, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 24px;
+    padding: 2.5rem;
+    color: #e2e8f0;
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.response-card h3,
+.response-card h4 {
+    color: white;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.response-card p {
+    margin-bottom: 1.25rem;
+}
+
+.response-card li {
+    margin-bottom: 0.5rem;
+    margin-left: 1.5rem;
+}
+
+[data-theme="light"] .chat-input-container {
+    background: white;
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] #chat-input {
+    color: #0f172a;
+}
+
+[data-theme="light"] .btn-send-chat {
+    color: white;
+}
+
+[data-theme="light"] .discussion-pill {
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    color: #475569;
+}
+
+[data-theme="light"] .discussion-pill:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #0f172a;
+}
+
+
+.nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+/* --- Main Container & Grid --- */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 2rem;
+}
+
+/* Premium Card Style - Updated to match design image */
+.card {
+    border-radius: 32px;
+    padding: 0;
+    height: auto;
+    background: #0f172a;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
+    border-color: rgba(14, 165, 233, 0.3);
+}
+
+.card-image-container {
+    padding: 12px;
+    width: 100%;
+}
+
+.card-banner {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 24px;
+    display: block;
+}
+
+.card-info {
+    padding: 1.25rem 1.5rem 1.75rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.card-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+
+.card-title {
+    font-size: 1.35rem;
+    font-weight: 700;
+    color: white;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.card-subtitle {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    opacity: 0.7;
+}
+
+.card-action {
+    background: rgba(148, 163, 184, 0.15);
+    color: #cbd5e1;
+    padding: 0.6rem 1.25rem;
+    border-radius: 100px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s;
+    white-space: nowrap;
+    margin-left: 1rem;
+}
+
+.card:hover .card-action {
+    background: var(--primary-color);
+    color: #0f172a;
+    border-color: var(--primary-color);
+}
+
+/* Quiz Overlay & Containers */
+.quiz-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(2, 6, 23, 0.8);
+    backdrop-filter: blur(20px);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.quiz-overlay.active {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.quiz-container {
+    background: #0f172a;
+    width: 95%;
+    max-width: 1000px;
+    border-radius: 48px;
+    padding: 3.5rem;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
+}
+
+.close-btn {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    z-index: 10;
+}
+
+.close-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: rotate(90deg);
+}
+
+#view-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 0;
+    text-align: center;
+}
+
+#view-loading h2 {
+    font-size: 2rem;
+    color: white;
+    margin-bottom: 2rem;
+    font-weight: 700;
+    text-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
+}
+
+#loading-text {
+    margin-top: 2rem;
+    font-size: 1.1rem;
+    color: white;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    opacity: 0.9;
+}
+
+/* --- Quiz Views & Panels --- */
+.quiz-header-banner {
+    position: relative;
+    width: 100%;
+    height: 180px;
+    border-radius: 24px;
+    overflow: hidden;
+    margin-bottom: 2rem;
+}
+
+.quiz-stats-overlay {
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+#quiz-timer-display,
+#quiz-qno-display {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    opacity: 0.9;
+}
+
+.config-container {
+    padding: 0 1rem;
+}
+
+.config-main-title {
+    text-align: center;
+    font-size: 1.5rem;
+    margin-bottom: 2.5rem;
+    font-weight: 700;
+}
+
+.config-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.config-row label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.pill-group {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.pill-option {
+    padding: 0.6rem 1.25rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 100px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.pill-option:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.pill-option.selected {
+    background: var(--primary-color);
+    color: #0f172a;
+    border-color: var(--primary-color);
+}
+
+.config-actions {
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.quiz-active-container {
+    padding: 0 1rem;
+}
+
+.question-text {
+    color: white;
+    font-size: 1.35rem;
+    line-height: 1.5;
+    margin-bottom: 2.5rem;
+    font-weight: 600;
+}
+
+.options-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.option-btn {
+    padding: 1.25rem 2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 100px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.option-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.option-btn.correct {
+    background: var(--success) !important;
+    color: #0f172a !important;
+    font-weight: 700;
+    border-color: var(--success) !important;
+}
+
+.option-btn.wrong {
+    background: var(--error) !important;
+    color: white !important;
+    border-color: var(--error) !important;
+}
+
+.result-breakdown {
+    display: flex;
+    gap: 2rem;
+    margin: 1.5rem 0;
+    justify-content: center;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.result-item.correct {
+    color: var(--success);
+}
+
+.result-item.wrong {
+    color: var(--error);
+}
+
+.menu-header {
+    margin-bottom: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.menu-titles h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: white;
+    margin: 0;
+}
+
+.menu-subtitle {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    opacity: 0.8;
+    margin-top: 0.25rem;
+}
+
+/* Action Cards - Updated to match design image */
+.action-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.action-card {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 1.5rem;
+    border-radius: 32px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.action-card:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(14, 165, 233, 0.3);
+    transform: translateY(-8px);
+}
+
+.action-img-container {
+    width: 100%;
+    margin-bottom: 1.5rem;
+    padding: 0.5rem;
+}
+
+.action-img-container img {
+    width: 100%;
+    height: 140px;
+    object-fit: contain;
+    border-radius: 20px;
+}
+
+.action-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: white;
+    margin: 0 0 0.75rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.action-card p {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    flex-grow: 1;
+}
+
+.action-link {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: white;
+    opacity: 0.9;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+.action-card:hover .action-link {
+    color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.view-banner {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 20px;
+    margin-bottom: 2rem;
+}
+
+/* Remove old option styles */
+
+/* --- Key Points View (Updated Design) --- */
+.topics-header-banner,
+.summary-header-banner {
+    position: relative;
+    width: 100%;
+    height: 220px;
+    border-radius: 24px;
+    overflow: hidden;
+    margin-bottom: 2rem;
+}
+
+.banner-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.8;
+}
+
+.banner-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 30%, rgba(15, 23, 42, 0.4) 100%);
+    display: flex;
+    align-items: center;
+    padding: 0 3rem;
+}
+
+.banner-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.banner-text h2 {
+    font-size: 1.75rem;
+    color: white;
+    margin: 0;
+}
+
+.banner-subtitle {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-top: 0.2rem;
+}
+
+.banner-label {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: white;
+    margin-top: 1.5rem;
+}
+
+.topic-pill-large {
+    background: rgba(14, 165, 233, 0.15);
+    border: 1px solid var(--primary-color);
+    color: white;
+    padding: 0.75rem 2rem;
+    border-radius: 100px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    backdrop-filter: blur(10px);
+}
+
+.topics-container-padding,
+.summary-container-padding {
+    padding: 0 2rem;
+}
+
+.topics-pills-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.topic-pill-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 1.25rem 2rem;
+    border-radius: 100px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.topic-pill-btn:hover {
+    background: rgba(14, 165, 233, 0.1);
+    border-color: var(--primary-color);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.explanation-content {
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 24px;
+    padding: 2.5rem;
+    color: #e2e8f0;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    animation: fadeIn 0.5s ease;
+}
+
+.explanation-content p {
+    margin-bottom: 1.5rem;
+}
+
+.topics-footer {
+    padding: 2rem;
+    display: flex;
+    justify-content: flex-start;
+}
+
+/* Override existing topic styles */
+.topics-list {
+    display: none;
+}
+
+/* Score Circle */
+.score-circle {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: conic-gradient(var(--primary-color) calc(var(--score) * 1%), rgba(255, 255, 255, 0.05) 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem auto;
+    position: relative;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.score-circle::after {
+    content: '';
+    position: absolute;
+    width: 130px;
+    height: 130px;
+    background: #0f172a;
+    border-radius: 50%;
+}
+
+.score-circle div {
+    position: relative;
+    z-index: 1;
+}
+
+[data-theme="light"] .score-circle::after {
+    background: #f8fafc;
+}
+
+/* Scrollbar refinement */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Quiz UI Enhancements */
+.category-badge {
+    background: var(--primary-color);
+    color: #0f172a;
+    padding: 0.25rem 0.75rem;
+    border-radius: 99px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.hint-container {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.btn-hint {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--card-border);
+    color: var(--text-secondary);
+    padding: 0.4rem 1rem;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-hint:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.hint-text {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--accent-color);
+    font-style: italic;
+    background: rgba(56, 189, 248, 0.1);
+    padding: 0.75rem;
+    border-radius: 12px;
+}
+
+.rationale-container {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 16px;
+    border-left: 4px solid var(--primary-color);
+    animation: fadeIn 0.5s ease;
+}
+
+.rationale-container h4 {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+.rationale-container p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* --- Settings Modal (Premium Glassmorphism) --- */
+.settings-modal {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: auto;
+    outline: none;
+    overflow: visible;
+}
+
+.settings-modal::backdrop {
+    background: rgba(2, 6, 23, 0.4);
+    backdrop-filter: blur(12px);
+}
+
+.settings-container {
+    background: rgba(30, 41, 59, 0.3);
+    backdrop-filter: blur(30px);
+    width: 90vw;
+    max-width: 500px;
+    border-radius: 40px;
+    padding: 3rem 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8),
+        inset 0 0 20px rgba(255, 255, 255, 0.02);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    animation: modalSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.model-options-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+.settings-provider-header {
+    width: 100%;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 1.5rem 0 0.75rem 0.5rem;
+    font-weight: 700;
+}
+
+.model-pill {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1.5rem 2rem;
+    border-radius: 100px;
+    color: white;
+    font-size: 1.1rem;
+    font-weight: 500;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.model-pill:hover {
+    background: rgba(15, 23, 42, 0.9);
+    border-color: rgba(14, 165, 233, 0.3);
+    transform: scale(1.02);
+}
+
+.model-pill.selected {
+    background: rgba(14, 165, 233, 0.15);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
+}
+
+.settings-actions {
+    margin-top: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.btn-save-settings {
+    background: #111827;
+    /* Deep Navy as per visual */
+    color: white;
+    padding: 1rem 3.5rem;
+    border-radius: 100px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-save-settings:hover {
+    background: #1e293b;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 30px rgba(14, 165, 233, 0.2);
+}
+
+/* Spinner Animation */
+.spinner {
+    width: 60px;
+    height: 60px;
+    border: 5px solid rgba(255, 255, 255, 0.1);
+    border-top: 5px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 2rem auto;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Improvements */
+@media(max-width: 768px) {
+    nav {
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 1rem 1.5rem;
+    }
+
+    .nav-center {
+        order: 3;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-top: 1rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        margin-top: 0.5rem;
+    }
+
+    .brand-title {
+        font-size: 3.5rem;
+    }
+
+    .action-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .quiz-container {
+        padding: 2rem 1.5rem;
+        border-radius: 32px;
+    }
+
+    .btn-glass {
+        width: 100%;
+        justify-content: center;
+        padding: 0.6rem 1rem;
+        font-size: 0.85rem;
+    }
+
+    .container.assistant-container {
+        padding: 1.5rem 1rem 180px 1rem !important;
+    }
+
+    .chat-input-wrapper {
+        padding: 1rem 1rem 1.5rem;
+    }
+
+    .chat-input-container {
+        padding: 0.5rem 0.5rem 0.5rem 1rem;
+        border-radius: 20px;
+    }
+
+    .nav-actions {
+        gap: 0.5rem;
+    }
+
+    .btn-assistant,
+    .btn-logout {
+        padding: 0.5rem 1.25rem;
+        font-size: 0.85rem;
+    }
+}

services/frontend-service/static/js/app.js

@@ -0,0 +1,1121 @@
+/* 
+  ExamPrep App Logic 
+  Handles Google Auth, Classroom API fetching, and Quiz UI
+*/
+
+// Configuration
+let CLIENT_ID = '';
+const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/classroom/v1/rest", "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
+const SCOPES = "https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/classroom.announcements.readonly https://www.googleapis.com/auth/classroom.coursework.students.readonly https://www.googleapis.com/auth/classroom.courseworkmaterials.readonly";
+
+const AI_CONFIG = {
+    gemini: {
+        label: "Google Gemini",
+        helpLink: "https://aistudio.google.com/app/apikey",
+        models: [
+            { id: "gemini-2.0-flash", name: "Gemini 2.0 Flash (Default)" },
+            { id: "gemini-1.5-pro", name: "Gemini 1.5 Pro" }
+        ]
+    },
+    groq: {
+        label: "Groq (High Speed)",
+        helpLink: "https://console.groq.com/keys",
+        models: [
+            { id: "llama-3.3-70b-versatile", name: "Llama 3.3 70B (Latest)" },
+            { id: "llama-3.1-8b-instant", name: "Llama 3.1 8B (Fast)" }
+        ]
+    },
+    ollama: {
+        label: "Ollama (Requires Local App)",
+        helpLink: "https://ollama.com",
+        models: [
+            { id: "llama3.2", name: "Llama 3.2 (Local)" },
+            { id: "deepseek-r1", name: "DeepSeek R1 (Local)" },
+            { id: "mistral", name: "Mistral" }
+        ]
+    }
+};
+
+// State
+let tokenClient;
+let gapiInited = false;
+let gisInited = false;
+let currentQuiz = [];
+let currentQuestionIndex = 0;
+let userScore = 0;
+let correctCount = 0;
+let wrongCount = 0;
+let currentTextContent = ""; // Store text to avoid re-parsing for redundant calls
+let currentSubjectName = "";
+let quizTimer = null;
+let secondsElapsed = 0;
+let isTimerEnabled = false;
+let allLoadedCourses = []; // Store courses for assistant use
+let courseContentCache = {}; // Cache for extracted course text
+let currentFileList = []; // Current course files for download
+
+// --- Optimization: Settings & API Key ---
+function getSettings() {
+    return {
+        provider: localStorage.getItem('ai_provider') || "groq",
+        model: localStorage.getItem('ai_model') || "llama-3.3-70b-versatile"
+    };
+}
+
+let tempSelectedModelId = ""; // Track selection within the modal
+
+function updateModelOptions() {
+    const list = document.getElementById('model-options-list');
+    list.innerHTML = '';
+
+    Object.keys(AI_CONFIG).forEach(providerKey => {
+        const config = AI_CONFIG[providerKey];
+
+        // Provider Header
+        const header = document.createElement('div');
+        header.className = 'settings-provider-header';
+        header.innerText = config.label;
+        list.appendChild(header);
+
+        config.models.forEach(m => {
+            const pill = document.createElement('div');
+            pill.className = `model-pill ${m.id === tempSelectedModelId ? 'selected' : ''}`;
+            pill.innerText = m.name;
+            pill.onclick = () => {
+                document.querySelectorAll('.model-pill').forEach(p => p.classList.remove('selected'));
+                pill.classList.add('selected');
+                tempSelectedModelId = m.id;
+            };
+            list.appendChild(pill);
+        });
+    });
+}
+
+function openSettings() {
+    const modal = document.getElementById('settings-modal');
+    const settings = getSettings();
+    tempSelectedModelId = settings.model; // Initialize temp selection
+    updateModelOptions();
+    modal.showModal();
+}
+
+function closeSettings() {
+    document.getElementById('settings-modal').close();
+}
+
+function saveSettings() {
+    if (tempSelectedModelId) {
+        // Find provider for this model
+        let provider = 'gemini';
+        Object.keys(AI_CONFIG).forEach(k => {
+            if (AI_CONFIG[k].models.find(m => m.id === tempSelectedModelId)) {
+                provider = k;
+            }
+        });
+
+        localStorage.setItem('ai_model', tempSelectedModelId);
+        localStorage.setItem('ai_provider', provider);
+        closeSettings();
+    }
+}
+
+// --- Theme Toggle ---
+function toggleTheme() {
+    const html = document.documentElement;
+    const current = html.getAttribute('data-theme');
+    const next = current === 'light' ? 'dark' : 'light';
+    html.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    updateThemeIcon(next);
+}
+
+function updateThemeIcon(theme) {
+    const btn = document.getElementById('theme-toggle-btn');
+    if (btn) btn.innerText = theme === 'light' ? '☀️' : '🌙';
+}
+
+function initTheme() {
+    const saved = localStorage.getItem('theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', saved);
+    updateThemeIcon(saved);
+}
+
+// 1. Initial Load
+document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    fetchConfig();
+
+    // Load images from bundle
+    if (typeof IMAGE_BUNDLE !== 'undefined') {
+        document.querySelectorAll('img[data-src]').forEach(img => {
+            const name = img.dataset.src;
+            if (IMAGE_BUNDLE[name]) {
+                img.src = IMAGE_BUNDLE[name];
+            }
+        });
+    }
+});
+
+async function fetchConfig() {
+    try {
+        const response = await fetch('/api/config');
+        const data = await response.json();
+        if (data.clientId && data.clientId !== 'PLACEHOLDER_FOR_USER_TO_FILL') {
+            CLIENT_ID = data.clientId;
+        }
+        gapi.load('client', initializeGapiClient);
+        initializeGisClient();
+    } catch (e) {
+        console.error("Config load failed", e);
+    }
+}
+
+// 2. Google API Setup
+
+async function initializeGapiClient() {
+    await gapi.client.init({ discoveryDocs: DISCOVERY_DOCS });
+    gapiInited = true;
+    maybeEnableButtons();
+}
+
+function initializeGisClient() {
+    tokenClient = google.accounts.oauth2.initTokenClient({
+        client_id: CLIENT_ID,
+        scope: SCOPES,
+        callback: '', // defined below
+    });
+    gisInited = true;
+    maybeEnableButtons();
+}
+
+function maybeEnableButtons() {
+    if (gapiInited && gisInited) {
+        console.log("Google APIs Ready");
+
+        // Session Persistence: Check if we have a saved token
+        const savedToken = localStorage.getItem('google_token');
+        if (savedToken) {
+            try {
+                const tokenObj = JSON.parse(savedToken);
+                // Check if token is potentially expired (rough check)
+                // If it's valid, set it and log in
+                gapi.client.setToken(tokenObj);
+                updateAuthUI(true);
+                listCourses();
+            } catch (e) {
+                console.warn("Invalid token in storage", e);
+                localStorage.removeItem('google_token');
+            }
+        }
+    }
+}
+
+function handleAuthClick() {
+    tokenClient.callback = async (resp) => {
+        if (resp.error !== undefined) throw (resp);
+
+        // Persist token for session recovery on refresh
+        localStorage.setItem('google_token', JSON.stringify(resp));
+
+        updateAuthUI(true);
+        await listCourses();
+    };
+
+    if (gapi.client.getToken() === null) {
+        tokenClient.requestAccessToken({ prompt: 'consent' });
+    } else {
+        tokenClient.requestAccessToken({ prompt: '' });
+    }
+}
+
+function handleSignoutClick() {
+    const token = gapi.client.getToken();
+    if (token !== null) {
+        google.accounts.oauth2.revoke(token.access_token);
+        gapi.client.setToken('');
+        localStorage.removeItem('google_token'); // Clear persistent session
+        updateAuthUI(false);
+    }
+}
+
+function updateAuthUI(isSignedIn) {
+    const loginView = document.getElementById('login-view');
+    const dashboardView = document.getElementById('dashboard-view');
+
+    if (isSignedIn) {
+        loginView.style.display = 'none';
+        dashboardView.style.display = 'block';
+
+        const loader = document.getElementById('initial-loading');
+        const grid = document.getElementById('courses-grid');
+
+        loader.style.display = 'flex'; // show loader while fetching
+
+        // Try to get user info if possible (optional enhancement)
+        // const output = document.getElementById('user-profile-pic');
+        // output.style.backgroundImage = `url(...)`;
+
+    } else {
+        loginView.style.display = 'flex';
+        dashboardView.style.display = 'none';
+        document.getElementById('courses-grid').innerHTML = '';
+    }
+}
+
+// 4. Feature Logic: Classroom
+
+async function listCourses() {
+    const grid = document.getElementById('courses-grid');
+    grid.innerHTML = '';
+
+    try {
+        const response = await gapi.client.classroom.courses.list({
+            pageSize: 12,
+            courseStates: 'ACTIVE'
+        });
+
+        document.getElementById('initial-loading').style.display = 'none';
+
+        const courses = response.result.courses;
+        allLoadedCourses = courses || []; // Save to global state
+        if (!courses || courses.length === 0) {
+            grid.innerHTML = '<p>No courses found.</p>';
+            return;
+        }
+
+        courses.forEach((course, index) => {
+            const card = document.createElement('div');
+            card.className = 'card';
+            const imgName = `Card${(index % 4) + 1}.png`;
+            const cardImg = (typeof IMAGE_BUNDLE !== 'undefined' && IMAGE_BUNDLE[imgName]) ? IMAGE_BUNDLE[imgName] : '';
+
+            card.innerHTML = `
+                <div class="card-image-container">
+                    <img src="${cardImg}" class="card-banner" alt="${course.name}">
+                </div>
+                <div class="card-info">
+                    <div class="card-text">
+                        <div class="card-subtitle">${course.section || 'General'}</div>
+                        <div class="card-title">${course.name}</div>
+                    </div>
+                    <button class="card-action">View Materials</button>
+                </div>
+            `;
+            card.onclick = (e) => {
+                loadCourseMaterials(course.id, course.name, course.section || 'General');
+            };
+            grid.appendChild(card);
+        });
+
+    } catch (err) {
+        console.error(err);
+        document.getElementById('initial-loading').style.display = 'none';
+        grid.innerHTML = `<p style="color:red">Error loading courses: ${err.message}</p>`;
+    }
+}
+
+// 5. Materials & Quiz Logic
+
+// --- Optimization: Caching & Parallel Processing ---
+
+async function loadCourseMaterials(courseId, courseName, courseBatch) {
+    currentSubjectName = courseName;
+
+    // Reset UI State
+    document.getElementById('quiz-modal').classList.add('active');
+    switchView('loading');
+    const loadText = document.getElementById('loading-text');
+    loadText.innerText = `Scanning ${courseName} for documents...`;
+
+    // Update Action Menu Header placeholders
+    document.getElementById('menu-course-name').innerText = courseName;
+    document.getElementById('menu-course-batch').innerText = courseBatch;
+
+    try {
+        // --- Step 0: Check Cache ---
+        if (courseContentCache[courseId]) {
+            console.log(`Loading ${courseName} from session cache`);
+            currentTextContent = courseContentCache[courseId].text;
+            currentFileList = courseContentCache[courseId].files;
+            switchView('action-menu');
+            return;
+        }
+
+        let aggregatedText = "";
+        let filesToProcess = [];
+
+        // --- Step 1: Gather All Metadata (Parallel API Calls) ---
+        loadText.innerText = "Fetching Classroom Data...";
+
+        const [announceResp, workResp, matResp] = await Promise.all([
+            Promise.resolve(gapi.client.classroom.courses.announcements.list({ courseId, pageSize: 5 })).catch(e => ({ result: {} })),
+            Promise.resolve(gapi.client.classroom.courses.courseWork.list({ courseId, pageSize: 10 })).catch(e => ({ result: {} })),
+            Promise.resolve(gapi.client.classroom.courses.courseWorkMaterials.list({ courseId, pageSize: 10 })).catch(e => ({ result: {} }))
+        ]);
+
+        // Process Announcements
+        if (announceResp.result.announcements) {
+            announceResp.result.announcements.forEach(a => {
+                aggregatedText += (a.text || "") + "\n";
+                if (a.materials) filesToProcess.push(...a.materials);
+            });
+        }
+
+        // Process Assignments
+        if (workResp.result.courseWork) {
+            workResp.result.courseWork.forEach(w => {
+                aggregatedText += (w.description || "") + "\n";
+                if (w.materials) filesToProcess.push(...w.materials);
+            });
+        }
+
+        // Process Materials
+        if (matResp.result.courseWorkMaterial) {
+            matResp.result.courseWorkMaterial.forEach(m => {
+                aggregatedText += (m.description || "") + "\n";
+                if (m.materials) filesToProcess.push(...m.materials);
+            });
+        }
+
+        // --- Step 2: Filter & Deduplicate Files ---
+        const uniqueFiles = new Map();
+        filesToProcess.forEach(mat => {
+            if (mat.driveFile && mat.driveFile.driveFile) {
+                const f = mat.driveFile.driveFile;
+                const title = f.title.toLowerCase();
+                if (title.endsWith('.pdf') || title.endsWith('.pptx')) {
+                    if (!uniqueFiles.has(f.id)) {
+                        uniqueFiles.set(f.id, f);
+                    }
+                }
+            }
+        });
+
+        const fileList = Array.from(uniqueFiles.values());
+
+        // --- Step 3: Process Files in Parallel (with Limit) ---
+        if (fileList.length > 0) {
+            loadText.innerText = `Processing ${fileList.length} documents...`;
+
+            // map to promises
+            const filePromises = fileList.map(file => downloadAndParseFile(file.id, file.title));
+
+            // Wait for all
+            const fileResults = await Promise.all(filePromises);
+
+            fileResults.forEach(text => {
+                if (text) aggregatedText += text + "\n";
+            });
+        }
+
+        // Fallback checks
+        if (aggregatedText.length < 50) {
+            console.warn("Low content found, using context-aware simulation.");
+            aggregatedText = `
+                Subject: ${courseName}
+                This is a generated study context because the classroom query returned limited text. 
+                Key concepts in ${courseName} often include fundamental theories, practical applications, architecture, and core methodologies.
+            `;
+        }
+
+        console.log(`Final extracted text length: ${aggregatedText.length}`);
+        currentTextContent = aggregatedText;
+        currentFileList = fileList; // Save for download feature
+
+        // Store both in cache
+        courseContentCache[courseId] = {
+            text: aggregatedText,
+            files: fileList
+        };
+
+        // Show Action Menu instead of direct generation
+        switchView('action-menu');
+
+    } catch (e) {
+        console.error("Error fetching class data", e);
+        const msg = e.result?.error?.message || e.message || "Unknown Error";
+        document.getElementById('loading-text').innerText = `Error: ${msg}`;
+    }
+}
+
+// Reuse cache to prevent re-downloading same files
+async function downloadAndParseFile(fileId, fileName) {
+    const CACHE_KEY = `doc_cache_${fileId}`;
+
+    // 1. Check Local Cache
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (cached) {
+        console.log(`Loaded ${fileName} from cache`);
+        return cached;
+    }
+
+    try {
+        // 2. Download from Drive
+        const token = gapi.client.getToken().access_token;
+        const directResp = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+
+        if (!directResp.ok) throw new Error("Download failed");
+        const blob = await directResp.blob();
+
+        // 3. Parse in Backend
+        const formData = new FormData();
+        formData.append("file", blob, fileName);
+
+        const parseResp = await fetch('/api/parse-file', {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await parseResp.json();
+        if (data.success) {
+            // 4. Save to Cache (Limit size to avoid quota errors - e.g. store first 50kb)
+            try {
+                // simple length check, maybe trim if too huge
+                const content = data.text;
+                localStorage.setItem(CACHE_KEY, content);
+            } catch (e) {
+                console.warn("Cache full");
+            }
+            return data.text;
+        }
+        return null;
+
+    } catch (e) {
+        console.error(`Failed to parse ${fileName}`, e);
+        return null; // Skip file on error
+    }
+}
+
+// Deprecated: Old processMaterials function replaced by inline logic
+// async function processMaterials(materials) { ... }
+
+// New Functions for Action Menu interactions
+async function startTopicsGeneration() {
+    await generateTopics(currentTextContent);
+}
+
+function showQuizConfig() {
+    document.getElementById('config-course-name').innerText = currentSubjectName;
+    document.getElementById('config-course-batch').innerText = document.getElementById('menu-course-batch').innerText;
+
+    // Initialize Pill Click Listeners
+    setupPills();
+
+    switchView('quiz-config');
+}
+
+function setupPills() {
+    const pillGroups = ['pill-num-questions', 'pill-difficulty', 'pill-timer'];
+    pillGroups.forEach(groupId => {
+        const group = document.getElementById(groupId);
+        if (!group) return;
+        group.querySelectorAll('.pill-option').forEach(pill => {
+            pill.onclick = () => {
+                group.querySelectorAll('.pill-option').forEach(p => p.classList.remove('selected'));
+                pill.classList.add('selected');
+            };
+        });
+    });
+}
+
+async function startQuizFromConfig() {
+    const numQPill = document.querySelector('#pill-num-questions .selected');
+    const diffPill = document.querySelector('#pill-difficulty .selected');
+    const timerPill = document.querySelector('#pill-timer .selected');
+
+    const numQ = numQPill ? numQPill.dataset.value : 10;
+    const diff = diffPill ? diffPill.dataset.value : "Medium";
+    const timerValue = timerPill ? timerPill.dataset.value : "disable";
+
+    isTimerEnabled = (timerValue === 'enable');
+    await startQuizFlow(numQ, diff);
+}
+
+async function generateTopics(text) {
+    switchView('loading');
+    document.getElementById('loading-text').innerText = "AI is analyzing key concepts...";
+
+    try {
+        const settings = getSettings();
+        const response = await fetch('/api/generate-topics', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                text: text,
+                provider: settings.provider,
+                model: settings.model
+            })
+        });
+
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || "Failed to generate topics");
+        }
+
+        const data = await response.json();
+
+        // Update Topic UI Header
+        document.getElementById('topics-course-name').innerText = currentSubjectName;
+        // Batch already set in loadCourseMaterials, but let's ensure consistency if needed
+
+        // Render Topics as Pills
+        const grid = document.getElementById('topics-pills-grid');
+        grid.innerHTML = '';
+
+        data.topics.forEach(t => {
+            const btn = document.createElement('div');
+            btn.className = 'topic-pill-btn';
+            btn.innerText = t.topic;
+            btn.onclick = () => showTopicExplanation(t.topic);
+            grid.appendChild(btn);
+        });
+
+        showTopicsGrid(); // Ensure grid view is visible
+        switchView('topics');
+
+    } catch (e) {
+        alert("AI Error: " + e.message);
+        switchView('action-menu');
+    }
+}
+
+async function showTopicExplanation(topicName) {
+    // UI Transitions
+    document.getElementById('topics-grid-container').style.display = 'none';
+    document.getElementById('topic-explanation-container').style.display = 'block';
+
+    document.getElementById('selected-topic-pill-container').style.display = 'block';
+    document.getElementById('selected-topic-name').innerText = topicName;
+
+    document.getElementById('btn-topics-back').style.display = 'none';
+    document.getElementById('btn-explanation-back').style.display = 'block';
+
+    const contentArea = document.getElementById('topic-explanation-text');
+    contentArea.innerHTML = '<div class="spinner"></div><p style="text-align:center">AI is preparing a detailed explanation...</p>';
+
+    try {
+        const settings = getSettings();
+        const response = await fetch('/api/explain-topic', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                text: currentTextContent,
+                topic: topicName,
+                provider: settings.provider,
+                model: settings.model
+            })
+        });
+
+        if (!response.ok) throw new Error("Explanation failed");
+
+        const data = await response.json();
+
+        // Use Markdown parser for a nice look
+        contentArea.innerHTML = parseMarkdown(data.explanation);
+
+    } catch (e) {
+        contentArea.innerHTML = `<p style="color:red">Error: ${e.message}</p>`;
+    }
+}
+
+function showTopicsGrid() {
+    document.getElementById('topics-grid-container').style.display = 'block';
+    document.getElementById('topic-explanation-container').style.display = 'none';
+
+    document.getElementById('selected-topic-pill-container').style.display = 'none';
+
+    document.getElementById('btn-topics-back').style.display = 'block';
+    document.getElementById('btn-explanation-back').style.display = 'none';
+}
+
+async function startQuizFlow(numQuestions = 5, difficulty = "Medium") {
+    switchView('loading');
+    document.getElementById('loading-text').innerText = `Generating ${numQuestions} ${difficulty} Questions...`;
+
+    try {
+        const settings = getSettings();
+        const response = await fetch('/api/generate-quiz', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                text: currentTextContent,
+                provider: settings.provider,
+                model: settings.model,
+                numQuestions: parseInt(numQuestions),
+                difficulty: difficulty
+            })
+        });
+
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || "Failed to generate quiz");
+        }
+
+        const data = await response.json();
+
+        currentQuiz = data.quiz.questions;
+        currentQuestionIndex = 0;
+        userScore = 0;
+        correctCount = 0;
+        wrongCount = 0;
+        secondsElapsed = 0;
+
+        if (!currentQuiz || currentQuiz.length === 0) {
+            throw new Error("AI returned no questions. Try again.");
+        }
+
+        // Setup Header Stats in Active Quiz
+        document.getElementById('active-course-name').innerText = currentSubjectName;
+        document.getElementById('active-course-batch').innerText = document.getElementById('menu-course-batch').innerText;
+
+        showQuestion();
+        switchView('quiz');
+
+        if (isTimerEnabled) {
+            startTimer();
+        } else {
+            document.getElementById('quiz-timer-display').style.display = 'none';
+        }
+
+    } catch (e) {
+        alert("Quiz Gen Error: " + e.message);
+        switchView('action-menu');
+    }
+}
+
+function startTimer() {
+    document.getElementById('quiz-timer-display').style.display = 'block';
+    if (quizTimer) clearInterval(quizTimer);
+    quizTimer = setInterval(() => {
+        secondsElapsed++;
+        const mins = Math.floor(secondsElapsed / 60).toString().padStart(2, '0');
+        const secs = (secondsElapsed % 60).toString().padStart(2, '0');
+        document.getElementById('quiz-timer-display').innerText = `Time: ${mins}:${secs}`;
+    }, 1000);
+}
+
+async function startSummaryGeneration() {
+    switchView('loading');
+    document.getElementById('loading-text').innerText = "Creating Course Summary...";
+
+    try {
+        const settings = getSettings();
+        const response = await fetch('/api/generate-summary', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                text: currentTextContent,
+                provider: settings.provider,
+                model: settings.model
+            })
+        });
+
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || "Summary gen failed");
+        }
+
+        const data = await response.json();
+
+        // Update Header placeholders
+        document.getElementById('summary-course-name').innerText = currentSubjectName;
+        document.getElementById('summary-course-batch').innerText = document.getElementById('menu-course-batch').innerText;
+
+        // Use the new Markdown Parser
+        const formattedSummary = parseMarkdown(data.summary);
+
+        document.getElementById('summary-content').innerHTML = formattedSummary;
+        switchView('summary');
+
+    } catch (e) {
+        alert("Error: " + e.message);
+        switchView('action-menu');
+    }
+}
+
+async function downloadAllMaterials() {
+    const files = currentFileList.filter(f => {
+        const t = f.title.toLowerCase();
+        return t.endsWith('.pdf') || t.endsWith('.pptx');
+    });
+
+    if (files.length === 0) {
+        alert("No downloadable materials (PDF/PPTX) found in this course.");
+        return;
+    }
+
+    // UI Feedback: Change the "Materials" card text or show a global alert
+    alert(`Bundling ${files.length} files... Please wait a moment.`);
+
+    const zip = new JSZip();
+    const token = gapi.client.getToken().access_token;
+
+    // Fetch all files in parallel for maximum speed
+    const fetchPromises = files.map(async (file) => {
+        try {
+            console.log(`Fetching: ${file.title}`);
+            const response = await fetch(`https://www.googleapis.com/drive/v3/files/${file.id}?alt=media`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            if (!response.ok) throw new Error(`Download failed for ${file.title}`);
+
+            const blob = await response.blob();
+            zip.file(file.title, blob);
+            return true;
+        } catch (e) {
+            console.error(`Error fetching ${file.title}:`, e);
+            return false;
+        }
+    });
+
+    try {
+        await Promise.all(fetchPromises);
+
+        // Generate the ZIP file
+        const content = await zip.generateAsync({ type: "blob" });
+
+        // Trigger download of the single ZIP file
+        const url = window.URL.createObjectURL(content);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        const zipName = `${currentSubjectName.replace(/\s+/g, '_')}_Materials.zip`;
+        a.download = zipName;
+        document.body.appendChild(a);
+        a.click();
+
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+
+        console.log("ZIP Download started.");
+    } catch (e) {
+        console.error("ZIP Generation failed:", e);
+        alert("Failed to bundle files. Check console for details.");
+    }
+}
+
+// -------------------------
+// Helper: Simple Markdown Parser
+// -------------------------
+function parseMarkdown(text) {
+    if (!text) return "";
+
+    let html = text;
+
+    // 1. Headers (### H3, ## H2, # H1)
+    html = html.replace(/^### (.*$)/gm, '<h4>$1</h4>');
+    html = html.replace(/^## (.*$)/gm, '<h3>$1</h3>');
+    html = html.replace(/^# (.*$)/gm, '<h3>$1</h3>');
+
+    // 2. Bold (**text**)
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+    // 3. Italic (*text*)
+    html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+    // 4. Unordered Lists (- item or * item)
+    // Wrap lists is tricky with simple regex, but we can style lines starting with -
+    html = html.replace(/^- (.*$)/gm, '<li>$1</li>');
+    html = html.replace(/^\* (.*$)/gm, '<li>$1</li>');
+
+    // 5. Wrap list items in ul if they are adjacent (advanced)
+    // For simplicity, just letting <li> exist gives decent browser rendering if display:block
+    // but better to wrap. Let's try a simple block replace for lists.
+    // Actually, simply replacing newlines with <br> breaks lists. 
+    // Let's wrap paragraphs.
+
+    // Split into blocks by double newline
+    const blocks = html.split(/\n\n+/);
+
+    const processedBlocks = blocks.map(block => {
+        if (block.trim().startsWith('<li>')) {
+            return `<ul>${block}</ul>`;
+        } else if (block.match(/^<h[34]>/)) {
+            return block;
+        } else {
+            return `<p>${block.replace(/\n/g, '<br>')}</p>`;
+        }
+    });
+
+    return processedBlocks.join('');
+}
+
+function showQuestion() {
+    const q = currentQuiz[currentQuestionIndex];
+
+    // UI Stats Updates
+    const timerDisplay = document.getElementById('quiz-timer-display');
+    const qnoDisplay = document.getElementById('quiz-qno-display');
+    const qText = document.getElementById('question-text');
+
+    if (qnoDisplay) qnoDisplay.innerText = `Q.No. ${currentQuestionIndex + 1}/${currentQuiz.length}`;
+    if (qText) qText.innerText = `${currentQuestionIndex + 1}. ${q.question}`;
+
+    // Hint setup
+    const hintContainer = document.getElementById('hint-container');
+    const hintText = document.getElementById('hint-text');
+    if (q.hint) {
+        hintContainer.style.display = 'block';
+        hintText.innerText = q.hint;
+        hintText.style.display = 'none';
+        const hintBtn = document.querySelector('.btn-hint');
+        if (hintBtn) hintBtn.innerText = '💡 Show Hint';
+    } else {
+        hintContainer.style.display = 'none';
+    }
+
+    // Options setup
+    const optionsContainer = document.getElementById('options-container');
+    optionsContainer.innerHTML = '';
+
+    // Rationale hidden
+    document.getElementById('rationale-container').style.display = 'none';
+    document.getElementById('next-question-btn').style.display = 'none';
+
+    // Compatibility check for old vs new AI structure
+    const options = q.answerOptions || q.options.map(opt => ({ text: opt, isCorrect: opt === q.correct, rationale: "" }));
+
+    options.forEach(opt => {
+        const btn = document.createElement('div');
+        btn.className = 'option-btn';
+        btn.innerText = opt.text;
+        btn.onclick = () => handleAnswer(btn, opt, options);
+        optionsContainer.appendChild(btn);
+    });
+}
+
+function toggleHint() {
+    const hintText = document.getElementById('hint-text');
+    const btn = document.querySelector('.btn-hint');
+    if (hintText.style.display === 'none') {
+        hintText.style.display = 'block';
+        btn.innerText = 'Hide Hint';
+    } else {
+        hintText.style.display = 'none';
+        btn.innerText = '💡 Show Hint';
+    }
+}
+
+function handleAnswer(btn, selectedOpt, allOptions) {
+    // Disable all buttons
+    const allBtns = document.querySelectorAll('.option-btn');
+    allBtns.forEach(b => b.style.pointerEvents = 'none');
+
+    const isCorrect = selectedOpt.isCorrect;
+    const statusLabel = document.getElementById('answer-status-label');
+
+    if (isCorrect) {
+        btn.classList.add('correct');
+        userScore++;
+        correctCount++;
+        if (statusLabel) {
+            statusLabel.innerText = 'Correct!';
+            statusLabel.style.color = 'var(--success)';
+        }
+    } else {
+        btn.classList.add('wrong');
+        wrongCount++;
+        if (statusLabel) {
+            statusLabel.innerText = 'Incorrect';
+            statusLabel.style.color = 'var(--error)';
+        }
+        // Find correct button and highlight it
+        allBtns.forEach(b => {
+            const opt = allOptions.find(o => o.text === b.innerText);
+            if (opt && opt.isCorrect) b.classList.add('correct');
+        });
+    }
+
+    // Show rationale
+    const rationaleContainer = document.getElementById('rationale-container');
+    const rationaleText = document.getElementById('rationale-text');
+    if (selectedOpt.rationale) {
+        rationaleContainer.style.display = 'block';
+        rationaleText.innerText = selectedOpt.rationale;
+    }
+
+    // Show next button
+    document.getElementById('next-question-btn').style.display = 'block';
+}
+
+function nextQuestion() {
+    currentQuestionIndex++;
+    if (currentQuestionIndex < currentQuiz.length) {
+        showQuestion();
+    } else {
+        showResults();
+    }
+}
+
+function showResults() {
+    if (quizTimer) clearInterval(quizTimer);
+
+    const percentage = Math.round((userScore / currentQuiz.length) * 100);
+    const circle = document.getElementById('final-score-display');
+    circle.style.setProperty('--score', percentage);
+    circle.innerHTML = `<div>${percentage}%</div>`;
+
+    // Update Counts
+    document.getElementById('correct-count').innerText = correctCount;
+    document.getElementById('wrong-count').innerText = wrongCount;
+
+    let feedback = "Good effort!";
+    if (percentage === 100) feedback = "Perfect Score! You are a master.";
+    else if (percentage >= 80) feedback = "Excellent work!";
+    else if (percentage < 60) feedback = "You might want to review the topics again.";
+
+    document.getElementById('feedback-text').innerText = feedback;
+    switchView('results');
+}
+
+// 6. UI Utilities
+
+let isAssistantView = false;
+
+function toggleAssistantView() {
+    const coursesView = document.getElementById('courses-view');
+    const assistantView = document.getElementById('assistant-view');
+    const assistantBtn = document.querySelector('.btn-assistant');
+    const navCenter = document.querySelector('.nav-center');
+
+    if (!isAssistantView) {
+        // Entering Assistant View
+        coursesView.style.display = 'none';
+        assistantView.style.display = 'flex';
+        if (navCenter) navCenter.style.visibility = 'hidden';
+
+        assistantBtn.innerText = 'Back to Courses';
+        assistantBtn.style.background = 'white';
+        assistantBtn.style.color = '#0f172a';
+
+        isAssistantView = true;
+        populateAssistantTopics();
+    } else {
+        // Returning to Courses
+        coursesView.style.display = 'block';
+        assistantView.style.display = 'none';
+        if (navCenter) navCenter.style.visibility = 'visible';
+
+        assistantBtn.innerText = 'Assistant';
+        assistantBtn.style.background = '#1e293b';
+        assistantBtn.style.color = 'white';
+
+        isAssistantView = false;
+    }
+}
+
+function populateAssistantTopics() {
+    const container = document.getElementById('assistant-topics');
+    if (!allLoadedCourses || allLoadedCourses.length === 0) return;
+
+    container.innerHTML = '';
+    // Show up to 6 courses as quick starting points
+    allLoadedCourses.slice(0, 6).forEach(course => {
+        const pill = document.createElement('div');
+        pill.className = 'discussion-pill';
+        pill.innerText = course.name;
+        pill.onclick = () => sendAssistantQuery(`Explain key concepts for ${course.name}`);
+        container.appendChild(pill);
+    });
+}
+
+async function sendAssistantQuery(manualQuery = null) {
+    const input = document.getElementById('chat-input');
+    const query = manualQuery || input.value.trim();
+    const responseContainer = document.getElementById('assistant-response-container');
+    const responseTextEl = document.getElementById('assistant-response-text');
+    const promptTitle = document.querySelector('.assistant-prompt');
+
+    if (!query) return;
+
+    // UI Feedback
+    promptTitle.innerText = "Researching: " + query;
+    responseContainer.style.display = 'block';
+    responseTextEl.innerHTML = '<div style="display:flex; flex-direction:column; align-items:center; gap:1rem; padding: 2rem;">' +
+        '<div class="spinner"></div>' +
+        '<p style="color: var(--text-secondary);">Analyzing and generating response...</p></div>';
+
+    if (!manualQuery) input.value = '';
+
+    // Scroll to section
+    responseContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+    const settings = getSettings();
+
+    try {
+        const response = await fetch('/api/explain-topic', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                text: "The user is asking an academic question about: " + query + ". Provide a detailed, pedagogical, and clear explanation.",
+                topic: query,
+                provider: settings.provider,
+                model: settings.model
+            })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            // Very basic Markdown-like formatting for AI response
+            let html = data.explanation
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+            responseTextEl.innerHTML = `<p>${html}</p>`;
+
+            // Scroll to the full response
+            setTimeout(() => {
+                responseContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }, 100);
+        } else {
+            responseTextEl.innerHTML = `<div style="color: var(--error);">AI Error: ${data.error}</div>`;
+        }
+    } catch (err) {
+        responseTextEl.innerHTML = `<div style="color: var(--error);">Connection failed: AI service is currently unavailable.</div>`;
+    }
+}
+
+// Add event listener for Enter in chat-input
+document.addEventListener('DOMContentLoaded', () => {
+    const chatInput = document.getElementById('chat-input');
+    if (chatInput) {
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendAssistantQuery();
+            }
+        });
+
+        // Auto-resize
+        chatInput.addEventListener('input', function () {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+    }
+
+    // Make Pills clickable
+    document.querySelectorAll('.discussion-pill').forEach(pill => {
+        pill.addEventListener('click', () => {
+            sendAssistantQuery(pill.innerText);
+        });
+    });
+});
+
+function switchView(viewName) {
+    // Hide all
+    document.querySelectorAll('.quiz-view').forEach(el => el.style.display = 'none');
+    // Show target
+    document.getElementById(`view-${viewName}`).style.display = 'block';
+}
+
+function closeQuiz() {
+    document.getElementById('quiz-modal').classList.remove('active');
+}
+

services/frontend-service/templates/index.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AceNow | Exam Revision</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <!-- Google Identity Services -->
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <script src="https://apis.google.com/js/api.js" async defer></script>
+    <!-- JSZip for bundled downloads -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="/static/js/image_bundle.js"></script>
+</head>
+
+<body>
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+
+    <!-- Login View (Landing Page) -->
+    <div id="login-view" class="login-container">
+        <div class="login-content">
+            <h1 class="brand-title">AceNow</h1>
+            <p class="brand-subtitle">
+                A focused platform for last-minute exam preparation, offering AI-powered summaries, key topics, and
+                quick quizzes for efficient revision.
+            </p>
+
+            <div class="login-action">
+                <button class="btn-login-hero" onclick="handleAuthClick()">
+                    <img data-src="google_Logo.svg" alt="Google Logo" class="btn-icon-img">
+                    Continue with Google
+                </button>
+            </div>
+        </div>
+
+        <!-- About the Platform Section -->
+        <div class="about-section">
+            <h2 class="about-title">About the Platform</h2>
+            <p class="about-description">
+                This platform is designed specifically for last-minute exam preparation, helping students revise
+                smarter when time is
+                limited. It provides concise summaries, key topics, and focused quizzes powered by AI to maximize
+                clarity and retention
+                just before an exam.
+            </p>
+            <p class="about-description">
+                Built with a strong emphasis on speed, precision, and exam relevance, the platform enables learners
+                to quickly identify
+                important concepts, reinforce understanding, and assess readiness efficiently.
+            </p>
+
+            <!-- Feature Cards -->
+            <div class="feature-cards">
+                <div class="feature-card">
+                    <div class="feature-header">
+                        <img data-src="Google-Antigravity-LogoPNG.png" alt="Google Antigravity" class="feature-logo">
+                        <h3>Google Antigravity</h3>
+                    </div>
+                    <p class="feature-description">
+                        This platform has been created with the support and technical assistance of Antigravity,
+                        combining innovation,
+                        AI-driven learning, and student-centric design to make last-minute preparation more
+                        effective and stress-free.
+                    </p>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-header">
+                        <img data-src="FigmaLogo.png" alt="Figma" class="feature-logo">
+                        <h3>Figma</h3>
+                    </div>
+                    <p class="feature-description">
+                        The user interface of this platform was thoughtfully designed in Figma, with a strong focus
+                        on clarity, accessibility,
+                        and ease of use for last-minute exam preparation.
+                    </p>
+                    <a href="https://www.figma.com/design/Mw2wCyHNVXlTVAGpy00l6A/AceNow?node-id=0-1&t=Zg1DX6N5UyOvczVB-1"
+                        target="_blank" class="feature-link">View Design File →</a>
+                </div>
+            </div>
+        </div>
+
+        <footer class="login-footer">
+            <div class="social-links">
+                <a href="mailto:josedavidson.work@gmail.com" class="social-icon" title="Email">
+                    <img data-src="mail-svgrepo-com.svg" alt="Email">
+                </a>
+                <a href="https://github.com/JosDavidson" target="_blank" class="social-icon" title="GitHub">
+                    <img data-src="github-142-svgrepo-com.svg" alt="GitHub">
+                </a>
+                <a href="https://www.linkedin.com/in/jose-davidson/" target="_blank" class="social-icon"
+                    title="LinkedIn">
+                    <img data-src="linkedin-round-svgrepo-com.svg" alt="LinkedIn">
+                </a>
+            </div>
+            <p>© 2026 Jose Davidson. All rights reserved.</p>
+        </footer>
+    </div>
+
+
+    <!-- Dashboard View (Hidden by default) -->
+    <div id="dashboard-view" style="display: none;">
+        <nav>
+            <div class="logo">
+                <span class="logo-highlight">AceNow</span>
+            </div>
+            <div class="nav-center">
+                <button class="btn-glass" onclick="openSettings()">Select AI-Model</button>
+            </div>
+            <div class="nav-actions" id="auth-container">
+                <button class="btn-assistant" onclick="toggleAssistantView()">Assistant</button>
+                <button class="btn-logout" onclick="handleSignoutClick()">Logout</button>
+            </div>
+        </nav>
+
+        <div class="container" id="courses-view">
+            <!-- Settings Modal -->
+            <dialog id="settings-modal" class="settings-modal">
+                <div class="settings-container">
+                    <div id="model-options-list" class="model-options-list">
+                        <!-- Populated by JS -->
+                    </div>
+
+                    <div class="settings-actions">
+                        <button class="btn-save-settings" onclick="saveSettings()">Save</button>
+                    </div>
+                </div>
+            </dialog>
+
+            <!-- Loading State -->
+            <div class="loading" id="initial-loading" style="display: none;">
+                <p>Loading your courses...</p>
+            </div>
+
+            <!-- Courses Grid -->
+            <div class="grid" id="courses-grid">
+                <!-- Cards will be injected here -->
+            </div>
+        </div>
+
+        <!-- Assistant View -->
+        <div class="container assistant-container" id="assistant-view" style="display: none;">
+            <div class="discussion-pills" id="assistant-topics">
+                <!-- Example topics mentioned in prompt images -->
+                <div class="discussion-pill">Deep Learning Basics</div>
+                <div class="discussion-pill">Flask Best Practices</div>
+                <div class="discussion-pill">Kubernetes Orchestration</div>
+                <div class="discussion-pill">Database Indexing</div>
+            </div>
+
+            <h2 class="assistant-prompt">Select a topic to continue or start a new discussion</h2>
+
+            <div class="chat-input-wrapper">
+                <div class="chat-input-container">
+                    <textarea id="chat-input" placeholder="Ask Anything" rows="1"></textarea>
+                    <button class="btn-send-chat" onclick="sendAssistantQuery()">➔</button>
+                </div>
+            </div>
+
+            <!-- Chat Response Area -->
+            <div id="assistant-response-container" class="assistant-response-area" style="display: none;">
+                <div class="response-card">
+                    <div id="assistant-response-text"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quiz/Study Overlay -->
+        <div class="quiz-overlay" id="quiz-modal">
+            <div class="quiz-container">
+                <button class="close-btn" onclick="closeQuiz()">×</button>
+
+                <!-- View 1: Loading/Processing -->
+                <div id="view-loading" class="quiz-view">
+                    <h2>Analyzing Materials...</h2>
+                    <div class="spinner"></div>
+                    <p id="loading-text">Fetching course documents</p>
+                </div>
+
+                <!-- View 1.5: Action Menu -->
+                <div id="view-action-menu" class="quiz-view" style="display:none;">
+                    <div class="menu-header">
+                        <div class="menu-titles">
+                            <h2 id="menu-course-name">Course Name</h2>
+                            <p id="menu-course-batch" class="menu-subtitle">Batch</p>
+                        </div>
+                    </div>
+
+                    <div class="action-grid">
+                        <div class="action-card" onclick="startTopicsGeneration()">
+                            <div class="action-img-container">
+                                <img data-src="SelectionPanelKeyPoints.png" alt="Key Topics">
+                            </div>
+                            <h3>Key Topics</h3>
+                            <p>High-priority concepts frequently asked in exams are curated here.</p>
+                            <span class="action-link">View core concepts</span>
+                        </div>
+                        <div class="action-card" onclick="showQuizConfig()">
+                            <div class="action-img-container">
+                                <img data-src="SelectionPanelQuiz.png" alt="Quiz">
+                            </div>
+                            <h3>QUIZ</h3>
+                            <p>Quick assessments designed to reinforce important concepts.</p>
+                            <span class="action-link">Attempt Quick Quiz</span>
+                        </div>
+                        <div class="action-card" onclick="startSummaryGeneration()">
+                            <div class="action-img-container">
+                                <img data-src="SelectionPanelSummary.png" alt="Summary">
+                            </div>
+                            <h3>Summary</h3>
+                            <p>A quick overview of core ideas to strengthen last-minute understanding.</p>
+                            <span class="action-link">Get Instant Summary</span>
+                        </div>
+                        <div class="action-card" onclick="downloadAllMaterials()">
+                            <div class="action-img-container"
+                                style="display: flex; align-items: center; justify-content: center; background: rgba(14, 165, 233, 0.1); border-radius: 20px;">
+                                <div style="font-size: 4rem; padding: 1rem;">📄</div>
+                            </div>
+                            <h3>Materials</h3>
+                            <p>Download all original study materials (PDF/PPTX) directly from Classroom.</p>
+                            <span class="action-link">Download all materials</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- View 1.6: Quiz Configuration (New Design) -->
+                <div id="view-quiz-config" class="quiz-view" style="display:none;">
+                    <div class="quiz-header-banner">
+                        <img src="https://raw.githubusercontent.com/JosDavidson/AceNow/main/services/frontend-service/static/images/QuizBanner.png"
+                            alt="Banner" class="banner-img">
+                        <div class="banner-overlay">
+                            <div class="banner-content">
+                                <div class="banner-text">
+                                    <h2 id="config-course-name">Course Name</h2>
+                                    <p id="config-course-batch" class="banner-subtitle">Batch</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="config-container">
+                        <h3 class="config-main-title">Configure Quiz</h3>
+
+                        <div class="config-row">
+                            <label>Number of Questions</label>
+                            <div class="pill-group" id="pill-num-questions">
+                                <div class="pill-option selected" data-value="10">10 Questions</div>
+                                <div class="pill-option" data-value="15">15 Questions</div>
+                                <div class="pill-option" data-value="25">25 Questions</div>
+                            </div>
+                        </div>
+
+                        <div class="config-row">
+                            <label>Difficulty</label>
+                            <div class="pill-group" id="pill-difficulty">
+                                <div class="pill-option selected" data-value="Easy">Easy</div>
+                                <div class="pill-option" data-value="Medium">Medium</div>
+                                <div class="pill-option" data-value="Hard">Hard</div>
+                            </div>
+                        </div>
+
+                        <div class="config-row">
+                            <label>Timer</label>
+                            <div class="pill-group" id="pill-timer">
+                                <div class="pill-option" data-value="enable">Enable</div>
+                                <div class="pill-option selected" data-value="disable">Disable</div>
+                                <div class="pill-option" data-value="custom">Custom</div>
+                            </div>
+                        </div>
+
+                        <div class="config-actions">
+                            <button class="btn-primary" onclick="startQuizFromConfig()">Start Quiz</button>
+                            <button class="btn-secondary" onclick="switchView('action-menu')">Back</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- View 2: Topic Overview / Key Points -->
+                <div id="view-topics" class="quiz-view" style="display:none;">
+                    <div class="topics-header-banner">
+                        <img data-src="KeyPointsBanner.png" alt="Banner" class="banner-img">
+                        <div class="banner-overlay">
+                            <div class="banner-content">
+                                <div class="banner-text">
+                                    <h2 id="topics-course-name">Course Name</h2>
+                                    <p id="topics-course-batch" class="banner-subtitle">Batch</p>
+                                    <h3 class="banner-label">Key Topics</h3>
+                                </div>
+                                <div id="selected-topic-pill-container" style="display: none;">
+                                    <div class="topic-pill-large" id="selected-topic-name">Topic Name</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="topics-grid-container" class="topics-container-padding">
+                        <div class="topics-pills-grid" id="topics-pills-grid">
+                            <!-- Pills will be injected here -->
+                        </div>
+                    </div>
+
+                    <div id="topic-explanation-container" class="topics-container-padding" style="display: none;">
+                        <div class="explanation-content" id="topic-explanation-text">
+                            <!-- AI Explanation will be injected here -->
+                        </div>
+                    </div>
+
+                    <div class="topics-footer">
+                        <button class="btn-secondary" id="btn-topics-back" onclick="switchView('action-menu')">Back to
+                            Menu</button>
+                        <button class="btn-secondary" id="btn-explanation-back" style="display: none;"
+                            onclick="showTopicsGrid()">Back to Topics</button>
+                    </div>
+                </div>
+
+                <!-- View 2.5: Summary View -->
+                <div id="view-summary" class="quiz-view" style="display:none;">
+                    <div class="summary-header-banner">
+                        <img data-src="SummaryBanner.png" alt="Banner" class="banner-img">
+                        <!-- <button class="close-btn" onclick="switchView('action-menu')">×</button> -->
+                        <div class="banner-overlay">
+                            <div class="banner-content">
+                                <div class="banner-text">
+                                    <h2 id="summary-course-name">Course Name</h2>
+                                    <p id="summary-course-batch" class="banner-subtitle">Batch</p>
+                                    <h3 class="banner-label">Summary</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="summary-container-padding">
+                        <div id="summary-content" class="explanation-content">
+                            <!-- AI Content will be injected here -->
+                        </div>
+                    </div>
+
+                    <div class="topics-footer">
+                        <button class="btn-secondary" onclick="switchView('action-menu')">Back to Menu</button>
+                    </div>
+                </div>
+
+                <!-- View 3: Quiz Active (New Design) -->
+                <div id="view-quiz" class="quiz-view" style="display:none;">
+                    <div class="quiz-header-banner">
+                        <img src="https://raw.githubusercontent.com/JosDavidson/AceNow/main/services/frontend-service/static/images/QuizBanner.png"
+                            alt="Banner" class="banner-img">
+                        <div class="banner-overlay">
+                            <div class="banner-content">
+                                <div class="banner-text">
+                                    <h2 id="active-course-name">Course Name</h2>
+                                    <p id="active-course-batch" class="banner-subtitle">Batch</p>
+                                    <h3 class="banner-label">Quiz</h3>
+                                </div>
+                                <div class="quiz-stats-overlay">
+                                    <div id="quiz-timer-display">Time: 00:00</div>
+                                    <div id="quiz-qno-display">Q.No. 1/10</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="quiz-active-container">
+                        <h3 id="question-text" class="question-text">1. Question goes here...</h3>
+
+                        <div class="options-grid" id="options-container">
+                            <!-- Options injected here as 2x2 pills -->
+                        </div>
+
+                        <div id="rationale-container" class="rationale-container" style="display: none;">
+                            <h4 id="answer-status-label">Correct!</h4>
+                            <p id="rationale-text"></p>
+                        </div>
+
+                        <div id="hint-container" class="hint-container" style="display: none;">
+                            <button class="btn-hint" onclick="toggleHint()">💡 Show Hint</button>
+                            <p id="hint-text" class="hint-text" style="display: none;"></p>
+                        </div>
+
+                        <button id="next-question-btn" class="btn-primary"
+                            style="display: none; width: 100%; margin-top: 1.5rem;" onclick="nextQuestion()">Next
+                            Question</button>
+                    </div>
+                </div>
+
+                <!-- View 4: Results (Modified) -->
+                <div id="view-results" class="quiz-view" style="display:none;">
+                    <h2>Quiz Complete!</h2>
+                    <div class="score-circle" id="final-score-display">80%</div>
+                    <div class="result-breakdown">
+                        <span class="result-item correct">✅ Correct: <span id="correct-count">0</span></span>
+                        <span class="result-item wrong">❌ Wrong: <span id="wrong-count">0</span></span>
+                    </div>
+                    <p id="feedback-text">Great job! You mastered this topic.</p>
+                    <button class="btn-primary" onclick="closeQuiz()">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Application Logic -->
+    <script src="/static/js/app.js"></script>
+</body>
+
+</html>

start.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Start services in background
+python services/auth-service/app.py &
+python services/file-parser-service/app.py &
+python services/ai-service/app.py &
+python services/frontend-service/app.py &
+
+# Start API Gateway (main entry point) in foreground
+# Use port 7860 for Hugging Face compatibility
+export PORT=7860
+python services/api-gateway/app.py