Spaces:

shukdevdattaEX
/

Advanced-Math-Tutor-App-Stable

Sleeping

File size: 33,393 Bytes

import gradio as gr
import os
import re
import time
import base64
from openai import OpenAI
from together import Together
from PIL import Image
import io
import markdown
from datetime import datetime
import tempfile
from pathlib import Path
import subprocess
import sys

# Function to install playwright if not available
def ensure_playwright():
    try:
        from playwright.sync_api import sync_playwright
        return True
    except ImportError:
        print("Installing playwright for PDF generation...")
        subprocess.check_call([sys.executable, "-m", "pip", "install", "playwright"])
        subprocess.check_call([sys.executable, "-m", "playwright", "install", "chromium"])
        subprocess.check_call([sys.executable, "-m", "playwright", "install", "install-deps"])
        from playwright.sync_api import sync_playwright
        return True

# Function to convert markdown to HTML with styling and MathJax
def markdown_to_html(markdown_text, problem_text="", include_problem=True):
    """Convert markdown to styled HTML with proper math rendering"""
    
    # Convert markdown to HTML
    html_content = markdown.markdown(markdown_text, extensions=['tables', 'fenced_code'])
    
    # Get current timestamp
    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    
    # Create styled HTML document with MathJax
    styled_html = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Math Solution - Advanced Math Tutor</title>
        
        <!-- MathJax for rendering mathematical notation -->
        <script>
            window.MathJax = {{
                tex: {{
                    inlineMath: [['\\\\(', '\\\\)'], ['$', '$']],
                    displayMath: [['\\\\[', '\\\\]'], ['$$', '$$']],
                    processEscapes: true,
                    processEnvironments: true,
                    packages: {{'[+]': ['ams', 'newcommand', 'configmacros']}}
                }},
                options: {{
                    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                    ignoreHtmlClass: 'tex2jax_ignore',
                    processHtmlClass: 'tex2jax_process'
                }},
                startup: {{
                    ready: () => {{
                        MathJax.startup.defaultReady();
                        MathJax.startup.promise.then(() => {{
                            console.log('MathJax rendering complete');
                            document.body.classList.add('mathjax-ready');
                        }});
                    }}
                }}
            }};
        </script>
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
        
        <style>
            body {{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                line-height: 1.8;
                color: #1a1a1a;
                max-width: 900px;
                margin: 0 auto;
                padding: 40px 20px;
                background-color: #f5f7fa;
            }}
            
            body:not(.mathjax-ready) {{
                opacity: 0;
            }}
            
            body.mathjax-ready {{
                opacity: 1;
                transition: opacity 0.3s ease-in;
            }}
            
            .container {{
                background-color: white;
                padding: 50px;
                border-radius: 12px;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            }}
            
            .header {{
                text-align: center;
                border-bottom: 4px solid #4CAF50;
                padding-bottom: 25px;
                margin-bottom: 40px;
            }}
            
            .header h1 {{
                color: #2c3e50;
                margin: 0;
                font-size: 2.8em;
                font-weight: 700;
            }}
            
            .header .subtitle {{
                color: #7f8c8d;
                font-style: italic;
                margin-top: 10px;
                font-size: 1.1em;
            }}
            
            .problem-section {{
                background-color: #e8f5e9;
                padding: 25px;
                border-radius: 10px;
                margin-bottom: 35px;
                border-left: 6px solid #4CAF50;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }}
            
            .problem-section h2 {{
                color: #2c3e50;
                margin-top: 0;
                font-size: 1.6em;
            }}
            
            .problem-section p {{
                font-size: 1.15em;
                line-height: 1.6;
                margin: 10px 0;
            }}
            
            .solution-content {{
                background-color: #fafbfc;
                padding: 35px;
                border-radius: 10px;
                border-left: 6px solid #007bff;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }}
            
            h1, h2, h3, h4, h5, h6 {{
                color: #2c3e50;
                margin-top: 30px;
                margin-bottom: 15px;
                font-weight: 600;
                line-height: 1.3;
            }}
            
            h2 {{
                border-bottom: 2px solid #e1e4e8;
                padding-bottom: 12px;
                font-size: 1.8em;
            }}
            
            h3 {{
                font-size: 1.5em;
                color: #34495e;
                margin-top: 25px;
            }}
            
            h4 {{
                font-size: 1.3em;
                color: #34495e;
            }}
            
            p {{
                margin: 15px 0;
                line-height: 1.8;
            }}
            
            code {{
                background-color: #f1f3f5;
                padding: 3px 8px;
                border-radius: 4px;
                font-family: 'Courier New', Consolas, monospace;
                color: #e83e8c;
                font-size: 0.9em;
            }}
            
            pre {{
                background-color: #f6f8fa;
                padding: 20px;
                border-radius: 6px;
                overflow-x: auto;
                border: 1px solid #d1d5da;
                line-height: 1.6;
            }}
            
            pre code {{
                background-color: transparent;
                padding: 0;
                color: #24292e;
            }}
            
            .step {{
                margin: 30px 0;
                padding: 25px;
                background-color: #ffffff;
                border-radius: 8px;
                border: 1px solid #dee2e6;
                box-shadow: 0 1px 4px rgba(0,0,0,0.05);
            }}
            
            .step h3, .step h4 {{
                color: #2c3e50;
                margin-top: 0;
            }}
            
            ul, ol {{
                padding-left: 30px;
                line-height: 1.8;
            }}
            
            li {{
                margin: 12px 0;
            }}
            
            table {{
                border-collapse: collapse;
                width: 100%;
                margin: 25px 0;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }}
            
            th, td {{
                border: 1px solid #dee2e6;
                padding: 14px;
                text-align: left;
            }}
            
            th {{
                background-color: #f8f9fa;
                font-weight: 600;
                color: #495057;
            }}
            
            tr:nth-child(even) {{
                background-color: #f8f9fa;
            }}
            
            /* MathJax styling */
            mjx-container {{
                margin: 15px 0 !important;
                overflow-x: auto;
                overflow-y: hidden;
            }}
            
            mjx-container[display="true"] {{
                margin: 25px 0 !important;
                text-align: center;
            }}
            
            /* Ensure math displays properly */
            .MathJax, .MathJax_Display {{
                font-size: 1.1em !important;
            }}
            
            /* Final answer styling */
            .final-answer {{
                background-color: #d4edda;
                border: 3px solid #28a745;
                padding: 30px;
                border-radius: 10px;
                margin-top: 40px;
                text-align: center;
            }}
            
            .final-answer h2, .final-answer h3 {{
                color: #155724;
                margin-top: 0;
                margin-bottom: 20px;
            }}
            
            .final-answer mjx-container {{
                font-size: 1.3em !important;
            }}
            
            .timestamp {{
                text-align: right;
                color: #6c757d;
                font-size: 0.95em;
                margin-top: 40px;
                padding-top: 25px;
                border-top: 2px solid #e9ecef;
            }}
            
            .print-button {{
                background-color: #007bff;
                color: white;
                border: none;
                padding: 12px 24px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 16px;
                margin: 10px 5px;
                display: inline-block;
                text-decoration: none;
                font-weight: 500;
                transition: background-color 0.2s;
            }}
            
            .print-button:hover {{
                background-color: #0056b3;
            }}
            
            @media print {{
                body {{
                    background-color: white;
                    padding: 20px;
                }}
                .container {{
                    box-shadow: none;
                    border: none;
                    padding: 20px;
                }}
                .print-button {{
                    display: none;
                }}
            }}
        </style>
        <script>
            function printPage() {{
                window.print();
            }}
        </script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>📚 Advanced Math Tutor</h1>
                <div class="subtitle">Step-by-Step Mathematical Solution</div>
            </div>
            
            <button class="print-button" onclick="printPage()">🖨️ Print to PDF</button>
            
            {f'''
            <div class="problem-section">
                <h2>📝 Problem Statement</h2>
                <p><strong>{problem_text}</strong></p>
            </div>
            ''' if include_problem and problem_text.strip() else ''}
            
            <div class="solution-content">
                <h2>🔍 Solution</h2>
                {html_content}
            </div>
            
            <div class="timestamp">
                Generated on: {timestamp}
            </div>
        </div>
    </body>
    </html>
    """
    
    return styled_html

# Function to save HTML to file
def save_html_to_file(html_content, filename_prefix="math_solution"):
    """Save HTML content to a temporary file and return the file path"""
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    filename = f"{filename_prefix}_{timestamp}.html"
    
    # Create a temporary file
    temp_dir = tempfile.gettempdir()
    file_path = os.path.join(temp_dir, filename)
    
    with open(file_path, 'w', encoding='utf-8') as f:
        f.write(html_content)
    
    return file_path

# Function to convert HTML to PDF using Playwright (proper math rendering)
def html_to_pdf(html_content, filename_prefix="math_solution"):
    """Convert HTML content to PDF with proper MathJax rendering using Playwright"""
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    filename = f"{filename_prefix}_{timestamp}.pdf"
    
    temp_dir = tempfile.gettempdir()
    pdf_path = os.path.join(temp_dir, filename)
    
    try:
        # Ensure playwright is installed
        ensure_playwright()
        from playwright.sync_api import sync_playwright
        
        with sync_playwright() as p:
            # Launch browser
            browser = p.chromium.launch(headless=True)
            page = browser.new_page()
            
            # Set content and wait for MathJax to render
            page.set_content(html_content)
            
            # Wait for MathJax to be ready
            page.wait_for_selector('body.mathjax-ready', timeout=10000)
            
            # Additional wait to ensure everything is rendered
            page.wait_for_timeout(1000)
            
            # Generate PDF
            page.pdf(
                path=pdf_path,
                format='A4',
                margin={
                    'top': '20mm',
                    'right': '20mm',
                    'bottom': '20mm',
                    'left': '20mm'
                },
                print_background=True
            )
            
            browser.close()
        
        return pdf_path
    except Exception as e:
        print(f"Error converting to PDF with Playwright: {str(e)}")
        print("Falling back to basic PDF generation...")
        
        # Fallback to weasyprint if playwright fails
        try:
            import weasyprint
            weasyprint.HTML(string=html_content).write_pdf(pdf_path)
            return pdf_path
        except Exception as e2:
            print(f"Error with fallback PDF generation: {str(e2)}")
            return None

# Enhanced function to generate math solution using OpenRouter with HTML output
def generate_math_solution_openrouter(api_key, problem_text, history=None):
    if not api_key.strip():
        return "Please enter your OpenRouter API key.", None, None, history
    
    if not problem_text.strip():
        return "Please enter a math problem.", None, None, history
    
    try:
        client = OpenAI(
            base_url="https://openrouter.ai/api/v1",
            api_key=api_key,
        )
        
        messages = [
            {"role": "system", "content": 
             """You are an expert math tutor who explains concepts clearly and thoroughly.
             Analyze the given math problem and provide a detailed step-by-step solution.
             
             CRITICAL: Use PROPER LaTeX notation for ALL mathematical expressions:
             - Use \\[ ... \\] for display (centered) equations
             - Use \\( ... \\) for inline math within text
             - Use \\boxed{...} for final answers
             - Use \\frac{numerator}{denominator} for fractions
             - Use ^ for superscripts: x^2
             - Use _ for subscripts: x_1
             - Use \\cdot for multiplication
             - Use \\pm for plus-minus
             - Use \\sqrt{...} for square roots
             - Greek letters: \\pi, \\alpha, \\beta, \\theta, etc.
             
             EXAMPLES:
             - Display equation: \\[ ax^2 + bx + c = 0 \\]
             - Inline math: The quadratic formula \\( x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} \\) gives us...
             - Final answer: \\[ \\boxed{x = \\frac{1}{3}} \\]
             
             For each step:
             1. Show the mathematical operation in LaTeX
             2. Explain why this step is necessary
             3. Connect it to relevant mathematical concepts
             
             Format your response using markdown with clear section headers:
             - ## Initial Analysis
             - ## Step-by-Step Solution
             - ### Step 1: [description]
             - ### Step 2: [description]
             - ## Final Answer
             
             Use **bold** for important points and proper lists."""},
        ]
        
        # Add conversation history if it exists
        if history:
            for exchange in history:
                messages.append({"role": "user", "content": exchange[0]})
                if len(exchange) > 1 and exchange[1]:
                    messages.append({"role": "assistant", "content": exchange[1]})
        
        # Add the current problem
        messages.append({"role": "user", "content": f"Solve this math problem step-by-step: {problem_text}"})
        
        # Create the completion
        completion = client.chat.completions.create(
            model="meta-llama/llama-3.3-70b-instruct:free",
            messages=messages,
            extra_headers={
                "HTTP-Referer": "https://advancedmathtutor.edu",
                "X-Title": "Advanced Math Tutor",
            }
        )
        
        markdown_solution = completion.choices[0].message.content
        
        # Convert to HTML
        html_solution = markdown_to_html(markdown_solution, problem_text)
        
        # Save HTML file
        html_file_path = save_html_to_file(html_solution, "openrouter_solution")
        
        # Convert to PDF with proper math rendering
        pdf_file_path = html_to_pdf(html_solution, "openrouter_solution")
        
        # Update history
        if history is None:
            history = []
        history.append((problem_text, markdown_solution))
        
        return html_solution, html_file_path, pdf_file_path, history
        
    except Exception as e:
        error_message = f"Error: {str(e)}"
        return error_message, None, None, history

# Enhanced function to generate math solution using Together AI with HTML output
def generate_math_solution_together(api_key, problem_text, image_path=None, history=None):
    if not api_key.strip():
        return "Please enter your Together AI API key.", None, None, history
    
    if not problem_text.strip() and image_path is None:
        return "Please enter a math problem or upload an image of a math problem.", None, None, history
    
    try:
        client = Together(api_key=api_key)
        
        # Create the base message structure
        messages = [
            {
                "role": "system",
                "content": """You are an expert math tutor who explains concepts clearly and thoroughly.
                 Analyze the given math problem and provide a detailed step-by-step solution.
                 
                 CRITICAL: Use PROPER LaTeX notation for ALL mathematical expressions:
                 - Use \\[ ... \\] for display (centered) equations
                 - Use \\( ... \\) for inline math within text
                 - Use \\boxed{...} for final answers
                 - Use \\frac{numerator}{denominator} for fractions
                 - Use ^ for superscripts: x^2
                 - Use _ for subscripts: x_1
                 - Use \\cdot for multiplication
                 - Use \\pm for plus-minus
                 - Use \\sqrt{...} for square roots
                 - Greek letters: \\pi, \\alpha, \\beta, \\theta, etc.
                 
                 EXAMPLES:
                 - Display equation: \\[ ax^2 + bx + c = 0 \\]
                 - Inline math: The quadratic formula \\( x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} \\) gives us...
                 - Final answer: \\[ \\boxed{x = \\frac{1}{3}} \\]
                 
                 For each step:
                 1. Show the mathematical operation in LaTeX
                 2. Explain why this step is necessary
                 3. Connect it to relevant mathematical concepts
                 
                 Format your response using markdown with clear section headers:
                 - ## Initial Analysis
                 - ## Step-by-Step Solution
                 - ### Step 1: [description]
                 - ### Step 2: [description]
                 - ## Final Answer
                 
                 Use **bold** for important points and proper lists."""
            }
        ]
        
        # Add conversation history if it exists
        if history:
            for exchange in history:
                messages.append({"role": "user", "content": exchange[0]})
                if len(exchange) > 1 and exchange[1]:
                    messages.append({"role": "assistant", "content": exchange[1]})
        
        # Prepare the user message content
        user_message_content = []
        
        # Add text content if provided
        if problem_text.strip():
            user_message_content.append({
                "type": "text",
                "text": f"Solve this math problem: {problem_text}"
            })
        else:
            user_message_content.append({
                "type": "text",
                "text": "Solve this math problem from the image:"
            })
        
        # Add image if provided
        if image_path:
            # Convert image to base64
            base64_image = image_to_base64(image_path)
            if base64_image:
                user_message_content.append({
                    "type": "image_url",
                    "image_url": {
                        "url": f"data:image/jpeg;base64,{base64_image}"
                    }
                })
        
        # Add the user message with content
        messages.append({
            "role": "user",
            "content": user_message_content
        })
        
        # Create the completion
        response = client.chat.completions.create(
            model="ServiceNow-AI/Apriel-1.5-15b-Thinker",
            messages=messages,
            stream=False
        )
        
        markdown_solution = response.choices[0].message.content
        
        # Convert to HTML
        problem_display = problem_text if problem_text.strip() else "Image-based problem"
        html_solution = markdown_to_html(markdown_solution, problem_display)
        
        # Save HTML file
        html_file_path = save_html_to_file(html_solution, "together_solution")
        
        # Convert to PDF with proper math rendering
        pdf_file_path = html_to_pdf(html_solution, "together_solution")
        
        # Update history
        if history is None:
            history = []
        history.append((problem_display, markdown_solution))
        
        return html_solution, html_file_path, pdf_file_path, history
        
    except Exception as e:
        error_message = f"Error: {str(e)}"
        return error_message, None, None, history

# Function to convert image to base64
def image_to_base64(image_path):
    if image_path is None:
        return None
    
    try:
        with open(image_path, "rb") as img_file:
            return base64.b64encode(img_file.read()).decode("utf-8")
    except Exception as e:
        print(f"Error converting image to base64: {str(e)}")
        return None

# Define the Gradio interface
def create_demo():
    with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
        gr.Markdown("# 📚 Advanced Math Tutor")
        gr.Markdown("""
        This application provides step-by-step solutions to math problems using advanced AI models.
        Solutions are generated in **HTML format** with proper mathematical notation rendering using MathJax.
        **PDFs are generated using headless browser** for perfect math rendering!
        """)
        
        # Main tabs
        with gr.Tabs():
            # Text-based problem solver (OpenRouter)
            with gr.TabItem("Text Problem Solver (OpenRouter)"):
                with gr.Row():
                    with gr.Column(scale=1):
                        openrouter_api_key = gr.Textbox(
                            label="OpenRouter API Key", 
                            placeholder="Enter your OpenRouter API key (starts with sk-or-)",
                            type="password"
                        )
                        text_problem_input = gr.Textbox(
                            label="Math Problem", 
                            placeholder="Enter your math problem here...",
                            lines=5
                        )
                        example_problems = gr.Examples(
                            examples=[
                                ["Solve the quadratic equation: 3x² + 5x - 2 = 0"],
                                ["Find the derivative of f(x) = x³ln(x)"],
                                ["Calculate the area of a circle with radius 5 cm"],
                                ["Integrate: ∫(2x + 3)dx from 0 to 5"]
                            ],
                            inputs=[text_problem_input],
                            label="Example Problems"
                        )
                        with gr.Row():
                            openrouter_submit_btn = gr.Button("Solve Problem", variant="primary")
                            openrouter_clear_btn = gr.Button("Clear")
                
                with gr.Column(scale=2):
                    openrouter_solution_output = gr.HTML(label="Solution (HTML with LaTeX)")
                    
                    with gr.Row():
                        openrouter_html_download = gr.File(
                            label="📄 Download HTML Solution",
                            visible=False
                        )
                        openrouter_pdf_download = gr.File(
                            label="📄 Download PDF Solution (Perfect Math Rendering)",
                            visible=False
                        )
                
                openrouter_conversation_history = gr.State(value=None)
                
                def handle_openrouter_submit(api_key, problem_text, history):
                    html_solution, html_file, pdf_file, updated_history = generate_math_solution_openrouter(
                        api_key, problem_text, history
                    )
                    
                    return (
                        html_solution,
                        updated_history,
                        gr.update(value=html_file, visible=html_file is not None),
                        gr.update(value=pdf_file, visible=pdf_file is not None)
                    )
                
                openrouter_submit_btn.click(
                    fn=handle_openrouter_submit,
                    inputs=[openrouter_api_key, text_problem_input, openrouter_conversation_history],
                    outputs=[
                        openrouter_solution_output, 
                        openrouter_conversation_history,
                        openrouter_html_download,
                        openrouter_pdf_download
                    ]
                )
                
                def clear_openrouter():
                    return (
                        "",
                        None,
                        gr.update(value=None, visible=False),
                        gr.update(value=None, visible=False)
                    )
                
                openrouter_clear_btn.click(
                    fn=clear_openrouter,
                    inputs=[],
                    outputs=[
                        openrouter_solution_output, 
                        openrouter_conversation_history,
                        openrouter_html_download,
                        openrouter_pdf_download
                    ]
                )
            
            # Image-based problem solver (Together AI)
            with gr.TabItem("Image Problem Solver (Together AI)"):
                with gr.Row():
                    with gr.Column(scale=1):
                        together_api_key = gr.Textbox(
                            label="Together AI API Key", 
                            placeholder="Enter your Together AI API key",
                            type="password"
                        )
                        together_problem_input = gr.Textbox(
                            label="Problem Description (Optional)", 
                            placeholder="Enter additional context...",
                            lines=3
                        )
                        together_image_input = gr.Image(
                            label="Upload Math Problem Image",
                            type="filepath"
                        )
                        with gr.Row():
                            together_submit_btn = gr.Button("Solve Problem", variant="primary")
                            together_clear_btn = gr.Button("Clear")
                
                with gr.Column(scale=2):
                    together_solution_output = gr.HTML(label="Solution (HTML with LaTeX)")
                    
                    with gr.Row():
                        together_html_download = gr.File(
                            label="📄 Download HTML Solution",
                            visible=False
                        )
                        together_pdf_download = gr.File(
                            label="📄 Download PDF Solution (Perfect Math Rendering)",
                            visible=False
                        )
                
                together_conversation_history = gr.State(value=None)
                
                def handle_together_submit(api_key, problem_text, image_path, history):
                    html_solution, html_file, pdf_file, updated_history = generate_math_solution_together(
                        api_key, problem_text, image_path, history
                    )
                    
                    return (
                        html_solution,
                        updated_history,
                        gr.update(value=html_file, visible=html_file is not None),
                        gr.update(value=pdf_file, visible=pdf_file is not None)
                    )
                
                together_submit_btn.click(
                    fn=handle_together_submit,
                    inputs=[together_api_key, together_problem_input, together_image_input, together_conversation_history],
                    outputs=[
                        together_solution_output, 
                        together_conversation_history,
                        together_html_download,
                        together_pdf_download
                    ]
                )
                
                def clear_together():
                    return (
                        "",
                        None,
                        gr.update(value=None, visible=False),
                        gr.update(value=None, visible=False)
                    )
                
                together_clear_btn.click(
                    fn=clear_together,
                    inputs=[],
                    outputs=[
                        together_solution_output, 
                        together_conversation_history,
                        together_html_download,
                        together_pdf_download
                    ]
                )
            
            # Help tab
            with gr.TabItem("Help & Installation"):
                gr.Markdown("""
                ## Installation Instructions
                
                This application requires the following packages:
                
                ```bash
                pip install gradio openai together pillow markdown playwright
                python -m playwright install chromium
                ```
                
                **Note:** Playwright is used for PDF generation with perfect math rendering!
                
                ## Key Features 🎉
                - ✅ **Perfect math rendering** in both HTML and PDF using MathJax
                - ✅ **HTML-formatted solutions** with professional styling
                - ✅ **Download HTML**: Save solutions as HTML files
                - ✅ **Download PDF**: PDFs with properly rendered mathematical notation (using headless browser)
                - ✅ **Print functionality**: Print or save directly to PDF from browser
                - ✅ **Image-to-Math capability** (via Together AI)
                - ✅ **Conversation memory** — keeps context of your previous problems
                - ✅ **Cross-model support** — OpenRouter and Together AI models

                ## Troubleshooting 🧩
                - If **PDF export fails**, ensure Playwright and Chromium are installed:
                  ```bash
                  python -m playwright install chromium
                  ```
                - If **math symbols do not render**, reload the HTML file in a modern browser (MathJax will re-render).
                - If **you get API errors**, verify your API key is valid and has active quota.
                
                ## Usage Tips 💡
                - For **OpenRouter**, use an API key starting with `sk-or-`.
                - For **Together AI**, use your standard API key from [https://api.together.ai](https://api.together.ai).
                - You can **copy and share** generated HTML or PDF solutions.
                """)
    
    return demo

# Launch the app
if __name__ == "__main__":
    demo = create_demo()
    demo.launch()