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-EmployeAI-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 章节。⚙️ 聊天识屏是如何工作的整个流程可以概括为「四步走」无需你写任何代码提问你在侧边栏输入问题消息经client/extension/src/lib/ui/components/Message/input.tsx发出并通过client/extension/src/lib/ui/utils/types.ts中定义的NEW_MESSAGE事件传递给后台脚本。识屏后台脚本client/extension/src/lib/worker/message.ts会同时抓取两样东西——当前标签页的完整 HTML 结构和屏幕截图连同你的提问一起发给后端。思考后端/execute接口server/src/api/execute.rs把页面 DOM 索引进 MeiliSearch并把截图以图片形式发给 GPT-4 Vision 模型server/src/common/gpt/action.rs。回答模型根据提示词模板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还内置了多种专门能力动作说明典型问法summarize总结页面上可见的文字「用三句话总结这篇长文」answer回答关于当前页面的问题「表格中 2024 年的增长率是多少」translate翻译页面文本「把这段德文翻译成中文」code_generation根据页面内容生成代码「把这张流程图转成伪代码」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动作会基于当前页内容作答比全网搜索更贴合你正在看的内容。 如何快速开始聊天识屏克隆代码后按根目录 README.md 说明配置.env文件需要 OpenAI API Key 与 Firebase 凭证。执行npm install安装依赖再运行npm run dev启动开发模式。构建产物会出现在client/extension/build文件夹在浏览器中将其作为已解压的扩展程序加载。打开任意网页点开插件侧边栏在输入框中直接提问即可体验「和你看到的内容对话」。 小提示识屏问答与自动化工作流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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考