《60天AI学习计划启动 | Day 49: Embedding 可视化（降维 + 散点 / 聚类展示）》

Day 49：Embedding 可视化（降维 + 散点 / 聚类展示）

学习目标

• 理解 Embedding 在前端可视化的基本思路（高维 → 2D）
• 设计 简单的数据结构承载降维后的点（x,y,label,meta）
• 实现 一个迷你“Embedding 散点图”组件（可直接用 demo 数据）

---

核心知识点

• 高维向量（如 1536 维）需在后端或脚本中先做降维（PCA/TSNE/UMAP），前端只接收 2D：

  export interface EmbeddingPoint {
    id: string
    x: number   // 降维后的坐标 -1~1 或 0~1
    y: number
    label?: string
    cluster?: number
    meta?: Record<string, any>
  }
  

• 可视化方式：用 SVG/canvas/任意图表库画散点，颜色区分 cluster，悬浮显示 label/meta。

---

简单实战代码示例

// types.ts
export interface EmbeddingPoint {
  id: string
  x: number // 假设已经归一到 0~1
  y: number
  label?: string
  cluster?: number
}

// EmbeddingScatter.tsx
import React from 'react'
import type { EmbeddingPoint } from './types'

const COLORS = ['#2196f3','#4caf50','#ff9800','#e91e63','#9c27b0']

interface Props {
  points: EmbeddingPoint[]
  width?: number
  height?: number
}

export const EmbeddingScatter: React.FC<Props> = ({
  points,
  width = 400,
  height = 300
}) => {
  return (
    <svg width={width} height={height} style={{ border:'1px solid #eee' }}>
      {points.map(p => {
        const cx = p.x * width
        const cy = (1 - p.y) * height     // y 轴翻转一下
        const color = p.cluster != null
          ? COLORS[p.cluster % COLORS.length]
          : '#607d8b'
        return (
          <g key={p.id}>
            <circle cx={cx} cy={cy} r={4} fill={color} opacity={0.8} />
            {p.label && (
              <text
                x={cx + 6}
                y={cy + 4}
                fontSize={10}
                fill="#555"
              >
                {p.label}
              </text>
            )}
          </g>
        )
      })}
    </svg>
  )
}

后端只需返回一组 {id,x,y,label,cluster}，前端即可直接渲染；
想要交互（点击高亮 / 显示详情）再给 <g> 加 onClick 即可。

---

明日学习计划预告（Day 50）

• 主题：知识中心页面（搜索 + 文档 + QA 一体化）
• 方向：
  • 设计一个“左侧搜索/筛选 + 右侧文档 + 底部 QA”的布局
  • 思考如何在一个页面里结合：全文搜索 / RAG 问答 / 文档预览