Update app.py

app.py

@@ -8,6 +8,7 @@ import time
 from typing import List, Dict, Any, Optional
 import spaces
 import os
+import re
 
 # Global variables to store API key and document text
 API_KEY = ""
@@ -141,6 +142,24 @@ def process_document(file):
         print(f"Error: {error_msg}")  # Debug print
         return error_msg, "❌ No document loaded"
 
+def clean_html_response(content: str) -> str:
+    """Clean HTML response by removing markdown code blocks and fixing formatting"""
+    if not content:
+        return content
+    
+    # Remove ```html and ``` blocks
+    content = re.sub(r'```html\s*', '', content)
+    content = re.sub(r'```\s*$', '', content, flags=re.MULTILINE)
+    content = re.sub(r'```', '', content)
+    
+    # Remove any remaining markdown code block indicators
+    content = re.sub(r'^```.*?\n', '', content, flags=re.MULTILINE)
+    
+    # Clean up extra whitespace
+    content = re.sub(r'\n\s*\n\s*\n', '\n\n', content)
+    
+    return content.strip()
+
 def generate_content(prompt: str, max_tokens: int = 2000) -> str:
     """Generate content using the AI model"""
     global DOCUMENT_TEXT, API_KEY
@@ -169,7 +188,7 @@ def generate_content(prompt: str, max_tokens: int = 2000) -> str:
             messages=[
                 {
                     "role": "system",
-                    "content": "You are an expert educational content creator. Create comprehensive, engaging, and pedagogically sound educational materials based on the provided document content. Format your response using proper HTML tags for better presentation."
+                    "content": "You are an expert educational content creator. Create comprehensive, engaging, and pedagogically sound educational materials based on the provided document content. Format your response using proper HTML tags for better presentation. IMPORTANT: Do not wrap your response in ```html or ``` code blocks. Return clean HTML content only."
                 },
                 {
                     "role": "user",
@@ -182,7 +201,10 @@ def generate_content(prompt: str, max_tokens: int = 2000) -> str:
         
         result = completion.choices[0].message.content
         print(f"API response received. Length: {len(result) if result else 0}")  # Debug print
-        return result
+        
+        # Clean the HTML response
+        cleaned_result = clean_html_response(result)
+        return cleaned_result
         
     except Exception as e:
         error_msg = f"❌ Error generating content: {str(e)}"
@@ -316,20 +338,51 @@ def create_download_file(content: str, filename: str) -> str:
         </div>
         <script>
             function toggleCard(cardId) {{
+                console.log('Toggling card:', cardId);
                 const front = document.getElementById(cardId + '-front');
                 const back = document.getElementById(cardId + '-back');
                 const btn = document.getElementById(cardId + '-btn');
                 
-                if (front.style.display !== 'none') {{
-                    front.style.display = 'none';
-                    back.style.display = 'block';
-                    btn.innerHTML = '🔄';
+                if (front && back && btn) {{
+                    if (front.style.display !== 'none') {{
+                        front.style.display = 'none';
+                        back.style.display = 'block';
+                        btn.innerHTML = '🔄';
+                    }} else {{
+                        front.style.display = 'block';
+                        back.style.display = 'none';
+                        btn.innerHTML = '▶️';
+                    }}
                 }} else {{
-                    front.style.display = 'block';
-                    back.style.display = 'none';
-                    btn.innerHTML = '▶️';
+                    console.error('Could not find elements for card:', cardId);
                 }}
             }}
+            
+            // Alternative method - listen for clicks on flashcards
+            document.addEventListener('DOMContentLoaded', function() {{
+                const flashcards = document.querySelectorAll('.flashcard');
+                flashcards.forEach(function(card) {{
+                    card.addEventListener('click', function(e) {{
+                        e.preventDefault();
+                        const cardId = this.getAttribute('data-card-id');
+                        if (cardId) {{
+                            toggleCard(cardId);
+                        }}
+                    }});
+                }});
+                
+                // Also listen for button clicks
+                const playBtns = document.querySelectorAll('.play-btn');
+                playBtns.forEach(function(btn) {{
+                    btn.addEventListener('click', function(e) {{
+                        e.stopPropagation();
+                        const cardId = this.getAttribute('data-card-id');
+                        if (cardId) {{
+                            toggleCard(cardId);
+                        }}
+                    }});
+                }});
+            }});
         </script>
     </body>
     </html>
@@ -375,6 +428,8 @@ def generate_summary():
     <div class="concept-box">
     <p>Highlight the most crucial information students should remember.</p>
     </div>
+    
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt)
 
@@ -413,6 +468,8 @@ def generate_study_notes():
     <ul>
     <li>Essential facts and figures for rapid review</li>
     </ul>
+    
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt)
 
@@ -453,6 +510,7 @@ def generate_quiz():
     </div>
     
     Create 5 multiple choice, 5 short answer, and 2 essay questions.
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt, max_tokens=3000)
 
@@ -464,10 +522,10 @@ def generate_flashcards():
     Format each flashcard using this exact HTML structure:
     
     <h1>🎴 Interactive Flashcards</h1>
-    <p><em>Click the play button (▶️) on each card to reveal the answer!</em></p>
+    <p><em>Click on each card or the play button (▶️) to reveal the answer!</em></p>
     
-    <div class="flashcard" onclick="toggleCard('card1')">
-        <button class="play-btn" id="card1-btn">▶️</button>
+    <div class="flashcard" data-card-id="card1">
+        <button class="play-btn" data-card-id="card1" id="card1-btn">▶️</button>
         <div class="flashcard-front" id="card1-front">
             <h3>Card 1</h3>
             <p><strong>[Question/Term]</strong></p>
@@ -478,7 +536,11 @@ def generate_flashcards():
         </div>
     </div>
     
-    Continue this pattern for each flashcard, incrementing the card numbers (card2, card3, etc.).
+    Continue this pattern for each flashcard, ensuring:
+    - Each card has a unique data-card-id (card1, card2, card3, etc.)
+    - Button has matching data-card-id attribute
+    - Front and back divs have correct IDs (card1-front, card1-back, etc.)
+    - Button has correct ID (card1-btn, card2-btn, etc.)
     
     Include flashcards for:
     - Key terms and definitions
@@ -488,6 +550,7 @@ def generate_flashcards():
     - Applications and examples
     
     Make questions clear and answers comprehensive but concise. Use proper HTML formatting throughout.
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt, max_tokens=2500)
 
@@ -533,6 +596,8 @@ def generate_mind_map():
     <li>Symbol suggestions for different types of information</li>
     <li>Emphasis techniques for key concepts</li>
     </ul>
+    
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt)
 
@@ -598,6 +663,8 @@ def generate_lesson_plan():
     <ul>
     <li>Additional practice opportunities</li>
     </ul>
+    
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt, max_tokens=2500)
 
@@ -630,6 +697,7 @@ def generate_concept_explanations():
     <hr>
     
     Repeat this structure for all major concepts in the document using proper HTML formatting.
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt, max_tokens=3000)
 
@@ -683,6 +751,7 @@ def generate_practice_problems():
     - Common mistakes to avoid
     
     Create 5 beginner, 5 intermediate, 3 advanced, and 2 challenge problems.
+    Remember: Return only clean HTML content without code block markers.
     """
     return generate_content(prompt, max_tokens=3500)