LLM Visualization 高级特性

1. 3D可视化增强

1.1 沉浸式3D场景

使用WebGL和Three.js创建沉浸式可视化体验：

class Immersive3DVisualizer {
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;
  private controls: OrbitControls;
  
  constructor(container: HTMLElement) {
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0x0a0a1a);
    
    this.camera = new THREE.PerspectiveCamera(
      75,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
    );
    this.camera.position.set(0, 20, 50);
    
    this.renderer = new THREE.WebGLRenderer({ 
      antialias: true,
      alpha: true 
    });
    this.renderer.setSize(container.clientWidth, container.clientHeight);
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
    container.appendChild(this.renderer.domElement);
    
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.05;
    
    this.setupLighting();
    this.setupEnvironment();
  }
  
  private setupLighting() {
    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
    this.scene.add(ambientLight);
    
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 20, 10);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    this.scene.add(directionalLight);
    
    const pointLight = new THREE.PointLight(0x4ecdc4, 0.5, 100);
    pointLight.position.set(-10, 10, -10);
    this.scene.add(pointLight);
  }
  
  private setupEnvironment() {
    // 添加星空背景
    const starGeometry = new THREE.BufferGeometry();
    const starCount = 10000;
    const positions = new Float32Array(starCount * 3);
    
    for (let i = 0; i < starCount * 3; i += 3) {
      positions[i] = (Math.random() - 0.5) * 1000;
      positions[i + 1] = (Math.random() - 0.5) * 1000;
      positions[i + 2] = (Math.random() - 0.5) * 1000;
    }
    
    starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    const starMaterial = new THREE.PointsMaterial({
      color: 0xffffff,
      size: 0.5,
      transparent: true,
      opacity: 0.8
    });
    
    const stars = new THREE.Points(starGeometry, starMaterial);
    this.scene.add(stars);
    
    // 添加网格地面
    const gridHelper = new THREE.GridHelper(200, 50, 0x4ecdc4, 0x2c3e50);
    gridHelper.position.y = -10;
    this.scene.add(gridHelper);
  }
}

1.2 动态数据流可视化

展示数据在神经网络中的流动：

class DataFlowVisualizer {
  private flowParticles: FlowParticle[] = [];
  private flowPaths: THREE.Line[] = [];
  
  createFlowVisualization(layers: LayerInfo[]): THREE.Group {
    const group = new THREE.Group();
    
    // 创建层节点
    const layerNodes = this.createLayerNodes(layers);
    group.add(layerNodes);
    
    // 创建流动路径
    for (let i = 0; i < layers.length - 1; i++) {
      const path = this.createFlowPath(layers[i], layers[i + 1]);
      this.flowPaths.push(path);
      group.add(path);
    }
    
    // 创建流动粒子
    this.createFlowParticles(layers);
    
    return group;
  }
  
  private createFlowParticles(layers: LayerInfo[]) {
    for (let i = 0; i < layers.length - 1; i++) {
      const particleCount = 50;
      
      for (let j = 0; j < particleCount; j++) {
        const particle = new FlowParticle({
          startLayer: i,
          endLayer: i + 1,
          progress: Math.random(),
          speed: 0.005 + Math.random() * 0.005,
          color: this.getLayerColor(i)
        });
        
        this.flowParticles.push(particle);
        this.scene.add(particle.mesh);
      }
    }
  }
  
  animateFlow() {
    this.flowParticles.forEach(particle => {
      particle.progress += particle.speed;
      
      if (particle.progress >= 1) {
        particle.progress = 0;
      }
      
      this.updateParticlePosition(particle);
    });
  }
  
  private updateParticlePosition(particle: FlowParticle) {
    const start = this.getLayerPosition(particle.startLayer);
    const end = this.getLayerPosition(particle.endLayer);
    
    particle.mesh.position.lerpVectors(start, end, particle.progress);
  }
}

class FlowParticle {
  public mesh: THREE.Mesh;
  public progress: number;
  public speed: number;
  
  constructor(config: FlowParticleConfig) {
    const geometry = new THREE.SphereGeometry(0.2, 8, 8);
    const material = new THREE.MeshBasicMaterial({
      color: config.color,
      transparent: true,
      opacity: 0.8
    });
    
    this.mesh = new THREE.Mesh(geometry, material);
    this.progress = config.progress;
    this.speed = config.speed;
  }
}

1.3 VR/AR支持

实验性的VR和AR可视化支持：

class VRVisualizer {
  private renderer: THREE.WebGLRenderer;
  private vrSession: XRSession | null = null;
  
  async initVR() {
    if ('xr' in navigator) {
      const isSupported = await navigator.xr.isSessionSupported('immersive-vr');
      
      if (isSupported) {
        this.setupVRButton();
      }
    }
  }
  
  private setupVRButton() {
    const button = document.createElement('button');
    button.textContent = '进入VR模式';
    button.style.position = 'fixed';
    button.style.bottom = '20px';
    button.style.right = '20px';
    button.style.padding = '10px 20px';
    button.style.fontSize = '16px';
    button.style.zIndex = '1000';
    
    button.onclick = () => this.startVRSession();
    
    document.body.appendChild(button);
  }
  
  async startVRSession() {
    try {
      const session = await navigator.xr.requestSession('immersive-vr', {
        optionalFeatures: ['local-floor', 'bounded-floor']
      });
      
      this.vrSession = session;
      this.renderer.xr.enabled = true;
      this.renderer.xr.setSession(session);
      
      // 设置VR控制器
      this.setupVRControllers();
      
      // 开始渲染循环
      this.animate();
      
    } catch (error) {
      console.error('VR session failed:', error);
    }
  }
  
  private setupVRControllers() {
    const controller1 = this.renderer.xr.getController(0);
    const controller2 = this.renderer.xr.getController(1);
    
    this.scene.add(controller1);
    this.scene.add(controller2);
    
    // 添加控制器模型
    const controllerModel1 = this.createControllerModel();
    const controllerModel2 = this.createControllerModel();
    
    controller1.add(controllerModel1);
    controller2.add(controllerModel2);
    
    // 添加交互功能
    controller1.addEventListener('selectstart', (event) => {
      this.handleControllerInteraction(event);
    });
  }
  
  private createControllerModel(): THREE.Group {
    const group = new THREE.Group();
    
    const geometry = new THREE.CylinderGeometry(0.01, 0.02, 0.1, 8);
    const material = new THREE.MeshBasicMaterial({ color: 0x4ecdc4 });
    const mesh = new THREE.Mesh(geometry, material);
    
    group.add(mesh);
    
    return group;
  }
}

2. 自定义插件系统

2.1 插件架构

interface VisualizationPlugin {
  name: string;
  version: string;
  author: string;
  
  initialize(context: PluginContext): void;
  destroy(): void;
  
  registerVisualizations(registry: VisualizationRegistry): void;
  registerCommands(commandManager: CommandManager): void;
}

interface PluginContext {
  scene: THREE.Scene;
  camera: THREE.PerspectiveCamera;
  renderer: THREE.WebGLRenderer;
  eventBus: EventBus;
  api: PluginAPI;
}

class PluginManager {
  private plugins: Map<string, VisualizationPlugin> = new Map();
  private context: PluginContext;
  
  constructor(context: PluginContext) {
    this.context = context;
  }
  
  async loadPlugin(pluginPath: string): Promise<void> {
    const pluginModule = await import(pluginPath);
    const plugin = new pluginModule.default() as VisualizationPlugin;
    
    // 初始化插件
    plugin.initialize(this.context);
    
    // 注册插件
    this.plugins.set(plugin.name, plugin);
    
    console.log(`Plugin "${plugin.name}" loaded successfully`);
  }
  
  unloadPlugin(pluginName: string): void {
    const plugin = this.plugins.get(pluginName);
    if (plugin) {
      plugin.destroy();
      this.plugins.delete(pluginName);
      console.log(`Plugin "${pluginName}" unloaded`);
    }
  }
  
  getPlugin(pluginName: string): VisualizationPlugin | undefined {
    return this.plugins.get(pluginName);
  }
  
  getAllPlugins(): VisualizationPlugin[] {
    return Array.from(this.plugins.values());
  }
}

2.2 自定义可视化插件示例

// custom-attention-plugin.ts
export default class CustomAttentionPlugin implements VisualizationPlugin {
  name = 'custom-attention';
  version = '1.0.0';
  author = 'Your Name';
  
  private context: PluginContext;
  private visualizations: Map<string, THREE.Object3D> = new Map();
  
  initialize(context: PluginContext): void {
    this.context = context;
    console.log('Custom Attention Plugin initialized');
  }
  
  destroy(): void {
    this.visualizations.forEach(viz => {
      this.context.scene.remove(viz);
    });
    this.visualizations.clear();
  }
  
  registerVisualizations(registry: VisualizationRegistry): void {
    registry.register('custom-heatmap', this.createCustomHeatmap.bind(this));
    registry.register('custom-network', this.createCustomNetwork.bind(this));
  }
  
  registerCommands(commandManager: CommandManager): void {
    commandManager.register('show-custom-heatmap', (params) => {
      this.showCustomHeatmap(params);
    });
  }
  
  private createCustomHeatmap(data: AttentionData): THREE.Object3D {
    const group = new THREE.Group();
    
    // 创建3D热力图
    const geometry = new THREE.PlaneGeometry(10, 10, data.size, data.size);
    const material = new THREE.ShaderMaterial({
      uniforms: {
        data: { value: data.weights },
        size: { value: data.size }
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform float data[${MAX_SIZE}];
        uniform int size;
        varying vec2 vUv;
        
        void main() {
          int x = int(vUv.x * float(size));
          int y = int(vUv.y * float(size));
          int index = y * size + x;
          
          float weight = data[index];
          vec3 color = heatmapColor(weight);
          
          gl_FragColor = vec4(color, 0.8);
        }
        
        vec3 heatmapColor(float t) {
          return mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), t);
        }
      `
    });
    
    const mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);
    
    this.visualizations.set('custom-heatmap', group);
    return group;
  }
  
  private createCustomNetwork(data: NetworkData): THREE.Object3D {
    const group = new THREE.Group();
    
    // 创建节点
    const nodes = data.nodes.map(node => {
      const geometry = new THREE.SphereGeometry(0.5, 32, 32);
      const material = new THREE.MeshPhongMaterial({
        color: node.color,
        transparent: true,
        opacity: 0.8
      });
      
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.set(node.x, node.y, node.z);
      
      return mesh;
    });
    
    nodes.forEach(node => group.add(node));
    
    // 创建连接
    data.connections.forEach(conn => {
      const start = nodes[conn.from];
      const end = nodes[conn.to];
      
      const geometry = new THREE.BufferGeometry().setFromPoints([
        start.position,
        end.position
      ]);
      
      const material = new THREE.LineBasicMaterial({
        color: conn.color,
        transparent: true,
        opacity: conn.weight * 0.8
      });
      
      const line = new THREE.Line(geometry, material);
      group.add(line);
    });
    
    this.visualizations.set('custom-network', group);
    return group;
  }
  
  private showCustomHeatmap(params: any): void {
    const viz = this.visualizations.get('custom-heatmap');
    if (viz) {
      this.context.scene.add(viz);
    }
  }
}

2.3 插件开发指南

// plugin-template.ts
export default class TemplatePlugin implements VisualizationPlugin {
  name = 'plugin-name';
  version = '1.0.0';
  author = 'Your Name';
  
  private context: PluginContext;
  
  initialize(context: PluginContext): void {
    this.context = context;
    
    // 订阅事件
    this.context.eventBus.on('model-loaded', this.onModelLoaded.bind(this));
    this.context.eventBus.on('inference-start', this.onInferenceStart.bind(this));
  }
  
  destroy(): void {
    // 清理资源
    this.context.eventBus.off('model-loaded', this.onModelLoaded.bind(this));
    this.context.eventBus.off('inference-start', this.onInferenceStart.bind(this));
  }
  
  registerVisualizations(registry: VisualizationRegistry): void {
    // 注册自定义可视化
    registry.register('my-visualization', this.createVisualization.bind(this));
  }
  
  registerCommands(commandManager: CommandManager): void {
    // 注册自定义命令
    commandManager.register('my-command', (params) => {
      this.executeCommand(params);
    });
  }
  
  private createVisualization(data: any): THREE.Object3D {
    // 创建可视化对象
    const group = new THREE.Group();
    
    // 添加你的可视化逻辑
    
    return group;
  }
  
  private executeCommand(params: any): void {
    // 执行命令逻辑
  }
  
  private onModelLoaded(event: any): void {
    // 处理模型加载事件
  }
  
  private onInferenceStart(event: any): void {
    // 处理推理开始事件
  }
}

3. 多模型对比

3.1 并行可视化

同时可视化多个模型的注意力模式：

class MultiModelComparator {
  private models: Map<string, ModelInstance> = new Map();
  private comparisonView: THREE.Group;
  
  async loadModels(modelConfigs: ModelConfig[]): Promise<void> {
    for (const config of modelConfigs) {
      const model = await this.loadModel(config);
      this.models.set(config.name, model);
    }
  }
  
  async compareAttention(input: string): Promise<ComparisonResult> {
    const results: Map<string, AttentionData> = new Map();
    
    // 并行运行所有模型的推理
    const promises = Array.from(this.models.entries()).map(
      async ([name, model]) => {
        const attention = await model.runInference(input);
        results.set(name, attention);
      }
    );
    
    await Promise.all(promises);
    
    // 创建对比可视化
    const comparisonViz = this.createComparisonVisualization(results);
    
    // 计算相似度
    const similarities = this.calculateSimilarities(results);
    
    return {
      visualizations: comparisonViz,
      similarities,
      results: Array.from(results.entries())
    };
  }
  
  private createComparisonVisualization(
    results: Map<string, AttentionData>
  ): THREE.Group {
    const group = new THREE.Group();
    const modelNames = Array.from(results.keys());
    const spacing = 15;
    
    modelNames.forEach((name, index) => {
      const data = results.get(name)!;
      const viz = this.createAttentionVisualization(data);
      
      // 定位
      viz.position.x = (index - (modelNames.length - 1) / 2) * spacing;
      
      // 添加标签
      const label = this.createLabel(name);
      label.position.y = 8;
      viz.add(label);
      
      group.add(viz);
    });
    
    return group;
  }
  
  private calculateSimilarities(
    results: Map<string, AttentionData>
  ): SimilarityMatrix {
    const modelNames = Array.from(results.keys());
    const matrix: number[][] = [];
    
    for (let i = 0; i < modelNames.length; i++) {
      const row: number[] = [];
      for (let j = 0; j < modelNames.length; j++) {
        const similarity = this.cosineSimilarity(
          results.get(modelNames[i])!.weights,
          results.get(modelNames[j])!.weights
        );
        row.push(similarity);
      }
      matrix.push(row);
    }
    
    return {
      models: modelNames,
      matrix
    };
  }
}

3.2 差异高亮

突出显示模型之间的差异：

class DifferenceHighlighter {
  highlightDifferences(
    model1: AttentionData,
    model2: AttentionData
  ): DifferenceVisualization {
    const differences = this.calculateDifferences(model1, model2);
    
    const group = new THREE.Group();
    
    // 创建差异热力图
    const diffHeatmap = this.createDifferenceHeatmap(differences);
    group.add(diffHeatmap);
    
    // 标记显著差异
    const significantDiffs = this.filterSignificantDifferences(differences);
    significantDiffs.forEach(diff => {
      const marker = this.createDifferenceMarker(diff);
      group.add(marker);
    });
    
    // 添加图例
    const legend = this.createLegend();
    group.add(legend);
    
    return {
      visualization: group,
      differences,
      statistics: this.calculateStatistics(differences)
    };
  }
  
  private calculateDifferences(
    model1: AttentionData,
    model2: AttentionData
  ): DifferenceData[] {
    const differences: DifferenceData[] = [];
    
    for (let i = 0; i < model1.weights.length; i++) {
      for (let j = 0; j < model1.weights[i].length; j++) {
        const diff = Math.abs(model1.weights[i][j] - model2.weights[i][j]);
        
        differences.push({
          from: j,
          to: i,
          weight1: model1.weights[i][j],
          weight2: model2.weights[i][j],
          difference: diff,
          significance: this.calculateSignificance(diff)
        });
      }
    }
    
    return differences;
  }
  
  private createDifferenceMarker(diff: DifferenceData): THREE.Object3D {
    const group = new THREE.Group();
    
    // 创建标记点
    const geometry = new THREE.SphereGeometry(0.3, 16, 16);
    const material = new THREE.MeshBasicMaterial({
      color: diff.significance > 0.7 ? 0xff0000 : 0xffa500,
      transparent: true,
      opacity: 0.8
    });
    
    const marker = new THREE.Mesh(geometry, material);
    marker.position.set(diff.from * 2 - 5, diff.to * 2 - 5, 1);
    group.add(marker);
    
    // 添加脉冲动画
    const pulseGeometry = new THREE.RingGeometry(0.3, 0.4, 32);
    const pulseMaterial = new THREE.MeshBasicMaterial({
      color: diff.significance > 0.7 ? 0xff0000 : 0xffa500,
      transparent: true,
      opacity: 0.5,
      side: THREE.DoubleSide
    });
    
    const pulse = new THREE.Mesh(pulseGeometry, pulseMaterial);
    pulse.position.copy(marker.position);
    pulse.rotation.x = -Math.PI / 2;
    group.add(pulse);
    
    // 动画
    this.animatePulse(pulse);
    
    return group;
  }
}

3.3 性能对比

class PerformanceComparator {
  async comparePerformance(
    models: ModelInstance[],
    testCases: TestCase[]
  ): Promise<PerformanceReport> {
    const results: ModelPerformance[] = [];
    
    for (const model of models) {
      const performance = await this.measurePerformance(model, testCases);
      results.push(performance);
    }
    
    // 创建性能对比图表
    const charts = this.createPerformanceCharts(results);
    
    // 生成对比报告
    const report = this.generateReport(results);
    
    return {
      results,
      charts,
      report
    };
  }
  
  private async measurePerformance(
    model: ModelInstance,
    testCases: TestCase[]
  ): Promise<ModelPerformance> {
    const metrics: PerformanceMetric[] = [];
    
    for (const testCase of testCases) {
      const startTime = performance.now();
      
      // 运行推理
      const result = await model.runInference(testCase.input);
      
      const endTime = performance.now();
      const inferenceTime = endTime - startTime;
      
      // 计算内存使用
      const memoryUsage = this.getMemoryUsage();
      
      metrics.push({
        testCase: testCase.name,
        inferenceTime,
        memoryUsage,
        outputTokens: result.tokens.length,
        attentionComputeTime: result.attentionTime
      });
    }
    
    return {
      modelName: model.name,
      metrics,
      averageTime: this.calculateAverage(metrics, 'inferenceTime'),
      averageMemory: this.calculateAverage(metrics, 'memoryUsage')
    };
  }
  
  private createPerformanceCharts(results: ModelPerformance[]): Chart[] {
    const charts: Chart[] = [];
    
    // 推理时间对比
    const timeChart = {
      type: 'bar',
      data: {
        labels: results.map(r => r.modelName),
        datasets: [{
          label: '平均推理时间 (ms)',
          data: results.map(r => r.averageTime)
        }]
      }
    };
    charts.push(timeChart);
    
    // 内存使用对比
    const memoryChart = {
      type: 'bar',
      data: {
        labels: results.map(r => r.modelName),
        datasets: [{
          label: '平均内存使用 (MB)',
          data: results.map(r => r.averageMemory)
        }]
      }
    };
    charts.push(memoryChart);
    
    return charts;
  }
}

4. 实时协作

4.1 多用户会话

class CollaborationSession {
  private socket: WebSocket;
  private sessionId: string;
  private participants: Map<string, Participant> = new Map();
  
  constructor(serverUrl: string) {
    this.socket = new WebSocket(serverUrl);
    this.setupSocketHandlers();
  }
  
  async createSession(): Promise<string> {
    const response = await this.sendRequest({
      type: 'create_session',
      userId: this.getUserId()
    });
    
    this.sessionId = response.sessionId;
    return this.sessionId;
  }
  
  async joinSession(sessionId: string): Promise<void> {
    this.sessionId = sessionId;
    
    await this.sendRequest({
      type: 'join_session',
      sessionId,
      userId: this.getUserId()
    });
  }
  
  private setupSocketHandlers(): void {
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.handleMessage(message);
    };
  }
  
  private handleMessage(message: Message): void {
    switch (message.type) {
      case 'participant_joined':
        this.handleParticipantJoined(message);
        break;
      case 'participant_left':
        this.handleParticipantLeft(message);
        break;
      case 'state_update':
        this.handleStateUpdate(message);
        break;
      case 'cursor_update':
        this.handleCursorUpdate(message);
        break;
    }
  }
  
  broadcastState(state: VisualizationState): void {
    this.sendRequest({
      type: 'update_state',
      sessionId: this.sessionId,
      userId: this.getUserId(),
      state
    });
  }
  
  broadcastCursor(position: Vector3): void {
    this.sendRequest({
      type: 'update_cursor',
      sessionId: this.sessionId,
      userId: this.getUserId(),
      position
    });
  }
}

4.2 协作光标

class CollaborativeCursors {
  private cursors: Map<string, THREE.Object3D> = new Map();
  private session: CollaborationSession;
  
  constructor(session: CollaborationSession) {
    this.session = session;
    this.setupCursorTracking();
  }
  
  private setupCursorTracking(): void {
    // 跟踪本地光标
    document.addEventListener('mousemove', (event) => {
      const position = this.screenToWorld(event.clientX, event.clientY);
      this.session.broadcastCursor(position);
    });
    
    // 监听远程光标更新
    this.session.on('cursor_update', (message) => {
      this.updateRemoteCursor(message.userId, message.position);
    });
  }
  
  private updateRemoteCursor(userId: string, position: Vector3): void {
    let cursor = this.cursors.get(userId);
    
    if (!cursor) {
      cursor = this.createRemoteCursor(userId);
      this.cursors.set(userId, cursor);
      this.scene.add(cursor);
    }
    
    cursor.position.copy(position);
  }
  
  private createRemoteCursor(userId: string): THREE.Object3D {
    const group = new THREE.Group();
    
    // 创建光标形状
    const geometry = new THREE.ConeGeometry(0.2, 0.5, 4);
    const material = new THREE.MeshBasicMaterial({
      color: this.getUserColor(userId),
      transparent: true,
      opacity: 0.8
    });
    
    const cursor = new THREE.Mesh(geometry, material);
    cursor.rotation.x = Math.PI / 2;
    group.add(cursor);
    
    // 添加用户标签
    const label = this.createLabel(userId);
    label.position.y = 0.5;
    group.add(label);
    
    return group;
  }
  
  private getUserColor(userId: string): number {
    const hash = userId.split('').reduce((acc, char) => {
      return ((acc << 5) - acc) + char.charCodeAt(0);
    }, 0);
    
    const hue = Math.abs(hash % 360);
    return new THREE.Color(`hsl(${hue}, 70%, 50%)`).getHex();
  }
}

4.3 注释和标记

class AnnotationSystem {
  private annotations: Map<string, Annotation> = new Map();
  private session: CollaborationSession;
  
  constructor(session: CollaborationSession) {
    this.session = session;
    this.setupAnnotationHandlers();
  }
  
  createAnnotation(position: Vector3, content: string): string {
    const annotation: Annotation = {
      id: this.generateId(),
      position,
      content,
      author: this.getUserId(),
      timestamp: Date.now(),
      replies: []
    };
    
    this.annotations.set(annotation.id, annotation);
    
    // 创建可视化
    const viz = this.createAnnotationVisualization(annotation);
    this.scene.add(viz);
    
    // 广播给其他用户
    this.session.broadcastAnnotation(annotation);
    
    return annotation.id;
  }
  
  replyToAnnotation(annotationId: string, content: string): void {
    const annotation = this.annotations.get(annotationId);
    if (annotation) {
      const reply: Reply = {
        id: this.generateId(),
        content,
        author: this.getUserId(),
        timestamp: Date.now()
      };
      
      annotation.replies.push(reply);
      
      // 广播回复
      this.session.broadcastReply(annotationId, reply);
    }
  }
  
  private createAnnotationVisualization(annotation: Annotation): THREE.Object3D {
    const group = new THREE.Group();
    
    // 创建标记点
    const geometry = new THREE.SphereGeometry(0.3, 16, 16);
    const material = new THREE.MeshBasicMaterial({
      color: 0xff6b6b,
      transparent: true,
      opacity: 0.8
    });
    
    const marker = new THREE.Mesh(geometry, material);
    marker.position.copy(annotation.position);
    group.add(marker);
    
    // 创建标签
    const label = this.createLabel(annotation.content.substring(0, 20) + '...');
    label.position.y = 0.5;
    group.add(label);
    
    // 添加点击事件
    marker.userData = { annotationId: annotation.id };
    marker.addEventListener('click', () => {
      this.showAnnotationDetails(annotation);
    });
    
    return group;
  }
}

5. 高级分析工具

5.1 注意力模式聚类

class AttentionPatternClusterer {
  async clusterAttentionPatterns(
    attentionData: AttentionData[]
  ): Promise<ClusterResult[]> {
    // 提取特征
    const features = attentionData.map(data => this.extractFeatures(data));
    
    // 降维
    const reduced = await this.reduceDimension(features, 2);
    
    // 聚类
    const clusters = this.dbscan(reduced, 0.5, 5);
    
    // 分析每个聚类
    const results: ClusterResult[] = clusters.map((cluster, index) => ({
      id: index,
      size: cluster.length,
      center: this.calculateCentroid(cluster),
      pattern: this.classifyPattern(cluster),
      examples: cluster.slice(0, 5),
      statistics: this.calculateClusterStatistics(cluster)
    }));
    
    return results;
  }
  
  private extractFeatures(data: AttentionData): number[] {
    const features: number[] = [];
    
    // 计算注意力分布的统计特征
    features.push(this.calculateMean(data.weights));
    features.push(this.calculateVariance(data.weights));
    features.push(this.calculateSkewness(data.weights));
    features.push(this.calculateKurtosis(data.weights));
    
    // 计算注意力模式特征
    features.push(this.calculateDiagonalScore(data.weights));
    features.push(this.calculateVerticalScore(data.weights));
    features.push(this.calculateSparsity(data.weights));
    
    return features;
  }
  
  private dbscan(points: number[][], epsilon: number, minPts: number): number[][] {
    const visited = new Set<number>();
    const clusters: number[][] = [];
    const noise: number[] = [];
    
    for (let i = 0; i < points.length; i++) {
      if (visited.has(i)) continue;
      
      const neighbors = this.getNeighbors(points, i, epsilon);
      
      if (neighbors.length < minPts) {
        noise.push(i);
      } else {
        const cluster = this.expandCluster(
          points,
          i,
          neighbors,
          epsilon,
          minPts,
          visited
        );
        clusters.push(cluster);
      }
    }
    
    return clusters;
  }
}

5.2 因果关系分析

class CausalAnalysis {
  analyzeCausalRelationships(
    attentionData: AttentionData[],
    inputTokens: string[][]
  ): CausalGraph {
    const nodes: CausalNode[] = [];
    const edges: CausalEdge[] = [];
    
    // 创建节点
    const uniqueTokens = this.getUniqueTokens(inputTokens);
    uniqueTokens.forEach(token => {
      nodes.push({
        id: token,
        token,
        influence: 0
      });
    });
    
    // 分析因果关系
    for (let i = 0; i < attentionData.length; i++) {
      const data = attentionData[i];
      const tokens = inputTokens[i];
      
      for (let j = 0; j < data.weights.length; j++) {
        for (let k = 0; k < data.weights[j].length; k++) {
          const weight = data.weights[j][k];
          
          if (weight > 0.3) {
            const fromToken = tokens[k];
            const toToken = tokens[j];
            
            const edge = this.findOrCreateEdge(edges, fromToken, toToken);
            edge.weight += weight;
            edge.count += 1;
          }
        }
      }
    }
    
    // 计算节点影响力
    edges.forEach(edge => {
      const fromNode = nodes.find(n => n.id === edge.from);
      const toNode = nodes.find(n => n.id === edge.to);
      
      if (fromNode) fromNode.influence += edge.weight;
      if (toNode) toNode.influence += edge.weight;
    });
    
    return { nodes, edges };
  }
  
  visualizeCausalGraph(graph: CausalGraph): THREE.Group {
    const group = new THREE.Group();
    
    // 创建节点
    const nodeMap = new Map<string, THREE.Object3D>();
    graph.nodes.forEach(node => {
      const viz = this.createCausalNode(node);
      nodeMap.set(node.id, viz);
      group.add(viz);
    });
    
    // 创建边
    graph.edges.forEach(edge => {
      const fromViz = nodeMap.get(edge.from);
      const toViz = nodeMap.get(edge.to);
      
      if (fromViz && toViz) {
        const edgeViz = this.createCausalEdge(fromViz.position, toViz.position, edge);
        group.add(edgeViz);
      }
    });
    
    return group;
  }
}

5.3 异常检测

class AnomalyDetector {
  detectAttentionAnomalies(
    attentionData: AttentionData[],
    threshold: number = 2.0
  ): AnomalyReport {
    const anomalies: Anomaly[] = [];
    
    // 计算基准统计量
    const baseline = this.calculateBaseline(attentionData);
    
    // 检测异常
    attentionData.forEach((data, index) => {
      const metrics = this.calculateMetrics(data);
      
      // 检查每个指标是否异常
      for (const [key, value] of Object.entries(metrics)) {
        const baselineValue = baseline[key];
        const zScore = Math.abs((value - baselineValue.mean) / baselineValue.std);
        
        if (zScore > threshold) {
          anomalies.push({
            type: key,
            index,
            value,
            baseline: baselineValue,
            zScore,
            severity: this.calculateSeverity(zScore)
          });
        }
      }
    });
    
    return {
      anomalies,
      baseline,
      summary: this.generateSummary(anomalies)
    };
  }
  
  private calculateBaseline(data: AttentionData[]): BaselineMetrics {
    const metrics = data.map(d => this.calculateMetrics(d));
    
    const baseline: BaselineMetrics = {};
    
    for (const key of Object.keys(metrics[0])) {
      const values = metrics.map(m => m[key]);
      baseline[key] = {
        mean: this.mean(values),
        std: this.std(values),
        min: Math.min(...values),
        max: Math.max(...values)
      };
    }
    
    return baseline;
  }
  
  private calculateMetrics(data: AttentionData): Metrics {
    return {
      meanAttention: this.mean(data.weights.flat()),
      maxAttention: Math.max(...data.weights.flat()),
      sparsity: this.calculateSparsity(data.weights),
      entropy: this.calculateEntropy(data.weights),
      diagonalScore: this.calculateDiagonalScore(data.weights),
      concentration: this.calculateConcentration(data.weights)
    };
  }
}

下一步

掌握了高级特性后，让我们了解使用LLM Visualization的最佳实践。