Upload flow_module.py with huggingface_hub

flow_module.py

@@ -1,13 +1,13 @@
 def generate_flow_html(active_phase="idle"):
     """
     Generates animated SVG for the MVM² Architecture Flow.
-    Phases: 'idle', 'enhance', 'ocr', 'reasoning', 'verification', 'consensus', 'success'
+    Phases: 'idle', 'enhance', 'ocr', 'reasoning', 'heuristics', 'verification', 'consensus', 'success'
     """
     
     # Define colors
     bg_color = "#1e293b"
-    accent = "#6366f1"
-    success = "#10b981"
+    accent = "#e63946" # Red to match local dashboard theme
+    success = "#16a34a"
     text = "#94a3b8"
     
     # Pulse animation logic
@@ -15,23 +15,26 @@ def generate_flow_html(active_phase="idle"):
         return 'active-pulse' if active_phase == phase else ''
 
     def get_node_style(phase):
-        if active_phase == 'success': return 'stroke: #10b981; filter: drop-shadow(0 0 8px #10b981);'
+        if active_phase == 'success': return f'stroke: {success}; filter: drop-shadow(0 0 8px {success});'
         if active_phase == phase: return f'stroke: {accent}; filter: drop-shadow(0 0 8px {accent});'
         return 'stroke: rgba(255,255,255,0.1);'
 
     html = f"""
-    <div class="glass-card" style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative;">
+    <div style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; background: rgba(30, 30, 30, 0.6); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05);">
         <svg width="800" height="350" viewBox="0 0 800 350" preserveAspectRatio="xMidYMid meet">
             <!-- Definitions for markers and gradients -->
             <defs>
                 <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                     <polygon points="0 0, 10 3.5, 0 7" fill="{text}" />
                 </marker>
-                <linearGradient id="pulse-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-                    <stop offset="0%" stop-color="transparent" />
-                    <stop offset="50%" stop-color="{accent}" />
-                    <stop offset="100%" stop-color="transparent" />
-                </linearGradient>
+                <style>
+                    .flow-line {{ stroke-dasharray: 1000; stroke-dashoffset: 1000; }}
+                    .active-pulse {{ stroke-dashoffset: 0; animation: pulse-flow 2s infinite linear; stroke: {accent} !important; opacity: 1; }}
+                    @keyframes pulse-flow {{ 0% {{ stroke-dashoffset: 1000; opacity: 0.3; }} 50% {{ opacity: 1; }} 100% {{ stroke-dashoffset: 0; opacity: 0.3; }} }}
+                    .thinking circle {{ animation: thinking-pulse 1.5s infinite ease-in-out; }}
+                    @keyframes thinking-pulse {{ 0%, 100% {{ transform: scale(1); opacity: 0.8; }} 50% {{ transform: scale(1.1); opacity: 1; filter: brightness(1.2); }} }}
+                    .thinking {{ transform-origin: 450px 175px; }}
+                </style>
             </defs>
 
             <!-- CONNECTIONS -->
@@ -42,10 +45,13 @@ def generate_flow_html(active_phase="idle"):
             <path d="M300 175 H400" class="flow-line {get_pulse('ocr')}" stroke="{text}" stroke-width="2" marker-end="url(#arrowhead)" />
             
             <!-- Reasoning to Consensus (4 Parallel) -->
-            <path d="M500 100 Q 550 175 600 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
-            <path d="M500 150 Q 550 175 600 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
-            <path d="M500 200 Q 550 175 600 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
-            <path d="M500 250 Q 550 175 600 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
+            <path d="M500 100 Q 525 100 550 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
+            <path d="M500 150 Q 525 150 550 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
+            <path d="M500 200 Q 525 200 550 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
+            <path d="M500 250 Q 525 250 550 175" class="flow-line {get_pulse('reasoning')}" stroke="{text}" stroke-width="1.5" />
+
+            <!-- Heuristics to Consensus -->
+            <path d="M600 175 H640" class="flow-line {get_pulse('heuristics')}" stroke="{accent}" stroke-width="2" marker-end="url(#arrowhead)" />
 
             <!-- Symbolic Bridge -->
             <path d="M450 300 Q 450 250 450 250" class="flow-line {get_pulse('verification')}" stroke="{success}" stroke-width="3" stroke-dasharray="5,5" />
@@ -53,11 +59,11 @@ def generate_flow_html(active_phase="idle"):
             <!-- NODES -->
             <!-- 1. Input/Enhance -->
             <rect x="20" y="140" width="80" height="70" rx="10" fill="{bg_color}" style="{get_node_style('enhance')}" />
-            <text x="60" y="180" text-anchor="middle" fill="white" font-size="12">ENHANCE</text>
+            <text x="60" y="180" text-anchor="middle" fill="white" font-size="10" font-weight="600">ENHANCE</text>
             
             <!-- 2. OCR Module -->
             <circle cx="250" cy="175" r="45" fill="{bg_color}" style="{get_node_style('ocr')}" />
-            <text x="250" y="180" text-anchor="middle" fill="white" font-size="12">OCR</text>
+            <text x="250" y="180" text-anchor="middle" fill="white" font-size="10" font-weight="600">OCR</text>
 
             <!-- 3. Reasoning Agents (Parallel) -->
             <g class="{'thinking' if active_phase == 'reasoning' else ''}">
@@ -68,13 +74,17 @@ def generate_flow_html(active_phase="idle"):
                 <text x="450" y="45" text-anchor="middle" fill="{text}" font-size="10">REASONING</text>
             </g>
 
-            <!-- 4. Verification Bridge (SymPy) -->
+            <!-- 4. Heuristics Module -->
+            <rect x="550" y="150" width="50" height="50" rx="5" fill="{bg_color}" style="{get_node_style('heuristics')}" />
+            <text x="575" y="180" text-anchor="middle" fill="white" font-size="8" font-weight="600">FILTER</text>
+            
+            <!-- 5. Verification Bridge (SymPy) -->
             <rect x="400" y="300" width="100" height="40" rx="5" fill="{bg_color}" style="{get_node_style('verification')}" />
             <text x="450" y="325" text-anchor="middle" fill="{success}" font-size="10" font-weight="bold">SYMPY CORE</text>
 
-            <!-- 5. Consensus -->
+            <!-- 6. Consensus -->
             <polygon points="650,125 750,175 650,225" fill="{bg_color}" style="{get_node_style('consensus')}" />
-            <text x="680" y="180" text-anchor="middle" fill="white" font-size="12">CONSENSUS</text>
+            <text x="680" y="180" text-anchor="middle" fill="white" font-size="10" font-weight="600">CONSENSUS</text>
         </svg>
         
         <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.8em; color: {text};">