Add presentation slides for OU process and Mehler formula
Sync to site1 / sync (push) Has been cancelled
Sync to site1 / sync (push) Has been cancelled
This commit is contained in:
gaojie
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hermite 多项式 · 配套幻灯片 · 风格预览</title>
|
||||
|
||||
<!-- KaTeX 公式渲染 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" crossorigin="anonymous"></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=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;500;700;900&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html,body{width:100%;height:100%;background:#0a0a0c;overflow:hidden;font-family:"Noto Sans SC",sans-serif;}
|
||||
|
||||
/* ---- tab 切换条（在 stage 外，不被 scale 压缩）---- */
|
||||
#tabbar{position:fixed;top:0;left:0;right:0;height:52px;background:#16161a;display:flex;align-items:center;
|
||||
gap:6px;padding:0 18px;z-index:1000;border-bottom:1px solid #2a2a30;}
|
||||
#tabbar .brand{color:#7a7a85;font-size:13px;font-family:"JetBrains Mono",monospace;margin-right:18px;letter-spacing:.05em;}
|
||||
#tabbar button{background:transparent;border:1px solid #34343c;color:#b8b8c0;font-size:13px;padding:7px 16px;
|
||||
border-radius:6px;cursor:pointer;font-family:"Noto Sans SC",sans-serif;transition:.2s;}
|
||||
#tabbar button:hover{border-color:#56566a;color:#fff;}
|
||||
#tabbar button.on{background:#fff;color:#111;border-color:#fff;font-weight:700;}
|
||||
#tabbar .hint{margin-left:auto;color:#55555f;font-size:12px;font-family:"JetBrains Mono",monospace;}
|
||||
|
||||
/* ---- 舞台缩放 ---- */
|
||||
#wrap{position:fixed;top:52px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;}
|
||||
.stage{width:1920px;height:1080px;transform-origin:center center;position:relative;}
|
||||
.deck{display:none;width:1920px;height:1080px;position:absolute;top:0;left:0;}
|
||||
.deck.show{display:block;}
|
||||
|
||||
/* 每版内部用左右两屏并排展示「封面 + 内容页」缩略 */
|
||||
.pair{display:flex;width:1920px;height:1080px;}
|
||||
.frame{flex:1;height:100%;position:relative;overflow:hidden;}
|
||||
.frame.left{border-right:2px solid rgba(255,255,255,.06);}
|
||||
.flabel{position:absolute;top:22px;left:26px;z-index:5;font-family:"JetBrains Mono",monospace;font-size:18px;
|
||||
letter-spacing:.1em;opacity:.5;}
|
||||
|
||||
.katex{font-size:1em;}
|
||||
|
||||
/* ============ 版 A：深空学术 Deep Space ============ */
|
||||
.A{background:radial-gradient(120% 120% at 75% 15%, #11202a 0%, #0a0e14 55%, #07090d 100%);color:#e8eef2;}
|
||||
.A .glow{position:absolute;width:680px;height:680px;border-radius:50%;
|
||||
background:radial-gradient(circle,rgba(46,196,182,.18),transparent 70%);top:-180px;right:-120px;filter:blur(8px);}
|
||||
.A .cov{padding:120px 100px;height:100%;display:flex;flex-direction:column;justify-content:center;position:relative;}
|
||||
.A .kic{font-family:"JetBrains Mono",monospace;color:#2ec4b6;font-size:26px;letter-spacing:.25em;margin-bottom:28px;}
|
||||
.A .ttl{font-family:"Noto Sans SC";font-weight:900;font-size:118px;line-height:1.04;letter-spacing:-.01em;}
|
||||
.A .ttl em{font-style:normal;color:#2ec4b6;}
|
||||
.A .sub{margin-top:40px;font-size:30px;color:#9fb0ba;font-weight:300;max-width:760px;line-height:1.5;}
|
||||
.A .meta{position:absolute;bottom:80px;left:100px;font-family:"JetBrains Mono",monospace;font-size:20px;color:#56727d;}
|
||||
|
||||
.A2{background:radial-gradient(120% 120% at 20% 90%, #11202a 0%, #0a0e14 60%, #07090d 100%);color:#e8eef2;padding:96px 100px;display:flex;flex-direction:column;}
|
||||
.A2 h2{font-size:74px;font-weight:900;line-height:1.1;}
|
||||
.A2 h2 em{font-style:normal;color:#ffb703;}
|
||||
.A2 .lead{margin-top:18px;font-size:28px;color:#9fb0ba;font-weight:300;}
|
||||
.A2 .body{flex:1;display:flex;align-items:center;gap:60px;margin-top:30px;}
|
||||
.A2 .fbox{flex:1;background:rgba(46,196,182,.06);border:1px solid rgba(46,196,182,.22);border-radius:18px;
|
||||
padding:54px 50px;font-size:46px;color:#eafcf9;text-align:center;}
|
||||
.A2 .fbox .small{font-size:24px;color:#7fd8cf;margin-top:24px;font-family:"JetBrains Mono",monospace;}
|
||||
.A2 .deca{flex:.9;}
|
||||
.A2 .row{display:flex;align-items:center;gap:18px;margin:20px 0;font-size:30px;}
|
||||
.A2 .chip{font-family:"JetBrains Mono",monospace;font-size:24px;padding:6px 16px;border-radius:8px;background:#13343a;color:#2ec4b6;}
|
||||
.A2 .bar{height:14px;border-radius:7px;background:linear-gradient(90deg,#2ec4b6,#ffb703);}
|
||||
|
||||
/* ============ 版 B：黑曜极简 Swiss Mono ============ */
|
||||
.B{background:#0d0d0d;color:#f2f2ef;}
|
||||
.B .cov{padding:110px 110px;height:100%;display:flex;flex-direction:column;position:relative;}
|
||||
.B .topline{display:flex;align-items:center;gap:24px;font-family:"JetBrains Mono",monospace;font-size:20px;color:#888;letter-spacing:.1em;}
|
||||
.B .topline .rule{flex:1;height:1px;background:#3a3a3a;}
|
||||
.B .big{margin-top:auto;font-family:"Noto Serif SC";font-weight:900;font-size:140px;line-height:.98;letter-spacing:-.02em;}
|
||||
.B .big span{display:block;color:#ff5e3a;}
|
||||
.B .cov .foot{margin-top:46px;font-size:28px;color:#9a9a96;font-weight:300;max-width:900px;line-height:1.45;}
|
||||
.B .idx{position:absolute;top:96px;right:110px;font-family:"Space Grotesk";font-size:200px;font-weight:700;color:#161616;line-height:1;}
|
||||
|
||||
.B2{background:#0d0d0d;color:#f2f2ef;padding:96px 110px;display:flex;flex-direction:column;}
|
||||
.B2 .topline{display:flex;align-items:center;gap:24px;font-family:"JetBrains Mono",monospace;font-size:18px;color:#888;letter-spacing:.1em;}
|
||||
.B2 .topline .rule{flex:1;height:1px;background:#3a3a3a;}
|
||||
.B2 h2{margin-top:34px;font-family:"Noto Serif SC";font-weight:900;font-size:86px;line-height:1.02;}
|
||||
.B2 h2 b{color:#ff5e3a;}
|
||||
.B2 .body{flex:1;display:flex;align-items:center;gap:70px;margin-top:20px;}
|
||||
.B2 .fbox{flex:1;border:2px solid #ff5e3a;border-radius:4px;padding:60px 40px;text-align:center;font-size:50px;}
|
||||
.B2 .fbox .small{font-size:24px;color:#bdbdb8;margin-top:26px;font-family:"JetBrains Mono",monospace;letter-spacing:.05em;}
|
||||
.B2 .deca{flex:.85;}
|
||||
.B2 .row{display:flex;align-items:center;gap:20px;font-size:32px;margin:22px 0;font-family:"Noto Sans SC";}
|
||||
.B2 .num{font-family:"Space Grotesk";font-weight:700;font-size:40px;color:#ff5e3a;width:120px;}
|
||||
.B2 .bar{height:10px;background:#ff5e3a;border-radius:2px;}
|
||||
|
||||
/* ============ 版 C：暖纸学刊 Warm Editorial ============ */
|
||||
.C{background:#f4efe6;color:#1d2733;}
|
||||
.C .cov{padding:120px 110px;height:100%;display:grid;grid-template-columns:1fr;align-content:center;position:relative;}
|
||||
.C .tag{font-family:"JetBrains Mono",monospace;font-size:22px;color:#b25d3a;letter-spacing:.2em;margin-bottom:30px;}
|
||||
.C .ttl{font-family:"Noto Serif SC";font-weight:900;font-size:120px;line-height:1.06;color:#16202b;}
|
||||
.C .ttl em{font-style:italic;color:#b25d3a;font-family:"Noto Serif SC";}
|
||||
.C .sub{margin-top:38px;font-size:30px;color:#52606d;font-weight:400;max-width:820px;line-height:1.55;}
|
||||
.C .seal{position:absolute;bottom:90px;right:110px;width:140px;height:140px;border:2px solid #b25d3a;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Noto Serif SC";color:#b25d3a;font-size:20px;line-height:1.3;}
|
||||
.C .ln{position:absolute;left:110px;right:110px;bottom:70px;height:1px;background:#cbbfa9;}
|
||||
|
||||
.C2{background:#f4efe6;color:#1d2733;padding:96px 110px;display:flex;flex-direction:column;}
|
||||
.C2 .tag{font-family:"JetBrains Mono",monospace;font-size:20px;color:#b25d3a;letter-spacing:.18em;}
|
||||
.C2 h2{font-family:"Noto Serif SC";font-weight:900;font-size:80px;line-height:1.08;margin-top:14px;color:#16202b;}
|
||||
.C2 h2 em{font-style:italic;color:#b25d3a;}
|
||||
.C2 .body{flex:1;display:flex;align-items:center;gap:64px;margin-top:24px;}
|
||||
.C2 .fbox{flex:1;background:#fbf8f1;border:1px solid #d8ccb4;border-radius:10px;padding:56px 46px;text-align:center;
|
||||
font-size:48px;color:#1d2733;box-shadow:0 18px 40px -28px rgba(80,60,30,.5);}
|
||||
.C2 .fbox .small{font-size:23px;color:#8a6b4a;margin-top:24px;font-family:"JetBrains Mono",monospace;}
|
||||
.C2 .deca{flex:.9;}
|
||||
.C2 .row{display:flex;align-items:center;gap:18px;font-size:30px;margin:20px 0;}
|
||||
.C2 .chip{font-family:"Noto Serif SC";font-weight:600;font-size:26px;color:#b25d3a;width:90px;}
|
||||
.C2 .bar{height:12px;border-radius:6px;background:linear-gradient(90deg,#b25d3a,#d9a441);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tabbar">
|
||||
<span class="brand">HERMITE · 风格预览</span>
|
||||
<button class="on" data-deck="A">A · 深空学术</button>
|
||||
<button data-deck="B">B · 黑曜极简</button>
|
||||
<button data-deck="C">C · 暖纸学刊</button>
|
||||
<span class="hint">每版＝封面 + 典型内容页（OU 衰减）｜选定后展开完整版</span>
|
||||
</div>
|
||||
|
||||
<div id="wrap">
|
||||
<div class="stage" id="stage">
|
||||
|
||||
<!-- ===================== 版 A ===================== -->
|
||||
<div class="deck show" data-deck="A">
|
||||
<div class="pair">
|
||||
<div class="frame left A">
|
||||
<span class="flabel">封面</span>
|
||||
<div class="glow"></div>
|
||||
<div class="cov">
|
||||
<div class="kic">SELF-SUPERVISED · 谱分解</div>
|
||||
<div class="ttl">Hermite<br><em>多项式</em></div>
|
||||
<div class="sub">高斯世界里的「频率分解」工具——配套播客讲解</div>
|
||||
<div class="meta">EP.01 · 时长 7:43 · LeJEPA 理论基石</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame A2">
|
||||
<span class="flabel">内容页</span>
|
||||
<h2>为什么<em>线性</em>成分最值钱</h2>
|
||||
<div class="lead">OU 过程让相关性按阶数指数衰减</div>
|
||||
<div class="body">
|
||||
<div class="fbox">
|
||||
$\mathbb{E}[He_n(z')\,He_n(z)] = \rho^{\,n} \cdot n!$
|
||||
<div class="small">阶数越高 → 相关性掉得越快</div>
|
||||
</div>
|
||||
<div class="deca">
|
||||
<div class="row"><span class="chip">1 阶</span><div class="bar" style="width:88%"></div></div>
|
||||
<div class="row"><span class="chip">2 阶</span><div class="bar" style="width:48%"></div></div>
|
||||
<div class="row"><span class="chip">3 阶</span><div class="bar" style="width:24%"></div></div>
|
||||
<div class="row" style="font-size:24px;color:#9fb0ba;margin-top:30px;">最优解：只保留线性成分 → 线性可识别性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 版 B ===================== -->
|
||||
<div class="deck" data-deck="B">
|
||||
<div class="pair">
|
||||
<div class="frame left B">
|
||||
<span class="flabel" style="color:#fff">封面</span>
|
||||
<div class="cov">
|
||||
<div class="idx">He</div>
|
||||
<div class="topline"><span>谱分解 / SPECTRAL</span><span class="rule"></span><span>EP.01</span></div>
|
||||
<div class="big">埃尔米特<span>多项式</span></div>
|
||||
<div class="foot">高斯世界里的频率分解工具 —— 配套播客讲解 · 7 分 43 秒</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame B2">
|
||||
<span class="flabel" style="color:#fff">内容页</span>
|
||||
<div class="topline"><span>05 / OU 衰减</span><span class="rule"></span><span>ρⁿ</span></div>
|
||||
<h2>为什么<b>线性</b>成分最值钱</h2>
|
||||
<div class="body">
|
||||
<div class="fbox">
|
||||
$\mathbb{E}[He_n(z')\,He_n(z)] = \rho^{\,n} n!$
|
||||
<div class="small">阶数越高 → 衰减越快</div>
|
||||
</div>
|
||||
<div class="deca">
|
||||
<div class="row"><span class="num">ρ¹</span><div class="bar" style="width:90%"></div></div>
|
||||
<div class="row"><span class="num">ρ²</span><div class="bar" style="width:46%"></div></div>
|
||||
<div class="row"><span class="num">ρ³</span><div class="bar" style="width:22%"></div></div>
|
||||
<div class="row" style="font-size:26px;color:#9a9a96;margin-top:28px;">→ 只留线性 = 线性可识别性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 版 C ===================== -->
|
||||
<div class="deck" data-deck="C">
|
||||
<div class="pair">
|
||||
<div class="frame left C">
|
||||
<span class="flabel" style="color:#b25d3a">封面</span>
|
||||
<div class="cov">
|
||||
<div class="tag">SPECTRAL DECOMPOSITION · 第一讲</div>
|
||||
<div class="ttl">Hermite <em>多项式</em></div>
|
||||
<div class="sub">高斯世界里的「频率分解」工具<br>配套播客讲解 · 全长 7 分 43 秒</div>
|
||||
<div class="seal">谱<br>分解</div>
|
||||
<div class="ln"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame C2">
|
||||
<span class="flabel" style="color:#b25d3a">内容页</span>
|
||||
<div class="tag">05 · OU 过程与衰减</div>
|
||||
<h2>为什么<em>线性</em>成分最值钱</h2>
|
||||
<div class="body">
|
||||
<div class="fbox">
|
||||
$\mathbb{E}[He_n(z')\,He_n(z)] = \rho^{\,n}\, n!$
|
||||
<div class="small">阶数越高，相关性指数衰减</div>
|
||||
</div>
|
||||
<div class="deca">
|
||||
<div class="row"><span class="chip">ρ¹</span><div class="bar" style="width:90%"></div></div>
|
||||
<div class="row"><span class="chip">ρ²</span><div class="bar" style="width:46%"></div></div>
|
||||
<div class="row"><span class="chip">ρ³</span><div class="bar" style="width:22%"></div></div>
|
||||
<div class="row" style="font-size:24px;color:#6b5640;margin-top:28px;">最优策略：只保留线性 → 线性可识别性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 舞台自适应缩放
|
||||
function fit(){
|
||||
const s=Math.min((window.innerWidth)/1920,(window.innerHeight-52)/1080);
|
||||
document.getElementById('stage').style.transform=`scale(${s})`;
|
||||
}
|
||||
window.addEventListener('resize',fit); fit();
|
||||
|
||||
// tab 切换
|
||||
document.querySelectorAll('#tabbar button').forEach(b=>{
|
||||
b.addEventListener('click',()=>{
|
||||
const d=b.dataset.deck;
|
||||
document.querySelectorAll('#tabbar button').forEach(x=>x.classList.toggle('on',x===b));
|
||||
document.querySelectorAll('.deck').forEach(x=>x.classList.toggle('show',x.dataset.deck===d));
|
||||
});
|
||||
});
|
||||
|
||||
// KaTeX 渲染
|
||||
window.addEventListener('DOMContentLoaded',()=>{
|
||||
function r(){ if(window.renderMathInElement){
|
||||
renderMathInElement(document.body,{delimiters:[{left:'$',right:'$',display:false}]});
|
||||
} else setTimeout(r,120); }
|
||||
r();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user