app.js

(() => {
  'use strict';
  const data = window.DENIM_DEMO;
  if (!data) throw new Error('DENIM demo data not loaded');

  const $ = id => document.getElementById(id);
  const state = { trajectory: 6, step: 120, playing: false, pairToggle: 0, visible: { truth: true, denim: true, gru: false } };
  const colors = { truth: '#f2f0ea', denim: '#d38a51', gru: '#6d91e8', cyan: '#72d6d1' };
  let timer = null;

  function trajectory() { return data.trajectories[state.trajectory]; }
  function extent(values) {
    let min = Math.min(...values), max = Math.max(...values);
    if (Math.abs(max - min) < 1e-9) { min -= 1; max += 1; }
    const pad = (max - min) * .1;
    return [min - pad, max + pad];
  }
  const map = (value, a, b, c, d) => c + (value - a) * (d - c) / (b - a);
  const pathString = points => points.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(2)},${p[1].toFixed(2)}`).join(' ');
  const svgElement = (name, attrs = {}) => {
    const element = document.createElementNS('http://www.w3.org/2000/svg', name);
    for (const [key, value] of Object.entries(attrs)) element.setAttribute(key, value);
    return element;
  };
  function append(parent, name, attrs = {}, text = '') {
    const element = svgElement(name, attrs);
    if (text) element.textContent = text;
    parent.append(element);
    return element;
  }

  function buildPathList() {
    const list = $('pathList');
    list.innerHTML = '';
    data.trajectories.forEach((item, index) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = `path-button${index === state.trajectory ? ' active' : ''}`;
      button.innerHTML = `<span class="path-index">${String(index + 1).padStart(2, '0')}</span><span class="path-copy"><strong>${item.label}</strong><small>${item.scope}</small></span><span class="split ${item.split}">${item.split === 'validation' ? 'VAL' : item.split.toUpperCase()}</span>`;
      button.onclick = () => {
        // Keep the user's transport state; the existing timer reads the current trajectory.
        if (state.trajectory === index) return;
        state.trajectory = index;
        state.step = 0;
        state.pairToggle = 0;
        $('timeline').value = 0;
        buildPathList();
        render();
      };
      list.append(button);
    });
  }

  function chartFrame(svg, xValues, yValues, labels) {
    const width = Math.max(280, svg.clientWidth || 700);
    const height = Math.max(160, svg.clientHeight || 430);
    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
    svg.innerHTML = '';
    const margin = { left: 58, right: 20, top: 18, bottom: 43 };
    const [xmin, xmax] = extent(xValues), [ymin, ymax] = extent(yValues);
    const sx = value => map(value, xmin, xmax, margin.left, width - margin.right);
    const sy = value => map(value, ymin, ymax, height - margin.bottom, margin.top);
    for (let i = 0; i <= 5; i++) {
      const x = map(i, 0, 5, margin.left, width - margin.right);
      const y = map(i, 0, 5, margin.top, height - margin.bottom);
      append(svg, 'line', { x1: x, x2: x, y1: margin.top, y2: height - margin.bottom, class: 'grid' });
      append(svg, 'line', { x1: margin.left, x2: width - margin.right, y1: y, y2: y, class: 'grid' });
      append(svg, 'text', { x, y: height - 21, 'text-anchor': 'middle' }, (xmin + i * (xmax - xmin) / 5).toFixed(2));
      append(svg, 'text', { x: margin.left - 9, y: y + 3, 'text-anchor': 'end' }, (ymax - i * (ymax - ymin) / 5).toFixed(Math.max(Math.abs(ymin), Math.abs(ymax)) < 2 ? 2 : 0));
    }
    append(svg, 'line', { x1: margin.left, x2: width - margin.right, y1: height - margin.bottom, y2: height - margin.bottom, class: 'axis' });
    append(svg, 'line', { x1: margin.left, x2: margin.left, y1: margin.top, y2: height - margin.bottom, class: 'axis' });
    append(svg, 'text', { x: (margin.left + width - margin.right) / 2, y: height - 4, 'text-anchor': 'middle' }, labels.x);
    append(svg, 'text', { x: 13, y: (margin.top + height - margin.bottom) / 2, transform: `rotate(-90 13 ${(margin.top + height - margin.bottom) / 2})`, 'text-anchor': 'middle' }, labels.y);
    return { sx, sy, width, height, margin };
  }

  function drawHysteresis() {
    const item = trajectory(), svg = $('hysteresisChart');
    const allStress = [...item.truth_mpa, ...item.denim_mpa, ...item.gru_mpa];
    const frame = chartFrame(svg, item.strain_pct, allStress, { x: `应变 ${item.primary} / %`, y: `应力 ${item.primary} / MPa` });
    const definitions = [
      ['truth', item.truth_mpa], ['denim', item.denim_mpa], ['gru', item.gru_mpa]
    ];
    for (const [name, values] of definitions) {
      if (!state.visible[name]) continue;
      const points = item.strain_pct.map((x, i) => [frame.sx(x), frame.sy(values[i])]);
      append(svg, 'path', { d: pathString(points), class: `series ${name}-path future` });
      append(svg, 'path', { d: pathString(points.slice(0, state.step + 1)), class: `series ${name}-path` });
      append(svg, 'circle', { cx: points[state.step][0], cy: points[state.step][1], r: name === 'denim' ? 4.5 : 3.5, class: 'marker', stroke: colors[name] });
    }
    const pair = item.memory_pair;
    pair.forEach((index, n) => {
      const x = frame.sx(item.strain_pct[index]);
      const y = frame.sy(item.truth_mpa[index]);
      append(svg, 'circle', { cx: x, cy: y, r: 7, fill: 'none', stroke: n ? colors.denim : colors.cyan, 'stroke-width': 1.2, opacity: .7 });
    });
  }

  function drawPathPlane() {
    const item = trajectory(), svg = $('pathChart');
    const frame = chartFrame(svg, item.path_x_pct, item.path_y_pct, { x: `${item.primary} / %`, y: `${item.secondary} / %` });
    const points = item.path_x_pct.map((x, i) => [frame.sx(x), frame.sy(item.path_y_pct[i])]);
    append(svg, 'path', { d: pathString(points), class: 'series path-plane future' });
    append(svg, 'path', { d: pathString(points.slice(0, state.step + 1)), class: 'series path-plane' });
    append(svg, 'circle', { cx: points[state.step][0], cy: points[state.step][1], r: 4.5, class: 'marker', stroke: colors.cyan });
  }

  function updateState() {
    const item = trajectory(), i = state.step;
    $('stepLabel').textContent = `${i + 1} / ${item.strain_pct.length}`;
    $('timeline').max = item.strain_pct.length - 1;
    $('timeline').value = i;
    $('pathName').textContent = item.label;
    $('pathScope').textContent = item.scope;
    $('component').textContent = `${item.primary.toUpperCase()} / ${item.secondary.toUpperCase()}`;
    $('currentError').textContent = `${item.step_error_mpa[i].toFixed(3)} MPa`;
    $('yieldResidual').textContent = `${item.yield_residual_pa[i].toFixed(1)} Pa`;
    $('stressNow').textContent = item.denim_mpa[i].toFixed(1);
    $('memoryOne').textContent = `${item.memory_1_mpa[i].toFixed(1)} MPa`;
    $('memoryTwo').textContent = `${item.memory_2_mpa[i].toFixed(1)} MPa`;
    $('isotropicNow').textContent = `${item.isotropic_mpa[i].toFixed(1)} MPa`;
    $('peeqNow').textContent = item.peeq[i].toFixed(5);
    $('pathAxes').textContent = `${item.primary.toUpperCase()}—${item.secondary.toUpperCase()} 应变平面`;
    const plastic = i > 0 && item.peeq[i] - item.peeq[i - 1] > 1e-10;
    $('stateMode').textContent = plastic ? '塑性演化' : '弹性响应';
    document.querySelector('.state-dot i').style.background = plastic ? 'var(--copper)' : 'var(--green)';
    const maxA = Math.max(...item.memory_1_mpa, 1), maxB = Math.max(...item.memory_2_mpa, 1);
    $('memoryA').style.transform = `rotate(${360 * item.memory_1_mpa[i] / maxA - 25}deg)`;
    $('memoryB').style.transform = `rotate(${-320 * item.memory_2_mpa[i] / maxB + 45}deg)`;
    const pair = item.memory_pair;
    const closeToPair = Math.abs(i - pair[0]) < 2 || Math.abs(i - pair[1]) < 2;
    $('historyBadge').textContent = closeToPair ? '同应变 · 异历史' : (plastic ? '塑性状态演化' : '历史状态保持');
  }

  function render() { updateState(); drawHysteresis(); drawPathPlane(); }

  function stopPlayback() {
    state.playing = false;
    clearInterval(timer);
    $('play').textContent = '播放路径';
    $('play').setAttribute('aria-pressed', 'false');
  }

  function togglePlayback() {
    state.playing = !state.playing;
    $('play').textContent = state.playing ? '暂停播放' : '播放路径';
    $('play').setAttribute('aria-pressed', String(state.playing));
    clearInterval(timer);
    if (state.playing) timer = setInterval(() => {
      const count = trajectory().strain_pct.length;
      state.step = (state.step + 2) % count;
      render();
    }, 55);
  }

  function buildLadder() {
    const full = data.summary.full_physics_path_ood;
    const closure = data.summary.test;
    const rows = [
      ['Pointwise MLP', 'full', full.pointwise_mlp.rmse_mpa, 'blackbox'],
      ['GRU', 'full', full.gru.rmse_mpa, 'blackbox'],
      ['LSTM', 'full', full.lstm.rmse_mpa, 'blackbox'],
      ['Causal TCN', 'full', full.causal_tcn.rmse_mpa, 'blackbox'],
      ['Physics-state GRU', 'full', full.physics_state_gru.rmse_mpa, 'blackbox'],
      ['Physics-integrator NN', 'full', full.physics_integrator_nn.rmse_mpa, 'physics'],
      ['Incomplete J2', 'closure', closure.incomplete_j2.rmse_mpa, 'closure'],
      ['GRU', 'closure', closure.gru.rmse_mpa, 'closure'],
      ['DENIM', 'closure', closure.denrm.rmse_mpa, 'denim'],
    ].sort((a, b) => (a[1] === b[1] ? a[2]-b[2] : a[1]==='closure' ? -1 : 1));
    const ladder = $('ladder');
    ladder.innerHTML = '';
    const maxValue = Math.max(...rows.map(row => row[2])) * 1.04;
    const denimValue = closure.denrm.rmse_mpa;
    let groupIndex = 0;
    rows.forEach((row, index) => {
      if (index === 0 || rows[index - 1][1] !== row[1]) groupIndex = 0;
      groupIndex++;
      if (index === 0 || rows[index - 1][1] !== row[1]) {
        const heading = document.createElement('div');
        heading.className = 'protocol-heading';
        heading.innerHTML = row[1] === 'closure'
          ? '<strong>B · 未知硬化闭合</strong><span>隐藏三通道 Chaboche 硬化；DENIM、Incomplete J2 与 GRU 按同一协议比较。</span>'
          : '<strong>A · 已知方程基准</strong><span>完整 J2 / Chaboche 方程与参数已知；比较模型对未见加载路径的预测。</span>';
        ladder.append(heading);
      }
      const [name, protocol, value, kind] = row;
      const line = document.createElement('div');
      line.className = `ladder-group${name === 'DENIM' ? ' featured' : ''}`;
      const width = 100 * value / maxValue;
      let protocolName = protocol === 'full' ? '协议 A · 已知方程 · 新路径' : '协议 B · 未知硬化 · 新路径';
      if (name === 'Physics-integrator NN') protocolName = '协议 A · 完整方程积分';
      const ratio = value / denimValue;
      const comparison = protocol === 'full' ? '仅在协议 A 内比较' : name === 'DENIM' ? '协议 B 基准' : (ratio >= 1 ? `误差比 DENIM 高 ${ratio.toFixed(ratio >= 10 ? 0 : 1)}×` : `误差比 DENIM 低 ${(1 / ratio).toFixed(0)}×`);
      line.innerHTML = `<div class="ladder-rank">${String(groupIndex).padStart(2, '0')}</div><div class="ladder-model">${name}</div><div class="ladder-protocol"><span class="protocol-pill ${protocol === 'closure' ? 'closure' : ''}">${protocolName}</span></div><div class="bar-track"><div class="bar-fill ${kind}" style="width:${width.toFixed(2)}%"></div></div><div class="ladder-value">${value < .1 ? value.toFixed(4) : value.toFixed(3)} MPa<small>${comparison}</small></div>`;
      ladder.append(line);
    });
  }

  const modelAtlas = [
    {
      name: 'Pointwise MLP', short: '单点映射', family: '数据驱动 · 无记忆', badge: '当前量 → 当前量',
      tagline: '只看当前应变，不读取加载历史。',
      nodes: [['输入', '当前应变 εₜ', '单个时刻'], ['神经映射', 'MLP', '黑箱回归', 'learned'], ['输出', '当前应力 σₜ', '无内部状态']],
      summary: '结构最简单、推理很快，但同一应变在不同加载历史下可能对应不同应力，单点映射无法区分。',
      traits: ['无', '无', '预测全部应力', '弱']
    },
    {
      name: 'GRU', short: '时序黑箱', family: '数据驱动 · 隐式记忆', badge: '历史序列 → 应力',
      tagline: '从应变序列中压缩出隐藏历史状态。',
      nodes: [['输入', '应变历史 ε₀:ₜ', '完整序列'], ['序列编码', 'GRU', '隐状态记忆', 'learned'], ['输出', '应力序列 σ₀:ₜ', '端到端预测']],
      summary: '能够识别滞回和反向加载，但记忆完全藏在网络隐状态中；路径分布变化时，外推稳定性受训练数据覆盖范围影响。',
      traits: ['隐状态', '无', '学习全部演化', '中—弱']
    },
    {
      name: 'Physics-state GRU', short: '弱物理时序', family: '物理增强 · 隐状态', badge: '物理特征 + 时序网络',
      tagline: '把物理状态作为特征交给循环网络。',
      nodes: [['输入', '应变 + 物理特征', '状态提示', 'physics'], ['状态更新', 'Physics-state GRU', '学习时序演化', 'learned'], ['输出', '应力 + 隐状态', '弱物理约束']],
      summary: '物理特征改善了网络的输入表达，但积分更新仍主要由黑箱时序网络承担，守恒与一致性通常需要额外约束。',
      traits: ['隐状态', '物理特征', '学习状态更新', '中']
    },
    {
      name: 'Physics-integrator NN', short: '神经辅助积分器', family: '已知方程 · 神经辅助积分', badge: '完整本构方程已知',
      tagline: '网络修正塑性增量初值，完整方程完成一致性校正。',
      nodes: [['输入', 'Δε + zₙ', '增量与状态'], ['力学初值', 'Δλ seed', '解析近似', 'physics'], ['神经修正', 'NN correction', '改善初值', 'learned'], ['方程校正', '返回映射', '屈服一致性', 'physics'], ['输出', 'σₙ₊₁ + zₙ₊₁', '高精度']],
      summary: '网络不学习新的材料规律；J2 / Chaboche 方程、参数和内部变量均已知。它只帮助求解塑性增量，并由完整方程完成最终校正。',
      traits: ['显式内部变量', '完整方程', '修正塑性增量初值', '强']
    },
    {
      name: 'Incomplete J2', short: '不完备基线', family: '不完备物理 · 无神经闭合', badge: '骨架正确 · 演化缺失',
      tagline: '保留基本塑性框架，但硬化演化表达不足。',
      nodes: [['输入', 'Δε + zₙ', '增量与状态'], ['力学骨架', '弹性 + J2 屈服', '基本约束', 'physics'], ['缺失环节', '不完备硬化', '系统偏差'], ['输出', 'σₙ₊₁', '误差累积']],
      summary: '物理骨架提供基本合理性，但缺少真实材料的复杂记忆与硬化通道，循环和非比例路径下会产生持续误差。',
      traits: ['有限', '基础骨架', '无', '中—弱']
    },
    {
      name: 'DENIM', short: '离散能量神经内部变量模型', family: '不完备物理 · 神经闭合', badge: '力学骨架 + 可学习演化',
      tagline: '保留可验证力学积分，以神经内部变量补全未知演化。',
      nodes: [['输入', 'Δε + zₙ', '增量与历史状态'], ['力学骨架', '弹性 · J2 · 流动法则', '显式约束', 'physics'], ['神经闭合', '快—慢记忆通道', '未知硬化演化', 'learned memory'], ['隐式积分', '返回映射', '一致性求解', 'physics'], ['输出', 'σₙ₊₁ + zₙ₊₁', '可追踪状态']],
      summary: '网络不替代整套本构方程，只学习物理骨架未描述的演化项；因此同时保留路径记忆、求解约束和内部状态可解释性。',
      traits: ['显式神经内部变量', '核心骨架', '闭合未知演化', '强']
    },
    {
      name: 'Causal TCN', short: '因果时序卷积', family: '数据驱动 · 有限历史窗口', badge: '只读当前与过去',
      tagline: '通过多层因果卷积，提取不同时间尺度的加载历史。',
      summary: '膨胀卷积扩大历史感受野，不读取未来输入；记忆由有限历史窗口提供，而非循环隐状态。',
      traits: ['历史感受野', '无', '预测全部应力', '依赖训练覆盖']
    }
  ];

  function buildModelSelector() {
    const selector = $('modelSelector');
    selector.innerHTML = '';
    [0, 1, 6, 2, 3, 4, 5].forEach(index => {
      const model = modelAtlas[index];
      const button = document.createElement('button');
      button.type = 'button';
      button.dataset.modelIndex = index;
      button.className = `model-select${index === 5 ? ' active' : ''}`;
      button.setAttribute('aria-pressed', String(index === 5));
      button.innerHTML = `<strong>${model.name}</strong><small>${model.short}</small>`;
      button.onclick = () => renderArchitecture(index);
      selector.append(button);
    });
  }

  function renderArchitecture(index) {
    const model = modelAtlas[index];
    document.querySelectorAll('.model-select').forEach((button, buttonIndex) => {
      const active = Number(button.dataset.modelIndex) === index;
      button.classList.toggle('active', active);
      button.setAttribute('aria-pressed', String(active));
    });
    $('architectureFamily').textContent = model.family;
    $('architectureName').textContent = model.name;
    $('architectureTagline').textContent = model.tagline;
    $('architectureBadge').textContent = model.badge;
    $('architectureSummary').textContent = model.summary;
    ['traitMemory', 'traitPhysics', 'traitLearning', 'traitOod'].forEach((id, traitIndex) => { $(id).textContent = model.traits[traitIndex]; });
    window.DenimArchitecture.render(index);
  }

  document.querySelectorAll('[data-series]').forEach(input => {
    input.addEventListener('change', () => { state.visible[input.dataset.series] = input.checked; drawHysteresis(); });
  });
  $('timeline').addEventListener('input', event => { state.step = Number(event.target.value); render(); });
  $('play').onclick = togglePlayback;
  $('memoryPair').onclick = () => {
    const pair = trajectory().memory_pair;
    state.step = pair[state.pairToggle++ % 2];
    render();
  };
  $('reset').onclick = () => { stopPlayback(); state.step = 0; state.pairToggle = 0; render(); };
  document.addEventListener('keydown', event => {
    if ($('labView').hidden) return;
    if (event.target.matches('input, button, a')) return;
    if (event.code === 'Space') { event.preventDefault(); togglePlayback(); }
    if (event.key === 'ArrowRight') { stopPlayback(); state.step = Math.min(state.step + 1, trajectory().strain_pct.length - 1); render(); }
    if (event.key === 'ArrowLeft') { stopPlayback(); state.step = Math.max(state.step - 1, 0); render(); }
    if (event.key.toLowerCase() === 'm') { $('memoryPair').click(); }
  });
  document.querySelectorAll('[data-view]').forEach(button => {
    button.onclick = () => {
      const target = button.dataset.view;
      const evidence = target === 'evidence';
      const models = target === 'models';
      $('labView').hidden = evidence || models;
      $('evidenceView').hidden = !evidence;
      $('modelsView').hidden = !models;
      document.querySelectorAll('[data-view]').forEach(value => {
        value.classList.toggle('active', value === button);
        value.setAttribute('aria-selected', String(value === button));
      });
      if (target !== 'lab') stopPlayback();
      if (target === 'lab') requestAnimationFrame(render);
    };
  });
  let resizeTimer;
  window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(render, 90); });
  buildPathList();
  buildLadder();
  buildModelSelector();
  renderArchitecture(5);
  render();
})();