| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>RIGOR-PRS-Secure++ PQC Demo</title> |
| <style> |
| body { font-family: 'Arial', sans-serif; background-color: #f4f4f9; color: #333; margin: 20px; } |
| .container { max-width: 900px; margin: auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } |
| h1 { color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; } |
| .module-container { display: flex; justify-content: space-around; margin-bottom: 20px; } |
| .module { padding: 15px; border-radius: 6px; text-align: center; width: 18%; font-size: 14px; transition: all 0.3s ease; } |
| .client-module { background-color: #3498db; color: white; } |
| .pqc-module { background-color: #c0392b; color: white; } |
| .tee-module { background-color: #27ae60; color: white; } |
| .ledger-module { background-color: #8e44ad; color: white; } |
| .arrow { font-size: 24px; line-height: 50px; color: #7f8c8d; } |
| #log { margin-top: 20px; border: 1px solid #ddd; padding: 15px; background: #f9f9f9; max-height: 300px; overflow-y: scroll; border-radius: 4px; } |
| .log-entry { margin-bottom: 8px; border-bottom: 1px dotted #eee; padding-bottom: 5px; } |
| .event-success { color: #2ecc71; font-weight: bold; } |
| .event-crypto { color: #c0392b; font-weight: bold; } |
| .event-pending { color: #f39c12; font-weight: bold; } |
| button { padding: 10px 20px; font-size: 16px; background-color: #34495e; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } |
| button:hover:not(:disabled) { background-color: #2c3e50; } |
| button:disabled { background-color: #bdc3c7; cursor: not-allowed; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <h1>RIGOR-PRS-Secure++ PQC Demo (Simulated)</h1> |
| <p>Simulates the secure data flow using Post-Quantum Cryptography (PQC) and a Trusted Execution Environment (TEE). **No real PHI or cryptographic operations are executed.**</p> |
| |
| <div class="module-container"> |
| <div class="module client-module" id="client">Client App / PHI Input</div> |
| <div class="arrow">→</div> |
| <div class="module pqc-module" id="pqc-module">PQC Security Module</div> |
| <div class="arrow" style="line-height: 90px;">↓</div> |
| <div class="module tee-module" id="tee-module" style="width: 25%;">Encrypted Model Inference Environment (TEE/HSM)</div> |
| <div class="arrow" style="line-height: 90px;">↓</div> |
| <div class="module ledger-module" id="ledger">Immutable Ledger (Blockchain)</div> |
| </div> |
|
|
| <button id="run-demo">Run End-to-End Secure Processing</button> |
|
|
| <div id="log"> |
| <div class="log-entry event-pending">System Initializing...</div> |
| </div> |
| </div> |
|
|
| <script> |
| const log = document.getElementById('log'); |
| const runDemoButton = document.getElementById('run-demo'); |
| const modules = { |
| client: document.getElementById('client'), |
| pqc: document.getElementById('pqc-module'), |
| tee: document.getElementById('tee-module'), |
| ledger: document.getElementById('ledger') |
| }; |
| |
| function logEvent(message, type = 'log-entry') { |
| const entry = document.createElement('div'); |
| entry.className = 'log-entry ' + type; |
| entry.innerHTML = `[${new Date().toLocaleTimeString()}] ${message}`; |
| log.prepend(entry); |
| log.scrollTop = 0; |
| } |
| |
| function setModuleState(moduleName, color) { |
| modules[moduleName].style.backgroundColor = color; |
| } |
| |
| function resetDemo() { |
| log.innerHTML = ''; |
| logEvent("System Ready for Demonstration."); |
| setModuleState('client', '#3498db'); |
| setModuleState('pqc', '#c0392b'); |
| setModuleState('tee', '#27ae60'); |
| setModuleState('ledger', '#8e44ad'); |
| runDemoButton.disabled = false; |
| runDemoButton.textContent = "Run End-to-End Secure Processing"; |
| } |
| |
| async function runDemo() { |
| runDemoButton.disabled = true; |
| log.innerHTML = ''; |
| logEvent("Demo started. Simulating Phase 0: Initialization...", 'event-pending'); |
| |
| |
| setModuleState('pqc', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 1000)); |
| logEvent("Phase 0.1: PQC Key Pairs (Kyber/Dilithium) generated within **HSM**.", 'event-crypto'); |
| logEvent("Phase 0.2: PQC-TLS 1.3 Secure Channel established.", 'event-success'); |
| setModuleState('pqc', '#c0392b'); |
| |
| |
| logEvent("--- Phase 1: Secure Data Ingestion ---", 'event-pending'); |
| setModuleState('client', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 1500)); |
| logEvent("Phase 1.1: Raw VCF/Phenotype data encrypted with AES-256-GCM.", 'event-success'); |
| logEvent("Phase 1.2: Symmetric Key encapsulated using **Kyber-768 KEM**.", 'event-crypto'); |
| logEvent("Phase 1.3: Data and Signed Ingestion Proof sent to PQC Module.", 'event-success'); |
| setModuleState('client', '#3498db'); |
| |
| setModuleState('pqc', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 1000)); |
| logEvent("Phase 1.4: PQC Module verifies **Dilithium-III signature** on ingestion proof.", 'event-crypto'); |
| setModuleState('pqc', '#c0392b'); |
| |
| setModuleState('ledger', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 500)); |
| logEvent("Phase 1.5: `data_ingestion` event committed to **Immutable Ledger (Blockchain)** with SHA3-256 integrity hash.", 'event-success'); |
| setModuleState('ledger', '#8e44ad'); |
| |
| |
| logEvent("--- Phase 2: PQC-Secured Variant Annotation ---", 'event-pending'); |
| setModuleState('pqc', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 1500)); |
| logEvent("Phase 2.1: Annotation Query digitally signed using **Dilithium private key**.", 'event-crypto'); |
| logEvent("Phase 2.2: Secure query sent over PQC-TLS to external API (Simulated).", 'event-success'); |
| await new Promise(r => setTimeout(r, 1500)); |
| logEvent("Phase 2.3: API Response received and **Dilithium signature verified** for authenticity.", 'event-crypto'); |
| logEvent("Phase 2.4: Validated Annotations stored as Sealed Records.", 'event-success'); |
| setModuleState('pqc', '#c0392b'); |
| |
| |
| logEvent("--- Phase 3: Encrypted Model Processing ---", 'event-pending'); |
| setModuleState('tee', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 2000)); |
| logEvent("Phase 3.1: Encrypted PRS Model loaded into **Trusted Execution Environment (TEE)**.", 'event-success'); |
| logEvent("Phase 3.2: Model decrypted *inside* the secure enclave and signature verified.", 'event-crypto'); |
| logEvent("Phase 3.3: Core Polygenic Risk Score (PRS) computation initiated on decrypted data.", 'event-success'); |
| logEvent("Phase 3.4: Final PRS Result normalized and encrypted with enclave export key.", 'event-success'); |
| logEvent("Phase 3.5: Encrypted PRS result securely exported from TEE.", 'event-crypto'); |
| setModuleState('tee', '#27ae60'); |
| |
| |
| logEvent("--- Phase 4: Final Ledger Commitment & Governance ---", 'event-pending'); |
| setModuleState('ledger', '#f1c40f'); |
| await new Promise(r => setTimeout(r, 1000)); |
| logEvent("Phase 4.1: `prs_computation` proof committed to **Immutable Ledger**.", 'event-success'); |
| logEvent("Phase 4.2: Final Encrypted PRS Score (`polygenic_risk_score`) transmitted to the Client.", 'event-success'); |
| await new Promise(r => setTimeout(r, 1000)); |
| logEvent("Phase 4.3: Continuous Key Rotation Monitor checks Kyber/Dilithium key lifetimes.", 'event-success'); |
| logEvent("Phase 4.4: System achieved **End-to-End Post-Quantum Security and Auditability**.", 'event-crypto'); |
| setModuleState('ledger', '#8e44ad'); |
| |
| runDemoButton.textContent = "Demo Complete - Run Again"; |
| runDemoButton.disabled = false; |
| } |
| |
| document.addEventListener('DOMContentLoaded', resetDemo); |
| runDemoButton.addEventListener('click', runDemo); |
| </script> |
|
|
| </body> |
| </html> |
