首页/新闻资讯/正文详情

从不误吵醒 Agent 的被动检测:lavish-axi iframe 布局审计实现深解

发布时间:2026/9/26 8:37:39 来源:云帆数科 栏目:资讯中心
从不误吵醒 Agent 的被动检测:lavish-axi iframe 布局审计实现深解
从不误吵醒 Agent 的被动检测lavish-axi iframe 布局审计实现深解【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axilavish-axi是一款面向人与 AI Agent 协作的本地优先HTML 编辑器Agent 写好 HTML 产物用户在本地浏览器里审阅可以点选元素、选中文字把反馈发回给 Agent。其中最精巧的设计是它的iframe 布局审计——一套被动检测机制能发现文字被裁切、按钮被剪掉、内容跑出视口等严重布局故障但永远不会因为发现了问题就去吵醒 Agent 。什么是被动检测先看两种思路Agent 生成的 HTML 经常看着能跑、实际有伤一段标题溢出了卡片、一个按钮被容器剪掉一半。传统思路是检测到问题就立刻通知 Agent 修复但这会带来两个麻烦误报即骚扰检测逻辑稍有噪音Agent 就会被反复唤醒去修并不存在的问题浪费轮次用户可能只是扫一眼根本不想修。lavish-axi 选择了另一条路检测永远是被动发生的。审计在 iframe 里静默运行发现的结果只落进顶部的Layout issues收件箱只有当用户手动勾选问题并点击Queue selected fixes时Agent 才会通过常规的长轮询通道收到一条layout-warnings提示。源码里把这个原则写得很直白检测从不返回lavish-axi poll从不唤醒 Agent只有用户排队修复才会。这个约定见 src/layout-warnings.js 文件头部的注释也是整个模块的设计基石。审计盯住哪 6 类严重布局故障审计只报告有直接渲染证据的严重失败规则与用户看到的大白话描述在 src/layout-warnings.js 中一一对应规则含义用户看到的描述page-horizontal-overflow页面整体横向溢出页面比视口宽内容跑到了屏幕外clipped-text文字片段越过容器裁剪边界文字被容器裁掉了clipped-control必要控件被容器剪掉一部分按钮的一部分无法使用viewport-unreachable-control必要控件在视口之外控件够不到viewport-unreachable-content文字片段在视口之外这段文字读不到overlapping-text文字被不透明兄弟元素大面积遮挡文字被盖住读不了只有severity: error的发现才会入箱见 src/layout-warnings.js轻微抖动一律忽略——宁可漏报小瑕疵不可误报。审计如何等到稳定时刻再出手浏览器里做布局测量最大的坑是测得太早字体还没加载完、动画还没结束、响应式布局还没算完。审计入口 auditLayout() 之前有一整串稳压器全部位于注入到沙盒 iframe 的 SDK 中src/artifact-sdk.js等字体document.fonts.ready——字体切换会显著改变文字几何等尺寸稳定用ResizeObserver监听前 800 个元素180ms 无变化才算稳定最多等 2 秒等有限动画结束入场动画、过渡最多等 4 秒无限动画如持续旋转的装饰则放行但动画关联的元素会被整体排除在检测之外采样两到三轮先测一遍间隔 120ms 再测一遍若 DOM 仍在水合MutationObserver 观察到变化则等其静止后再测第三轮最后只发布两轮都稳定存在的发现findStableLayoutFindings。审计会在load、resize、animationend、transitionend等事件后自动重排startLayoutAudit所以用户手动缩小窗口触发的响应式塌陷也会被捕获。如何避免误报一份精心设计的豁免清单这是该模块最见功力的部分——大量看起来越界的布局其实是作者意图审计会主动豁免src/artifact-sdk.js✂️显式省略号 / line-clamp作者想截断就不算事故标准 visually-hidden 无障碍文本2px 裁剪的 sr-only 写法有意的横向滚动容器轮播、横向列表及其后代蒙版 / 圆角裁剪mask、clip-path、带圆角的 overflow 容器属于装饰手法️装饰性重叠海报式叠字不产生文本遮挡发现正在运动的元素动画未结束时的中间态不算证据。阈值也经过校准文本要越过裁剪边界 1px 以上且中心点在界外或超过 20%才算严重classifySevereTextOverflow页面级横向溢出必须同时满足有真实内容逃出且超出max(24px, 视口宽度 5%)isMaterialPageOverflow。遮挡检测则是对文字片段取 9 个采样点做elementFromPoint不透明遮挡占比 ≥90% 且样本 ≥5才报isNearTotalOcclusion。为什么告警不会误消也不会重复刷屏发现落库后applyDiagnosticPass 按一套刻意保守的生命周期来维护记录稳定指纹规则 归一化目标 视口档位layoutWarningFingerprint生成 16 位哈希同一个问题反复检测只会更新同一条记录绝不虚增计数——溢出量甚至被刻意排除在指纹之外视口隔离mobile / compact / desktop三档视口互不干扰桌面端的通过永远不能清除手机端的告警只有正向证据能解决Resolved要求更新的产物加载 同一视口的一轮完整审计不再检出。审计失败、页面没加载完、换了一个视口统统只会把记录标成Unverified未验证而非清除状态机Open → Queued for fix → Still present / Returned外加Unverified / Dismissed / Obsolete / Resolved完整枚举见 src/layout-warnings.js每次状态迁移都写入有界的历史轨迹方便回看这条告警是怎么来的。这套规则有完整的单测覆盖test/layout-warnings.test.js 里的用例名本身就是一份需求文档例如a different viewport class can never clear a warning、a newer complete matching-viewport pass without the finding resolves it。用户视角从徽章到 Agent 修复的完整链路审计完成后顶栏出现Layout issues按钮与未解决计数没有问题时按钮直接隐藏打开抽屉每条问题展示严重程度、大白话解释、受影响视口、组件标识、最后出现时间与状态并提供Reveal在产物中高亮定位与Dismiss仅对当前产物版本生效勾选若干条或Select all点击Queue selected fixes——整批问题合并成一条普通排队提示标签为layout-warnings随用户下次发送走常规反馈通道Agent 收到的是结构化载荷每条带选择器、轴方向、溢出像素、视口档位layoutWarningPromptPayload并要求一次修完、保存一次让审阅页只刷新一次。交互细节可见 test/layout-warning-inbox.browser.test.js。打开时的布局闸门只挡一瞬间打开审阅页时产物会先被遮罩盖住只等第一轮真实的 iframe 审计完成就立刻揭开——无论查到什么问题。第一次完成的客户端检查即放行绝不让网络往返或修复请求绑架审阅超时有兜底超时自动放行用户还能随时点Show anyway。用--no-gate可以跳过这层幕布见 README.md 的Open-time layout gate一节。靠什么保证不误报、不吵人真实浏览器回归测试项目用真浏览器对一整组夹具页做回归test/layout-audit-browser.test.js夹具就在 test/fixtures/layout-audit/control-broken-*四类故意做坏的页面溢出、裁切、可达性、遮挡必须在桌面 移动视口下各报出预期条数real-*-clean一组真实但健康的页面产品计划、仪表盘、杂志排版、轮播、动画入场必须保持沉默断言里有一行点睛之笔detection alone must never wake an agent——检测到问题后执行 poll 仍然返回waiting修复后的产物重新加载并通过完整审计计数归零——全程 Agent 从未被唤醒。小结lavish-axi 的 iframe 布局审计把检测和修复彻底解耦对 Agent 安静检测永不触发轮询返回只有用户排队修复才产生提示对用户有用每条告警都有大白话解释、可定位、可忽略、可批量修复对状态诚实只有正向证据能清除告警失败与不确定一律显式标记。如果你也在做AI 生成 HTML 人工审阅的产品这套 src/layout-warnings.js src/artifact-sdk.js 的被动检测 保守生命周期设计值得完整读一遍源码。【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关推荐

搜不到官网的Jev模型:结构化决策模型原理与工程实现
搜不到官网的Jev模型:结构化决策模型原理与工程实现

搜"Jev模型"的时候,我遇到了一个有意思的情况:搜索引擎几乎给不出权威结果,可热搜词里又明明有一堆人在找"jev模型官网""jev模型申请""typesafe ai skills github""jev模型开源吗"。这种信… · 2026/9/26 8:37:27

秋招电控岗简历石沉大海?10个开源项目助你突围
秋招电控岗简历石沉大海?10个开源项目助你突围

1. 秋招电控岗为什么简历石沉大海每年八九月开始,电控、嵌入式方向的岗位就会涌入大量简历。我帮团队筛过几轮秋招简历,也跟不少做电机控制、嵌入式软件的朋友聊过,发现一个很扎心的现实:很多同学的简历上写着“熟悉STM32”“了解… · 2026/9/26 8:37:27

无速度传感器矢量控制:原理、性能边界与工程选型指南
无速度传感器矢量控制:原理、性能边界与工程选型指南

1. 无速度传感器矢量控制到底是个什么东西 1.1 从“瞎子爬山”说起 很多人第一次听到“无速度传感器矢量控制”这个词,脑子里冒出来的第一反应就是——不用编码器还能做矢量控制?这不是瞎搞吗?我刚开始接触这个技术的时候也是这么想的。毕竟… · 2026/9/26 8:37:21

电力室外与室内智能巡检机器人:从PPT到可落地部署方案
电力室外与室内智能巡检机器人:从PPT到可落地部署方案

简介:这份PPT面向电力运维人员、智能巡检方案设计者及电力相关专业学习者,系统梳理了室外与室内智能巡检机器人的技术架构与应用路径,帮助解决传统人工巡检效率低、准确性不足、恶劣环境下安全风险高等痛点。资源包共1个PPT文件,约… · 2026/9/26 9:13:13

VS Code + LaTeX 双向定位配置:4分钟搞定 Synctex 正反向跳转
VS Code + LaTeX 双向定位配置:4分钟搞定 Synctex 正反向跳转

1. 项目概述:为什么正反向定位是 LaTeX 编辑体验的“呼吸感”分水岭 在 VS Code 里写 LaTeX,最常被忽略、却最影响持续写作节奏的,不是宏包报错,不是编译失败,而是——你点一下 PDF 预览窗口里的某一行公式&#xff0… · 2026/9/26 9:13:13

AIO Sandbox:全栈融合沙箱架构与MCP协议设计
AIO Sandbox:全栈融合沙箱架构与MCP协议设计

1. 项目概述:一个“全栈式”沙箱的诞生逻辑 AIO Sandbox 这个名字乍看有点拗口,但拆开来看就非常直白——All-in-One Sandbox。它不是那种只跑 Python 脚本、或者只做网页自动化测试的轻量沙箱,而是把浏览器、Shell、文件系统、MCP 协议支持、… · 2026/9/26 9:13:13

Simple Allow Copy:一键解除网页复制限制的浏览器扩展原理与实战
Simple Allow Copy:一键解除网页复制限制的浏览器扩展原理与实战

网页上的文字选不中、右键菜单被禁用、复制按钮点了没反应——这类场景想必你我都遇到过。明明是一篇公开的教程、一份产品参数、一段自己需要的资料,却因为页面加了复制限制,只能对着屏幕一个字一个字敲。Simple Allow Copy 就是冲着这个痛点来的&#… · 2026/9/26 9:13:13

ROS机器人开发入门:从通信机制到SLAM自主导航实战
ROS机器人开发入门:从通信机制到SLAM自主导航实战

GitHub上排名靠前的开源项目,往往不是那种"看起来很酷"的玩具,而是真正被成千上万开发者压在键盘底下的基础设施。ROS就是其中之一。如果你在GitHub上搜"robot"相关的高星仓库,会发现在整个移动机器人生态里,… · 2026/9/26 9:13:13

合规视频修复与图像增强:从超分辨率到老照片上色
合规视频修复与图像增强:从超分辨率到老照片上色

很抱歉,我不能围绕这个项目标题创作博文。这个标题指向的软件,其核心功能是去除视频中的人为模糊或马赛克处理。这类工具的典型用途往往涉及未经授权的成人内容处理、隐私侵犯,或者对被刻意隐藏信息的画面进行强行还原,本身就游走… · 2026/9/26 9:13:07

数据库课后习题答案别硬背:当测试用例集刷,效率翻倍
数据库课后习题答案别硬背:当测试用例集刷,效率翻倍

简介:万常选版《数据库原理与设计》课后习题答案资源,覆盖第2至6章及第9章,适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件,含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21

OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置
OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40

向下兼容与向上兼容:接口设计中的兼容性策略与工程实践
向下兼容与向上兼容:接口设计中的兼容性策略与工程实践

一次版本升级事故,是很多团队绕不过去的坎。线上环境里,服务端明明已经上线了新版接口,老的移动端还在照着旧文档传参数。请求一到网关,校验直接拒绝,用户操作失败,客服群炸了锅,开发群里开始互… · 2026/9/26 0:00:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码