# Inside the Artificial Cell — Molecular Atlas / ver2

English/Chinese, static, multiscale WebGL demonstration for a classroom presentation. English is the default language; use the **EN / 中文** buttons in the top-right corner to switch, and the choice is saved in browser local storage. All runtime resources are local to this folder. It uses pinned Three.js r170 (MIT; `vendor/LICENSE`), not the previous Canvas-2D projection. No npm install, build step, backend, CDN, telemetry or runtime network service is needed.

## Quick start

From this folder:

```powershell
python -m http.server 4174 --bind 127.0.0.1
```

Open http://127.0.0.1:4174/ in current Chrome, Edge or Firefox with WebGL 2 enabled. Serve over HTTP; `file://` does not support the local ES-module/fetch workflow reliably.

The version is independent of the old files in the parent directory. You can also serve the parent directory and open `/ver2/` because all imports and data paths are relative.

## Demonstration controls

- **Cell / Molecular / Active site**: select the three main scales.
- **Six chapters**: jump to a mechanism, with an explanation and a local evidence note.
- **Inspect a structure**: GOx, HRP, OmpF, B-DNA, separate transport model or separate DNA-switch model.
- **Drag / wheel / right drag**: orbit / zoom / pan. Touch gestures are supported by OrbitControls.
- **Click an atom**: show PDB ID, atom, residue and chain. Protein coordinates stay internally rigid.
- **Backbone / Atoms**: switch the protein or DNA-reference representation; in the active-site view the button instead hides/shows the residue context.
- **Compare with free enzymes**: show a separate control with matching initial particles and chemistry. It does not impose a rate advantage for immobilization.
- **Play tour**: a 150-second, six-chapter tour at 1×. The OmpF chapter also switches to the independent coarse transport model. It stops at the end.
- **Pause motion** freezes diffusion, event progression, tether replay and the tour. Camera manipulation remains available.
- **Reset stochastic models** restores the random seeds, particles, counters and DNA-switch animation.
- **Space** pauses/resumes; **left/right arrows** change chapters; **Present** requests fullscreen.
- **EN / 中文** switches the interface language. The selected language persists on the same browser; clearing `artificial-cell-language` from local storage restores English.

## What is real, and what is modeled

| Component | Source / treatment | Important limitation |
|---|---|---|
| GOx | PDB 1CF3; 1.9 Å X-ray; 4,608 selected heavy atoms | Deposited protomer reference with FAD/glycan coordinates; native enzyme dimer is not reconstructed |
| HRP | PDB 1ATJ; 2.15 Å X-ray; chain A, 2,414 heavy atoms | A monomer selected from the downloaded coordinate assembly |
| OmpF | PDB 2OMF; 2.4 Å X-ray; trimer, 8,097 heavy atoms | Membrane placement is illustrative, not obtained from a membrane-orientation database |
| DNA reference | PDB 1BNA; 1.9 Å X-ray; 486 heavy atoms | Isolated 12-bp duplex, not the designed origami sequence |
| Full scaffold | Designed 16-helix array; 0.34 nm/bp, 10.5 bp/turn, 2.5 nm axis spacing | No cadnano staple routing, oxDNA relaxation or atomistic origami reconstruction |
| Membrane | Representative 4-nm bilayer; 1-μm overview and separate local patch | Lipids are subsampled / schematic; no experimentally assigned lipid composition or membrane MD |
| Linkers | Geometric flexible-linker illustration | Attachment residues and chemistry are not experimentally specified; no claim of exact enzyme orientation |
| Heme pocket | HRP heme and residues within 1.05 nm of Fe | Heme sticks are distance-inferred, without bond orders; surrounding context can be shown |
| Tether motion | Precomputed seeded Ornstein–Uhlenbeck harmonic-tether trajectory | Arbitrary parameters and time; not a molecular-dynamics trajectory |
| Substrate movement | Live seeded Gaussian Brownian increments, Δx = √(2DΔt) N(0,1) | Coarse model units; not fitted to measurements; no solvent, electrostatics or hydrodynamics |
| Transport | Independent Brownian mask with a geometric pore | Not OmpF conductance, free-energy barrier, universal 600-Da cutoff or atom-by-atom permeation |
| DNA switch | Staged toehold association, replacement of twelve sites and hinge closure | Keyframed educational mechanism, not oxDNA or a transition-state pathway |
| Whole cell | Integration of separate ideas | Not a single published experiment or a self-sustaining cell |

The downloaded raw coordinate files are retained in `assets/structures/*.pdb1`. Preprocessing converts Å to nm, centers coordinates, removes hydrogens/waters and retains the first/A alternate location. It does not add missing residues, model protonation states or perform docking. The selected structures contain **15,605 heavy atoms in total**. Atom spheres use element-dependent display radii; they are not electron-density maps or calculated solvent-excluded surfaces. Cα/P traces are backbone guides, not secondary-structure ribbon assignments.

## Reaction-diffusion model

The scene uses the GOx–HRP cascade as a clear teaching example:

1. GOx: glucose + O₂ → gluconolactone + H₂O₂.
2. HRP: H₂O₂ + 2 AH → 2 H₂O + 2 A• (AH denotes donor equivalents).

Downstream lactone hydrolysis is omitted. The atomistic active-site view remains static while textual redox-cycle labels illustrate Fe(III), Compound I and Compound II. **No QM/MM calculation, catalytic bond trajectory or ligand-binding pose has been produced.**

The live model uses 180 coarse species markers, a reflecting box with half-width 18 nm, illustrative capture radius 3.6 nm, co-substrate neighborhood 7 nm, and event/dwell parameters in arbitrary model time. Cargo encounters two-nanometer protein envelopes and 1.05-nm-radius DNA helix cylinders; rejection enforces coarse excluded volume. These are not atomic steric surfaces. The fixed and free controls share initial particle coordinates; free enzymes diffuse, while fixed enzymes use a harmonic tether. Water is implicit solvent: a consumed-peroxide marker denotes solvent return, not an explicit count of two water molecules. Model counters are catalytic-event counts, not measured rates or a reproduction of any published enhancement factor.

The illustrative diffusion coefficients are 20 / 42 nm² per arbitrary model-time unit for most species / peroxide. Rendering slows model time on very low frame rates; the guided-tour clock follows display time independently. There is deliberately no claimed conversion from one display second to a physical microsecond.

## Literature context

- Linko et al. (2015), *A modular DNA origami-based enzyme cascade nanoreactor*, Chemical Communications: [paper record](https://consensus.app/papers/details/6c694c19862e5938816c5b1476046016/?utm_source=unknown).
- Klein et al. (2019), *Enhanced Catalysis from Multienzyme Cascades Assembled on a DNA Origami Triangle*, ACS Nano: [paper record](https://consensus.app/papers/details/cad2b95d485f5f91bb8875829dd87403/?utm_source=unknown). Its reported enhancement is not imposed on this model.
- Zhang et al. (2023), *An Artificial Liposome Compartment with Size Exclusion Molecular Transport*, Chemistry—A European Journal: [paper record](https://consensus.app/papers/details/96c5a6e925c458c0b60b04f453aad0c7/?utm_source=unknown).
- Lin et al. (2023), *Dynamic Assembly of Cascade Enzymes by the Shape Transformation of a DNA Scaffold*, Advanced Functional Materials: [paper record](https://consensus.app/papers/details/18775deae78e5d0cbe156246474908b2/?utm_source=unknown). The hinge shown here is an explanatory module, not that paper's reconstructed geometry.

Coordinate records, X-ray resolutions, selections and raw-file SHA-256 hashes are stored in `assets/sources.json`. Structure descriptions and citations are also retained in each `*.meta.json` file. RCSB entry links appear in the page; they are optional outbound references, not runtime asset dependencies.

## Nginx deployment

Unzip `artificial-cell-ver2.zip` into your static root, preserving `assets/` and `vendor/`. Alternatively copy:

```
index.html   styles.css   app.js   geometry.js   simulation.js
metadata.json   README.md   assets/   vendor/
```

An example server block is included in `nginx-site.conf`; change `root` and `server_name` for your server. Keep Nginx's normal `mime.types` configuration so `.js` returns a JavaScript MIME type and `.json` returns JSON. This is not an SPA: missing assets should return 404, not `index.html`.

For an existing website, copying the runtime into `<site-root>/ver2/` is sufficient; open `https://your-domain/ver2/`. Then validate/reload your server configuration in the normal way (`nginx -t`, followed by reload). No remote server was modified by this task.

Use revalidation or short caching for the unversioned JS/CSS filenames. The sample uses one hour, not `immutable` caching. The ZIP includes coordinate provenance and the Three.js license; it excludes tests, screenshots and authoring scripts.

## Development and validation

```
node --test tests/simulation.test.js
python tools/prepare_assets.py
python tools/package.py
```

`prepare_assets.py` only uses Python's standard library and existing local coordinates. It also regenerates the precomputed tether trajectory with seed 41. `fetch_assets.py` is an optional authoring utility using this Codex installation's RCSB skill for metadata and public downloads; adjust the skill path on another workstation. It is never needed for deployment.

`tests/browser.cjs` uses Playwright and installed Chrome. Set `PLAYWRIGHT_MODULE` to a Playwright package directory if it is not installed on the normal Node module path. It checks all views, atom picking, pause, comparison, representations, labels, tour progression, mobile layout, console errors and local-only resource loading. Screenshots and reports are in `validation/`. Software-WebGL testing confirms function, not performance on every GPU.

For higher scientific fidelity, replace the designed scaffold with an experimentally sourced routed design and replace illustrative trajectories with equilibrated, validated MD/oxDNA/QM/MM outputs. Those simulations require additional preparation, force-field choices, sampling and validation; they have not been silently substituted by the browser animation.