@shun-js/aibaiban-server 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shun-js/aibaiban-server",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "aibaiban.com server",
   "keywords": [
     "ai aibaiban"
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "3c94b4fc140d17d82582f6da181baa643d7a9642"
+  "gitHead": "d9255a37dbd25bf32a5c64b0230440eb34c6de2d"
 }

package/server/service/LLMService.js

@@ -12,9 +12,139 @@ const llm = OpenAIAPI(finalLLMConfig);
 const modelName = finalLLMConfig.modelName;
 const thinking = finalLLMConfig.thinking;
 
+/**
+ * convertToolCallToSkeleton - 将单个 tool call 转为 ExcalidrawElementSkeleton
+ */
+function convertToolCallToSkeleton(name, args) {
+  if (name === 'draw_shape') {
+    const skeleton = {
+      type: args.shape || 'rectangle',
+      x: args.x || 0,
+      y: args.y || 0,
+    };
+    if (args.id) skeleton.id = args.id;
+    if (args.width) skeleton.width = args.width;
+    if (args.height) skeleton.height = args.height;
+    if (args.label) skeleton.label = { text: args.label };
+    if (args.strokeColor) skeleton.strokeColor = args.strokeColor;
+    if (args.backgroundColor) skeleton.backgroundColor = args.backgroundColor;
+    if (args.fillStyle) skeleton.fillStyle = args.fillStyle;
+    if (args.strokeWidth) skeleton.strokeWidth = args.strokeWidth;
+    if (args.strokeStyle) skeleton.strokeStyle = args.strokeStyle;
+    if (args.roughness !== undefined) skeleton.roughness = args.roughness;
+    if (args.opacity !== undefined) skeleton.opacity = args.opacity;
+    if (args.roundness !== undefined) {
+      skeleton.roundness = args.roundness ? { type: 3 } : null;
+    }
+    return [skeleton];
+  }
+
+  if (name === 'draw_arrow') {
+    const skeleton = { type: 'arrow' };
+    // 坐标：优先用起点坐标，否则默认 0
+    skeleton.x = args.startX || 0;
+    skeleton.y = args.startY || 0;
+    // 绑定
+    if (args.startId) skeleton.start = { id: args.startId };
+    if (args.endId) skeleton.end = { id: args.endId };
+    // 标签
+    if (args.label) skeleton.label = { text: args.label };
+    // 箭头样式
+    if (args.startArrowhead) skeleton.startArrowhead = args.startArrowhead;
+    if (args.endArrowhead !== undefined) skeleton.endArrowhead = args.endArrowhead;
+    // 如果没有绑定，用坐标计算 points
+    if (!args.startId && !args.endId && args.endX !== undefined && args.endY !== undefined) {
+      skeleton.width = args.endX - skeleton.x;
+      skeleton.height = args.endY - skeleton.y;
+    }
+    // 通用样式
+    if (args.strokeColor) skeleton.strokeColor = args.strokeColor;
+    if (args.strokeWidth) skeleton.strokeWidth = args.strokeWidth;
+    if (args.strokeStyle) skeleton.strokeStyle = args.strokeStyle;
+    if (args.elbowed) skeleton.elbowed = true;
+    return [skeleton];
+  }
+
+  if (name === 'draw_line') {
+    if (!args.points || args.points.length < 2) return [];
+    const skeleton = {
+      type: 'line',
+      x: args.points[0][0] || 0,
+      y: args.points[0][1] || 0,
+      points: args.points.map((p) => [p[0] - (args.points[0][0] || 0), p[1] - (args.points[0][1] || 0)]),
+    };
+    if (args.strokeColor) skeleton.strokeColor = args.strokeColor;
+    if (args.strokeWidth) skeleton.strokeWidth = args.strokeWidth;
+    if (args.strokeStyle) skeleton.strokeStyle = args.strokeStyle;
+    return [skeleton];
+  }
+
+  if (name === 'draw_text') {
+    const skeleton = {
+      type: 'text',
+      x: args.x || 0,
+      y: args.y || 0,
+      text: args.text || '',
+    };
+    if (args.id) skeleton.id = args.id;
+    if (args.fontSize) skeleton.fontSize = args.fontSize;
+    if (args.fontFamily) skeleton.fontFamily = args.fontFamily;
+    if (args.textAlign) skeleton.textAlign = args.textAlign;
+    if (args.strokeColor) skeleton.strokeColor = args.strokeColor;
+    return [skeleton];
+  }
+
+  if (name === 'draw_frame') {
+    const skeleton = {
+      type: 'frame',
+      children: args.childIds || [],
+    };
+    if (args.name) skeleton.name = args.name;
+    if (args.x !== undefined) skeleton.x = args.x;
+    if (args.y !== undefined) skeleton.y = args.y;
+    if (args.width) skeleton.width = args.width;
+    if (args.height) skeleton.height = args.height;
+    return [skeleton];
+  }
+
+  return [];
+}
+
+/**
+ * convertToolCallsToSkeletons - 将所有 tool calls 转为 skeleton 数组
+ */
+function convertToolCallsToSkeletons(toolCalls) {
+  const skeletons = [];
+  for (const tc of toolCalls) {
+    if (tc.function.name === 'clear_canvas') continue;
+    try {
+      const args = JSON.parse(tc.function.arguments);
+      if (tc.function.name === 'draw_group') {
+        // draw_group: 递归转换子元素，统一加 groupIds
+        const groupId = 'group_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8);
+        const children = args.elements || [];
+        for (const child of children) {
+          const toolName = 'draw_' + child.tool;
+          const childSkeletons = convertToolCallToSkeleton(toolName, child.args || {});
+          for (const s of childSkeletons) {
+            s.groupIds = [groupId];
+            skeletons.push(s);
+          }
+        }
+      } else {
+        const result = convertToolCallToSkeleton(tc.function.name, args);
+        skeletons.push(...result);
+      }
+    } catch (e) {
+      // JSON 解析失败，跳过该 tool call
+    }
+  }
+  return skeletons;
+}
+
 /**
  * drawAgent - 对话式 Agent
- * 1 次决策 LLM → reply / generate(elaborate+generate) / irrelevant
+ * 1 次决策 LLM → reply / generate(elaborate+generate) / canvas / irrelevant
  */
 exports.drawAgent = async (req, res) => {
   const methodName = 'drawAgent';
@@ -134,6 +264,43 @@ exports.drawAgent = async (req, res) => {
           },
         },
       ]);
+    } else if (decision.action === 'canvas') {
+      // 3. Canvas - Function Calling 直接画图
+      res.streaming(`data: ${JSON.stringify({ type: 'status', step: 'drawing' })}\n\n`);
+      req.logger.info(methodName, 'step: canvas function calling');
+
+      const canvasResponse = await llm.chat({
+        model: modelName,
+        messages: [
+          { role: 'system', content: prompts.CANVAS_SYSTEM_PROMPT },
+          { role: 'user', content: decision.description },
+        ],
+        tools: prompts.CANVAS_TOOLS,
+        tool_choice: 'auto',
+      });
+
+      if (canvasResponse.tool_calls?.length) {
+        req.logger.info(methodName, 'tool_calls', canvasResponse.tool_calls.map((tc) => tc.function.name).join(', '));
+
+        // 检查是否有 clear_canvas
+        const hasClear = canvasResponse.tool_calls.some((tc) => tc.function.name === 'clear_canvas');
+        if (hasClear) {
+          chatFeishuMsg(req, 'canvas-clear');
+          res.streaming(`data: ${JSON.stringify({ type: 'clear' })}\n\n`);
+        }
+
+        // 转换为 skeletons
+        const skeletons = convertToolCallsToSkeletons(canvasResponse.tool_calls);
+        if (skeletons.length > 0) {
+          const duration = Date.now() - startTime;
+          req.logger.info(methodName, 'canvas elements', skeletons.length, `${duration}ms`);
+          chatFeishuMsg(req, `canvas-${skeletons.length}-elements`);
+          res.streaming(`data: ${JSON.stringify({ type: 'draw', elements: skeletons, duration })}\n\n`);
+        }
+      } else if (canvasResponse.content) {
+        // LLM 选择文字回复而非调用函数
+        res.streaming(`data: ${JSON.stringify({ type: 'message', content: canvasResponse.content })}\n\n`);
+      }
     } else {
       // 未知 action fallback
       res.streaming(

package/server/util/prompt-agent.js

@@ -7,10 +7,11 @@ module.exports = {
    * Agent 决策 prompt
    * 一次 LLM 调用完成意图判断 + 决策
    */
-  AGENT_PROMPT: `你是 AI 白板助手，帮用户在白板上画图表。
+  AGENT_PROMPT: `你是 AI 白板助手，帮用户在白板上画图表和图形。
 
 ## 能力
-支持 4 种图表：flowchart（流程图）、sequence（时序图）、classDiagram（类图）、erDiagram（ER图）。
+1. 支持 4 种图表：flowchart（流程图）、sequence（时序图）、classDiagram（类图）、erDiagram（ER图）。
+2. 支持直接在白板上绘制形状、文字、箭头等基础图形。
 
 ## 决策规则
 收到用户消息后判断，只回复 JSON：
@@ -18,10 +19,13 @@ module.exports = {
 1. 回复文字（追问、确认、引导）：
    {"action":"reply","message":"你的回复内容"}
 
-2. 生成图表（信息已足够明确）：
+2. 生成图表（用户要画流程图/时序图/类图/ER图，信息已足够明确）：
    {"action":"generate","diagramType":"类型","description":"详细描述，包含所有节点、关系、步骤"}
 
-3. 与画图完全无关：
+3. 直接画图（用户要求画简单形状、文字、箭头等，不属于四种图表）：
+   {"action":"canvas","description":"用户想画什么的完整描述"}
+
+4. 与画图完全无关：
    {"action":"irrelevant"}
 
 ## 判断标准
@@ -30,6 +34,8 @@ module.exports = {
 - 用户只说了内容没说类型 → 你来判断最合适的类型，直接 generate
 - 用户说"帮我画个图" → reply 追问想画什么
 - 用户要修改已有图表 → 根据对话历史理解上下文，generate 完整新图表
+- 用户要画简单形状（圆、矩形、箭头、文字等）→ canvas
+- 用户说"清空白板" → canvas
 - 用户闲聊但话题相关 → reply 自然回应并引导回画图
 - 用户闲聊话题无关 → irrelevant
 
@@ -37,6 +43,7 @@ module.exports = {
 - 追问时友好自然，像朋友聊天，不要生硬
 - 可以给建议和示例帮助用户想清楚需求
 - generate 时 description 要尽可能详细完整
+- canvas 时 description 要包含形状、颜色、位置等用户提到的所有细节
 
 只回复 JSON。`,
 
@@ -101,5 +108,199 @@ flowchart TD
    * 非白板请求的固定回复
    */
   FIXED_REPLY:
-    '你好！👋 我是 AI 白板助手，支持绘制以下 4 种图表：\n\n📊 流程图 — 例如"画一个用户注册登录的流程图"\n🔄 时序图 — 例如"画一个用户下单支付的时序图"\n🏗️ 类图 — 例如"画一个电商系统的类图"\n🗄️ ER图 — 例如"画一个博客系统的ER图"\n\n💡 试试直接输入你的需求吧！',
+    '你好！👋 我是 AI 白板助手，支持以下功能：\n\n📊 流程图 — 例如"画一个用户注册登录的流程图"\n🔄 时序图 — 例如"画一个用户下单支付的时序图"\n🏗️ 类图 — 例如"画一个电商系统的类图"\n🗄️ ER图 — 例如"画一个博客系统的ER图"\n🎨 自由绘图 — 例如"画一个红色的圆"、"画两个矩形用箭头连接"\n\n💡 试试直接输入你的需求吧！',
+
+  /**
+   * Canvas Function Calling 系统提示词
+   */
+  CANVAS_SYSTEM_PROMPT: `你是 AI 白板助手，帮用户在白板上直接绘制形状、文字和箭头。
+
+## 坐标系
+- 画布从左上角 (0, 0) 开始，x 向右增长，y 向下增长
+- 建议将元素放在 (100-800, 100-600) 的范围内
+- 默认形状大小约 150x80
+
+## 颜色建议
+- 红: #ff6b6b  青: #4ecdc4  蓝: #45b7d1  黄: #ffeaa7  深蓝: #1971c2
+- 绿: #51cf66  紫: #9775fa  橙: #ff922b  粉: #f06595  灰: #868e96
+
+## 注意事项
+- 圆形用 draw_shape 的 ellipse 类型，宽高相等即可
+- 需要箭头连接的形状必须指定 id
+- 多个相关元素建议用 draw_group 编组
+- 如果用户没指定位置/颜色/大小，选择合理的默认值
+- 形状内文字通过 label 参数设置`,
+
+  /**
+   * Canvas Function Calling 工具定义
+   */
+  CANVAS_TOOLS: [
+    {
+      type: 'function',
+      function: {
+        name: 'draw_shape',
+        description: '在白板上绘制基础形状（矩形、椭圆、菱形），可带文字标签。需要被箭头连接时必须指定 id。',
+        parameters: {
+          type: 'object',
+          properties: {
+            id: { type: 'string', description: '元素ID，箭头绑定时需要引用' },
+            shape: { type: 'string', enum: ['rectangle', 'ellipse', 'diamond'] },
+            x: { type: 'number', description: '左上角X坐标' },
+            y: { type: 'number', description: '左上角Y坐标' },
+            width: { type: 'number', description: '宽度，默认100' },
+            height: { type: 'number', description: '高度，默认100' },
+            label: { type: 'string', description: '形状内的文字标签' },
+            strokeColor: { type: 'string', description: '边框颜色，默认#1e1e1e' },
+            backgroundColor: { type: 'string', description: '填充颜色，默认transparent' },
+            fillStyle: { type: 'string', enum: ['hachure', 'cross-hatch', 'solid', 'zigzag'] },
+            strokeWidth: { type: 'number', enum: [1, 2, 4], description: '1=细,2=中,4=粗' },
+            strokeStyle: { type: 'string', enum: ['solid', 'dashed', 'dotted'] },
+            roughness: { type: 'number', enum: [0, 1, 2], description: '0=精确,1=手绘,2=夸张' },
+            roundness: { type: 'boolean', description: '是否圆角，默认true' },
+            opacity: { type: 'number', description: '不透明度0-100，默认100' },
+          },
+          required: ['shape', 'x', 'y'],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'draw_arrow',
+        description: '绘制箭头。可通过 startId/endId 绑定到已有形状（箭头自动吸附），也可直接指定坐标点。',
+        parameters: {
+          type: 'object',
+          properties: {
+            startX: { type: 'number', description: '起点X（无startId时必填）' },
+            startY: { type: 'number', description: '起点Y（无startId时必填）' },
+            endX: { type: 'number', description: '终点X（无endId时必填）' },
+            endY: { type: 'number', description: '终点Y（无endId时必填）' },
+            startId: { type: 'string', description: '起点绑定的形状ID' },
+            endId: { type: 'string', description: '终点绑定的形状ID' },
+            label: { type: 'string', description: '箭头上的文字标签' },
+            startArrowhead: {
+              type: 'string',
+              enum: ['arrow', 'bar', 'dot', 'triangle', 'diamond'],
+              description: '起点箭头样式，默认无',
+            },
+            endArrowhead: {
+              type: 'string',
+              enum: ['arrow', 'bar', 'dot', 'triangle', 'diamond'],
+              description: '终点箭头样式，默认arrow',
+            },
+            strokeColor: { type: 'string' },
+            strokeWidth: { type: 'number', enum: [1, 2, 4] },
+            strokeStyle: { type: 'string', enum: ['solid', 'dashed', 'dotted'] },
+            elbowed: { type: 'boolean', description: '是否使用直角折线，默认false' },
+          },
+          required: [],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'draw_line',
+        description: '绘制线条（无箭头），支持多个折点',
+        parameters: {
+          type: 'object',
+          properties: {
+            points: {
+              type: 'array',
+              items: { type: 'array', items: { type: 'number' } },
+              description: '折点坐标数组，如 [[0,0],[100,50],[200,0]]',
+            },
+            strokeColor: { type: 'string' },
+            strokeWidth: { type: 'number', enum: [1, 2, 4] },
+            strokeStyle: { type: 'string', enum: ['solid', 'dashed', 'dotted'] },
+          },
+          required: ['points'],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'draw_text',
+        description: '在白板上添加独立文本',
+        parameters: {
+          type: 'object',
+          properties: {
+            id: { type: 'string' },
+            x: { type: 'number' },
+            y: { type: 'number' },
+            text: { type: 'string' },
+            fontSize: { type: 'number', description: '字号，默认20' },
+            fontFamily: {
+              type: 'number',
+              enum: [1, 2, 3, 5],
+              description: '1=手写,2=常规,3=等宽,5=圆体',
+            },
+            textAlign: { type: 'string', enum: ['left', 'center', 'right'] },
+            strokeColor: { type: 'string' },
+          },
+          required: ['x', 'y', 'text'],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'draw_group',
+        description: '批量创建多个元素并自动编组（移动时一起移动）。适合画一组相关图形。',
+        parameters: {
+          type: 'object',
+          properties: {
+            elements: {
+              type: 'array',
+              description: '元素数组，每个元素格式同其他 draw 工具的参数',
+              items: {
+                type: 'object',
+                properties: {
+                  tool: { type: 'string', enum: ['shape', 'arrow', 'line', 'text'] },
+                  args: {
+                    type: 'object',
+                    description: '对应 draw_shape/draw_arrow/draw_line/draw_text 的参数',
+                  },
+                },
+                required: ['tool', 'args'],
+              },
+            },
+          },
+          required: ['elements'],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'draw_frame',
+        description: '创建一个 Frame 容器，包含指定的子元素（子元素会被框在一起）',
+        parameters: {
+          type: 'object',
+          properties: {
+            name: { type: 'string', description: 'Frame 名称' },
+            childIds: { type: 'array', items: { type: 'string' }, description: '子元素ID数组' },
+            x: { type: 'number' },
+            y: { type: 'number' },
+            width: { type: 'number' },
+            height: { type: 'number' },
+          },
+          required: ['childIds'],
+        },
+      },
+    },
+    {
+      type: 'function',
+      function: {
+        name: 'clear_canvas',
+        description: '清空白板上的所有内容',
+        parameters: {
+          type: 'object',
+          properties: {},
+          required: [],
+        },
+      },
+    },
+  ],
 };

package/views/index.html

@@ -105,7 +105,7 @@
     <script
       type="module"
       crossorigin
-      src="https://static-small.vincentqiao.com/aibaiban/static/index-Dsjw6n7F.js"
+      src="https://static-small.vincentqiao.com/aibaiban/static/index-Fo5F7gnm.js"
     ></script>
     <link
       rel="modulepreload"
@@ -130,7 +130,7 @@
     <link
       rel="modulepreload"
       crossorigin
-      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-BpecJTKB.js"
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-XjoTMqq7.js"
     />
     <link
       rel="stylesheet"