Simplify content styling to fix HTML rendering issues

- Remove complex regex patterns that were causing malformed HTML
- Use simple, robust styling approach that won't break
- Keep only essential styling: answer boxes, fill-in-blanks, checkboxes, rating scales
- Remove problematic header and list styling that was causing conflicts
- This should fix the issue where CSS attributes were showing as literal text
- Content should now render properly in Gradio HTML component

app.py

@@ -1862,15 +1862,18 @@ def convert_math_to_html(text):
     return text
 
 def apply_content_styling(content, content_type):
-    """Apply comprehensive styling to educational content"""
+    """Apply simple and robust styling to educational content"""
     import re
     
-    # First, clean up any existing malformed HTML
+    # Clean up any malformed HTML first
     content = re.sub(r'="[^"]*style="[^"]*"[^"]*"', '', content)
     content = re.sub(r'="[^"]*color: [^"]*"[^"]*"', '', content)
     content = re.sub(r'="[^"]*background: [^"]*"[^"]*"', '', content)
+    content = re.sub(r'="[^"]*border: [^"]*"[^"]*"', '', content)
+    content = re.sub(r'="[^"]*padding: [^"]*"[^"]*"', '', content)
+    content = re.sub(r'="[^"]*margin: [^"]*"[^"]*"', '', content)
     
-    # Wrap the entire content in a styled container
+    # Simple styling approach - just wrap in a clean container
     styled_content = f"""
     <div style="
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -1887,43 +1890,16 @@ def apply_content_styling(content, content_type):
     </div>
     """
     
-    # Style headers - be more specific to avoid conflicts
-    styled_content = re.sub(r'^# ([^<\n]+)$', r'<h1 style="color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; margin-bottom: 20px; font-size: 2.2em;">\1</h1>', styled_content, flags=re.MULTILINE)
-    styled_content = re.sub(r'^## ([^<\n]+)$', r'<h2 style="color: #34495e; margin-top: 30px; margin-bottom: 15px; font-size: 1.8em; border-left: 4px solid #3498db; padding-left: 15px;">\1</h2>', styled_content, flags=re.MULTILINE)
-    styled_content = re.sub(r'^### ([^<\n]+)$', r'<h3 style="color: #2c3e50; margin-top: 25px; margin-bottom: 12px; font-size: 1.4em;">\1</h3>', styled_content, flags=re.MULTILINE)
-    
-    # Style bold text - simple approach
-    styled_content = re.sub(r'\*\*([^*]+?)\*\*', r'<strong style="color: #2c3e50; font-weight: 600;">\1</strong>', styled_content)
-    
-    # Style answer boxes
+    # Only apply basic styling that won't break
     styled_content = re.sub(r'\[ANSWER: ([^\]]+)\]', r'<span style="background: #e8f4fd; border: 2px solid #3498db; padding: 4px 8px; border-radius: 4px; font-weight: bold; color: #2c3e50;">[ANSWER: \1]</span>', styled_content)
     
-    # Style fill-in-blank spaces
     styled_content = re.sub(r'___+', r'<span style="border-bottom: 2px solid #3498db; min-width: 40px; display: inline-block; margin: 0 5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>', styled_content)
     
-    # Style checkboxes
     styled_content = re.sub(r'\[ \]', r'<input type="checkbox" style="margin-right: 8px; transform: scale(1.2);">', styled_content)
     styled_content = re.sub(r'☐', r'<input type="checkbox" style="margin-right: 8px; transform: scale(1.2);">', styled_content)
     styled_content = re.sub(r'☑', r'<input type="checkbox" checked style="margin-right: 8px; transform: scale(1.2);">', styled_content)
     
-    # Style rating scales - simple approach
-    styled_content = re.sub(r'\[(\d+)\]', r'<span style="background: #ecf0f1; border: 1px solid #bdc3c7; padding: 5px 10px; margin: 0 2px; border-radius: 4px; cursor: pointer; transition: all 0.2s;">\1</span>', styled_content)
-    
-    # Style lists - be more careful
-    styled_content = re.sub(r'^- ([^<\n]+)$', r'<li style="margin-bottom: 8px; padding-left: 10px;">\1</li>', styled_content, flags=re.MULTILINE)
-    styled_content = re.sub(r'^(\d+)\. ([^<\n]+)$', r'<li style="margin-bottom: 8px; padding-left: 10px; list-style-type: decimal;">\2</li>', styled_content, flags=re.MULTILINE)
-    
-    # Style horizontal rules
-    styled_content = re.sub(r'^---$', r'<hr style="border: none; height: 2px; background: linear-gradient(to right, #3498db, #2ecc71); margin: 30px 0;">', styled_content, flags=re.MULTILINE)
-    
-    # Style interactive elements
-    styled_content = re.sub(r'\[INTERACTIVE: ([^\]]+)\]', r'<div style="background: #f8f9fa; border: 2px dashed #3498db; padding: 15px; margin: 15px 0; border-radius: 8px; text-align: center; color: #7f8c8d; font-style: italic;">🎮 INTERACTIVE: \1</div>', styled_content)
-    
-    # Style media elements
-    styled_content = re.sub(r'\[MEDIA: ([^\]]+)\]', r'<div style="background: #e8f5e8; border: 2px solid #27ae60; padding: 15px; margin: 15px 0; border-radius: 8px; text-align: center; color: #27ae60; font-weight: bold;">🎥 MEDIA: \1</div>', styled_content)
-    
-    # Style math expressions - be more specific
-    styled_content = re.sub(r'([A-Za-z]+ = [^<\n=]+)(?![^<]*>)', r'<div style="background: #f8f9fa; border-left: 4px solid #e74c3c; padding: 10px 15px; margin: 10px 0; font-family: \'Courier New\', monospace; font-size: 1.1em; color: #2c3e50;">\1</div>', styled_content)
+    styled_content = re.sub(r'\[(\d+)\]', r'<span style="background: #ecf0f1; border: 1px solid #bdc3c7; padding: 5px 10px; margin: 0 2px; border-radius: 4px; cursor: pointer;">\1</span>', styled_content)
     
     return styled_content