Update hf_demo.py

hf_demo.py

@@ -1,9 +1,5 @@
-# ARF 3.3.9 DEMO WITH FIXED HTML RENDERING BUGS
-# CRITICAL FIXES APPLIED:
-# 1. All HTML content now uses gr.HTML() instead of gr.Markdown()
-# 2. Proper Gradio container nesting
-# 3. Fixed CSS class conflicts
-# 4. Enhanced mobile responsiveness
+# COMPLETE FIXED hf_demo.py with all syntax errors resolved
+# ARF 3.3.9 DEMO WITH FIXED HTML RENDERING AND SYNTAX ERRORS
 
 import gradio as gr
 import time
@@ -125,7 +121,7 @@ def detect_unified_arf() -> Dict[str, Any]:
         'enterprise_ready': True
     }
 
-# Get unified ARF status (SINGLE SOURCE OF TRUTH)
+# Get unified ARF status
 ARF_UNIFIED_STATUS = detect_unified_arf()
 
 print(f"\n{'='*80}")
@@ -140,25 +136,10 @@ print(f"{'='*80}\n")
 arf_engine = EnhancedARFEngine()
 psychology_engine = EnhancedPsychologyEngine()
 
-# ============== ENHANCED CSS WITH FIXED CLASSES ==============
+# ============== ENHANCED CSS ==============
 ENHANCED_CSS = """
-:root {
-    /* Mathematical Color Psychology */
-    --mathematical-blue: #2196F3;
-    --mathematical-green: #4CAF50;
-    --mathematical-orange: #FF9800;
-    --mathematical-red: #F44336;
-    --mathematical-purple: #9C27B0;
-}
-
-/* FIXED: Mathematical Badges with proper HTML rendering */
 .arf-real-badge {
-    background: linear-gradient(135deg, 
-        #4CAF50 0%,
-        #2E7D32 25%,
-        #1B5E20 50%,
-        #0D47A1 100%
-    );
+    background: linear-gradient(135deg, #4CAF50, #2E7D32, #1B5E20, #0D47A1);
     color: white;
     padding: 10px 22px;
     border-radius: 25px;
@@ -174,12 +155,7 @@ ENHANCED_CSS = """
 }
 
 .arf-sim-badge {
-    background: linear-gradient(135deg,
-        #FF9800 0%,
-        #F57C00 25%,
-        #E65100 50%,
-        #BF360C 100%
-    );
+    background: linear-gradient(135deg, #FF9800, #F57C00, #E65100, #BF360C);
     color: white;
     padding: 10px 22px;
     border-radius: 25px;
@@ -194,21 +170,11 @@ ENHANCED_CSS = """
 }
 
 @keyframes pulse-mathematical {
-    0% { 
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7),
-                    0 6px 20px rgba(76, 175, 80, 0.4); 
-    }
-    70% { 
-        box-shadow: 0 0 0 15px rgba(76, 175, 80, 0),
-                    0 6px 20px rgba(76, 175, 80, 0.4); 
-    }
-    100% { 
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0),
-                    0 6px 20px rgba(76, 175, 80, 0.4); 
-    }
+    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7), 0 6px 20px rgba(76, 175, 80, 0.4); }
+    70% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0), 0 6px 20px rgba(76, 175, 80, 0.4); }
+    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0), 0 6px 20px rgba(76, 175, 80, 0.4); }
 }
 
-/* FIXED: Mathematical Gate Visualization */
 .mathematical-gate {
     width: 70px;
     height: 70px;
@@ -225,19 +191,9 @@ ENHANCED_CSS = """
     transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.gate-passed {
-    background: linear-gradient(135deg, #4CAF50, #2E7D32);
-    animation: gate-success-mathematical 0.7s ease-out;
-}
-
-.gate-failed {
-    background: linear-gradient(135deg, #F44336, #D32F2F);
-    animation: gate-fail-mathematical 0.7s ease-out;
-}
-
-.gate-pending {
-    background: linear-gradient(135deg, #9E9E9E, #616161);
-}
+.gate-passed { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
+.gate-failed { background: linear-gradient(135deg, #F44336, #D32F2F); }
+.gate-pending { background: linear-gradient(135deg, #9E9E9E, #616161); }
 
 .gate-container {
     display: flex;
@@ -255,7 +211,6 @@ ENHANCED_CSS = """
     border-radius: 2px;
 }
 
-/* FIXED: Mathematical Cards */
 .mathematical-card {
     border-radius: 15px;
     padding: 25px;
@@ -283,48 +238,18 @@ ENHANCED_CSS = """
     background: linear-gradient(145deg, #FFF8E1, #FFFFFF);
 }
 
-/* FIXED: Responsive Design */
 @media (max-width: 768px) {
-    .gradio-container {
-        padding: 10px !important;
-    }
-    
-    .arf-real-badge, .arf-sim-badge {
-        padding: 6px 14px;
-        font-size: 12px;
-    }
-    
-    .mathematical-gate {
-        width: 50px;
-        height: 50px;
-        font-size: 18px;
-    }
-    
-    .gate-line {
-        width: 20px;
-    }
-    
-    .mathematical-card {
-        padding: 15px;
-        margin: 10px 0;
-    }
+    .gradio-container { padding: 10px !important; }
+    .arf-real-badge, .arf-sim-badge { padding: 6px 14px; font-size: 12px; }
+    .mathematical-gate { width: 50px; height: 50px; font-size: 18px; }
+    .gate-line { width: 20px; }
+    .mathematical-card { padding: 15px; margin: 10px 0; }
 }
 
 @media (max-width: 480px) {
-    .gradio-container {
-        padding: 5px !important;
-    }
-    
-    .arf-real-badge, .arf-sim-badge {
-        padding: 4px 10px;
-        font-size: 11px;
-    }
-    
-    .mathematical-gate {
-        width: 40px;
-        height: 40px;
-        font-size: 16px;
-    }
+    .gradio-container { padding: 5px !important; }
+    .arf-real-badge, .arf-sim-badge { padding: 4px 10px; font-size: 11px; }
+    .mathematical-gate { width: 40px; height: 40px; font-size: 16px; }
 }
 """
 
@@ -430,7 +355,7 @@ class EnhancedDemoState:
 # Initialize demo state
 demo_state = EnhancedDemoState(ARF_UNIFIED_STATUS)
 
-# ============== GRADIO INTERFACE WITH FIXED HTML RENDERING ==============
+# ============== GRADIO INTERFACE ==============
 def create_enhanced_demo():
     """Create enhanced demo with fixed HTML rendering bugs"""
     
@@ -440,14 +365,11 @@ def create_enhanced_demo():
     
     with gr.Blocks(
         title=f"ARF {ARF_UNIFIED_STATUS['version']} - Mathematical Sophistication",
-        theme=gr.themes.Soft(
-            primary_hue="blue",
-            secondary_hue="orange"
-        ),
+        theme=gr.themes.Soft(primary_hue="blue", secondary_hue="orange"),
         css=ENHANCED_CSS
     ) as demo:
         
-        # ===== FIXED: HEADER USING gr.HTML() =====
+        # ===== HEADER =====
         gr.HTML(f"""
         <div style="background: linear-gradient(135deg, #0D47A1, #1565C0); color: white; padding: 30px; border-radius: 15px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(13, 71, 161, 0.4); position: relative; overflow: hidden;">
             <div style="position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);"></div>
@@ -477,7 +399,7 @@ def create_enhanced_demo():
         </div>
         """)
         
-        # ===== FIXED: METRICS WITH PROPER CONTAINERS =====
+        # ===== METRICS =====
         with gr.Row():
             metrics = [
                 ("92%", "Incident Prevention", "Bayesian confidence: 95%", "#4CAF50", "📊"),
@@ -499,7 +421,7 @@ def create_enhanced_demo():
                     </div>
                     """)
         
-        # ===== FIXED: SECTION HEADERS =====
+        # ===== SECTION HEADER =====
         gr.HTML("""
         <div style="margin: 30px 0 20px 0;">
             <h2 style="font-size: 1.8em; color: #0D47A1; margin-bottom: 10px;">🧮 Mathematical Execution Authority Demo</h2>
@@ -540,7 +462,7 @@ def create_enhanced_demo():
                     test_btn = gr.Button("⚡ Test Mathematical Assessment", variant="primary", scale=2)
                     trial_btn = gr.Button("🎁 Generate Mathematical Trial", variant="secondary", scale=1)
             
-            # ===== FIXED: LICENSE DISPLAY =====
+            # ===== LICENSE DISPLAY =====
             with gr.Column(scale=1):
                 license_display = gr.HTML(f"""
                 <div class="mathematical-card license-oss">
@@ -565,7 +487,7 @@ def create_enhanced_demo():
                 </div>
                 """)
         
-        # ===== FIXED: RESULTS PANELS =====
+        # ===== RESULTS PANELS =====
         with gr.Row():
             with gr.Column(scale=1):
                 oss_results = gr.HTML("""
@@ -829,10 +751,9 @@ def create_enhanced_demo():
             gates_visualization = ""
             for i in range(total_gates):
                 gate_class = "gate-passed" if i < gates_passed else "gate-failed"
-                gates_visualization += f"""
-                <div class="mathematical-gate {gate_class}">{i+1}</div>
-                {'<div class="gate-line"></div>' if i < total_gates-1 else ''}
-                """
+                gates_visualization += f'<div class="mathematical-gate {gate_class}">{i+1}</div>'
+                if i < total_gates - 1:
+                    gates_visualization += '<div class="gate-line"></div>'
             
             gates_html = f"""
             <div style="font-size: 14px; color: #666; margin-bottom: 15px; font-weight: 600;">
@@ -931,8 +852,8 @@ def create_enhanced_demo():
             </div>
             """
             
-            # History
-            history_rows = ""
+            # Build history rows
+            history_rows_html = ""
             for entry in demo_state.action_history:
                 risk_text = format_mathematical_risk(entry['risk_score'])
                 confidence_text = f"{entry.get('confidence', 0.8):.0%}"
@@ -947,7 +868,7 @@ def create_enhanced_demo():
                     "BLOCKED": "❌"
                 }.get(entry['gate_decision'], "⚡")
                 
-                history_rows += f"""
+                history_rows_html += f'''
                 <tr>
                     <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['time']}</td>
                     <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['action'][:35]}...</td>
@@ -958,35 +879,42 @@ def create_enhanced_demo():
                     <td style="padding: 12px; border-bottom: 1px solid #eee; font-size: 16px;">{decision_emoji}</td>
                     <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: center; font-size: 16px;">{arf_emoji}</td>
                 </tr>
+                '''
+            
+            # Build history table
+            if history_rows_html:
+                history_table = f"""
+                <table style="width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px;">
+                    <thead>
+                        <tr style="background: #f5f5f5;">
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Time</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Action</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Risk</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Confidence</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">License</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Gates</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Decision</th>
+                            <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">ARF</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {history_rows_html}
+                    </tbody>
+                </table>
+                """
+            else:
+                history_table = """
+                <div style="text-align: center; padding: 40px; color: #999; font-style: italic;">
+                    No mathematical assessments yet. Test an action to see Bayesian analysis in action.
+                </div>
                 """
             
+            # Final history HTML
             history_html = f"""
             <div style="border: 1px solid #E0E0E0; border-radius: 15px; padding: 20px; background: #fafafa; box-shadow: 0 8px 30px rgba(0,0,0,0.08); margin-top: 20px;">
                 <h4 style="margin-top: 0; margin-bottom: 15px; color: #333;">📊 Mathematical Action History</h4>
                 <div style="overflow-x: auto;">
-                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px;">
-                        <thead>
-                            <tr style="background: #f5f5f5;">
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Time</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Action</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Risk</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Confidence</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">License</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Gates</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Decision</th>
-                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">ARF</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {history_rows if history_rows else """
-                            <tr>
-                                <td colspan="8" style="text-align: center; padding: 40px; color: #999; font-style: italic;">
-                                    No mathematical assessments yet. Test an action to see Bayesian analysis in action.
-                                </td>
-                            </tr>
-                            """}
-                        </tbody>
-                    </table>
+                    {history_table}
                 </div>
             </div>
             """