@capyclaw/tool-host 0.1.0 → 0.1.1

package/src/optimizers/ppt-streaming-demo.mjs

@@ -1,192 +0,0 @@
-#!/usr/bin/env node
-/**
- * PPT 流式渲染演示
- * 模拟 AI 修改 PPT 的流式渲染效果
- */
-
-import { performance } from 'node:perf_hooks';
-
-// 模拟 WebSocket（简化版）
-class MockWebSocket {
-  constructor() {
-    this.messages = [];
-  }
-  
-  send(data) {
-    const message = JSON.parse(data);
-    this.messages.push(message);
-    
-    // 模拟前端立即渲染
-    if (message.type === 'optimistic_update') {
-      console.log(`    🎨 [前端] 立即渲染: ${message.operation}`);
-    } else if (message.type === 'operation_confirmed') {
-      console.log(`    ✓ [前端] 确认完成: ${message.operation}`);
-    }
-  }
-}
-
-// 简化的流式渲染器
-class StreamingRenderer {
-  constructor() {
-    this.ws = new MockWebSocket();
-  }
-
-  async streamEdit(operations, onProgress) {
-    const total = operations.length;
-    const startTime = performance.now();
-    let firstOpTime = 0;
-
-    console.log(`\n🎬 开始流式编辑 (${total} 个操作)\n`);
-
-    for (let i = 0; i < operations.length; i++) {
-      const operation = operations[i];
-      const opStartTime = performance.now();
-
-      // 1. 立即发送到前端（乐观更新）
-      this.ws.send(JSON.stringify({
-        type: 'optimistic_update',
-        operation: operation.type,
-        data: operation.data
-      }));
-
-      // 记录首次操作时间
-      if (i === 0) {
-        firstOpTime = performance.now() - startTime;
-      }
-
-      // 2. 异步执行实际操作
-      const executePromise = new Promise(resolve => {
-        setTimeout(() => {
-          this.ws.send(JSON.stringify({
-            type: 'operation_confirmed',
-            operation: operation.type,
-            success: true
-          }));
-          resolve();
-        }, Math.random() * 50 + 30); // 30-80ms
-      });
-
-      // 3. 立即反馈进度
-      if (onProgress) {
-        onProgress({
-          current: i + 1,
-          total,
-          operation: operation.type,
-          progress: ((i + 1) / total * 100).toFixed(0),
-          latency: performance.now() - opStartTime
-        });
-      }
-
-      // 4. 等待完成
-      await executePromise;
-
-      // 5. 小延迟让用户看清
-      if (i < operations.length - 1) {
-        await new Promise(r => setTimeout(r, 50));
-      }
-    }
-
-    const totalTime = performance.now() - startTime;
-    
-    return { totalTime, firstOpTime };
-  }
-}
-
-// 演示
-async function demo() {
-  console.log('╔══════════════════════════════════════════════════════════╗');
-  console.log('║  🎨 PPT 流式渲染演示                                      ║');
-  console.log('║  模拟 AI 修改 PPT 的实时渲染效果                          ║');
-  console.log('╚══════════════════════════════════════════════════════════╝\n');
-
-  // AI 生成的操作序列
-  const operations = [
-    { type: 'ppt_add_text', data: { text: '项目介绍', x: 100, y: 50 } },
-    { type: 'ppt_add_text', data: { text: '核心功能说明', x: 100, y: 150 } },
-    { type: 'ppt_add_shape', data: { shape: 'rect', x: 50, y: 250 } },
-    { type: 'ppt_add_shape', data: { shape: 'circle', x: 200, y: 250 } },
-    { type: 'ppt_add_chart', data: { type: 'bar' } },
-    { type: 'ppt_format_slide', data: { theme: 'modern' } },
-    { type: 'ppt_add_image', data: { url: 'logo.png' } },
-    { type: 'ppt_align_elements', data: { align: 'center' } },
-  ];
-
-  // ========================================
-  // 对比1: 传统方式
-  // ========================================
-  console.log('📊 方式1: 传统方式（一次性完成）\n');
-  console.log('  用户点击"生成PPT"...');
-  
-  const traditionalStart = performance.now();
-  
-  // 模拟等待
-  await new Promise(r => setTimeout(r, 2000));
-  console.log('  [等待中...] (无反馈)');
-  
-  await new Promise(r => setTimeout(r, 1000));
-  console.log('  [等待中...] (无反馈)');
-  
-  await new Promise(r => setTimeout(r, 1000));
-  console.log('  [等待中...] (无反馈)');
-  
-  const traditionalTime = performance.now() - traditionalStart;
-  console.log(`  ✅ 突然全部显示！`);
-  console.log(`  总耗时: ${traditionalTime.toFixed(0)}ms`);
-  console.log(`  用户感受: "好慢...是不是卡了？"\n`);
-
-  console.log('─'.repeat(60) + '\n');
-
-  // ========================================
-  // 对比2: 流式渲染
-  // ========================================
-  console.log('📊 方式2: 流式渲染（实时反馈）\n');
-  console.log('  用户点击"生成PPT"...\n');
-
-  const renderer = new StreamingRenderer();
-  const streamingStart = performance.now();
-
-  const result = await renderer.streamEdit(operations, (progress) => {
-    console.log(`  📍 进度: ${progress.progress}% - ${progress.operation}`);
-  });
-
-  console.log(`\n  ✅ 全部完成！`);
-  console.log(`  总耗时: ${result.totalTime.toFixed(0)}ms`);
-  console.log(`  首次反馈: ${result.firstOpTime.toFixed(0)}ms`);
-  console.log(`  用户感受: "好快！每一步都看得到！"\n`);
-
-  // ========================================
-  // 数据对比
-  // ========================================
-  console.log('═'.repeat(60));
-  console.log('📊 数据对比\n');
-
-  console.table([
-    {
-      方式: '传统方式',
-      首次反馈: '4000ms',
-      总耗时: traditionalTime.toFixed(0) + 'ms',
-      用户体验: '😞 很慢'
-    },
-    {
-      方式: '流式渲染',
-      首次反馈: result.firstOpTime.toFixed(0) + 'ms',
-      总耗时: result.totalTime.toFixed(0) + 'ms',
-      用户体验: '😊 很快'
-    }
-  ]);
-
-  const improvement = ((4000 - result.firstOpTime) / 4000 * 100).toFixed(1);
-  
-  console.log('\n🎯 关键改进:\n');
-  console.log(`  ✅ 首次反馈时间降低: ${improvement}%`);
-  console.log(`  ✅ 用户能看到每一步变化`);
-  console.log(`  ✅ 类似流式输出的体验`);
-  console.log(`  ✅ 不再担心"是否卡住"\n`);
-
-  console.log('═'.repeat(60));
-  console.log('\n💡 结论:\n');
-  console.log('  流式渲染让 AI 修改 PPT 的体验提升 10 倍！');
-  console.log('  用户从"等待"变成"观看"，心理感受完全不同！\n');
-}
-
-demo().catch(console.error);

package/src/optimizers/ppt-streaming-renderer.mjs

@@ -1,332 +0,0 @@
-/**
- * PPT 实时渲染优化器
- * 
- * 实现 AI 修改 PPT 时的流式渲染效果：
- * - 每一步修改立即反馈到界面
- * - 降低首次操作感知时间
- * - 类似流式输出的体验
- */
-
-export class PPTStreamingRenderer {
-  constructor(options = {}) {
-    this.wsUrl = options.wsUrl || 'ws://127.0.0.1:39311/ws';
-    this.ws = null;
-    this.connected = false;
-    this.pendingOperations = [];
-    this.operationQueue = [];
-    this.isProcessing = false;
-    
-    // 统计
-    this.stats = {
-      operations: 0,
-      streamedOps: 0,
-      avgLatency: 0,
-      firstOpTime: 0
-    };
-  }
-
-  /**
-   * 连接 WebSocket
-   */
-  async connect() {
-    return new Promise((resolve, reject) => {
-      try {
-        this.ws = new WebSocket(this.wsUrl);
-        
-        this.ws.onopen = () => {
-          console.log('✅ PPT WebSocket 已连接');
-          this.connected = true;
-          resolve();
-        };
-        
-        this.ws.onerror = (error) => {
-          console.error('❌ WebSocket 连接失败:', error);
-          reject(error);
-        };
-        
-        this.ws.onmessage = (event) => {
-          this._handleMessage(event.data);
-        };
-        
-        this.ws.onclose = () => {
-          console.log('🔌 WebSocket 已断开');
-          this.connected = false;
-        };
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 流式编辑 PPT
-   * 
-   * @param {Array} operations - 操作列表
-   * @param {Function} onProgress - 进度回调
-   * 
-   * @example
-   * await renderer.streamEdit([
-   *   { type: 'add_text', data: { text: '标题', ... } },
-   *   { type: 'add_shape', data: { shape: 'rect', ... } },
-   *   { type: 'format', data: { ... } }
-   * ], (progress) => {
-   *   console.log(`进度: ${progress.current}/${progress.total}`);
-   *   console.log(`当前操作: ${progress.operation}`);
-   * });
-   */
-  async streamEdit(operations, onProgress) {
-    if (!this.connected) {
-      await this.connect();
-    }
-
-    const total = operations.length;
-    const startTime = Date.now();
-    let firstOpCompleted = false;
-
-    console.log(`\n🎨 开始流式编辑 PPT (${total} 个操作)\n`);
-
-    for (let i = 0; i < operations.length; i++) {
-      const operation = operations[i];
-      const opStartTime = Date.now();
-
-      // 1. 立即发送到界面（乐观更新）
-      this._optimisticUpdate(operation);
-
-      // 2. 异步执行实际操作
-      const promise = this._executeOperation(operation);
-
-      // 3. 立即反馈进度（不等待完成）
-      if (onProgress) {
-        onProgress({
-          current: i + 1,
-          total: total,
-          operation: operation.type,
-          progress: ((i + 1) / total * 100).toFixed(1),
-          status: 'processing',
-          latency: Date.now() - opStartTime
-        });
-      }
-
-      // 4. 记录首次操作时间
-      if (!firstOpCompleted) {
-        this.stats.firstOpTime = Date.now() - startTime;
-        firstOpCompleted = true;
-        console.log(`  ⚡ 首次操作反馈: ${this.stats.firstOpTime}ms`);
-      }
-
-      // 5. 等待操作完成（但用户已经看到变化）
-      try {
-        await promise;
-        console.log(`  ✓ ${operation.type} 完成 (${Date.now() - opStartTime}ms)`);
-      } catch (error) {
-        console.log(`  ✗ ${operation.type} 失败:`, error.message);
-        // 回滚乐观更新
-        this._rollbackUpdate(operation);
-      }
-
-      // 6. 小延迟让用户看清每一步
-      if (i < operations.length - 1) {
-        await new Promise(resolve => setTimeout(resolve, 100));
-      }
-    }
-
-    const totalTime = Date.now() - startTime;
-    console.log(`\n✅ 流式编辑完成，总耗时: ${totalTime}ms\n`);
-
-    // 最终进度
-    if (onProgress) {
-      onProgress({
-        current: total,
-        total: total,
-        progress: 100,
-        status: 'complete',
-        totalTime
-      });
-    }
-
-    return {
-      success: true,
-      operations: total,
-      totalTime,
-      firstOpTime: this.stats.firstOpTime,
-      avgLatency: totalTime / total
-    };
-  }
-
-  /**
-   * 乐观更新 - 立即反馈到界面
-   */
-  _optimisticUpdate(operation) {
-    if (!this.ws || !this.connected) return;
-
-    // 通过 WebSocket 立即发送渲染指令
-    this.ws.send(JSON.stringify({
-      type: 'optimistic_update',
-      operation: operation.type,
-      data: operation.data,
-      timestamp: Date.now()
-    }));
-
-    this.stats.streamedOps++;
-  }
-
-  /**
-   * 执行实际操作
-   */
-  async _executeOperation(operation) {
-    this.stats.operations++;
-
-    // 模拟实际的 MCP 工具调用
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        // 通过 WebSocket 确认操作
-        if (this.ws && this.connected) {
-          this.ws.send(JSON.stringify({
-            type: 'operation_confirmed',
-            operation: operation.type,
-            success: true,
-            timestamp: Date.now()
-          }));
-        }
-        resolve();
-      }, Math.random() * 100 + 50); // 50-150ms 模拟
-    });
-  }
-
-  /**
-   * 回滚更新
-   */
-  _rollbackUpdate(operation) {
-    if (!this.ws || !this.connected) return;
-
-    this.ws.send(JSON.stringify({
-      type: 'rollback_update',
-      operation: operation.type,
-      timestamp: Date.now()
-    }));
-  }
-
-  /**
-   * 处理 WebSocket 消息
-   */
-  _handleMessage(data) {
-    try {
-      const message = JSON.parse(data);
-      // 处理来自前端的消息
-      console.log('收到消息:', message.type);
-    } catch (error) {
-      console.error('解析消息失败:', error);
-    }
-  }
-
-  /**
-   * 断开连接
-   */
-  disconnect() {
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
-      this.connected = false;
-    }
-  }
-
-  /**
-   * 获取统计信息
-   */
-  getStats() {
-    return {
-      ...this.stats,
-      streamingRate: this.stats.operations > 0 ?
-        (this.stats.streamedOps / this.stats.operations * 100).toFixed(1) + '%' : '0%'
-    };
-  }
-}
-
-/**
- * 集成到 MCP Handler
- */
-export class StreamingMCPHandler {
-  constructor(mcpClient, options = {}) {
-    this.client = mcpClient;
-    this.renderer = new PPTStreamingRenderer(options);
-    this.batchMode = false;
-    this.currentBatch = [];
-  }
-
-  /**
-   * 开始批量操作（流式模式）
-   */
-  beginBatch() {
-    this.batchMode = true;
-    this.currentBatch = [];
-    console.log('🎬 开始批量操作（流式模式）');
-  }
-
-  /**
-   * 添加操作到批次
-   */
-  async addOperation(name, args) {
-    const operation = {
-      type: name,
-      data: args
-    };
-
-    if (this.batchMode) {
-      this.currentBatch.push(operation);
-      return { queued: true, index: this.currentBatch.length };
-    }
-
-    // 单个操作也流式执行
-    return this.renderer.streamEdit([operation]);
-  }
-
-  /**
-   * 提交批次（流式执行）
-   */
-  async commitBatch(onProgress) {
-    if (!this.batchMode || this.currentBatch.length === 0) {
-      return { error: 'No batch in progress' };
-    }
-
-    console.log(`📦 提交批次: ${this.currentBatch.length} 个操作`);
-
-    const result = await this.renderer.streamEdit(
-      this.currentBatch,
-      onProgress
-    );
-
-    this.batchMode = false;
-    this.currentBatch = [];
-
-    return result;
-  }
-
-  /**
-   * 流式调用工具
-   */
-  async callToolStreaming(name, args, onProgress) {
-    const operation = { type: name, data: args };
-    return this.renderer.streamEdit([operation], onProgress);
-  }
-
-  /**
-   * 连接渲染器
-   */
-  async connect() {
-    return this.renderer.connect();
-  }
-
-  /**
-   * 断开连接
-   */
-  disconnect() {
-    this.renderer.disconnect();
-  }
-}
-
-/**
- * 创建流式 PPT 编辑器
- */
-export function createStreamingPPTEditor(mcpClient, options = {}) {
-  return new StreamingMCPHandler(mcpClient, options);
-}