feat: comprehensive documentation and demo updates

- Update READMEs and docs across multiple languages
- Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics
- Add new appendix sections for Database and IDE intros
- Update VitePress config, theme, and utility scripts
- Clean up unused assets and components

docs/.vitepress/theme/components/appendix/llm-intro/TrainingInferenceDemo.vue

@@ -6,8 +6,8 @@
   <div class="ti-demo">
     <!-- 顶部导航 -->
     <div class="nav-tabs">
-      <button 
-        v-for="tab in tabs" 
+      <button
+        v-for="tab in tabs"
         :key="tab.id"
         :class="{ active: currentTab === tab.id }"
         @click="currentTab = tab.id"
@@ -18,28 +18,39 @@
     </div>
 
     <div class="demo-content">
-      
       <!-- Tab 1: 基础能力 - 文本续写 -->
       <div v-if="currentTab === 'completion'" class="mode-view">
         <div class="desc-box">
-          <p><strong>LLM 的本能是“续写”</strong>：它并不懂对话，只是根据上文猜下一个词。</p>
+          <p>
+            <strong>LLM 的本能是“续写”</strong
+            >：它并不懂对话，只是根据上文猜下一个词。
+          </p>
         </div>
-        
+
         <div class="interactive-area">
           <div class="input-row">
             <span class="prompt-label">Prompt (提示词):</span>
-            <input type="text" v-model="completionInput" placeholder="Enter text..." :disabled="isGenerating">
-            <button class="primary-btn" @click="runCompletion" :disabled="isGenerating || !completionInput">
+            <input
+              type="text"
+              v-model="completionInput"
+              placeholder="Enter text..."
+              :disabled="isGenerating"
+            />
+            <button
+              class="primary-btn"
+              @click="runCompletion"
+              :disabled="isGenerating || !completionInput"
+            >
               ✨ Generate
             </button>
           </div>
-          
+
           <div class="result-box">
             <span class="user-text">{{ completionInput }}</span>
             <span class="ai-text typing">{{ completionOutput }}</span>
             <span v-if="isGenerating" class="cursor">|</span>
           </div>
-          
+
           <div class="explanation" v-if="completionOutput">
             💡 模型在计算概率：<code>P(blue | The sky is) = 90%</code>
           </div>
@@ -49,7 +60,10 @@
       <!-- Tab 2: 技巧 - 对话原理 (Template) -->
       <div v-if="currentTab === 'chat'" class="mode-view">
         <div class="desc-box">
-          <p><strong>如何让它对话？</strong> 我们用“剧本”包装输入，让模型以为自己在续写一段对话。</p>
+          <p>
+            <strong>如何让它对话？</strong>
+            我们用“剧本”包装输入，让模型以为自己在续写一段对话。
+          </p>
         </div>
 
         <div class="chat-container">
@@ -61,7 +75,11 @@
               <div class="msg bot" v-if="chatOutput">{{ chatOutput }}</div>
             </div>
             <div class="input-area">
-              <input v-model="chatInput" placeholder="Say hello..." @keyup.enter="runChat">
+              <input
+                v-model="chatInput"
+                placeholder="Say hello..."
+                @keyup.enter="runChat"
+              />
               <button @click="runChat" :disabled="isGenerating">Send</button>
             </div>
           </div>
@@ -71,13 +89,13 @@
           <div class="model-view-half">
             <div class="half-label">模型看到的 (Raw Prompt)</div>
             <div class="raw-prompt">
-              <span class="sys-tag">&lt;|system|&gt;</span><br>
-              You are a helpful assistant.<br>
-              <span class="bot-tag">&lt;|assistant|&gt;</span><br>
-              我是 AI 助手，你好！<br>
-              <span class="user-tag">&lt;|user|&gt;</span><br>
-              {{ chatInput || '...' }}<br>
-              <span class="bot-tag">&lt;|assistant|&gt;</span><br>
+              <span class="sys-tag">&lt;|system|&gt;</span><br />
+              You are a helpful assistant.<br />
+              <span class="bot-tag">&lt;|assistant|&gt;</span><br />
+              我是 AI 助手，你好！<br />
+              <span class="user-tag">&lt;|user|&gt;</span><br />
+              {{ chatInput || '...' }}<br />
+              <span class="bot-tag">&lt;|assistant|&gt;</span><br />
               <span class="ai-text typing">{{ chatOutput }}</span>
             </div>
           </div>
@@ -87,31 +105,50 @@
       <!-- Tab 3: 原理 - 训练 (Training) -->
       <div v-if="currentTab === 'train'" class="mode-view">
         <div class="desc-box">
-          <p><strong>Training (训练原理)</strong>: 模型通过大量数据的“填空题”训练。计算预测结果与真实结果的差异（Loss），并不断调整参数以降低 Loss。</p>
+          <p>
+            <strong>Training (训练原理)</strong>:
+            模型通过大量数据的“填空题”训练。计算预测结果与真实结果的差异（Loss），并不断调整参数以降低
+            Loss。
+          </p>
         </div>
 
         <div class="training-dashboard">
           <!-- 左侧：训练过程可视化 -->
           <div class="train-process-panel card-panel">
             <div class="panel-header">
-              <span class="step-badge">Step {{ currentStep }}/{{ totalSteps }}</span>
+              <span class="step-badge"
+                >Step {{ currentStep }}/{{ totalSteps }}</span
+              >
               <span class="panel-title">Training Process</span>
             </div>
-            
+
             <div class="data-flow">
               <!-- Input Section -->
               <div class="flow-stage input-stage">
                 <div class="stage-label">1. Input (输入)</div>
-                <div v-if="currentStep === 0" class="content-box input placeholder">
+                <div
+                  v-if="currentStep === 0"
+                  class="content-box input placeholder"
+                >
                   <span class="text-content">点击下方按钮开始训练</span>
                 </div>
                 <div v-else class="content-box input">
-                  <span class="text-content">"{{ currentTrainData.input }}"</span>
+                  <span class="text-content"
+                    >"{{ currentTrainData.input }}"</span
+                  >
                 </div>
                 <div class="matrix-viz">
                   <span class="matrix-label">Embedding:</span>
                   <div class="matrix-row">
-                    <span v-for="n in 5" :key="n" class="matrix-cell" :style="{ opacity: inputEmbeddingOpacities[n - 1] ?? 0.6, transform: `scaleY(${inputEmbeddingOpacities[n - 1] ?? 1})` }"></span>
+                    <span
+                      v-for="n in 5"
+                      :key="n"
+                      class="matrix-cell"
+                      :style="{
+                        opacity: inputEmbeddingOpacities[n - 1] ?? 0.6,
+                        transform: `scaleY(${inputEmbeddingOpacities[n - 1] ?? 1})`
+                      }"
+                    ></span>
                   </div>
                 </div>
               </div>
@@ -125,16 +162,26 @@
               <!-- Prediction vs Target Section -->
               <div v-if="currentStep > 0" class="flow-stage comparison">
                 <div class="stage-label">2. Prediction vs Target</div>
-                
+
                 <div class="compare-row">
                   <div class="compare-item">
                     <span class="sub-label">Prediction</span>
-                    <div class="content-box pred" :class="{ correct: isPredictionCorrect }">
+                    <div
+                      class="content-box pred"
+                      :class="{ correct: isPredictionCorrect }"
+                    >
                       "{{ currentPrediction || '...' }}"
                     </div>
                     <div class="matrix-viz small">
                       <div class="matrix-row">
-                        <span v-for="n in 5" :key="n" class="matrix-cell pred-cell" :style="{ opacity: predEmbeddingOpacities[n - 1] ?? 0.6 }"></span>
+                        <span
+                          v-for="n in 5"
+                          :key="n"
+                          class="matrix-cell pred-cell"
+                          :style="{
+                            opacity: predEmbeddingOpacities[n - 1] ?? 0.6
+                          }"
+                        ></span>
                       </div>
                     </div>
                   </div>
@@ -148,7 +195,14 @@
                     </div>
                     <div class="matrix-viz small">
                       <div class="matrix-row">
-                        <span v-for="n in 5" :key="n" class="matrix-cell target-cell" :style="{ opacity: targetEmbeddingOpacities[n - 1] ?? 0.9 }"></span>
+                        <span
+                          v-for="n in 5"
+                          :key="n"
+                          class="matrix-cell target-cell"
+                          :style="{
+                            opacity: targetEmbeddingOpacities[n - 1] ?? 0.9
+                          }"
+                        ></span>
                       </div>
                     </div>
                   </div>
@@ -159,14 +213,34 @@
               <div v-if="currentStep > 0" class="flow-stage loss-stage">
                 <div class="stage-header">
                   <span class="stage-label">3. Loss Calculation</span>
-                  <span class="loss-val-badge" :style="{ backgroundColor: getLossColor(currentLoss) }">Loss: {{ currentLoss.toFixed(4) }}</span>
+                  <span
+                    class="loss-val-badge"
+                    :style="{ backgroundColor: getLossColor(currentLoss) }"
+                    >Loss: {{ currentLoss.toFixed(4) }}</span
+                  >
                 </div>
                 <div class="loss-bar-container">
                   <div class="loss-bar-bg">
-                    <div class="loss-bar-fill" :style="{ width: Math.min((currentLoss / 3) * 100, 100) + '%', backgroundColor: getLossColor(currentLoss) }"></div>
+                    <div
+                      class="loss-bar-fill"
+                      :style="{
+                        width: Math.min((currentLoss / 3) * 100, 100) + '%',
+                        backgroundColor: getLossColor(currentLoss)
+                      }"
+                    ></div>
                   </div>
-                  <div class="loss-feedback" :class="{ success: isPredictionCorrect, error: !isPredictionCorrect }">
-                    {{ isPredictionCorrect ? '✅ Parameters Good' : '❌ Update Weights' }}
+                  <div
+                    class="loss-feedback"
+                    :class="{
+                      success: isPredictionCorrect,
+                      error: !isPredictionCorrect
+                    }"
+                  >
+                    {{
+                      isPredictionCorrect
+                        ? '✅ Parameters Good'
+                        : '❌ Update Weights'
+                    }}
                   </div>
                 </div>
               </div>
@@ -182,35 +256,74 @@
               <svg viewBox="0 0 300 150" class="loss-chart">
                 <!-- Background Grid -->
                 <defs>
-                  <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
-                    <path d="M 30 0 L 0 0 0 30" fill="none" stroke="var(--vp-c-divider)" stroke-width="0.5" stroke-opacity="0.3"/>
+                  <pattern
+                    id="grid"
+                    width="30"
+                    height="30"
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <path
+                      d="M 30 0 L 0 0 0 30"
+                      fill="none"
+                      stroke="var(--vp-c-divider)"
+                      stroke-width="0.5"
+                      stroke-opacity="0.3"
+                    />
                   </pattern>
-                  <linearGradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
-                    <stop offset="0%" stop-color="var(--vp-c-brand)" stop-opacity="0.2"/>
-                    <stop offset="100%" stop-color="var(--vp-c-brand)" stop-opacity="0"/>
+                  <linearGradient
+                    id="chartGradient"
+                    x1="0"
+                    x2="0"
+                    y1="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stop-color="var(--vp-c-brand)"
+                      stop-opacity="0.2"
+                    />
+                    <stop
+                      offset="100%"
+                      stop-color="var(--vp-c-brand)"
+                      stop-opacity="0"
+                    />
                   </linearGradient>
                 </defs>
                 <rect width="100%" height="100%" fill="url(#grid)" />
-                
+
                 <!-- Axes -->
-                <line x1="20" y1="130" x2="290" y2="130" stroke="var(--vp-c-text-3)" stroke-width="1" />
-                <line x1="20" y1="10" x2="20" y2="130" stroke="var(--vp-c-text-3)" stroke-width="1" />
-                
+                <line
+                  x1="20"
+                  y1="130"
+                  x2="290"
+                  y2="130"
+                  stroke="var(--vp-c-text-3)"
+                  stroke-width="1"
+                />
+                <line
+                  x1="20"
+                  y1="10"
+                  x2="20"
+                  y2="130"
+                  stroke="var(--vp-c-text-3)"
+                  stroke-width="1"
+                />
+
                 <!-- Fill Area -->
-                <polygon 
+                <polygon
                   v-if="lossPolylinePoints"
-                  :points="`20,130 ${lossPolylinePoints} ${lossPolylinePoints.split(' ').pop().split(',')[0]},130`" 
-                  fill="url(#chartGradient)" 
+                  :points="`20,130 ${lossPolylinePoints} ${lossPolylinePoints.split(' ').pop().split(',')[0]},130`"
+                  fill="url(#chartGradient)"
                 />
 
                 <!-- The Line -->
-                <polyline 
-                  fill="none" 
-                  stroke="var(--vp-c-brand)" 
-                  stroke-width="2.5" 
+                <polyline
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2.5"
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  :points="lossPolylinePoints" 
+                  :points="lossPolylinePoints"
                 />
               </svg>
               <div class="chart-labels">
@@ -219,7 +332,7 @@
                 <span>Step {{ totalSteps }}</span>
               </div>
             </div>
-            
+
             <div class="log-console-container">
               <div class="console-header">
                 <div class="window-dots">
@@ -230,21 +343,48 @@
                 <span class="console-title">training_log.txt</span>
               </div>
               <div class="log-console">
-                <div v-if="trainingLogs.length === 0" class="log-placeholder">Waiting for training to start...</div>
-                <div v-for="(log, idx) in trainingLogs" :key="idx" class="log-item">
-                  <span class="log-step">[Step {{ String(log.step).padStart(2, '0') }}]</span>
-                  <span class="log-loss" :style="{ color: getLossColor(log.loss) }">Loss={{ log.loss.toFixed(2) }}</span>
-                  <span class="log-detail">{{ log.input }} -> <span :class="{ 'text-green': log.pred === log.target, 'text-red': log.pred !== log.target }">{{ log.pred }}</span></span>
+                <div v-if="trainingLogs.length === 0" class="log-placeholder">
+                  Waiting for training to start...
+                </div>
+                <div
+                  v-for="(log, idx) in trainingLogs"
+                  :key="idx"
+                  class="log-item"
+                >
+                  <span class="log-step"
+                    >[Step {{ String(log.step).padStart(2, '0') }}]</span
+                  >
+                  <span
+                    class="log-loss"
+                    :style="{ color: getLossColor(log.loss) }"
+                    >Loss={{ log.loss.toFixed(2) }}</span
+                  >
+                  <span class="log-detail"
+                    >{{ log.input }} ->
+                    <span
+                      :class="{
+                        'text-green': log.pred === log.target,
+                        'text-red': log.pred !== log.target
+                      }"
+                      >{{ log.pred }}</span
+                    ></span
+                  >
                 </div>
               </div>
             </div>
           </div>
         </div>
-          
+
         <div class="action-bar">
-          <button class="train-btn" @click="handleTrainClick" :class="{ 'is-restart': currentStep >= totalSteps }">
+          <button
+            class="train-btn"
+            @click="handleTrainClick"
+            :class="{ 'is-restart': currentStep >= totalSteps }"
+          >
             <span class="btn-icon" v-if="currentStep === 0">🚀</span>
-            <span class="btn-icon" v-else-if="currentStep >= totalSteps">🔄</span>
+            <span class="btn-icon" v-else-if="currentStep >= totalSteps"
+              >🔄</span
+            >
             <span class="btn-icon" v-else>▶️</span>
             {{ trainButtonText }}
           </button>
@@ -254,19 +394,28 @@
       <!-- Tab 4: 进阶 - 微调与对齐 (RLHF) -->
       <div v-if="currentTab === 'rlhf'" class="mode-view">
         <div class="desc-box">
-          <p><strong>从“胡说”到“好助手”</strong>：通过 RLHF (人类反馈) 让模型学会礼貌和安全。</p>
+          <p>
+            <strong>从“胡说”到“好助手”</strong>：通过 RLHF (人类反馈)
+            让模型学会礼貌和安全。
+          </p>
         </div>
 
         <div class="alignment-demo">
           <div class="controls">
             <div class="radio-group">
               <span class="group-label">模型状态：</span>
-              <label class="radio-option" :class="{ active: alignmentState === 'base' }">
-                <input type="radio" v-model="alignmentState" value="base">
+              <label
+                class="radio-option"
+                :class="{ active: alignmentState === 'base' }"
+              >
+                <input type="radio" v-model="alignmentState" value="base" />
                 Base Model (未对齐)
               </label>
-              <label class="radio-option" :class="{ active: alignmentState === 'aligned' }">
-                <input type="radio" v-model="alignmentState" value="aligned">
+              <label
+                class="radio-option"
+                :class="{ active: alignmentState === 'aligned' }"
+              >
+                <input type="radio" v-model="alignmentState" value="aligned" />
                 Aligned Model (已对齐)
               </label>
             </div>
@@ -274,9 +423,11 @@
 
           <div class="scenario">
             <div class="user-query">User: "如何制造混乱？"</div>
-            
+
             <div class="model-response" :class="alignmentState">
-              <div class="avatar">{{ alignmentState === 'base' ? '🤪' : '🤖' }}</div>
+              <div class="avatar">
+                {{ alignmentState === 'base' ? '🤪' : '🤖' }}
+              </div>
               <div class="bubble">
                 <div v-if="alignmentState === 'base'">
                   哈哈！制造混乱很简单！你可以去大街上大喊大叫，或者...（此处省略1000字胡言乱语）...这太好玩了！
@@ -288,13 +439,14 @@
             </div>
 
             <div class="analysis">
-              <span v-if="alignmentState === 'base'" class="bad-tag">⚠️ Unsafe / Not Helpful</span>
+              <span v-if="alignmentState === 'base'" class="bad-tag"
+                >⚠️ Unsafe / Not Helpful</span
+              >
               <span v-else class="good-tag">✅ Safe & Helpful</span>
             </div>
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -319,10 +471,10 @@ const runCompletion = async () => {
   if (isGenerating.value) return
   isGenerating.value = true
   completionOutput.value = ''
-  
+
   const target = ' blue and beautiful.'
   for (const char of target) {
-    await new Promise(r => setTimeout(r, 50))
+    await new Promise((r) => setTimeout(r, 50))
     completionOutput.value += char
   }
   isGenerating.value = false
@@ -336,12 +488,16 @@ const runChat = async () => {
   if (isGenerating.value || !chatInput.value) return
   isGenerating.value = true
   chatOutput.value = ''
-  
-  const responses = ['Hi there! How can I help?', 'Hello! Nice to meet you.', 'Greetings!']
+
+  const responses = [
+    'Hi there! How can I help?',
+    'Hello! Nice to meet you.',
+    'Greetings!'
+  ]
   const target = responses[Math.floor(Math.random() * responses.length)]
-  
+
   for (const char of target) {
-    await new Promise(r => setTimeout(r, 50))
+    await new Promise((r) => setTimeout(r, 50))
     chatOutput.value += char
   }
   isGenerating.value = false
@@ -383,9 +539,18 @@ const resetTrainingState = () => {
 }
 
 const seedOpacities = () => {
-  inputEmbeddingOpacities.value = Array.from({ length: 5 }, () => Math.random() * 0.5 + 0.5)
-  predEmbeddingOpacities.value = Array.from({ length: 5 }, () => Math.random() * 0.5 + 0.5)
-  targetEmbeddingOpacities.value = Array.from({ length: 5 }, () => Math.random() * 0.2 + 0.8)
+  inputEmbeddingOpacities.value = Array.from(
+    { length: 5 },
+    () => Math.random() * 0.5 + 0.5
+  )
+  predEmbeddingOpacities.value = Array.from(
+    { length: 5 },
+    () => Math.random() * 0.5 + 0.5
+  )
+  targetEmbeddingOpacities.value = Array.from(
+    { length: 5 },
+    () => Math.random() * 0.2 + 0.8
+  )
 }
 
 const handleTrainClick = () => {
@@ -394,7 +559,8 @@ const handleTrainClick = () => {
   }
 
   if (!activeTrainData.value) {
-    activeTrainData.value = trainDataset[Math.floor(Math.random() * trainDataset.length)]
+    activeTrainData.value =
+      trainDataset[Math.floor(Math.random() * trainDataset.length)]
   }
 
   currentStep.value += 1
@@ -402,57 +568,57 @@ const handleTrainClick = () => {
 
   const data = activeTrainData.value
   currentTrainData.value = data
-  
+
   // Define a volatile loss curve for 10 steps to simulate real training instability
-   // High -> Low -> Spike (Wrong) -> Low (Correct) -> Spike (Wrong) -> Stable Low
-   const targetLossCurve = [
-     2.8, // 1. Start high (Wrong)
-     2.3, // 2. Dropping (Wrong)
-     2.6, // 3. SPIKE! (Wrong)
-     1.8, // 4. Recovering (Wrong)
-     0.5, // 5. Good! (CORRECT!) -> Loss drops significantly because prediction matches
-     1.5, // 6. SPIKE! (Wrong) -> Loss jumps up because prediction is wrong again
-     0.4, // 7. Converging (Correct)
-     0.3, // 8. Good (Correct)
-     0.4, // 9. Small fluctuation (Correct)
-     0.1  // 10. Converged (Correct)
-   ]
-   const baseLoss = targetLossCurve[i - 1] || 0.1
-   
-   // Add small randomness (+/- 0.05) to make it feel organic
-   let noise = (Math.random() * 0.1) - 0.05
-   let finalLoss = baseLoss + noise
-   
-   // Boundary checks
-   if (finalLoss < 0.01) finalLoss = 0.01
-   
-   // IMPORTANT: Ensure consistency between Loss and Prediction
-   // Threshold logic:
-   // Loss <= 0.8: Prediction is CORRECT (Low loss)
-   // Loss > 0.8: Prediction is WRONG (High loss)
-   // This ensures that when Loss spikes to 1.5 (Step 6), prediction MUST be wrong.
-   // When Loss drops to 0.5 (Step 5), prediction MUST be correct.
-   
-   let pred
-   const threshold = 0.8
-   
-   if (finalLoss > threshold) {
-     pred = getRandomWord()
-     // Safety: ensure random word is not the target
-     while (pred === data.target) {
-       pred = getRandomWord()
-     }
-   } else {
-     pred = data.target
-     // Optional: clamp loss if it accidentally went above threshold due to noise
-     if (finalLoss > threshold - 0.01) finalLoss = threshold - 0.01
-   }
-  
+  // High -> Low -> Spike (Wrong) -> Low (Correct) -> Spike (Wrong) -> Stable Low
+  const targetLossCurve = [
+    2.8, // 1. Start high (Wrong)
+    2.3, // 2. Dropping (Wrong)
+    2.6, // 3. SPIKE! (Wrong)
+    1.8, // 4. Recovering (Wrong)
+    0.5, // 5. Good! (CORRECT!) -> Loss drops significantly because prediction matches
+    1.5, // 6. SPIKE! (Wrong) -> Loss jumps up because prediction is wrong again
+    0.4, // 7. Converging (Correct)
+    0.3, // 8. Good (Correct)
+    0.4, // 9. Small fluctuation (Correct)
+    0.1 // 10. Converged (Correct)
+  ]
+  const baseLoss = targetLossCurve[i - 1] || 0.1
+
+  // Add small randomness (+/- 0.05) to make it feel organic
+  let noise = Math.random() * 0.1 - 0.05
+  let finalLoss = baseLoss + noise
+
+  // Boundary checks
+  if (finalLoss < 0.01) finalLoss = 0.01
+
+  // IMPORTANT: Ensure consistency between Loss and Prediction
+  // Threshold logic:
+  // Loss <= 0.8: Prediction is CORRECT (Low loss)
+  // Loss > 0.8: Prediction is WRONG (High loss)
+  // This ensures that when Loss spikes to 1.5 (Step 6), prediction MUST be wrong.
+  // When Loss drops to 0.5 (Step 5), prediction MUST be correct.
+
+  let pred
+  const threshold = 0.8
+
+  if (finalLoss > threshold) {
+    pred = getRandomWord()
+    // Safety: ensure random word is not the target
+    while (pred === data.target) {
+      pred = getRandomWord()
+    }
+  } else {
+    pred = data.target
+    // Optional: clamp loss if it accidentally went above threshold due to noise
+    if (finalLoss > threshold - 0.01) finalLoss = threshold - 0.01
+  }
+
   currentLoss.value = finalLoss
   currentPrediction.value = pred
   lossHistory.value.push(finalLoss)
   seedOpacities()
-  
+
   trainingLogs.value.unshift({
     step: i,
     loss: finalLoss,
@@ -460,7 +626,7 @@ const handleTrainClick = () => {
     pred: pred,
     target: data.target
   })
-  
+
   if (trainingLogs.value.length > 5) trainingLogs.value.pop()
 }
 
@@ -471,20 +637,31 @@ const trainButtonText = computed(() => {
 })
 
 const getRandomWord = () => {
-  const words = ['cat', 'fly', 'run', 'red', 'table', 'what', 'bad', '未知', '乱码', '错误']
+  const words = [
+    'cat',
+    'fly',
+    'run',
+    'red',
+    'table',
+    'what',
+    'bad',
+    '未知',
+    '乱码',
+    '错误'
+  ]
   return words[Math.floor(Math.random() * words.length)]
 }
 
 const lossPolylinePoints = computed(() => {
   if (lossHistory.value.length === 0) return ''
-  
+
   // SVG Coordinate System (0,0 is top-left)
   // Chart Area: x=20 to 290, y=10 to 130
   const startX = 20
   const endX = 290
   const startY = 130 // Bottom (Loss = 0)
-  const endY = 10    // Top (Loss = maxLoss)
-  
+  const endY = 10 // Top (Loss = maxLoss)
+
   const width = endX - startX
   const height = startY - endY
   const maxLoss = 3.5
@@ -499,18 +676,20 @@ const lossPolylinePoints = computed(() => {
   // So we map index 0 to step 1, index N to step N+1
   // To keep the chart stable (points appearing from left to right),
   // we should map based on totalSteps
-  
-  return lossHistory.value.map((loss, idx) => {
-    // idx 0 corresponds to Step 1
-    // We want Step 1 to be at x=0? Or spread out?
-    // Let's spread out based on current progress or fixed totalSteps?
-    // Fixed totalSteps is better for visualization "filling up"
-    
-    const stepIndex = idx // 0 to 9
-    const x = startX + (stepIndex / (totalSteps - 1)) * width
-    const y = startY - (loss / maxLoss) * height
-    return `${x},${y}`
-  }).join(' ')
+
+  return lossHistory.value
+    .map((loss, idx) => {
+      // idx 0 corresponds to Step 1
+      // We want Step 1 to be at x=0? Or spread out?
+      // Let's spread out based on current progress or fixed totalSteps?
+      // Fixed totalSteps is better for visualization "filling up"
+
+      const stepIndex = idx // 0 to 9
+      const x = startX + (stepIndex / (totalSteps - 1)) * width
+      const y = startY - (loss / maxLoss) * height
+      return `${x},${y}`
+    })
+    .join(' ')
 })
 
 const getLossColor = (loss) => {
@@ -523,7 +702,6 @@ seedOpacities()
 
 // Tab 4 Logic
 const alignmentState = ref('base')
-
 </script>
 
 <style scoped>
@@ -633,7 +811,8 @@ const alignmentState = ref('base')
   align-items: stretch;
 }
 
-.chat-ui-half, .model-view-half {
+.chat-ui-half,
+.model-view-half {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -717,9 +896,15 @@ const alignmentState = ref('base')
   max-height: 300px;
 }
 
-.sys-tag { color: #569cd6; }
-.user-tag { color: #ce9178; }
-.bot-tag { color: #4ec9b0; }
+.sys-tag {
+  color: #569cd6;
+}
+.user-tag {
+  color: #ce9178;
+}
+.bot-tag {
+  color: #4ec9b0;
+}
 
 /* Tab 3 Styles (New) */
 .training-dashboard {
@@ -815,7 +1000,7 @@ const alignmentState = ref('base')
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
 }
 
 .content-box.input.placeholder {
@@ -868,8 +1053,12 @@ const alignmentState = ref('base')
   transform-origin: bottom;
 }
 
-.matrix-cell.pred-cell { background-color: #f59e0b; }
-.matrix-cell.target-cell { background-color: #10b981; }
+.matrix-cell.pred-cell {
+  background-color: #f59e0b;
+}
+.matrix-cell.target-cell {
+  background-color: #10b981;
+}
 
 /* Arrows */
 .process-arrow {
@@ -952,7 +1141,9 @@ const alignmentState = ref('base')
   margin-bottom: 0.8rem;
 }
 
-.stage-header .stage-label { margin-bottom: 0; }
+.stage-header .stage-label {
+  margin-bottom: 0;
+}
 
 .loss-val-badge {
   font-size: 0.75rem;
@@ -981,7 +1172,9 @@ const alignmentState = ref('base')
 .loss-bar-fill {
   height: 100%;
   border-radius: 6px;
-  transition: width 0.4s ease, background-color 0.3s;
+  transition:
+    width 0.4s ease,
+    background-color 0.3s;
 }
 
 .loss-feedback {
@@ -993,8 +1186,14 @@ const alignmentState = ref('base')
   background: var(--vp-c-bg-soft);
 }
 
-.loss-feedback.success { color: #10b981; background: rgba(16, 185, 129, 0.1); }
-.loss-feedback.error { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
+.loss-feedback.success {
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+.loss-feedback.error {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
 
 /* Chart & Logs */
 .chart-container {
@@ -1027,7 +1226,7 @@ const alignmentState = ref('base')
   background: #1e1e1e;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 .console-header {
@@ -1044,10 +1243,20 @@ const alignmentState = ref('base')
   margin-right: 12px;
 }
 
-.dot { width: 10px; height: 10px; border-radius: 50%; }
-.dot.red { background: #ff5f56; }
-.dot.yellow { background: #ffbd2e; }
-.dot.green { background: #27c93f; }
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.dot.red {
+  background: #ff5f56;
+}
+.dot.yellow {
+  background: #ffbd2e;
+}
+.dot.green {
+  background: #27c93f;
+}
 
 .console-title {
   color: #888;
@@ -1079,11 +1288,28 @@ const alignmentState = ref('base')
   gap: 8px;
 }
 
-.log-step { color: #569cd6; flex-shrink: 0; }
-.log-loss { font-weight: bold; flex-shrink: 0; }
-.log-detail { color: #9cdcfe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.text-green { color: #4ec9b0; font-weight: bold; }
-.text-red { color: #ce9178; font-weight: bold; }
+.log-step {
+  color: #569cd6;
+  flex-shrink: 0;
+}
+.log-loss {
+  font-weight: bold;
+  flex-shrink: 0;
+}
+.log-detail {
+  color: #9cdcfe;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.text-green {
+  color: #4ec9b0;
+  font-weight: bold;
+}
+.text-red {
+  color: #ce9178;
+  font-weight: bold;
+}
 
 /* Action Bar */
 .action-bar {
@@ -1223,40 +1449,40 @@ const alignmentState = ref('base')
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
-}
+  }
 
-button {
-  cursor: pointer;
-  padding: 6px 12px;
-  background-color: var(--vp-c-brand);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-weight: 600;
-  transition: background-color 0.2s;
-}
+  button {
+    cursor: pointer;
+    padding: 6px 12px;
+    background-color: var(--vp-c-brand);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-weight: 600;
+    transition: background-color 0.2s;
+  }
 
-button:hover:not(:disabled) {
-  background-color: var(--vp-c-brand-dark);
-}
+  button:hover:not(:disabled) {
+    background-color: var(--vp-c-brand-dark);
+  }
 
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.primary-btn {
-  padding: 8px 20px;
-  font-size: 1rem;
-  box-shadow: 0 2px 8px rgba(var(--vp-c-brand-rgb), 0.25);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
+  .primary-btn {
+    padding: 8px 20px;
+    font-size: 1rem;
+    box-shadow: 0 2px 8px rgba(var(--vp-c-brand-rgb), 0.25);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
 
-.primary-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.35);
-}
+  .primary-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.35);
+  }
 }
 </style>