Update app.py

app.py

@@ -10,8 +10,21 @@ import io
 import markdown
 from datetime import datetime
 import tempfile
-import weasyprint
 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"])
+        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):
@@ -20,16 +33,6 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
     # Convert markdown to HTML
     html_content = markdown.markdown(markdown_text, extensions=['tables', 'fenced_code'])
     
-    # Replace LaTeX delimiters for MathJax
-    # Handle display math: \[ ... \] and $$ ... $$
-    html_content = re.sub(r'\\\[(.*?)\\\]', r'\\[\1\\]', html_content, flags=re.DOTALL)
-    html_content = re.sub(r'\$\$(.*?)\$\$', r'\\[\1\\]', html_content, flags=re.DOTALL)
-    
-    # Handle inline math: \( ... \) and $ ... $
-    html_content = re.sub(r'\\\((.*?)\\\)', r'\\(\1\\)', html_content)
-    # Be careful with single $ as it might be regular dollar signs
-    html_content = re.sub(r'(?<!\$)\$(?!\$)([^\$]+?)(?<!\$)\$(?!\$)', r'\\(\1\\)', html_content)
-    
     # Get current timestamp
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     
@@ -43,99 +46,140 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
         <title>Math Solution - Advanced Math Tutor</title>
         
         <!-- MathJax for rendering mathematical notation -->
-        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
         <script>
             window.MathJax = {{
                 tex: {{
-                    inlineMath: [['\\\\(', '\\\\)']],
-                    displayMath: [['\\\\[', '\\\\]']],
+                    inlineMath: [['\\\\(', '\\\\)'], ['$', '$']],
+                    displayMath: [['\\\\[', '\\\\]'], ['$$', '$$']],
                     processEscapes: true,
-                    processEnvironments: true
+                    processEnvironments: true,
+                    packages: {{'[+]': ['ams', 'newcommand', 'configmacros']}}
                 }},
                 options: {{
-                    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+                    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: #333;
+                color: #1a1a1a;
                 max-width: 900px;
                 margin: 0 auto;
-                padding: 20px;
+                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 15px rgba(0, 0, 0, 0.08);
+                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 5px rgba(0,0,0,0.05);
+                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.1em;
+                font-size: 1.15em;
                 line-height: 1.6;
+                margin: 10px 0;
             }}
+            
             .solution-content {{
                 background-color: #fafbfc;
-                padding: 30px;
+                padding: 35px;
                 border-radius: 10px;
                 border-left: 6px solid #007bff;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+                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.4em;
+                font-size: 1.5em;
                 color: #34495e;
+                margin-top: 25px;
             }}
+            
             h4 {{
-                font-size: 1.2em;
+                font-size: 1.3em;
                 color: #34495e;
             }}
+            
+            p {{
+                margin: 15px 0;
+                line-height: 1.8;
+            }}
+            
             code {{
                 background-color: #f1f3f5;
                 padding: 3px 8px;
@@ -144,6 +188,7 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
                 color: #e83e8c;
                 font-size: 0.9em;
             }}
+            
             pre {{
                 background-color: #f6f8fa;
                 padding: 20px;
@@ -152,75 +197,105 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
                 border: 1px solid #d1d5da;
                 line-height: 1.6;
             }}
+            
             pre code {{
                 background-color: transparent;
                 padding: 0;
                 color: #24292e;
             }}
-            .math-expression {{
-                background-color: #fff9e6;
-                padding: 15px;
-                border-radius: 6px;
-                border: 1px solid #ffe066;
-                margin: 15px 0;
-                text-align: center;
-                font-size: 1.15em;
-            }}
+            
             .step {{
-                margin: 25px 0;
-                padding: 20px;
+                margin: 30px 0;
+                padding: 25px;
                 background-color: #ffffff;
                 border-radius: 8px;
                 border: 1px solid #dee2e6;
-                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-            }}
-            .final-answer {{
-                background-color: #d4edda;
-                border: 3px solid #28a745;
-                padding: 25px;
-                border-radius: 10px;
-                margin-top: 35px;
-                text-align: center;
-                font-size: 1.3em;
+                box-shadow: 0 1px 4px rgba(0,0,0,0.05);
             }}
-            .final-answer h2, .final-answer h3 {{
-                color: #155724;
+            
+            .step h3, .step h4 {{
+                color: #2c3e50;
                 margin-top: 0;
             }}
-            .timestamp {{
-                text-align: right;
-                color: #6c757d;
-                font-size: 0.95em;
-                margin-top: 40px;
-                padding-top: 25px;
-                border-top: 2px solid #e9ecef;
-            }}
+            
             ul, ol {{
                 padding-left: 30px;
                 line-height: 1.8;
             }}
+            
             li {{
-                margin: 10px 0;
+                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;
@@ -235,31 +310,15 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
                 font-weight: 500;
                 transition: background-color 0.2s;
             }}
+            
             .print-button:hover {{
                 background-color: #0056b3;
             }}
             
-            /* Math styling */
-            mjx-container {{
-                margin: 10px 0 !important;
-            }}
-            
-            mjx-container[display="true"] {{
-                margin: 20px 0 !important;
-            }}
-            
-            /* Boxed answers */
-            .boxed {{
-                border: 2px solid #4CAF50;
-                padding: 10px 15px;
-                border-radius: 5px;
-                display: inline-block;
-                background-color: #f0f9f0;
-            }}
-            
             @media print {{
                 body {{
                     background-color: white;
+                    padding: 20px;
                 }}
                 .container {{
                     box-shadow: none;
@@ -275,15 +334,6 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
             function printPage() {{
                 window.print();
             }}
-            
-            // Wait for MathJax to finish rendering before showing content
-            window.addEventListener('load', function() {{
-                if (window.MathJax) {{
-                    MathJax.startup.promise.then(function () {{
-                        console.log('MathJax rendering complete');
-                    }});
-                }}
-            }});
         </script>
     </head>
     <body>
@@ -332,26 +382,62 @@ def save_html_to_file(html_content, filename_prefix="math_solution"):
     
     return file_path
 
-# Function to convert HTML to PDF with proper math rendering
+# 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 and return the file path"""
+    """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"
     
-    # Create a temporary file for PDF
     temp_dir = tempfile.gettempdir()
     pdf_path = os.path.join(temp_dir, filename)
     
     try:
-        # Note: WeasyPrint doesn't support MathJax rendering
-        # For PDF with proper math, we need to use a different approach
-        # This creates a basic PDF - for proper math rendering in PDF,
-        # consider using tools like puppeteer or selenium with headless browser
-        weasyprint.HTML(string=html_content).write_pdf(pdf_path)
+        # 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: {str(e)}")
-        return None
+        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):
@@ -371,28 +457,37 @@ def generate_math_solution_openrouter(api_key, problem_text, history=None):
             {"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 using proper LaTeX notation wrapped in \\[ \\] for display math or \\( \\) for inline math
+             1. Show the mathematical operation in LaTeX
              2. Explain why this step is necessary
              3. Connect it to relevant mathematical concepts
              
-             IMPORTANT: Use proper LaTeX notation for all mathematical expressions:
-             - Use \\[ ... \\] for display (centered) equations
-             - Use \\( ... \\) for inline math
-             - Use \\boxed{} for final answers
-             - Use \\text{} for text within math mode
-             - Example: \\[ A = \\pi r^{2} \\]
-             - Example: The area \\( A \\) equals \\( \\pi r^{2} \\)
+             Format your response using markdown with clear section headers:
+             - ## Initial Analysis
+             - ## Step-by-Step Solution
+             - ### Step 1: [description]
+             - ### Step 2: [description]
+             - ## Final Answer
              
-             Format your response using markdown with clear section headers.
-             Begin with an "Initial Analysis" section, follow with numbered steps,
-             and conclude with a "Final Answer" section.
-             
-             Use proper markdown formatting including:
-             - Headers (##, ###)
-             - **Bold text** for important points
-             - Lists and numbered steps
-             - Tables if needed for comparisons or data"""},
+             Use **bold** for important points and proper lists."""},
         ]
         
         # Add conversation history if it exists
@@ -407,7 +502,7 @@ def generate_math_solution_openrouter(api_key, problem_text, history=None):
         
         # Create the completion
         completion = client.chat.completions.create(
-            model="meta-llama/llama-3.3-70b-instruct:free",
+            model="deepseek/deepseek-r1-0528:free",
             messages=messages,
             extra_headers={
                 "HTTP-Referer": "https://advancedmathtutor.edu",
@@ -423,7 +518,7 @@ def generate_math_solution_openrouter(api_key, problem_text, history=None):
         # Save HTML file
         html_file_path = save_html_to_file(html_solution, "openrouter_solution")
         
-        # Convert to PDF
+        # Convert to PDF with proper math rendering
         pdf_file_path = html_to_pdf(html_solution, "openrouter_solution")
         
         # Update history
@@ -454,28 +549,37 @@ def generate_math_solution_together(api_key, problem_text, image_path=None, hist
                 "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 using proper LaTeX notation wrapped in \\[ \\] for display math or \\( \\) for inline math
+                 1. Show the mathematical operation in LaTeX
                  2. Explain why this step is necessary
                  3. Connect it to relevant mathematical concepts
                  
-                 IMPORTANT: Use proper LaTeX notation for all mathematical expressions:
-                 - Use \\[ ... \\] for display (centered) equations
-                 - Use \\( ... \\) for inline math
-                 - Use \\boxed{} for final answers
-                 - Use \\text{} for text within math mode
-                 - Example: \\[ A = \\pi r^{2} \\]
-                 - Example: The area \\( A \\) equals \\( \\pi r^{2} \\)
-                 
-                 Format your response using markdown with clear section headers.
-                 Begin with an "Initial Analysis" section, follow with numbered steps,
-                 and conclude with a "Final Answer" section.
+                 Format your response using markdown with clear section headers:
+                 - ## Initial Analysis
+                 - ## Step-by-Step Solution
+                 - ### Step 1: [description]
+                 - ### Step 2: [description]
+                 - ## Final Answer
                  
-                 Use proper markdown formatting including:
-                 - Headers (##, ###)
-                 - **Bold text** for important points
-                 - Lists and numbered steps
-                 - Tables if needed for comparisons or data"""
+                 Use **bold** for important points and proper lists."""
             }
         ]
         
@@ -535,7 +639,7 @@ def generate_math_solution_together(api_key, problem_text, image_path=None, hist
         # Save HTML file
         html_file_path = save_html_to_file(html_solution, "together_solution")
         
-        # Convert to PDF
+        # Convert to PDF with proper math rendering
         pdf_file_path = html_to_pdf(html_solution, "together_solution")
         
         # Update history
@@ -568,7 +672,7 @@ def create_demo():
         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.
-        Choose between OpenRouter or Together AI for problem solving.
+        **PDFs are generated using headless browser** for perfect math rendering!
         """)
         
         # Main tabs
@@ -592,7 +696,7 @@ def create_demo():
                                 ["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"],
-                                ["Find all values of x that satisfy: log₂(x-1) + log₂(x+3) = 5"]
+                                ["Integrate: ∫(2x + 3)dx from 0 to 5"]
                             ],
                             inputs=[text_problem_input],
                             label="Example Problems"
@@ -610,7 +714,7 @@ def create_demo():
                             visible=False
                         )
                         openrouter_pdf_download = gr.File(
-                            label="📄 Download PDF Solution",
+                            label="📄 Download PDF Solution (Perfect Math Rendering)",
                             visible=False
                         )
                 
@@ -689,7 +793,7 @@ def create_demo():
                             visible=False
                         )
                         together_pdf_download = gr.File(
-                            label="📄 Download PDF Solution",
+                            label="📄 Download PDF Solution (Perfect Math Rendering)",
                             visible=False
                         )
                 
@@ -738,54 +842,42 @@ def create_demo():
                 )
             
             # Help tab
-            with gr.TabItem("Help"):
+            with gr.TabItem("Help & Installation"):
                 gr.Markdown("""
-                ## How to Use the Advanced Math Tutor
-                
-                ### Key Features 🎉
-                - **Professional math rendering**: All equations rendered using MathJax/LaTeX
-                - **HTML-formatted solutions**: Beautiful, readable format
-                - **Download HTML**: Save solutions as HTML files with proper math notation
-                - **Download PDF**: Convert solutions to PDF (Note: PDF math rendering may vary)
-                - **Print functionality**: Print directly from your browser
-                
-                ### Getting Started
+                ## Installation Instructions
                 
-                #### For Text Problems (OpenRouter)
-                1. Get API key from [OpenRouter](https://openrouter.ai/)
-                2. Enter your problem in proper notation
-                3. Get beautifully formatted solutions with proper mathematical notation
+                This application requires the following packages:
                 
-                #### For Image Problems (Together AI)
-                1. Get API key from [Together AI](https://www.together.ai/)
-                2. Upload a clear image of the math problem
-                3. Optionally add context
+                ```bash
+                pip install gradio openai together pillow markdown playwright
+                python -m playwright install chromium
+                ```
                 
-                ### Math Notation Tips
-                - Superscripts: x² or x^2
-                - Subscripts: x₁ or x_1
-                - Fractions: Use / or describe as "numerator over denominator"
-                - Greek letters: pi, alpha, beta, theta, etc.
-                - Square roots: √ or sqrt()
+                **Note:** Playwright is used for PDF generation with perfect math rendering!
                 
-                ### Types of Problems
-                - Algebra, Calculus, Trigonometry
-                - Geometry, Statistics
-                - Number Theory, Linear Algebra
-                - And much more!
+                ## 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.
                 
-                ### Note on PDF Export
-                The HTML version will always have perfect math rendering. The PDF export uses
-                WeasyPrint which may have limitations with complex math notation. For best results,
-                use the "Print to PDF" button in the HTML view instead.
+                ## 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.
                 """)
-        
-        gr.Markdown("""
-        ---
-        ### About
-        Enhanced with **MathJax** for professional mathematical notation rendering.
-        Your API keys are never stored permanently.
-        """)
     
     return demo