企业官网建设流程全解析

AI-Employe 聊天识屏功能详解：如何「和你看到的内容对话」，10 个网页信息提取实用场景

【免费下载链接】AI-EmployeCreate browser automation as if you were teaching a human using GPT-4 Vision.项目地址: https://gitcode.com/gh_mirrors/ai/AI-Employe

AI-Employe 是一款基于 GPT-4 Vision 的浏览器自动化开源项目，其核心亮点之一就是「聊天识屏」（Chat with what you see）功能：在浏览器侧边栏直接提问，AI 就能看懂你当前网页上的图表、表格和正文，并即时回答、总结或翻译。本文带你快速上手这项网页信息提取能力，并给出 10 个实用场景。

🧐 什么是 AI-Employe 的聊天识屏功能？

传统 AI 助手只能「听你说」，而 AI-Employe 的识屏聊天可以让 AI「看你看到的」。打开插件侧边栏，输入框会提示你：

Ask questions about what you see (e.g., graphs, images, etc.) （问问你看到的内容，比如图表、图片等）

你可以像和坐在旁边的同事聊天一样，指着屏幕问：

• 「帮我总结这个页面讲了什么？」
• 「图中这条折线代表的趋势是什么？」
• 「把这段英文翻译成中文。」

这正是项目官方 Roadmap 中已完成的「Chat with what you see」能力，详见 README.md 的 How it Works 章节。

⚙️ 聊天识屏是如何工作的？

整个流程可以概括为「四步走」，无需你写任何代码：

1. 提问：你在侧边栏输入问题，消息经client/extension/src/lib/ui/components/Message/input.tsx发出，并通过client/extension/src/lib/ui/utils/types.ts中定义的NEW_MESSAGE事件传递给后台脚本。
2. 识屏：后台脚本（client/extension/src/lib/worker/message.ts）会同时抓取两样东西——当前标签页的完整 HTML 结构和屏幕截图，连同你的提问一起发给后端。
3. 思考：后端/execute接口（server/src/api/execute.rs）把页面 DOM 索引进 MeiliSearch，并把截图以图片形式发给 GPT-4 Vision 模型（server/src/common/gpt/action.rs）。
4. 回答：模型根据提示词模板（server/src/common/gpt/prompts.rs）生成 Markdown 格式的回复，聊天界面（client/extension/src/lib/ui/pages/messages.tsx）自动滚动展示 AI 的回答。

💡 简单理解：截图负责「看」，HTML 索引负责「精确」，GPT-4 Vision 负责「懂」，三者结合让 AI 的回答既有画面感又有细节准确性。

🛠️ AI 支持哪些屏幕理解动作？

查看server/src/common/gpt/prompts.rs中定义的动作列表，识屏聊天除了普通对话（chat），还内置了多种专门能力：

所有回复都以简洁的新闻稿风格 + Markdown 格式输出，方便直接复制使用。

📋 10 个网页信息提取实用场景

场景 1：一键总结长文要点

打开一篇上万字的行业报告，直接问「帮我总结这篇文章的 5 个核心观点」。AI 会用summarize动作提炼要点，阅读效率翻倍。

场景 2：看懂图表数据

财务页面、数据分析平台上的折线图、饼图常常只有图没有表。问一句「这张图中哪个季度增长最快？为什么？」，GPT-4 Vision 能基于截图读出趋势。

场景 3：外语页面即时翻译

浏览海外文档或新闻时，选中页面直接说「把正文翻译成中文」，translate动作会返回结构化译文，比整页机器翻译更聚焦。

场景 4：电商评论情感速览

在商品评论页提问「这些评论的普遍口碑如何？主要优缺点是什么？」，快速得到正面/负面评价的浓缩结论，辅助购买决策。

场景 5：对比表格信息提取

SaaS 官网的价格对比表往往信息密集。问「三档套餐的差异是什么？哪个适合小团队？」，AI 会跨行对比并给出建议。

场景 6：报错信息秒解

遇到红色报错堆栈？直接问「这个错误是什么意思，如何修复？」，AI 结合页面上下文（技术文档、版本号）给出针对性解释。

场景 7：表单填写指南

面对复杂的注册/申请表单，问「我需要填哪些字段？哪些是必填的？」，AI 会列出清单，避免漏填返工。

场景 8：代码片段讲解

在开源项目文档页或在线 IDE 中看到陌生代码，使用code_generation相关能力问「这段配置是干什么的？给我写个等价示例」，边看边学。

场景 9：新闻事件要素抽取

看突发新闻时提问「时间、地点、涉及人物、关键数字分别是什么？」，30 秒拿到结构化摘要，方便记录或转述。

场景 10：页面问答式学习

在读教程时把它当「随身助教」：「为什么这里要用这个参数？」「给我一个实际例子」。answer动作会基于当前页内容作答，比全网搜索更贴合你正在看的内容。

🚀 如何快速开始聊天识屏？

1. 克隆代码后，按根目录 README.md 说明配置.env文件（需要 OpenAI API Key 与 Firebase 凭证）。
2. 执行npm install安装依赖，再运行npm run dev启动开发模式。
3. 构建产物会出现在client/extension/build文件夹，在浏览器中将其作为已解压的扩展程序加载。
4. 打开任意网页，点开插件侧边栏，在输入框中直接提问，即可体验「和你看到的内容对话」。

📌 小提示：识屏问答与自动化工作流（Workflows）共用同一套 DOM 索引机制，因此除了聊天，你还可以录制操作、让 AI 按步骤自动执行浏览器任务。

✅ 总结

AI-Employe 的聊天识屏功能用「截图 + DOM 索引 + GPT-4 Vision」的组合，把「看图说话」变成了一种开箱即用的网页信息提取工具。无论是总结长文、解读图表，还是翻译外文、抽取表格数据，10 个场景中的任何一个都能帮你在日常浏览中省下大量时间。作为新手，你只需加载扩展、打开侧边栏、开口提问，就能体验让 AI 和你「看同一个屏幕」的乐趣。

【免费下载链接】AI-EmployeCreate browser automation as if you were teaching a human using GPT-4 Vision.项目地址: https://gitcode.com/gh_mirrors/ai/AI-Employe