OpenClaw浏览器自动化：Phi-3-vision-128k-instruct实现网页图文信息结构化

OpenClaw浏览器自动化Phi-3-vision-128k-instruct实现网页图文信息结构化1. 为什么需要浏览器自动化最近在做一个市场调研项目时我遇到了一个典型的数据收集难题需要从20多个不同结构的电商页面中提取商品名称、价格、主图、参数表格等半结构化数据。手动复制粘贴不仅效率低下还容易出错。更麻烦的是有些关键信息是以图片形式存在的比如价格标签的促销图标传统爬虫根本无法处理。这时候我想到了OpenClaw——这个能像人类一样操作浏览器的AI智能体框架。结合Phi-3-vision-128k-instruct多模态模型它不仅能自动访问网页还能看懂页面上的图文内容。经过一周的实践我成功搭建了一个能自动完成访问→截图→识别→结构化存储全流程的系统。下面分享我的具体实现方案和踩过的坑。2. 环境准备与模型对接2.1 基础环境搭建我的工作环境是MacBook Pro (M1芯片16GB内存)系统版本为macOS Sonoma 14.5。OpenClaw的安装非常顺利curl -fsSL https://openclaw.ai/install.sh | bash openclaw onboard --install-daemon在配置向导中我选择了Advanced模式关键配置项包括Provider: 选择Custom因为要对接本地部署的Phi-3模型Model URL: 填写本地模型的HTTP接口地址http://localhost:8000/v1启用Browser Automation基础技能模块2.2 对接Phi-3-vision-128k-instruct模型我在同一台机器上用vLLM部署了Phi-3-vision-128k-instruct模型。OpenClaw的模型配置文件~/.openclaw/openclaw.json需要特别关注多模态支持{ models: { providers: { phi3-vision-local: { baseUrl: http://localhost:8000/v1, apiKey: NULL, api: openai-completions, models: [ { id: phi-3-vision-128k-instruct, name: Phi-3 Vision Local, contextWindow: 131072, vision: true } ] } } } }这里有个关键点必须显式声明vision: true来启用多模态能力。我最初漏掉了这个配置导致系统一直把截图当作普通文本处理浪费了大半天排查时间。3. 自动化流程设计与实现3.1 核心工作流设计整个自动化流程分为四个阶段导航阶段控制浏览器打开指定URL截取阶段对目标区域进行截图理解阶段将截图和HTML片段一起送给Phi-3模型解析存储阶段将模型输出转为结构化JSON保存我通过OpenClaw的Skill机制实现了这个流程。创建一个web_extractor目录里面包含三个关键文件web_extractor/ ├── skill.json # 技能元数据 ├── parser.py # 数据处理逻辑 └── prompts/ # 提示词模板 └── vision.md3.2 关键代码实现parser.py中的核心函数展示了如何协调浏览器操作与模型调用async def extract_page_data(url, selectors): # 启动浏览器 browser await launch_browser() page await browser.newPage() # 访问目标页面 await page.goto(url, {waitUntil: networkidle2}) results {} for name, selector in selectors.items(): # 获取元素位置并截图 element await page.querySelector(selector) box await element.boundingBox() screenshot await page.screenshot({ clip: box, encoding: base64 }) # 获取元素HTML片段 html await page.evaluate( (el) el.outerHTML, element) # 调用Phi-3模型解析 response await query_phi3_vision( screenshot, html, name) results[name] parse_response(response) # 关闭浏览器并返回结果 await browser.close() return results其中query_phi3_vision函数封装了与模型的交互逻辑特别注意要同时传递图片的base64编码和原始HTMLasync def query_phi3_vision(image_b64, html, target_field): prompt load_prompt(vision.md).format( htmlhtml, fieldtarget_field ) messages [ { role: user, content: [ {type: text, text: prompt}, { type: image_url, image_url: fdata:image/png;base64,{image_b64} } ] } ] response openclaw.models.chat_completion( modelphi-3-vision-128k-instruct, messagesmessages, max_tokens4000 ) return response.choices[0].message.content3.3 提示词设计技巧在prompts/vision.md中我采用了分步引导的提示词结构你是一个专业的网页数据提取助手。请根据提供的网页截图和HTML源码完成以下任务 1. 首先整体描述你看到的页面区域内容中文 2. 然后重点提取与{field}相关的信息 3. 最后按以下JSON格式返回结果 json { field_type: 价格|图片|规格|..., field_value: 具体值, confidence: 0-1的置信度评分 }特别注意如果内容是图片用文字描述图片中的关键信息价格类信息要区分原价/促销价规格参数要提取成键值对形式这种结构化提示显著提高了模型输出的稳定性。实测发现相比简单地说提取价格信息分步骤的引导能让Phi-3的准确率提升约40%。 ## 4. 实战效果与优化经验 ### 4.1 实际运行示例 我针对三个典型场景进行了测试 1. **电商价格提取**自动识别原价、促销价、优惠标签 2. **产品参数表格**将HTML表格转换为结构化JSON 3. **图文混排内容**提取图片中的文字信息与周边文本关联 一个成功的输出示例某笔记本电脑商品页 json { product_name: { field_type: 文本, field_value: 拯救者Y9000P 2024款, confidence: 0.95 }, price: { field_type: 价格, field_value: { original: 9999, discounted: 8999, tag: 限时直降 }, confidence: 0.9 }, specs: { field_type: 规格, field_value: [ {key: 处理器, value: i9-14900HX}, {key: 显卡, value: RTX 4090}, {key: 屏幕, value: 16英寸 3.2K 165Hz} ], confidence: 0.85 } }4.2 性能优化经验经过反复测试我总结了几个关键优化点截图策略最初我截取整个页面导致图片太大、处理缓慢。后来改为优先通过CSS选择器定位目标区域对大于800x600像素的区域自动分割为多个截图设置quality: 70的参数平衡清晰度和体积模型参数调优response openclaw.models.chat_completion( temperature0.3, # 降低创造性提高稳定性 top_p0.9, frequency_penalty0.5 # 减少重复内容 )结果校验机制添加正则表达式校验价格格式如^\d\.?\d*$对置信度低于0.7的字段自动触发重新识别关键字段设置fallback机制如价格识别失败时改用OCR方案4.3 遇到的典型问题问题1模型有时会把促销标签误认为价格解决方案在提示词中明确要求区分价格数字和促销标签并添加示例问题2动态加载的内容抓取不全解决方案在page.goto()后添加滚动和等待逻辑await page.evaluate(window.scrollTo(0, document.body.scrollHeight)) await page.waitForTimeout(2000) # 等待2秒问题3Token消耗过大解决方案压缩HTML内容移除无关的script/style标签对长文本采用摘要原始内容的两段式处理设置每分钟最大请求数限制5. 应用场景扩展这个方案不仅适用于电商数据采集经过简单适配后还可以用于竞品监控自动抓取竞品官网的更新信息学术研究从期刊网站提取论文关键数据舆情分析识别新闻页面中的关键人物和事件本地化测试验证多语言网页的翻译一致性一个特别有用的变体是生成式采集——让模型根据页面内容自动建议采集字段。例如当识别到产品页时自动建议采集价格、规格、评价当识别到新闻页时建议采集标题、作者、发布时间等。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。