feat: add AI and Backend evolution history with interactive demos, and refine Frontend evolution demo

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

@@ -6,67 +6,137 @@
   <div class="patchify-demo">
     <div class="control-panel">
       <div class="controls">
-        <button class="action-btn" @click="toggleState">
-          {{ isPatchified ? '还原图片 (Restore)' : '切分图片 (Patchify)' }}
+        <button 
+          class="action-btn" 
+          @click="prevStep" 
+          :disabled="currentStep === 0"
+        >
+          ⬅ 上一步 (Prev)
         </button>
-        <div class="info">
-          <span>Resolution: 224x224</span>
-          <span>Patch Size: 16x16</span>
-          <span>Total Patches: {{ 14 * 14 }}</span>
-        </div>
+        <span class="step-indicator">Step {{ currentStep + 1 }} / 4</span>
+        <button 
+          class="action-btn primary" 
+          @click="nextStep"
+          :disabled="currentStep === 3"
+        >
+          {{ currentStep === 3 ? '完成 (Done)' : '下一步 (Next) ➡' }}
+        </button>
+      </div>
+      <div class="step-desc">
+        {{ stepDescriptions[currentStep] }}
       </div>
     </div>
 
     <div class="visual-area">
       <!-- 原始/切分视图容器 -->
-      <div class="image-container" :class="{ 'is-patchified': isPatchified }">
+      <!-- 
+        Step 0: Show container background, cells hidden
+        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="{ 
+          'is-pixelated': currentStep >= 1,
+          'is-patchified': currentStep >= 2 
+        }"
+      >
+        <div class="grid-overlay" v-if="currentStep === 1"></div>
         <div
           v-for="n in 196"
           :key="n"
           class="patch"
-          :style="{
-            '--delay': `${n * 0.005}s`,
-            '--hue': `${(n % 14) * 20 + Math.floor(n / 14) * 20}`
-          }"
+          :style="getPatchStyle(n)"
         >
-          <span class="patch-id" v-if="isPatchified">{{ n }}</span>
+          <!-- Show number only in Pixelated stage to represent 'digitization' -->
+          <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>
       </div>
 
-      <div class="arrow" v-if="isPatchified">⬇</div>
+      <div class="arrow-down" v-if="currentStep >= 3">⬇</div>
 
       <!-- 线性序列视图 -->
-      <div class="sequence-container" v-if="isPatchified">
-        <div class="sequence-label">Flattened Sequence (Token Input)</div>
+      <div class="sequence-container" v-if="currentStep >= 3">
+        <div class="sequence-label">Token Sequence: 196×D (每个 Token 是 D 维向量)</div>
         <div class="token-stream">
           <div
             v-for="n in 196"
             :key="n"
             class="mini-patch"
-            :style="{ '--hue': `${(n % 14) * 20 + Math.floor(n / 14) * 20}` }"
+            :style="getMiniPatchStyle(n)"
           ></div>
         </div>
       </div>
     </div>
-
-    <div class="explanation">
-      <p>
-        <span class="icon">💡</span>
-        计算机将图片切成 <strong>14x14 = 196</strong> 个小方块（Patch）。
-        然后把这些方块“拉直”成一长串序列，就像把一段话里的单词排成一排一样。
-        这就是 <strong>Visual Tokenization</strong>。
-      </p>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const isPatchified = ref(false)
+const currentStep = ref(0)
 
-const toggleState = () => {
-  isPatchified.value = !isPatchified.value
+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 逐个读取。"
+]
+
+const nextStep = () => {
+  if (currentStep.value < 3) currentStep.value++
+}
+
+const prevStep = () => {
+  if (currentStep.value > 0) currentStep.value--
+}
+
+// 模拟一张风景图的 CSS 渐变
+// Sky (Blue) -> Mountains (Green/Grey) -> Sun (Yellow)
+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 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`,
+    backgroundSize: '280px 280px',
+    // In Step 0, patches are hidden to show pure container background
+    // In Step 1, patches are visible but transparent background to show numbers/borders over container background
+    // 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', 
+    transform: isPatchified ? 'scale(0.9)' : 'scale(1)',
+    transition: 'all 0.5s ease',
+  }
+}
+
+const getMiniPatchStyle = (n) => {
+  const row = Math.floor((n - 1) / 14)
+  const col = (n - 1) % 14
+  const posX = col * -20
+  const posY = row * -20
+  
+  return {
+    backgroundImage: complexBg,
+    backgroundPosition: `${posX}px ${posY}px`,
+    backgroundSize: '280px 280px',
+  }
 }
 </script>
 
@@ -77,40 +147,68 @@ const toggleState = () => {
   padding: 20px;
   background: var(--vp-c-bg-soft);
   margin: 20px 0;
+  user-select: none;
 }
 
 .control-panel {
   margin-bottom: 20px;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
 }
 
 .controls {
   display: flex;
-  gap: 20px;
+  gap: 15px;
   align-items: center;
 }
 
-.action-btn {
-  background: var(--vp-c-brand);
-  color: white;
-  border: none;
+.step-indicator {
+  font-family: monospace;
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+}
+
+.step-desc {
+  font-size: 0.9em;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  background: var(--vp-c-bg-mute);
   padding: 8px 16px;
   border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: opacity 0.2s;
-}
-
-.action-btn:hover {
-  opacity: 0.9;
-}
-
-.info {
+  min-height: 40px;
   display: flex;
-  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.action-btn {
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
   font-size: 0.9em;
-  color: var(--vp-c-text-2);
+}
+
+.action-btn.primary {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-btn:not(:disabled):hover {
+  opacity: 0.8;
+  transform: translateY(-1px);
 }
 
 .visual-area {
@@ -118,7 +216,7 @@ const toggleState = () => {
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  min-height: 300px;
+  min-height: 350px;
 }
 
 .image-container {
@@ -126,31 +224,55 @@ const toggleState = () => {
   grid-template-columns: repeat(14, 1fr);
   width: 280px;
   height: 280px;
-  gap: 0;
-  background: #333;
+  /* 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%);
+  position: relative;
   transition: all 0.5s ease;
-  border: 2px solid var(--vp-c-text-1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
+/* Step 2+: Remove container background, let patches show */
 .image-container.is-patchified {
+  background-image: none;
+  background-color: transparent;
   gap: 2px;
-  background: transparent;
-  border-color: transparent;
 }
 
 .patch {
-  background-color: hsl(var(--hue), 70%, 60%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 8px;
-  color: rgba(0, 0, 0, 0.5);
-  transition: all 0.5s ease;
+  color: rgba(255, 255, 255, 0.8);
+  position: relative;
 }
 
-.is-patchified .patch {
+/* Step 1: Pixelated Overlay Effect */
+.image-container.is-pixelated:not(.is-patchified) .patch {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* Use pseudo-element or just opacity logic in JS */
+}
+
+/* Step 1: Digitization numbers */
+.pixel-val {
+  font-family: monospace;
+  font-size: 8px;
+  color: rgba(0, 0, 0, 0.3);
+  mix-blend-mode: overlay;
+}
+
+.patch-id {
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 1px 2px;
   border-radius: 2px;
-  transform: scale(0.9);
+  font-size: 7px;
+}
+
+.arrow-down {
+  font-size: 24px;
+  color: var(--vp-c-text-2);
+  animation: bounce 1s infinite;
 }
 
 .sequence-container {
@@ -159,7 +281,7 @@ const toggleState = () => {
   padding: 15px;
   border-radius: 8px;
   border: 1px solid var(--vp-c-divider);
-  animation: fadeIn 0.5s ease;
+  animation: slideUp 0.5s ease;
 }
 
 .sequence-label {
@@ -171,50 +293,48 @@ const toggleState = () => {
 
 .token-stream {
   display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
+  flex-wrap: nowrap;
+  gap: 1px;
+  overflow-x: auto;
+  padding: 10px 5px; /* Space for brackets */
+  align-items: center;
+  position: relative;
+}
+
+/* Add Matrix Brackets */
+.token-stream::before,
+.token-stream::after {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 36px; /* Match vector height + padding */
+  border: 2px solid var(--vp-c-text-3);
+  flex-shrink: 0;
+}
+
+.token-stream::before {
+  border-right: none;
+}
+
+.token-stream::after {
+  border-left: none;
 }
 
 .mini-patch {
-  width: 10px;
-  height: 10px;
-  background-color: hsl(var(--hue), 70%, 60%);
+  width: 6px; /* Thinner to allow more density */
+  height: 32px; /* Taller to represent Vector Dimension D */
   border-radius: 1px;
-}
-
-.explanation {
-  margin-top: 20px;
-  padding: 12px;
-  background: var(--vp-c-bg-mute);
-  border-radius: 6px;
-  font-size: 0.9em;
-  line-height: 1.6;
-}
-
-.arrow {
-  font-size: 24px;
-  color: var(--vp-c-text-2);
-  animation: bounce 1s infinite;
+  flex-shrink: 0;
+  opacity: 0.9;
 }
 
 @keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(5px);
-  }
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(5px); }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>