Spaces:

WellmatixGenAI
/

Crash-Intelligence

Running

App Files Files Community

shrut27 commited on Jul 14

Commit

3b213e4

verified ·

1 Parent(s): 5b9dd53

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

README.md +14 -13
data/dashboard_payload.json +0 -0
index.html +945 -59

README.md CHANGED Viewed

@@ -10,25 +10,26 @@ short_description: AI crash material ranking and CAE card generation
 # Crash Intelligence Platform
-AI-powered Streamlit application (browser runtime via stlite) for recommending, predicting, and validating automotive crash-performance materials across steel, aluminum, magnesium, composites, polymers, foams, elastomers, and adhesives.
-## Features
-- **Material Data Layer** — searchable database of crash-relevant mechanical, cost, and sustainability properties
-- **Crash Scenario Intelligence** — frontal, side, rear, pole, pedestrian, battery pack, BIW, and EV underbody scenarios
-- **AI Ranking Engine** — multi-objective ranking for crashworthiness, weight, cost, sustainability, and failure risk
-- **Material Comparison** — radar charts, scatter trade-offs, and family-level benchmarks
-- **CAE Material Card Generator** — draft LS-DYNA / Abaqus / PAM-CRASH / Radioss cards with plastic curves
-- **Validation Workflow** — AI vs CAE vs physical proxies aligned to Euro NCAP / FMVSS / IIHS
-## Run locally (full Streamlit server)
 ```bash
 pip install -r requirements.txt
 python -m utils.data_generator
 streamlit run app.py
 ```
-## Hugging Face Space
-This Space hosts the Streamlit app through a static/stlite runtime so the interactive dashboard is publicly available without paid Docker hardware.

 # Crash Intelligence Platform
+Comprehensive automotive crash-material intelligence dashboard for recommending, ranking, and validating materials across steel, aluminum, magnesium, composites, polymers, foams, elastomers, and adhesives.
+## Dashboard modules
+1. **Overview** — KPI gauges, family crashworthiness, crash vs weight scatter, scenario×family heatmap
+2. **Material Explorer** — energy absorption, cost vs sustainability, stress–strain curves, property table
+3. **Crash Scenario AI** — top recommendations by scenario/component with intrusion–energy trade-offs
+4. **Compare & Rank** — multi-objective radar + weighted ranking
+5. **Material Cards** — draft LS-DYNA / Abaqus / PAM-CRASH / Radioss cards with download
+6. **Validation** — AI vs CAE parity, error distribution, certification ladder
+7. **Data Library** — browse/export dataset views
+## Live Space
+https://huggingface.co/spaces/WellmatixGenAI/Crash-Intelligence
+## Local Streamlit (optional)
 ```bash
 pip install -r requirements.txt
 python -m utils.data_generator
 streamlit run app.py
 ```

data/dashboard_payload.json ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -1,67 +1,953 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Crash Intelligence Platform</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.80.5/build/stlite.css"
-    />
-    <style>
-      html, body, #root {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        background: #ffffff;
-        color: #0f172a;
-      }
-      .boot {
-        font-family: "Source Sans 3", "Segoe UI", sans-serif;
-        color: #0B3D2E;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        font-size: 1.1rem;
       }
-    </style>
-    <script type="module">
-      import { mount } from "https://cdn.jsdelivr.net/npm/@stlite/browser@0.80.5/build/stlite.js";
-      const root = document.getElementById("root");
-      root.innerHTML = '<div class="boot">Loading Crash Intelligence Platform…</div>';
-      mount(
-        {
-          entrypoint: "app.py",
-          requirements: ["pandas", "numpy", "plotly"],
-          streamlitConfig: {
-            "client.toolbarMode": "minimal",
-            "theme.base": "light",
-            "theme.primaryColor": "#0B6E4F",
-            "theme.backgroundColor": "#ffffff",
-            "theme.secondaryBackgroundColor": "#f8fafc",
-            "theme.textColor": "#0f172a",
-          },
-          files: {
-            "app.py": { url: "./app.py" },
-            "utils/__init__.py": { url: "./utils/__init__.py" },
-            "utils/data_generator.py": { url: "./utils/data_generator.py" },
-            "utils/calculations.py": { url: "./utils/calculations.py" },
-            "utils/visualizations.py": { url: "./utils/visualizations.py" },
-            "data/materials.csv": { url: "./data/materials.csv" },
-            "data/recommendations.csv": { url: "./data/recommendations.csv" },
-            "data/stress_strain.csv": { url: "./data/stress_strain.csv" },
-            "data/validation.csv": { url: "./data/validation.csv" },
           },
         },
-        root
-      );
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Crash Intelligence Platform</title>
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --ink: #0f172a;
+      --muted: #475569;
+      --green: #0b6e4f;
+      --green-dark: #0b3d2e;
+      --blue: #1b4965;
+      --sky: #5fa8d3;
+      --bg: #f1f5f9;
+      --card: #ffffff;
+      --line: #e2e8f0;
+      --danger: #c44536;
+    }
+    * { box-sizing: border-box; }
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: "Source Sans 3", "Segoe UI", sans-serif;
+    }
+    .layout {
+      display: grid;
+      grid-template-columns: 280px 1fr;
+      min-height: 100vh;
+    }
+    .sidebar {
+      background: linear-gradient(180deg, #0b3d2e 0%, #1b4965 100%);
+      color: #f8fafc;
+      padding: 1.25rem 1rem 2rem;
+      position: sticky;
+      top: 0;
+      height: 100vh;
+      overflow-y: auto;
+    }
+    .sidebar h2 {
+      font-family: "IBM Plex Sans", sans-serif;
+      font-size: 1.05rem;
+      margin: 0 0 0.75rem;
+      color: #fff;
+    }
+    .sidebar label {
+      display: block;
+      font-size: 0.82rem;
+      margin: 0.75rem 0 0.3rem;
+      color: #e2e8f0;
+    }
+    .sidebar select,
+    .sidebar input[type="range"] {
+      width: 100%;
+    }
+    .sidebar select {
+      background: rgba(255,255,255,0.12);
+      color: #fff;
+      border: 1px solid rgba(255,255,255,0.25);
+      border-radius: 8px;
+      padding: 0.45rem 0.5rem;
+    }
+    .sidebar select option { color: #0f172a; }
+    .family-box {
+      max-height: 180px;
+      overflow-y: auto;
+      background: rgba(255,255,255,0.08);
+      border-radius: 8px;
+      padding: 0.4rem 0.55rem;
+      border: 1px solid rgba(255,255,255,0.15);
+    }
+    .family-box label {
+      display: flex;
+      gap: 0.4rem;
+      align-items: center;
+      margin: 0.25rem 0;
+      font-size: 0.78rem;
+      color: #f1f5f9;
+    }
+    .weight-val { float: right; color: #bae6fd; }
+    .caption {
+      margin-top: 1rem;
+      font-size: 0.75rem;
+      color: #cbd5e1;
+      line-height: 1.4;
+    }
+    .main { padding: 1.1rem 1.4rem 2rem; }
+    .hero {
+      background: linear-gradient(120deg, #0b3d2e 0%, #1b4965 55%, #5fa8d3 100%);
+      color: #fff;
+      border-radius: 14px;
+      padding: 1.35rem 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .hero h1 {
+      font-family: "IBM Plex Sans", sans-serif;
+      margin: 0 0 0.35rem;
+      font-size: 1.85rem;
+      color: #fff;
+    }
+    .hero p { margin: 0; color: #e2e8f0; max-width: 900px; line-height: 1.45; }
+    .tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      margin: 0.8rem 0 1rem;
+    }
+    .tab-btn {
+      background: #fff;
+      border: 1px solid var(--line);
+      color: var(--ink);
+      border-radius: 999px;
+      padding: 0.45rem 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      font-size: 0.9rem;
+    }
+    .tab-btn.active {
+      background: var(--green);
+      border-color: var(--green);
+      color: #fff;
+    }
+    .panel { display: none; }
+    .panel.active { display: block; }
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 0.75rem;
+      margin-bottom: 1rem;
+    }
+    .metric {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-left: 4px solid var(--green);
+      border-radius: 10px;
+      padding: 0.85rem 1rem;
+    }
+    .metric .label { color: var(--muted); font-size: 0.82rem; }
+    .metric .value {
+      color: var(--green);
+      font-size: 1.45rem;
+      font-weight: 700;
+      margin-top: 0.15rem;
+      font-family: "IBM Plex Sans", sans-serif;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.9rem;
+      margin-bottom: 0.9rem;
+    }
+    .grid-3 {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 0.9rem;
+      margin-bottom: 0.9rem;
+    }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      padding: 0.75rem;
+      min-height: 120px;
+    }
+    .card h3 {
+      margin: 0 0 0.5rem;
+      font-size: 1rem;
+      color: var(--green-dark);
+      font-family: "IBM Plex Sans", sans-serif;
+    }
+    .note {
+      background: #fff;
+      border: 1px solid var(--line);
+      border-left: 4px solid var(--green);
+      border-radius: 10px;
+      padding: 0.9rem 1rem;
+      color: var(--ink);
+      margin: 0.8rem 0;
+      line-height: 1.45;
+    }
+    table.data {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.85rem;
+      background: #fff;
+    }
+    table.data th, table.data td {
+      border-bottom: 1px solid var(--line);
+      padding: 0.45rem 0.5rem;
+      text-align: left;
+      color: var(--ink);
+    }
+    table.data th {
+      background: #ecfdf5;
+      color: var(--green-dark);
+      position: sticky;
+      top: 0;
+    }
+    .table-wrap {
+      max-height: 360px;
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: #fff;
+    }
+    .controls-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      align-items: end;
+      margin-bottom: 0.8rem;
+    }
+    .controls-row label {
+      font-size: 0.82rem;
+      color: var(--muted);
+      display: block;
+      margin-bottom: 0.25rem;
+    }
+    .controls-row select, .controls-row button, .controls-row input {
+      padding: 0.45rem 0.6rem;
+      border-radius: 8px;
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--ink);
+    }
+    .controls-row button {
+      background: var(--green);
+      color: #fff;
+      border: none;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    pre.card-text {
+      background: #0f172a;
+      color: #e2e8f0;
+      padding: 1rem;
+      border-radius: 10px;
+      overflow: auto;
+      font-size: 0.82rem;
+      line-height: 1.4;
+      min-height: 320px;
+    }
+    .loading {
+      min-height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--green-dark);
+      font-size: 1.1rem;
+    }
+    .footer {
+      margin-top: 1.2rem;
+      color: var(--muted);
+      font-size: 0.8rem;
+      border-top: 1px solid var(--line);
+      padding-top: 0.8rem;
+    }
+    @media (max-width: 1100px) {
+      .layout { grid-template-columns: 1fr; }
+      .sidebar { position: relative; height: auto; }
+      .metrics { grid-template-columns: repeat(2, 1fr); }
+      .grid-2, .grid-3 { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="loading">Loading Crash Intelligence comprehensive dashboard…</div>
+  <script>
+    const COLORS = ["#0B6E4F","#08A045","#1B4965","#5FA8D3","#C44536","#E8871E","#6B4C9A","#2A9D8F","#E76F51","#264653","#F4A261","#457B9D","#9B2226","#005F73","#CA6702"];
+    const LAYOUT = {
+      paper_bgcolor: "#ffffff",
+      plot_bgcolor: "#f8fafc",
+      font: { family: "Source Sans 3, Segoe UI, sans-serif", color: "#0f172a", size: 12 },
+      margin: { l: 55, r: 25, t: 45, b: 50 },
+      legend: { bgcolor: "rgba(255,255,255,0.92)", bordercolor: "#ddd", borderwidth: 1 }
+    };
+    let DATA = null;
+    let state = {
+      families: [],
+      scenario: "Side Impact",
+      component: "Battery Enclosure",
+      maxCost: 40,
+      minUts: 200,
+      maxDensity: 8,
+      weights: { crash: 0.3, weight: 0.2, cost: 0.2, sustain: 0.15, failure: 0.15 },
+      tab: "overview"
+    };
+    function num(v, d=1) { return Number(v).toFixed(d); }
+    function pct(v) { return `${(100 * v).toFixed(0)}%`; }
+    function filteredTable() {
+      return DATA.table.filter(r =>
+        state.families.includes(r.family) &&
+        r.cost_usd_kg <= state.maxCost &&
+        r.uts_mpa >= state.minUts &&
+        r.density_g_cm3 <= state.maxDensity
+      );
+    }
+    function filteredScatter() {
+      return DATA.scatter.filter(r =>
+        state.families.includes(r.family) &&
+        r.cost_usd_kg <= state.maxCost &&
+        r.uts_mpa >= state.minUts &&
+        r.density_g_cm3 <= state.maxDensity
+      );
+    }
+    function familySummary() {
+      return DATA.family_summary.filter(r => state.families.includes(r.family));
+    }
+    function moScore(r) {
+      const w = state.weights;
+      const tot = w.crash + w.weight + w.cost + w.sustain + w.failure || 1;
+      return (
+        (w.crash / tot) * r.crashworthiness_index +
+        (w.weight / tot) * r.lightweighting_score +
+        (w.cost / tot) * Math.min(r.cost_performance_score * 1.2, 100) +
+        (w.sustain / tot) * r.sustainability_score +
+        (w.failure / tot) * (100 * (1 - r.failure_risk))
+      );
+    }
+    function rankedMaterials(n = 8) {
+      return [...filteredTable()]
+        .map(r => ({ ...r, mo_score: moScore(r) }))
+        .sort((a, b) => b.mo_score - a.mo_score)
+        .slice(0, n);
+    }
+    function scenarioRecs() {
+      const key = `${state.scenario}||${state.component}`;
+      let rows = (DATA.recommendations[key] || []).filter(r => state.families.includes(r.family));
+      if (!rows.length) {
+        rows = rankedMaterials(5).map(r => ({
+          material_name: r.material_name,
+          family: r.family,
+          joining_method: "Hybrid Weld-Bond",
+          crash_score: r.crashworthiness_index,
+          energy_absorption_kj: r.energy_absorption_potential * 2,
+          intrusion_mm: 40,
+          peak_force_kn: r.uts_mpa * 0.03,
+          crush_force_efficiency: 0.65,
+          weight_reduction_pct: r.lightweighting_score * 0.4,
+          cost_score: r.cost_performance_score,
+          sustainability_score: r.sustainability_score,
+          simulation_risk: r.failure_risk * 100,
+          thickness_mm: 2.0
+        }));
       }
+      return rows.slice(0, 5);
+    }
+    function plotBarH(div, rows, xKey, yKey, title, colorScale = false) {
+      const sorted = [...rows].sort((a, b) => a[xKey] - b[xKey]);
+      const trace = {
+        type: "bar",
+        orientation: "h",
+        x: sorted.map(r => r[xKey]),
+        y: sorted.map(r => r[yKey]),
+        marker: colorScale
+          ? { color: sorted.map(r => r[xKey]), colorscale: [[0, "#D8F3DC"], [1, "#0B6E4F"]], showscale: false }
+          : { color: "#0B6E4F" },
+        hovertemplate: `%{y}<br>${xKey}: %{x:.2f}<extra></extra>`
+      };
+      Plotly.newPlot(div, [trace], { ...LAYOUT, title, height: 430 }, { responsive: true, displayModeBar: false });
+    }
+    function plotScatter(div, rows, x, y, color, size, title) {
+      const families = [...new Set(rows.map(r => r[color]))];
+      const traces = families.map((f, i) => {
+        const sub = rows.filter(r => r[color] === f);
+        return {
+          type: "scatter",
+          mode: "markers",
+          name: f,
+          x: sub.map(r => r[x]),
+          y: sub.map(r => r[y]),
+          text: sub.map(r => r.material_name || ""),
+          marker: {
+            size: sub.map(r => size ? Math.max(7, Math.min(22, (r[size] || 10) / 80)) : 9),
+            color: COLORS[i % COLORS.length],
+            opacity: 0.75,
+            line: { width: 0.5, color: "#fff" }
           },
+          hovertemplate: "%{text}<br>%{xaxis.title.text}: %{x:.1f}<br>%{yaxis.title.text}: %{y:.1f}<extra>" + f + "</extra>"
+        };
+      });
+      Plotly.newPlot(div, traces, {
+        ...LAYOUT,
+        title,
+        height: 430,
+        xaxis: { title: x.replaceAll("_", " ") },
+        yaxis: { title: y.replaceAll("_", " ") }
+      }, { responsive: true, displayModeBar: false });
+    }
+    function plotRadar(div, rows) {
+      const cats = ["Crash", "Weight", "Cost-Perf", "Sustainability", "Energy Abs."];
+      const traces = rows.slice(0, 5).map((r, i) => {
+        const vals = [
+          r.crashworthiness_index,
+          r.lightweighting_score,
+          Math.min(r.cost_performance_score * 1.5, 100),
+          r.sustainability_score,
+          Math.min(r.energy_absorption_potential * 2, 100)
+        ];
+        vals.push(vals[0]);
+        return {
+          type: "scatterpolar",
+          r: vals,
+          theta: [...cats, cats[0]],
+          fill: "toself",
+          name: r.material_name,
+          opacity: 0.55,
+          line: { color: COLORS[i % COLORS.length], width: 2 }
+        };
+      });
+      Plotly.newPlot(div, traces, {
+        ...LAYOUT,
+        title: "Multi-Objective Material Comparison",
+        height: 460,
+        polar: {
+          bgcolor: "#f8fafc",
+          radialaxis: { visible: true, range: [0, 100], gridcolor: "#e5e7eb" },
+          angularaxis: { gridcolor: "#e5e7eb" }
+        }
+      }, { responsive: true, displayModeBar: false });
+    }
+    function plotHeatmap(div) {
+      const rows = DATA.heatmap.filter(r => state.families.includes(r.family));
+      const scenarios = [...new Set(rows.map(r => r.crash_scenario))];
+      const families = [...new Set(rows.map(r => r.family))];
+      const z = scenarios.map(s => families.map(f => {
+        const hit = rows.find(r => r.crash_scenario === s && r.family === f);
+        return hit ? hit.crash_score : null;
+      }));
+      Plotly.newPlot(div, [{
+        type: "heatmap",
+        z, x: families, y: scenarios,
+        colorscale: [[0, "#F1FAEE"], [0.5, "#1B4965"], [1, "#0B6E4F"]],
+        hoverongaps: false,
+        colorbar: { title: "Crash Score" }
+      }], { ...LAYOUT, title: "Avg Crash Score by Scenario × Family", height: 520 }, { responsive: true, displayModeBar: false });
+    }
+    function plotGauge(div, value, title, color) {
+      Plotly.newPlot(div, [{
+        type: "indicator",
+        mode: "gauge+number",
+        value,
+        title: { text: title, font: { size: 14, color: "#1a1a1a" } },
+        number: { font: { color: "#1a1a1a" } },
+        gauge: {
+          axis: { range: [0, 100] },
+          bar: { color },
+          bgcolor: "#f1f5f9",
+          bordercolor: "#cbd5e1",
+          steps: [
+            { range: [0, 40], color: "#fee2e2" },
+            { range: [40, 70], color: "#fef3c7" },
+            { range: [70, 100], color: "#dcfce7" }
+          ]
+        }
+      }], { height: 220, margin: { t: 40, b: 10, l: 20, r: 20 }, paper_bgcolor: "#fff", font: { color: "#1a1a1a" } }, { responsive: true, displayModeBar: false });
+    }
+    function plotCurves(div, ids) {
+      const traces = [];
+      ids.forEach((id, i) => {
+        const c = DATA.curves[id];
+        if (!c) return;
+        traces.push({
+          type: "scatter", mode: "lines", name: `${c.material_name} (QS)`,
+          x: c.strain, y: c.stress_mpa,
+          line: { color: COLORS[i % COLORS.length], width: 2.5 }
+        });
+        traces.push({
+          type: "scatter", mode: "lines", name: `${c.material_name} (HR)`,
+          x: c.strain, y: c.stress_high_rate_mpa,
+          line: { color: COLORS[i % COLORS.length], width: 2, dash: "dash" }
+        });
+      });
+      Plotly.newPlot(div, traces, {
+        ...LAYOUT,
+        title: "Stress–Strain Curves (Strain-Rate Sensitive)",
+        height: 440,
+        xaxis: { title: "True Strain" },
+        yaxis: { title: "True Stress (MPa)" }
+      }, { responsive: true, displayModeBar: false });
+    }
+    function plotValidation(divParity, divHist) {
+      const rows = DATA.validation.filter(r => state.families.includes(r.family));
+      Plotly.newPlot(divParity, [
+        {
+          type: "scatter", mode: "markers", name: "AI vs CAE",
+          x: rows.map(r => r.cae_crash_score),
+          y: rows.map(r => r.ai_crash_score),
+          marker: { color: "#1B4965", size: 7, opacity: 0.55 }
         },
+        {
+          type: "scatter", mode: "lines", name: "Ideal",
+          x: [0, 100], y: [0, 100],
+          line: { color: "#C44536", dash: "dash", width: 2 }
+        }
+      ], { ...LAYOUT, title: "AI Prediction vs CAE Validation", height: 420, xaxis: { title: "CAE Crash Score" }, yaxis: { title: "AI Crash Score" } }, { responsive: true, displayModeBar: false });
+      const pass = rows.filter(r => r.pass_fail === "Pass").map(r => r.ai_cae_error_pct);
+      const review = rows.filter(r => r.pass_fail !== "Pass").map(r => r.ai_cae_error_pct);
+      Plotly.newPlot(divHist, [
+        { type: "histogram", x: pass, name: "Pass", marker: { color: "#0B6E4F" }, opacity: 0.85 },
+        { type: "histogram", x: review, name: "Review", marker: { color: "#C44536" }, opacity: 0.85 }
+      ], { ...LAYOUT, barmode: "overlay", title: "AI–CAE Error Distribution", height: 420, xaxis: { title: "AI–CAE Error (%)" } }, { responsive: true, displayModeBar: false });
+    }
+    function materialCard(mat, solver) {
+      const n = 10;
+      const strains = Array.from({ length: n }, (_, i) => i * mat.failure_strain / (n - 1));
+      const stresses = strains.map((eps, i) => {
+        const t = i / (n - 1);
+        return mat.yield_strength_mpa + (mat.uts_mpa - mat.yield_strength_mpa) * t;
+      });
+      const cardType = mat.material_card_type || "MAT_024";
+      const pr = (mat.family || "").includes("Aluminum") || mat.family === "Magnesium" ? 0.30 : 0.29;
+      let text = `*KEYWORD  (${solver} draft)\n`;
+      text += `$ Material: ${mat.material_name} (${mat.family})\n`;
+      text += `$ Card type: ${cardType}\n`;
+      text += `$ Confidence: ${num(mat.confidence_score, 2)}\n`;
+      text += `$ Validation: Draft — public-data prototype\n`;
+      text += `*MAT_PIECEWISE_LINEAR_PLASTICITY\n`;
+      text += `$ RO (g/cm3) = ${mat.density_g_cm3}\n`;
+      text += `$ E (GPa) = ${mat.youngs_modulus_gpa}\n`;
+      text += `$ PR = ${pr}\n`;
+      text += `$ SIGY (MPa) = ${mat.yield_strength_mpa}\n`;
+      text += `$ FAIL = ${mat.failure_strain}\n`;
+      text += `$ C (strain-rate) = ${mat.strain_rate_sensitivity}\n`;
+      text += `$ Plastic curve (strain, stress MPa):\n`;
+      strains.forEach((e, i) => { text += `$   ${e.toFixed(5)}, ${stresses[i].toFixed(2)}\n`; });
+      text += `$ Damage: Linear softening to zero stress at failure strain\n`;
+      text += `$ Temperature: Room-temperature card; scale factors TBD\n*END`;
+      return { text, strains, stresses, cardType };
+    }
+    function tableHTML(rows, cols) {
+      if (!rows.length) return "<p>No rows match the current filters.</p>";
+      const head = cols.map(c => `<th>${c.label}</th>`).join("");
+      const body = rows.map(r => `<tr>${cols.map(c => `<td>${typeof r[c.key] === "number" ? num(r[c.key], c.digits ?? 2) : (r[c.key] ?? "")}</td>`).join("")}</tr>`).join("");
+      return `<div class="table-wrap"><table class="data"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`;
+    }
+    function renderShell() {
+      const families = DATA.meta.families;
+      if (!state.families.length) state.families = families.slice();
+      document.getElementById("app").className = "";
+      document.getElementById("app").innerHTML = `
+        <div class="layout">
+          <aside class="sidebar">
+            <h2>Filters & Targets</h2>
+            <label>Material families</label>
+            <div class="family-box" id="familyBox"></div>
+            <label>Crash scenario</label>
+            <select id="scenario"></select>
+            <label>Vehicle component</label>
+            <select id="component"></select>
+            <label>Max cost (USD/kg): <span id="maxCostVal">${state.maxCost}</span></label>
+            <input type="range" id="maxCost" min="1" max="80" step="1" value="${state.maxCost}" />
+            <label>Min UTS (MPa): <span id="minUtsVal">${state.minUts}</span></label>
+            <input type="range" id="minUts" min="20" max="1800" step="20" value="${state.minUts}" />
+            <label>Max density (g/cm³): <span id="maxDensityVal">${state.maxDensity}</span></label>
+            <input type="range" id="maxDensity" min="0.1" max="8" step="0.1" value="${state.maxDensity}" />
+            <h2 style="margin-top:1.2rem">Multi-objective weights</h2>
+            <label>Crash <span class="weight-val" id="wCrashVal">${state.weights.crash.toFixed(2)}</span></label>
+            <input type="range" id="wCrash" min="0" max="1" step="0.05" value="${state.weights.crash}" />
+            <label>Lightweighting <span class="weight-val" id="wWeightVal">${state.weights.weight.toFixed(2)}</span></label>
+            <input type="range" id="wWeight" min="0" max="1" step="0.05" value="${state.weights.weight}" />
+            <label>Cost <span class="weight-val" id="wCostVal">${state.weights.cost.toFixed(2)}</span></label>
+            <input type="range" id="wCost" min="0" max="1" step="0.05" value="${state.weights.cost}" />
+            <label>Sustainability <span class="weight-val" id="wSustVal">${state.weights.sustain.toFixed(2)}</span></label>
+            <input type="range" id="wSust" min="0" max="1" step="0.05" value="${state.weights.sustain}" />
+            <label>Low failure risk <span class="weight-val" id="wFailVal">${state.weights.failure.toFixed(2)}</span></label>
+            <input type="range" id="wFail" min="0" max="1" step="0.05" value="${state.weights.failure}" />
+            <p class="caption" id="dbCaption"></p>
+          </aside>
+          <main class="main">
+            <div class="hero">
+              <h1>Crash Intelligence Platform</h1>
+              <p>AI-powered material recommendation, prediction, and CAE card generation for automotive crash-performance across steel, aluminum, magnesium, composites, polymers, foams, elastomers, and adhesives.</p>
+            </div>
+            <div class="tabs" id="tabs">
+              <button class="tab-btn" data-tab="overview">Overview</button>
+              <button class="tab-btn" data-tab="explorer">Material Explorer</button>
+              <button class="tab-btn" data-tab="scenario">Crash Scenario AI</button>
+              <button class="tab-btn" data-tab="compare">Compare & Rank</button>
+              <button class="tab-btn" data-tab="cards">Material Cards</button>
+              <button class="tab-btn" data-tab="validation">Validation</button>
+              <button class="tab-btn" data-tab="library">Data Library</button>
+            </div>
+            <div id="content"></div>
+            <div class="footer">Crash Intelligence Platform · Public-style material & crash databases · Calibrate with supplier cards and full-vehicle CAE for OEM production use.</div>
+          </main>
+        </div>`;
+      const famBox = document.getElementById("familyBox");
+      famBox.innerHTML = families.map(f => `
+        <label><input type="checkbox" value="${f}" ${state.families.includes(f) ? "checked" : ""}/> ${f}</label>
+      `).join("");
+      const scen = document.getElementById("scenario");
+      scen.innerHTML = DATA.meta.scenarios.map(s => `<option ${s === state.scenario ? "selected" : ""}>${s}</option>`).join("");
+      const comp = document.getElementById("component");
+      comp.innerHTML = DATA.meta.components.map(s => `<option ${s === state.component ? "selected" : ""}>${s}</option>`).join("");
+      document.getElementById("dbCaption").textContent =
+        `Database: ${DATA.meta.n_materials.toLocaleString()} materials · ${DATA.meta.n_recommendations.toLocaleString()} scenario predictions · ${DATA.meta.n_validation.toLocaleString()} validation pairs`;
+      bindControls();
+      setTab(state.tab);
+    }
+    function bindControls() {
+      document.querySelectorAll("#familyBox input").forEach(cb => {
+        cb.addEventListener("change", () => {
+          state.families = [...document.querySelectorAll("#familyBox input:checked")].map(x => x.value);
+          if (!state.families.length) state.families = DATA.meta.families.slice();
+          renderActive();
+        });
+      });
+      const map = [
+        ["scenario", v => state.scenario = v],
+        ["component", v => state.component = v],
+      ];
+      map.forEach(([id, fn]) => document.getElementById(id).addEventListener("change", e => { fn(e.target.value); renderActive(); }));
+      const ranges = [
+        ["maxCost", v => { state.maxCost = +v; document.getElementById("maxCostVal").textContent = v; }],
+        ["minUts", v => { state.minUts = +v; document.getElementById("minUtsVal").textContent = v; }],
+        ["maxDensity", v => { state.maxDensity = +v; document.getElementById("maxDensityVal").textContent = v; }],
+        ["wCrash", v => { state.weights.crash = +v; document.getElementById("wCrashVal").textContent = (+v).toFixed(2); }],
+        ["wWeight", v => { state.weights.weight = +v; document.getElementById("wWeightVal").textContent = (+v).toFixed(2); }],
+        ["wCost", v => { state.weights.cost = +v; document.getElementById("wCostVal").textContent = (+v).toFixed(2); }],
+        ["wSust", v => { state.weights.sustain = +v; document.getElementById("wSustVal").textContent = (+v).toFixed(2); }],
+        ["wFail", v => { state.weights.failure = +v; document.getElementById("wFailVal").textContent = (+v).toFixed(2); }],
+      ];
+      ranges.forEach(([id, fn]) => {
+        const el = document.getElementById(id);
+        el.addEventListener("input", e => fn(e.target.value));
+        el.addEventListener("change", () => renderActive());
+      });
+      document.querySelectorAll(".tab-btn").forEach(btn => {
+        btn.addEventListener("click", () => setTab(btn.dataset.tab));
+      });
+    }
+    function setTab(tab) {
+      state.tab = tab;
+      document.querySelectorAll(".tab-btn").forEach(b => b.classList.toggle("active", b.dataset.tab === tab));
+      renderActive();
+    }
+    function renderActive() {
+      const root = document.getElementById("content");
+      const filt = filteredTable();
+      const avg = (key) => filt.length ? filt.reduce((s, r) => s + r[key], 0) / filt.length : 0;
+      if (state.tab === "overview") {
+        root.innerHTML = `
+          <div class="metrics">
+            <div class="metric"><div class="label">Materials</div><div class="value">${filt.length.toLocaleString()}</div></div>
+            <div class="metric"><div class="label">Avg Crash Index</div><div class="value">${num(avg("crashworthiness_index"))}</div></div>
+            <div class="metric"><div class="label">Avg Energy Potential</div><div class="value">${num(avg("energy_absorption_potential"), 2)}</div></div>
+            <div class="metric"><div class="label">Avg Sustainability</div><div class="value">${num(avg("sustainability_score"))}</div></div>
+            <div class="metric"><div class="label">AI–CAE Pass Rate</div><div class="value">${pct(DATA.meta.pass_rate)}</div></div>
+          </div>
+          <div class="grid-3">
+            <div class="card"><div id="g1"></div></div>
+            <div class="card"><div id="g2"></div></div>
+            <div class="card"><div id="g3"></div></div>
+          </div>
+          <div class="grid-2">
+            <div class="card"><div id="p1"></div></div>
+            <div class="card"><div id="p2"></div></div>
+          </div>
+          <div class="card"><div id="p3"></div></div>
+          <div class="note"><strong>Value proposition:</strong> Shortlist safer, lighter, cheaper, and more sustainable crash-critical materials before expensive CAE and physical testing — then export draft solver-ready material cards for LS-DYNA, Abaqus, PAM-CRASH, and Radioss.</div>
+        `;
+        plotGauge("g1", avg("crashworthiness_index"), "Crashworthiness", "#0B6E4F");
+        plotGauge("g2", avg("lightweighting_score"), "Lightweighting", "#1B4965");
+        plotGauge("g3", avg("sustainability_score"), "Sustainability", "#2A9D8F");
+        plotBarH("p1", familySummary(), "crash", "family", "Crashworthiness by Family", true);
+        plotScatter("p2", filteredScatter(), "lightweighting_score", "crashworthiness_index", "family", "uts_mpa", "Crashworthiness vs Lightweighting");
+        plotHeatmap("p3");
+        return;
+      }
+      if (state.tab === "explorer") {
+        const curveIds = Object.keys(DATA.curves).filter(id => state.families.includes(DATA.curves[id].family)).slice(0, 4);
+        root.innerHTML = `
+          <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">Material Data Explorer</h3>
+          <p style="color:var(--muted)">Browse standardized mechanical, cost, and sustainability properties across automotive crash materials.</p>
+          <div class="grid-2">
+            <div class="card"><div id="e1"></div></div>
+            <div class="card"><div id="e2"></div></div>
+          </div>
+          <div class="card"><div id="e3"></div></div>
+          ${tableHTML(filt.slice(0, 120), [
+            {key:"material_name", label:"Material"},
+            {key:"family", label:"Family"},
+            {key:"density_g_cm3", label:"Density"},
+            {key:"youngs_modulus_gpa", label:"E (GPa)"},
+            {key:"yield_strength_mpa", label:"Yield"},
+            {key:"uts_mpa", label:"UTS"},
+            {key:"elongation_pct", label:"Elong %"},
+            {key:"cost_usd_kg", label:"Cost"},
+            {key:"crashworthiness_index", label:"Crash"},
+            {key:"sustainability_score", label:"Sustain"},
+            {key:"source", label:"Source"},
+            {key:"confidence_score", label:"Conf", digits:2}
+          ])}
+        `;
+        plotBarH("e1", familySummary(), "energy", "family", "Energy Absorption Potential", true);
+        plotScatter("e2", filteredScatter(), "cost_usd_kg", "sustainability_score", "family", "crashworthiness_index", "Cost vs Sustainability");
+        plotCurves("e3", curveIds);
+        return;
+      }
+      if (state.tab === "scenario") {
+        const top = scenarioRecs();
+        const best = top[0] || {};
+        root.innerHTML = `
+          <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">Crash Scenario Intelligence</h3>
+          <p style="color:var(--muted)">Recommendations for <strong>${state.scenario}</strong> on <strong>${state.component}</strong>.</p>
+          <div class="metrics">
+            <div class="metric"><div class="label">Top Crash Score</div><div class="value">${num(best.crash_score || 0)}</div></div>
+            <div class="metric"><div class="label">Best Weight Reduction</div><div class="value">${num(best.weight_reduction_pct || 0)}%</div></div>
+            <div class="metric"><div class="label">Top Material</div><div class="value" style="font-size:1.05rem">${best.material_name || "—"}</div></div>
+            <div class="metric"><div class="label">Family</div><div class="value" style="font-size:1.05rem">${best.family || "—"}</div></div>
+            <div class="metric"><div class="label">Joining</div><div class="value" style="font-size:0.95rem">${best.joining_method || "—"}</div></div>
+          </div>
+          <div class="grid-2">
+            <div class="card"><div id="s1"></div></div>
+            <div class="card"><div id="s2"></div></div>
+          </div>
+          <div class="card"><div id="s3"></div></div>
+          ${tableHTML(top, [
+            {key:"material_name", label:"Material"},
+            {key:"family", label:"Family"},
+            {key:"thickness_mm", label:"Thickness"},
+            {key:"joining_method", label:"Joining"},
+            {key:"crash_score", label:"Crash"},
+            {key:"energy_absorption_kj", label:"Energy"},
+            {key:"intrusion_mm", label:"Intrusion"},
+            {key:"weight_reduction_pct", label:"ΔWeight %"},
+            {key:"simulation_risk", label:"Sim Risk"}
+          ])}
+          <div class="note"><strong>Recommended action:</strong> Evaluate <em>${best.material_name || "candidate"}</em>
+            (${best.family || ""}) at ~${num(best.thickness_mm || 2, 2)} mm with <em>${best.joining_method || "hybrid joining"}</em>.
+            Expected crash score ${num(best.crash_score || 0)}. Run component-level ${state.scenario.toLowerCase()} CAE before physical validation.</div>
+        `;
+        plotBarH("s1", top.map(r => ({ family: r.material_name, crash: r.crash_score })), "crash", "family", "Top Recommended Materials", true);
+        plotScatter("s2", DATA.energy_intrusion.filter(r => state.families.includes(r.family)), "intrusion_mm", "energy_absorption_kj", "crash_scenario", null, "Energy Absorption vs Intrusion");
+        plotBarH("s3", DATA.scenario_kpi.map(r => ({ family: r.crash_scenario, crash: r.avg_crash_score })), "crash", "family", "Average Crash Score by Scenario", true);
+        return;
+      }
+      if (state.tab === "compare") {
+        const ranked = rankedMaterials(8);
+        root.innerHTML = `
+          <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">Material Comparison & Ranking</h3>
+          <div class="grid-2">
+            <div class="card"><div id="c1"></div></div>
+            <div class="card"><div id="c2"></div></div>
+          </div>
+          ${tableHTML(ranked, [
+            {key:"material_name", label:"Material"},
+            {key:"family", label:"Family"},
+            {key:"mo_score", label:"MO Score"},
+            {key:"crashworthiness_index", label:"Crash"},
+            {key:"lightweighting_score", label:"Weight"},
+            {key:"cost_performance_score", label:"Cost-Perf"},
+            {key:"sustainability_score", label:"Sustain"},
+            {key:"failure_risk", label:"Fail Risk", digits:3},
+            {key:"uts_mpa", label:"UTS"},
+            {key:"density_g_cm3", label:"Density"},
+            {key:"cost_usd_kg", label:"Cost"}
+          ])}
+        `;
+        plotRadar("c1", ranked);
+        plotBarH("c2", ranked.map(r => ({ family: r.material_name, crash: r.mo_score })), "crash", "family", "Multi-Objective Score (Top Materials)", true);
+        return;
+      }
+      if (state.tab === "cards") {
+        const ranked = rankedMaterials(20);
+        const options = ranked.length ? ranked : filt.slice(0, 20);
+        root.innerHTML = `
+          <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">CAE Material Card Generator</h3>
+          <p style="color:var(--muted)">Generate draft solver-ready material cards with elastic modulus, yield, plastic curve, strain-rate sensitivity, failure strain, and confidence score.</p>
+          <div class="controls-row">
+            <div><label>Select material</label><select id="cardMat">${options.map(r => `<option value="${r.material_name}">${r.material_name} (${r.family})</option>`).join("")}</select></div>
+            <div><label>Target solver</label><select id="cardSolver">${DATA.solvers.map(s => `<option>${s}</option>`).join("")}</select></div>
+            <div><label>&nbsp;</label><button id="dlCard">Download card</button></div>
+          </div>
+          <div class="metrics" id="cardMetrics"></div>
+          <div class="grid-2">
+            <pre class="card-text" id="cardText"></pre>
+            <div class="card"><div id="cardPlot"></div><div class="note" id="cardNote"></div></div>
+          </div>
+        `;
+        const updateCard = () => {
+          const name = document.getElementById("cardMat").value;
+          const solver = document.getElementById("cardSolver").value;
+          const mat = options.find(r => r.material_name === name) || options[0];
+          if (!mat) return;
+          const card = materialCard(mat, solver);
+          document.getElementById("cardText").textContent = card.text;
+          document.getElementById("cardMetrics").innerHTML = `
+            <div class="metric"><div class="label">Card Type</div><div class="value" style="font-size:1rem">${card.cardType.split(" ")[0]}</div></div>
+            <div class="metric"><div class="label">Yield (MPa)</div><div class="value">${num(mat.yield_strength_mpa, 0)}</div></div>
+            <div class="metric"><div class="label">Failure Strain</div><div class="value">${num(mat.failure_strain, 3)}</div></div>
+            <div class="metric"><div class="label">Confidence</div><div class="value">${num(mat.confidence_score, 2)}</div></div>
+            <div class="metric"><div class="label">UTS (MPa)</div><div class="value">${num(mat.uts_mpa, 0)}</div></div>`;
+          document.getElementById("cardNote").innerHTML = `<strong>Validation status:</strong> Draft — public-data prototype<br/><strong>Damage model:</strong> Linear softening to zero stress at failure strain<br/><strong>Temperature:</strong> Room-temperature card; scale factors TBD`;
+          if (DATA.curves[mat.material_id]) {
+            plotCurves("cardPlot", [mat.material_id]);
+          } else {
+            Plotly.newPlot("cardPlot", [{
+              type: "scatter", mode: "lines+markers",
+              x: card.strains, y: card.stresses,
+              line: { color: "#0B6E4F", width: 3 }, name: "Plastic curve"
+            }], { ...LAYOUT, title: "Draft Plastic Curve", height: 380, xaxis: { title: "Plastic Strain" }, yaxis: { title: "Stress (MPa)" } }, { responsive: true, displayModeBar: false });
+          }
+          document.getElementById("dlCard").onclick = () => {
+            const blob = new Blob([card.text], { type: "text/plain" });
+            const a = document.createElement("a");
+            a.href = URL.createObjectURL(blob);
+            a.download = `${mat.material_name}_${solver.replaceAll(" ", "_")}.k`;
+            a.click();
+          };
+        };
+        document.getElementById("cardMat").addEventListener("change", updateCard);
+        document.getElementById("cardSolver").addEventListener("change", updateCard);
+        updateCard();
+        return;
+      }
+      if (state.tab === "validation") {
+        const rows = DATA.validation.filter(r => state.families.includes(r.family));
+        const meanErr = rows.length ? rows.reduce((s, r) => s + r.ai_cae_error_pct, 0) / rows.length : 0;
+        const passRate = rows.length ? rows.filter(r => r.pass_fail === "Pass").length / rows.length : 0;
+        const meanStar = rows.length ? rows.reduce((s, r) => s + r.nhtsa_star_proxy, 0) / rows.length : 0;
+        root.innerHTML = `
+          <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">Validation Workflow</h3>
+          <p style="color:var(--muted)">Compare AI predictions with CAE and physical crash proxies aligned to Euro NCAP / FMVSS / IIHS.</p>
+          <div class="metrics">
+            <div class="metric"><div class="label">Validation pairs</div><div class="value">${rows.length.toLocaleString()}</div></div>
+            <div class="metric"><div class="label">Mean AI–CAE error</div><div class="value">${num(meanErr)}%</div></div>
+            <div class="metric"><div class="label">Pass rate</div><div class="value">${pct(passRate)}</div></div>
+            <div class="metric"><div class="label">Mean NHTSA-star proxy</div><div class="value">${num(meanStar)}</div></div>
+            <div class="metric"><div class="label">Standards</div><div class="value" style="font-size:0.95rem">NCAP/FMVSS</div></div>
+          </div>
+          <div class="grid-2">
+            <div class="card"><div id="v1"></div></div>
+            <div class="card"><div id="v2"></div></div>
+          </div>
+          <div class="note"><strong>Coupon tests:</strong> Tensile, compression, shear, strain-rate, fracture.</div>
+          <div class="note"><strong>Component tests:</strong> Bumper beam, crash box, rail, door beam, battery enclosure.</div>
+          <div class="note"><strong>CAE validation:</strong> Compare AI prediction with LS-DYNA / Abaqus / PAM-CRASH.</div>
+          <div class="note"><strong>Physical crash:</strong> Compare simulation with crash-test measurements.</div>
+          <div class="note"><strong>Certification:</strong> Euro NCAP, FMVSS, IIHS, OEM internal standards.</div>
+          ${tableHTML(rows.slice(0, 150), [
+            {key:"family", label:"Family"},
+            {key:"crash_scenario", label:"Scenario"},
+            {key:"ai_crash_score", label:"AI"},
+            {key:"cae_crash_score", label:"CAE"},
+            {key:"physical_crash_score", label:"Physical"},
+            {key:"ai_cae_error_pct", label:"Error %"},
+            {key:"pass_fail", label:"Status"},
+            {key:"nhtsa_star_proxy", label:"Stars", digits:0},
+            {key:"standard", label:"Standard"}
+          ])}
+        `;
+        plotValidation("v1", "v2");
+        return;
+      }
+      // library
+      root.innerHTML = `
+        <h3 style="color:var(--green-dark);font-family:IBM Plex Sans,sans-serif">Data Library & Export</h3>
+        <p style="color:var(--muted)">Public-style material and crash datasets used by the ranking and card-generation engines.</p>
+        <div class="controls-row">
+          <div><label>Dataset</label>
+            <select id="libSet">
+              <option value="table">materials</option>
+              <option value="validation">validation</option>
+              <option value="top_materials">top_materials</option>
+              <option value="scenario_kpi">scenario_kpi</option>
+            </select>
+          </div>
+          <div><label>&nbsp;</label><button id="dlCsv">Download CSV</button></div>
+        </div>
+        <div id="libTable"></div>
+      `;
+      const renderLib = () => {
+        const key = document.getElementById("libSet").value;
+        let rows = DATA[key];
+        if (key === "table" || key === "validation") rows = rows.filter(r => !r.family || state.families.includes(r.family));
+        const cols = Object.keys(rows[0] || {}).slice(0, 12).map(k => ({ key: k, label: k, digits: 3 }));
+        document.getElementById("libTable").innerHTML = tableHTML(rows.slice(0, 250), cols);
+        document.getElementById("dlCsv").onclick = () => {
+          const header = Object.keys(rows[0] || {});
+          const csv = [header.join(",")].concat(rows.map(r => header.map(h => JSON.stringify(r[h] ?? "")).join(","))).join("\n");
+          const a = document.createElement("a");
+          a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
+          a.download = `${key}.csv`;
+          a.click();
+        };
+      };
+      document.getElementById("libSet").addEventListener("change", renderLib);
+      renderLib();
+    }
+    fetch("./data/dashboard_payload.json")
+      .then(r => {
+        if (!r.ok) throw new Error("Failed to load dashboard payload");
+        return r.json();
+      })
+      .then(json => {
+        DATA = json;
+        state.families = json.meta.families.slice();
+        state.scenario = json.meta.scenarios.includes("Side Impact") ? "Side Impact" : json.meta.scenarios[0];
+        state.component = json.meta.components.includes("Battery Enclosure") ? "Battery Enclosure" : json.meta.components[0];
+        renderShell();
+      })
+      .catch(err => {
+        document.getElementById("app").innerHTML = `<div class="loading" style="color:#C44536">Failed to load dashboard: ${err.message}</div>`;
+      });
+  </script>
+</body>
 </html>