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/vlm-intro/AttentionDemo.vue

@@ -3,11 +3,11 @@
     <div class="controls">
       <span class="hint">🖱️ 把鼠标悬停在方块上，查看它的“注意力”分配</span>
     </div>
-    
+
     <div class="visual-area">
       <div class="image-grid" @mouseleave="hoverIndex = -1">
-        <div 
-          v-for="(item, index) in items" 
+        <div
+          v-for="(item, index) in items"
           :key="index"
           class="grid-cell"
           :class="{ active: hoverIndex === index }"
@@ -16,16 +16,16 @@
           {{ item.icon }}
           <div class="cell-label">{{ item.label }}</div>
         </div>
-        
+
         <!-- SVG Overlay for lines -->
         <svg class="connections" v-if="hoverIndex !== -1">
-          <line 
-            v-for="(target, tIndex) in items" 
+          <line
+            v-for="(target, tIndex) in items"
             :key="tIndex"
             v-if="tIndex !== hoverIndex"
-            :x1="getCenter(hoverIndex).x" 
+            :x1="getCenter(hoverIndex).x"
             :y1="getCenter(hoverIndex).y"
-            :x2="getCenter(tIndex).x" 
+            :x2="getCenter(tIndex).x"
             :y2="getCenter(tIndex).y"
             :stroke="getAttentionColor(hoverIndex, tIndex)"
             :stroke-width="getAttentionWidth(hoverIndex, tIndex)"
@@ -33,16 +33,22 @@
           />
         </svg>
       </div>
-      
+
       <div class="info-panel" :class="{ visible: hoverIndex !== -1 }">
         <div class="info-title">Patch: {{ items[hoverIndex]?.label }}</div>
         <div class="info-desc">正在关注：</div>
         <ul class="attn-list" v-if="hoverIndex !== -1">
-          <li v-for="(weight, targetIdx) in getTopAttentions(hoverIndex)" :key="targetIdx">
+          <li
+            v-for="(weight, targetIdx) in getTopAttentions(hoverIndex)"
+            :key="targetIdx"
+          >
             <span class="target-icon">{{ items[targetIdx].icon }}</span>
             <span class="target-name">{{ items[targetIdx].label }}</span>
             <div class="bar-bg">
-              <div class="bar-fill" :style="{ width: (weight * 100) + '%' }"></div>
+              <div
+                class="bar-fill"
+                :style="{ width: weight * 100 + '%' }"
+              ></div>
             </div>
           </li>
         </ul>
@@ -57,9 +63,15 @@ import { ref } from 'vue'
 const hoverIndex = ref(-1)
 
 const items = [
-  { icon: '🌲', label: '背景' }, { icon: '🌲', label: '背景' }, { icon: '☁️', label: '天空' },
-  { icon: '👂', label: '猫耳' }, { icon: '😼', label: '猫脸' }, { icon: '🌲', label: '背景' },
-  { icon: '🐾', label: '猫爪' }, { icon: '🧶', label: '毛线' }, { icon: '🌱', label: '草地' }
+  { icon: '🌲', label: '背景' },
+  { icon: '🌲', label: '背景' },
+  { icon: '☁️', label: '天空' },
+  { icon: '👂', label: '猫耳' },
+  { icon: '😼', label: '猫脸' },
+  { icon: '🌲', label: '背景' },
+  { icon: '🐾', label: '猫爪' },
+  { icon: '🧶', label: '毛线' },
+  { icon: '🌱', label: '草地' }
 ]
 
 // 3x3 Grid
@@ -79,14 +91,14 @@ const getCenter = (index) => {
 // Mock attention weights
 const getAttentionWeight = (source, target) => {
   // Self attention is ignored for visualization clarity usually, but let's say:
-  
+
   // Cat parts (3, 4, 6) attend strongly to each other
   const catParts = [3, 4, 6]
   const isSourceCat = catParts.includes(source)
   const isTargetCat = catParts.includes(target)
 
   if (isSourceCat && isTargetCat) return 0.9 // Strong connection between cat parts
-  
+
   // Cat interacts with Yarn (7)
   if (isSourceCat && target === 7) return 0.7
   if (source === 7 && isTargetCat) return 0.7
@@ -94,7 +106,7 @@ const getAttentionWeight = (source, target) => {
   // Background parts attend to each other
   const bgParts = [0, 1, 2, 5, 8]
   if (bgParts.includes(source) && bgParts.includes(target)) return 0.5
-  
+
   return 0.1 // Weak attention otherwise
 }
 
@@ -175,10 +187,11 @@ const getTopAttentions = (source) => {
   position: relative;
 }
 
-.grid-cell:hover, .grid-cell.active {
+.grid-cell:hover,
+.grid-cell.active {
   border-color: var(--vp-c-brand);
   transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   background: var(--vp-c-bg-mute);
 }