Update app.py

app.py

@@ -1,32 +1,985 @@
-# Use an official Python runtime as a parent image
-FROM python:3.12-slim
+import gradio as gr
+import os
+import sys
+import json
+import re
 
-# Set the working directory in the container
-WORKDIR /app
+# Ensure the current directory is in the path
+current_dir = os.path.dirname(os.path.abspath(__file__))
+sys.path.append(current_dir)
 
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    && rm -rf /var/lib/apt/lists/*
+from smart_tutor_core import crew
 
-# Create a non-root user for security and HF compatibility
-RUN useradd -m -u 1000 user
-USER user
-ENV PATH="/home/user/.local/bin:${PATH}"
+# ----------------------------------------------------------------------
+# Helper: Parse Output
+# ----------------------------------------------------------------------
 
-# Copy requirements first for better caching
-COPY --chown=user requirements.txt .
-RUN pip install --no-cache-dir --user -r requirements.txt
 
-# Copy the rest of the application
-COPY --chown=user . .
+def parse_agent_output(raw_output: str):
+    """
+    Tries to parse JSON from the raw string output.
+    Returns (data_dict, is_json).
+    """
+    data = None
+    try:
+        data = json.loads(raw_output)
+        return data, True
+    except json.JSONDecodeError:
+        # Try finding JSON block
+        match = re.search(r"(\{.*\})", raw_output, re.DOTALL)
+        if match:
+            try:
+                data = json.loads(match.group(1))
+                return data, True
+            except:
+                pass
+    return raw_output, False
 
-# Gradio Environment Variables
-ENV GRADIO_SERVER_NAME="0.0.0.0" \
-    GRADIO_SERVER_PORT=7860 \
-    PYTHONUNBUFFERED=1
 
-EXPOSE 7860
+def clean_text(text: str) -> str:
+    """
+    Aggressively removes markdown formatting to ensure clean text display.
+    Removes: **bold**, __bold__, *italic*, _italic_, `code`
+    """
+    if not text:
+        return ""
+    text = str(text)
+    # Remove bold/italic markers
+    text = re.sub(r"\*\*|__|`", "", text)
+    text = re.sub(r"^\s*\*\s+", "", text)  # Remove leading list asterisks if any
+    return text.strip()
 
-# Run the application
-CMD ["python", "app.py"]
+
+# ----------------------------------------------------------------------
+# Helper: Format Text Output for Display
+# ----------------------------------------------------------------------
+
+
+def format_text_output(raw_text):
+    """
+    Converts raw agent text (markdown-ish) into
+    beautifully styled HTML inside a summary-box.
+    """
+    if not raw_text:
+        return ""
+    text = str(raw_text).strip()
+
+    # Convert markdown headings to HTML
+    text = re.sub(r"^### (.+)$", r"<h3>\1</h3>", text, flags=re.MULTILINE)
+    text = re.sub(r"^## (.+)$", r"<h2>\1</h2>", text, flags=re.MULTILINE)
+    text = re.sub(r"^# (.+)$", r"<h2>\1</h2>", text, flags=re.MULTILINE)
+
+    # Convert **bold** to <strong>
+    text = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", text)
+
+    # Convert bullet lists (- item or * item)
+    lines = text.split("\n")
+    result = []
+    in_list = False
+
+    for line in lines:
+        stripped = line.strip()
+        is_bullet = (
+            stripped.startswith("- ")
+            or stripped.startswith("* ")
+            or re.match(r"^\d+\.\s", stripped)
+        )
+
+        if is_bullet:
+            if not in_list:
+                tag = "ul"  # Always use bullets as requested
+                result.append(f"<{tag}>")
+                in_list = tag
+            # Remove both -/* and 1. from the start of the line
+            content = re.sub(r"^[-*]\s+|^\d+\.\s+", "", stripped)
+            result.append(f"<li>{content}</li>")
+        else:
+            if in_list:
+                result.append(f"</{in_list}>")
+                in_list = False
+            if stripped.startswith("<h"):
+                result.append(stripped)
+            elif stripped:
+                result.append(f"<p>{stripped}</p>")
+
+    if in_list:
+        result.append(f"</{in_list}>")
+
+    html = "\n".join(result)
+    return f"<div class='summary-box'>{html}</div>"
+
+
+# ----------------------------------------------------------------------
+# Logic: Run Agent
+# ----------------------------------------------------------------------
+
+
+def run_agent(file, user_text):
+    if not user_text and not file:
+        return (
+            gr.update(
+                visible=True,
+                value="<div class='error-box'>⚠️ Please enter a request or upload a file.</div>",
+            ),
+            gr.update(visible=False),  # Quiz Group
+            None,  # State
+        )
+
+    full_request = user_text
+
+    # Check if user wants a quiz but didn't upload a file (common error)
+    if "quiz" in user_text.lower() and not file:
+        return (
+            gr.update(
+                visible=True,
+                value="<div class='error-box'>⚠️ To generate a quiz, please upload a document first.</div>",
+            ),
+            gr.update(visible=False),
+            None,
+        )
+
+    if file:
+        # file is a filepath string because type='filepath'
+        full_request = f"""USER REQUEST: {user_text}
+
+IMPORTANT: The file to process is located at this EXACT path:
+{file}
+
+You MUST use this exact path when calling tools (process_file, store_quiz, etc.)."""
+
+    # SYSTEM PROMPT INJECTION to force JSON format from the agent
+    system_instruction = "\n\n(SYSTEM NOTE: If generating a quiz, you MUST call the store_quiz tool and return its VALID JSON output including 'quiz_id'. Do NOT return just the questions text.)"
+
+    try:
+        inputs = {"user_request": full_request + system_instruction}
+        result = crew.kickoff(inputs=inputs)
+        raw_output = str(result)
+
+        print(f"\n{'='*60}")
+        print(f"[DEBUG] raw_output (first 500 chars):")
+        print(raw_output[:500])
+        print(f"{'='*60}")
+
+        data, is_json = parse_agent_output(raw_output)
+
+        print(f"[DEBUG] is_json={is_json}")
+        if is_json:
+            print(
+                f"[DEBUG] keys={list(data.keys()) if isinstance(data, dict) else 'not a dict'}"
+            )
+            if isinstance(data, dict) and "questions" in data:
+                print(f"[DEBUG] num questions={len(data['questions'])}")
+
+        # Case 1: Quiz Output (Success)
+        if is_json and "questions" in data:
+            # We accept it even if quiz_id is missing, but grading might fail.
+            return (
+                gr.update(visible=False),  # Hide Summary
+                gr.update(visible=True),  # Show Quiz
+                data,  # Store Data
+            )
+
+        # Case 2: Grade Result (Standard JSON from grade_quiz) - Handled nicely
+        if is_json and "score" in data:
+            markdown = format_grade_result(data)
+            return (
+                gr.update(visible=True, value=markdown),
+                gr.update(visible=False),
+                None,
+            )
+
+        # Case 3: Normal Text / Summary / Explanation
+        html_content = format_text_output(raw_output)
+        return (
+            gr.update(visible=True, value=html_content),
+            gr.update(visible=False),
+            None,
+        )
+
+    except Exception as e:
+        error_msg = f"<div class='error-box'>❌ Error: {str(e)}</div>"
+        return (
+            gr.update(visible=True, value=error_msg),
+            gr.update(visible=False),
+            None,
+        )
+
+
+# ----------------------------------------------------------------------
+# Logic: Quiz Render & Grading
+# ----------------------------------------------------------------------
+
+
+def render_quiz(quiz_data):
+    """
+    Renders the quiz questions dynamically.
+    Returns updates for: [Radios x10] + [Feedbacks x10] + [CheckBtn] (Total 21)
+    """
+    updates = []
+
+    if not quiz_data:
+        # Hide everything
+        return [gr.update(visible=False)] * 21
+
+    questions = quiz_data.get("questions", [])
+
+    # 1. Update Radios (10 slots)
+    for i in range(10):
+        if i < len(questions):
+            q = questions[i]
+            q_txt = clean_text(q.get("question", "Question text missing"))
+            question_text = f"{i+1}. {q_txt}"
+
+            # Ensure options are a dict and sorted
+            raw_options = q.get("options", {})
+            if not isinstance(raw_options, dict):
+                # Fallback if options came as a list or string
+                raw_options = {"A": "Error loading options"}
+
+            # Sort by key A, B, C, D...
+            # We strictly enforce the "Key. Value" format
+            choices = []
+            for key in sorted(raw_options.keys()):
+                val = clean_text(raw_options[key])
+                choices.append(f"{key}. {val}")
+
+            updates.append(
+                gr.update(
+                    visible=True,
+                    label=question_text,
+                    choices=choices,
+                    value=None,
+                    interactive=True,
+                )
+            )
+        else:
+            updates.append(gr.update(visible=False, choices=[], value=None))
+
+    # 2. Update Feedbacks (10 slots) - Hide them initially
+    for i in range(10):
+        updates.append(gr.update(visible=False, value=""))
+
+    # 3. Show Grid/Check Button
+    updates.append(gr.update(visible=True))
+
+    return updates
+
+
+def grade_quiz_ui(quiz_data, *args):
+    """
+    Collects answers, calls agent (or tool), and returns graded results designed for UI.
+    Input args: [Radio1_Val, Radio2_Val, ..., Radio10_Val] (Length 10)
+    Output: [Radios x10] + [Feedbacks x10] + [ResultMsg] (Total 21)
+    """
+    # args tuple contains the values of the 10 radios
+    answers_list = args[0:10]
+
+    updates = []
+
+    # Validation
+    if not quiz_data or "quiz_id" not in quiz_data:
+        # Fallback if ID is missing
+        error_updates = [gr.update(visible=True)] * 10 + [gr.update(visible=False)] * 10
+        error_updates.append(
+            gr.update(
+                visible=True,
+                value="<div class='error-box'>⚠️ Error: Quiz ID not found. Cannot grade this quiz.</div>",
+            )
+        )
+        return error_updates
+
+    quiz_id = quiz_data["quiz_id"]
+
+    # Construct answer map {"1": "A", ...}
+    user_answers = {}
+    for i, ans in enumerate(answers_list):
+        if ans:
+            # ans is like "A. Option Text" -> extract "A"
+            selected_opt = ans.split(".")[0]
+            # Use qid from data if available, else i+1
+            qid = str(i + 1)
+            # Try to match qid from quiz_data if possible
+            if i < len(quiz_data.get("questions", [])):
+                q = quiz_data["questions"][i]
+                qid = str(q.get("qid", i + 1))
+
+            user_answers[qid] = selected_opt
+
+    # Construct the JSON for the agent
+    answers_json = json.dumps(user_answers)
+    grading_request = f"Grade quiz {quiz_id} with answers {answers_json}\n(SYSTEM: Return valid JSON matching GradeQuizResult schema.)"
+
+    try:
+        inputs = {"user_request": grading_request}
+        result = crew.kickoff(inputs=inputs)
+        raw_output = str(result)
+        data, is_json = parse_agent_output(raw_output)
+
+        if is_json and "score" in data:
+            return format_grade_result_interactive(data, answers_list)
+        else:
+            # Fallback error in result box
+            error_updates = [gr.update(visible=True)] * 10 + [
+                gr.update(visible=False)
+            ] * 10
+            error_updates.append(
+                gr.update(
+                    visible=True,
+                    value=f"<div class='error-box'>Error parsing grading result: {raw_output}</div>",
+                )
+            )
+            return error_updates
+
+    except Exception as e:
+        error_updates = [gr.update(visible=True)] * 10 + [gr.update(visible=False)] * 10
+        error_updates.append(
+            gr.update(
+                visible=True, value=f"<div class='error-box'>Error: {str(e)}</div>"
+            )
+        )
+        return error_updates
+
+
+def format_grade_result_interactive(data, user_answers_list):
+    """
+    Updates the UI with colors and correctness.
+    Returns 21 updates.
+    """
+    details = data.get("details", [])
+    # Map details by QID or index for safety
+    details_map = {}
+    for det in details:
+        details_map[str(det.get("qid"))] = det
+
+    radio_updates = []
+    feedback_updates = []
+
+    # Iterate 10 slots
+    for i in range(10):
+        # Find corresponding detail
+        # We assume strict ordering i=0 -> Q1
+        # But let's try to be smart with QID if possible
+        qid = (
+            str(data.get("details", [])[i].get("qid"))
+            if i < len(data.get("details", []))
+            else str(i + 1)
+        )
+        det = details_map.get(qid)
+
+        if det:
+            # Clean feedback text
+            correct_raw = det.get("correct_answer", "?")
+            correct = clean_text(correct_raw)
+
+            explanation_raw = det.get("explanation", "")
+            explanation = clean_text(explanation_raw)
+
+            is_correct = det.get("is_correct", False)
+
+            # 1. Lock Radio
+            radio_updates.append(gr.update(interactive=False))
+
+            # 2. Show Feedback Box
+            css_class = (
+                "feedback-box-correct" if is_correct else "feedback-box-incorrect"
+            )
+
+            # Title
+            title_text = "Correct Answer!" if is_correct else "Incorrect Answer."
+            title_icon = "✅" if is_correct else "❌"
+
+            html_content = f"""
+            <div class='{css_class}'>
+                <div class='feedback-header'>
+                    <span class='feedback-icon'>{title_icon}</span>
+                    <span class='feedback-title'>{title_text}</span>
+                </div>
+                <div class='feedback-body'>
+                    <div class='feedback-correct-answer'><strong>Correct Answer:</strong> {correct}</div>
+                    {'<div class="feedback-explanation"><strong>Explanation:</strong> ' + explanation + '</div>' if explanation else ''}
+                </div>
+            </div>
+            """
+
+            feedback_updates.append(gr.update(visible=True, value=html_content))
+        else:
+            # No detail (maybe question didn't exist)
+            radio_updates.append(gr.update(visible=False))
+            feedback_updates.append(gr.update(visible=False))
+
+    # 3. Final Score Msg
+    percentage = data.get("percentage", 0)
+    emoji = "🏆" if percentage >= 80 else "📊"
+
+    # Create a nice result card
+    score_html = f"""
+    <div class='result-card'>
+        <div class='result-header'>{emoji} Quiz Completed!</div>
+        <div class='result-score'>Your Score: {data.get('score')} / {data.get('total')}</div>
+        <div class='result-percentage'>({percentage}%)</div>
+    </div>
+    """
+
+    return (
+        radio_updates + feedback_updates + [gr.update(visible=True, value=score_html)]
+    )
+
+
+def format_grade_result(data):
+    """Standard markdown formatter for standalone grade result"""
+    score = data.get("percentage", 0)
+    emoji = "🎉" if score > 70 else "📚"
+    md = f"# {emoji} Score: {data.get('score')}/{data.get('total')}\n\n"
+    for cx in data.get("details", []):
+        md += f"- **Q{cx['qid']}**: {cx['is_correct'] and '✅' or '❌'} (Correct: {cx.get('correct_answer')})\n"
+    return md
+
+
+# ----------------------------------------------------------------------
+# CSS Styling
+# ----------------------------------------------------------------------
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+body {
+    font-family: 'Poppins', sans-serif !important;
+    background: #f8fafc; /* Lighter background */
+    color: #334155;
+    font-weight: 400; /* Regular weight by default */
+}
+
+.gradio-container {
+    max-width: 900px !important;
+    margin: 40px auto !important;
+    background: #ffffff;
+    border-radius: 24px;
+    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
+    padding: 0 !important;
+    overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.8);
+}
+
+/* ================= HEADER ================= */
+.header-box {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    color: white;
+    padding: 60px 40px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 30px;
+}
+
+.header-box::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
+    animation: rotate 20s linear infinite;
+}
+
+.header-box h1 {
+    color: white !important;
+    margin: 0;
+    font-size: 3em !important;
+    font-weight: 700;
+    letter-spacing: -1px;
+    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    position: relative;
+    z-index: 1;
+}
+
+.header-box p {
+    color: #e0e7ff !important;
+    font-size: 1.25em !important;
+    margin-top: 15px;
+    font-weight: 300;
+    position: relative;
+    z-index: 1;
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* ================= INPUT PANEL ================= */
+.gradio-row {
+    gap: 30px !important;
+    padding: 0 40px 40px 40px;
+}
+
+/* Logic to remove padding from internal rows if needed, simplified here */
+
+/* Buttons */
+button.primary {
+    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important;
+    transition: all 0.3s ease !important;
+}
+
+button.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5) !important;
+}
+
+button.secondary {
+    background: #f3f4f6 !important;
+    color: #4b5563 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px !important;
+}
+
+button.secondary:hover {
+    background: #e5e7eb !important;
+}
+
+/* ================= QUIZ CARDS ================= */
+.quiz-question {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 25px;
+    margin-bottom: 30px !important;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.quiz-question:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+}
+
+.quiz-question span { /* Label/Title */
+    font-size: 1.15em !important;
+    font-weight: 600 !important;
+    color: #111827;
+    margin-bottom: 20px;
+    display: block;
+    line-height: 1.5;
+}
+
+/* Options Wrapper (The Radio Group) */
+.quiz-question .wrap {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 12px !important;
+}
+
+/* Individual Option Label */
+.quiz-question .wrap label {
+    display: flex !important;
+    align-items: center !important;
+    background: #f9fafb;
+    border: 2px solid #e5e7eb !important; /* Thick border */
+    padding: 15px 20px !important;
+    border-radius: 12px !important;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 1.05em;
+    color: #4b5563;
+}
+
+.quiz-question .wrap label:hover {
+    background: #f3f4f6;
+    border-color: #6366f1 !important;
+    color: #4f46e5;
+}
+
+.quiz-question .wrap label.selected {
+    background: #eef2ff !important;
+    border-color: #4f46e5 !important;
+    color: #4338ca !important;
+    font-weight: 600;
+    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1);
+}
+
+/* Hide default circle if possible, or style it. 
+   Gradio's radio inputs are tricky to hide fully without breaking accessibility, 
+   but we can style the container enough. */
+
+/* ================= RESULTS & FEEDBACK ================= */
+
+/* Success/Error Cards */
+.feedback-box-correct, .feedback-box-incorrect {
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 12px;
+    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    position: relative;
+    overflow: hidden;
+}
+
+.feedback-box-correct {
+    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+    border: 1px solid #10b981;
+    color: #065f46;
+}
+
+.feedback-box-incorrect {
+    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+    border: 1px solid #ef4444;
+    color: #991b1b;
+}
+
+.feedback-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    font-size: 1.2em;
+    font-weight: 700;
+}
+
+.feedback-icon {
+    font-size: 1.4em;
+    background: rgba(255,255,255,0.5);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.feedback-body {
+    background: rgba(255,255,255,0.4);
+    padding: 15px;
+    border-radius: 8px;
+    font-size: 1em;
+    line-height: 1.6;
+}
+
+.feedback-correct-answer {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #064e3b; /* darker green */
+}
+.feedback-box-incorrect .feedback-correct-answer {
+    color: #7f1d1d; /* darker red */
+}
+
+/* Summary / Explanation Box */
+.summary-box {
+    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+    border-radius: 20px;
+    padding: 35px 40px;
+    border: 1px solid #e0e7ff;
+    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.06);
+    font-size: 1.05em;
+    line-height: 1.9;
+    color: #374151;
+    position: relative;
+    overflow: hidden;
+}
+
+.summary-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #4f46e5, #7c3aed, #a78bfa);
+}
+
+.summary-box h2 {
+    font-size: 1.4em;
+    font-weight: 700;
+    color: #312e81;
+    margin: 0 0 18px 0;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #e0e7ff;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.summary-box h3 {
+    font-size: 1.15em;
+    font-weight: 600;
+    color: #4338ca;
+    margin: 20px 0 10px 0;
+}
+
+.summary-box p {
+    margin: 0 0 14px 0;
+    text-align: justify;
+}
+
+.summary-box ul, .summary-box ol {
+    margin: 10px 0 16px 0;
+    padding-left: 24px;
+}
+
+.summary-box li {
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.summary-box strong {
+    color: #312e81;
+    font-weight: 600;
+}
+
+.summary-box .summary-footer {
+    margin-top: 20px;
+    padding-top: 14px;
+    border-top: 1px solid #e0e7ff;
+    font-size: 0.85em;
+    color: #9ca3af;
+    text-align: left;
+}
+
+/* Example Buttons */
+#examples-container {
+    margin: 15px 0;
+    padding: 10px;
+    background: #f3f4f6;
+    border-radius: 12px;
+}
+
+.example-btn {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    color: #6366f1 !important; /* Indigo text */
+    font-size: 0.85em !important;
+    padding: 2px 10px !important;
+    border-radius: 20px !important; /* Pill shape */
+    transition: all 0.2s ease !important;
+    font-weight: 500 !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+}
+
+.example-btn:hover {
+    background: #f5f7ff !important;
+    border-color: #6366f1 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1) !important;
+}
+
+/* Result Card */
+.result-card {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    border-radius: 20px;
+    padding: 40px;
+    text-align: center;
+    color: white;
+    box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.3);
+    margin-top: 40px;
+    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.result-header {
+    font-size: 2em;
+    font-weight: 800;
+    margin-bottom: 15px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.result-score {
+    font-size: 3.5em;
+    font-weight: 800;
+    margin: 10px 0;
+    background: -webkit-linear-gradient(#ffffff, #e0e7ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.result-percentage {
+    font-size: 1.5em;
+    opacity: 0.9;
+    font-weight: 500;
+}
+
+/* Keyframes */
+@keyframes popIn {
+    from { opacity: 0; transform: scale(0.95) translateY(-5px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(40px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Hide Gradio Footer */
+footer { display: none !important; }
+.gradio-container .prose.footer-content { display: none !important; }
+"""
+
+# ----------------------------------------------------------------------
+# Main App
+# ----------------------------------------------------------------------
+
+with gr.Blocks(css=custom_css, title="SmartTutor AI") as demo:
+
+    # State
+    quiz_state = gr.State()
+
+    with gr.Column(elem_classes="header-box"):
+        gr.HTML(
+            """
+        <div style='color: white;'>
+            <h1 style='color: white; font-size: 3em; margin: 0;'>🧠 SmartTutor AI</h1>
+            <p style='color: #e0e7ff; font-size: 1.25em;'>Your intelligent companion for learning and assessment</p>
+        </div>
+        """
+        )
+
+    with gr.Row():
+        # Left Panel: Controls
+        with gr.Column(scale=1, variant="panel"):
+            file_input = gr.File(
+                label="📄 Upload Document", file_types=[".pdf", ".txt"], type="filepath"
+            )
+            user_input = gr.Textbox(
+                label="✍️ Request",
+                placeholder="e.g. 'Summarize this' or 'Create a quiz'",
+                lines=3,
+            )
+
+            # Quick Examples
+            with gr.Column(elem_id="examples-container"):
+                gr.Markdown("✨ **Quick Actions:**")
+                with gr.Row():
+                    ex_summarize = gr.Button(
+                        "📝 Summary (3 lines)", size="sm", elem_classes="example-btn"
+                    )
+                    ex_quiz = gr.Button(
+                        "🧪 3 Questions", size="sm", elem_classes="example-btn"
+                    )
+                with gr.Row():
+                    ex_explain = gr.Button(
+                        "💡 Main Concepts", size="sm", elem_classes="example-btn"
+                    )
+
+            with gr.Row():
+                submit_btn = gr.Button("🚀 Run", variant="primary")
+                clear_btn = gr.Button("🧹 Clear")
+
+        # Right Panel: Results
+        with gr.Column(scale=2):
+
+            # 1. Summary / Text Output
+            summary_output = gr.HTML(visible=True)
+
+            # 2. Quiz Group (Hidden initially)
+            with gr.Group(visible=False) as quiz_group:
+                gr.Markdown("## 📝 Quiz Time")
+                gr.Markdown("Select the correct answer for each question.")
+
+                # Create 10 Questions + Feedback slots
+                q_radios = []
+                q_feedbacks = []
+
+                for i in range(10):
+                    # Radio
+                    r = gr.Radio(
+                        label=f"Question {i+1}",
+                        visible=False,
+                        elem_classes="quiz-question",
+                    )
+                    q_radios.append(r)
+
+                    # Feedback (Markdown/HTML)
+                    fb = gr.HTML(visible=False)
+                    q_feedbacks.append(fb)
+
+                check_btn = gr.Button(
+                    "✅ Check Answers", variant="primary", visible=False
+                )
+
+                # Final Result Message
+                quiz_result_msg = gr.Markdown(visible=False)
+
+    # ------------------------------------------------------------------
+    # Events
+    # ------------------------------------------------------------------
+
+    # 1. Run Agent
+    # Returns: [Summary, QuizGroup, QuizState]
+    submit_btn.click(
+        fn=run_agent,
+        inputs=[file_input, user_input],
+        outputs=[summary_output, quiz_group, quiz_state],
+    ).success(
+        # On success, update the quiz UI components (21 items)
+        fn=render_quiz,
+        inputs=[quiz_state],
+        outputs=q_radios + q_feedbacks + [check_btn],
+    )
+
+    # Example Buttons Handling
+    # These will ONLY fill the text box. User must click 'Run' manually.
+
+    ex_summarize.click(
+        fn=lambda: "Summarize this document strictly in exactly 3 lines.",
+        outputs=[user_input],
+    )
+
+    ex_quiz.click(
+        fn=lambda: "Generate a quiz with exactly 3 multiple-choice questions.",
+        outputs=[user_input],
+    )
+
+    ex_explain.click(
+        fn=lambda: "Explain the 5 most important core concepts in this document clearly.",
+        outputs=[user_input],
+    )
+
+    # 2. Check Answers
+    # Inputs: State + 10 Radios
+    # Outputs: 10 Radios (Lock) + 10 Feedbacks (Show) + ResultMsg
+    check_btn.click(
+        fn=grade_quiz_ui,
+        inputs=[quiz_state] + q_radios,
+        outputs=q_radios + q_feedbacks + [quiz_result_msg],
+    )
+
+    # 3. Clear
+    def reset_ui():
+        # Reset everything to default
+        updates = [
+            gr.update(value=None, interactive=True, visible=False)
+        ] * 10  # Radios
+        fb_updates = [gr.update(value="", visible=False)] * 10  # Feedbacks
+        return (
+            None,
+            "",  # Inputs
+            gr.update(value="", visible=True),  # Summary
+            gr.update(visible=False),  # Quiz Group
+            None,  # State
+            *updates,
+            *fb_updates,  # Radios + Feedbacks
+            gr.update(visible=False),  # CheckBtn
+            gr.update(visible=False),  # ResultMsg
+        )
+
+    clear_btn.click(
+        fn=reset_ui,
+        inputs=[],
+        outputs=[file_input, user_input, summary_output, quiz_group, quiz_state]
+        + q_radios
+        + q_feedbacks
+        + [check_btn, quiz_result_msg],
+    )
+
+if __name__ == "__main__":
+    print("Starting SmartTutor AI on Hugging Face...")
+    demo.queue().launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_api=False,  # This helps avoid the Schema generation error
+    )