| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Browser-native, endpoint-audited PHBV CO2-mineralization prediction with study-aware uncertainty boundaries."> |
| <meta name="theme-color" content="#f2efe6"> |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'"> |
| <link rel="stylesheet" href="style.css"> |
| <link rel="icon" href="data:,"> |
| <title>PHBV Mineralization Evidence Explorer</title> |
| <script defer src="predictor.js"></script> |
| <script defer src="app.js"></script> |
| </head> |
| <body> |
| <header class="topbar shell"> |
| <a class="wordmark" href="#main">PHBV / MINERALIZATION</a> |
| <div class="top-actions"> |
| <span id="modelStatus" class="status" aria-live="polite">Loading model</span> |
| <button id="themeToggle" class="quiet-button" type="button" aria-pressed="false">Ink theme</button> |
| </div> |
| </header> |
|
|
| <main id="main"> |
| <section class="hero shell" aria-labelledby="pageTitle"> |
| <div> |
| <p class="eyebrow">Endpoint-audited F-pre research model · v3.0.0</p> |
| <h1 id="pageTitle">Make the estimate.<br><em>Keep the evidence visible.</em></h1> |
| <p class="lede">Explore literature-derived PHBV CO<sub>2</sub> mineralization with an exact browser-native random forest, a kinetic reference, and two deliberately visible uncertainty boundaries.</p> |
| </div> |
| <aside class="endpoint-note"> |
| <span>Endpoint boundary</span> |
| <p>This tool estimates CO<sub>2</sub>-based mineralization. It does not estimate gravimetric mass loss, disintegration, environmental safety, or standards compliance.</p> |
| </aside> |
| </section> |
|
|
| <section class="evidence-strip shell" aria-label="Validation summary"> |
| <div class="evidence-item"><strong>1,031</strong><span>endpoint-audited observations</span></div> |
| <div class="evidence-item"><strong>11</strong><span>independent source studies</span></div> |
| <div class="evidence-item"><strong>17.35</strong><span>exact RF curve-held-out MAE</span></div> |
| <div class="evidence-item"><strong>26.06</strong><span>exact RF new-study MAE</span></div> |
| </section> |
|
|
| <section class="warning shell" aria-label="Research-use warning"> |
| <span>RESEARCH USE</span> |
| <p>The exact RF did not outperform the global time-only baseline in the cross-study task. Predictions for an unobserved study remain insufficiently reliable for quantitative decisions.</p> |
| </section> |
|
|
| <section class="workspace shell" aria-label="Prediction workspace"> |
| <div class="tabs" role="tablist" aria-label="Prediction mode"> |
| <button id="singleTab" class="tab" type="button" role="tab" aria-selected="true" aria-controls="singlePanel">Single time point</button> |
| <button id="curveTab" class="tab" type="button" role="tab" aria-selected="false" aria-controls="curvePanel">Full trajectory</button> |
| </div> |
|
|
| <section id="singlePanel" class="panel active" role="tabpanel" aria-labelledby="singleTab"> |
| <div class="tool-grid"> |
| <div class="form-pane"> |
| <div class="section-heading"> |
| <p class="eyebrow">Input profile</p> |
| <h2>Describe the recorded scenario</h2> |
| <p>Ranges describe marginal coverage in the training corpus, not joint applicability.</p> |
| </div> |
| <form id="singleForm" class="field-groups"></form> |
| <button id="predictSingle" class="primary-button" type="button" disabled>Calculate exploratory estimate</button> |
| </div> |
| <div class="result-pane" aria-live="polite"> |
| <div id="singleEmpty" class="empty-state"> |
| <span class="loading-ring" aria-hidden="true"></span> |
| <p>The exact browser model is loading.</p> |
| </div> |
| <div id="singleError" class="error-block" hidden></div> |
| <div id="singleResult" hidden> |
| <p class="result-kicker">RF methodological estimate</p> |
| <p class="prediction"><span id="predictionValue">—</span><small>% mineralization</small></p> |
| <div class="comparison"> |
| <span>Global time-only reference</span> |
| <strong id="baselineValue">—</strong> |
| </div> |
| <div class="interval-grid"> |
| <article> |
| <span>Represented-profile interval</span> |
| <strong id="representedInterval">—</strong> |
| <small>Empirical curve residual radius</small> |
| </article> |
| <article class="stress-card"> |
| <span>Cross-study stress interval</span> |
| <strong id="stressInterval">—</strong> |
| <small>Descriptive worst-case study radius</small> |
| </article> |
| </div> |
| <div id="singleNotes" class="notes"></div> |
| <p class="decision-boundary">Not for ranking, certification, regulatory decisions, safety claims, or replacement of laboratory testing.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="curvePanel" class="panel" role="tabpanel" aria-labelledby="curveTab" hidden> |
| <div class="curve-layout"> |
| <div class="curve-controls"> |
| <div class="section-heading"> |
| <p class="eyebrow">Trajectory mode</p> |
| <h2>Inspect time dependence</h2> |
| <p>The non-decreasing option is a display constraint for a cumulative endpoint; it does not alter source observations.</p> |
| </div> |
| <form id="curveForm" class="field-groups"></form> |
| <fieldset class="time-controls"> |
| <legend>Curve display</legend> |
| <div class="fields three"> |
| <div class="field"><label for="startDay">Start day</label><input id="startDay" type="number" value="1" min="0" step="1"></div> |
| <div class="field"><label for="endDay">End day</label><input id="endDay" type="number" value="180" min="0" step="1"></div> |
| <div class="field"><label for="curvePoints">Points</label><input id="curvePoints" type="number" value="80" min="2" max="200" step="1"></div> |
| </div> |
| <label class="checkbox-row" for="monotone"><input id="monotone" type="checkbox" checked> Show a non-decreasing cumulative estimate</label> |
| </fieldset> |
| <button id="predictCurve" class="primary-button" type="button" disabled>Generate trajectory</button> |
| </div> |
| <div class="chart-pane"> |
| <div id="curveError" class="error-block" hidden></div> |
| <div class="chart-header"> |
| <div><p class="eyebrow">Model comparison</p><h3>Mineralization over time</h3></div> |
| <button id="downloadCsv" class="quiet-button" type="button" disabled>Download CSV</button> |
| </div> |
| <div class="chart-card"> |
| <svg id="curveChart" viewBox="0 0 840 470" role="img" aria-label="Predicted PHBV mineralization curve with represented-profile and cross-study intervals"></svg> |
| </div> |
| <div class="legend" aria-label="Chart legend"> |
| <span class="legend-rf">RF estimate</span> |
| <span class="legend-baseline">Time-only reference</span> |
| <span class="legend-represented">Represented-profile interval</span> |
| <span class="legend-stress">Cross-study stress interval</span> |
| </div> |
| <div id="curveNotes" class="notes" hidden></div> |
| </div> |
| </div> |
| </section> |
| </section> |
|
|
| <section class="methods shell" aria-labelledby="methodsTitle"> |
| <div> |
| <p class="eyebrow">Read before use</p> |
| <h2 id="methodsTitle">What the interface can—and cannot—tell you</h2> |
| </div> |
| <div class="method-details"> |
| <details open><summary>Why the cross-study interval is wide</summary><p>The 69.32-point radius is derived from the maximum absolute error over all curves and times in each held-out study. It is an intentionally conservative stress diagnostic, not prospective conformal coverage.</p></details> |
| <details><summary>Why a simple kinetic line is shown</summary><p>The global reference, B(t)=64.63(1-exp(-0.03504t)), achieved a new-study MAE of 24.87 percentage points versus 26.06 for the exact F-pre RF. The RF therefore has no demonstrated transport advantage.</p></details> |
| <details><summary>Why two curated fields are absent</summary><p>The public model uses only the F-pre set expected to be available before testing. Source-curated degradation-mechanism and PHA-degrading-microbe labels were excluded because their status is not reliably known at prediction time.</p></details> |
| <details><summary>What “inside the range” means</summary><p>Marginal checks only detect obvious numeric extrapolation and unseen categories. They cannot establish that the full formulation–environment–protocol combination is represented.</p></details> |
| <details><summary>Privacy and exactness</summary><p>Preprocessing and all 300 trees execute locally in your browser. Inputs are not sent to an inference API. Cross-language release tests compare browser predictions with the frozen scikit-learn pipeline to 1e-10.</p></details> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| <div class="shell">Source: Kotzabasaki et al., <em>Polymers</em> 2026, 18, 1076 · <a href="https://doi.org/10.3390/polym18091076" target="_blank" rel="noopener noreferrer">DOI 10.3390/polym18091076</a> · Model v3.0.0</div> |
| </footer> |
| </body> |
| </html> |
|
|
