OpenClaw多模态实践：GLM-4-7-Flash解析截图生成操作日志

OpenClaw多模态实践：GLM-4-7-Flash解析截图生成操作日志

1. 为什么需要自动化操作日志

上周我在测试一个内部工具时遇到了典型痛点：每次操作后需要手动记录点击了哪些按钮、输入了什么参数、系统返回了什么结果。这种重复劳动不仅耗时，还容易遗漏关键步骤。更麻烦的是，当测试用例失败时，仅凭文字日志很难还原当时的界面状态。

这让我开始思考：能否让AI自动观察屏幕变化，并生成人类可读的操作日志？经过多次尝试，最终通过OpenClaw+GLM-4-7-Flash实现了这个需求。这个方案特别适合需要视觉反馈的自动化场景，比如：

• 软件测试中的界面交互验证
• 周期性监控关键业务指标
• 教学演示的步骤回溯
• 远程协助时的操作审计

2. 技术方案设计

2.1 核心组件选型

整个系统由三个关键部分组成：

1. OpenClaw：负责屏幕捕捉和操作执行
2. GLM-4-7-Flash模型：解析截图并生成自然语言描述
3. 自定义技能模块：处理任务调度和日志格式化

选择GLM-4-7-Flash主要考虑其多模态能力和推理速度。相比更大规模的模型，这个7B参数的版本在保持足够精度的同时，响应速度更适合实时性要求较高的场景。

2.2 工作流程设计

系统运行时遵循以下流程：

1. 定时触发屏幕捕捉（默认5秒间隔）
2. 将当前截图与前一帧进行差异检测
3. 将有变化的区域发送给GLM模型分析
4. 模型返回自然语言描述
5. 将描述与时间戳存入Markdown日志文件

# 伪代码展示核心逻辑 while True: current_screenshot = capture_screen() diff_regions = compare_with_previous(current_screenshot) if diff_regions: description = glm4_analyze(diff_regions) append_to_log(description) sleep(interval)

3. 具体实现步骤

3.1 环境准备

首先需要部署好基础环境：

# 安装OpenClaw（Mac环境示例） curl -fsSL https://openclaw.ai/install.sh | bash openclaw onboard --provider ollama --model glm-4-7-flash

配置模型服务时，特别注意在~/.openclaw/openclaw.json中正确设置Ollama端点：

{ "models": { "providers": { "ollama": { "baseUrl": "http://localhost:11434", "api": "ollama", "models": [ { "id": "glm-4-7-flash", "name": "GLM-4-7-Flash" } ] } } } }

3.2 开发截图分析技能

创建一个自定义Skill来处理截图分析任务：

// skills/screenshot-analyser/index.js module.exports = { name: "screenshot-analyser", actions: { async analyzeScreenshot(ctx) { const { imagePath, previousImagePath } = ctx.params; // 调用OpenClaw原生截图比对能力 const diffResult = await ctx.call("diff-images", { current: imagePath, previous: previousImagePath }); // 调用GLM模型分析差异 const analysis = await ctx.call("models.query", { provider: "ollama", model: "glm-4-7-flash", prompt: `分析这两张截图的差异，用自然语言描述发生了什么变化。重点关注： - 新增或消失的UI元素 - 数值变化 - 状态指示器变化 - 可能的用户操作 图片1: ${diffResult.region1} 图片2: ${diffResult.region2}` }); return analysis.response; } } }

3.3 配置定时任务

通过OpenClaw的调度系统设置定时任务：

# ~/.openclaw/tasks/screenshot-logger.yml tasks: - name: periodic-screenshot schedule: "*/5 * * * * *" # 每5秒执行 actions: - name: capture-and-analyze type: script script: | # 捕获当前屏幕 CURRENT_SCREEN="/tmp/current_$(date +%s).png" openclaw screenshot --output $CURRENT_SCREEN # 获取上一张截图 PREVIOUS_SCREEN=$(ls -t /tmp/current_*.png | head -2 | tail -1) # 分析差异 ANALYSIS=$(openclaw call screenshot-analyser/analyzeScreenshot \ --imagePath $CURRENT_SCREEN \ --previousImagePath $PREVIOUS_SCREEN) # 记录日志 echo "[$(date)] $ANALYSIS" >> ~/operation_log.md

4. 实际应用效果

4.1 测试场景示例

在测试一个电商后台系统时，自动化日志成功捕获了以下关键操作：

[2024-03-15 14:23:05] 用户点击了"新增商品"按钮，界面切换到商品编辑表单 [2024-03-15 14:23:22] 在"商品名称"输入框中输入了"夏季新款T恤" [2024-03-15 14:23:40] 价格字段从0.00变为199.00 [2024-03-15 14:23:55] 点击了"保存"按钮，出现绿色提示条"保存成功"

4.2 性能考量

在MacBook Pro (M2, 16GB)上测试：

• 单次分析耗时：1.2-1.8秒
• CPU占用峰值：35%
• 内存占用：约800MB（主要来自GLM模型）

对于需要更高频率捕捉的场景，可以考虑以下优化：

1. 降低截图分辨率
2. 只捕捉特定窗口区域
3. 使用更轻量级的差异检测算法

5. 踩坑与解决方案

5.1 截图时机问题

最初实现时发现模型经常误报"无变化"，排查发现是因为在界面动画过程中截图。解决方案是：

// 在关键操作后添加延迟 await page.click('#submit-btn'); await new Promise(resolve => setTimeout(resolve, 500)); // 等待动画完成

5.2 模型理解偏差

GLM有时会将界面元素误认为是其他类型（如把进度条当成温度计）。通过改进提示词解决了这个问题：

请以专业测试人员视角分析界面变化，特别注意： - 按钮状态（禁用/启用、选中/未选中） - 表单字段值变化 - 通知/提示消息出现 - 数据表格的增删改

5.3 日志冗余问题

连续截图会产生大量相似条目。通过添加变化显著性阈值过滤：

if diff_area < (total_area * 0.05): # 变化区域小于5%则忽略 return None

6. 扩展应用场景

这个基础框架可以扩展支持更多专业场景：

• 软件测试：自动验证界面是否符合预期状态
• 操作审计：记录敏感系统的每一步操作
• 教学演示：自动生成操作教程
• 远程协助：帮助诊断用户操作问题

一个特别有用的变种是为CI/CD管道添加视觉回归测试：

steps: - name: visual-regression run: | openclaw screenshot --output current.png openclaw compare --base base.png --current current.png openclaw call glm-analyzer/check-ui-changes

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。