Spaces:

SRVCP
/

pharmaagent

Running

App Files Files Community

Rakesh commited on Jul 30, 2025

Commit

bc1bb5c

verified ·

1 Parent(s): e0b6db2

Update index.html

Browse files

Files changed (1) hide show

index.html +1154 -19

index.html CHANGED Viewed

@@ -1,19 +1,1154 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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