当前位置: 首页 > news >正文

suna工具调用可视化界面实现原理分析(二)

这是一个基于React的浏览器操作可视化调试组件,主要用于在AI开发工具中展示网页自动化操作过程(如导航、点击、表单填写等)的执行状态和结果。以下是关键技术组件和功能亮点的解析:

一、核心功能模块

  1. 浏览器操作状态可视化
    • 实时VNC预览:通过vncPreviewUrl连接沙箱环境,使用记忆化<iframe>展示实时浏览器画面

    • 截图展示:从browser_state消息中提取Base64编码的截图并渲染

    • 多状态显示:根据调用顺序(currentIndex)和运行状态(isRunning)动态切换显示策略

  2. 数据解析系统

    // JSON安全解析逻辑
    const topLevelParsed = safeJsonParse<{ content?: string }>(toolContent, {});
    const outputMatch = innerContentString.match(/\boutput='(.*?)'(?=\s*\))/);

    • 使用正则表达式提取嵌套JSON字符串

    • 多层安全解析防止数据异常导致的崩溃

    • 字符转义处理(处理\n\"


二、关键技术组件

组件/技术功能描述技术亮点
safeJsonParse安全解析可能不规范的JSON数据错误边界处理 + 默认空对象返回
useMemo(VNC iframe)浏览器沙箱预览容器记忆化优化避免重复渲染
extractBrowserUrl从指令内容提取目标URL正则表达式+语义分析组合
formatTimestamp时间戳格式化显示本地化时间格式转换
状态图标系统可视化展示操作状态Lucide图标库 + 颜色编码(成功绿/失败红/运行蓝)

三、交互设计亮点

  1. 智能渲染策略

    {isLastToolCall ? (isRunning && vncIframe ? vncIframe : screenshotBase64 ? <img...> : vncIframe || <FallbackUI/>
    ) : (screenshotBase64 ? <img...> : <EmptyStateUI/>
    )}

    • 最终操作:优先显示实时VNC,次选截图,最后显示沙箱连接

    • 中间操作:仅显示截图或空状态

    • 失败降级:提供备用URL链接直接访问目标页面

  2. 性能优化措施
    • 记忆化VNC iframe防止重复创建连接

    const vncIframe = useMemo(() => (<iframe src={vncPreviewUrl} />
    ), [vncPreviewUrl]);

    • 截图图片尺寸限制(max-h-[650px])

    • 异步消息ID匹配机制减少不必要的渲染


四、扩展能力分析

  1. 多工具集成
    • 可对接BrowserTools MCP实现自动错误捕获

    • 支持与Cursor等AI编辑器深度集成,实现"自动Debug→修复→验证"闭环

  2. 沙箱环境兼容
    • 适配多种沙箱协议(VNC/WebSocket)

    • 密码自动注入机制:

    `${vnc_preview}/vnc_lite.html?password=${pass}`
  3. 可观测性增强
    • 控制台日志输出调试信息:

    console.log("[BrowserToolView] Creating memoized VNC iframe...")

五、应用场景示例

  1. 自动化测试调试
    • 实时观察Playwright/Selenium脚本执行过程

    • 结合截图对比发现UI异常

  2. AI操作验证
    • 当AI生成"点击登录按钮"指令后,通过该组件验证实际点击效果

    • 捕获页面跳转异常时自动关联错误日志

  3. 远程协作教学
    • 通过共享VNC链接进行浏览器操作演示

    • 结合时间戳回放操作过程


该组件体现了现代Web调试工具的设计理念,通过[安全数据解析]+[状态驱动UI]+[沙箱集成]的技术组合,为浏览器自动化操作提供了专业级的可视化调试方案。其设计思路可参考Electron的BrowserView实现原理,但更侧重于AI时代的调试需求。

相关文章:

suna工具调用可视化界面实现原理分析(二)

这是一个基于React的浏览器操作可视化调试组件&#xff0c;主要用于在AI开发工具中展示网页自动化操作过程&#xff08;如导航、点击、表单填写等&#xff09;的执行状态和结果。以下是关键技术组件和功能亮点的解析&#xff1a; 一、核心功能模块 浏览器操作状态可视化 • 实时…...

【大模型面试每日一题】Day 9:BERT 的 MLM 和 GPT 的 Next Token Prediction 有什么区别?

【大模型面试每日一题】Day 9&#xff1a;BERT 的 MLM 和 GPT 的 Next Token Prediction 有什么区别&#xff1f; &#x1f4cc; 题目重现 &#x1f31f; 面试官&#xff1a;预训练任务中&#xff0c;BERT 的 MLM&#xff08;Masked Language Modeling&#xff09;和 GPT 的 …...

分析strtol(),strtoul()和strtod()三个函数的功能

字符串转换为数值部分和子字符串首地址的函数有strtol(),strtoul()和strtod()三个函数。 1、strtol()函数 long int strtol(const char *str, char **endptr, int base) //当base0时,若字符串不是以"0","0x"和"0X"开头,则将数字部分按照10进制…...

Spring Boot 加载application.properties或application.yml配置文件的位置顺序。

我换一种更通俗易懂的方式&#xff0c;结合具体例子来解释 Spring Boot 加载application.properties或application.yml配置文件的位置顺序。 生活场景类比 想象你要找一本书&#xff0c;你有几个可能存放这本书的地方&#xff0c;你会按照一定顺序去这些地方找&#xff0c;直…...

C++进阶之——多态

1. 多态的概念 多态是用来描述这个世界的 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会 产生出不同的状态。 这里就很厉害了&#xff0c;能够实现特殊处理&#xff0c;本文章就是来仔细…...

第13项三期,入组1123例:默沙东启动TROP2 ADC+PD-1子宫内膜癌头对头临床

Umabs DB作为目前全球最全面的抗体药物专业数据库&#xff0c;收录全球近10000个从临床前到商业化阶段抗体药物&#xff0c;涉及靶点1600&#xff0c;涉及疾病种类2400&#xff0c;研发机构2900&#xff0c;覆盖药物蛋白序列、专利和临床等多种专业信息。Umabs DB药物数据库已正…...

政务服务智能化改造方案和案例分析

政务服务智能化改造方案和案例分析 一、引言 在数字化时代浪潮的推动下&#xff0c;政务服务智能化改造已成为提升政府服务效能、优化营商环境、增强民众满意度的关键举措。传统政务服务模式存在流程繁琐、信息孤岛、办理效率低等问题&#xff0c;难以满足现代社会快节奏发展和…...

15.日志分析入门

日志分析入门 第一部分&#xff1a;日志分析基础第二部分&#xff1a;日志分析方法与工具第三部分&#xff1a;日志分析实践总结 目标&#xff1a; • 理解日志分析在网络安全中的作用 • 掌握日志的基本类型和分析方法 • 通过实践初步体验日志分析的过程 第一部分&#xff…...

EPSG:3857 和 EPSG:4326 的区别

EPSG:3857 和 EPSG:4326 是两种常用的空间参考系统&#xff0c;主要区别在于坐标表示方式和应用场景。以下是它们的核心差异&#xff1a; 1. 坐标系类型 EPSG:4326&#xff08;WGS84&#xff09; 地理坐标系&#xff08;Geographic Coordinate System&#xff09;&#xff0c;基…...

Python Cookbook-7.2 使用 pickle 和 cPickle 模块序列化数据

任务 你想以某种可以接受的速度序列化和重建Python 数据结构&#xff0c;这些数据既包括基本Python 对象也包括类和实例。 解决方案 如果你不想假设你的数据完全由基本 Python 对象组成&#xff0c;或者需要在不同的 Python 版本之间移植&#xff0c;再或者需要将序列化后的…...

Java学习手册:Spring 多数据源配置与管理

在实际开发中&#xff0c;有时需要连接多个数据库&#xff0c;例如&#xff0c;一个系统可能需要从不同的数据库中读取和写入数据。Spring 提供了多种方式来配置和管理多数据源&#xff0c;以下将介绍常见的配置和管理方法。 一、多数据源配置 在 Spring 中&#xff0c;可以通…...

六、shell脚本--正则表达式:玩转文本匹配的“万能钥匙”

想象一下&#xff0c;你需要在一大堆文本&#xff08;比如日志文件、配置文件、网页代码&#xff09;里查找符合某种特定模式的字符串&#xff0c;而不是仅仅查找固定的单词。比如说&#xff1a; 找出所有的电子邮件地址 &#x1f4e7;。找到所有看起来像电话号码 &#x1f4d…...

Gradio全解20——Streaming:流式传输的多媒体应用(4)——基于Groq的带自动语音检测功能的多模态Gradio应用

Gradio全解20——Streaming&#xff1a;流式传输的多媒体应用&#xff08;4&#xff09;——基于Groq的带自动语音检测功能的多模态Gradio应用 本篇摘要20. Streaming&#xff1a;流式传输的多媒体应用20.4 基于Groq的带自动语音检测功能的多模态Gradio应用20.4.1 组件及配置1.…...

力扣hot100 (除自身以外数组的乘积)

238. 除自身以外数组的乘积 中等 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除…...

LFU算法解析

文章目录 LFU缓存中关键变量的访问与更新机制1. min_freq - 最小频率访问时机更新时机更新示例 2. capacity - 缓存容量访问时机更新时机访问示例 3. key_to_node - 键到节点的映射访问时机更新时机更新示例 4. freq_to_dummy - 频率到链表哑节点的映射访问时机更新时机更新示例…...

RHCSA笔记2

RHCSA基础命令 &#xff08;一&#xff09;命令格式 &#xff08;1&#xff09;命令名【选项】【参数】 选项&#xff1a;决定命令执行的方式&#xff0c;通常有个-或--开头 参数&#xff1a;决定命令作用的目标&#xff08;目录&#xff0c;文件&#xff0c;磁盘&#xff…...

JavaSE核心知识点01基础语法01-02(基本数据类型、运算符、运算符优先级)

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 JavaSE核心知识点01基础语法01-02&#xff0…...

FOC算法开环控制基础

1. 为什么要有FOC算法 先看看从有刷电机到无刷电机的简单介绍&#xff0c;如下图1&#xff0c;通电螺线圈会产生磁场&#xff0c;这个磁场会产生N级和S级&#xff0c;然后这个电磁铁就可以吸引永磁体&#xff0c;S级吸引N级&#xff0c;N级吸引S级&#xff0c;通俗的来说&…...

进程间通信——管道

概念 进程间通信&#xff08;Inter-Process Communication&#xff0c;简称 IPC&#xff09;是指在不同进程之间进行数据交换和信息传递的机制。它的目的主要有4种&#xff1a; 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间…...

五一作业-day02

文章目录 1. 每日基操2. 模拟故障2.1 **remove regular empty file 是否删除普通文件(空的)?**2.2 **is a directory xxx是一个目录**2.3 **xxx not a directory 不是一个目录**2.4 Cant open file for writing2.5 **No write since last change** 3. 习题4. **进阶习题** 1. …...

Springclound常用五大组件及其使用原理

注册中心Eureka Eureka-Server&#xff1a;就是服务注册中心&#xff08;可以是一个集群&#xff09;&#xff0c;对外暴露自己的地址。 提供者&#xff1a;启动后向Eureka注册自己信息&#xff08;地址&#xff0c;服务名称等&#xff09;&#xff0c;并且定期进行服务续约 …...

Qt 显示QRegExp 和 QtXml 不存在问题

QRegExp 和 QtXml 问题 在Qt6 中 已被弃用&#xff1b; 1&#xff09;QRegExp 已被弃用&#xff0c;改用 QRegularExpression Qt5 → Qt6 重大变更&#xff1a;QRegExp 被移到了 Qt5Compat 模块&#xff0c;默认不在 Qt6 核心模块中。 错误类型解决方法QRegExp 找不到改用 Q…...

开元类双端互动组件部署实战全流程教程(第4部分:后台配置系统与参数动态控制)

作者&#xff1a;曾经因为后台配置写错&#xff0c;导致全服进不去房的工程师 组件附带的后台管理系统为 PHP 编写&#xff0c;界面简洁但功能齐全。具备完整的模块划分与权限体系&#xff0c;支持动态参数下发、日志审计、行为数据统计等。 七、前端后台交互流程图与代码示例 …...

MySQL基础关键_008_DDL 和 DML(一)

目 录 一、DDL 1.创建表 &#xff08;1&#xff09;语法格式 &#xff08;2&#xff09;实例 2.查看建表语句 &#xff08;1&#xff09;语法格式 &#xff08;2&#xff09;实例 3.修改表名 &#xff08;1&#xff09;语法格式 &#xff08;2&#xff09;实例 4.新…...

基于SpringBoot + Vue 的火车票订票系统

包含&#xff1a; [1]源码✔ 数据库文件✔ [2]万字文档✔ [3]视频与图文配置教程✔ 功能描述&#xff1a; 本系统包含管理员、用户两个角色。 管理员&#xff1a;用户管理、新闻公告管理、车辆管理、车站及路线管理、留言建议管理、车次信息管理 用户&#xff1a;购票操作、查…...

飞致云开源社区月度动态报告(2025年4月)

自2023年6月起&#xff0c;中国领先的开源软件公司飞致云以月度为单位发布《飞致云开源社区月度动态报告》&#xff0c;旨在向广大社区用户同步飞致云旗下系列开源软件的发展情况&#xff0c;以及当月主要的产品新版本发布、社区运营成果等相关信息。 飞致云开源运营数据概览&…...

解决跨域的4种方法

00_跨域的概念 浏览器只允许请问具有相同的协议&#xff0c;域名&#xff0c;端口&#xff0c;进行请求&#xff0c;有一个不同&#xff0c;就会拒绝。 01.前后端协商jsonp //jsonp//jsonp 是 json with padding 的缩写&#xff0c;是一种通过 <script> 标签的 src 属性…...

C# 方法(局部函数和参数)

本章内容: 方法的结构 方法体内部的代码执行 局部变量 局部常量 控制流 方法调用 返回值 返回语句和void方法 局部函数 参数 值参数 引用参数 引用类型作为值参数和引用参数 输出参数 参数数组 参数类型总结 方法重载 命名参数 可选参数 栈帧 递归 局部函数 正如刚刚所解释的&…...

kotlin 02flow-sharedFlow 完整教程

一 sharedFlow是什么 SharedFlow 是 Kotlin 协程中 Flow 的一种 热流&#xff08;Hot Flow&#xff09;&#xff0c;用于在多个订阅者之间 共享事件或数据流。它适合处理 一次性事件&#xff08;如导航、弹窗、Toast、刷新通知等&#xff09;&#xff0c;而不是持续状态。 ✅ …...

数据库原理——E-R图的极速省流理解 例题解析

前言 数据库一节没听&#xff0c;一个小时看书给我大致看懂了 E-R概念模型极速省流版 E-R图的重点&#xff1a; 关系图&#xff0c;三要素——实体、属性、联系 图形标识——矩形、椭圆形、菱形 1.实体和属性也可以放一个框矩形框 2.菱形两层边&#xff1a;弱实体集的联…...

5.4 - 5.5Web基础+c语言拓展功能函数

StringBoot HTTP协议&#xff1a; 规定了浏览器与服务器之间数据传递的规则。 请求协议&#xff1a; 请求数据格式&#xff1a; 请求头和请求体之间有一个空行隔开 响应协议&#xff1a; 响应数据格式&#xff1a; 响应头和响应体之间存在空行隔开。 响应数据设置&#xff1…...

Java抽象类与接口详解

一、抽象类(Abstract Class) 1. 定义与基本使用 // 抽象类定义 public abstract class Animal {// 抽象方法(无实现)public abstract void makeSound();// 具体方法(有实现)public void sleep() {System.out.println("动物在睡觉");} }// 继承抽象类 class Dog ext…...

网络延时 第四次CCF-CSP计算机软件能力认证

就是求树的直径: 思路&#xff1a;函数代表当前根节点的最长距离 然后遍历保存当前树的所有孩子的最长距离 和次长距离 如果是叶子节点就返回0 在每次获得每个节点的次长距离和最长距离就更新全局直径 最后获得最长距离 Ac代码: #include <bits/stdc.h> using namespa…...

【C++进阶十】多态深度剖析

【C进阶十】多态深度剖析 1.多态的概念及条件2.虚函数的重写3.重写、重定义、重载区别4.C11新增的override 和final5.抽象类6.虚表指针和虚表6.1什么是虚表指针6.2指向谁调用谁&#xff0c;传父类调用父类&#xff0c;传子类调用子类 7.多态的原理8.单继承的虚表状态9.多继承的…...

网络传输中字节序

在小端字节序主机发送数据 0x1234 的情况下,(单字节没有字节序)我们可以分步骤来分析接收端如何解析这个数据: 1. 小端字节序主机的存储方式 在小端字节序中,低地址存储低字节,高地址存储高字节。 数据 0x1234 的字节表示为: 低字节:0x34 高字节:0x12 因此,在小端字…...

前端- ElementPlus入门

1.介绍 Element&#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库&#xff0c;用于快速构建网页。 Element 提供了很多组件供我们使用。例如 超链接、按钮、图片、表格等等。 官方网站&#xff1a;一个 Vue 3 UI 框架 | Element Plus 2.步骤 1.安装E…...

AI Agent 要用到的技术

AI 发展是大趋势&#xff0c;以下是目前要用到的一些技术项 不论你从事哪个方向&#xff0c;这个技术栈都有必要学习 LangChainTransformersMicrosoft Semantic KernelLangflowLangGrphLangSmith 学习网站 以下是 LangChain、Transformers、Microsoft Semantic Kernel 的学习…...

# 从零构建一个简单的卷积神经网络:手写数字识别

从零构建一个简单的卷积神经网络&#xff1a;手写数字识别 在深度学习的世界里&#xff0c;卷积神经网络&#xff08;CNN&#xff09;是处理图像数据的强大工具。今天&#xff0c;我们将通过一个简单的例子&#xff0c;从零开始构建一个CNN模型&#xff0c;用于手写数字识别。…...

【RK3588嵌入式图形编程】-Cairo-Cairo图形库支持后端

Cairo图形库支持后端 文章目录 Cairo图形库支持后端1、PNG图像后端2、PDF文件后端3、SVG文件后端4、GTK窗口支持Cairo库支持多种后端。在本文中,我们使用Cairo创建PNG图像、PDF文件、SVG文件,并在GTK窗口上绘制。 1、PNG图像后端 在第一个示例中,我们创建一个 PNG 图像。 …...

LCD,LED

本文来源 &#xff1a; 腾讯元宝 LCD(Liquid Crystal Display)液晶显示器 LCD本身并不能发光&#xff0c;而是控制光的传输。 LCD内充满了棒状的液态分子&#xff08;液晶&#xff09;&#xff0c;这些分子可以形成扭转的螺旋线&#xff0c;弯曲来自显示器背后光源产生的光线或…...

HTML 元素

什么是 HTML 元素&#xff1f; HTML 元素&#xff08;Element&#xff09;是构成 HTML 文档的基本单位&#xff0c;它由开始标签、内容和结束标签组成&#xff0c;用于定义网页的结构和内容。元素是 HTML 标记语言的核心概念&#xff0c;每个元素都有特定的语义和用途。 元素…...

(undone) MIT6.S081 2023 学习笔记 (Day11: LAB10 mmap)

url: https://pdos.csail.mit.edu/6.1810/2023/labs/mmap.html 任务0&#xff1a;讲义如下 (完成) mmap和munmap系统调用允许UNIX程序对其地址空间进行精细控制。它们可用于进程间共享内存、将文件映射到进程地址空间&#xff0c;并作为用户级页面错误处理方案的一部分&#x…...

7400MB/s5050TBW完美结合,全新希捷酷玩530R SSD体验评测

7400MB/s&5050TBW完美结合&#xff0c;全新希捷酷玩530R SSD体验评测 哈喽小伙伴们好&#xff0c;我是Stark-C~ 说到希捷酷玩530 SSD&#xff0c;很多硬核进阶玩家应该都知道&#xff0c;或者说正在使用&#xff08;比如说我~&#xff09;。 作为希捷大厂旗下高性能SSD的…...

【数据结构与算法】同余计算 哈希表与前缀和问题特征和模板化思路

加减乘负的类同余计算 加乘模情况 两数和模 : (a b) mod m (a mod m b mod m) mod m乘积模 : (a * b) mod m ((a mod m) * (b mod m)) mod m 加模证明如下 : a q1 * m r1 , b q2 * m r2则 a mod m r1 , b mod m r2(a b) mod m ((q1 q2) * m (r1 r2)) mod m …...

TS 交叉类型

很类似于接口继承啊 哈哈哈 使用type关键字声明交叉类型 // 声明交叉类型 type PersonDetail person & Contactlet theshy:PersonDetail { name:the shy,phone:马头 }交叉类型和接口实现对对象的类型注解的区别与联系 如果在接口继承时发生同名属性冲突会报不兼容的错…...

FreeRTOS学习系列·二值信号量

目录 1. 信号量的基本概念 2. 二值信号量 3. 应用场景 4. 运作机制 5. 信号量控制块 6. 常用信号量函数接口API 6.1 创建二值信号量 xSemaphoreCreateBinary() 6.2 信号量删除函数 vSemaphoreDelete() 6.3 信号量释放函数 6.3.1 xSemaphoreGive() 6.3.2 …...

二叉搜索树 AVL树 红黑树 的性质

二叉搜索树 如何判断一棵树是否是二叉搜索树&#xff1f; 1.方法一 左子树的所有节点值 < 当前节点值&#xff0c;右子树的所有节点值 > 当前节点值&#xff0c;左右子树也必须满足 。 2.方法二 中序遍历&#xff0c;得到的序列是有序的 红黑树 红黑树的性质 1.根…...

分析 Docker 磁盘占用

以下是分析 Docker 磁盘占用的详细步骤和工具指南&#xff0c;帮助开发者快速定位和清理冗余数据&#xff1a; 1. 查看 Docker 磁盘使用概览 docker system df 输出说明&#xff1a; TYPE TOTAL ACTIVE SIZE RECLAIMABLE Images 15 …...

LLM提示词设计及多轮对话优化策略在心理健康咨询场景中的应用研究

多轮对话策略:设计LLM提示词并优化多轮对话输出 LLM提示词设计及多轮对话优化策略在心理健康咨询场景中的应用研究 摘要 本文针对大语言模型(LLM)在心理健康问题咨询对话场景中的应用,系统研究提示词设计方法及多轮对话优化策略。通过分析提示词核心原理,构建包含任务指…...

Kubernetes(k8s)学习笔记(七)--KubeSphere 最小化安装

前情提要 可视化操作面板对于开发、运维绝对是提升工作效率的一大利器&#xff0c;因此很有必要搭建一套可视化操作来管理Kubernetes。 可视化面板有多种&#xff1a; 1.Kubernetes官方提供的默认面板&#xff1a;dashboard&#xff0c;用处不大&#xff0c;放弃&#xff1b…...