Update app.py

app.py

@@ -177,6 +177,16 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
             .print-button:hover {{
                 background-color: #0056b3;
             }}
+            .thinking {{
+                font-style: italic;
+                color: #007bff;
+                font-size: 1.2em;
+                text-align: center;
+                padding: 20px;
+                background-color: #e9ecef;
+                border-radius: 8px;
+                min-height: 100px;
+            }}
             @media print {{
                 body {{
                     background-color: white;
@@ -188,6 +198,9 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
                 .print-button {{
                     display: none;
                 }}
+                .thinking {{
+                    display: none;
+                }}
             }}
         </style>
         <script>
@@ -212,7 +225,7 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
             </div>
             ''' if include_problem and problem_text.strip() else ''}
             
-            <div class="solution-content">
+            <div class="solution-content" id="solution-content">
                 <h2>🔍 Solution</h2>
                 {html_content}
             </div>
@@ -227,6 +240,22 @@ def markdown_to_html(markdown_text, problem_text="", include_problem=True):
     
     return styled_html
 
+# Function to generate thinking animation HTML
+def thinking_animation_html():
+    return """
+    <div class="thinking" id="thinking-animation">
+        Thinking<span id="dots"></span>
+        <script>
+            let dots = 0;
+            const dotsElement = document.getElementById('dots');
+            const interval = setInterval(() => {
+                dots = (dots + 1) % 4;
+                dotsElement.textContent = '.'.repeat(dots);
+            }, 500);
+        </script>
+    </div>
+    """
+
 # 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"""
@@ -299,12 +328,15 @@ def generate_math_solution_openrouter(api_key, problem_text, history=None):
         if history:
             for exchange in history:
                 messages.append({"role": "user", "content": exchange[0]})
-                if len(exchange) > 1 and exchange[1]:  # Check if there's a response
+                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}"})
         
+        # Show thinking animation
+        yield thinking_animation_html(), None, None, history
+        
         # Create the completion
         completion = client.chat.completions.create(
             model="microsoft/phi-4-reasoning-plus:free",
@@ -331,11 +363,11 @@ def generate_math_solution_openrouter(api_key, problem_text, history=None):
             history = []
         history.append((problem_text, markdown_solution))
         
-        return html_solution, html_file_path, pdf_file_path, history
+        yield 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
+        yield 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):
@@ -376,7 +408,7 @@ def generate_math_solution_together(api_key, problem_text, image_path=None, hist
         if history:
             for exchange in history:
                 messages.append({"role": "user", "content": exchange[0]})
-                if len(exchange) > 1 and exchange[1]:  # Check if there's a response
+                if len(exchange) > 1 and exchange[1]:
                     messages.append({"role": "assistant", "content": exchange[1]})
         
         # Prepare the user message content
@@ -412,6 +444,9 @@ def generate_math_solution_together(api_key, problem_text, image_path=None, hist
             "content": user_message_content
         })
         
+        # Show thinking animation
+        yield thinking_animation_html(), None, None, history
+        
         # Create the completion
         response = client.chat.completions.create(
             model="meta-llama/Llama-Vision-Free",
@@ -431,16 +466,16 @@ def generate_math_solution_together(api_key, problem_text, image_path=None, hist
         # Convert to PDF
         pdf_file_path = html_to_pdf(html_solution, "together_solution")
         
-        # Update history - for simplicity, just store the text problem
+        # Update history
         if history is None:
             history = []
         history.append((problem_display, markdown_solution))
         
-        return html_solution, html_file_path, pdf_file_path, history
+        yield 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
+        yield error_message, None, None, history
 
 # Function to convert image to base64
 def image_to_base64(image_path):
@@ -462,7 +497,7 @@ def create_demo():
         This application provides step-by-step solutions to math problems using advanced AI models.
         Solutions are generated in **HTML format** with download and print-to-PDF capabilities.
         Choose between OpenRouter's Phi-4-reasoning-plus for text-based problems or Together AI's 
-        Llama-Vision for problems with images.
+        Llama-Vision for problems with images. A thinking animation is shown while the solution is being generated.
         """)
         
         # Main tabs
@@ -513,17 +548,14 @@ def create_demo():
                 
                 # Button actions
                 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 outputs including file updates
-                    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)
-                    )
+                    for output in generate_math_solution_openrouter(api_key, problem_text, history):
+                        html_solution, html_file, pdf_file, updated_history = output
+                        yield (
+                            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,
@@ -595,17 +627,14 @@ def create_demo():
                 
                 # Button actions
                 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 outputs including file updates
-                    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)
-                    )
+                    for output in generate_math_solution_together(api_key, problem_text, image_path, history):
+                        html_solution, html_file, pdf_file, updated_history = output
+                        yield (
+                            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,
@@ -643,7 +672,8 @@ def create_demo():
                 ## How to Use the Advanced Math Tutor
                 
                 ### New Features 🎉
-                - **HTML-formatted solutions**: All responses are now generated in beautiful HTML format
+                - **Thinking Animation**: Displays a dynamic "Thinking..." animation while the solution is being generated
+                - **HTML-formatted solutions**: All responses are generated in beautiful HTML format
                 - **Download HTML**: Download the complete solution as an HTML file
                 - **Download PDF**: Convert and download solutions as PDF files
                 - **Print functionality**: Use the "Print to PDF" button in the HTML output to print directly
@@ -665,7 +695,7 @@ def create_demo():
                 ### Solving Math Problems
                 - For text problems: Type or paste your math problem in the input field
                 - For image problems: Upload a clear image of the math problem
-                - Click "Solve Problem" to get a detailed step-by-step solution in HTML format
+                - Click "Solve Problem" to see a thinking animation followed by a detailed step-by-step solution in HTML format
                 - Use the download buttons to save HTML or PDF versions
                 - Click "Print to PDF" within the solution to print directly from your browser
                 
@@ -675,6 +705,7 @@ def create_demo():
                 - **Step-by-step sections**: Clearly organized solution steps
                 - **Print-friendly**: Optimized for printing and PDF conversion
                 - **Timestamps**: Each solution includes generation timestamp
+                - **Thinking Animation**: Dynamic dots animation while processing
                 
                 ### Tips for Best Results
                 - Be specific in your problem description
@@ -708,6 +739,7 @@ def create_demo():
         and Llama-Vision-Free via Together AI for image-based problems. 
         
         **New Features:**
+        - Thinking animation during solution generation
         - HTML-formatted responses with professional styling
         - Download solutions as HTML files
         - Convert and download solutions as PDF files