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,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OU 过程与 Mehler 公式 · 为什么高阶成分被罚得更狠</title>
|
||||
|
||||
<!-- 设计系统沿用「深空学术 Deep Space」：暗青径向底 + 青绿 #2ec4b6 / 琥珀 #ffb703 -->
|
||||
<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+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;}
|
||||
:root{--bg0:#07090d;--teal:#2ec4b6;--amber:#ffb703;--ink:#e8eef2;--ink2:#9fb0ba;--mono:#56727d;--line:rgba(255,255,255,.08);}
|
||||
html,body{width:100%;height:100%;background:var(--bg0);overflow:hidden;font-family:"Noto Sans SC",sans-serif;color:var(--ink);}
|
||||
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
|
||||
.stage{width:1920px;height:1080px;transform-origin:center center;position:relative;}
|
||||
.slide{position:absolute;inset:0;padding:96px 110px 120px;display:flex;flex-direction:column;
|
||||
background:radial-gradient(120% 120% at 75% 12%, #11202a 0%, #0a0e14 56%, #07090d 100%);}
|
||||
.slide:not(.active){display:none !important;}
|
||||
.slide.posBL{background:radial-gradient(120% 120% at 18% 92%, #11202a 0%, #0a0e14 60%, #07090d 100%);}
|
||||
.slide.posCR{background:radial-gradient(130% 130% at 95% 50%, #12232c 0%, #0a0e14 58%, #07090d 100%);}
|
||||
.glow{position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;
|
||||
background:radial-gradient(circle,rgba(46,196,182,.16),transparent 70%);top:-160px;right:-110px;filter:blur(6px);}
|
||||
.glow.amber{background:radial-gradient(circle,rgba(255,183,3,.13),transparent 70%);}
|
||||
.kicker{font-family:"JetBrains Mono",monospace;color:var(--teal);font-size:22px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:16px;}
|
||||
.kicker .ln{width:54px;height:2px;background:var(--teal);opacity:.7;}
|
||||
.page-footer{position:absolute;left:110px;right:110px;bottom:60px;display:flex;justify-content:space-between;align-items:center;font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--mono);}
|
||||
.page-footer .prog{flex:1;margin:0 30px;height:2px;background:rgba(255,255,255,.08);position:relative;border-radius:2px;}
|
||||
.page-footer .prog i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));border-radius:2px;transition:width .4s;}
|
||||
h1{font-weight:900;font-size:112px;line-height:1.03;letter-spacing:-.01em;}
|
||||
h1 em{font-style:normal;color:var(--teal);}
|
||||
h2{font-weight:900;font-size:72px;line-height:1.08;margin-top:22px;}
|
||||
h2 em{font-style:normal;color:var(--amber);}
|
||||
.lead{font-size:29px;color:var(--ink2);font-weight:300;margin-top:18px;line-height:1.5;max-width:1320px;}
|
||||
.content{flex:1;display:flex;align-items:center;min-height:0;}
|
||||
.katex{font-size:1em;}
|
||||
.fbox{background:rgba(46,196,182,.06);border:1px solid rgba(46,196,182,.24);border-radius:18px;padding:46px 44px;text-align:center;color:#eafcf9;}
|
||||
.fbox .small{font-size:23px;color:#7fd8cf;margin-top:22px;font-family:"JetBrains Mono",monospace;}
|
||||
.cards{display:flex;gap:36px;width:100%;}
|
||||
.card{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:40px 36px;}
|
||||
.card .ct{font-size:34px;font-weight:700;margin-bottom:16px;color:var(--teal);}
|
||||
.card .cb{font-size:25px;color:var(--ink2);font-weight:300;line-height:1.55;}
|
||||
.barrow{display:flex;align-items:center;gap:20px;margin:18px 0;font-size:30px;}
|
||||
.barrow .chip{font-family:"JetBrains Mono",monospace;font-size:23px;padding:7px 15px;border-radius:8px;background:#13343a;color:var(--teal);min-width:120px;text-align:center;}
|
||||
.barrow .track{flex:1;height:16px;border-radius:8px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;}
|
||||
.barrow .track i{position:absolute;left:0;top:0;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--teal),var(--amber));}
|
||||
.barrow .val{font-family:"JetBrains Mono",monospace;font-size:23px;color:var(--ink2);min-width:120px;}
|
||||
ul.pts{list-style:none;}
|
||||
ul.pts li{font-size:31px;font-weight:300;color:var(--ink);line-height:1.5;margin:22px 0;padding-left:46px;position:relative;}
|
||||
ul.pts li::before{content:"";position:absolute;left:0;top:16px;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--amber));}
|
||||
ul.pts li b{color:var(--teal);font-weight:700;}
|
||||
table.cmp{width:100%;border-collapse:collapse;font-size:28px;}
|
||||
table.cmp th,table.cmp td{padding:22px 24px;text-align:left;border-bottom:1px solid var(--line);}
|
||||
table.cmp th{font-family:"JetBrains Mono",monospace;font-size:21px;color:var(--mono);letter-spacing:.06em;font-weight:400;}
|
||||
table.cmp td.k{color:var(--ink2);font-weight:300;}
|
||||
table.cmp td .hl{color:var(--teal);}
|
||||
table.cmp td .am{color:var(--amber);}
|
||||
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%;}
|
||||
.grid4 .g{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:32px 32px;}
|
||||
.grid4 .g .n{font-family:"Space Grotesk";font-weight:700;font-size:38px;color:var(--teal);}
|
||||
.grid4 .g .t{font-size:27px;margin-top:8px;line-height:1.45;color:var(--ink);font-weight:300;}
|
||||
.grid4 .g .t b{color:var(--amber);font-weight:700;}
|
||||
.cover{justify-content:center;}
|
||||
.cover .meta{position:absolute;bottom:72px;left:110px;font-family:"JetBrains Mono",monospace;font-size:21px;color:var(--mono);}
|
||||
.nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:900;display:flex;gap:10px;align-items:center;}
|
||||
.nav button{background:#16242b;border:1px solid #2a3c44;color:#cfe;font-size:15px;padding:9px 18px;border-radius:8px;cursor:pointer;font-family:"JetBrains Mono",monospace;}
|
||||
.nav button:hover{background:#1d3038;}
|
||||
.nav .pg{color:#6f8a93;font-family:"JetBrains Mono",monospace;font-size:14px;padding:0 8px;}
|
||||
.hintkey{position:fixed;top:14px;right:18px;z-index:900;color:#42535b;font-family:"JetBrains Mono",monospace;font-size:13px;}
|
||||
.spring{display:flex;align-items:center;gap:6px;font-size:40px;color:var(--teal);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hintkey">← → 翻页 · F 全屏</div>
|
||||
<div id="wrap"><div class="stage" id="stage">
|
||||
|
||||
<!-- 1 封面 -->
|
||||
<section class="slide active cover">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>SELF-SUPERVISED · 谱分解 · EP.02</div>
|
||||
<h1 style="margin-top:34px;">OU 过程<br>与 <em>Mehler 公式</em></h1>
|
||||
<p class="lead" style="margin-top:38px;">正样本对怎么造？为什么高阶非线性成分被罚得更狠？</p>
|
||||
<div class="meta">配套播客 · 双主播对话 · 上接 Hermite 多项式，下启线性可识别性</div>
|
||||
</section>
|
||||
|
||||
<!-- 2 核心问题 -->
|
||||
<section class="slide posBL">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>00 · 核心问题</div>
|
||||
<h2>正样本对从<em>哪里来</em>？</h2>
|
||||
<div class="content">
|
||||
<ul class="pts">
|
||||
<li>LeJEPA 训练需要「正样本对」——同一内容的两个视角 $(z, z')$。</li>
|
||||
<li>这对视角是<b>怎么生成</b>的？答案是 <b>OU 过程</b>。</li>
|
||||
<li>为什么这种生成方式，会让<b>高阶 Hermite 成分被更强地惩罚</b>？</li>
|
||||
<li>解开它的钥匙，是 <b>Mehler 公式</b>。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 OU 物理直觉 -->
|
||||
<section class="slide">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>01 · 物理直觉</div>
|
||||
<h2>弹簧上的<em>小球</em></h2>
|
||||
<div class="content" style="gap:60px;">
|
||||
<div class="card" style="flex:1;">
|
||||
<div class="ct">弹簧力 · 均值回归</div>
|
||||
<div class="cb">把小球持续拉回原点，不让它跑远。</div>
|
||||
</div>
|
||||
<div class="card" style="flex:1;">
|
||||
<div class="ct">随机扰动 · 布朗噪声</div>
|
||||
<div class="cb">周围的随机推搡，让小球抖动。</div>
|
||||
</div>
|
||||
<div class="card" style="flex:1;">
|
||||
<div class="ct">一拉一推 = OU 过程</div>
|
||||
<div class="cb">两股力量的拉扯，正是 Ornstein–Uhlenbeck 过程的图像。</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 离散 OU 定义 -->
|
||||
<section class="slide posCR">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>02 · 定义</div>
|
||||
<h2>LeJEPA 用的<em>离散一步转移</em></h2>
|
||||
<div class="content" style="gap:60px;">
|
||||
<div class="fbox" style="flex:1.1;font-size:42px;">
|
||||
$z' = \rho\,z + \sqrt{1-\rho^{2}}\;\eta$
|
||||
<div class="small">$\eta\sim\mathcal N(0,I),\quad \rho\in(0,1)$</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<p class="lead" style="font-size:30px;">$\rho$ 是<b style="color:var(--teal)">相关系数</b>——两个视角的相似度旋钮。</p>
|
||||
<p class="lead" style="font-size:28px;margin-top:18px;">$\rho\to1$：几乎相同视角；$\rho\to0$：相互独立。实践取 $\rho\in[0.8,0.95]$。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 三性质 -->
|
||||
<section class="slide">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>03 · 三个性质</div>
|
||||
<h2>OU 过程的<em>三块基石</em></h2>
|
||||
<div class="content">
|
||||
<div class="cards">
|
||||
<div class="card"><div class="ct">① 平稳性</div><div class="cb">$z\sim\mathcal N(0,I)\Rightarrow z'\sim\mathcal N(0,I)$<br>均值 0、方差 $\rho^2+(1-\rho^2)=1$。两视角分布相同。</div></div>
|
||||
<div class="card"><div class="ct">② 相关可控</div><div class="cb">$\mathrm{Cov}(z',z)=\rho\,I$<br>$\rho$ 直接 = 相似度，一个旋钮说了算。</div></div>
|
||||
<div class="card"><div class="ct">③ 加性噪声</div><div class="cb">$z'=\rho z+\eta$：线性漂移 + 独立噪声。<br>满足论文的加性噪声假设。</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 Mehler 公式 -->
|
||||
<section class="slide posBL">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>04 · 谱定理</div>
|
||||
<h2>Mehler 公式：<em>每阶挂 ρᵈ</em></h2>
|
||||
<div class="content" style="gap:56px;">
|
||||
<div class="fbox" style="flex:1.15;font-size:30px;">
|
||||
$p(z'\mid z)=\varphi(z')\displaystyle\sum_{d=0}^{\infty}\rho^{d}\,\frac{He_d(z)He_d(z')}{d!}$
|
||||
<div class="small">OU 转移核在 Hermite 基下展开</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div class="fbox" style="font-size:30px;">
|
||||
$\mathbb{E}[h_i(z)\,h_i(z')]=\displaystyle\sum_{d=0}^{\infty}\rho^{d}\,w_d$
|
||||
<div class="small">$w_d$＝第 $i$ 分量在 $d$ 阶上的谱权重</div>
|
||||
</div>
|
||||
<p class="lead" style="font-size:26px;margin-top:22px;">关键：<b style="color:var(--amber)">d 阶成分的系数 = ρ 的 d 次方</b>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7 核心推论 -->
|
||||
<section class="slide posCR">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>05 · 核心推论</div>
|
||||
<h2>相关性<em>封顶在 ρ</em></h2>
|
||||
<div class="content" style="gap:56px;">
|
||||
<div class="fbox" style="flex:1.1;font-size:28px;line-height:2;">
|
||||
$\mathrm{corr}_i=\displaystyle\sum_{d\ge1}w_d\,\rho^{d}\le\sum_{d\ge1}w_d\,\rho=\rho$
|
||||
<div class="small">因为 $\rho^d\le\rho\ (d\ge1)$，且 $\sum w_d=1$</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<p class="lead" style="font-size:30px;">等号成立 <b style="color:var(--teal)">当且仅当 $w_1=1$</b>——编码器纯线性。</p>
|
||||
<p class="lead" style="font-size:27px;margin-top:18px;">只要有任何 $w_{d_0}>0\ (d_0\ge2)$，那一项就严格变小，和够不到 $\rho$。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8 数值例子 -->
|
||||
<section class="slide">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>06 · 数值例子</div>
|
||||
<h2>取 <em>ρ = 0.9</em> 算给你看</h2>
|
||||
<div class="content">
|
||||
<table class="cmp">
|
||||
<tr><th>编码器</th><th>谱权重</th><th>相关性 corrᵢ</th><th>与 0.9 的差距</th></tr>
|
||||
<tr><td class="k">纯线性 $h=z$</td><td><span class="hl">$w_1=1$</span></td><td><span class="hl">$0.9^1=0.900$</span></td><td>0 ｜ 最优</td></tr>
|
||||
<tr><td class="k">纯二次 $h=z^2-1$</td><td>$w_2=1$</td><td><span class="am">$0.9^2=0.810$</span></td><td>−0.090</td></tr>
|
||||
<tr><td class="k">纯三次 $h=z^3-3z$</td><td>$w_3=1$</td><td><span class="am">$0.9^3=0.729$</span></td><td>−0.171</td></tr>
|
||||
<tr><td class="k">混合 各半</td><td>$w_1=w_2=0.5$</td><td>$0.855$</td><td>−0.045</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 9 与对齐损失 -->
|
||||
<section class="slide posBL">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>07 · 训练联系</div>
|
||||
<h2>对齐损失的<em>下界</em></h2>
|
||||
<div class="content" style="gap:56px;">
|
||||
<div class="fbox" style="flex:1.05;font-size:28px;line-height:1.9;">
|
||||
$\mathcal L_{\text{align}}=\mathbb{E}\|h(z')-h(z)\|^2$<br>
|
||||
$=2n-2\sum_i \mathrm{corr}_i\;\ge\;2(1-\rho)\,n$
|
||||
<div class="small">最小化损失 ⟺ 最大化相关性之和</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<p class="lead" style="font-size:31px;">等号成立 <b style="color:var(--teal)">当且仅当每个 $h_i$ 都是线性的</b>。</p>
|
||||
<p class="lead" style="font-size:28px;margin-top:18px;">这就是定理一的心脏：<b style="color:var(--amber)">最优编码器必须线性</b>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 衰减图示 -->
|
||||
<section class="slide posCR">
|
||||
<div class="glow"></div>
|
||||
<div class="kicker"><span class="ln"></span>08 · 直觉图示</div>
|
||||
<h2>ρ = 0.9 时<em>逐阶衰减</em></h2>
|
||||
<div class="content">
|
||||
<div style="width:100%;">
|
||||
<div class="barrow"><span class="chip">d=1 线性</span><div class="track"><i style="width:90%"></i></div><span class="val">ρ¹ = 0.900</span></div>
|
||||
<div class="barrow"><span class="chip">d=2 二次</span><div class="track"><i style="width:81%"></i></div><span class="val">ρ² = 0.810</span></div>
|
||||
<div class="barrow"><span class="chip">d=3 三次</span><div class="track"><i style="width:72.9%"></i></div><span class="val">ρ³ = 0.729</span></div>
|
||||
<div class="barrow"><span class="chip">d=4 四次</span><div class="track"><i style="width:65.6%"></i></div><span class="val">ρ⁴ = 0.656</span></div>
|
||||
<div class="barrow"><span class="chip">d=5 五次</span><div class="track"><i style="width:59%"></i></div><span class="val">ρ⁵ = 0.590</span></div>
|
||||
<p class="lead" style="font-size:27px;margin-top:20px;">非线性成分的相关性随阶数<b style="color:var(--amber)">指数衰减</b>——越高阶越吃亏。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 11 小结 -->
|
||||
<section class="slide">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>09 · 小结</div>
|
||||
<h2>五句话<em>带走全场</em></h2>
|
||||
<div class="content">
|
||||
<div class="grid4">
|
||||
<div class="g"><div class="n">01</div><div class="t">OU 过程「一拉一推」造正样本对，相似度由 <b>ρ</b> 控制。</div></div>
|
||||
<div class="g"><div class="n">02</div><div class="t"><b>平稳性</b> + 协方差 = ρ + 线性漂移加噪声，三性质齐备。</div></div>
|
||||
<div class="g"><div class="n">03</div><div class="t"><b>Mehler</b>：d 阶 Hermite 成分相关性 = ρᵈ。</div></div>
|
||||
<div class="g"><div class="n">04</div><div class="t">核心不等式 corrᵢ = Σ wᵈ ρᵈ ≤ ρ，等号 ⟺ <b>纯线性</b>。</div></div>
|
||||
<div class="g" style="grid-column:1 / -1;"><div class="n">05</div><div class="t">最小化对齐损失 → 最大化相关性 → <b>编码器必须线性</b>（定理一）。</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 12 尾页 -->
|
||||
<section class="slide cover posBL">
|
||||
<div class="glow amber"></div>
|
||||
<div class="kicker"><span class="ln"></span>下一站</div>
|
||||
<h1 style="font-size:88px;margin-top:30px;">谱分解<br><em>与线性可识别性</em></h1>
|
||||
<p class="lead" style="margin-top:34px;font-size:30px;">下一讲把 Hermite 展开与 OU 衰减正式拼起来，组装成定理一的完整证明。</p>
|
||||
<div class="meta">谢谢收听 · 配套音频 ou_mehler-podcast.mp3 · 弹簧拉小球，ρ 拧大小 · 我们下次见</div>
|
||||
</section>
|
||||
|
||||
</div></div>
|
||||
|
||||
<div class="nav">
|
||||
<button id="prev">← 上一页</button>
|
||||
<span class="pg" id="pg">1 / 12</span>
|
||||
<button id="next">下一页 →</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const STAGE = document.getElementById('stage');
|
||||
const slides = Array.from(document.querySelectorAll('.slide'));
|
||||
const total = slides.length;
|
||||
const KEY = 'ou_mehler_deck_page';
|
||||
|
||||
let cur = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (isNaN(cur) || cur < 0 || cur >= total) cur = 0;
|
||||
|
||||
function fit(){
|
||||
const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
|
||||
STAGE.style.transform = `scale(${s})`;
|
||||
}
|
||||
window.addEventListener('resize', fit); fit();
|
||||
|
||||
function show(i){
|
||||
cur = (i + total) % total;
|
||||
slides.forEach((s, idx) => s.classList.toggle('active', idx === cur));
|
||||
document.getElementById('pg').textContent = `${cur + 1} / ${total}`;
|
||||
const w = ((cur) / (total - 1) * 100).toFixed(1) + '%';
|
||||
document.querySelectorAll('.page-footer .prog i').forEach(b => b.style.width = w);
|
||||
localStorage.setItem(KEY, cur);
|
||||
}
|
||||
|
||||
slides.forEach((s, idx) => {
|
||||
const f = document.createElement('div');
|
||||
f.className = 'page-footer';
|
||||
f.innerHTML = `<span>OU 过程 · Mehler 公式</span><span class="prog"><i></i></span><span>${String(idx+1).padStart(2,'0')} / ${String(total).padStart(2,'0')}</span>`;
|
||||
s.appendChild(f);
|
||||
});
|
||||
|
||||
document.getElementById('prev').addEventListener('click', () => show(cur - 1));
|
||||
document.getElementById('next').addEventListener('click', () => show(cur + 1));
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); show(cur + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); show(cur - 1); }
|
||||
else if (e.key === 'Home') show(0);
|
||||
else if (e.key === 'End') show(total - 1);
|
||||
else if (e.key === 'f' || e.key === 'F') {
|
||||
if (!document.fullscreenElement) document.documentElement.requestFullscreen();
|
||||
else document.exitFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('wrap').addEventListener('click', (e) => {
|
||||
if (e.target.closest('.nav')) return;
|
||||
if (e.clientX > window.innerWidth * 0.5) show(cur + 1); else show(cur - 1);
|
||||
});
|
||||
|
||||
function renderMath(){
|
||||
if (window.renderMathInElement){
|
||||
renderMathInElement(document.body, {
|
||||
delimiters: [
|
||||
{left:'$$', right:'$$', display:true},
|
||||
{left:'$', right:'$', display:false}
|
||||
],
|
||||
throwOnError:false
|
||||
});
|
||||
} else { setTimeout(renderMath, 120); }
|
||||
}
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const pageParam = params.get('page');
|
||||
if (pageParam !== null) {
|
||||
const p = parseInt(pageParam, 10);
|
||||
if (!isNaN(p) && p >= 1 && p <= total) cur = p - 1;
|
||||
}
|
||||
if (params.get('clean') === '1') {
|
||||
document.body.classList.add('clean');
|
||||
const navEl = document.querySelector('.nav'); if (navEl) navEl.style.display = 'none';
|
||||
const hk = document.querySelector('.hintkey'); if (hk) hk.style.display = 'none';
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => { renderMath(); show(cur); });
|
||||
if (document.readyState !== 'loading') { renderMath(); show(cur); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user