Last active
February 15, 2026 21:23
-
-
Save wd15/f33d4d52bdf2f0eb39a6b5de793001ab to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Uncertainty Quantification Loop</title> | |
| <style> | |
| :root { | |
| --physical-bg: #e8f5e9; | |
| --physical-border: #2e7d32; | |
| --digital-bg: #e3f2fd; | |
| --digital-border: #1565c0; | |
| --text-main: #263238; | |
| --text-sub: #546e7a; | |
| --arrow-color: #78909c; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #ffffff; | |
| } | |
| /* Main Container */ | |
| .slide-container { | |
| position: relative; | |
| width: 960px; | |
| height: 540px; | |
| background: #ffffff; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| border: 1px solid #e0e0e0; | |
| overflow: hidden; | |
| } | |
| /* SVG for drawing perfect arched arrows */ | |
| .arrow-layer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| /* Base Node Styling */ | |
| .node { | |
| position: absolute; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .node h3 { | |
| margin: 0 0 10px 0; | |
| font-size: 18px; | |
| color: var(--text-main); | |
| } | |
| .node p { | |
| margin: 0; | |
| font-size: 14px; | |
| color: var(--text-sub); | |
| line-height: 1.4; | |
| } | |
| .bold-tag { | |
| font-weight: 600; | |
| color: var(--text-main); | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| /* Specific Nodes */ | |
| .physical-node { | |
| top: 175px; | |
| left: 30px; | |
| width: 270px; | |
| height: 190px; | |
| background-color: var(--physical-bg); | |
| border: 3px solid var(--physical-border); | |
| } | |
| .digital-node { | |
| top: 175px; | |
| right: 30px; | |
| width: 280px; | |
| height: 190px; | |
| background-color: var(--digital-bg); | |
| border: 3px solid var(--digital-border); | |
| } | |
| /* Equations inside the Nodes */ | |
| .node-equation-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 10px; | |
| align-items: center; | |
| } | |
| .node-equation { | |
| font-family: 'Cambria Math', 'Times New Roman', serif; | |
| font-size: 16px; | |
| color: var(--text-main); | |
| background: rgba(255, 255, 255, 0.7); | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| border: 1px solid rgba(0,0,0,0.15); | |
| display: inline-block; | |
| } | |
| /* Arrow Text Labels */ | |
| .arrow-label { | |
| position: absolute; | |
| text-align: center; | |
| width: 600px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 2; | |
| } | |
| .top-label { | |
| top: 60px; | |
| } | |
| .bottom-label { | |
| top: 420px; | |
| } | |
| .arrow-label .title { | |
| font-weight: bold; | |
| font-size: 18px; | |
| color: #455a64; | |
| margin-bottom: 8px; | |
| } | |
| /* Probabilities Embedded ON the Arrows */ | |
| .on-arrow-equation { | |
| position: absolute; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-family: 'Cambria Math', 'Times New Roman', serif; | |
| font-size: 18px; | |
| color: #1565c0; | |
| background: #ffffff; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| border: 2px solid var(--arrow-color); | |
| z-index: 3; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
| } | |
| .prob-top { | |
| top: 150px; | |
| } | |
| .prob-bottom { | |
| top: 390px; | |
| } | |
| /* Standard Equation Box Styling */ | |
| .equation-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .arrow-equation { | |
| font-family: 'Cambria Math', 'Times New Roman', serif; | |
| font-size: 18px; | |
| color: var(--text-main); | |
| background: rgba(0, 0, 0, 0.04); | |
| display: inline-block; | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| border: 1px solid #cfd8dc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide-container"> | |
| <svg class="arrow-layer"> | |
| <defs> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#78909c" /> | |
| </marker> | |
| </defs> | |
| <path d="M 660 230 Q 480 70 300 230" | |
| fill="none" stroke="#78909c" stroke-width="2" | |
| marker-end="url(#arrowhead)" /> | |
| <path d="M 300 310 Q 480 470 660 310" | |
| fill="none" stroke="#78909c" stroke-width="2" | |
| marker-end="url(#arrowhead)" /> | |
| </svg> | |
| <div class="arrow-label top-label"> | |
| <div class="title">Forward Problem: Control</div> | |
| <div class="equation-container"> | |
| <div class="arrow-equation" title="Control Law"><i>U<sub>i</sub></i> = <i>C</i>(<i>X<sub>i+1</sub></i> , <i>X<sub>i</sub></i>)</div> | |
| </div> | |
| </div> | |
| <div class="arrow-label bottom-label"> | |
| <div class="title">Inverse Problem: Data Assimilation</div> | |
| <div class="equation-container"> | |
| <div class="arrow-equation" title="Parameter Update (Innovation)"><i>θ</i> = <i>f</i>(<i>Y</i> − <i>Ŷ</i>)</div> | |
| </div> | |
| </div> | |
| <div class="on-arrow-equation prob-top" title="Predictive Likelihood (Forecast)"> | |
| <i>P</i>(<i>Ŷ</i> | <i>θ</i>) | |
| </div> | |
| <div class="on-arrow-equation prob-bottom" title="Bayesian Update (Assimilation)"> | |
| <i>P</i>(<i>θ</i> | <i>Y</i>) ∝ <i>P</i>(<i>Y</i> | <i>θ</i>) <i>P</i>(<i>θ</i>) | |
| </div> | |
| <div class="node physical-node"> | |
| <h3>Physical Asset</h3> | |
| <div class="node-equation-container"> | |
| <div class="node-equation"><i>Y<sub>i+1</sub></i> = <i>F</i>(<i>U<sub>i</sub></i>) + <i>ε</i></div> | |
| </div> | |
| <p> | |
| <span class="bold-tag">Observables (<i>Y</i>)</span> | |
| Generates physical outputs. | |
| </p> | |
| </div> | |
| <div class="node digital-node"> | |
| <h3>Digital Twin</h3> | |
| <div class="node-equation-container"> | |
| <div class="node-equation" title="State Transition Model"><i>X<sub>i+1</sub></i> = <i>M</i>(<i>X<sub>i</sub></i> , <i>θ</i>) + <i>η</i></div> | |
| <div class="node-equation" title="Observation Model"><i>Ŷ<sub>i+1</sub></i> = <i>H</i>(<i>X<sub>i+1</sub></i>) + <i>ν</i></div> | |
| </div> | |
| <p> | |
| <span class="bold-tag">States (<i>X</i>) & Parameters (<i>θ</i>)</span> | |
| Predicts future states and expected observables. | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment