test-repo/docs/.vitepress/theme/components/appendix/llm-intro/EmbeddingDemo.vue

<!--
  EmbeddingDemo.vue
  词向量空间可视化演示
  
  用途：
  直观展示“词向量”的概念：将词映射到坐标空间中，距离代表相似度。
  展示经典的向量算术：King - Man + Woman ≈ Queen
  
  交互功能：
  - 2D 坐标系展示：预置几组词向量（动物、国家、职业）。
  - 算术演示：用户点击“King - Man + Woman”按钮，动画展示向量移动过程。
  - 缩放/平移：简单的视图控制。
-->
<template>
  <div class="embedding-demo">
    <div class="demo-controls">
      <div class="btn-group">
        <button
          v-for="mode in modes"
          :key="mode.id"
          :class="{ active: currentMode === mode.id }"
          @click="setMode(mode.id)"
        >
          {{ mode.label }}
        </button>
      </div>
      <div class="info-text">
        {{ modes.find((m) => m.id === currentMode)?.desc }}
      </div>
    </div>

    <div class="canvas-container" ref="canvasContainer">
      <!-- 简单的 SVG 坐标系 -->
      <svg viewBox="0 0 400 300" class="vector-canvas">
        <!-- Grid lines -->
        <g class="grid">
          <line
            x1="0"
            y1="150"
            x2="400"
            y2="150"
            stroke="var(--vp-c-divider)"
          />
          <line
            x1="200"
            y1="0"
            x2="200"
            y2="300"
            stroke="var(--vp-c-divider)"
          />
        </g>

        <!-- Vectors/Points -->
        <g class="points">
          <g
            v-for="point in activePoints"
            :key="point.id"
            class="point-group"
            :class="{ highlight: point.highlight }"
            :transform="`translate(${point.x}, ${point.y})`"
          >
            <circle r="4" :fill="point.color" />
            <text
              y="-8"
              text-anchor="middle"
              class="point-label"
              :fill="point.color"
            >
              {{ point.word }}
            </text>
          </g>
        </g>

        <!-- Calculation Arrows (for King/Queen demo) -->
        <g v-if="currentMode === 'analogy'" class="arrows">
          <!-- King -> Man -->
          <line
            :x1="getPoint('king').x"
            :y1="getPoint('king').y"
            :x2="getPoint('man').x"
            :y2="getPoint('man').y"
            stroke="rgba(0,0,0,0.2)"
            stroke-dasharray="4"
            marker-end="url(#arrowhead)"
          />
          <!-- Queen -> Woman -->
          <line
            :x1="getPoint('queen').x"
            :y1="getPoint('queen').y"
            :x2="getPoint('woman').x"
            :y2="getPoint('woman').y"
            stroke="var(--vp-c-brand)"
            stroke-width="2"
            marker-end="url(#arrowhead-brand)"
          />
          <text
            x="390"
            y="280"
            text-anchor="end"
            class="math-label"
            fill="var(--vp-c-text-2)"
          >
            King - Man ≈ Queen - Woman
          </text>
        </g>

        <defs>
          <marker
            id="arrowhead"
            markerWidth="10"
            markerHeight="7"
            refX="9"
            refY="3.5"
            orient="auto"
          >
            <polygon points="0 0, 10 3.5, 0 7" fill="rgba(0,0,0,0.2)" />
          </marker>
          <marker
            id="arrowhead-brand"
            markerWidth="10"
            markerHeight="7"
            refX="9"
            refY="3.5"
            orient="auto"
          >
            <polygon points="0 0, 10 3.5, 0 7" fill="var(--vp-c-brand)" />
          </marker>
        </defs>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentMode = ref('cluster')

const modes = [
  { id: 'cluster', label: '语义聚类', desc: '语义相近的词在空间中距离更近。' },
  {
    id: 'analogy',
    label: '向量算术',
    desc: 'King - Man + Woman ≈ Queen (方向平行)'
  }
]

const basePoints = [
  // Cluster 1: Animals
  { id: 'cat', word: 'Cat', x: 80, y: 80, color: '#f87171', group: 'animal' },
  { id: 'dog', word: 'Dog', x: 100, y: 70, color: '#f87171', group: 'animal' },
  {
    id: 'tiger',
    word: 'Tiger',
    x: 60,
    y: 100,
    color: '#f87171',
    group: 'animal'
  },

  // Cluster 2: Technology
  {
    id: 'computer',
    word: 'Computer',
    x: 300,
    y: 200,
    color: '#60a5fa',
    group: 'tech'
  },
  {
    id: 'phone',
    word: 'Phone',
    x: 320,
    y: 220,
    color: '#60a5fa',
    group: 'tech'
  },
  { id: 'ai', word: 'AI', x: 280, y: 210, color: '#60a5fa', group: 'tech' },

  // Cluster 3: Royalty (Analogy)
  {
    id: 'king',
    word: 'King',
    x: 100,
    y: 200,
    color: '#fbbf24',
    group: 'royal'
  },
  {
    id: 'queen',
    word: 'Queen',
    x: 220,
    y: 200,
    color: '#fbbf24',
    group: 'royal'
  },
  { id: 'man', word: 'Man', x: 100, y: 120, color: '#a78bfa', group: 'gender' },
  {
    id: 'woman',
    word: 'Woman',
    x: 220,
    y: 120,
    color: '#a78bfa',
    group: 'gender'
  }
]

const activePoints = computed(() => {
  if (currentMode.value === 'cluster') {
    return basePoints.filter((p) => ['animal', 'tech'].includes(p.group))
  } else {
    return basePoints.filter((p) => ['royal', 'gender'].includes(p.group))
  }
})

const getPoint = (id) => basePoints.find((p) => p.id === id) || { x: 0, y: 0 }

const setMode = (mode) => {
  currentMode.value = mode
}
</script>

<style scoped>
.embedding-demo {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background-color: var(--vp-c-bg-soft);
  margin: 1rem 0;
  font-family: var(--vp-font-family-mono);
}

.demo-controls {
  padding: 1rem;
  border-bottom: 1px solid var(--vp-c-divider);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
}

button {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--vp-c-divider);
  background-color: var(--vp-c-bg);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

button.active {
  background-color: var(--vp-c-brand);
  color: white;
  border-color: var(--vp-c-brand);
}

.info-text {
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
}

.canvas-container {
  padding: 1rem;
  background-color: var(--vp-c-bg);
  display: flex;
  justify-content: center;
}

.vector-canvas {
  width: 100%;
  max-width: 400px;
  height: 300px;
  border: 1px dashed var(--vp-c-divider);
  border-radius: 4px;
}

.point-label {
  font-size: 12px;
  font-weight: 500;
}

.math-label {
  font-size: 12px;
  font-style: italic;
}

.point-group {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
</style>