|
24 | 24 | <a href="#overview">Overview</a> · |
25 | 25 | <a href="#features">Features</a> · |
26 | 26 | <a href="#architecture">Architecture</a> · |
| 27 | + <a href="#world-models-documentation">World Models</a> · |
27 | 28 | <a href="#quick-start">Quick Start</a> · |
28 | 29 | <a href="#reproducibility">Reproducibility</a> · |
29 | 30 | <a href="#supplementary-material">Supplementary material</a> · |
| 31 | + <a href="#glossary">Glossary</a> · |
30 | 32 | <a href="#license">License</a> |
31 | 33 | </p> |
32 | 34 |
|
@@ -84,6 +86,30 @@ Captured still frames and videos are also available for all three platforms: |
84 | 86 | - `docs/world-models/superconducting/superconducting-screenshots/` + `docs/world-models/superconducting/superconducting-world-explore.mp4` |
85 | 87 | - `docs/world-models/neutral-atoms/neutral-atom-screenshots/` + `docs/world-models/neutral-atoms/quera.mp4` |
86 | 88 |
|
| 89 | +### Sample World-Model Videos |
| 90 | + |
| 91 | +<figure style="display:inline-block; margin: 0 12px 12px 0; text-align:center; width:320px;"> |
| 92 | + <video controls width="320" preload="metadata"> |
| 93 | + <source src="docs/world-models/ion-trap/ionq-world-explore.mp4" type="video/mp4"> |
| 94 | + Your browser does not support HTML5 video. |
| 95 | + </video> |
| 96 | + <figcaption style="font-size:0.9rem; margin-top:8px;">Ion-trap world exploration</figcaption> |
| 97 | +</figure> |
| 98 | +<figure style="display:inline-block; margin: 0 12px 12px 0; text-align:center; width:320px;"> |
| 99 | + <video controls width="320" preload="metadata"> |
| 100 | + <source src="docs/world-models/superconducting/superconducting-world-explore.mp4" type="video/mp4"> |
| 101 | + Your browser does not support HTML5 video. |
| 102 | + </video> |
| 103 | + <figcaption style="font-size:0.9rem; margin-top:8px;">Superconducting world exploration</figcaption> |
| 104 | +</figure> |
| 105 | +<figure style="display:inline-block; margin: 0 12px 12px 0; text-align:center; width:320px;"> |
| 106 | + <video controls width="320" preload="metadata"> |
| 107 | + <source src="docs/world-models/neutral-atoms/quera.mp4" type="video/mp4"> |
| 108 | + Your browser does not support HTML5 video. |
| 109 | + </video> |
| 110 | + <figcaption style="font-size:0.9rem; margin-top:8px;">Neutral-atom world exploration</figcaption> |
| 111 | +</figure> |
| 112 | + |
87 | 113 | ## Quick Start |
88 | 114 |
|
89 | 115 | ```bash |
@@ -347,46 +373,40 @@ The core lesson of the Comparison act: **you cannot optimize all six at once.** |
347 | 373 | ## 📁 Repository Structure |
348 | 374 |
|
349 | 375 | ``` |
350 | | -quantum-cinema/ # ← repo root (AWS CDK infrastructure) |
351 | | -│ |
352 | | -├── 📦 bin/ |
353 | | -│ └── app.ts # CDK app entry point |
354 | | -│ |
355 | | -├── 🏗️ lib/ |
356 | | -│ └── qc-worldlabs-stack.ts # Full stack: VPC · ECS · ALB · CloudFront · S3 |
357 | | -│ |
358 | | -├── 🎨 design/ |
359 | | -│ └── design.md # ACM MM 2026 design paper & rationale |
360 | | -│ |
361 | | -├── 🎬 quantum-cinema/ # Next.js 16 application |
362 | | -│ ├── src/ |
363 | | -│ │ ├── app/ |
364 | | -│ │ │ ├── page.tsx # Four-act state machine (step orchestrator) |
365 | | -│ │ │ ├── layout.tsx # Fonts · ThemeProvider · no-flash theme script |
366 | | -│ │ │ └── globals.css # Light + dark token palettes · glow/grid effects |
367 | | -│ │ ├── components/ |
368 | | -│ │ │ ├── StepIndicator.tsx # Top nav: act progress + theme toggle |
369 | | -│ │ │ ├── ParticleField.tsx # Animated per-step particle backdrop |
370 | | -│ │ │ ├── RadarChart.tsx # Six-axis device comparison chart |
371 | | -│ │ │ ├── ThemeProvider.tsx # 🌗 Theme context + localStorage persistence |
372 | | -│ │ │ ├── ThemeToggle.tsx # 🌗 Sun/moon switch |
373 | | -│ │ │ ├── steps/ |
374 | | -│ │ │ │ ├── NobelPrizeStep.tsx # Act 1 — laureates + 125-yr timeline |
375 | | -│ │ │ │ ├── VideoShowcaseStep.tsx # Act 2 — AI-dreamed device clips |
376 | | -│ │ │ │ ├── WorldModelStep.tsx # Act 3 — World Labs scene (opens in new tab) |
377 | | -│ │ │ │ └── ComparisonStep.tsx # Act 4 — radar + metric tables |
378 | | -│ │ │ └── ui/ # shadcn/ui primitives (card, tabs, badge…) |
379 | | -│ │ └── lib/ |
380 | | -│ │ ├── data.ts # ⚛️ Device specs + metric explanations |
381 | | -│ │ └── utils.ts # cn() class merge helper |
382 | | -│ ├── public/ |
383 | | -│ │ ├── videos/ # ion-trap · superconducting · neutral-atoms .mp4 |
384 | | -│ │ └── laureates/ # Clarke · Devoret · Martinis portraits |
385 | | -│ └── Dockerfile # Multi-stage Node 20 Alpine standalone build |
386 | | -│ |
387 | | -├── 🚀 deploy.sh # One-command build + deploy |
388 | | -├── cdk.json |
389 | | -└── package.json # CDK dependencies |
| 376 | +. |
| 377 | +├── .github/ # GitHub actions and workflow configs |
| 378 | +│ └── workflows/ci.yml # CI validation for app, docs, and infra |
| 379 | +├── bin/ |
| 380 | +│ └── app.ts # CDK app entry point |
| 381 | +├── cdk.json # AWS CDK application config |
| 382 | +├── cdk.out/ # generated AWS CDK synthesis assets |
| 383 | +├── deploy.sh # build + deploy script |
| 384 | +├── design/ |
| 385 | +│ └── design.md # research and design rationale |
| 386 | +├── docs/ |
| 387 | +│ ├── en/ # English design and usage docs |
| 388 | +│ ├── zh/ # Chinese design and usage docs |
| 389 | +│ └── world-models/ # world-model creation pipeline and assets |
| 390 | +├── lib/ |
| 391 | +│ └── qc-worldlabs-stack.ts # AWS CDK infrastructure stack |
| 392 | +├── quantum-cinema/ # Next.js 16 application |
| 393 | +│ ├── Dockerfile # frontend container build |
| 394 | +│ ├── package.json # app dependencies |
| 395 | +│ ├── package-lock.json # app lockfile |
| 396 | +│ ├── postcss.config.mjs |
| 397 | +│ ├── tsconfig.json # app TypeScript config |
| 398 | +│ ├── eslint.config.mjs |
| 399 | +│ ├── next.config.ts |
| 400 | +│ ├── components.json |
| 401 | +│ ├── public/ # static assets and video files |
| 402 | +│ └── src/ # React app source code |
| 403 | +├── CITATION.cff # academic citation metadata |
| 404 | +├── LICENSE # project license |
| 405 | +├── README.md # repository overview and usage guide |
| 406 | +├── SUPPLEMENTARY.md # reproducibility and provenance guide |
| 407 | +├── package.json # root dependencies and scripts |
| 408 | +├── package-lock.json # root npm lockfile |
| 409 | +└── tsconfig.json # root TypeScript config |
390 | 410 | ``` |
391 | 411 |
|
392 | 412 | --- |
@@ -454,7 +474,30 @@ On success, CDK prints three outputs: |
454 | 474 |
|
455 | 475 | --- |
456 | 476 |
|
457 | | -## 🛡️ Security Model |
| 477 | +## � Glossary |
| 478 | + |
| 479 | +| Term | Explanation | |
| 480 | +|---|---| |
| 481 | +| AWS CDK | A toolkit for defining cloud infrastructure using TypeScript code, so deployment is repeatable and version-controlled. | |
| 482 | +| ALB | Application Load Balancer, a traffic manager that accepts HTTP(S) requests and forwards them to the backend service only if they meet the configured rules. | |
| 483 | +| CDN | Content Delivery Network, a distributed cache that serves static and video assets from servers closer to the viewer for faster loading. | |
| 484 | +| CloudFront | AWS’s CDN service, used here to deliver static content, enforce HTTPS, and protect the backend with a secret header gate. | |
| 485 | +| Container | A packaged application and its dependencies that can run consistently across environments, like a lightweight virtual machine. | |
| 486 | +| ECS Fargate | A serverless AWS service that runs containers without requiring you to manage servers or clusters directly. | |
| 487 | +| Generative world models | AI-generated 3D scenes that approximate what hidden quantum hardware would look like, based on prompt-driven synthesis rather than physical cameras. | |
| 488 | +| Marble | A World Labs service that hosts and streams the generative 3D quantum-world scenes used in the app. | |
| 489 | +| Nano-Banana | The concept-generation stage used to turn reference images into a world model prompt for Marble. | |
| 490 | +| Next.js | A React-based framework for building fast web applications, with server-side rendering and static site generation. | |
| 491 | +| Private subnet | A network segment in AWS that does not allow direct public internet access, making backend services harder to reach from outside. | |
| 492 | +| Quantum world model | A visual, explorable representation of a quantum computer architecture, designed to make abstract quantum behavior more intuitive. | |
| 493 | +| S3 | AWS Simple Storage Service, used here to store CloudFront access logs and static assets securely. | |
| 494 | +| TLS | Transport Layer Security, the protocol that encrypts web traffic between the browser and CloudFront. | |
| 495 | +| VPC | Virtual Private Cloud, an isolated network environment inside AWS that contains the application’s subnets and security controls. | |
| 496 | +| World Labs | The company and generative platform behind Marble, which provides the streamed 3D scenes for each device architecture. | |
| 497 | + |
| 498 | +--- |
| 499 | + |
| 500 | +## �🛡️ Security Model |
458 | 501 |
|
459 | 502 | | Layer | Mechanism | |
460 | 503 | |---|---| |
|
0 commit comments