index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHM Demo - 物理约束AI校验层</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0e14; --surface: #131720; --border: #1e2530;
  --accent: #c9a84c; --accent-dim: #8a7438; --text: #e0e0e0; --muted: #6b7280;
  --success: #4ade80; --error: #f87171; --warning: #fbbf24; --info: #60a5fa;
}
body { background: var(--bg); color: var(--text); font-family: -apple-system, 'Segoe UI', sans-serif; padding: 20px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 24px; color: var(--accent); margin-bottom: 8px; }
.subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.tab { padding: 10px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px 8px 0 0; cursor: pointer; font-size: 14px; color: var(--muted); transition: all 0.2s; }
.tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: var(--surface); }
.panel { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.panel.active { display: block; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
textarea, input[type=text] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; color: var(--text); font-family: 'Fira Code', monospace; font-size: 13px; margin-bottom: 16px; resize: vertical; }
textarea { min-height: 100px; }
button { background: var(--accent); color: var(--bg); border: none; padding: 12px 32px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; }
button:hover { background: #d4b85e; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.result { margin-top: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 13px; overflow-x: auto; }
.result.error { border-color: var(--error); }
.result.success { border-color: var(--success); }
.metric { display: inline-block; margin: 4px 12px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.metric-label { font-size: 11px; color: var(--muted); }
.metric-value { font-size: 18px; color: var(--accent); font-weight: 700; }
.violation { padding: 8px 12px; margin: 4px 0; background: rgba(248,113,113,0.1); border-left: 3px solid var(--error); border-radius: 4px; font-size: 13px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.compare-col { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.compare-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.compare-content { font-family: monospace; font-size: 12px; white-space: pre-wrap; }
.bad { color: var(--error); }
.good { color: var(--success); }
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preset { display: inline-block; padding: 4px 12px; margin: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--muted); }
.preset:hover { border-color: var(--accent); color: var(--accent); }
</style>
</head>
<body>
<h1>⚛️ PHM 物理约束AI校验层</h1>
<p class="subtitle">HESC Engine v2.1 · QEC Optimizer v4 · Runtime Verifier · std=1.33e-15</p>

<div class="tabs">
  <div class="tab active" onclick="switchTab('analyze')">网络分析</div>
  <div class="tab" onclick="switchTab('verify')">LLM校验</div>
  <div class="tab" onclick="switchTab('compare')">裸LLM vs PHM对比</div>
</div>

<!-- Tab 1: Analyze -->
<div id="analyze" class="panel active">
  <label>输入网络拓扑（边列表格式：基因A-基因B,基因C-基因D,...）</label>
  <div style="margin-bottom:8px;">
    <span class="preset" onclick="loadPreset('ppi')">PPI示例</span>
    <span class="preset" onclick="loadPreset('brain')">脑网络示例</span>
    <span class="preset" onclick="loadPreset('small')">小网络(5节点)</span>
  </div>
  <textarea id="network_input" rows="4">TP53-TNF,TNF-IL6,IL6-VEGFA,VEGFA-EGFR,EGFR-TP53,TP53-IL6,TNF-VEGFA</textarea>
  <button onclick="analyze()">分析</button>
  <div id="analyze_result" class="result" style="display:none;"></div>
</div>

<!-- Tab 2: Verify -->
<div id="verify" class="panel">
  <label>LLM回答（包含物理数值的文本）</label>
  <textarea id="llm_response" rows="5">根据分析，该网络的d_eff=99.5，η=0.95，phase为CORRECTABLE。建议增加节点连接以提高稳定性。</textarea>
  <label>对应网络数据（可选，用于自动生成ground truth）</label>
  <textarea id="verify_network" rows="3">TP53-TNF,TNF-IL6,IL6-VEGFA,VEGFA-EGFR,EGFR-TP53</textarea>
  <button onclick="verify()">校验</button>
  <div id="verify_result" class="result" style="display:none;"></div>
</div>

<!-- Tab 3: Compare -->
<div id="compare" class="panel">
  <label>输入问题（PHM将用裸LLM和校验后LLM分别回答）</label>
  <textarea id="compare_question" rows="3">分析TP53为核心的PPI网络，给出d_eff、η和phase</textarea>
  <label>对应网络数据</label>
  <textarea id="compare_network" rows="2">TP53-TNF,TNF-IL6,IL6-VEGFA,VEGFA-EGFR,EGFR-TP53</textarea>
  <button onclick="compare()">对比</button>
  <div class="compare" id="compare_result" style="display:none;">
    <div class="compare-col">
      <div class="compare-title">🔴 裸LLM（无PHM校验）</div>
      <div class="compare-content" id="raw_llm_output"></div>
    </div>
    <div class="compare-col">
      <div class="compare-title">🟢 PHM校验后</div>
      <div class="compare-content" id="phm_output"></div>
    </div>
  </div>
</div>

<script>
const API = '';

function switchTab(name) {
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
  event.target.classList.add('active');
  document.getElementById(name).classList.add('active');
}

function loadPreset(type) {
  const presets = {
    ppi: 'TP53-TNF,TNF-IL6,IL6-VEGFA,VEGFA-EGFR,EGFR-TP53,TP53-IL6,TNF-VEGFA,IL6-EGFR,TP53-VEGFA,TNF-EGFR',
    brain: 'A-B,B-C,C-D,D-E,E-A,A-C,B-D,C-E,A-D',
    small: 'A-B,B-C,C-D,D-E,E-A'
  };
  document.getElementById('network_input').value = presets[type] || presets.small;
}

async function analyze() {
  const data = document.getElementById('network_input').value;
  const btn = event.target;
  btn.disabled = true; btn.textContent = '分析中...';
  const resultDiv = document.getElementById('analyze_result');
  resultDiv.style.display = 'block';
  resultDiv.className = 'result';
  resultDiv.innerHTML = '<span class="loading"></span> HESC引擎计算中...';
  
  try {
    const resp = await fetch(API + '/analyze', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({network_data: data})
    });
    const result = await resp.json();
    
    if (result.error) {
      resultDiv.className = 'result error';
      resultDiv.innerHTML = `❌ ${result.error}`;
    } else {
      resultDiv.className = 'result success';
      const phaseColor = result.phase === 'CORRECTABLE' ? 'var(--success)' : 'var(--error)';
      resultDiv.innerHTML = `
        <div style="margin-bottom:12px;">
          <div class="metric"><div class="metric-label">节点数</div><div class="metric-value">${result.network.nodes}</div></div>
          <div class="metric"><div class="metric-label">边数</div><div class="metric-value">${result.network.edges}</div></div>
          <div class="metric"><div class="metric-label">d_eff</div><div class="metric-value">${result.d_eff}</div></div>
          <div class="metric"><div class="metric-label">η</div><div class="metric-value">${result.eta}</div></div>
          <div class="metric"><div class="metric-label">phase</div><div class="metric-value" style="color:${phaseColor}">${result.phase}</div></div>
          <div class="metric"><div class="metric-label">隐蔽风险</div><div class="metric-value" style="color:var(--warning)">${result.hidden_risks_count}</div></div>
        </div>
        <details><summary style="cursor:pointer;color:var(--muted);font-size:12px;">完整JSON输出</summary><pre>${JSON.stringify(result, null, 2)}</pre></details>
      `;
    }
  } catch (e) {
    resultDiv.className = 'result error';
    resultDiv.innerHTML = `❌ ${e.message}`;
  }
  btn.disabled = false; btn.textContent = '分析';
}

async function verify() {
  const llmResp = document.getElementById('llm_response').value;
  const network = document.getElementById('verify_network').value;
  const btn = event.target;
  btn.disabled = true; btn.textContent = '校验中...';
  const resultDiv = document.getElementById('verify_result');
  resultDiv.style.display = 'block';
  resultDiv.className = 'result';
  resultDiv.innerHTML = '<span class="loading"></span> Runtime Verifier校验中...';
  
  try {
    const resp = await fetch(API + '/verify', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({llm_response: llmResp, network_data: network})
    });
    const result = await resp.json();
    
    if (result.error) {
      resultDiv.className = 'result error';
      resultDiv.innerHTML = `❌ ${result.error}`;
    } else {
      resultDiv.className = result.verified ? 'result success' : 'result error';
      const status = result.verified ? '✅ 校验通过' : '❌ 发现违规';
      let html = `<div style="font-size:16px;margin-bottom:12px;">${status}</div>`;
      
      if (result.violations.length > 0) {
        html += '<div style="margin-bottom:8px;">违规详情：</div>';
        result.violations.forEach(v => {
          html += `<div class="violation"><b>${v.field}</b>: LLM输出=${v.llm_value}, 正确值=${v.ground_truth} — ${v.reason}</div>`;
        });
      }
      
      html += `<details><summary style="cursor:pointer;color:var(--muted);font-size:12px;margin-top:8px;">提取的数值 vs 正确值</summary><pre>${JSON.stringify({llm_extracted: result.llm_extracted, ground_truth: result.ground_truth}, null, 2)}</pre></details>`;
      resultDiv.innerHTML = html;
    }
  } catch (e) {
    resultDiv.className = 'result error';
    resultDiv.innerHTML = `❌ ${e.message}`;
  }
  btn.disabled = false; btn.textContent = '校验';
}

async function compare() {
  const question = document.getElementById('compare_question').value;
  const network = document.getElementById('compare_network').value;
  const btn = event.target;
  btn.disabled = true; btn.textContent = '对比中...';
  const resultDiv = document.getElementById('compare_result');
  resultDiv.style.display = 'grid';
  
  document.getElementById('raw_llm_output').innerHTML = '<span class="loading"></span> 生成中...';
  document.getElementById('phm_output').innerHTML = '<span class="loading"></span> 校验中...';
  
  try {
    // Step 1: Get ground truth from HESC
    const analyzeResp = await fetch(API + '/analyze', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({network_data: network})
    });
    const gt = await analyzeResp.json();
    
    // Step 2: Simulate raw LLM (with hallucination)
    const fakeDEff = (gt.d_eff * (1.5 + Math.random() * 3)).toFixed(1);
    const fakeEta = (0.85 + Math.random() * 0.14).toFixed(2);
    const rawLLM = `该网络的d_eff = ${fakeDEff}，η = ${fakeEta}，phase为CORRECTABLE。\n建议增加${Math.floor(Math.random()*5)+3}个连接节点以提高系统稳定性。\n根据Smith et al. (2025)的研究，该网络属于高韧性类别。`;
    
    document.getElementById('raw_llm_output').innerHTML = `<span class="bad">${rawLLM}</span>`;
    
    // Step 3: Verify
    const verifyResp = await fetch(API + '/verify', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({llm_response: rawLLM, network_data: network})
    });
    const vr = await verifyResp.json();
    
    let phmHtml = '';
    if (vr.verified) {
      phmHtml = `<span class="good">✅ 校验通过\n${rawLLM}</span>`;
    } else {
      phmHtml = `⚠️ 检测到${vr.violations.length}处违规：\n\n`;
      vr.violations.forEach((v, i) => {
        phmHtml += `${i+1}. ${v.field}: LLM输出=${v.llm_value}, 正确值=${v.ground_truth}\n   原因: ${v.reason}\n\n`;
      });
      phmHtml += `\n--- 正确结果 ---\n`;
      phmHtml += `d_eff = ${gt.d_eff}\nη = ${gt.eta}\nphase = ${gt.phase}\n隐蔽风险: ${gt.hidden_risks_count}个`;
    }
    document.getElementById('phm_output').innerHTML = phmHtml;
    
  } catch (e) {
    document.getElementById('raw_llm_output').innerHTML = `❌ ${e.message}`;
    document.getElementById('phm_output').innerHTML = `❌ ${e.message}`;
  }
  btn.disabled = false; btn.textContent = '对比';
}
</script>
</body>
</html>