优化几何旋转，并改为学者式导航与 Dashboard 主页

404.html

@@ -21,7 +21,13 @@
   <div class="wrap">
     <header class="header">
       <a class="brand" href="/">Musicaldg</a>
-      <nav aria-label="主导航"><a href="/blog/" >文章</a><a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a></nav>
+      <nav aria-label="主导航">
+        <a href="/" >Home</a>
+        <a href="/about/" >About</a>
+        <a href="/cv/" >CV</a>
+        <a href="/blog/" >Blog</a>
+        <a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a>
+      </nav>
     </header>
     <main id="main"><div class="not-found"><h1>404</h1><p>页面未找到</p><a class="text-link" href="/">回到首页 ↗</a></div></main>
     <footer class="footer"><span>© 2026 Musicaldg</span><a href="/feed.xml">RSS</a></footer>

about/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="关于 Musicaldg。">
+  <meta name="theme-color" content="#c8e4f4">
+  <meta property="og:title" content="About me · Musicaldg">
+  <meta property="og:description" content="关于 Musicaldg。">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://musicaldg.github.io/about/">
+  <title>About me · Musicaldg</title>
+  <link rel="canonical" href="https://musicaldg.github.io/about/">
+  <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
+  <link rel="stylesheet" href="/assets/style.css">
+  <link rel="alternate" type="application/rss+xml" title="Musicaldg" href="/feed.xml">
+
+</head>
+<body class="site-page">
+  <a class="skip" href="#main">跳到正文</a>
+  <div class="wrap">
+    <header class="header">
+      <a class="brand" href="/">Musicaldg</a>
+      <nav aria-label="主导航">
+        <a href="/" >Home</a>
+        <a href="/about/" aria-current="page">About</a>
+        <a href="/cv/" >CV</a>
+        <a href="/blog/" >Blog</a>
+        <a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a>
+      </nav>
+    </header>
+    <main id="main"><div class="page-shell"><div class="page-intro"><h1>About me</h1><p class="page-lede">关于 Musicaldg。</p></div><div class="prose page-prose"><p>机器学习笔记与个人主页。更多内容稍后补充。</p>
+<p>目前主要整理模仿学习、主动学习等相关笔记，源码与页面托管在 <a href="https://github.com/Musicaldg">GitHub</a>。</p></div></div></main>
+    <footer class="footer"><span>© 2026 Musicaldg</span><a href="/feed.xml">RSS</a></footer>
+  </div>
+</body>
+</html>

assets/style.css

@@ -44,11 +44,11 @@ a { color: inherit; text-decoration: none; }
 a:hover { color: var(--accent-200); }
 a:focus-visible { outline: 2px solid var(--accent-100); outline-offset: 4px; }
 ::selection { background: var(--primary-100); color: var(--text-100); }
-.wrap { max-width: 860px; min-height: 100svh; margin: auto; padding: 0 48px; display: flex; flex-direction: column; }
+.wrap { max-width: 860px; min-height: 100svh; margin: auto; padding: 0 48px; display: flex; flex-direction: column; overflow: visible; }
 .header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 0 22px; }
 .brand { font: 22px/1 var(--serif); letter-spacing: -.03em; color: var(--text-100); }
 .brand:hover { color: var(--accent-200); }
-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; font-size: 13px; }
 nav a { color: var(--text-200); padding: 6px 12px; border-radius: 999px; }
 nav a:hover { color: var(--accent-200); background: color-mix(in srgb, var(--primary-100) 70%, transparent); }
 nav a[aria-current=page] { color: var(--accent-200); background: var(--primary-100); }
@@ -57,35 +57,130 @@ main { flex: 1; }
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 18px 0 28px;
+  padding: 36px 0 24px;
+  overflow: visible;
 }
 .geometry-glow {
   display: grid;
   place-items: center;
-  width: min(250px, 70vw);
+  width: min(340px, 84vw);
   aspect-ratio: 1;
   border-radius: 50%;
-  background: radial-gradient(circle, color-mix(in srgb, var(--accent-100) 42%, var(--primary-100)) 0%, color-mix(in srgb, var(--primary-100) 45%, transparent) 52%, transparent 72%);
+  overflow: visible;
+  perspective: 760px;
+  perspective-origin: 50% 50%;
+  transform-style: preserve-3d;
+  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent-100) 42%, var(--primary-100)) 0%, color-mix(in srgb, var(--primary-100) 45%, transparent) 52%, transparent 72%);
   animation: geometry-glow 6s ease-in-out infinite;
 }
+.geometry-stage {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-style: preserve-3d;
+  transform-origin: 50% 52%;
+  animation: geometry-orbit 32s linear infinite;
+}
 .geometry-mark {
-  width: 86%;
+  width: 58%;
   height: auto;
   display: block;
+  transform-style: preserve-3d;
+  transform: rotateX(28deg) translateZ(8px);
+  filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--accent-200) 14%, transparent));
 }
 @keyframes geometry-glow {
-  0%, 100% { transform: scale(1); filter: saturate(1); }
-  50% { transform: scale(1.035); filter: saturate(1.12); }
+  0%, 100% { filter: saturate(1) brightness(1); }
+  50% { filter: saturate(1.14) brightness(1.03); }
+}
+@keyframes geometry-orbit {
+  from { transform: rotate3d(0.55, 1, 0.12, 0deg); }
+  to { transform: rotate3d(0.55, 1, 0.12, 360deg); }
 }
 .post-list { display: grid; gap: 18px; padding-bottom: 64px; }
 .post-list:empty { padding: 0; }
+.dash-panel {
+  max-width: 640px;
+  margin: 0 auto 28px;
+}
+.dash-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.dash-head h2 {
+  margin: 0;
+  font: normal 18px/1.4 var(--serif);
+  letter-spacing: -.01em;
+  color: var(--text-100);
+}
+.dash-more {
+  font-size: 13px;
+  color: var(--accent-200);
+  white-space: nowrap;
+}
+.dash-empty {
+  margin: 0;
+  color: var(--text-200);
+  font-size: 14px;
+}
+.news-list {
+  list-style: none;
+  margin: 0;
+  padding: 14px 16px;
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--bg-300);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg-100) 88%, var(--primary-100));
+  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-300) 4%, transparent);
+}
+.news-item {
+  display: grid;
+  grid-template-columns: 7.2rem 1fr;
+  gap: 12px;
+  align-items: start;
+}
+.news-item time {
+  font-size: 12px;
+  color: var(--text-200);
+  font-variant-numeric: tabular-nums;
+  padding-top: 2px;
+}
+.news-text {
+  color: var(--text-100);
+  font-size: 14px;
+  line-height: 1.65;
+}
+.news-text a { color: var(--accent-200); }
 .home-feed {
   display: grid;
   gap: 12px;
   max-width: 560px;
-  margin: 0 auto;
-  padding-bottom: 56px;
+  margin: 0;
+  padding-bottom: 40px;
+}
+.blog-feed {
+  display: grid;
+  gap: 18px;
+  padding-bottom: 64px;
+}
+.blog-section-title {
+  margin: 10px 0 0;
+  font: normal 18px/1.4 var(--serif);
+  color: var(--text-100);
 }
+.page-shell { max-width: 680px; padding-bottom: 64px; }
+.page-lede {
+  margin: 12px 0 0;
+  color: var(--text-200);
+  font-size: 15px;
+  line-height: 1.7;
+}
+.page-prose { margin-top: 8px; }
 .series-folder {
   border: 1px solid var(--bg-300);
   border-radius: 16px;
@@ -230,7 +325,8 @@ main { flex: 1; }
   border-radius: 2px;
   background: color-mix(in srgb, var(--accent-100) 70%, var(--primary-200));
 }
-.series-folder-posts .post-card-compact {
+.series-folder-posts .post-card-compact,
+.series-folder-posts .post-card-roomy {
   margin-left: 8px;
   display: grid;
   grid-template-columns: auto 1fr;
@@ -239,14 +335,72 @@ main { flex: 1; }
   background: color-mix(in srgb, var(--bg-100) 92%, var(--primary-100));
   animation: series-card-in .34s ease both;
 }
-.series-folder[open] .series-folder-posts .post-card-compact:nth-child(1) { animation-delay: .04s; }
-.series-folder[open] .series-folder-posts .post-card-compact:nth-child(2) { animation-delay: .1s; }
-.series-folder[open] .series-folder-posts .post-card-compact:nth-child(3) { animation-delay: .16s; }
-.series-folder[open] .series-folder-posts .post-card-compact:nth-child(4) { animation-delay: .22s; }
+.series-folder[open] .series-folder-posts .post-card-compact:nth-child(1),
+.series-folder[open] .series-folder-posts .post-card-roomy:nth-child(1) { animation-delay: .04s; }
+.series-folder[open] .series-folder-posts .post-card-compact:nth-child(2),
+.series-folder[open] .series-folder-posts .post-card-roomy:nth-child(2) { animation-delay: .1s; }
+.series-folder[open] .series-folder-posts .post-card-compact:nth-child(3),
+.series-folder[open] .series-folder-posts .post-card-roomy:nth-child(3) { animation-delay: .16s; }
+.series-folder[open] .series-folder-posts .post-card-compact:nth-child(4),
+.series-folder[open] .series-folder-posts .post-card-roomy:nth-child(4) { animation-delay: .22s; }
 @keyframes series-card-in {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
+.series-folder-roomy {
+  max-width: none;
+}
+.series-folder-roomy .series-folder-summary {
+  padding: 20px 22px;
+}
+.series-folder-roomy .series-folder-title {
+  font-size: 26px;
+}
+.series-folder-roomy .series-folder-blurb {
+  font-size: 14px;
+  padding: 0 22px 14px;
+}
+.series-folder-roomy .series-folder-posts {
+  gap: 12px;
+  padding: 0 16px 16px;
+}
+.series-folder-roomy .series-folder-posts::before {
+  left: 34px;
+  top: 10px;
+  bottom: 28px;
+}
+.series-folder-roomy .post-card-roomy {
+  margin-left: 10px;
+  padding: 20px 22px 18px;
+  border-radius: 14px;
+  border-top-width: 3px;
+}
+.series-folder-roomy .series-index {
+  width: 32px;
+  height: 32px;
+  margin-top: 4px;
+  font-size: 13px;
+}
+.series-folder-roomy .series-folder-link {
+  margin: 0 22px 20px;
+  font-size: 14px;
+}
+.post-card-roomy h3 {
+  font: normal 24px/1.4 var(--serif);
+  margin: 10px 0 8px;
+  letter-spacing: -.02em;
+  color: var(--text-100);
+}
+.post-card-roomy p {
+  margin: 0;
+  color: var(--text-200);
+  font-size: 14px;
+  line-height: 1.7;
+}
+.post-card-roomy .card-open {
+  margin-top: 16px;
+}
+.roomy-copy { min-width: 0; }
 .series-index {
   display: grid;
   place-items: center;
@@ -283,12 +437,16 @@ main { flex: 1; }
   max-width: 640px;
   padding-bottom: 64px;
 }
-.series-page-list .post-card-compact {
+.series-page-list .post-card-compact,
+.series-page-list .post-card-roomy {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 14px;
   align-items: start;
 }
+.series-page-list .post-card-roomy {
+  padding: 22px 24px 20px;
+}
 .post-card {
   display: block;
   padding: 28px 32px 26px;
@@ -426,7 +584,13 @@ main { flex: 1; }
   .post-card h3 { font-size: 22px; }
   .post-card-compact { padding: 12px 16px; }
   .post-card-compact h3 { font-size: 18px; }
-  .geometry { padding: 10px 0 20px; }
+  .geometry { padding: 18px 0 12px; }
+  .geometry-mark { width: 72%; }
+  .news-item { grid-template-columns: 1fr; gap: 2px; }
+  .news-item time { padding-top: 0; }
+  .series-folder-roomy .series-folder-title { font-size: 22px; }
+  .post-card-roomy h3 { font-size: 20px; }
+  .series-folder-roomy .post-card-roomy { padding: 16px 16px 14px; }
   .article-page .wrap { padding: 0 16px; }
   .article-layout { padding-top: 16px; }
   .article { padding: 26px 18px 32px; border-radius: 14px; }
@@ -444,7 +608,8 @@ main { flex: 1; }
   .post-card { transition: none; }
   .post-card:hover { transform: none; }
   .post-card-compact .card-summary { transition: none; }
-  .geometry-glow { animation: none; }
+  .geometry-glow,
+  .geometry-stage { animation: none; }
   .series-folder,
   .series-folder-body,
   .series-folder-stack,

blog/active-learning/index.html

@@ -21,7 +21,13 @@
   <div class="wrap">
     <header class="header">
       <a class="brand" href="/">Musicaldg</a>
-      <nav aria-label="主导航"><a href="/blog/" aria-current="page">文章</a><a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a></nav>
+      <nav aria-label="主导航">
+        <a href="/" >Home</a>
+        <a href="/about/" >About</a>
+        <a href="/cv/" >CV</a>
+        <a href="/blog/" aria-current="page">Blog</a>
+        <a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a>
+      </nav>
     </header>
     <main id="main"><div class="article-layout"><article class="article"><a class="text-link" href="/blog/">← 全部文章</a><h1>Active Learning</h1><div class="article-meta"><time datetime="2026-09-29">2026-09-29</time><span>预计阅读 12 分钟</span></div><details class="mobile-toc"><summary>目录</summary><nav class="toc-links" aria-label="文章目录"><a class="toc-level-2" href="#section-1">1. 主动学习循环</a><a class="toc-level-2" href="#section-2">2. 熵</a><a class="toc-level-3" href="#section-3">2.1 信息量与熵</a><a class="toc-level-3" href="#section-4">2.2 不确定性采样</a><a class="toc-level-2" href="#section-5">3. KL 散度</a><a class="toc-level-2" href="#section-6">4. Query-by-Committee</a><a class="toc-level-2" href="#section-7">5. BALD</a><a class="toc-level-3" href="#section-8">5.1 先验与后验</a><a class="toc-level-3" href="#section-9">5.2 条件互信息</a><a class="toc-level-3" href="#section-10">5.3 熵差形式</a><a class="toc-level-3" href="#section-11">5.4 数值示例</a><a class="toc-level-2" href="#section-12">6. 两类不确定性</a><a class="toc-level-2" href="#section-13">参考资料</a></nav></details><div class="prose"><p>人工标注的成本，来自标注者投入的时间、专业知识，以及组织和审核标注的过程。面对大量未标注数据，一个自然的问题是：如果只能获得少量标签，应该先标注哪些样本？</p>
 <p>Active Learning（主动学习）让模型参与这个选择过程。模型先评估未标注样本，再把其中一些交给人类标注，用新增标签更新自己。</p>

blog/behavior-cloning-plid/index.html

@@ -21,7 +21,13 @@
   <div class="wrap">
     <header class="header">
       <a class="brand" href="/">Musicaldg</a>
-      <nav aria-label="主导航"><a href="/blog/" aria-current="page">文章</a><a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a></nav>
+      <nav aria-label="主导航">
+        <a href="/" >Home</a>
+        <a href="/about/" >About</a>
+        <a href="/cv/" >CV</a>
+        <a href="/blog/" aria-current="page">Blog</a>
+        <a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a>
+      </nav>
     </header>
     <main id="main"><div class="article-layout"><article class="article"><a class="text-link" href="/blog/">← 全部文章</a><h1>Behavior Cloning 与 PLID</h1><div class="article-meta"><time datetime="2026-10-20">2026-10-20</time><span>预计阅读 10 分钟</span></div><details class="mobile-toc"><summary>目录</summary><nav class="toc-links" aria-label="文章目录"><a class="toc-level-2" href="#section-1">1. 问题设定</a><a class="toc-level-2" href="#section-2">2. 形式化</a><a class="toc-level-2" href="#section-3">3. Behavior Cloning</a><a class="toc-level-3" href="#section-4">3.1 训练目标</a><a class="toc-level-3" href="#section-5">3.2 状态分布</a><a class="toc-level-2" href="#section-6">4. 误差累积</a><a class="toc-level-3" href="#section-7">4.1 状态偏移</a><a class="toc-level-3" href="#section-8">4.2 状态递推</a><a class="toc-level-3" href="#section-9">4.3 误差连锁</a><a class="toc-level-2" href="#section-10">5. PLID</a><a class="toc-level-3" href="#section-11">5.1 核心直觉</a><a class="toc-level-3" href="#section-12">5.2 交互标注</a><a class="toc-level-3" href="#section-13">5.3 数据聚合</a><a class="toc-level-2" href="#section-14">6. 数学目标</a><a class="toc-level-2" href="#section-15">7. 训练流程</a><a class="toc-level-2" href="#section-16">8. 适用条件</a><a class="toc-level-3" href="#section-17">8.1 专家反馈成本</a><a class="toc-level-3" href="#section-18">8.2 偏离状态</a><a class="toc-level-3" href="#section-19">8.3 状态信息</a><a class="toc-level-3" href="#section-20">8.4 评估指标</a><a class="toc-level-2" href="#section-21">9. 总结</a><a class="toc-level-2" href="#section-22">参考资料</a></nav></details><div class="prose"><p>Behavior Cloning 把专家示范当作监督学习数据，但模型部署后会访问训练时没有覆盖的状态。本文从模仿学习的基本形式化出发，说明 covariate shift 与 compounding errors，并推导 PLID / DAgger 如何通过当前策略 rollout、再由专家补充标签，逐步修正状态分布偏移。</p>
 <p>前置知识：概率、条件概率、监督学习损失，以及基本的 Markov Decision Process（MDP）概念。KL 散度的定义见 <a href="/blog/active-learning/#section-5">Active Learning</a>。</p>

blog/distribution-matching-gail/index.html

@@ -21,7 +21,13 @@
   <div class="wrap">
     <header class="header">
       <a class="brand" href="/">Musicaldg</a>
-      <nav aria-label="主导航"><a href="/blog/" aria-current="page">文章</a><a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a></nav>
+      <nav aria-label="主导航">
+        <a href="/" >Home</a>
+        <a href="/about/" >About</a>
+        <a href="/cv/" >CV</a>
+        <a href="/blog/" aria-current="page">Blog</a>
+        <a class="nav-external" href="https://github.com/Musicaldg" aria-label="GitHub 个人主页">GitHub ↗</a>
+      </nav>
     </header>
     <main id="main"><div class="article-layout"><article class="article"><a class="text-link" href="/blog/">← 全部文章</a><h1>Distribution Matching 与 GAIL</h1><div class="article-meta"><time datetime="2026-11-02">2026-11-02</time><span>预计阅读 10 分钟</span></div><details class="mobile-toc"><summary>目录</summary><nav class="toc-links" aria-label="文章目录"><a class="toc-level-2" href="#section-1">1. 专家反馈成本</a><a class="toc-level-2" href="#section-2">2. 轨迹分布</a><a class="toc-level-2" href="#section-3">3. Forward KL</a><a class="toc-level-3" href="#section-4">3.1 最大似然</a><a class="toc-level-3" href="#section-5">3.2 与 BC 的关系</a><a class="toc-level-2" href="#section-6">4. 状态—动作分布</a><a class="toc-level-3" href="#section-7">4.1 联合分布</a><a class="toc-level-3" href="#section-8">4.2 Occupancy measure</a><a class="toc-level-2" href="#section-9">5. KL 的方向</a><a class="toc-level-2" href="#section-10">6. GAIL</a><a class="toc-level-3" href="#section-11">6.1 二分类目标</a><a class="toc-level-3" href="#section-12">6.2 策略奖励</a><a class="toc-level-3" href="#section-13">6.3 密度比</a><a class="toc-level-3" href="#section-14">6.4 JS 散度</a><a class="toc-level-2" href="#section-15">7. 训练边界</a><a class="toc-level-2" href="#section-16">8. 总结</a><a class="toc-level-2" href="#section-17">参考资料</a></nav></details><div class="prose"><p>Behavior Cloning 直接拟合专家动作，PLID 则让专家在模型实际访问的状态上补充标签。若不能持续询问专家，能否仍让模型产生与专家相似的轨迹或状态—动作分布？本文从轨迹概率、Forward KL 与状态—动作分布出发，说明 GAIL 如何用判别器间接完成分布匹配。</p>
 <p>系列上一篇：<a href="/blog/behavior-cloning-plid/">Behavior Cloning 与 PLID</a>。前置知识还包括 MDP、条件概率，以及 <a href="/blog/active-learning/#section-5">Active Learning</a> 中的 KL divergence。</p>