gaojie
5de86388db
Sync to site1 / sync (push) Has been cancelled
- Created planning_explainer.html to demonstrate orthogonal invariance and optimal planning with interactive controls and visualizations. - Created spectral_explainer.html to illustrate spectral decomposition and linear identifiability, featuring adjustable spectral weights and real-time correlation calculations.
177 lines
13 KiB
HTML
177 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>近似可识别性界 — 交互式探索</title>
|
||
<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=Spectral:ital,wght@0,400;0,600;1,400&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root{--bg:#0e1116;--panel:#161b22;--panel-2:#1b222c;--line:#232b36;--txt:#e6edf3;--txt-2:#8b949e;--txt-3:#5c6672;--linear:#4cc9f0;--linear-soft:rgba(76,201,240,.16);--nl:#f4a261;--nl-soft:rgba(244,162,97,.16);--ok:#56d364;--r:14px;}
|
||
*{box-sizing:border-box;}html,body{margin:0;height:100%;}
|
||
body{background:radial-gradient(1200px 700px at 78% -8%,rgba(76,201,240,.06),transparent 60%),var(--bg);color:var(--txt);font-family:'Sora',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;}
|
||
.app{height:100vh;display:grid;grid-template-columns:320px 1fr 330px;grid-template-rows:auto 1fr;grid-template-areas:"head head head" "ctrl stage read";gap:18px;padding:22px 26px;}
|
||
header{grid-area:head;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
|
||
header .kicker{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.32em;color:var(--linear);text-transform:uppercase;}
|
||
header h1{margin:0;font-family:'Spectral',serif;font-weight:600;font-size:30px;}
|
||
header h1 em{color:var(--txt-2);font-style:italic;font-weight:400;}
|
||
header .sub{font-size:13px;color:var(--txt-2);max-width:560px;line-height:1.5;}
|
||
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);}
|
||
.controls{grid-area:ctrl;padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;}
|
||
.block .label{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--txt-3);text-transform:uppercase;margin-bottom:10px;}
|
||
.srow{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
|
||
.srow .nm{font:500 12px 'JetBrains Mono',monospace;width:96px;}
|
||
.srow .nm.dl{color:var(--linear);}.srow .nm.dn{color:var(--nl);}
|
||
.srow .vv{font:600 12px 'JetBrains Mono',monospace;color:var(--txt-2);width:46px;text-align:right;}
|
||
input[type=range]{-webkit-appearance:none;flex:1;height:4px;border-radius:4px;background:#2a323d;cursor:pointer;}
|
||
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#eaf6fb;border:3px solid var(--linear);}
|
||
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#eaf6fb;border:3px solid var(--linear);}
|
||
input.dn::-webkit-slider-thumb{border-color:var(--nl);}input.dn::-moz-range-thumb{border-color:var(--nl);}
|
||
.hint{font-size:12px;color:var(--txt-3);line-height:1.55;margin-top:8px;}
|
||
.bigbound{font:700 30px/1 'JetBrains Mono',monospace;color:var(--nl);}
|
||
.preset{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
|
||
.preset button{flex:1 1 45%;padding:8px 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt-2);font:500 11px 'Sora';cursor:pointer;}
|
||
.preset button:hover{border-color:var(--linear);color:var(--linear);}
|
||
.stage{grid-area:stage;padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;min-height:0;}
|
||
.stage .ttl h2{margin:0;font-family:'Spectral',serif;font-weight:600;font-size:18px;}
|
||
.canvas-wrap{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;background:#0b0e13;border:1px solid var(--line);}
|
||
.canvas-wrap .cap{position:absolute;top:9px;left:13px;font:400 12px 'JetBrains Mono',monospace;color:var(--txt-3);}
|
||
canvas{display:block;width:100%;height:100%;}
|
||
.reading{grid-area:read;padding:22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;}
|
||
.reading h3{margin:0;font-family:'Spectral',serif;font-weight:600;font-size:17px;}
|
||
.formula{font:500 14px 'JetBrains Mono',monospace;background:#0b0e13;border:1px solid var(--line);border-radius:8px;padding:14px 16px;line-height:1.7;}
|
||
.formula .hi{color:var(--linear);}.formula .hl{color:var(--nl);}
|
||
.legend{display:flex;flex-direction:column;gap:8px;}
|
||
.legend div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-2);}
|
||
.legend i{width:13px;height:13px;border-radius:3px;flex:none;}
|
||
.verdict{margin-top:auto;padding:16px;border-radius:10px;background:linear-gradient(135deg,var(--linear-soft),transparent 70%);border:1px solid color-mix(in oklch,var(--linear) 40%,var(--line));font-family:'Spectral',serif;font-size:14px;line-height:1.6;}
|
||
.verdict b{color:var(--linear);}
|
||
.src{font:400 11px 'JetBrains Mono',monospace;color:var(--txt-3);}
|
||
.navbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(22,27,34,.9);border:1px solid var(--line);border-radius:30px;padding:6px 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;}
|
||
.navbar a{font:500 12px 'JetBrains Mono',monospace;color:var(--txt-2);text-decoration:none;padding:5px 11px;border-radius:20px;}
|
||
.navbar a:hover{color:var(--linear);}.navbar a.on{background:var(--linear-soft);color:var(--linear);}
|
||
::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-thumb{background:#2a323d;border-radius:8px;}
|
||
@media (max-width:1080px){.app{grid-template-columns:1fr;grid-template-rows:repeat(4,auto);grid-template-areas:"head" "ctrl" "stage" "read";overflow:auto;height:auto;}body{overflow:auto;}.canvas-wrap{height:320px;flex:none;}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<header>
|
||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||
<span class="kicker">LeJEPA · Topic 5 · 定理 3</span>
|
||
<h1>近似可识别性界 <em>优雅降级</em></h1>
|
||
</div>
|
||
<p class="sub">当对齐间隙 <b style="color:var(--nl)">δ</b> 与白化误差 <b style="color:var(--nl)">ε</b> 不为零时，恢复误差被界 <b>D + (ε+D)²</b> 控制（D = δ/(2ρ(1−ρ))）。拖动三个参数，观察 δ 是主因、ε 仅二阶。</p>
|
||
</header>
|
||
|
||
<section class="card controls">
|
||
<div class="block">
|
||
<div class="label">误差参数</div>
|
||
<div class="srow"><span class="nm dn">δ 对齐间隙</span><input id="delta" class="dn" type="range" min="0" max="0.3" step="0.002" value="0.018" aria-label="delta" title="delta"/><span class="vv" id="vd">0.018</span></div>
|
||
<div class="srow"><span class="nm dn">ε 白化误差</span><input id="eps" class="dn" type="range" min="0" max="1" step="0.01" value="0.1" aria-label="epsilon" title="epsilon"/><span class="vv" id="ve">0.10</span></div>
|
||
<div class="srow"><span class="nm dl">ρ 相关性</span><input id="rho" type="range" min="0.5" max="0.95" step="0.01" value="0.90" aria-label="rho" title="rho"/><span class="vv" id="vr">0.90</span></div>
|
||
<div class="preset">
|
||
<button data-p="0,0,0.9">完美 (δ=ε=0)</button>
|
||
<button data-p="0.018,0.1,0.9">典型</button>
|
||
<button data-p="0.018,0.5,0.9">大白化误差</button>
|
||
<button data-p="0.18,0,0.9">大对齐间隙</button>
|
||
</div>
|
||
<div class="hint">δ=0 且 ε=0 时界=0，退化为定理1的精确恢复 h(z)=Qz。</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="label">归一化量 D = δ / (2ρ(1−ρ))</div>
|
||
<div class="srow"><span class="nm">谱间隙 2ρ(1−ρ)</span><span class="vv" id="sg" style="width:auto;">0.18</span></div>
|
||
<div class="srow"><span class="nm">D</span><span class="vv" id="dD" style="width:auto;color:var(--nl);">0.10</span></div>
|
||
<div class="hint">ρ 越大，2ρ(1−ρ) 越小，D 对 δ 越敏感。</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="label">误差上界</div>
|
||
<div class="bigbound" id="boundTxt">0.110</div>
|
||
<div class="hint">E[‖h(z)−Qz‖²] ≤ D + (ε+D)²</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card stage">
|
||
<div class="ttl"><h2>误差界的构成：D（一阶）+ (ε+D)²（二阶）</h2></div>
|
||
<div class="canvas-wrap"><div class="cap">堆叠条 = 界的两部分；右侧曲面 = 界随 δ 的增长</div><canvas id="cv"></canvas></div>
|
||
</section>
|
||
|
||
<section class="card reading">
|
||
<h3>定理 3 的界</h3>
|
||
<div class="formula">E[‖h(z)−Qz‖²]<br> ≤ <span class="hl">D</span> + (<span class="hl">ε</span>+<span class="hl">D</span>)²<br><br>D = <span class="hl">δ</span> / (2<span class="hi">ρ</span>(1−<span class="hi">ρ</span>))</div>
|
||
<div class="legend">
|
||
<div><i style="background:#f4a261"></i>D：来自对齐间隙 δ（线性主导项）</div>
|
||
<div><i style="background:#e76f51"></i>(ε+D)²：白化与 Procrustes 误差（二阶）</div>
|
||
</div>
|
||
<div class="verdict" id="verdict"></div>
|
||
<div class="src">来源：JEPA/math/05_approximate_identifiability.md</div>
|
||
</section>
|
||
</div>
|
||
<nav class="navbar" id="nav"></nav>
|
||
|
||
<script>
|
||
const NAV=[["01","Hermite","hermite_explainer.html"],["02","OU·Mehler","ou_mehler_explainer.html"],["03","谱分解","spectral_explainer.html"],["04","高斯唯一","gaussian_uniqueness_explainer.html"],["05","近似界","approx_bound_explainer.html"],["06","规划等价","planning_explainer.html"]];
|
||
const nav=document.getElementById('nav');NAV.forEach(([n,t,f])=>{const a=document.createElement('a');a.href=f;a.textContent=n+' '+t;if(f==='approx_bound_explainer.html')a.className='on';nav.appendChild(a);});
|
||
|
||
let delta=0.018, eps=0.1, rho=0.90;
|
||
function D(){return delta/(2*rho*(1-rho));}
|
||
function bound(){const d=D();return d+(eps+d)*(eps+d);}
|
||
const map={delta:['vd',v=>v.toFixed(3),x=>delta=x],eps:['ve',v=>v.toFixed(2),x=>eps=x],rho:['vr',v=>v.toFixed(2),x=>rho=x]};
|
||
Object.keys(map).forEach(id=>{const[vid,fmt,set]=map[id];document.getElementById(id).addEventListener('input',e=>{set(+e.target.value);document.getElementById(vid).textContent=fmt(+e.target.value);draw();});});
|
||
document.querySelectorAll('.preset button').forEach(b=>b.addEventListener('click',()=>{const[d,e,r]=b.dataset.p.split(',').map(Number);delta=d;eps=e;rho=r;document.getElementById('delta').value=d;document.getElementById('eps').value=e;document.getElementById('rho').value=r;document.getElementById('vd').textContent=d.toFixed(3);document.getElementById('ve').textContent=e.toFixed(2);document.getElementById('vr').textContent=r.toFixed(2);draw();}));
|
||
|
||
const cv=document.getElementById('cv'),ctx=cv.getContext('2d');
|
||
function fit(){const r=cv.getBoundingClientRect(),dpr=devicePixelRatio||1;cv.width=r.width*dpr;cv.height=r.height*dpr;return{w:r.width,h:r.height,dpr};}
|
||
|
||
function draw(){
|
||
const {w:W,h:H,dpr}=fit();ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,W,H);
|
||
const d=D(), b=bound(), quad=(eps+d)*(eps+d);
|
||
const sg=2*rho*(1-rho);
|
||
document.getElementById('sg').textContent=sg.toFixed(3);
|
||
document.getElementById('dD').textContent=d.toFixed(3);
|
||
document.getElementById('boundTxt').textContent=b.toFixed(3);
|
||
|
||
// 左：堆叠条
|
||
const maxV=Math.max(2,b*1.15);
|
||
const padT=40,padB=46,y0=padT,y1=H-padB;
|
||
const sy=v=>y1-Math.min(v,maxV)/maxV*(y1-y0);
|
||
// y axis
|
||
ctx.strokeStyle='#1c2530';ctx.lineWidth=1;ctx.font="11px 'JetBrains Mono',monospace";ctx.fillStyle='#5c6672';
|
||
const ticks=4;for(let i=0;i<=ticks;i++){const v=maxV*i/ticks,py=sy(v);ctx.beginPath();ctx.moveTo(70,py);ctx.lineTo(W-30,py);ctx.stroke();ctx.fillText(v.toFixed(2),36,py+4);}
|
||
const cx=W*0.30, bw=130;
|
||
// D 段
|
||
ctx.fillStyle='#f4a261';ctx.globalAlpha=.92;ctx.fillRect(cx-bw/2,sy(d),bw,y1-sy(d));ctx.globalAlpha=1;
|
||
// (ε+D)² 段
|
||
ctx.fillStyle='#e76f51';ctx.globalAlpha=.92;ctx.fillRect(cx-bw/2,sy(d+quad),bw,sy(d)-sy(d+quad));ctx.globalAlpha=1;
|
||
// 标注
|
||
ctx.fillStyle='#0b0e13';ctx.font="700 12px 'JetBrains Mono',monospace";ctx.textAlign='center';
|
||
if(y1-sy(d)>18)ctx.fillText('D = '+d.toFixed(3),cx,(y1+sy(d))/2+4);
|
||
if(sy(d)-sy(d+quad)>18)ctx.fillText('(ε+D)² = '+quad.toFixed(3),cx,(sy(d)+sy(d+quad))/2+4);
|
||
ctx.fillStyle='#f4a261';ctx.font="700 13px 'JetBrains Mono',monospace";ctx.fillText('界 = '+b.toFixed(3),cx,sy(b)-9);
|
||
ctx.fillStyle='#8b949e';ctx.font="400 12px 'JetBrains Mono',monospace";ctx.fillText('误差上界构成',cx,y1+20);ctx.textAlign='left';
|
||
|
||
// 右：界随 δ 的曲线
|
||
const rx0=W*0.52,rx1=W-40,ry0=padT,ry1=y1;
|
||
const dMax=0.3;
|
||
const px=dd=>rx0+dd/dMax*(rx1-rx0);
|
||
ctx.strokeStyle='#1c2530';for(let i=0;i<=3;i++){const dd=dMax*i/3;ctx.beginPath();ctx.moveTo(px(dd),ry0);ctx.lineTo(px(dd),ry1);ctx.stroke();ctx.fillStyle='#5c6672';ctx.font="10px 'JetBrains Mono',monospace";ctx.fillText('δ='+dd.toFixed(2),px(dd)-14,ry1+16);}
|
||
ctx.strokeStyle='#4cc9f0';ctx.lineWidth=2;ctx.beginPath();
|
||
for(let i=0;i<=160;i++){const dd=dMax*i/160;const DD=dd/sg;const bb=DD+(eps+DD)*(eps+DD);const py=sy(bb);i?ctx.lineTo(px(dd),py):ctx.moveTo(px(dd),py);}
|
||
ctx.stroke();
|
||
ctx.fillStyle='#4cc9f0';ctx.font="500 11px 'JetBrains Mono',monospace";ctx.fillText('界(δ) @ 当前 ε,ρ',rx0+8,ry0+14);
|
||
// 当前点
|
||
ctx.fillStyle='#f4a261';ctx.beginPath();ctx.arc(px(delta),sy(b),5,0,7);ctx.fill();
|
||
|
||
const v=document.getElementById('verdict');
|
||
const dominPct=b>1e-6?(d/b*100).toFixed(0):'—';
|
||
v.innerHTML=(delta<1e-6&&eps<1e-6)
|
||
? '<b>δ = ε = 0：界 = 0</b>，精确恢复 h(z)=Qz，退化为<strong>定理 1</strong>。'
|
||
: '当前界 = <b>'+b.toFixed(3)+'</b>，其中 D（来自 δ）占约 <b>'+dominPct+'%</b>。<br>这说明<strong>对齐间隙 δ 是误差主因</strong>，白化误差 ε 仅二阶——训练时应优先压低对齐损失。';
|
||
}
|
||
window.addEventListener('resize',draw);
|
||
draw();
|
||
</script>
|
||
</body>
|
||
</html>
|