Spaces:

SRVCP
/

pharmaagent

Running

File size: 39,502 Bytes

bc1bb5c

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pharmaceutical AI Agent - Visual Architecture Flows</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header p {
            color: #7f8c8d;
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto;
        }

        .navigation {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }

        .nav-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .nav-btn.active {
            background: linear-gradient(45deg, #2c3e50, #34495e);
            transform: translateY(-2px);
        }

        .flow-section {
            display: none;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .flow-section.active {
            display: block;
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .flow-title {
            color: #2c3e50;
            font-size: 2em;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }

        .flow-description {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            border-left: 5px solid #667eea;
        }

        .flow-description h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 1.3em;
        }

        .flow-description ul {
            margin-left: 20px;
        }

        .flow-description li {
            margin-bottom: 5px;
            color: #555;
        }

        .mermaid-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
        }

        .key-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .feature-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .feature-card h4 {
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .feature-card p {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .footer {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .footer h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .footer p {
            color: #7f8c8d;
            max-width: 600px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .navigation {
                flex-direction: column;
                align-items: center;
            }
            
            .nav-btn {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>🧬 Pharmaceutical AI Agent</h1>
            <p>Comprehensive Visual Architecture Flows for Medical Affairs Research System</p>
        </div>

        <!-- Navigation -->
        <div class="navigation">
            <button class="nav-btn active" onclick="showFlow('complete')">🔄 Complete System Flow</button>
            <button class="nav-btn" onclick="showFlow('user')">👤 User Journey Flow</button>
            <button class="nav-btn" onclick="showFlow('technical')">⚙️ Technical Architecture</button>
            <button class="nav-btn" onclick="showFlow('data')">📊 Data Flow Diagram</button>
        </div>

        <!-- Complete System Flow -->
        <div id="complete" class="flow-section active">
            <h2 class="flow-title">🔄 Complete System Flow</h2>
            <div class="flow-description">
                <h3>📋 Overview</h3>
                <p>This comprehensive diagram shows the complete end-to-end journey from user input to final report delivery, including all system components and their interactions.</p>
                <ul>
                    <li><strong>User Interface Steps:</strong> Molecule selection → Indication discovery → Country selection</li>
                    <li><strong>Backend Processing:</strong> Multi-agent analysis → Independent sections → Quality assurance</li>
                    <li><strong>Technical Infrastructure:</strong> Session management → LLM integration → Storage systems</li>
                    <li><strong>Quality Control:</strong> Citation verification → Medical review → Compliance checks</li>
                </ul>
            </div>
            <div class="mermaid-container">
                <div class="mermaid">
graph TD
    %% User Interface Layer
    A[User Login] --> B[New Analysis Dashboard]
    B --> C[Molecule Selection]
    
    %% Step 1: Molecule Selection
    C --> D{Select Data Source}
    D -->|GBQ Database| E[GBQ Molecule Search]
    D -->|DailyMed FDA| F[FDA Label Search]
    E --> G[Molecule: Empagliflozin Selected]
    F --> G
    
    %% Step 2: Indication Discovery
    G --> H[AI Discovers Related Indications]
    H --> I[User Selects Indications]
    I --> J["Selected: Type 2 Diabetes<br/>Heart Failure<br/>Chronic Kidney Disease"]
    
    %% Step 3: Drug Class & Product Comparison
    J --> K[AI Suggests Comparisons]
    K --> L[Drug Class Comparison]
    K --> M[Product Comparison]
    L --> N["GLP-1 Agonists<br/>SGLT2 Inhibitors<br/>DPP4 Inhibitors"]
    M --> O["Dapagliflozin<br/>Canagliflozin<br/>Ertugliflozin"]
    
    %% Step 4: Multi-Country Guidelines
    N --> P[Select Countries]
    O --> P
    P --> Q["United States: ADA Guidelines<br/>Europe: ESC Guidelines<br/>China: CDS Guidelines<br/>India: RSSDI Guidelines<br/>Russia: RDA Guidelines"]
    
    %% Step 5: Clinical Studies
    Q --> R[AI Discovers Clinical Studies]
    R --> S["Study 1: EMPA-REG OUTCOME<br/>Study 2: CANVAS Program<br/>Study 3: CREDENCE<br/>Study 4: EMPEROR-Reduced<br/>Study 5: DAPA-HF<br/>Study 6: VERTIS CV"]
    
    %% Step 6: Document Corpus Formation
    S --> T[Document Corpus Created]
    T --> U["Total Documents: 247<br/>Data Size: 2.8 GB<br/>Processing Time: 45 min"]
    
    %% Backend Processing Architecture
    U --> V[Long-Running Session Created]
    V --> W[Background Processing Starts]
    
    %% Document Processing Pipeline
    W --> X[Multi-Method Document Processing]
    X --> Y[OCR Extraction]
    X --> Z[Vision LLM Analysis]
    X --> AA[PDF Structure Parsing]
    X --> BB[Table Extraction]
    
    Y --> CC[Consensus Validation]
    Z --> CC
    AA --> CC
    BB --> CC
    
    %% Multi-Agent Analysis
    CC --> DD[6 Specialized Agents Activated]
    
    %% Track A - Clinical Focus
    DD --> EE[Track A: Clinical Analysis]
    EE --> FF[Efficacy Analysis Agent]
    EE --> GG[Safety Profile Agent]
    EE --> HH[Clinical Evidence Agent]
    
    %% Track B - Strategic Focus
    DD --> II[Track B: Strategic Analysis]
    II --> JJ[Competitive Landscape Agent]
    II --> KK[Regulatory Guidelines Agent]
    II --> LL[Market Access Agent]
    
    %% LLM Processing
    FF --> MM[Claude Opus<br/>Medical Reasoning]
    GG --> NN[Claude Opus<br/>Safety Analysis]
    HH --> OO[Claude Sonnet<br/>Evidence Synthesis]
    JJ --> PP[GPT-4<br/>Competitive Analysis]
    KK --> QQ[Claude Sonnet<br/>Regulatory Review]
    LL --> RR[Gemini Pro<br/>Market Analysis]
    
    %% Independent Section Generation
    MM --> SS[Independent Section: Efficacy]
    NN --> TT[Independent Section: Safety]
    OO --> UU[Independent Section: Evidence]
    PP --> VV[Independent Section: Competitive]
    QQ --> WW[Independent Section: Regulatory]
    RR --> XX[Independent Section: Market Access]
    
    %% Cross-Validation
    SS --> YY[Cross-Track Validation]
    TT --> YY
    UU --> YY
    VV --> YY
    WW --> YY
    XX --> YY
    
    %% Citation Verification
    YY --> ZZ[Citation Integrity Check]
    ZZ --> AAA[99% Citation Accuracy Verified]
    
    %% Report Stitching
    AAA --> BBB[Intelligent Report Stitching]
    BBB --> CCC[Consistency Check]
    BBB --> DDD[Transition Generation]
    BBB --> EEE[Executive Summary Creation]
    
    CCC --> FFF[Final Report Assembly]
    DDD --> FFF
    EEE --> FFF
    
    %% Quality Assurance
    FFF --> GGG[Quality Assurance System]
    GGG --> HHH[Medical Accuracy Review]
    GGG --> III[Regulatory Compliance Check]
    GGG --> JJJ[Statistical Validation]
    GGG --> KKK[Language Quality Check]
    
    HHH --> LLL{QA Score > 90%?}
    III --> LLL
    JJJ --> LLL
    KKK --> LLL
    
    LLL -->|No| MMM[Human Expert Review]
    LLL -->|Yes| NNN[Report Ready for Delivery]
    MMM --> NNN
    
    %% Final Delivery
    NNN --> OOO[Multi-Format Report Generation]
    OOO --> PPP[PDF Report]
    OOO --> QQQ[Excel Data Tables]
    OOO --> RRR[Interactive Dashboard]
    
    %% User Notification
    PPP --> SSS[User Notification]
    QQQ --> SSS
    RRR --> SSS
    SSS --> TTT[Analysis Complete<br/>Ready for Download]
    
    %% Progress Tracking (Parallel Process)
    V --> UUU[Real-Time Progress Tracking]
    UUU --> VVV["Progress: 0% - Initialization<br/>Progress: 25% - Document Collection<br/>Progress: 50% - Processing<br/>Progress: 75% - Analysis<br/>Progress: 100% - Complete"]
    
    %% Error Handling & Recovery
    W --> WWW[Session Monitoring]
    WWW --> XXX{Session Healthy?}
    XXX -->|No| YYY[Auto-Recovery]
    XXX -->|Yes| ZZZ[Continue Processing]
    YYY --> ZZZ
    
    %% Data Storage Architecture
    T --> AAAA[Distributed Storage]
    AAAA --> BBBB[Redis: Session Metadata]
    AAAA --> CCCC[PostgreSQL: Persistence]
    AAAA --> DDDD[MinIO: Large Documents]
    
    %% Styling
    classDef userInterface fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef dataSource fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef processing fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
    classDef aiAgent fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef llmModel fill:#fce4ec,stroke:#880e4f,stroke-width:2px
    classDef quality fill:#f1f8e9,stroke:#33691e,stroke-width:2px
    classDef storage fill:#e3f2fd,stroke:#0d47a1,stroke-width:2px
    classDef output fill:#f9fbe7,stroke:#827717,stroke-width:2px
    
    class A,B,C,I,P userInterface
    class D,E,F,G dataSource
    class X,Y,Z,AA,BB,CC,W processing
    class FF,GG,HH,JJ,KK,LL,DD,EE,II aiAgent
    class MM,NN,OO,PP,QQ,RR llmModel
    class GGG,HHH,III,JJJ,KKK,LLL,MMM quality
    class AAAA,BBBB,CCCC,DDDD storage
    class PPP,QQQ,RRR,TTT output
                </div>
            </div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">247</div>
                    <div class="stat-label">Documents Processed</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">2.8GB</div>
                    <div class="stat-label">Data Volume</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">6</div>
                    <div class="stat-label">Specialized Agents</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">99%</div>
                    <div class="stat-label">Citation Accuracy</div>
                </div>
            </div>
        </div>

        <!-- User Journey Flow -->
        <div id="user" class="flow-section">
            <h2 class="flow-title">👤 User Journey Flow</h2>
            <div class="flow-description">
                <h3>🎯 Detailed 7-Step User Journey</h3>
                <p>This diagram shows the complete user workflow with dynamic corpus expansion and multi-source data integration.</p>
                <ul>
                    <li><strong>Step 1:</strong> User enters molecule name (GBQ + FDA/DailyMed)</li>
                    <li><strong>Step 2:</strong> LLM discovers indications → User multi-selects</li>
                    <li><strong>Step 3:</strong> System populates drug class + similar molecules</li>
                    <li><strong>Step 4:</strong> Corpus auto-expands with similar molecule data</li>
                    <li><strong>Step 5:</strong> LLM searches 5-region guidelines + User fills gaps</li>
                    <li><strong>Step 6:</strong> Clinical studies categorized → User selects</li>
                    <li><strong>Step 7:</strong> Full analysis engine launches → Multi-format reports</li>
                </ul>
            </div>
            <div class="mermaid-container">
                <div class="mermaid">
graph TD
    %% Detailed 7-Step User Journey Flow
    A[👤 User Login] --> B[🏠 Dashboard]
    
    %% Step 1: Molecule Entry
    B --> C1[📝 Step 1: Enter Molecule Name]
    C1 --> C2[🔍 Search GBQ + FDA/DailyMed]
    C2 --> C3[💊 Empagliflozin Found]
    
    %% Step 2: Indication Discovery
    C3 --> D1[🧠 Step 2: LLM Discovers Indications]
    D1 --> D2[📋 AI Analysis:<br/>• Inherent Knowledge<br/>• GBQ Corpus<br/>• FDA Data]
    D2 --> D3[✅ User Multi-Selects:<br/>• Type 2 Diabetes<br/>• Heart Failure<br/>• CKD]
    
    %% Step 3: Drug Class & Product Comparison
    D3 --> E1[⚖️ Step 3: System Populates]
    E1 --> E2[🏷️ Drug Class: SGLT2 Inhibitors]
    E2 --> E3[🔄 Similar Molecules:<br/>• Dapagliflozin<br/>• Canagliflozin<br/>• Ertugliflozin]
    
    %% Step 4: Corpus Auto-Expansion
    E3 --> F1[📈 Step 4: Corpus Auto-Expands]
    F1 --> F2[🔄 Parallel Data Collection]
    F2 --> F3[📚 Similar Molecule Data Added<br/>from GBQ + FDA]
    
    %% Step 5: Geographic Guidelines
    F3 --> G1[🌍 Step 5: Geographic Guidelines]
    G1 --> G2[🔍 LLM Web Search:<br/>• US • EU • APAC<br/>• LATAM • MEA]
    G2 --> G3[📤 User Uploads Gap Documents]
    G3 --> G4[📋 5-Region Guidelines Complete]
    
    %% Step 6: Clinical Studies
    G4 --> H1[📊 Step 6: Clinical Studies]
    H1 --> H2[🔍 Web Search + Categorization]
    H2 --> H3[📑 Categories:<br/>• Phase I/II/III<br/>• RWE • Meta-Analyses<br/>• Safety • Efficacy]
    H3 --> H4[✅ User Selects Studies]
    
    %% Step 7: Full Analysis
    H4 --> I1[🚀 Step 7: Analysis Engine Launches]
    I1 --> I2[🤖 Multi-Agent Processing<br/>Vertex AI + Azure AI + Claude]
    I2 --> I3[📈 Progress Tracking 0-100%]
    I3 --> I4[📋 Multi-Format Reports<br/>PDF • XML • Interactive]
    
    %% Styling
    classDef step fill:#e3f2fd,stroke:#1976d2,stroke-width:3px
    classDef llm fill:#fff3e0,stroke:#f57c00,stroke-width:2px
    classDef user fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
    classDef system fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef final fill:#ffebee,stroke:#c62828,stroke-width:3px
    
    class C1,D1,E1,F1,G1,H1,I1 step
    class D2,G2,H2,I2 llm
    class D3,G3,H4 user
    class E2,E3,F2,F3,G4,H3 system
    class I4 final
    
    class A,B start
    class C,D,E,F,G,H,I selection
    class J,K processing
    class L,M,N,O progress
    class P,Q,R,S,T complete
                </div>
            </div>
            <div class="key-features">
                <div class="feature-card">
                    <h4>🎯 Intelligent Suggestions</h4>
                    <p>AI automatically discovers relevant indications and suggests optimal comparisons</p>
                </div>
                <div class="feature-card">
                    <h4>🌍 Global Coverage</h4>
                    <p>Multi-country regulatory guidelines and approval status tracking</p>
                </div>
                <div class="feature-card">
                    <h4>📈 Real-Time Progress</h4>
                    <p>Live updates on analysis progress with detailed status information</p>
                </div>
                <div class="feature-card">
                    <h4>📋 Multiple Formats</h4>
                    <p>Professional reports in PDF, Excel, and interactive dashboard formats</p>
                </div>
            </div>
        </div>

        <!-- Technical Architecture -->
        <div id="technical" class="flow-section">
            <h2 class="flow-title">⚙️ Technical Architecture Flow</h2>
            <div class="flow-description">
                <h3>🏗️ Backend System Architecture</h3>
                <p>This diagram shows the comprehensive backend system architecture with all technical components and their interactions.</p>
                <ul>
                    <li><strong>Frontend Layer:</strong> React dashboard + REST API gateway</li>
                    <li><strong>Session Management:</strong> Redis + PostgreSQL + MinIO for GB-scale data</li>
                    <li><strong>Multi-Agent System:</strong> 6 specialized agents with parallel processing tracks</li>
                    <li><strong>Quality Assurance:</strong> Citation validation + medical review + compliance checks</li>
                    <li><strong>Background Processing:</strong> Celery workers for long-running analytical tasks</li>
                </ul>
            </div>
            <div class="mermaid-container">
                <div class="mermaid">
graph TB
    %% Frontend Layer
    subgraph "Frontend Layer"
        UI[React Dashboard]
        API[REST API Gateway]
    end
    
    %% Session Management Layer
    subgraph "Session Management"
        SM[Session Manager]
        Redis[(Redis Cache)]
        PG[(PostgreSQL)]
        MinIO[(MinIO Storage)]
    end
    
    %% Data Sources Layer
    subgraph "Data Sources"
        GBQ[Google BigQuery]
        DM[DailyMed API]
        GL[Guidelines Sources]
        CS[Clinical Studies]
    end
    
    %% LLM Integration Layer
    subgraph "LLM Integration"
        LM[LiteLLM Manager]
        GPT[OpenAI GPT-4]
        Claude[Vertex AI Claude]
        Gemini[Vertex AI Gemini]
        GSDK[Google AI SDK]
    end
    
    %% Processing Layer
    subgraph "Document Processing"
        DP[Document Processor]
        OCR[OCR Engine]
        VLM[Vision LLM]
        TE[Table Extractor]
        CV[Consensus Validator]
    end
    
    %% Multi-Agent System
    subgraph "Multi-Agent System"
        direction TB
        AO[Agent Orchestrator]
        
        subgraph "Track A - Clinical"
            EA[Efficacy Agent]
            SA[Safety Agent]
            CE[Evidence Agent]
        end
        
        subgraph "Track B - Strategic"
            CA[Competitive Agent]
            RA[Regulatory Agent]
            MA[Market Access Agent]
        end
    end
    
    %% Independent Section Generation
    subgraph "Section Generation"
        ISG[Independent Section Generator]
        ES[Efficacy Section]
        SS[Safety Section]
        CS2[Competitive Section]
        RS[Regulatory Section]
        EVS[Evidence Section]
        MAS[Market Section]
    end
    
    %% Quality Assurance
    subgraph "Quality Assurance"
        QAS[QA System]
        CV2[Citation Validator]
        MR[Medical Reviewer]
        RC[Regulatory Compliance]
        HR[Human Review Queue]
    end
    
    %% Report Generation
    subgraph "Report Generation"
        IRS[Intelligent Report Stitcher]
        CC[Consistency Checker]
        TG[Transition Generator]
        ESG[Executive Summary Generator]
        RF[Report Formatter]
    end
    
    %% Background Processing
    subgraph "Background Processing"
        Celery[Celery Workers]
        TaskQueue[Task Queue]
        Monitor[Session Monitor]
    end
    
    %% Flow Connections
    UI --> API
    API --> SM
    SM --> Redis
    SM --> PG
    SM --> MinIO
    
    %% Data Collection
    SM --> GBQ
    SM --> DM
    SM --> GL
    SM --> CS
    
    %% Document Processing Flow
    GBQ --> DP
    DM --> DP
    GL --> DP
    CS --> DP
    
    DP --> OCR
    DP --> VLM
    DP --> TE
    OCR --> CV
    VLM --> CV
    TE --> CV
    
    %% LLM Integration
    CV --> LM
    LM --> GPT
    LM --> Claude
    LM --> Gemini
    LM --> GSDK
    
    %% Agent Processing
    LM --> AO
    AO --> EA
    AO --> SA
    AO --> CE
    AO --> CA
    AO --> RA
    AO --> MA
    
    %% Section Generation
    EA --> ISG
    SA --> ISG
    CE --> ISG
    CA --> ISG
    RA --> ISG
    MA --> ISG
    
    ISG --> ES
    ISG --> SS
    ISG --> CS2
    ISG --> RS
    ISG --> EVS
    ISG --> MAS
    
    %% Quality Assurance Flow
    ES --> QAS
    SS --> QAS
    CS2 --> QAS
    RS --> QAS
    EVS --> QAS
    MAS --> QAS
    
    QAS --> CV2
    QAS --> MR
    QAS --> RC
    QAS --> HR
    
    %% Report Generation Flow
    QAS --> IRS
    IRS --> CC
    IRS --> TG
    IRS --> ESG
    CC --> RF
    TG --> RF
    ESG --> RF
    
    %% Background Processing
    SM --> Celery
    Celery --> TaskQueue
    TaskQueue --> Monitor
    Monitor --> API
    
    %% Final Output
    RF --> MinIO
    MinIO --> API
    API --> UI
    
    %% Styling
    classDef frontend fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef session fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef data fill:#e8f5e8,stroke:#388e3c,stroke-width:2px
    classDef llm fill:#fff3e0,stroke:#f57c00,stroke-width:2px
    classDef processing fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    classDef agents fill:#e0f2f1,stroke:#00695c,stroke-width:2px
    classDef quality fill:#f1f8e9,stroke:#558b2f,stroke-width:2px
    classDef background fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
    
    class UI,API frontend
    class SM,Redis,PG,MinIO session
    class GBQ,DM,GL,CS data
    class LM,GPT,Claude,Gemini,GSDK llm
    class DP,OCR,VLM,TE,CV processing
    class AO,EA,SA,CE,CA,RA,MA agents
    class QAS,CV2,MR,RC,HR quality
    class Celery,TaskQueue,Monitor background
                </div>
            </div>
            <div class="key-features">
                <div class="feature-card">
                    <h4>🚀 Scalable Architecture</h4>
                    <p>Microservices-based design with horizontal scaling capabilities</p>
                </div>
                <div class="feature-card">
                    <h4>🔄 Parallel Processing</h4>
                    <p>Multi-track agent processing for enhanced speed and accuracy</p>
                </div>
                <div class="feature-card">
                    <h4>💾 Distributed Storage</h4>
                    <p>Redis, PostgreSQL, and MinIO for optimal data management</p>
                </div>
                <div class="feature-card">
                    <h4>🤖 Multi-LLM Integration</h4>
                    <p>LiteLLM for seamless integration with GPT-4, Claude, and Gemini</p>
                </div>
            </div>
        </div>

        <!-- Data Flow Diagram -->
        <div id="data" class="flow-section">
            <h2 class="flow-title">📊 Data Flow Diagram</h2>
            <div class="flow-description">
                <h3>📈 Dynamic Corpus Expansion & Processing Pipeline</h3>
                <p>This diagram shows how the corpus dynamically expands at multiple stages and data flows through progressive transformations.</p>
                <ul>
                    <li><strong>Stage 1-2:</strong> Initial molecule + indication data collection</li>
                    <li><strong>Stage 4:</strong> Auto-expansion with similar molecule data</li>
                    <li><strong>Stage 5:</strong> Geographic guideline collection (5 regions)</li>
                    <li><strong>Stage 6:</strong> Clinical studies categorization and selection</li>
                    <li><strong>Processing:</strong> Multi-method extraction with web-grounded search</li>
                    <li><strong>Analysis:</strong> Multi-agent processing with cross-validation</li>
                </ul>
            </div>
            <div class="mermaid-container">
                <div class="mermaid">
flowchart TD
    %% Stage 1-2: Initial Data
    subgraph "Stage 1-2: Initial Corpus"
        USER["👤 User Input:<br/>Molecule: Empagliflozin"]
        IND["🧠 LLM Discovers Indications:<br/>T2D, HF, CKD"]
        INIT["📚 Initial Corpus:<br/>GBQ: 25 docs<br/>FDA: 8 docs"]
    end
    
    %% Stage 4: Similar Molecules
    subgraph "Stage 4: Auto-Expansion"
        SIM["🔄 Similar Molecules Found:<br/>Dapagliflozin, Canagliflozin<br/>Ertugliflozin"]
        EXP1["📈 Corpus Expands:<br/>+45 GBQ docs<br/>+12 FDA labels"]
        CORPUS1["📚 Expanded Corpus: 90 docs"]
    end
    
    %% Stage 5: Geographic Guidelines
    subgraph "Stage 5: Geographic Guidelines"
        GEO["🌍 5-Region Search:<br/>US • EU • APAC • LATAM • MEA"]
        WEB1["🔍 Web Search + Scrapers"]
        GAPS["📤 User Fills Gaps"]
        GUIDE["📋 Guidelines Added:<br/>+85 documents"]
    end
    
    %% Stage 6: Clinical Studies
    subgraph "Stage 6: Clinical Studies"
        CLIN["📊 Web Search Clinical Studies"]
        CAT["📑 AI Categorization:<br/>Phase I/II/III • RWE<br/>Safety • Efficacy"]
        SEL["✅ User Selection"]
        STUD["📈 Studies Added:<br/>+67 documents"]
    end
    
    %% Final Corpus
    subgraph "Complete Corpus"
        FINAL_CORPUS["📚 Final Corpus:<br/>242 Documents • 2.8 GB<br/>Multi-Source • Multi-Format"]
    end
    
    %% Document Processing
    subgraph "Processing Phase"
        PROC["🔄 Multi-Method Processing"]
        TEXT["📝 Text Extraction"]
        TABLES["📊 Table Data: 156 tables"]
        IMAGES["🖼️ Image Analysis: 89 figures"]
        META["🏷️ Metadata: Citations, Sources"]
        CORPUS["📚 Structured Corpus<br/>Ready for Analysis"]
    end
    
    %% AI Analysis
    subgraph "AI Analysis Phase"
        AGENTS["🤖 6 Specialized Agents"]
        
        subgraph "Clinical Track"
            EFF["💊 Efficacy Data:<br/>Primary endpoints<br/>Secondary outcomes<br/>Subgroup analyses"]
            SAF["⚠️ Safety Data:<br/>Adverse events<br/>Laboratory values<br/>Drug interactions"]
            EVI["📈 Evidence Synthesis:<br/>Meta-analyses<br/>Real-world data<br/>Quality assessment"]
        end
        
        subgraph "Strategic Track"
            COMP["⚖️ Competitive Analysis:<br/>Market positioning<br/>Head-to-head comparisons<br/>Pricing strategies"]
            REG["🏛️ Regulatory Status:<br/>Approval timelines<br/>Label differences<br/>Guidelines positioning"]
            MKT["💼 Market Access:<br/>Reimbursement status<br/>Health economics<br/>Payer perspectives"]
        end
    end
    
    %% Section Generation
    subgraph "Section Generation"
        INDEP["🔒 Independent Sections"]
        SEC1["📋 Efficacy Section<br/>12 pages, 45 citations"]
        SEC2["📋 Safety Section<br/>8 pages, 32 citations"]
        SEC3["📋 Competitive Section<br/>10 pages, 28 citations"]
        SEC4["📋 Regulatory Section<br/>15 pages, 67 citations"]
        SEC5["📋 Evidence Section<br/>9 pages, 38 citations"]
        SEC6["📋 Market Section<br/>7 pages, 21 citations"]
    end
    
    %% Quality Assurance
    subgraph "Quality Assurance"
        QA["✅ Quality Validation"]
        CITE["🔍 Citation Check:<br/>231 of 231 verified"]
        MED["🩺 Medical Review:<br/>Accuracy score: 96%"]
        COMP2["📊 Compliance Check:<br/>All requirements met"]
        CONF["📈 Confidence Score: 94%"]
    end
    
    %% Report Assembly
    subgraph "Report Assembly"
        STITCH["🧩 Intelligent Stitching"]
        EXEC["📄 Executive Summary<br/>2 pages"]
        TOC["📑 Table of Contents"]
        MAIN["📖 Main Report<br/>61 pages total"]
        APPEND["📎 Appendices<br/>Data tables, references"]
    end
    
    %% Final Output
    subgraph "Output Layer"
        FINAL["📤 Final Deliverables"]
        PDF["📄 PDF Report<br/>Professional format"]
        EXCEL["📊 Excel Workbook<br/>Data tables and charts"]
        DASH["🖥️ Interactive Dashboard<br/>Web-based exploration"]
    end
    
    %% Flow Connections
    USER --> DC
    DC --> DOC1
    DC --> DOC2
    DC --> DOC3
    DC --> DOC4
    DC --> DOC5
    DC --> DOC6
    DOC1 --> TOTAL
    DOC2 --> TOTAL
    DOC3 --> TOTAL
    DOC4 --> TOTAL
    DOC5 --> TOTAL
    DOC6 --> TOTAL
    
    TOTAL --> PROC
    PROC --> TEXT
    PROC --> TABLES
    PROC --> IMAGES
    PROC --> META
    TEXT --> CORPUS
    TABLES --> CORPUS
    IMAGES --> CORPUS
    META --> CORPUS
    
    CORPUS --> AGENTS
    AGENTS --> EFF
    AGENTS --> SAF
    AGENTS --> EVI
    AGENTS --> COMP
    AGENTS --> REG
    AGENTS --> MKT
    
    EFF --> INDEP
    SAF --> INDEP
    EVI --> INDEP
    COMP --> INDEP
    REG --> INDEP
    MKT --> INDEP
    
    INDEP --> SEC1
    INDEP --> SEC2
    INDEP --> SEC3
    INDEP --> SEC4
    INDEP --> SEC5
    INDEP --> SEC6
    
    SEC1 --> QA
    SEC2 --> QA
    SEC3 --> QA
    SEC4 --> QA
    SEC5 --> QA
    SEC6 --> QA
    
    QA --> CITE
    QA --> MED
    QA --> COMP2
    QA --> CONF
    
    CITE --> STITCH
    MED --> STITCH
    COMP2 --> STITCH
    CONF --> STITCH
    
    STITCH --> EXEC
    STITCH --> TOC
    STITCH --> MAIN
    STITCH --> APPEND
    
    EXEC --> FINAL
    TOC --> FINAL
    MAIN --> FINAL
    APPEND --> FINAL
    
    FINAL --> PDF
    FINAL --> EXCEL
    FINAL --> DASH
    
    %% Styling
    classDef input fill:#e8f5e8,stroke:#2e7d32,stroke-width:3px
    classDef collection fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef processing fill:#fff3e0,stroke:#f57c00,stroke-width:2px
    classDef analysis fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef sections fill:#e0f2f1,stroke:#00695c,stroke-width:2px
    classDef quality fill:#f1f8e9,stroke:#558b2f,stroke-width:2px
    classDef assembly fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    classDef output fill:#e8f5e8,stroke:#388e3c,stroke-width:3px
    
    class USER input
    class DC,DOC1,DOC2,DOC3,DOC4,DOC5,DOC6,TOTAL collection
    class PROC,TEXT,TABLES,IMAGES,META,CORPUS processing
    class AGENTS,EFF,SAF,EVI,COMP,REG,MKT analysis
    class INDEP,SEC1,SEC2,SEC3,SEC4,SEC5,SEC6 sections
    class QA,CITE,MED,COMP2,CONF quality
    class STITCH,EXEC,TOC,MAIN,APPEND assembly
    class FINAL,PDF,EXCEL,DASH output
                </div>
            </div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">156</div>
                    <div class="stat-label">Tables Extracted</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">89</div>
                    <div class="stat-label">Figures Analyzed</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">231</div>
                    <div class="stat-label">Citations Verified</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">61</div>
                    <div class="stat-label">Pages Generated</div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <h3>🚀 Next Steps</h3>
            <p>This comprehensive visual architecture provides the foundation for building a state-of-the-art pharmaceutical AI agent system. The modular design ensures scalability, accuracy, and regulatory compliance for medical affairs research.</p>
        </div>
    </div>

    <script>
        // Mermaid will be initialized in DOMContentLoaded event

        // Navigation functionality
        async function showFlow(flowId) {
            // Hide all flow sections
            const sections = document.querySelectorAll('.flow-section');
            sections.forEach(section => {
                section.classList.remove('active');
            });

            // Remove active class from all buttons
            const buttons = document.querySelectorAll('.nav-btn');
            buttons.forEach(button => {
                button.classList.remove('active');
            });

            // Show selected flow section
            document.getElementById(flowId).classList.add('active');

            // Add active class to clicked button
            event.target.classList.add('active');

            // Ensure mermaid diagram is rendered for this section
            setTimeout(async () => {
                await renderMermaidInSection(flowId);
            }, 100);

            // Scroll to top of the section
            document.getElementById(flowId).scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
        }

        // Function to render mermaid diagrams in a specific section
        async function renderMermaidInSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                const mermaidElements = section.querySelectorAll('.mermaid');
                
                for (let i = 0; i < mermaidElements.length; i++) {
                    const element = mermaidElements[i];
                    if (!element.getAttribute('data-processed')) {
                        const uniqueId = `mermaid-${sectionId}-${i}`;
                        const graphDefinition = element.textContent.trim();
                        
                        try {
                            // Clear the element first
                            element.innerHTML = '';
                            
                            // Use the newer mermaid.render API
                            const { svg } = await mermaid.render(uniqueId, graphDefinition);
                            element.innerHTML = svg;
                            element.setAttribute('data-processed', 'true');
                            
                            console.log(`Successfully rendered diagram for ${sectionId}-${i}`);
                        } catch (error) {
                            console.error(`Error rendering mermaid diagram for ${sectionId}-${i}:`, error);
                            
                            // Fallback: try the old API
                            try {
                                element.innerHTML = graphDefinition;
                                mermaid.init(undefined, element);
                                element.setAttribute('data-processed', 'true');
                            } catch (fallbackError) {
                                console.error('Fallback also failed:', fallbackError);
                                element.innerHTML = `<div style="color: red; padding: 20px; border: 1px solid red;">
                                    <strong>Diagram Error:</strong> Unable to render Mermaid diagram. 
                                    <br><br>Graph definition: <pre>${graphDefinition.substring(0, 200)}...</pre>
                                </div>`;
                            }
                        }
                    }
                }
            }
        }

        // Initialize and render all diagrams
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, initializing Mermaid...');
            
            // Configure mermaid
            mermaid.initialize({
                startOnLoad: false,
                theme: 'default',
                themeVariables: {
                    fontFamily: 'Arial, sans-serif'
                },
                flowchart: {
                    useMaxWidth: true,
                    htmlLabels: true,
                    curve: 'basis'
                },
                securityLevel: 'loose',
                logLevel: 'debug'
            });

            // Wait a bit for the page to fully load, then render all diagrams
            setTimeout(async () => {
                console.log('Starting diagram rendering...');
                await renderMermaidInSection('complete');
                await renderMermaidInSection('user');
                await renderMermaidInSection('technical');
                await renderMermaidInSection('data');
                console.log('All diagrams rendered');
            }, 500);
        });
    </script>
</body>
</html>