| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Integrated Technical Report & Patent Specification</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .diagram-box { |
| @apply bg-white border-2 border-gray-300 rounded-lg p-4 text-center shadow-lg transition-all duration-300; |
| } |
| .diagram-arrow { |
| @apply relative text-gray-500; |
| } |
| .diagram-arrow::after { |
| content: '→'; |
| @apply absolute text-3xl font-bold; |
| transform: translateY(-15px); |
| } |
| .flow-step { |
| opacity: 0.3; |
| transition: opacity 0.5s ease-in-out; |
| } |
| .flow-step.active { |
| opacity: 1; |
| } |
| .flow-step.completed { |
| opacity: 0.8; |
| @apply border-green-500; |
| } |
| |
| |
| .accordion-content { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| .accordion-button.open + .accordion-content { |
| max-height: 1000px; |
| } |
| .accordion-button .arrow { |
| transition: transform 0.3s; |
| } |
| .accordion-button.open .arrow { |
| transform: rotate(90deg); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
|
|
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <h1 class="text-2xl font-bold text-blue-700">Secure Adjudication Platform</h1> |
| <div class="space-x-4 hidden md:block"> |
| <a href="#introduction" class="text-gray-600 hover:text-blue-600 font-medium">Introduction</a> |
| <a href="#architecture" class="text-gray-600 hover:text-blue-600 font-medium">Architecture</a> |
| <a href="#prs" class="text-gray-600 hover:text-blue-600 font-medium">Risk Scoring (PRS)</a> |
| <a href="#pqc" class="text-gray-600 hover:text-blue-600 font-medium">Cryptography (PQC)</a> |
| <a href="#claims" class="text-gray-600 hover:text-blue-600 font-medium">Patent Claims</a> |
| <a href="#implementation" class="text-gray-600 hover:text-blue-600 font-medium">Implementation</a> |
| </div> |
| </nav> |
| </header> |
|
|
| |
| <main class="container mx-auto px-6 py-12"> |
|
|
| |
| <section id="introduction" class="mb-24 prose max-w-none lg:prose-lg"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2"> |
| Executive Summary & Introduction |
| </h2> |
| <p>This document presents an integrated technical report and patent specification for a novel platform addressing critical vulnerabilities in federal benefits adjudication. Current systems are frequently opaque, reliant on outdated methodologies, and fail to provide adequate security for highly sensitive personal data, including genetic information, in the face of emerging computational threats.</p> |
| <p>The described invention provides a comprehensive solution by synergistically combining: |
| <ol> |
| <li><strong>Transparent Predictive Analytics:</strong> A robust polygenic risk scoring (PRS) engine that integrates multi-ancestry genomic data and standardized neurocognitive measures to provide objective, statistically rigorous evidence for adjudicators.</li> |
| <li><strong>Provable, Quantum-Resistant Security:</strong> A novel hybrid cryptographic scheme, Quantum-Resistant Dual-Envelope AEAD (QRDE-AEAD), to protect all claimant data against both classical and future quantum-based attacks.</li> |
| <li><strong>Auditable, Open-Source Architecture:</strong> A system built on principles of transparency, mandating open-source components, independent third-party audits, and full compliance with modern accessibility standards (WCAG 2.2 AA).</li> |
| </ol> |
| </p> |
| <p>This platform directly remedies the due process and statutory violations (including the APA, ADA, and GINA) inherent in current "black box" algorithmic systems. It establishes a new standard for public-sector technology that is accountable, secure, and equitable by design.</p> |
| </section> |
|
|
| |
| <section id="architecture" class="mb-24"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2 mb-8"> |
| Interactive System Architecture |
| </h2> |
| <p class="text-lg text-gray-700 mb-8 max-w-4xl"> |
| The system architecture is designed for maximum security and audibility. Data flows through distinct, cryptographically-isolated modules. Click on any component to highlight its connections and learn more about its function. |
| </p> |
|
|
| |
| <div id="arch-diagram" class="relative p-8 bg-gray-100 rounded-xl shadow-inner overflow-x-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10 items-center min-w-[700px]"> |
| |
| <div class="flex flex-col space-y-4"> |
| <div id="arch-intake" class="diagram-box cursor-pointer hover:border-blue-500 hover:shadow-xl" data-id="intake"> |
| <h3 class="font-semibold text-lg">Claimant Data Intake</h3> |
| <p class="text-sm">EHR, Neuropsych Tests, Genomic Data (via WCAG 2.2 Portal)</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-col space-y-4"> |
| <div id="arch-enclave" class="diagram-box cursor-pointer hover:border-blue-500 hover:shadow-xl relative" data-id="enclave"> |
| <span class="absolute -top-3 -right-3 px-2 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full">SECURE</span> |
| <h3 class="font-semibold text-lg">Secure Enclave</h3> |
| <p class="text-sm">QRDE-AEAD Encryption, Anonymization & Re-association</p> |
| </div> |
| <div id="arch-prs" class="diagram-box cursor-pointer hover:border-blue-500 hover:shadow-xl" data-id="prs"> |
| <h3 class="font-semibold text-lg">PRS Engine</h3> |
| <p class="text-sm">Calculates risk score from anonymized data</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-col space-y-4"> |
| <div id="arch-dash" class="diagram-box cursor-pointer hover:border-blue-500 hover:shadow-xl" data-id="dash"> |
| <h3 class="font-semibold text-lg">Adjudicator Dashboard</h3> |
| <p class="text-sm">Receives risk-flagged, decrypted case file for review</p> |
| </div> |
| <div id="arch-audit" class="diagram-box cursor-pointer hover:border-blue-500 hover:shadow-xl" data-id="audit"> |
| <h3 class="font-semibold text-lg">Independent Audit Portal</h3> |
| <p class="text-sm">Access to escrowed code & preserved, anonymized data</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <svg id="arch-svg" class="absolute top-0 left-0 w-full h-full" style="pointer-events: none;"> |
| |
| <path id="flow-intake-enclave" d="" stroke-width="3" stroke-dasharray="8" class="stroke-gray-400 opacity-0 transition-all duration-500" fill="none"/> |
| |
| <path id="flow-enclave-prs" d="" stroke-width="3" class="stroke-gray-400 opacity-0 transition-all duration-500" fill="none"/> |
| |
| <path id="flow-prs-enclave" d="" stroke-width="3" class="stroke-gray-400 opacity-0 transition-all duration-500" fill="none"/> |
| |
| <path id="flow-enclave-dash" d="" stroke-width="3" class="stroke-gray-400 opacity-0 transition-all duration-500" fill="none"/> |
| |
| <path id="flow-enclave-audit" d="" stroke-width="3" stroke-dasharray="8" class="stroke-gray-400 opacity-0 transition-all duration-500" fill="none"/> |
| </svg> |
|
|
| |
| <div id="arch-info" class="mt-8 p-4 bg-white rounded-lg shadow-md border border-gray-200 transition-all duration-300 opacity-0 h-0 overflow-hidden"> |
| <h4 id="arch-info-title" class="font-bold text-lg text-blue-700 mb-2"></h4> |
| <p id="arch-info-desc" class="text-gray-700"></p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="prs" class="mb-24"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2 mb-8"> |
| Interactive: Polygenic Risk Scoring (PRS) |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div class="prose max-w-none lg:prose-lg"> |
| <p>The Polygenic Risk Score (PRS) provides an objective, quantitative measure of an individual's genetic predisposition for a specific condition. It is not a diagnosis, but a powerful statistical tool for risk stratification.</p> |
| <p>It is calculated by summing the effect sizes (beta coefficients, or `β`) of thousands of genetic variants (SNPs), with each variant's effect weighted by the number of risk alleles (0, 1, or 2) the individual has.</p> |
| <p class="text-center font-mono text-xl bg-gray-100 p-4 rounded-md"> |
| PRS = Σ (βᵢ × genotypeᵢ) |
| </p> |
| <p>Use the interactive tool to see how different variants contribute to a total risk score. This demonstrates the "polygenic" nature of the calculation—it is the cumulative effect of many small-effect variants, not a single gene, that determines risk.</p> |
| </div> |
|
|
| |
| <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200"> |
| <h3 class="text-xl font-semibold mb-6 text-center">PRS Contribution Visualizer</h3> |
| <div class="space-y-6"> |
| |
| <div class="grid grid-cols-3 gap-4 items-center"> |
| <label for="geno1" class="font-medium">Variant 1 (rs123)</label> |
| <select id="geno1" class="prs-input rounded-md border-gray-300 shadow-sm"> |
| <option value="0">Genotype (0 alleles)</option> |
| <option value="1">Genotype (1 allele)</option> |
| <option value="2" selected>Genotype (2 alleles)</option> |
| </select> |
| <input type="range" id="beta1" class="prs-input w-full" min="0" max="1" step="0.1" value="0.2"> |
| </div> |
| |
| <div class="grid grid-cols-3 gap-4 items-center"> |
| <label for="geno2" class="font-medium">Variant 2 (rs456)</label> |
| <select id="geno2" class="prs-input rounded-md border-gray-300 shadow-sm"> |
| <option value="0">Genotype (0 alleles)</option> |
| <option value="1" selected>Genotype (1 allele)</option> |
| <option value="2">Genotype (2 alleles)</option> |
| </select> |
| <input type="range" id="beta2" class="prs-input w-full" min="0" max="1" step="0.1" value="0.8"> |
| </div> |
| |
| <div class="grid grid-cols-3 gap-4 items-center"> |
| <label for="geno3" class="font-medium">Variant 3 (rs789)</label> |
| <select id="geno3" class="prs-input rounded-md border-gray-300 shadow-sm"> |
| <option value="0">Genotype (0 alleles)</option> |
| <option value="1">Genotype (1 allele)</option> |
| <option value="2" selected>Genotype (2 alleles)</option> |
| </select> |
| <input type="range" id="beta3" class="prs-input w-full" min="0" max="1" step="0.1" value="0.4"> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <h4 class="font-semibold text-lg mb-4 text-center">Total Polygenic Risk Score</h4> |
| <div class="bg-gray-100 rounded-lg p-4"> |
| <div class="relative w-full h-8 bg-gray-200 rounded-full"> |
| <div id="prs-bar" class="absolute top-0 left-0 h-8 bg-blue-600 rounded-full transition-all duration-300" style="width: 0%;"></div> |
| <span id="prs-value" class="absolute w-full text-center font-bold text-white z-10 leading-8">0.00</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="pqc" class="mb-24"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2 mb-8"> |
| Interactive: Post-Quantum Cryptography (PQC) |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div class="prose max-w-none lg:prose-lg"> |
| <p>Standard encryption (like RSA and ECC) is vulnerable to attacks from large-scale quantum computers. Given the extreme sensitivity of genomic and health data, protecting it against future threats is a constitutional and ethical necessity.</p> |
| <p>We implement a hybrid **Quantum-Resistant Dual-Envelope AEAD (QRDE-AEAD)** scheme. This "dual-envelope" approach combines a classical algorithm (ECDH) with a post-quantum algorithm (CRYSTALS-Kyber) to create a shared secret. This ensures data is secure against *both* classical and quantum attackers, today and in the future.</p> |
| <p>The resulting key is then used with AES-256-GCM (an AEAD) to encrypt the data, providing confidentiality, integrity, and authenticity.</p> |
| <p class="font-medium">Click "Next Step" to walk through the encryption workflow.</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200"> |
| <h3 class="text-xl font-semibold mb-6 text-center">QRDE-AEAD Encryption Workflow</h3> |
| <div class="space-y-4"> |
| |
| <div id="pqc-step-1" class="flow-step diagram-box border-gray-300"> |
| <h4 class="font-semibold">Step 1: PQC Key Encapsulation (KEM)</h4> |
| <p class="text-sm">Generate shared secret `ss₁` using **CRYSTALS-Kyber512**. This produces PQC ciphertext `c₁`.</p> |
| </div> |
| |
| <div id="pqc-step-2" class="flow-step diagram-box border-gray-300"> |
| <h4 class="font-semibold">Step 2: Classical Key Exchange</h4> |
| <p class="text-sm">Generate shared secret `ss₂` using **ECDH (P-256)**. This produces classical public key `pk₂`.</p> |
| </div> |
| |
| <div id="pqc-step-3" class="flow-step diagram-box border-gray-300"> |
| <h4 class="font-semibold">Step 3: Hybrid Key Derivation</h4> |
| <p class="text-sm">Combine secrets `ss₁ || ss₂` and feed into **HKDF-SHA-512** to derive a single, robust 256-bit AEAD key `k`.</p> |
| </div> |
| |
| <div id="pqc-step-4" class="flow-step diagram-box border-gray-300"> |
| <h4 class="font-semibold">Step 4: Authenticated Encryption (AEAD)</h4> |
| <p class="text-sm">Encrypt `Plaintext` with key `k`, nonce `n`, and Associated Data (AD) using **AES-256-GCM**. This yields ciphertext `c₂` and auth tag `t`.</p> |
| </div> |
| |
| <div id="pqc-step-5" class="flow-step diagram-box border-green-500"> |
| <h4 class="font-semibold">Step 5: Final Encrypted Envelope</h4> |
| <p class="text-sm font-mono break-words">Transmit: `c₁ || pk₂ || n || c₂ || t`</p> |
| </div> |
| </div> |
| <button id="pqc-next-btn" class="mt-6 w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"> |
| Start Workflow |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="claims" class="mb-24 prose max-w-none lg:prose-lg"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2 mb-8"> |
| Patent Claims |
| </h2> |
| <p class="font-semibold">What is claimed is:</p> |
| <ol> |
| <li> |
| <p><strong>A system for secure and auditable benefits adjudication</strong>, the system comprising:</p> |
| <ul class="list-disc ml-6"> |
| <li>A secure data intake module configured to receive claimant data, said data including electronic health records and genomic data;</li> |
| <li>A post-quantum cryptographic module residing within a secure enclave, configured to: |
| <ul> |
| <li>generate a hybrid shared secret by combining a first secret from a post-quantum key encapsulation mechanism (PQC KEM) and a second secret from a classical key exchange mechanism (ECDH), and</li> |
| <li>encrypt said claimant data using an Authenticated Encryption with Associated Data (AEAD) algorithm keyed by said hybrid shared secret;</li> |
| </ul> |
| </li> |
| <li>A predictive analytics engine, configured to: |
| <ul> |
| <li>receive anonymized genomic data from said secure enclave, and</li> |
| <li>calculate a polygenic risk score (PRS) for a claimant by summing a plurality of weighted genetic variants;</li> |
| </ul> |
| </li> |
| <li>An adjudicator dashboard module, configured to: |
| <ul> |
| <li>receive a decrypted case file from said secure enclave, said case file including said polygenic risk score, and</li> |
| <li>present said case file to a human adjudicator for review; and</li> |
| </ul> |
| </li> |
| <li>An independent audit module, configured to provide a third-party auditor with access to an escrowed codebase for said predictive analytics engine and to preserved, anonymized claimant data.</li> |
| </ul> |
| </li> |
| <li> |
| <p><strong>A computer-implemented method for processing a benefits claim</strong>, the method comprising:</p> |
| <ul class="list-disc ml-6"> |
| <li>Receiving, at a secure intake portal, claimant data comprising health records and multi-ancestry genomic data;</li> |
| <li>Encrypting said claimant data within a secure enclave using a hybrid cryptographic scheme, said scheme deriving a key from at least one post-quantum algorithm and at least one classical algorithm;</li> |
| <li>Transmitting an anonymized version of said genomic data to a predictive analytics engine;</li> |
| <li>Calculating, by said predictive analytics engine, a polygenic risk score based on said anonymized genomic data;</li> |
| <li>Receiving, at said secure enclave, said polygenic risk score and re-associating it with said claimant data;</li> |
| <li>Generating a risk-flagged case file; and</li> |
| <li>Transmitting said risk-flagged case file to a human adjudicator for a final determination.</li> |
| </ul> |
| </li> |
| <li> |
| <p><strong>The system of claim 1</strong>, wherein said secure data intake module is further configured to comply with Web Content Accessibility Guidelines (WCAG) 2.2 AA standards.</p> |
| </li> |
| <li> |
| <p><strong>The system of claim 1</strong>, wherein said post-quantum key encapsulation mechanism is CRYSTALS-Kyber and said classical key exchange mechanism is Elliptic-curve Diffie–Hellman (ECDH).</p> |
| </li> |
| <li> |
| <p><strong>The method of claim 2</strong>, further comprising: providing a machine-readable notice to said claimant detailing the use of said polygenic risk score in the adjudication process.</p> |
| </li> |
| </ol> |
| </section> |
|
|
| |
| <section id="implementation" class="mb-24"> |
| <h2 class="text-3xl font-bold text-gray-900 border-b-2 border-blue-200 pb-2 mb-8"> |
| Equitable Implementation Plan |
| </h2> |
| <div class="space-y-4"> |
| |
| <div class="border border-gray-300 rounded-lg bg-white shadow-sm"> |
| <button class="accordion-button w-full flex justify-between items-center p-5 text-left font-semibold text-lg"> |
| <span>Phase I: Triage & Scientific Surge</span> |
| <span class="arrow text-blue-600 text-2xl">›</span> |
| </button> |
| <div class="accordion-content px-5 pb-5 prose max-w-none"> |
| <p>Immediate recruitment of 500 specialists (ALJs, neuropsychologists, geneticists) to clear the "invisible-impairment" backlog. Establish a mandatory "Modern Adjudication Academy" for training on due-process, statistical genetics (p-value interpretation), and WCAG 2.2 compliance.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-300 rounded-lg bg-white shadow-sm"> |
| <button class="accordion-button w-full flex justify-between items-center p-5 text-left font-semibold text-lg"> |
| <span>Phase II: Modernization Blueprint & Security Pilot</span> |
| <span class="arrow text-blue-600 text-2xl">›</span> |
| </button> |
| <div class="accordion-content px-5 pb-5 prose max-w-none"> |
| <p>Engage certified experts to deliver WCAG 2.2 AA compliant public and internal portals. Deploy the QRDE-AEAD (Quantum-Resistant Dual-Envelope) pilot to protect all sensitive health and genomic data. This pilot merges CRYSTALS-Kyber512 with classical ECDH and AES-GCM, establishing a new national model for quantum-resilient data security.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-300 rounded-lg bg-white shadow-sm"> |
| <button class="accordion-button w-full flex justify-between items-center p-5 text-left font-semibold text-lg"> |
| <span>Oversight & Accountability</span> |
| <span class="arrow text-blue-600 text-2xl">›</span> |
| </button> |
| <div class="accordion-content px-5 pb-5 prose max-w-none"> |
| <p>Appoint a Technical Special Master under Rule 53 to supervise implementation, approve all major contracts, enforce quarterly performance benchmarks (backlog reduction, WCAG certification, QRDE-AEAD readiness), and file transparent status reports with the Court and Congress.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-gray-300 py-12"> |
| <div class="container mx-auto px-6 text-center"> |
| <p>© 2025. This document is an integrated technical specification and patent draft for demonstration purposes.</p> |
| <p class="text-sm text-gray-400 mt-2">Confidential & Proprietary Information</p> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| |
| const diagram = document.getElementById('arch-diagram'); |
| const svg = document.getElementById('arch-svg'); |
| const infoBox = document.getElementById('arch-info'); |
| const infoTitle = document.getElementById('arch-info-title'); |
| const infoDesc = document.getElementById('arch-info-desc'); |
| const boxes = { |
| intake: document.getElementById('arch-intake'), |
| enclave: document.getElementById('arch-enclave'), |
| prs: document.getElementById('arch-prs'), |
| dash: document.getElementById('arch-dash'), |
| audit: document.getElementById('arch-audit'), |
| }; |
| const flows = { |
| intake: [document.getElementById('flow-intake-enclave')], |
| enclave: [ |
| document.getElementById('flow-intake-enclave'), |
| document.getElementById('flow-enclave-prs'), |
| document.getElementById('flow-prs-enclave'), |
| document.getElementById('flow-enclave-dash'), |
| document.getElementById('flow-enclave-audit'), |
| ], |
| prs: [ |
| document.getElementById('flow-enclave-prs'), |
| document.getElementById('flow-prs-enclave'), |
| ], |
| dash: [document.getElementById('flow-enclave-dash')], |
| audit: [document.getElementById('flow-enclave-audit')], |
| }; |
| const info = { |
| intake: { |
| title: 'Data Intake Module', |
| desc: 'Receives all claimant data (EHR, genomics, etc.) via a secure, WCAG 2.2 compliant portal. All data is immediately sent to the Secure Enclave for encryption *before* processing.' |
| }, |
| enclave: { |
| title: 'Secure Enclave (QRDE-AEAD)', |
| desc: 'The cryptographic core. It encrypts all incoming data, anonymizes data before sending it to the PRS engine, re-associates the returned score, and securely manages decryption for the adjudicator and audit portals.' |
| }, |
| prs: { |
| title: 'Polygenic Risk Scoring (PRS) Engine', |
| desc: 'Receives *only* anonymized genetic data from the enclave. It calculates the risk score using the open-source, auditable algorithm and returns *only* the score to the enclave. It never has access to identifiable information.' |
| }, |
| dash: { |
| title: 'Adjudicator Dashboard', |
| desc: 'A human adjudicator receives the complete, decrypted case file, including the PRS and its interpretation. The final decision is made by the human, assisted by the objective data.' |
| }, |
| audit: { |
| title: 'Independent Audit Portal', |
| desc: 'Provides third-party auditors and oversight bodies with secure access to the escrowed source code and preserved, anonymized datasets to validate the algorithm for fairness, bias, and accuracy.' |
| } |
| }; |
| |
| let activeBox = null; |
| |
| function updateDiagram() { |
| |
| const intakeRect = boxes.intake.getBoundingClientRect(); |
| const enclaveRect = boxes.enclave.getBoundingClientRect(); |
| const prsRect = boxes.prs.getBoundingClientRect(); |
| const dashRect = boxes.dash.getBoundingClientRect(); |
| const auditRect = boxes.audit.getBoundingClientRect(); |
| const diagramRect = diagram.getBoundingClientRect(); |
| |
| const getCoords = (rect) => ({ |
| x: rect.x - diagramRect.x + window.scrollX, |
| y: rect.y - diagramRect.y + window.scrollY, |
| width: rect.width, |
| height: rect.height, |
| }); |
| |
| const c = { |
| intake: getCoords(intakeRect), |
| enclave: getCoords(enclaveRect), |
| prs: getCoords(prsRect), |
| dash: getCoords(dashRect), |
| audit: getCoords(auditRect), |
| }; |
| |
| |
| flows.intake[0].setAttribute('d', `M ${c.intake.x + c.intake.width} ${c.intake.y + c.intake.height / 2} L ${c.enclave.x} ${c.enclave.y + c.enclave.height / 2 - 20}`); |
| flows.enclave[1].setAttribute('d', `M ${c.enclave.x + c.enclave.width / 2} ${c.enclave.y + c.enclave.height} L ${c.prs.x + c.prs.width / 2} ${c.prs.y}`); |
| flows.prs[1].setAttribute('d', `M ${c.prs.x + c.prs.width / 2} ${c.prs.y} L ${c.enclave.x + c.enclave.width / 2} ${c.enclave.y + c.enclave.height}`); |
| flows.dash[0].setAttribute('d', `M ${c.enclave.x + c.enclave.width} ${c.enclave.y + c.enclave.height / 2} L ${c.dash.x} ${c.dash.y + c.dash.height / 2}`); |
| flows.audit[0].setAttribute('d', `M ${c.enclave.x + c.enclave.width} ${c.enclave.y + c.enclave.height / 2 + 20} L ${c.audit.x} ${c.audit.y + c.audit.height / 2}`); |
| |
| |
| Object.values(flows).flat().forEach(flow => { |
| flow.classList.remove('stroke-blue-500', 'opacity-100'); |
| flow.classList.add('stroke-gray-400', 'opacity-0'); |
| }); |
| Object.values(boxes).forEach(box => { |
| box.classList.remove('border-blue-500', 'shadow-xl'); |
| box.classList.add('border-gray-300'); |
| }); |
| |
| if (activeBox && flows[activeBox]) { |
| |
| boxes[activeBox].classList.add('border-blue-500', 'shadow-xl'); |
| flows[activeBox].forEach(flow => { |
| flow.classList.remove('stroke-gray-400', 'opacity-0'); |
| flow.classList.add('stroke-blue-500', 'opacity-100'); |
| }); |
| |
| |
| infoTitle.textContent = info[activeBox].title; |
| infoDesc.textContent = info[activeBox].desc; |
| infoBox.classList.remove('opacity-0', 'h-0'); |
| infoBox.style.height = `${infoBox.scrollHeight}px`; |
| infoBox.classList.add('opacity-100'); |
| |
| } else { |
| |
| infoBox.classList.add('opacity-0'); |
| infoBox.style.height = '0px'; |
| } |
| } |
| |
| Object.keys(boxes).forEach(id => { |
| boxes[id].addEventListener('click', () => { |
| activeBox = (activeBox === id) ? null : id; |
| updateDiagram(); |
| }); |
| }); |
| |
| |
| updateDiagram(); |
| window.addEventListener('resize', updateDiagram); |
| |
| |
| const prsInputs = document.querySelectorAll('.prs-input'); |
| const prsBar = document.getElementById('prs-bar'); |
| const prsValue = document.getElementById('prs-value'); |
| |
| function calculatePRS() { |
| const geno1 = parseFloat(document.getElementById('geno1').value); |
| const beta1 = parseFloat(document.getElementById('beta1').value); |
| const geno2 = parseFloat(document.getElementById('geno2').value); |
| const beta2 = parseFloat(document.getElementById('beta2').value); |
| const geno3 = parseFloat(document.getElementById('geno3').value); |
| const beta3 = parseFloat(document.getElementById('beta3').value); |
| |
| const score1 = geno1 * beta1; |
| const score2 = geno2 * beta2; |
| const score3 = geno3 * beta3; |
| |
| const totalScore = score1 + score2 + score3; |
| const maxScore = (2 * 1.0) + (2 * 1.0) + (2 * 1.0); |
| const percentage = (totalScore / maxScore) * 100; |
| |
| prsValue.textContent = totalScore.toFixed(2); |
| prsBar.style.width = `${percentage}%`; |
| } |
| |
| prsInputs.forEach(input => { |
| input.addEventListener('input', calculatePRS); |
| }); |
| calculatePRS(); |
| |
| |
| const pqcBtn = document.getElementById('pqc-next-btn'); |
| const pqcSteps = [ |
| document.getElementById('pqc-step-1'), |
| document.getElementById('pqc-step-2'), |
| document.getElementById('pqc-step-3'), |
| document.getElementById('pqc-step-4'), |
| document.getElementById('pqc-step-5'), |
| ]; |
| let currentStep = -1; |
| |
| pqcBtn.addEventListener('click', () => { |
| if (currentStep >= 0) { |
| pqcSteps[currentStep].classList.add('completed'); |
| } |
| |
| currentStep++; |
| |
| if (currentStep >= pqcSteps.length) { |
| |
| currentStep = 0; |
| pqcSteps.forEach(step => { |
| step.classList.remove('active', 'completed'); |
| }); |
| pqcBtn.textContent = 'Start Workflow'; |
| } |
| |
| if (currentStep < pqcSteps.length) { |
| pqcSteps[currentStep].classList.add('active'); |
| pqcBtn.textContent = 'Next Step'; |
| } |
| |
| if (currentStep === pqcSteps.length - 1) { |
| pqcBtn.textContent = 'Reset Workflow'; |
| } |
| }); |
| |
| |
| document.querySelectorAll('.accordion-button').forEach(button => { |
| button.addEventListener('click', () => { |
| const content = button.nextElementSibling; |
| button.classList.toggle('open'); |
| if (button.classList.contains('open')) { |
| content.style.maxHeight = content.scrollHeight + 'px'; |
| } else { |
| content.style.maxHeight = '0px'; |
| } |
| }); |
| }); |
| |
| }); |
| </script> |
| </body> |
| </html> |
| <!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> |
|
|
