Spaces:
Running
Running
Here is the proposal: A Modular, Tag-less Quality-Control & Selection System for Protein Production in E. coli
e75b376 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Synthetic Biology QC System - Tag-less Cheater Detection</title> | |
| <meta name="description" content="A production-ready scrollytelling website explaining a synthetic-biology system for detecting Type-2 cheaters in E. coli via native stress pathways"> | |
| <meta property="og:title" content="Synthetic Biology QC System"> | |
| <meta property="og:description" content="Tag-less quality control system detecting cheaters via stress pathways"> | |
| <meta property="og:type" content="website"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="pt-16"> | |
| <!-- Progress Bar --> | |
| <div class="progress-container fixed top-16 left-0 right-0 z-50 bg-gray-800/80 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto px-4 py-2"> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>S0: Cheater Problem</span> | |
| <span>S1: Constraints</span> | |
| <span>S2: Stress Sensors</span> | |
| <span>S3: Production Gate</span> | |
| <span>S4: Actuator & Latch</span> | |
| <span>S5: Certificate</span> | |
| <span>S6: Antidote</span> | |
| <span>S7: Partitioning</span> | |
| <span>S8: Outcomes</span> | |
| </div> | |
| <div class="h-1 bg-gray-700 mt-1 rounded-full"> | |
| <div class="h-full bg-blue-500 rounded-full w-0 progress-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scrollytelling Layout --> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 min-h-screen"> | |
| <!-- Left Column - Narrative --> | |
| <div class="sticky top-32 h-[80vh] flex flex-col justify-center space-y-12"> | |
| <!-- Scene 0 --> | |
| <div class="scene" data-scene="0"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">The Cheater Problem</h2> | |
| <p class="text-gray-300 mb-4">In industrial bioreactors, Type-2 cheaters emerge that transcribe mRNA but fail to translate correctly, generating toxic truncated proteins that sabotage the population.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Type-1 cheaters stop transcription (easier to detect)</li> | |
| <li class="mb-1">• Type-2 cheaters transcribe but fail to translate correctly</li> | |
| <li class="mb-1">• Truncated proteins consume chaperones and trigger stress</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 1 --> | |
| <div class="scene" data-scene="1"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Constraints: Pristine Product, Universal QC</h2> | |
| <p class="text-gray-300 mb-4">Current solutions require fusing tags to the target protein, altering its structure. We need a product-agnostic quality control system.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• No His-tags or inteins allowed</li> | |
| <li class="mb-1">• Must work for any target protein</li> | |
| <li class="mb-1">• Cannot modify the protein sequence</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 2 --> | |
| <div class="scene" data-scene="2"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Dual Stress Sensors: Native Auditors</h2> | |
| <p class="text-gray-300 mb-4">We hijack E. coli's native stress-response pathways: σ32 (cytosolic) and σE/Cpx (envelope). These act as universal auditors reporting on the cell's folding state.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• σ32 detects cytosolic misfolded proteins</li> | |
| <li class="mb-1">• σE/Cpx detects envelope/periplasmic stress</li> | |
| <li class="mb-1">• Both pathways are triggered by Type-2 cheaters</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 3 --> | |
| <div class="scene" data-scene="3"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Production Gate: (Scyt ∨ Senv) ∧ PM</h2> | |
| <p class="text-gray-300 mb-4">The kill logic is only armed during ProductionMode. The gate requires both stress signals AND the production inducer.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Biological OR gate: either stress pathway activates</li> | |
| <li class="mb-1">• Biological AND gate: requires ProductionMode key</li> | |
| <li class="mb-1">• Prevents false positives from ambient stress</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 4 --> | |
| <div class="scene" data-scene="4"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Actuator & Latch: Irreversible Commitment</h2> | |
| <p class="text-gray-300 mb-4">The Actuator (Flp-ssrA recombinase) accumulates only during sustained stress, then flips a DNA cassette to permanently activate a toxin gene.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• ssrA degron filters transient noise</li> | |
| <li class="mb-1">• FRT sites enable irreversible DNA flipping</li> | |
| <li class="mb-1">• Permanent kill decision prevents cheater recovery</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 5 --> | |
| <div class="scene" data-scene="5"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Translation-Completion Certificate</h2> | |
| <p class="text-gray-300 mb-4">Good cells produce an Antidote via translational coupling—only ribosomes that finish the target protein can re-initiate and translate the Antidote gene.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Antidote gene placed immediately after target stop codon</li> | |
| <li class="mb-1">• Dual-plug function: repressor protein + sRNA</li> | |
| <li class="mb-1">• Actively suppresses the kill gate in good cells</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 6 --> | |
| <div class="scene" data-scene="6"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Antidote: Dual-Plug Protection</h2> | |
| <p class="text-gray-300 mb-4">The Antidote provides two layers of protection: transcriptional repression and mRNA degradation.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Repressor protein binds to kill-gate operator</li> | |
| <li class="mb-1">• sRNA triggers degradation of Actuator mRNA</li> | |
| <li class="mb-1">• Ensures only cheaters face irreversible commitment</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 7 --> | |
| <div class="scene" data-scene="7"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">System Partitioning for Stability</h2> | |
| <p class="text-gray-300 mb-4">The decision core resides on the genome for stability, while swappable components are on the plasmid.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Genome: Sensors, Gate, Actuator, Latch</li> | |
| <li class="mb-1">• Plasmid: Target protein, Certificate, ProductionMode key</li> | |
| <li class="mb-1">• Prevents escape via plasmid loss</li> | |
| </ul> | |
| </details> | |
| </div> | |
| <!-- Scene 8 --> | |
| <div class="scene" data-scene="8"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Expected Outcomes & Performance Metrics</h2> | |
| <p class="text-gray-300 mb-4">Modeling predicts ≥10× enrichment of good cells and ≤0.1% false-commit risk.</p> | |
| <details class="mt-4"> | |
| <summary class="text-sm text-gray-400 cursor-pointer">Technical details</summary> | |
| <ul class="mt-2 pl-4 text-sm text-gray-300"> | |
| <li class="mb-1">• Target enrichment: ≥10×</li> | |
| <li class="mb-1">• False commit risk: ≤0.001</li> | |
| <li class="mb-1">• ProductionMode threshold: tunable parameter</li> | |
| </ul> | |
| </details> | |
| </div> | |
| </div> | |
| <!-- Right Column - Visualizations --> | |
| <div class="h-[900vh] relative"> | |
| <div class="sticky top-32 h-[80vh] flex items-center justify-center"> | |
| <div id="visualization-container" class="w-full max-w-lg bg-gray-800 rounded-lg p-6 shadow-xl"> | |
| <svg viewBox="0 0 400 300" class="w-full h-auto"> | |
| <rect x="50" y="50" width="300" height="200" fill="#1e293b" rx="8" /> | |
| <text x="200" y="150" fill="#60a5fa" text-anchor="middle" dominant-baseline="middle" font-size="16" font-weight="bold">System Architecture</text> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |