feat: update docs and components, fix DLQ demo bug

docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue

@@ -11,8 +11,19 @@
         <!-- SVG Layer for Connection Lines -->
         <svg class="connections-layer">
           <defs>
-            <marker id="arrowhead" markerWidth="6" markerHeight="4" refX="18" refY="2" orient="auto">
-              <polygon points="0 0, 6 2, 0 4" fill="var(--vp-c-brand)" opacity="0.6"/>
+            <marker
+              id="arrowhead"
+              markerWidth="6"
+              markerHeight="4"
+              refX="18"
+              refY="2"
+              orient="auto"
+            >
+              <polygon
+                points="0 0, 6 2, 0 4"
+                fill="var(--vp-c-brand)"
+                opacity="0.6"
+              />
             </marker>
           </defs>
           <!-- Draw lines from hoverIndex to ALL other nodes -->
@@ -38,10 +49,11 @@
           v-for="(item, index) in items"
           :key="index"
           class="grid-cell"
-          :class="{ 
+          :class="{
             'is-source': hoverIndex === index,
             'is-target': hoverIndex !== -1 && hoverIndex !== index,
-            'is-strong-attn': hoverIndex !== -1 && getAttentionScore(hoverIndex, index) > 0.5
+            'is-strong-attn':
+              hoverIndex !== -1 && getAttentionScore(hoverIndex, index) > 0.5
           }"
           @mouseenter="hoverIndex = index"
           :style="{
@@ -54,10 +66,12 @@
             <span class="cell-label">{{ item.label }}</span>
           </div>
           <!-- Attention Score Badge -->
-          <div 
-            class="attn-badge" 
+          <div
+            class="attn-badge"
             v-if="hoverIndex !== -1 && hoverIndex !== index"
-            :style="{ opacity: Math.max(0.3, getAttentionScore(hoverIndex, index)) }"
+            :style="{
+              opacity: Math.max(0.3, getAttentionScore(hoverIndex, index))
+            }"
           >
             {{ (getAttentionScore(hoverIndex, index) * 100).toFixed(0) }}%
           </div>
@@ -68,7 +82,7 @@
       <div class="info-panel">
         <div v-if="hoverIndex === -1" class="placeholder-text">
           <span class="cursor-icon">👆</span>
-          把鼠标悬停在任意方块上，<br>观察它在"关注"谁
+          把鼠标悬停在任意方块上，<br />观察它在"关注"谁
         </div>
         <div v-else class="active-info">
           <div class="source-info">
@@ -77,10 +91,10 @@
               {{ items[hoverIndex].icon }} {{ items[hoverIndex].label }}
             </div>
           </div>
-          
+
           <div class="attn-list">
             <div class="list-header">Attention Weights (注意力权重)</div>
-            <div 
+            <div
               class="attn-item"
               v-for="(score, idx) in getTopAttentions(hoverIndex)"
               :key="idx"
@@ -91,13 +105,16 @@
               </div>
               <div class="item-right">
                 <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: score * 100 + '%' }"></div>
+                  <div
+                    class="progress-fill"
+                    :style="{ width: score * 100 + '%' }"
+                  ></div>
                 </div>
                 <span class="score-text">{{ (score * 100).toFixed(0) }}%</span>
               </div>
             </div>
           </div>
-          
+
           <div class="insight-box">
             <span class="bulb">💡</span>
             <span class="insight-text">
@@ -125,7 +142,7 @@ const items = [
   { icon: '🌿', label: '草地' }, // 5
   { icon: '🧶', label: '毛球' }, // 6
   { icon: '🐾', label: '猫爪' }, // 7
-  { icon: '🌿', label: '草地' }  // 8
+  { icon: '🌿', label: '草地' } // 8
 ]
 
 // Layout Logic
@@ -144,19 +161,19 @@ const getCenter = (index) => {
 // Attention Logic
 const getAttentionScore = (source, target) => {
   if (source === target) return 0
-  
+
   // Cat Head (4) attends strongly to:
   if (source === 4) {
     if (target === 7) return 0.95 // Paws (Body parts connected)
-    if (target === 2) return 0.8  // Butterfly (Interest)
-    if (target === 6) return 0.6  // Yarn (Toy)
+    if (target === 2) return 0.8 // Butterfly (Interest)
+    if (target === 6) return 0.6 // Yarn (Toy)
     return 0.1 // Background
   }
 
   // Cat Paws (7) attends strongly to:
   if (source === 7) {
     if (target === 4) return 0.95 // Head
-    if (target === 6) return 0.9  // Yarn (Touching)
+    if (target === 6) return 0.9 // Yarn (Touching)
     return 0.1
   }
 
@@ -203,19 +220,20 @@ const getTopAttentions = (source) => {
   // Sort descending
   const sortedKeys = Object.keys(scores).sort((a, b) => scores[b] - scores[a])
   const top3 = {}
-  sortedKeys.slice(0, 3).forEach(key => {
+  sortedKeys.slice(0, 3).forEach((key) => {
     top3[key] = scores[key]
   })
   return top3
 }
 
 const getInsightText = (idx) => {
-  if (idx === 4) return "猫头最关注猫爪（组成身体）和蝴蝶（捕猎目标）。"
-  if (idx === 7) return "猫爪最关注毛球（正在玩耍）和猫头。"
-  if (idx === 2) return "蝴蝶关注到了猫，可能是因为它是个威胁。"
-  if ([0,1,3,5,8].includes(idx)) return "草地主要关注周围的草地，确认背景纹理。"
-  if (idx === 6) return "毛球和猫爪有很强的互动关系。"
-  return "Self-Attention 让每个部分找到它的上下文关联。"
+  if (idx === 4) return '猫头最关注猫爪（组成身体）和蝴蝶（捕猎目标）。'
+  if (idx === 7) return '猫爪最关注毛球（正在玩耍）和猫头。'
+  if (idx === 2) return '蝴蝶关注到了猫，可能是因为它是个威胁。'
+  if ([0, 1, 3, 5, 8].includes(idx))
+    return '草地主要关注周围的草地，确认背景纹理。'
+  if (idx === 6) return '毛球和猫爪有很强的互动关系。'
+  return 'Self-Attention 让每个部分找到它的上下文关联。'
 }
 </script>
 
@@ -287,7 +305,7 @@ const getInsightText = (idx) => {
   cursor: pointer;
   z-index: 2;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
 
 .cell-content {
@@ -308,12 +326,13 @@ const getInsightText = (idx) => {
 }
 
 /* Interaction States */
-.grid-cell:hover, .grid-cell.is-source {
+.grid-cell:hover,
+.grid-cell.is-source {
   z-index: 10;
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg);
   transform: scale(1.15);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .grid-cell.is-strong-attn {
@@ -331,7 +350,7 @@ const getInsightText = (idx) => {
   padding: 2px 6px;
   border-radius: 10px;
   font-weight: bold;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 /* Info Panel */
@@ -407,8 +426,13 @@ const getInsightText = (idx) => {
   width: 80px;
 }
 
-.item-icon { font-size: 16px; }
-.item-name { font-size: 12px; font-weight: 500; }
+.item-icon {
+  font-size: 16px;
+}
+.item-name {
+  font-size: 12px;
+  font-weight: 500;
+}
 
 .item-right {
   flex: 1;
@@ -449,7 +473,9 @@ const getInsightText = (idx) => {
   align-items: flex-start;
 }
 
-.bulb { font-size: 16px; }
+.bulb {
+  font-size: 16px;
+}
 .insight-text {
   font-size: 12px;
   color: var(--vp-c-text-1);
@@ -457,8 +483,13 @@ const getInsightText = (idx) => {
 }
 
 @keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-5px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 @media (max-width: 768px) {

docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue

@@ -101,7 +101,10 @@
               </div>
             </div>
             <div class="sequence-hint">
-              <span v-if="isVLM">Concat: [Vision Tokens] + [Text Tokens] (拼接：视觉在前，文字在后)</span>
+              <span v-if="isVLM"
+                >Concat: [Vision Tokens] + [Text Tokens]
+                (拼接：视觉在前，文字在后)</span
+              >
               <span v-else>Only [Text Tokens] (只有文字 Token)</span>
             </div>
           </div>
@@ -132,8 +135,14 @@
           <h3>VLM = LLM + Vision Encoder (视觉大模型原理)</h3>
           <ul>
             <li><strong>ViT (The Eye):</strong> 把图片编码成视觉特征。</li>
-            <li><strong>Projector (The Translator):</strong> 把视觉特征映射到 LLM 的 Token 空间。</li>
-            <li><strong>Concatenation (拼接):</strong> 把视觉 Token 放在文字 Token 之前，作为同一条输入序列。</li>
+            <li>
+              <strong>Projector (The Translator):</strong> 把视觉特征映射到 LLM
+              的 Token 空间。
+            </li>
+            <li>
+              <strong>Concatenation (拼接):</strong> 把视觉 Token 放在文字 Token
+              之前，作为同一条输入序列。
+            </li>
           </ul>
         </div>
       </transition>

docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue

@@ -6,16 +6,16 @@
   <div class="patchify-demo">
     <div class="control-panel">
       <div class="controls">
-        <button 
-          class="action-btn" 
-          @click="prevStep" 
+        <button
+          class="action-btn"
+          @click="prevStep"
           :disabled="currentStep === 0"
         >
           ⬅ 上一步 (Prev)
         </button>
         <span class="step-indicator">Step {{ currentStep + 1 }} / 4</span>
-        <button 
-          class="action-btn primary" 
+        <button
+          class="action-btn primary"
           @click="nextStep"
           :disabled="currentStep === 3"
         >
@@ -34,22 +34,19 @@
         Step 1: Show container background, grid overlay visible (cells with border)
         Step 2+: Container background hidden, cells visible with individual backgrounds
       -->
-      <div 
-        class="image-container" 
-        :class="{ 
+      <div
+        class="image-container"
+        :class="{
           'is-pixelated': currentStep >= 1,
-          'is-patchified': currentStep >= 2 
+          'is-patchified': currentStep >= 2
         }"
       >
         <div class="grid-overlay" v-if="currentStep === 1"></div>
-        <div
-          v-for="n in 196"
-          :key="n"
-          class="patch"
-          :style="getPatchStyle(n)"
-        >
+        <div v-for="n in 196" :key="n" class="patch" :style="getPatchStyle(n)">
           <!-- Show number only in Pixelated stage to represent 'digitization' -->
-          <span class="pixel-val" v-if="currentStep === 1">{{ Math.floor(Math.random() * 9) }}</span>
+          <span class="pixel-val" v-if="currentStep === 1">{{
+            Math.floor(Math.random() * 9)
+          }}</span>
           <!-- Show ID in Patchified stage -->
           <span class="patch-id" v-if="currentStep >= 2">{{ n }}</span>
         </div>
@@ -59,7 +56,9 @@
 
       <!-- 线性序列视图 -->
       <div class="sequence-container" v-if="currentStep >= 3">
-        <div class="sequence-label">Token Sequence: 196×D (每个 Token 是 D 维向量)</div>
+        <div class="sequence-label">
+          Token Sequence: 196×D (每个 Token 是 D 维向量)
+        </div>
         <div class="token-stream">
           <div
             v-for="n in 196"
@@ -79,10 +78,10 @@ import { ref, computed } from 'vue'
 const currentStep = ref(0)
 
 const stepDescriptions = [
-  "1. 原始图片 (Original Image): 计算机看到的原始输入。",
-  "2. 数字化 (Digitization): 图片本质上是一个数字矩阵 (H x W x C)。",
-  "3. 切块 (Patchify): 典型设置：224×224 按 16×16 切成 14×14=196 个 Patch（此处等比示意）。",
-  "4. 序列化 (Serialize): 将二维分布的 Patch “拍扁”成一维序列 (Spatial Flatten)。现在它看起来就像一串“视觉单词”，可以被 Transformer 逐个读取。"
+  '1. 原始图片 (Original Image): 计算机看到的原始输入。',
+  '2. 数字化 (Digitization): 图片本质上是一个数字矩阵 (H x W x C)。',
+  '3. 切块 (Patchify): 典型设置：224×224 按 16×16 切成 14×14=196 个 Patch（此处等比示意）。',
+  '4. 序列化 (Serialize): 将二维分布的 Patch “拍扁”成一维序列 (Spatial Flatten)。现在它看起来就像一串“视觉单词”，可以被 Transformer 逐个读取。'
 ]
 
 const nextStep = () => {
@@ -95,22 +94,24 @@ const prevStep = () => {
 
 // 模拟一张风景图的 CSS 渐变
 // Sky (Blue) -> Mountains (Green/Grey) -> Sun (Yellow)
-const bgImage = 'linear-gradient(to bottom, #87CEEB 0%, #87CEEB 50%, #228B22 50%, #228B22 100%)'
+const bgImage =
+  'linear-gradient(to bottom, #87CEEB 0%, #87CEEB 50%, #228B22 50%, #228B22 100%)'
 // Add a sun using radial gradient
-const complexBg = 'radial-gradient(circle at 70% 20%, #FFD700 0%, #FFD700 10%, transparent 10.5%), linear-gradient(to bottom, #87CEEB 0%, #87CEEB 60%, #4CA1AF 60%, #2C3E50 100%)'
+const complexBg =
+  'radial-gradient(circle at 70% 20%, #FFD700 0%, #FFD700 10%, transparent 10.5%), linear-gradient(to bottom, #87CEEB 0%, #87CEEB 60%, #4CA1AF 60%, #2C3E50 100%)'
 
 const getPatchStyle = (n) => {
   const row = Math.floor((n - 1) / 14)
   const col = (n - 1) % 14
-  
+
   // Calculate background position for each patch to match the original image
   // The container is 280px, each patch is 20px.
   // 14 cols.
   const posX = col * -20
   const posY = row * -20
-  
+
   const isPatchified = currentStep.value >= 2
-  
+
   return {
     backgroundImage: complexBg,
     backgroundPosition: `${posX}px ${posY}px`,
@@ -120,9 +121,9 @@ const getPatchStyle = (n) => {
     // In Step 2, patches take over with their own background
     opacity: currentStep.value === 0 ? 0 : 1,
     // In Step 1, background must be transparent to see container bg
-    backgroundImage: isPatchified ? complexBg : 'none', 
+    backgroundImage: isPatchified ? complexBg : 'none',
     transform: isPatchified ? 'scale(0.9)' : 'scale(1)',
-    transition: 'all 0.5s ease',
+    transition: 'all 0.5s ease'
   }
 }
 
@@ -131,11 +132,11 @@ const getMiniPatchStyle = (n) => {
   const col = (n - 1) % 14
   const posX = col * -20
   const posY = row * -20
-  
+
   return {
     backgroundImage: complexBg,
     backgroundPosition: `${posX}px ${posY}px`,
-    backgroundSize: '280px 280px',
+    backgroundSize: '280px 280px'
   }
 }
 </script>
@@ -225,10 +226,23 @@ const getMiniPatchStyle = (n) => {
   width: 280px;
   height: 280px;
   /* Step 0 & 1 Background */
-  background-image: radial-gradient(circle at 70% 20%, #FFD700 0%, #FFD700 10%, transparent 10.5%), linear-gradient(to bottom, #87CEEB 0%, #87CEEB 60%, #4CA1AF 60%, #2C3E50 100%);
+  background-image:
+    radial-gradient(
+      circle at 70% 20%,
+      #ffd700 0%,
+      #ffd700 10%,
+      transparent 10.5%
+    ),
+    linear-gradient(
+      to bottom,
+      #87ceeb 0%,
+      #87ceeb 60%,
+      #4ca1af 60%,
+      #2c3e50 100%
+    );
   position: relative;
   transition: all 0.5s ease;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 /* Step 2+: Remove container background, let patches show */
@@ -329,12 +343,23 @@ const getMiniPatchStyle = (n) => {
 }
 
 @keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(5px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(5px);
+  }
 }
 
 @keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>

docs/.vitepress/theme/components/appendix/vlm-intro/ViTOutputDemo.vue

@@ -3,7 +3,9 @@
     <div class="pipeline">
       <!-- 1. Transformer Output Grid -->
       <div class="stage">
-        <div class="stage-label">1. Patch Tokens (Shown as Grid) (Patch Token 网格示意)</div>
+        <div class="stage-label">
+          1. Patch Tokens (Shown as Grid) (Patch Token 网格示意)
+        </div>
         <div class="grid-container">
           <div
             v-for="(item, index) in items"
@@ -19,14 +21,14 @@
 
       <div class="arrow-section">
         <div class="arrow-line"></div>
-        <div class="arrow-text">Reshape for View: Grid ⇄ Sequence (重排显示：网格⇄序列)</div>
+        <div class="arrow-text">
+          Reshape for View: Grid ⇄ Sequence (重排显示：网格⇄序列)
+        </div>
       </div>
 
       <!-- 2. Feature Vector Sequence -->
       <div class="stage">
-        <div class="stage-label">
-          2. Output Token Sequence (N×D) (输出序列)
-        </div>
+        <div class="stage-label">2. Output Token Sequence (N×D) (输出序列)</div>
         <div class="vector-sequence">
           <div
             v-for="(item, index) in items"