开发日记 on LiaoKE

Page-agent项目改进日志

Sun, 14 Jun 2026 00:00:00 +0000

前言

有一次在linux.do上逛的时候,发现了一个有趣的项目(page-agent),可以用自然语言让ai控制网页，不像传统的自动化网页方案，需要利用Python使用有头或者无头浏览器之类的。这个项目直接是作为js脚本，直接可以嵌入或hook在浏览器中,不需要依赖Python或者其他的东西,更简单易用，好上手。

思考

不过很可惜，原项目是完全基于网页dom文本化的操作方案，网页上的图片信息并不会输出在给ai的文本信息里面，也就是说无法识别网页图片，并且在在网页的文字识别上也加了很多限制，有时候有一些网站的有效信息无法被正常识别。于是乎我想研究一下，看一下能不能在原项目的基础上，让它支持识别图片，并且可以识别更多的网页文字。在经过几天的努力，也是终于把这两个问题给搞定了。

改进方法

一、让 AI 识别图片：将图片链接注入 DOM 树

原项目在生成 DOM 树字符串时，默认的属性白名单 r 中 不包含 src，因此 <img> 标签的链接不会传递给 AI。此外，图片元素通常不被标记为“可交互”，导致其属性在 F() 函数中根本不会被提取。

修改步骤：

将 src 加入属性白名单
在 flatTreeToString 函数的开头，r 数组中添加 'src'，这样 src 属性就会在 matchAttributes 中被匹配并输出。
在 dom_tree_default 的 F() 函数中手动提取 <img> 的属性
原代码只有满足 k(e)（交互元素）或 iframe/body 的元素才会提取属性。我们在 F() 中增加一个分支：当 e.tagName.toLowerCase() === 'img' 时，手动将其所有属性复制到 r.attributes 对象中。
在 flatTreeToString 中为 <img> 特殊输出
在 u() 函数中，当遇到 e.tagName === 'img' 时，直接输出 <img src="..." alt="..." /> 格式，并附带 [图片链接: ...] 标记，便于 AI 识别。为了避免输出 data:image 等内嵌图片，用正则过滤掉 Base64 链接。

效果：
AI 收到的 <browser_state> 中会出现如 [图片链接: https://example.com/photo.jpg] 的信息，AI 知道这是一张图片，可以调用后续的工具来识别。

二、突破文字识别限制：移除文本节点的可见性过滤

原项目对文本节点的输出设有多重限制：

l(e) 检查：若文本位于可交互元素内部则跳过。
isTopElement 检查：只有父元素是“顶层元素”（未被遮挡、不在视口外）时才输出。
isVisible 检查：父元素必须可见（offsetWidth/Height > 0 且 CSS 未隐藏）。

这些限制导致许多嵌套较深或位置特殊的文本（如 Monaco 编辑器内的代码、被 overflow: hidden 包裹的内容）无法被 AI 读取。

修改步骤：

移除 l(e) 检查：在 flatTreeToString 中删除 if (l(e)) return; 这一行。
移除 isTopElement 检查：将文本输出的条件从 e.parent.isTopElement 改为直接忽略，只保留 e.parent.isVisible（或完全去掉，保留所有可见文本）。
放宽 x(e) 函数：在 dom_tree_default 中，将 x(e) 改为始终返回 true，让所有文本节点都被视为可见，不会被丢弃。
可选：移除 C(e) 中的尺寸检查：如果希望进一步解除限制，可将 C(e) 中的 offsetWidth > 0 && offsetHeight > 0 条件改为始终 true，但这会导致大量不可见元素被纳入，建议谨慎。

效果：
现在几乎所有可见的文本节点都会被输出，包括代码编辑器内部的代码、被遮挡的说明文字、侧边栏小字等。AI 的上下文信息量显著增加，但同时 token 消耗也会上升，可根据实际场景调整。

三、让 AI 自主调用图片识别工具

仅让 AI “看到”图片链接还不够，还需要让它能够理解图片内容。我们增加一个自定义工具 recognize_image，AI 可以调用它来识别指定 URL 的图片，并将结果写回图片的 alt 属性。

工具定义（使用 Zod 进行参数校验）：

recognize_image: {
  description: '识别指定 URL 的图片内容，将识别结果写入该图片的 alt 属性，并返回描述文本。',
  inputSchema: z.object({
    imageUrl: z.string().url(),
  }),
  execute: async function (input, { signal }) {
    const { imageUrl } = input;
    // 优先尝试直接使用 URL，失败则转换为 Base64
    // 调用视觉 API（如 Qwen-VL、GPT-4V 等）
    const response = await fetch('...', { ... });
    const description = ...; // 从 API 响应中提取描述
    // 查找页面中对应的 img 元素，写入 alt
    const img = document.querySelector(`img[src="${imageUrl}"]`);
    if (img) img.alt = description;
    return `图片识别完成，描述为：“${description}”`;
  }
}

总结

于是乎，在经过了以上这些操作，成功让原项目支持了图片识别以及解除了一些网页文字识别的限制。以下是我改进版的仓库地址 https://github.com/iliaoke/page-agent

用cloudflare worker实现telegram bot | 开发日记

Mon, 20 Oct 2025 00:00:00 +0000

这段时间闲着没事，想做一个 Telegram Bot 来玩玩。了解了一下，可实施的开发方案还挺多的，Java/Python 等等都有相对应的库。但是奈何我没有服务器，无法进行传统的前后端开发。

于是乎，我想到了另一种开发思路：利用 Cloudflare 提供的 Serverless 无状态 JavaScript Worker 以及 Telegram Bot 官方支持的 Webhook 功能来实现无服务器聊天机器人。

实现原理

我们在聊天机器人的界面发送命令：

`1`	`/chat 聊天内容`

通过设置 Webhook 地址指向 Worker，Worker 中写好处理指令的代码，截取 /开始 后面的文字，然后转发给 Cloudflare 官方提供的免费的大语言模型后端，然后再处理返回的信息，最后再通过 Telegram Bot API 再返回消息到客户端。

这样便实现了无服务器的聊天 AI Bot，但是这有个缺点：用户的每一次聊天都是单独的一次请求，bot没有上下文记忆,因为 Worker 本身是个无状态的js执行器，所以这个 Bot 其实相当于是一个图形化的终端命令请求器。

但是 Cloudflare 有提供免费的额外的 KV 数据库，于是我们再改动一下代码：

用户发来的文字不直接请求大语言模型后端
而是先存入 KV 数据库
最后将 KV 数据库里的数据一起再发给大语言模型后端
处理返回的信息
返回 Telegram 客户端

于是Worker通过外挂KV数据库，最终便实现了带有记忆的无服务器聊天 AI 机器人。

实现源代码

const TELEGRAM_BOT_TOKEN = "";
const CF_API_TOKEN = "";

async function run(model, input) {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/1f5b3d5417456835c8191a2ec42f449e/ai/run/${model}`,
    {
      headers: { Authorization: `Bearer ${CF_API_TOKEN}` },
      method: "POST",
      body: JSON.stringify(input),
    }
  );
  return await response.json();
}

async function sendTelegramMessage(chat_id, text) {
  try {
    await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        chat_id,
        text,
        parse_mode: "MarkdownV2", 
      }),
    });
  } catch (err) {
    console.error("发送 Telegram 消息失败:", err);
  }
}

export default {
  async fetch(request, env, ctx) {
    if (request.method !== "POST") return new Response("ok", { status: 200 });

    try {
      const data = await request.json();
      console.log("Telegram Update:", JSON.stringify(data));

      const message = data.message;
      if (!message?.text) return new Response("ok", { status: 200 });

      const text = message.text;
      const match = text.match(/^\/chat(?:@\w+)?(?:\s+([\s\S]+))?$/);
      const arg = match ? (match[1] || "").trim() : "";

      console.log("完整消息文本:", text);
      console.log("命令参数:", arg);
         
      if (!arg) {
        await sendTelegramMessage(message.chat.id, "请在 /chat 后输入要生成的内容，例如：/chat 写一个小故事");
      } else {
        
        let history = await env.bot.get(message.chat.id);
        history = history ? JSON.parse(history) : [];
        history.push({ role: "user", content: arg });
        await env.bot.put(message.chat.id, JSON.stringify(history));
      
        const aiResponse = await run("@cf/openai/gpt-oss-120b", {
          instructions: '你是liaoke的私人中文AI助手，简洁地回答用户的问题。',
          reasoning: { "effort": "medium" },
          input: history,
        });

        console.log("AI 原始响应:", JSON.stringify(aiResponse));

       
        const reasonText = aiResponse?.result?.output
          ?.filter(o => o.type === "reasoning")
          ?.map(o => o.content?.map(c => c.text).join("\n"))
          .filter(Boolean)
          .join("\n\n") || "AI 无法生成内容";

        const outputText = aiResponse?.result?.output
          ?.filter(o => o.type === "message")
          ?.map(o => o.content?.map(c => c.text).join("\n"))
          .filter(Boolean)
          .join("\n\n") || "AI 无法生成内容";

       
        const escapeMD = (text) => {
          if (!text) return "";
          return text
            .replace(/\\/g, "\\\\")
            .replace(/`/g, "\\`")
            .replace(/_/g, "\\_")
            .replace(/\*/g, "\\*")
            .replace(/\[/g, "\\[")
            .replace(/\]/g, "\\]")
            .replace(/~/g, "\\~")
            .replace(/>/g, "\\>")
            .replace(/#/g, "\\#")
            .replace(/\+/g, "\\+")
            .replace(/-/g, "\\-")
            .replace(/=/g, "\\=")
            .replace(/\|/g, "\\|")
            .replace(/\{/g, "\\{")
            .replace(/\}/g, "\\}")
            .replace(/\./g, "\\.")
            .replace(/!/g, "\\!");
        };

     
        const messageMD = `
🧠 推理过程：
\`\`\`
${escapeMD(reasonText)}
\`\`\`

💬 最终回答：
${escapeMD(outputText)}
        `;

   
        await sendTelegramMessage(message.chat.id, messageMD);
        history.push({ role: "assistant", content: outputText });
        await env.bot.put(message.chat.id, JSON.stringify(history));
        console.log("AI 输出发送给用户:", messageMD);
      }

      return new Response("ok", { status: 200 });
    } catch (err) {
      console.error("解析 JSON 或处理失败:", err);
      return new Response("error", { status: 400 });
    }
  },
};