Hugging Face's logo

Spaces:
caustino
/
anycoder-96664f67
Running

App Files Community
caustino commited on
Commit
697e414
·
verified ·
1 Parent(s): e3340f1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +566 -19
index.html CHANGED
@@ -1,19 +1,566 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RIGOR-PRS-Secure++: FIG. 2 Animated Flowchart</title>
7
+ <!-- Importing Inter font for modern UI -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+
10
+ <style>
11
+ :root {
12
+ --bg-dark: #0b1120;
13
+ --bg-card: #1e293b;
14
+ --bg-glass: rgba(30, 41, 59, 0.7);
15
+ --text-primary: #f8fafc;
16
+ --text-secondary: #94a3b8;
17
+ --accent-cyan: #06b6d4; /* PQC/Cyber */
18
+ --accent-purple: #8b5cf6; /* Genomics */
19
+ --accent-amber: #f59e0b; /* Security/Warning */
20
+ --accent-green: #10b981; /* Success */
21
+ --border-color: rgba(148, 163, 184, 0.2);
22
+ --font-main: 'Inter', sans-serif;
23
+ --font-code: 'JetBrains Mono', monospace;
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ margin: 0;
29
+ padding: 0;
30
+ }
31
+
32
+ body {
33
+ background-color: --bg-dark;
34
+ background-image:
35
+ radial-gradient(at 10% 10%, rgba(6, 182, 212, 0.1) 0%, transparent 40%),
36
+ radial-gradient(at 90% 90%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
37
+ background-attachment: fixed;
38
+ color: var(--text-primary);
39
+ font-family: var(--font-main);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ /* --- Header & Nav --- */
45
+ header {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ padding: 1.5rem 2rem;
50
+ border-bottom: 1px solid var(--border-color);
51
+ background: rgba(11, 17, 32, 0.8);
52
+ backdrop-filter: blur(10px);
53
+ position: sticky;
54
+ top: 0;
55
+ z-index: 100;
56
+ }
57
+
58
+ .brand {
59
+ font-weight: 700;
60
+ font-size: 1.2rem;
61
+ letter-spacing: -0.025em;
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 0.5rem;
65
+ }
66
+
67
+ .brand span {
68
+ color: var(--accent-cyan);
69
+ }
70
+
71
+ .anycoder-link {
72
+ font-family: var(--font-code);
73
+ font-size: 0.8rem;
74
+ color: var(--text-secondary);
75
+ text-decoration: none;
76
+ border: 1px solid var(--border-color);
77
+ padding: 0.4rem 0.8rem;
78
+ border-radius: 4px;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .anycoder-link:hover {
83
+ border-color: var(--accent-cyan);
84
+ color: var(--accent-cyan);
85
+ box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
86
+ }
87
+
88
+ /* --- Layout --- */
89
+ main {
90
+ max-width: 1200px;
91
+ margin: 0 auto;
92
+ padding: 2rem;
93
+ }
94
+
95
+ .grid-container {
96
+ display: grid;
97
+ grid-template-columns: 1fr;
98
+ gap: 2rem;
99
+ }
100
+
101
+ @media (min-width: 900px) {
102
+ .grid-container {
103
+ grid-template-columns: 1fr 1fr;
104
+ }
105
+ .full-width {
106
+ grid-column: span 2;
107
+ }
108
+ }
109
+
110
+ /* --- Cards --- */
111
+ .card {
112
+ background: var(--bg-card);
113
+ border: 1px solid var(--border-color);
114
+ border-radius: 12px;
115
+ padding: 2rem;
116
+ position: relative;
117
+ overflow: hidden;
118
+ transition: transform 0.3s ease;
119
+ }
120
+
121
+ .card:hover {
122
+ border-color: rgba(148, 163, 184, 0.5);
123
+ }
124
+
125
+ .card-header {
126
+ margin-bottom: 1.5rem;
127
+ }
128
+
129
+ .card-title {
130
+ font-size: 1.1rem;
131
+ font-weight: 600;
132
+ color: var(--accent-cyan);
133
+ margin-bottom: 0.5rem;
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 0.5rem;
137
+ }
138
+
139
+ .card-subtitle {
140
+ font-size: 0.9rem;
141
+ color: var(--text-secondary);
142
+ }
143
+
144
+ /* --- Flowchart Visualization --- */
145
+ .flowchart-container {
146
+ position: relative;
147
+ padding: 1rem;
148
+ background: rgba(0, 0, 0, 0.3);
149
+ border-radius: 8px;
150
+ margin-top: 1rem;
151
+ min-height: 350px;
152
+ display: flex;
153
+ flex-direction: column;
154
+ justify-content: center;
155
+ align-items: center;
156
+ }
157
+
158
+ .flow-step {
159
+ width: 100%;
160
+ height: 60px;
161
+ border: 1px solid var(--border-color);
162
+ background: rgba(30, 41, 59, 0.5);
163
+ margin: 0.5rem 0;
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ font-family: var(--font-code);
168
+ font-size: 0.85rem;
169
+ color: var(--text-secondary);
170
+ border-radius: 6px;
171
+ position: relative;
172
+ transition: all 0.3s;
173
+ opacity: 0.5;
174
+ }
175
+
176
+ .flow-step.active {
177
+ border-color: var(--accent-cyan);
178
+ color: var(--text-primary);
179
+ background: rgba(6, 182, 212, 0.1);
180
+ opacity: 1;
181
+ box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
182
+ }
183
+
184
+ .flow-step[data-type="security"] {
185
+ border-color: var(--accent-amber);
186
+ }
187
+
188
+ .flow-step[data-type="security"].active {
189
+ background: rgba(245, 158, 11, 0.1);
190
+ box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
191
+ }
192
+
193
+ .flow-step[data-type="genomic"] {
194
+ border-color: var(--accent-purple);
195
+ }
196
+
197
+ .flow-step[data-type="genomic"].active {
198
+ background: rgba(139, 92, 246, 0.1);
199
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
200
+ }
201
+
202
+ /* Animation Elements */
203
+ .data-packet {
204
+ width: 20px;
205
+ height: 20px;
206
+ background: var(--text-primary);
207
+ border-radius: 50%;
208
+ position: absolute;
209
+ left: 50%;
210
+ top: -20px; /* Start above first step */
211
+ transform: translateX(-50%);
212
+ box-shadow: 0 0 10px var(--text-primary);
213
+ z-index: 10;
214
+ display: none;
215
+ }
216
+
217
+ .data-packet.animating {
218
+ display: block;
219
+ animation: flowDown 3s linear forwards;
220
+ }
221
+
222
+ @keyframes flowDown {
223
+ 0% { top: -20px; opacity: 1; }
224
+ 100% { top: 100%; opacity: 0; }
225
+ }
226
+
227
+ .controls {
228
+ margin-top: 1.5rem;
229
+ display: flex;
230
+ gap: 1rem;
231
+ justify-content: center;
232
+ }
233
+
234
+ button {
235
+ background: var(--accent-cyan);
236
+ color: #000;
237
+ font-weight: 700;
238
+ border: none;
239
+ padding: 0.8rem 1.5rem;
240
+ border-radius: 6px;
241
+ cursor: pointer;
242
+ font-family: var(--font-code);
243
+ transition: all 0.2s;
244
+ }
245
+
246
+ button:hover {
247
+ background: #0891b2;
248
+ transform: translateY(-2px);
249
+ }
250
+
251
+ button.secondary {
252
+ background: transparent;
253
+ border: 1px solid var(--border-color);
254
+ color: var(--text-secondary);
255
+ }
256
+
257
+ button.secondary:hover {
258
+ border-color: var(--text-primary);
259
+ color: var(--text-primary);
260
+ }
261
+
262
+ /* --- Technical Specs Table --- */
263
+ .tech-table {
264
+ width: 100%;
265
+ border-collapse: collapse;
266
+ font-family: var(--font-code);
267
+ font-size: 0.85rem;
268
+ margin-top: 1rem;
269
+ }
270
+
271
+ .tech-table th, .tech-table td {
272
+ text-align: left;
273
+ padding: 0.8rem;
274
+ border-bottom: 1px solid var(--border-color);
275
+ }
276
+
277
+ .tech-table th {
278
+ color: var(--accent-cyan);
279
+ font-weight: 600;
280
+ }
281
+
282
+ .tech-table td:nth-child(2) {
283
+ color: var(--accent-purple);
284
+ }
285
+
286
+ /* --- Pipeline Timeline --- */
287
+ .pipeline-list {
288
+ list-style: none;
289
+ border-left: 2px solid var(--border-color);
290
+ padding-left: 1.5rem;
291
+ }
292
+
293
+ .pipeline-item {
294
+ position: relative;
295
+ margin-bottom: 2rem;
296
+ }
297
+
298
+ .pipeline-item::before {
299
+ content: '';
300
+ width: 10px;
301
+ height: 10px;
302
+ background: var(--bg-card);
303
+ border: 2px solid var(--accent-cyan);
304
+ border-radius: 50%;
305
+ position: absolute;
306
+ left: -1.75rem;
307
+ top: 0;
308
+ }
309
+
310
+ .pipeline-item h3 {
311
+ font-size: 1rem;
312
+ margin-bottom: 0.5rem;
313
+ color: var(--text-primary);
314
+ }
315
+
316
+ .pipeline-item p {
317
+ font-size: 0.9rem;
318
+ color: var(--text-secondary);
319
+ }
320
+
321
+ /* --- Status Badge --- */
322
+ .badge {
323
+ display: inline-block;
324
+ padding: 0.2rem 0.6rem;
325
+ border-radius: 4px;
326
+ font-size: 0.7rem;
327
+ font-family: var(--font-code);
328
+ margin-right: 0.5rem;
329
+ }
330
+ .badge-pqc { background: rgba(6, 182, 212, 0.2); color: var(--accent-cyan); }
331
+ .badge-gen { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); }
332
+
333
+ /* --- Footer --- */
334
+ footer {
335
+ text-align: center;
336
+ padding: 2rem;
337
+ color: var(--text-secondary);
338
+ font-size: 0.8rem;
339
+ border-top: 1px solid var(--border-color);
340
+ margin-top: 2rem;
341
+ }
342
+
343
+ </style>
344
+ </head>
345
+ <body>
346
+
347
+ <header>
348
+ <div class="brand">
349
+ <span>//</span> RIGOR-PRS-Secure++
350
+ </div>
351
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
352
+ </header>
353
+
354
+ <main>
355
+ <div class="grid-container">
356
+
357
+ <!-- Intro Section -->
358
+ <div class="card full-width">
359
+ <div class="card-header">
360
+ <h2 class="card-title">Technical Specification: RIGOR-PRS-Secure++</h2>
361
+ <p class="card-subtitle">Post-Quantum Genomic Evidence Generation Architecture</p>
362
+ </div>
363
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">
364
+ The RIGOR-PRS-Secure++ algorithm represents a forward-looking solution engineered to address a critical challenge at the intersection of genomics and cybersecurity. By integrating a new generation of post-quantum cryptographic primitives into a multi-stage processing pipeline, the algorithm provides end-to-end protection for the generation of polygenic risk scores.
365
+ </p>
366
+ <div style="display: flex; gap: 1rem; font-family: var(--font-code); font-size: 0.8rem;">
367
+ <span class="badge badge-pqc">Kyber-768 KEM</span>
368
+ <span class="badge badge-pqc">Dilithium-III Sig</span>
369
+ <span class="badge badge-gen">GRCh38 Alignment</span>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Left Column: Pipeline Flow -->
374
+ <div class="card">
375
+ <div class="card-header">
376
+ <h2 class="card-title">Pipeline Execution</h2>
377
+ <p class="card-subtitle">Modular Operational Phases</p>
378
+ </div>
379
+ <ul class="pipeline-list">
380
+ <li class="pipeline-item">
381
+ <h3>Phase 0: Initialize PQC Environment</h3>
382
+ <p>Establishes foundational Kyber-768 keys and secure TLS channels.</p>
383
+ </li>
384
+ <li class="pipeline-item">
385
+ <h3>Phase 1: Secure Data Ingestion</h3>
386
+ <p>Client-side hybrid encryption of raw VCF data using AES-256-GCM encapsulated by Kyber.</p>
387
+ </li>
388
+ <li class="pipeline-item">
389
+ <h3>Phase 2: PQC-Secured Annotation</h3>
390
+ <p>Secure API queries to external databases over PQC-TLS channels.</p>
391
+ </li>
392
+ <li class="pipeline-item">
393
+ <h3>Phase 3: Encrypted Model Processing</h3>
394
+ <p>PRS computation within hardware-secured Trusted Execution Environments (TEE).</p>
395
+ </li>
396
+ <li class="pipeline-item">
397
+ <h3>Phase 4: Final Ledger Commitment</h3>
398
+ <p>Immutable blockchain-verified audit trail generation.</p>
399
+ </li>
400
+ </ul>
401
+ </div>
402
+
403
+ <!-- Right Column: FIG. 2 Animated Flowchart -->
404
+ <div class="card">
405
+ <div class="card-header">
406
+ <h2 class="card-title">FIG. 2: QRDE-AEAD Flowchart</h2>
407
+ <p class="card-subtitle">Dual-Envelope Authenticated Encryption</p>
408
+ </div>
409
+
410
+ <div class="flowchart-container" id="flowchart">
411
+ <div class="data-packet" id="packet"></div>
412
+
413
+ <!-- Step 1: Input -->
414
+ <div class="flow-step" data-step="1" data-type="genomic">
415
+ Raw Genomic Payload (VCF)
416
+ </div>
417
+
418
+ <!-- Step 2: KEM -->
419
+ <div class="flow-step" data-step="2" data-type="security">
420
+ Kyber-768 KEM (Key Encapsulation)
421
+ </div>
422
+
423
+ <!-- Step 3: Inner Envelope -->
424
+ <div class="flow-step" data-step="3" data-type="security">
425
+ AES-256-GCM (Inner Envelope)
426
+ </div>
427
+
428
+ <!-- Step 4: Outer Envelope -->
429
+ <div class="flow-step" data-step="4" data-type="security">
430
+ HMAC-SHA3-256 (Outer Envelope)
431
+ </div>
432
+
433
+ <!-- Step 5: Output -->
434
+ <div class="flow-step" data-step="5" data-type="pqc">
435
+ Final Encrypted Package
436
+ </div>
437
+ </div>
438
+
439
+ <div class="controls">
440
+ <button onclick="startAnimation()">Simulate Encryption</button>
441
+ <button class="secondary" onclick="resetAnimation()">Reset</button>
442
+ </div>
443
+
444
+ <div style="margin-top: 1rem; font-family: var(--font-code); font-size: 0.8rem; color: var(--text-secondary);">
445
+ <p>> Status: <span id="status-text">Waiting for input...</span></p>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Bottom: Technical Specs -->
450
+ <div class="card full-width">
451
+ <div class="card-header">
452
+ <h2 class="card-title">Cryptographic Primitives</h2>
453
+ <p class="card-subtitle">NIST Finalized Standards Implementation</p>
454
+ </div>
455
+ <table class="tech-table">
456
+ <thead>
457
+ <tr>
458
+ <th>Primitive</th>
459
+ <th>Algorithm</th>
460
+ <th>Security Level</th>
461
+ <th>Application</th>
462
+ </tr>
463
+ </thead>
464
+ <tbody>
465
+ <tr>
466
+ <td>KEM</td>
467
+ <td>Kyber-768</td>
468
+ <td>NIST Level 3</td>
469
+ <td>Secure Key Exchange / TLS</td>
470
+ </tr>
471
+ <tr>
472
+ <td>Digital Signature</td>
473
+ <td>Dilithium-III</td>
474
+ <td>NIST Level 2</td>
475
+ <td>Authenticity / Ledger Signing</td>
476
+ </tr>
477
+ <tr>
478
+ <td>Symmetric Cipher</td>
479
+ <td>AES-256-GCM</td>
480
+ <td>Standard</td>
481
+ <td>Bulk Data Encryption</td>
482
+ </tr>
483
+ <tr>
484
+ <td>Hash Function</td>
485
+ <td>SHA3-256</td>
486
+ <td>Standard</td>
487
+ <td>Integrity Checks / MAC</td>
488
+ </tr>
489
+ </tbody>
490
+ </table>
491
+ </div>
492
+
493
+ </div>
494
+ </main>
495
+
496
+ <footer>
497
+ <p>&copy; 2025 RIGOR-PRS-Secure++ Technical Specification. All Rights Reserved.</p>
498
+ <p>Designed for U.S. District Court / Federal Evidence Stack Integration.</p>
499
+ </footer>
500
+
501
+ <script>
502
+ function startAnimation() {
503
+ const packet = document.getElementById('packet');
504
+ const steps = document.querySelectorAll('.flow-step');
505
+ const statusText = document.getElementById('status-text');
506
+
507
+ // Reset first
508
+ resetAnimation();
509
+
510
+ packet.classList.add('animating');
511
+ statusText.innerText = "Ingesting Raw VCF...";
512
+ statusText.style.color = "var(--text-secondary)";
513
+
514
+ // Step Activation Logic based on animation progress
515
+ // Total animation is 3s.
516
+ // 0-0.5s: Step 1
517
+ // 0.5-1.5s: Step 2
518
+ // 1.5-2.0s: Step 3
519
+ // 2.0-2.5s: Step 4
520
+ // 2.5-3.0s: Step 5
521
+
522
+ setTimeout(() => {
523
+ activateStep(1, "Kyber Key Encapsulation...");
524
+ }, 500);
525
+
526
+ setTimeout(() => {
527
+ activateStep(2, "AES-GCM Inner Encryption...");
528
+ }, 1500);
529
+
530
+ setTimeout(() => {
531
+ activateStep(3, "HMAC Outer Authentication...");
532
+ }, 2000);
533
+
534
+ setTimeout(() => {
535
+ activateStep(4, "Committing to Ledger...");
536
+ }, 2500);
537
+
538
+ setTimeout(() => {
539
+ activateStep(5, "Encryption Complete. Immutable.");
540
+ statusText.style.color = "var(--accent-green)";
541
+ }, 3000);
542
+ }
543
+
544
+ function activateStep(index, text) {
545
+ const steps = document.querySelectorAll('.flow-step');
546
+ steps.forEach(s => s.classList.remove('active'));
547
+
548
+ if(index <= 5) {
549
+ steps[index-1].classList.add('active');
550
+ document.getElementById('status-text').innerText = text;
551
+ }
552
+ }
553
+
554
+ function resetAnimation() {
555
+ const packet = document.getElementById('packet');
556
+ const steps = document.querySelectorAll('.flow-step');
557
+ const statusText = document.getElementById('status-text');
558
+
559
+ packet.classList.remove('animating');
560
+ steps.forEach(s => s.classList.remove('active'));
561
+ statusText.innerText = "Waiting for input...";
562
+ statusText.style.color = "var(--text-secondary)";
563
+ }
564
+ </script>
565
+ </body>
566
+ </html>