flow_module.py

def generate_flow_html(active_phase="idle"):
    """
    Generates animated SVG for the MVM² Architecture Flow.
    Phases: 'idle', 'enhance', 'ocr', 'reasoning', 'verification', 'consensus', 'success'
    """
    
    # Define colors
    bg_color = "#1e293b"
    accent = "#6366f1"
    success = "#10b981"
    text = "#94a3b8"
    
    # Pulse animation logic
    def get_pulse(phase):
        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 == 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;">
        <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>
            </defs>

            <!-- CONNECTIONS -->
            <!-- Enhance to OCR -->
            <path d="M100 175 H200" class="flow-line {get_pulse('enhance')}" stroke="{text}" stroke-width="2" marker-end="url(#arrowhead)" />
            
            <!-- OCR to Reasoning -->
            <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" />

            <!-- 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" />

            <!-- 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>
            
            <!-- 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>

            <!-- 3. Reasoning Agents (Parallel) -->
            <g class="{'thinking' if active_phase == 'reasoning' else ''}">
                <circle cx="450" cy="80" r="25" fill="{bg_color}" style="{get_node_style('reasoning')}" />
                <circle cx="450" cy="140" r="25" fill="{bg_color}" style="{get_node_style('reasoning')}" />
                <circle cx="450" cy="200" r="25" fill="{bg_color}" style="{get_node_style('reasoning')}" />
                <circle cx="450" cy="260" r="25" fill="{bg_color}" style="{get_node_style('reasoning')}" />
                <text x="450" y="45" text-anchor="middle" fill="{text}" font-size="10">REASONING</text>
            </g>

            <!-- 4. 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 -->
            <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>
        </svg>
        
        <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.8em; color: {text};">
            Current Stage: <span style="color: {accent if active_phase != 'success' else success}; font-weight: bold; text-transform: uppercase;">{active_phase}</span>
        </div>
    </div>
    """
    return html