inspiration-agent 0.0.1

package/dist/tools/browser.tools.js

@@ -0,0 +1,814 @@
+const puppeteer = require("puppeteer");
+const logger = require("../utils/logger");
+const sharp = require("sharp");
+const fs = require("fs").promises;
+
+/**
+ * 浏览器自动化工具类
+ * 提供基于 Puppeteer 的浏览器自动化功能
+ */
+class BrowserTools {
+  constructor() {
+    this.browser = null;
+    this.page = null;
+  }
+
+  /**
+   * 启动浏览器
+   * @param {Object} args - 参数对象
+   * @param {boolean} args.headless - 是否无头模式，默认 true
+   * @returns {Promise<Object>} 操作结果
+   */
+  async launchBrowser(args) {
+    try {
+      const { headless = true } = args;
+
+      logger.info(`\n========== 启动浏览器 ==========`);
+      logger.info(`无头模式: ${headless}`);
+      logger.info(`================================\n`);
+
+      if (this.browser) {
+        logger.info(`\n========== 浏览器已在运行 ==========\n`);
+        return {
+          success: true,
+          headless: headless,
+          message: "浏览器已在运行",
+        };
+      }
+
+      this.browser = await puppeteer.launch({
+        headless: headless ? "new" : false,
+        args: [
+          "--no-sandbox",
+          "--disable-setuid-sandbox",
+          "--disable-blink-features=AutomationControlled",
+          "--disable-dev-shm-usage",
+          "--disable-gpu",
+          "--no-first-run",
+          "--no-default-browser-check",
+          "--disable-background-timer-throttling",
+          "--disable-backgrounding-occluded-windows",
+          "--disable-renderer-backgrounding",
+          "--disable-features=TranslateUI",
+          "--disable-ipc-flooding-protection",
+          "--window-size=1920,1080",
+        ],
+        executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+        ignoreDefaultArgs: ["--enable-automation"],
+      });
+
+      this.page = await this.browser.newPage();
+
+      await this.page.setUserAgent(
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
+      );
+
+      await this.page.setViewport({ width: 1920, height: 1080 });
+
+      await this.page.evaluateOnNewDocument(() => {
+        Object.defineProperty(navigator, "webdriver", {
+          get: () => false,
+        });
+
+        Object.defineProperty(navigator, "plugins", {
+          get: () => [1, 2, 3, 4, 5],
+        });
+
+        Object.defineProperty(navigator, "languages", {
+          get: () => ["zh-CN", "zh", "en"],
+        });
+
+        Object.defineProperty(navigator, "platform", {
+          get: () => "MacIntel",
+        });
+
+        window.chrome = {
+          runtime: {},
+        };
+
+        Object.defineProperty(navigator, "permissions", {
+          get: () => ({
+            query: () => Promise.resolve({ state: "granted" }),
+          }),
+        });
+
+        const originalQuery = window.navigator.permissions.query;
+        window.navigator.permissions.query = (parameters) =>
+          parameters.name === "notifications"
+            ? Promise.resolve({ state: Notification.permission })
+            : originalQuery(parameters);
+
+        Object.defineProperty(navigator, "hardwareConcurrency", {
+          get: () => 8,
+        });
+
+        Object.defineProperty(navigator, "deviceMemory", {
+          get: () => 8,
+        });
+
+        Object.defineProperty(navigator, "maxTouchPoints", {
+          get: () => 0,
+        });
+
+        window.outerHeight = window.innerHeight;
+        window.outerWidth = window.innerWidth;
+
+        const originalGetContext = HTMLCanvasElement.prototype.getContext;
+        HTMLCanvasElement.prototype.getContext = function (type) {
+          const context = originalGetContext.call(this, type);
+          if (type === "2d") {
+            const originalGetImageData = context.getImageData;
+            context.getImageData = function () {
+              return originalGetImageData.apply(this, arguments);
+            };
+          }
+          return context;
+        };
+      });
+
+      logger.info(`\n========== 浏览器启动成功 ==========`);
+      logger.info(`====================================\n`);
+
+      return {
+        success: true,
+        headless: headless,
+        message: "浏览器启动成功",
+      };
+    } catch (error) {
+      logger.info(`\n========== 浏览器启动失败 ==========`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`====================================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `浏览器启动失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 确保浏览器已启动
+   * 如果浏览器未启动，自动启动
+   * @returns {Promise<boolean>} 是否成功启动
+   */
+  async ensureBrowser() {
+    if (!this.browser) {
+      const result = await this.launchBrowser({});
+      return result.success;
+    }
+    return true;
+  }
+
+  /**
+   * 导航到指定 URL
+   * @param {Object} args - 参数对象
+   * @param {string} args.url - 目标 URL
+   * @param {number} args.timeout - 超时时间（毫秒），默认 30000
+   * @returns {Promise<Object>} 操作结果
+   */
+  async navigateTo(args) {
+    try {
+      const { url, timeout = 30000 } = args;
+
+      await this.ensureBrowser();
+
+      if (!url) {
+        return {
+          success: false,
+          error: "缺少 url 参数",
+          message: "导航失败: 缺少 URL",
+        };
+      }
+
+      logger.info(`\n========== 导航到页面 ==========`);
+      logger.info(`URL: ${url}`);
+      logger.info(`超时: ${timeout}ms`);
+      logger.info(`================================\n`);
+
+      await this.page.goto(url, { waitUntil: "networkidle2", timeout });
+
+      const pageTitle = await this.page.title();
+      const pageUrl = this.page.url();
+
+      logger.info(`\n========== 导航成功 ==========`);
+      logger.info(`页面标题: ${pageTitle}`);
+      logger.info(`页面 URL: ${pageUrl}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: true,
+        url: pageUrl,
+        title: pageTitle,
+        message: `成功导航到: ${url}`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 导航失败 ==========`);
+      logger.info(`URL: ${args.url}`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `导航失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 点击页面元素
+   * @param {Object} args - 参数对象
+   * @param {string} args.selector - CSS 选择器
+   * @param {number} args.timeout - 等待超时时间（毫秒），默认 5000
+   * @returns {Promise<Object>} 操作结果
+   */
+  async clickElement(args) {
+    try {
+      const { selector, timeout = 5000 } = args;
+
+      await this.ensureBrowser();
+
+      if (!selector) {
+        return {
+          success: false,
+          error: "缺少 selector 参数",
+          message: "点击失败: 缺少选择器",
+        };
+      }
+
+      logger.info(`\n========== 点击元素 ==========`);
+      logger.info(`选择器: ${selector}`);
+      logger.info(`超时: ${timeout}ms`);
+      logger.info(`=============================\n`);
+
+      await this.page.waitForSelector(selector, { timeout });
+      await this.page.click(selector);
+
+      logger.info(`\n========== 点击成功 ==========\n`);
+
+      return {
+        success: true,
+        selector: selector,
+        message: `成功点击元素: ${selector}`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 点击失败 ==========`);
+      logger.info(`选择器: ${args.selector}`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `点击失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 填写表单输入
+   * @param {Object} args - 参数对象
+   * @param {string} args.selector - CSS 选择器
+   * @param {string} args.value - 要输入的值
+   * @param {number} args.timeout - 等待超时时间（毫秒），默认 5000
+   * @returns {Promise<Object>} 操作结果
+   */
+  async fillInput(args) {
+    try {
+      const { selector, value, timeout = 5000 } = args;
+
+      await this.ensureBrowser();
+
+      if (!selector || value === undefined) {
+        return {
+          success: false,
+          error: "缺少 selector 或 value 参数",
+          message: "填写失败: 缺少必要参数",
+        };
+      }
+
+      logger.info(`\n========== 填写输入框 ==========`);
+      logger.info(`选择器: ${selector}`);
+      logger.info(`值: ${value}`);
+      logger.info(`超时: ${timeout}ms`);
+      logger.info(`================================\n`);
+
+      await this.page.waitForSelector(selector, { timeout });
+      await this.page.type(selector, value);
+
+      logger.info(`\n========== 填写成功 ==========\n`);
+
+      return {
+        success: true,
+        selector: selector,
+        value: value,
+        message: `成功填写输入框: ${selector}`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 填写失败 ==========`);
+      logger.info(`选择器: ${args.selector}`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `填写失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 获取页面内容
+   * @param {Object} args - 参数对象
+   * @param {string} args.selector - CSS 选择器，可选，默认获取整个页面
+   * @returns {Promise<Object>} 操作结果
+   */
+  async getPageContent(args) {
+    try {
+      const { selector } = args;
+
+      await this.ensureBrowser();
+
+      logger.info(`\n========== 获取页面内容 ==========`);
+      logger.info(`选择器: ${selector || "整个页面"}`);
+      logger.info(`==================================\n`);
+
+      let content;
+      if (selector) {
+        const element = await this.page.$(selector);
+        if (!element) {
+          return {
+            success: false,
+            error: "元素未找到",
+            message: `未找到元素: ${selector}`,
+          };
+        }
+        content = await this.page.evaluate((el) => el.textContent, element);
+      } else {
+        content = await this.page.evaluate(() => document.body.textContent);
+      }
+
+      const title = await this.page.title();
+      const url = this.page.url();
+
+      logger.info(`\n========== 获取成功 ==========`);
+      logger.info(`内容长度: ${content.length} 字符`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: true,
+        url: url,
+        title: title,
+        content: content,
+        selector: selector,
+        message: `成功获取页面内容`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 获取失败 ==========`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `获取页面内容失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 截取页面截图
+   * @param {Object} args - 参数对象
+   * @param {string} args.path - 保存路径，可选
+   * @param {string} args.selector - CSS 选择器，可选，截取指定元素
+   * @param {number} args.quality - 压缩质量（1-100），默认 80
+   * @param {number} args.maxWidth - 最大宽度（像素），可选
+   * @param {number} args.maxHeight - 最大高度（像素），可选
+   * @returns {Promise<Object>} 操作结果
+   */
+  async takeScreenshot(args) {
+    try {
+      const { path, selector, quality = 80, maxWidth, maxHeight } = args;
+
+      await this.ensureBrowser();
+
+      logger.info(`\n========== 截图 ==========`);
+      logger.info(`路径: ${path || "不保存"}`);
+      logger.info(`选择器: ${selector || "整个页面"}`);
+      logger.info(`压缩质量: ${quality}`);
+      logger.info(`最大尺寸: ${maxWidth ? maxWidth + "x" + maxHeight : "不限制"}`);
+      logger.info(`===========================\n`);
+
+      let screenshot;
+      if (selector) {
+        const element = await this.page.$(selector);
+        if (!element) {
+          return {
+            success: false,
+            error: "元素未找到",
+            message: `未找到元素: ${selector}`,
+          };
+        }
+        screenshot = await element.screenshot({ encoding: "base64" });
+      } else {
+        screenshot = await this.page.screenshot({ encoding: "base64", fullPage: true });
+      }
+
+      if (path) {
+        const tempPath = path.replace(/(\.[^.]+)$/, "_temp$1");
+        await this.page.screenshot({ path: tempPath, fullPage: !selector });
+
+        let sharpInstance = sharp(tempPath);
+
+        if (maxWidth || maxHeight) {
+          sharpInstance = sharpInstance.resize(maxWidth || null, maxHeight || null, {
+            fit: "inside",
+            withoutEnlargement: true,
+          });
+        }
+
+        const ext = path.split(".").pop().toLowerCase();
+        if (ext === "jpg" || ext === "jpeg") {
+          sharpInstance = sharpInstance.jpeg({ quality });
+        } else if (ext === "png") {
+          sharpInstance = sharpInstance.png({ quality: Math.round(quality / 10) });
+        } else if (ext === "webp") {
+          sharpInstance = sharpInstance.webp({ quality });
+        } else {
+          sharpInstance = sharpInstance.jpeg({ quality });
+        }
+
+        await sharpInstance.toFile(path);
+
+        const originalStats = await fs.stat(tempPath);
+        const compressedStats = await fs.stat(path);
+        await fs.unlink(tempPath);
+
+        logger.info(`\n========== 压缩完成 ==========`);
+        logger.info(`原始大小: ${originalStats.size} 字节`);
+        logger.info(`压缩后: ${compressedStats.size} 字节`);
+        logger.info(
+          `压缩率: ${((1 - compressedStats.size / originalStats.size) * 100).toFixed(2)}%`
+        );
+        logger.info(`=============================\n`);
+      }
+
+      logger.info(`\n========== 截图成功 ==========\n`);
+
+      return {
+        success: true,
+        path: path,
+        screenshot: screenshot,
+        selector: selector,
+        message: `成功截图${path ? `，保存到: ${path}` : ""}`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 截图失败 ==========`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `截图失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 等待元素出现
+   * @param {Object} args - 参数对象
+   * @param {string} args.selector - CSS 选择器
+   * @param {number} args.timeout - 超时时间（毫秒），默认 30000
+   * @returns {Promise<Object>} 操作结果
+   */
+  async waitForElement(args) {
+    try {
+      const { selector, timeout = 30000 } = args;
+
+      await this.ensureBrowser();
+
+      if (!selector) {
+        return {
+          success: false,
+          error: "缺少 selector 参数",
+          message: "等待失败: 缺少选择器",
+        };
+      }
+
+      logger.info(`\n========== 等待元素 ==========`);
+      logger.info(`选择器: ${selector}`);
+      logger.info(`超时: ${timeout}ms`);
+      logger.info(`===========================\n`);
+
+      await this.page.waitForSelector(selector, { timeout });
+
+      logger.info(`\n========== 元素已出现 ==========\n`);
+
+      return {
+        success: true,
+        selector: selector,
+        message: `元素已出现: ${selector}`,
+      };
+    } catch (error) {
+      logger.info(`\n========== 等待超时 ==========`);
+      logger.info(`选择器: ${args.selector}`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `等待元素超时: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 执行 JavaScript 代码
+   * @param {Object} args - 参数对象
+   * @param {string} args.script - JavaScript 代码
+   * @returns {Promise<Object>} 操作结果
+   */
+  async executeScript(args) {
+    try {
+      const { script } = args;
+
+      await this.ensureBrowser();
+
+      if (!script) {
+        return {
+          success: false,
+          error: "缺少 script 参数",
+          message: "执行失败: 缺少脚本",
+        };
+      }
+
+      logger.info(`\n========== 执行脚本 ==========`);
+      logger.info(`脚本: ${script.substring(0, 100)}...`);
+      logger.info(`=============================\n`);
+
+      const result = await this.page.evaluate(script);
+
+      logger.info(`\n========== 执行成功 ==========\n`);
+
+      return {
+        success: true,
+        result: result,
+        message: "脚本执行成功",
+      };
+    } catch (error) {
+      logger.info(`\n========== 执行失败 ==========`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `脚本执行失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 关闭浏览器
+   * @param {Object} args - 参数对象（未使用）
+   * @returns {Promise<Object>} 操作结果
+   */
+  async closeBrowser(args) {
+    try {
+      if (!this.browser) {
+        return {
+          success: false,
+          error: "浏览器未启动",
+          message: "浏览器未运行",
+        };
+      }
+
+      logger.info(`\n========== 关闭浏览器 ==========\n`);
+
+      await this.browser.close();
+      this.browser = null;
+      this.page = null;
+
+      logger.info(`\n========== 浏览器已关闭 ==========\n`);
+
+      return {
+        success: true,
+        message: "浏览器已关闭",
+      };
+    } catch (error) {
+      logger.info(`\n========== 关闭失败 ==========`);
+      logger.info(`错误: ${error.message}`);
+      logger.info(`=============================\n`);
+
+      return {
+        success: false,
+        error: error.message,
+        message: `关闭浏览器失败: ${error.message}`,
+      };
+    }
+  }
+
+  /**
+   * 获取函数定义
+   * 返回所有浏览器工具的函数定义，用于 OpenAI 函数调用格式
+   * @returns {Array<Object>} 函数定义数组
+   */
+  getFunctionDefinitions() {
+    return [
+      {
+        type: "function",
+        function: {
+          name: "launch_browser",
+          description: "启动浏览器实例（如果已启动则复用现有实例），支持多轮对话保持浏览器状态",
+          parameters: {
+            type: "object",
+            properties: {
+              headless: {
+                type: "boolean",
+                description: "是否使用无头模式（不显示浏览器界面），默认 true",
+                default: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "navigate_to",
+          description: "导航到指定的 URL（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              url: {
+                type: "string",
+                description: "要访问的网页 URL，必须以 http:// 或 https:// 开头",
+              },
+              timeout: {
+                type: "integer",
+                description: "页面加载超时时间（毫秒），默认 30000",
+                default: 30000,
+              },
+            },
+            required: ["url"],
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "click_element",
+          description: "点击页面上的元素（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              selector: {
+                type: "string",
+                description:
+                  "CSS 选择器，如 '#submit-btn', '.login-button', 'input[type=\"submit\"]'",
+              },
+              timeout: {
+                type: "integer",
+                description: "等待元素出现的超时时间（毫秒），默认 5000",
+                default: 5000,
+              },
+            },
+            required: ["selector"],
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "fill_input",
+          description: "在输入框中填写内容（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              selector: {
+                type: "string",
+                description: "CSS 选择器，如 '#username', 'input[name=\"email\"]'",
+              },
+              value: {
+                type: "string",
+                description: "要输入的文本内容",
+              },
+              timeout: {
+                type: "integer",
+                description: "等待输入框出现的超时时间（毫秒），默认 5000",
+                default: 5000,
+              },
+            },
+            required: ["selector", "value"],
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "get_page_content",
+          description: "获取页面文本内容（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              selector: {
+                type: "string",
+                description: "CSS 选择器，可选，如果不提供则获取整个页面的内容",
+              },
+            },
+          },
+        },
+      },
+      // {
+      //   type: "function",
+      //   function: {
+      //     name: "take_screenshot",
+      //     description: "截取页面或元素的截图，支持图片压缩和尺寸调整（如果浏览器未启动会自动启动）",
+      //     parameters: {
+      //       type: "object",
+      //       properties: {
+      //         path: {
+      //           type: "string",
+      //           description: "截图保存路径，如 'screenshot.png'，可选",
+      //         },
+      //         selector: {
+      //           type: "string",
+      //           description: "CSS 选择器，可选，截取指定元素，不提供则截取整个页面",
+      //         },
+      //         quality: {
+      //           type: "integer",
+      //           description: "压缩质量（1-100），默认 80，数值越小压缩率越高",
+      //           default: 80,
+      //         },
+      //         maxWidth: {
+      //           type: "integer",
+      //           description: "最大宽度（像素），可选，超过此宽度会等比缩放",
+      //         },
+      //         maxHeight: {
+      //           type: "integer",
+      //           description: "最大高度（像素），可选，超过此高度会等比缩放",
+      //         },
+      //       },
+      //     },
+      //   },
+      // },
+      {
+        type: "function",
+        function: {
+          name: "wait_for_element",
+          description: "等待页面元素出现（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              selector: {
+                type: "string",
+                description: "CSS 选择器，如 '#loading', '.content'",
+              },
+              timeout: {
+                type: "integer",
+                description: "等待超时时间（毫秒），默认 30000",
+                default: 30000,
+              },
+            },
+            required: ["selector"],
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "execute_script",
+          description: "在页面中执行 JavaScript 代码（如果浏览器未启动会自动启动）",
+          parameters: {
+            type: "object",
+            properties: {
+              script: {
+                type: "string",
+                description:
+                  "要执行的 JavaScript 代码，如 'document.title' 或 'window.scrollTo(0, 1000)'",
+              },
+            },
+            required: ["script"],
+          },
+        },
+      },
+      {
+        type: "function",
+        function: {
+          name: "close_browser",
+          description: "关闭浏览器实例",
+          parameters: {
+            type: "object",
+            properties: {},
+          },
+        },
+      },
+    ];
+  }
+}
+
+module.exports = BrowserTools;