Spaces:
Running
Running
| <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> |