@shun-js/aibaiban-server 0.6.4 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shun-js/aibaiban-server",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "aibaiban.com server",
   "keywords": [
     "ai aibaiban"
@@ -44,5 +44,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "4ea518c2a051220d56b42fa95389e46b13796d93"
+  "gitHead": "a6d44d1fe7933c163c91fcc5157fcd89a8000b00"
 }

package/server/controller/LLMController.js

@@ -10,8 +10,13 @@ module.exports = (app) => {
     service.intent(req, res);
   });
 
-  //
+  // draw (原有方法)
   app.post('/draw', (req, res) => {
     service.draw(req, res);
   });
+
+  // drawWithTools (Tool Calling 方法)
+  app.post('/drawWithTools', (req, res) => {
+    service.drawWithTools(req, res);
+  });
 };

package/server/service/LLMService.js

@@ -1,6 +1,9 @@
 // llm
 const { llmParseIntent, llmGetDrawJson } = require('../util/llm-v4.js');
 
+// tool calling
+const { generateFlowchartWithTools } = require('../util/llm-toolcall.js');
+
 // util
 const { chatFeishuMsg, chatResFeishuMsg, errorFeishuMsg } = require('../util/feishu.js');
 
@@ -81,3 +84,41 @@ exports.draw = async (req, res) => {
     res.jsonFail(msg);
   }
 };
+
+/**
+ * drawWithTools - 使用 Tool Calling 生成流程图
+ * @param {*} req
+ * @param {*} res
+ * @returns
+ */
+exports.drawWithTools = async (req, res) => {
+  const methodName = 'drawWithTools';
+
+  // check
+  if (!req.body.userPrompt) {
+    const msg = 'need userPrompt';
+    req.logger.error(methodName, msg);
+    res.jsonFail(msg);
+    return;
+  }
+
+  // const
+  const userPrompt = decodeURIComponent(req.body.userPrompt);
+  req.logger.info(methodName, 'userPrompt', userPrompt);
+  chatFeishuMsg(req);
+
+  // go
+  try {
+    const diagram = await generateFlowchartWithTools(userPrompt);
+    req.logger.info(methodName, 'diagram', diagram);
+
+    // r
+    chatResFeishuMsg(req, JSON.stringify(diagram));
+    res.jsonSuccess('success', diagram);
+  } catch (error) {
+    const msg = 'draw with tools error';
+    errorFeishuMsg(req, msg);
+    req.logger.error(methodName, msg, error);
+    res.jsonFail(msg);
+  }
+};

package/server/util/diagram-tools.js

@@ -0,0 +1,350 @@
+/**
+ * Tool Calling 流程图生成器
+ * 使用多步推理生成高质量的流程图
+ */
+
+// 布局常量
+const LAYOUT = {
+  MAIN_X: 500,
+  START_Y: 80,
+  STEP_SPACING: 150,
+  ERROR_LEFT_X: 200,
+  ERROR_RIGHT_X: 800,
+  NODE_WIDTH: 180,
+  NODE_HEIGHT: 80,
+  ELLIPSE_WIDTH: 120,
+  ELLIPSE_HEIGHT: 60,
+  DIAMOND_WIDTH: 140,
+  DIAMOND_HEIGHT: 80,
+};
+
+/**
+ * 工具定义（给 AI 使用）
+ */
+const TOOLS = [
+  {
+    name: 'generate_flowchart_skeleton',
+    description: '生成流程图骨架（节点列表，不包含坐标）。识别主流程步骤和判断节点，不要生成错误分支。返回节点数组。',
+    parameters: {
+      type: 'object',
+      properties: {
+        nodes: {
+          type: 'array',
+          description: '节点列表',
+          items: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'string',
+                description: '节点唯一标识符（驼峰命名），如 start, step1, judge1',
+              },
+              label: {
+                type: 'string',
+                description: '节点显示文本，支持 \\n 换行',
+              },
+              type: {
+                type: 'string',
+                enum: ['ellipse', 'rectangle', 'diamond'],
+                description: 'ellipse=开始/结束, rectangle=处理步骤, diamond=判断节点',
+              },
+              color: {
+                type: 'string',
+                enum: ['blue', 'green', 'purple', 'orange', 'red', 'gray'],
+                description: '节点颜色',
+              },
+            },
+            required: ['id', 'label', 'type'],
+          },
+        },
+        connections: {
+          type: 'array',
+          description: '主流程连接关系（不包含错误分支）',
+          items: {
+            type: 'object',
+            properties: {
+              from: { type: 'string', description: '起始节点 id' },
+              to: { type: 'string', description: '目标节点 id' },
+              label: { type: 'string', description: '连线标签' },
+            },
+            required: ['from', 'to'],
+          },
+        },
+      },
+      required: ['nodes', 'connections'],
+    },
+  },
+  {
+    name: 'add_error_branches',
+    description: '为判断节点添加错误分支。输入已布局的图表，输出添加错误节点和回退连线后的图表。',
+    parameters: {
+      type: 'object',
+      properties: {
+        errorNodes: {
+          type: 'array',
+          description: '错误节点列表',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string', description: '错误节点 id' },
+              label: { type: 'string', description: '错误节点文本' },
+              relatedJudgeId: { type: 'string', description: '对应的判断节点 id' },
+              backToNodeId: { type: 'string', description: '回退到哪个输入节点的 id' },
+            },
+            required: ['id', 'label', 'relatedJudgeId', 'backToNodeId'],
+          },
+        },
+      },
+      required: ['errorNodes'],
+    },
+  },
+  {
+    name: 'finalize_diagram',
+    description: '完成图表生成，返回最终的图表 JSON。调用此工具表示图表已生成完毕。',
+    parameters: {
+      type: 'object',
+      properties: {
+        title: {
+          type: 'string',
+          description: '图表标题',
+        },
+      },
+    },
+  },
+];
+
+/**
+ * 工具执行函数
+ */
+const TOOL_FUNCTIONS = {
+  /**
+   * 生成流程图骨架
+   */
+  generate_flowchart_skeleton: async (args) => {
+    console.log('[Tool] generate_flowchart_skeleton called');
+
+    // 验证节点
+    if (!args.nodes || !Array.isArray(args.nodes) || args.nodes.length === 0) {
+      return { error: '需要至少一个节点' };
+    }
+
+    // 计算坐标（自动布局）
+    const nodesWithCoords = calculateMainFlowLayout(args.nodes);
+
+    // 添加主流程连线的 routing
+    const connectionsWithRouting = args.connections.map((conn) => ({
+      ...conn,
+      routing: {
+        exitSide: 'bottom',
+        entrySide: 'top',
+      },
+    }));
+
+    return {
+      success: true,
+      diagram: {
+        type: 'flowchart',
+        nodes: nodesWithCoords,
+        connections: connectionsWithRouting,
+      },
+      message: `已生成 ${nodesWithCoords.length} 个节点的主流程骨架，所有节点已按垂直布局排列（x: ${LAYOUT.MAIN_X}）`,
+    };
+  },
+
+  /**
+   * 添加错误分支
+   */
+  add_error_branches: async (args, currentDiagram) => {
+    console.log('[Tool] add_error_branches called');
+
+    if (!args.errorNodes || !Array.isArray(args.errorNodes)) {
+      return { error: '需要 errorNodes 数组' };
+    }
+
+    if (!currentDiagram || !currentDiagram.nodes) {
+      return { error: '需要当前图表数据' };
+    }
+
+    // 创建节点查找表
+    const nodeMap = {};
+    currentDiagram.nodes.forEach((node) => {
+      nodeMap[node.id] = node;
+    });
+
+    // 添加错误节点
+    const newErrorNodes = [];
+    const newConnections = [];
+
+    args.errorNodes.forEach((errorSpec, index) => {
+      const judgeNode = nodeMap[errorSpec.relatedJudgeId];
+      const backToNode = nodeMap[errorSpec.backToNodeId];
+
+      if (!judgeNode) {
+        console.warn(`[Tool] 判断节点未找到: ${errorSpec.relatedJudgeId}`);
+        return;
+      }
+      if (!backToNode) {
+        console.warn(`[Tool] 回退目标节点未找到: ${errorSpec.backToNodeId}`);
+        return;
+      }
+
+      // 创建错误节点（与判断节点同高度，在左侧）
+      const errorNode = {
+        id: errorSpec.id,
+        label: errorSpec.label,
+        type: 'rectangle',
+        color: 'red',
+        x: index % 2 === 0 ? LAYOUT.ERROR_LEFT_X : LAYOUT.ERROR_RIGHT_X, // 交替左右
+        y: judgeNode.y,
+        width: LAYOUT.DIAMOND_WIDTH,
+        height: LAYOUT.NODE_HEIGHT,
+      };
+
+      newErrorNodes.push(errorNode);
+
+      // 添加判断节点 → 错误节点的连线
+      const errorBranchConnection = {
+        from: errorSpec.relatedJudgeId,
+        to: errorSpec.id,
+        label: '失败',
+        routing: {
+          exitSide: errorNode.x < judgeNode.x ? 'left' : 'right',
+          exitRatio: 0.5,
+          entrySide: errorNode.x < judgeNode.x ? 'right' : 'left',
+        },
+      };
+
+      newConnections.push(errorBranchConnection);
+
+      // 添加错误节点 → 输入节点的回退连线
+      const backConnection = {
+        from: errorSpec.id,
+        to: errorSpec.backToNodeId,
+        label: '重新输入',
+        routing: {
+          exitSide: 'top', // 从错误节点顶部出
+          exitRatio: 0.5,
+          entrySide: errorNode.x < backToNode.x ? 'left' : 'right', // 进入输入节点左侧或右侧
+          entryRatio: 0.5,
+        },
+      };
+
+      newConnections.push(backConnection);
+    });
+
+    // 合并到当前图表
+    const updatedDiagram = {
+      ...currentDiagram,
+      nodes: [...currentDiagram.nodes, ...newErrorNodes],
+      connections: [...currentDiagram.connections, ...newConnections],
+    };
+
+    return {
+      success: true,
+      diagram: updatedDiagram,
+      message: `已添加 ${newErrorNodes.length} 个错误分支，包含回退连线`,
+    };
+  },
+
+  /**
+   * 完成图表生成
+   */
+  finalize_diagram: async (args, currentDiagram) => {
+    console.log('[Tool] finalize_diagram called');
+
+    if (!currentDiagram) {
+      return { error: '图表数据为空' };
+    }
+
+    // 最终验证
+    const validation = validateDiagram(currentDiagram);
+
+    if (!validation.valid) {
+      return {
+        success: false,
+        errors: validation.errors,
+        message: '图表验证失败',
+      };
+    }
+
+    return {
+      success: true,
+      diagram: {
+        ...currentDiagram,
+        title: args.title || '流程图',
+      },
+      message: '图表生成完成',
+    };
+  },
+};
+
+/**
+ * 计算主流程节点布局
+ */
+function calculateMainFlowLayout(nodes) {
+  return nodes.map((node, index) => {
+    // 强制 x 坐标
+    const x = LAYOUT.MAIN_X;
+
+    // 强制 y 坐标（等间距）
+    const y = LAYOUT.START_Y + index * LAYOUT.STEP_SPACING;
+
+    // 强制宽高
+    let width, height;
+    if (node.type === 'ellipse') {
+      width = LAYOUT.ELLIPSE_WIDTH;
+      height = LAYOUT.ELLIPSE_HEIGHT;
+    } else if (node.type === 'diamond') {
+      width = LAYOUT.DIAMOND_WIDTH;
+      height = LAYOUT.DIAMOND_HEIGHT;
+    } else {
+      width = LAYOUT.NODE_WIDTH;
+      height = LAYOUT.NODE_HEIGHT;
+    }
+
+    return {
+      ...node,
+      x,
+      y,
+      width,
+      height,
+    };
+  });
+}
+
+/**
+ * 验证图表
+ */
+function validateDiagram(diagram) {
+  const errors = [];
+
+  // 检查节点坐标范围
+  diagram.nodes.forEach((node) => {
+    if (node.x < 40 || node.x > 1160) {
+      errors.push(`节点 ${node.id} 的 x 坐标超出范围: ${node.x}`);
+    }
+    if (node.y < 40 || node.y > 1500) {
+      errors.push(`节点 ${node.id} 的 y 坐标超出范围: ${node.y}`);
+    }
+  });
+
+  // 检查连线引用
+  const nodeIds = new Set(diagram.nodes.map((n) => n.id));
+  diagram.connections.forEach((conn, index) => {
+    if (!nodeIds.has(conn.from)) {
+      errors.push(`连线 ${index} 的起始节点不存在: ${conn.from}`);
+    }
+    if (!nodeIds.has(conn.to)) {
+      errors.push(`连线 ${index} 的目标节点不存在: ${conn.to}`);
+    }
+  });
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+module.exports = {
+  TOOLS,
+  TOOL_FUNCTIONS,
+};

package/server/util/llm-toolcall.js

@@ -0,0 +1,173 @@
+/**
+ * Tool Calling 流程图生成器 - 主流程
+ */
+
+// path
+const path = require('path');
+const { readFile } = require('qiao-file');
+
+// llm
+const { GeminiVertex } = require('viho-llm');
+
+// tools
+const { TOOLS, TOOL_FUNCTIONS } = require('./diagram-tools.js');
+
+// gemini client
+const gemini = GeminiVertex({
+  projectId: global.QZ_CONFIG.gemini.projectId,
+  location: global.QZ_CONFIG.gemini.location,
+  modelName: global.QZ_CONFIG.gemini.modelName,
+});
+
+// const
+const chatConfig = {
+  temperature: 0.3, // 稍微提高一点，允许更灵活的思考
+  topP: 0.9,
+  topK: 40,
+  maxOutputTokens: 8192,
+  thinkingConfig: {
+    thinkingBudget: 0,
+    includeThoughts: false,
+  },
+};
+
+const safetySettings = [
+  {
+    category: 'HARM_CATEGORY_HATE_SPEECH',
+    threshold: 'BLOCK_ONLY_HIGH',
+  },
+  {
+    category: 'HARM_CATEGORY_DANGEROUS_CONTENT',
+    threshold: 'BLOCK_ONLY_HIGH',
+  },
+  {
+    category: 'HARM_CATEGORY_SEXUALLY_EXPLICIT',
+    threshold: 'BLOCK_ONLY_HIGH',
+  },
+  {
+    category: 'HARM_CATEGORY_HARASSMENT',
+    threshold: 'BLOCK_ONLY_HIGH',
+  },
+];
+
+/**
+ * 使用 Tool Calling 生成流程图
+ * @param {string} userPrompt - 用户需求
+ * @returns {Object} - SimplifiedDiagram
+ */
+exports.generateFlowchartWithTools = async (userPrompt) => {
+  console.log('[ToolCall] Starting flowchart generation with tools');
+  console.log('[ToolCall] User prompt:', userPrompt);
+
+  // 加载系统提示词
+  let systemPrompt = await readFile(path.resolve(__dirname, './prompt-toolcall.md'));
+
+  // 初始化对话历史
+  const conversationHistory = [];
+  let currentDiagram = null;
+  let maxTurns = 10; // 最多 10 轮对话
+  let turnCount = 0;
+
+  try {
+    // 第1步：用户输入
+    conversationHistory.push({
+      role: 'user',
+      parts: [{ text: userPrompt }],
+    });
+
+    // 对话循环
+    while (turnCount < maxTurns) {
+      turnCount++;
+      console.log(`\n[ToolCall] Turn ${turnCount}/${maxTurns}`);
+
+      // 调用 AI（带 tools）
+      const chatOptions = {
+        contents: conversationHistory,
+        systemInstruction: systemPrompt,
+        config: chatConfig,
+        safetySettings: safetySettings,
+        tools: [{ functionDeclarations: TOOLS }], // ⭐ 关键：传入工具定义
+      };
+
+      const responseText = await gemini.chat(chatOptions);
+
+      // 解析响应（可能包含 function call）
+      const response = JSON.parse(responseText);
+      console.log('[ToolCall] AI response:', JSON.stringify(response, null, 2));
+
+      // 添加 AI 响应到历史
+      conversationHistory.push({
+        role: 'model',
+        parts: [{ text: responseText }],
+      });
+
+      // 检查是否有 function call
+      if (response.functionCall) {
+        const functionCall = response.functionCall;
+        const functionName = functionCall.name;
+        const functionArgs = functionCall.args;
+
+        console.log(`[ToolCall] AI called function: ${functionName}`);
+        console.log(`[ToolCall] Function args:`, JSON.stringify(functionArgs, null, 2));
+
+        // 执行工具函数
+        const toolFunction = TOOL_FUNCTIONS[functionName];
+
+        if (!toolFunction) {
+          console.error(`[ToolCall] Unknown function: ${functionName}`);
+          break;
+        }
+
+        const toolResult = await toolFunction(functionArgs, currentDiagram);
+        console.log(`[ToolCall] Tool result:`, JSON.stringify(toolResult, null, 2));
+
+        // 更新当前图表
+        if (toolResult.diagram) {
+          currentDiagram = toolResult.diagram;
+        }
+
+        // 将工具执行结果返回给 AI
+        conversationHistory.push({
+          role: 'function',
+          parts: [
+            {
+              functionResponse: {
+                name: functionName,
+                response: toolResult,
+              },
+            },
+          ],
+        });
+
+        // 如果是 finalize_diagram，表示完成
+        if (functionName === 'finalize_diagram' && toolResult.success) {
+          console.log('[ToolCall] Diagram generation completed');
+          return currentDiagram;
+        }
+      } else if (response.text) {
+        // AI 返回普通文本（可能是思考过程或完成提示）
+        console.log('[ToolCall] AI text response:', response.text);
+
+        // 如果没有 function call 且已有图表，认为完成
+        if (currentDiagram) {
+          console.log('[ToolCall] No more function calls, returning current diagram');
+          return currentDiagram;
+        }
+      } else {
+        console.warn('[ToolCall] Unexpected response format:', response);
+        break;
+      }
+    }
+
+    // 达到最大轮数
+    if (turnCount >= maxTurns) {
+      console.warn('[ToolCall] Reached max turns, returning current diagram');
+      return currentDiagram || { type: 'flowchart', nodes: [], connections: [], error: '达到最大对话轮数' };
+    }
+
+    return currentDiagram || { type: 'flowchart', nodes: [], connections: [], error: '生成失败' };
+  } catch (error) {
+    console.error('[ToolCall] Error:', error);
+    throw error;
+  }
+};

package/server/util/prompt-toolcall.md

@@ -0,0 +1,170 @@
+# AI白板绘图助手 - Tool Calling 模式
+
+你是 **AI白板** (aibaiban.com) 的专业绘图助手，使用多步推理生成高质量的流程图。
+
+---
+
+## 核心工作流程
+
+### 第 1 步：生成流程骨架
+
+**任务**：分析用户需求，识别主流程步骤，调用 `generate_flowchart_skeleton` 工具。
+
+**要点**：
+
+- 只生成**主流程**节点（正常路径）
+- 不要生成错误分支节点
+- 开始节点：`type: "ellipse"`, `color: "blue"`
+- 结束节点：`type: "ellipse"`, `color: "gray"`
+- 判断节点：`type: "diamond"`, `color: "orange"`
+- 处理步骤：`type: "rectangle"`, `color: "blue"`
+
+**示例**：
+
+```
+用户需求：画出用户注册的完整流程
+
+你应该调用：
+generate_flowchart_skeleton({
+  nodes: [
+    { id: "start", label: "开始", type: "ellipse", color: "blue" },
+    { id: "step1", label: "访问注册页面", type: "rectangle", color: "blue" },
+    { id: "step2", label: "输入注册信息", type: "rectangle", color: "blue" },
+    { id: "judge1", label: "验证输入", type: "diamond", color: "orange" },
+    { id: "step3", label: "发送验证码", type: "rectangle", color: "blue" },
+    { id: "step4", label: "输入验证码", type: "rectangle", color: "blue" },
+    { id: "judge2", label: "验证验证码", type: "diamond", color: "orange" },
+    { id: "step5", label: "创建账户", type: "rectangle", color: "green" },
+    { id: "step6", label: "注册成功", type: "rectangle", color: "green" },
+    { id: "end", label: "结束", type: "ellipse", color: "gray" }
+  ],
+  connections: [
+    { from: "start", to: "step1" },
+    { from: "step1", to: "step2" },
+    { from: "step2", to: "judge1" },
+    { from: "judge1", to: "step3", label: "通过" },
+    { from: "step3", to: "step4" },
+    { from: "step4", to: "judge2" },
+    { from: "judge2", to: "step5", label: "通过" },
+    { from: "step5", to: "step6" },
+    { from: "step6", to: "end" }
+  ]
+})
+```
+
+---
+
+### 第 2 步：添加错误分支
+
+**任务**：收到主流程布局结果后，为每个判断节点添加错误分支。
+
+**要点**：
+
+- 错误节点颜色：`red`
+- 每个错误节点需要指定：
+  - `relatedJudgeId`：对应的判断节点 id
+  - `backToNodeId`：回退到哪个输入节点的 id
+
+**示例**：
+
+```
+调用：
+add_error_branches({
+  errorNodes: [
+    {
+      id: "error1",
+      label: "信息无效",
+      relatedJudgeId: "judge1",
+      backToNodeId: "step2"
+    },
+    {
+      id: "error2",
+      label: "验证码错误",
+      relatedJudgeId: "judge2",
+      backToNodeId: "step4"
+    }
+  ]
+})
+```
+
+---
+
+### 第 3 步：完成图表
+
+**任务**：调用 `finalize_diagram` 完成图表生成。
+
+**示例**：
+
+```
+finalize_diagram({ title: "用户注册流程图" })
+```
+
+---
+
+## 重要规则
+
+### 规则 1：工具调用顺序
+
+```
+第1步：generate_flowchart_skeleton（必须）
+���2步：add_error_branches（可选，如果有判断节点）
+第3步：finalize_diagram（必须）
+```
+
+### 规则 2：节点命名规范
+
+- 使用驼峰式英文：`start`, `step1`, `judge1`, `error1`, `end`
+- ID 必须唯一
+- label 使用中文，简洁明了
+
+### 规则 3：判断节点处理
+
+- 判断节点必须有两个出口：
+  - 主分支：继续主流程（label: "通过"/"是"）
+  - 错误分支：指向错误节点（label: "失败"/"否"）
+
+### 规则 4：错误分支回退
+
+- 每个错误节点都需要回退到之前的某个输入节点
+- 例如：
+  - "信息无效" → 回退到 "输入注册信息"
+  - "验证码错误" → 回退到 "输入验证码"
+
+---
+
+## 示例对话流程
+
+**User**: 画出用户注册的完整流程
+
+**Assistant**: [调用 generate_flowchart_skeleton，生成主流程骨架]
+
+**System**: 工具执行结果：已生成 10 个节点的主流程骨架，所有节点已按垂直布局排列（x: 500）
+
+**Assistant**: [调用 add_error_branches，添加错误分支]
+
+**System**: 工具执行结果：已添加 2 个错误分支，包含回退连线
+
+**Assistant**: [调用 finalize_diagram，完成图表]
+
+**System**: 工具执行结果：图表生成完成
+
+---
+
+## 注意事项
+
+1. **坐标由系统自动计算**：你只需要提供节点的 id、label、type、color，系统会自动计算 x、y、width、height
+2. **连线路由由系统自动添加**：你只需要指定 from、to、label，系统会自动添加 routing 配置
+3. **专注于流程拆解**：你的核心任务是正确理解用户需求，拆解出合理的流程步骤
+4. **使用工具循序渐进**：不要一次性生成所有内容，按照三步流程逐步完成
+
+---
+
+## 开始工作
+
+现在，根据用户的需求，开始调用工具生成流程图吧！
+
+记住：
+
+- 第 1 步：调用 `generate_flowchart_skeleton` 生成主流程
+- 第 2 步：调用 `add_error_branches` 添加错误分支（如有需要）
+- 第 3 步：调用 `finalize_diagram` 完成图表