Gradio 前端核心基础库 gradio/atoms组件架构、API 演进与源码实现解析【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio导读gradio/atoms是 Gradio 前端 monorepo 中最底层的共享 UI 基础库为gr.Image、gr.Chatbot、gr.Audio等全部前端组件提供Block、BlockLabel、IconButton等原子级Svelte 组件。本文以 js/atoms/CHANGELOG.md 为主体脉络结合其当前源码梳理该包在 0.0.2 → 0.26.1 各版本中的演进主线Svelte 5 迁移、全屏模式、RTL、无障碍、性能优化并深入解析核心原子组件的 API 与实现原理。读完你将掌握 Gradio 前端组件层的构建方式、atoms包各组件 props 语义以及如何沿着 CHANGELOG 理解一次 UI 基础设施的完整演进。一、包定位Gradio 前端组件树的原子层gradio/atoms位于 js/atoms/ 目录自描述为 Gradio UI packages见 package.json。在前端 monorepo 中它处于依赖链最底层其运行时依赖仅有gradio/icons图标集与gradio/utils工具函数同时以svelte: ^5.48.0作为 peer dependency说明该包面向 Svelte 5 运行时。它在 monorepo 中的消费面极广。搜索from gradio/atoms可以看到几乎每个组件包都在引用它例如 js/accordion/Index.svelte、js/audio/Index.svelte、js/chatbot/Index.svelte 以及 chatbot 内部的ButtonPanel、Copy、LikeDislike、Thought等共享视图。也就是说Gradio 任意界面的外壳容器卡片、顶部标签、图标按钮、空状态提示、分享按钮、上传占位文案几乎全部由atoms提供。包的公共导出面由 js/atoms/src/index.ts 集中定义共导出 15 个组件Block、BlockTitle、BlockLabel、DownloadLink、IconButton、Empty、Info、 ShareButton、UploadText、Toolbar、SelectSource、IconButtonWrapper、 FullscreenButton、CustomButton、ScrollFade外加一个内部使用的BLOCK_KEY常量。值得注意部分组件如Toolbar、SelectSource、IconButtonWrapper、FullscreenButton、CustomButton、ScrollFade并未出现在包的自述 README 基础示例中而是随 CHANGELOG 各版本陆续加入并内部使用反映了导出面 文档示例面的实际情况。二、原子组件的公共 API 与使用方式js/atoms/README.md 给出了最基础的消费方式从gradio/atoms导入组件后像普通 Svelte 组件一样传递 props。下面把 README 中记载的 props 契约与当前源码逐一对齐形成可直接参考的 API 速查。2.1Block一切组件的容器骨架Block是所有 Gradio 组件的卡片容器承担尺寸、边框、可见性、全屏、缩放等核心布局能力。README 记录的 props 如下源码在 js/atoms/src/Block.svelte 中有完整类型声明export let height: number | undefined undefined; export let width: number | undefined undefined; export let elem_id ; export let elem_classes: string[] []; export let variant: solid | dashed | none solid; export let border_mode: base | focus base; export let padding true; export let type: normal | fieldset normal; export let test_id: string | undefined undefined; export let explicit_call false; export let container true; export let visible true; export let allow_overflow true; export let scale: number | null null; export let min_width 0;对照源码实现可进一步确认各 props 的语义尺寸体系数字型尺寸会被get_dimension追加px字符串则直接透传Block.sveltewidth为数字时还会套用calc(min(widthpx, 100%))防止溢出style:flex-grow{scale}与min-width: calc(min(min_widthpx, 100%))把scale/min_width映射为弹性布局参数Block.svelte。visible 三态渲染条件为visible true || visible hidden其中hidden状态会额外追加hidden类使元素display: noneBlock.svelte。源码注释明确说明之所以在本地隐藏而非修改 AppTree是因为通过事件更新visible时只有本地状态变化把状态回流到 AppTree 代价过高。外观变量variant控制边框样式solid/dashed/noneborder_mode追加border_focusaccent 色或border_contrast类padding控制是否套用--block-padding最终观感由--block-*系列 CSS 变量阴影、圆角、背景、边框色决定Block.svelte。containerfalse 且非显式调用时会添加hide-container类剥离背景与边框实现无容器的透明渲染。rtl 支持dir{rtl ? rtl : ltr}将文档方向语义落到容器上Block.svelte配合 CHANGELOG 中 v0.15.0 的 RTL 批量支持。2.2BlockTitle与BlockLabel标签体系BlockTitle只接收show_label与info两个 props。当info存在时它渲染为 Info.svelte 组件——后者通过 js/atoms/src/inline-markdown.ts 将纯文本/行内 Markdown 转成 HTML 后再经{html}输出这正是 CHANGELOG v0.9.0-beta.4 中 Allowinfoto render markdown 特性对应的源码实现。BlockLabel使用原生label元素承载组件标签v0.2.0 的变更其 props 在源码 BlockLabel.svelte 中export let label: string | null null; export let Icon: any; // 标签前的图标组件 export let show_label true; export let disable false; export let float true; // true 时绝对定位于卡片左上角否则静态排版 export let rtl false;rtl分支下样式被镜像处理右侧去边框、左侧补圆角、图标边距方向互换BlockLabel.svelte实现从视觉到语义的完整 RTL 布局。默认输出data-testidblock-label便于端到端测试定位。2.3 图标按钮族IconButton、IconButtonWrapper、FullscreenButton、CustomButtonIconButton是通用图标按钮props 为Icon图标组件、label、show_label、pending加载态。FullscreenButtonjs/atoms/src/FullscreenButton.svelte在其基础上封装根据fullscreen状态切换Maximize/Minimize图标并回调onclick。IconButtonWrapperjs/atoms/src/IconButtonWrapper.svelte把一组图标按钮收纳进悬浮于区块右上角的面板支持top_panel绝对定位于--block-label-margin、display_top_corner右上角圆角化与no-background无背景用于渲染进 block 内容时。其内部的buttonson_custom_button_click机制对应 v0.20.0 Add ability to add custom buttons to components。CustomButtonjs/atoms/src/CustomButton.svelte渲染单个自定义按钮类型来自gradio/utils的CustomButton点击时以button.id回调on_click并带title/aria-label无障碍属性。2.4 其余展示型原子Empty空内容占位size支持small | largeunpadded_box控制是否去除内边距。ShareButton分享操作接收formatter把值格式化为可分享字符串的异步函数、value与i18n。UploadText上传区提示文字type支持video | image | audio | file | csv按类型展示对应 i18n 文案。Toolbar/SelectSource/DownloadLink分别用于工具栏排版、媒体来源上传/录制/粘贴选择与文件下载链接。ScrollFadev0.20.1 Add fade effect to overflowing text 的实现本体。ScrollFade.svelte 根据visible渲染一段指向区块背景色的linear-gradient遮罩position支持sticky固定在底部或absolutepointer-events: none保证不拦截滚动交互。三、CHANGELOG 主线的源码级解读CHANGELOG 记录了包从 0.0.2 到 0.26.1 的完整演进其中若干主线与当前源码一一对应是理解该库设计取舍的最佳入口。3.1 v0.1.0启动性能与 Markdown 支持的奠基这是 changelog 中第一个带 Highlights 的版本宣布了两组关键改进CHANGELOG.md 0.1.0 条目事件委托取代手工绑定此前每个组件手动 attach 事件引发性能回退改为事件委托后大型应用启动约快一倍并修正了 Markdown 无限重渲染与gr.3DModel过早重渲染的问题。组件挂载优化单个组件挂载路径被优化启动期额外提升约 30%。这段历史奠定了atoms作为性能敏感层的定位——所有组件共享的容器逻辑每多一次 DOM 操作都会被所有组件放大。其后续优化v0.23.0 Reduce load times of all components延续了同一主线。3.2 v0.3.0ImageEditor组件发布与脚本化配置v0.3.0 的高亮段落完整描述了新组件gr.ImageEditor与Image完全分离的图片编辑器能力支持上传/摄像头/粘贴背景、裁剪可设定比例或具体尺寸、分层绘制与擦除、以及把画布最终状态返回为composite/background/layers三部分数据。其文档化示例展示了 Brush/Eraser 的完整配置方式此处保留其核心可运行结构def fn(im): im[composite] # 完整画布 im[background] # 背景图 im[layers] # 各独立图层 im gr.ImageEditor( sources[upload, webcam, clipboard], crop_size1:1, # 裁剪约束可为比例或 [width, height] transforms[crop], # 启用裁剪 brushBrush( default_size25, # 或 auto color_modefixed, # fixed 隐藏色板defaults 显示 default_colorhotpink, # 支持任意合法 CSS 颜色字符串 colors[rgba(0, 150, 150, 1), #fff, hsl(360, 120, 120)] ), brushEraser(default_size25) )注意该版本处于 v0.2.2 之前被归档进atoms的变更流版本号顺序上的插入历史说明该包承载的不只是纯布局原子也包括随ImageEditor引入的通用控件契约。3.3 v0.4.0 与 v0.9.0尺寸、主题与容器层的标准化v0.4.0允许向Blocks.svelte传入字符串形式的height/width。这与当前Block中get_dimension对字符串直接透传的行为一致是后续min_height/max_height的基础。v0.9.0含一系列 beta 版本是 Gradio 5.0 主题工作的一部分条目数量庞大概括为为组件引入新主题gradio/icons0.8.0、gradio/utils0.7.0把图标收纳进IconButtonWrapper并统一 Icon Button 外观当 Block 设定了height/width时内容居中跨组件标准化height并新增min_height/max_height参数info支持渲染 Markdown修复 ChatInterface 嵌入高度问题。上述尺寸能力在今天Block.svelte的style:min-height/max-height与fullscreen分支直接可见Block.svelte。3.4 v0.15.0 与 v0.13.xRTL 与数据保真v0.15.0 为BlockLabel、gr.HighlightedText、gr.Radio、gr.MultimodalTextbox统一加入rtl支持并微调了 MultimodalTextbox 的 RTL UI。BlockLabel中的dir属性与镜像样式见 2.2 节即为该批次变更的直接产物。v0.13.0 包含聊天界面 flagging/反馈与组件可携带先前数据重新挂载remount的能力后者对保持会话状态至关重要。3.5 v0.16.x–v0.17.0全屏模式打磨与校验支持全屏是Block最复杂的行为之一CHANGELOG 分多次迭代v0.16.1 Improved, smoother fullscreen mode for components#11177v0.16.4 修复图标按钮 wrapper 的 z-indexv0.26.1 Keep fullscreen component controls inside the visible viewport when the page has a scrollbar即全屏下控制条不再被页面滚动条顶出可视区。源码印证了这套机制的复杂度Block.svelteportal 探测position: fixed元素只在没有祖先建立fixed 包含块时才相对视口布局而transform、filter、container-type等都会破坏该假设如gr.Sidebar总带 transform。needs_portal通过在当前父级和目标容器中插入隐藏探针测量矩形若差值超过 1px 则判定需要搬移Block.svelte。portal 迁移需要时把元素移动到最近的.gradio-container或 ShadowRoot/document.body原位置留下div classplaceholder占位退出全屏后由exit_portal还原Block.svelte。动效与清理进入全屏前记录getBoundingClientRect作为 CSS 变量--start-top/--start-left/--start-width/--start-height配合pop-out动画完成从原位置放大到全屏同时在 fullscreen 期间监听 Escape 键退出并通过只在销毁时执行的清理 effect 防止监听器泄漏Block.svelte。这套全屏行为有专门测试覆盖js/atoms/Block.fullscreen.test.ts 与 js/atoms/Block.test.ts是理解Block行为的可执行文档。此外 v0.17.0 为前端加入 validation 支持组件值校验的渲染路径v0.18.0 提供visiblehidden三态见 2.1 节并修复FileExplorer若干问题。3.6 v0.20.x–v0.21.0Svelte 5 迁移、无障碍与自定义按钮v0.20.1是一个高密度修复版本升级 Svelte/Kit 以修复安全问题把 Audio、Upload 与 Atoms 本体迁移到 Svelte 5#ea2d3e9对应 Migrate Audio Upload Atoms to Svelte 5加入 ARIA landmarks 以改进无障碍为溢出文本加入渐隐效果。ARIA 与渐隐分别在CustomButton的aria-label与ScrollFade组件中持续存在。v0.20.0 / v0.20.1 区间出现两个同号版本0.20.0 先后为纯依赖更新与功能版而 v0.19.0 里也有 Svelte5 migration and bugfix#12438与 chatbot 音频播放器 UI 改进。这属于变更集changeset合并顺序造成的版本号并列现象阅读时建议以 PR/提交哈希去重。v0.21.0为 Gallery 增加摄像头上传与剪贴板粘贴来源前端由SelectSource原子提供来源面板的通用实现。v0.22.0Hide forms with no elements 与 v0.22.1 修复gr.html作为布局时的边框反映了对空容器渲染细节的持续打磨。而 v0.20.0 的 custom buttons 能力目前落地在IconButtonWrapper/CustomButton的组合中。3.7 v0.23.0–v0.26.x工程质量与新组件迁移近期版本把重心转向测试基建与 Svelte 5 全面化v0.23.0/v0.23.1/v0.24.0 依次为 Image、Chatbot、ImageSlider 引入单元测试Add Image Unit Tests、Chatbot Unit Tests、Add ImageSlider unit testsv0.23.0 同时修复所有组件加载耗时v0.25.0 把pnpm lint与pnpm ts:check接入 CI保证 monorepo 各包类型与代码风格稳定v0.26.0 将 Image 组件迁移到 Svelte 5gradio/icons0.16.0至此主要媒体组件完成 Svelte 5 迁移v0.26.1 即为本文撰写时最新版本聚焦全屏控制条在页面带滚动条时的视口可见性修复。3.8 依赖面atoms 的三角依赖CHANGELOG 中每版几乎都带 Dependency updates形成以atoms为中心的依赖三角gradio/utils提供通用工具与类型含CustomButton类型、I18nFormatter等版本从 0.0.2 一路升至 0.14.0gradio/icons提供全部图标组件Maximize、Minimize等供IconButton/FullscreenButton使用gradio/markdown-code供 Markdown/代码高亮相关渲染复用主要服务于info与 Markdown 场景从 0.2.0 演进到 0.6.1。从 package 元数据看atoms开启了main_changeset: truepackage.json说明它采用 changeset 管理发布版本——这也解释了为何 CHANGELOG 中存在 0.20.0、0.19.0、0.16.5、0.18.0 等同名重复条目它们是合并期 beta/正式版本号的叠加记录属于正常发布流程产物而非笔误。四、在本仓库中继续深入研究如果你希望顺着本文继续深入推荐以下仓库内路径组件实现js/atoms/src/ 下的每个.svelte文件即一个原子建议从 Block.svelte 与 BlockLabel.svelte 入手二者覆盖了尺寸、全屏、可见性、RTL、无障碍等绝大多数通用语义。消费示例搜索gradio/atoms的导入方如 js/chatbot/shared/ButtonPanel.svelte、js/audio/Index.svelte、js/accordion/Index.svelte可看到真实组件如何组合原子。测试js/atoms/Block.fullscreen.test.ts 与 js/atoms/Block.test.ts 是全屏与基础渲染行为的可执行规格配合 js/atoms/src/inline-markdown.test.ts 覆盖 Markdown 内联渲染。配套工具js/atoms/src/utils/parse_placeholder.ts 解析占位符图标源位于 js/atoms/src/icons/。需要提醒的是本仓库为只读研究环境以上探索请以阅读源码、运行现有测试如包级pnpm test相关命令为主无需改动任何文件。五、小结从 CHANGELOG 的视角看gradio/atoms的演进可以浓缩为四条长期主线容器层能力标准化尺寸三件套、缩放、三态可见性、RTL、全屏/浮层机制的重构与修复、Svelte 5 的渐进迁移Atoms → Audio → Image → 各组件、以及工程化加固单元测试、CI lint/ts:check、加载性能优化。理解这四条主线再对照 Block.svelte 等源码中的 portal 探测、事件委托与 CSS 变量体系就能完整还原 Gradio 前端一切皆组件、一切组件共享同一套外壳的架构全貌。【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Gradio 前端核心基础库 @gradio/atoms：组件架构、API 演进与源码实现解析
Gradio 前端核心基础库 gradio/atoms组件架构、API 演进与源码实现解析【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio导读gradio/atoms是 Gradio 前端 monorepo 中最底层的共享 UI 基础库为gr.Image、gr.Chatbot、gr.Audio等全部前端组件提供Block、BlockLabel、IconButton等原子级Svelte 组件。本文以 js/atoms/CHANGELOG.md 为主体脉络结合其当前源码梳理该包在 0.0.2 → 0.26.1 各版本中的演进主线Svelte 5 迁移、全屏模式、RTL、无障碍、性能优化并深入解析核心原子组件的 API 与实现原理。读完你将掌握 Gradio 前端组件层的构建方式、atoms包各组件 props 语义以及如何沿着 CHANGELOG 理解一次 UI 基础设施的完整演进。一、包定位Gradio 前端组件树的原子层gradio/atoms位于 js/atoms/ 目录自描述为 Gradio UI packages见 package.json。在前端 monorepo 中它处于依赖链最底层其运行时依赖仅有gradio/icons图标集与gradio/utils工具函数同时以svelte: ^5.48.0作为 peer dependency说明该包面向 Svelte 5 运行时。它在 monorepo 中的消费面极广。搜索from gradio/atoms可以看到几乎每个组件包都在引用它例如 js/accordion/Index.svelte、js/audio/Index.svelte、js/chatbot/Index.svelte 以及 chatbot 内部的ButtonPanel、Copy、LikeDislike、Thought等共享视图。也就是说Gradio 任意界面的外壳容器卡片、顶部标签、图标按钮、空状态提示、分享按钮、上传占位文案几乎全部由atoms提供。包的公共导出面由 js/atoms/src/index.ts 集中定义共导出 15 个组件Block、BlockTitle、BlockLabel、DownloadLink、IconButton、Empty、Info、 ShareButton、UploadText、Toolbar、SelectSource、IconButtonWrapper、 FullscreenButton、CustomButton、ScrollFade外加一个内部使用的BLOCK_KEY常量。值得注意部分组件如Toolbar、SelectSource、IconButtonWrapper、FullscreenButton、CustomButton、ScrollFade并未出现在包的自述 README 基础示例中而是随 CHANGELOG 各版本陆续加入并内部使用反映了导出面 文档示例面的实际情况。二、原子组件的公共 API 与使用方式js/atoms/README.md 给出了最基础的消费方式从gradio/atoms导入组件后像普通 Svelte 组件一样传递 props。下面把 README 中记载的 props 契约与当前源码逐一对齐形成可直接参考的 API 速查。2.1Block一切组件的容器骨架Block是所有 Gradio 组件的卡片容器承担尺寸、边框、可见性、全屏、缩放等核心布局能力。README 记录的 props 如下源码在 js/atoms/src/Block.svelte 中有完整类型声明export let height: number | undefined undefined; export let width: number | undefined undefined; export let elem_id ; export let elem_classes: string[] []; export let variant: solid | dashed | none solid; export let border_mode: base | focus base; export let padding true; export let type: normal | fieldset normal; export let test_id: string | undefined undefined; export let explicit_call false; export let container true; export let visible true; export let allow_overflow true; export let scale: number | null null; export let min_width 0;对照源码实现可进一步确认各 props 的语义尺寸体系数字型尺寸会被get_dimension追加px字符串则直接透传Block.sveltewidth为数字时还会套用calc(min(widthpx, 100%))防止溢出style:flex-grow{scale}与min-width: calc(min(min_widthpx, 100%))把scale/min_width映射为弹性布局参数Block.svelte。visible 三态渲染条件为visible true || visible hidden其中hidden状态会额外追加hidden类使元素display: noneBlock.svelte。源码注释明确说明之所以在本地隐藏而非修改 AppTree是因为通过事件更新visible时只有本地状态变化把状态回流到 AppTree 代价过高。外观变量variant控制边框样式solid/dashed/noneborder_mode追加border_focusaccent 色或border_contrast类padding控制是否套用--block-padding最终观感由--block-*系列 CSS 变量阴影、圆角、背景、边框色决定Block.svelte。containerfalse 且非显式调用时会添加hide-container类剥离背景与边框实现无容器的透明渲染。rtl 支持dir{rtl ? rtl : ltr}将文档方向语义落到容器上Block.svelte配合 CHANGELOG 中 v0.15.0 的 RTL 批量支持。2.2BlockTitle与BlockLabel标签体系BlockTitle只接收show_label与info两个 props。当info存在时它渲染为 Info.svelte 组件——后者通过 js/atoms/src/inline-markdown.ts 将纯文本/行内 Markdown 转成 HTML 后再经{html}输出这正是 CHANGELOG v0.9.0-beta.4 中 Allowinfoto render markdown 特性对应的源码实现。BlockLabel使用原生label元素承载组件标签v0.2.0 的变更其 props 在源码 BlockLabel.svelte 中export let label: string | null null; export let Icon: any; // 标签前的图标组件 export let show_label true; export let disable false; export let float true; // true 时绝对定位于卡片左上角否则静态排版 export let rtl false;rtl分支下样式被镜像处理右侧去边框、左侧补圆角、图标边距方向互换BlockLabel.svelte实现从视觉到语义的完整 RTL 布局。默认输出data-testidblock-label便于端到端测试定位。2.3 图标按钮族IconButton、IconButtonWrapper、FullscreenButton、CustomButtonIconButton是通用图标按钮props 为Icon图标组件、label、show_label、pending加载态。FullscreenButtonjs/atoms/src/FullscreenButton.svelte在其基础上封装根据fullscreen状态切换Maximize/Minimize图标并回调onclick。IconButtonWrapperjs/atoms/src/IconButtonWrapper.svelte把一组图标按钮收纳进悬浮于区块右上角的面板支持top_panel绝对定位于--block-label-margin、display_top_corner右上角圆角化与no-background无背景用于渲染进 block 内容时。其内部的buttonson_custom_button_click机制对应 v0.20.0 Add ability to add custom buttons to components。CustomButtonjs/atoms/src/CustomButton.svelte渲染单个自定义按钮类型来自gradio/utils的CustomButton点击时以button.id回调on_click并带title/aria-label无障碍属性。2.4 其余展示型原子Empty空内容占位size支持small | largeunpadded_box控制是否去除内边距。ShareButton分享操作接收formatter把值格式化为可分享字符串的异步函数、value与i18n。UploadText上传区提示文字type支持video | image | audio | file | csv按类型展示对应 i18n 文案。Toolbar/SelectSource/DownloadLink分别用于工具栏排版、媒体来源上传/录制/粘贴选择与文件下载链接。ScrollFadev0.20.1 Add fade effect to overflowing text 的实现本体。ScrollFade.svelte 根据visible渲染一段指向区块背景色的linear-gradient遮罩position支持sticky固定在底部或absolutepointer-events: none保证不拦截滚动交互。三、CHANGELOG 主线的源码级解读CHANGELOG 记录了包从 0.0.2 到 0.26.1 的完整演进其中若干主线与当前源码一一对应是理解该库设计取舍的最佳入口。3.1 v0.1.0启动性能与 Markdown 支持的奠基这是 changelog 中第一个带 Highlights 的版本宣布了两组关键改进CHANGELOG.md 0.1.0 条目事件委托取代手工绑定此前每个组件手动 attach 事件引发性能回退改为事件委托后大型应用启动约快一倍并修正了 Markdown 无限重渲染与gr.3DModel过早重渲染的问题。组件挂载优化单个组件挂载路径被优化启动期额外提升约 30%。这段历史奠定了atoms作为性能敏感层的定位——所有组件共享的容器逻辑每多一次 DOM 操作都会被所有组件放大。其后续优化v0.23.0 Reduce load times of all components延续了同一主线。3.2 v0.3.0ImageEditor组件发布与脚本化配置v0.3.0 的高亮段落完整描述了新组件gr.ImageEditor与Image完全分离的图片编辑器能力支持上传/摄像头/粘贴背景、裁剪可设定比例或具体尺寸、分层绘制与擦除、以及把画布最终状态返回为composite/background/layers三部分数据。其文档化示例展示了 Brush/Eraser 的完整配置方式此处保留其核心可运行结构def fn(im): im[composite] # 完整画布 im[background] # 背景图 im[layers] # 各独立图层 im gr.ImageEditor( sources[upload, webcam, clipboard], crop_size1:1, # 裁剪约束可为比例或 [width, height] transforms[crop], # 启用裁剪 brushBrush( default_size25, # 或 auto color_modefixed, # fixed 隐藏色板defaults 显示 default_colorhotpink, # 支持任意合法 CSS 颜色字符串 colors[rgba(0, 150, 150, 1), #fff, hsl(360, 120, 120)] ), brushEraser(default_size25) )注意该版本处于 v0.2.2 之前被归档进atoms的变更流版本号顺序上的插入历史说明该包承载的不只是纯布局原子也包括随ImageEditor引入的通用控件契约。3.3 v0.4.0 与 v0.9.0尺寸、主题与容器层的标准化v0.4.0允许向Blocks.svelte传入字符串形式的height/width。这与当前Block中get_dimension对字符串直接透传的行为一致是后续min_height/max_height的基础。v0.9.0含一系列 beta 版本是 Gradio 5.0 主题工作的一部分条目数量庞大概括为为组件引入新主题gradio/icons0.8.0、gradio/utils0.7.0把图标收纳进IconButtonWrapper并统一 Icon Button 外观当 Block 设定了height/width时内容居中跨组件标准化height并新增min_height/max_height参数info支持渲染 Markdown修复 ChatInterface 嵌入高度问题。上述尺寸能力在今天Block.svelte的style:min-height/max-height与fullscreen分支直接可见Block.svelte。3.4 v0.15.0 与 v0.13.xRTL 与数据保真v0.15.0 为BlockLabel、gr.HighlightedText、gr.Radio、gr.MultimodalTextbox统一加入rtl支持并微调了 MultimodalTextbox 的 RTL UI。BlockLabel中的dir属性与镜像样式见 2.2 节即为该批次变更的直接产物。v0.13.0 包含聊天界面 flagging/反馈与组件可携带先前数据重新挂载remount的能力后者对保持会话状态至关重要。3.5 v0.16.x–v0.17.0全屏模式打磨与校验支持全屏是Block最复杂的行为之一CHANGELOG 分多次迭代v0.16.1 Improved, smoother fullscreen mode for components#11177v0.16.4 修复图标按钮 wrapper 的 z-indexv0.26.1 Keep fullscreen component controls inside the visible viewport when the page has a scrollbar即全屏下控制条不再被页面滚动条顶出可视区。源码印证了这套机制的复杂度Block.svelteportal 探测position: fixed元素只在没有祖先建立fixed 包含块时才相对视口布局而transform、filter、container-type等都会破坏该假设如gr.Sidebar总带 transform。needs_portal通过在当前父级和目标容器中插入隐藏探针测量矩形若差值超过 1px 则判定需要搬移Block.svelte。portal 迁移需要时把元素移动到最近的.gradio-container或 ShadowRoot/document.body原位置留下div classplaceholder占位退出全屏后由exit_portal还原Block.svelte。动效与清理进入全屏前记录getBoundingClientRect作为 CSS 变量--start-top/--start-left/--start-width/--start-height配合pop-out动画完成从原位置放大到全屏同时在 fullscreen 期间监听 Escape 键退出并通过只在销毁时执行的清理 effect 防止监听器泄漏Block.svelte。这套全屏行为有专门测试覆盖js/atoms/Block.fullscreen.test.ts 与 js/atoms/Block.test.ts是理解Block行为的可执行文档。此外 v0.17.0 为前端加入 validation 支持组件值校验的渲染路径v0.18.0 提供visiblehidden三态见 2.1 节并修复FileExplorer若干问题。3.6 v0.20.x–v0.21.0Svelte 5 迁移、无障碍与自定义按钮v0.20.1是一个高密度修复版本升级 Svelte/Kit 以修复安全问题把 Audio、Upload 与 Atoms 本体迁移到 Svelte 5#ea2d3e9对应 Migrate Audio Upload Atoms to Svelte 5加入 ARIA landmarks 以改进无障碍为溢出文本加入渐隐效果。ARIA 与渐隐分别在CustomButton的aria-label与ScrollFade组件中持续存在。v0.20.0 / v0.20.1 区间出现两个同号版本0.20.0 先后为纯依赖更新与功能版而 v0.19.0 里也有 Svelte5 migration and bugfix#12438与 chatbot 音频播放器 UI 改进。这属于变更集changeset合并顺序造成的版本号并列现象阅读时建议以 PR/提交哈希去重。v0.21.0为 Gallery 增加摄像头上传与剪贴板粘贴来源前端由SelectSource原子提供来源面板的通用实现。v0.22.0Hide forms with no elements 与 v0.22.1 修复gr.html作为布局时的边框反映了对空容器渲染细节的持续打磨。而 v0.20.0 的 custom buttons 能力目前落地在IconButtonWrapper/CustomButton的组合中。3.7 v0.23.0–v0.26.x工程质量与新组件迁移近期版本把重心转向测试基建与 Svelte 5 全面化v0.23.0/v0.23.1/v0.24.0 依次为 Image、Chatbot、ImageSlider 引入单元测试Add Image Unit Tests、Chatbot Unit Tests、Add ImageSlider unit testsv0.23.0 同时修复所有组件加载耗时v0.25.0 把pnpm lint与pnpm ts:check接入 CI保证 monorepo 各包类型与代码风格稳定v0.26.0 将 Image 组件迁移到 Svelte 5gradio/icons0.16.0至此主要媒体组件完成 Svelte 5 迁移v0.26.1 即为本文撰写时最新版本聚焦全屏控制条在页面带滚动条时的视口可见性修复。3.8 依赖面atoms 的三角依赖CHANGELOG 中每版几乎都带 Dependency updates形成以atoms为中心的依赖三角gradio/utils提供通用工具与类型含CustomButton类型、I18nFormatter等版本从 0.0.2 一路升至 0.14.0gradio/icons提供全部图标组件Maximize、Minimize等供IconButton/FullscreenButton使用gradio/markdown-code供 Markdown/代码高亮相关渲染复用主要服务于info与 Markdown 场景从 0.2.0 演进到 0.6.1。从 package 元数据看atoms开启了main_changeset: truepackage.json说明它采用 changeset 管理发布版本——这也解释了为何 CHANGELOG 中存在 0.20.0、0.19.0、0.16.5、0.18.0 等同名重复条目它们是合并期 beta/正式版本号的叠加记录属于正常发布流程产物而非笔误。四、在本仓库中继续深入研究如果你希望顺着本文继续深入推荐以下仓库内路径组件实现js/atoms/src/ 下的每个.svelte文件即一个原子建议从 Block.svelte 与 BlockLabel.svelte 入手二者覆盖了尺寸、全屏、可见性、RTL、无障碍等绝大多数通用语义。消费示例搜索gradio/atoms的导入方如 js/chatbot/shared/ButtonPanel.svelte、js/audio/Index.svelte、js/accordion/Index.svelte可看到真实组件如何组合原子。测试js/atoms/Block.fullscreen.test.ts 与 js/atoms/Block.test.ts 是全屏与基础渲染行为的可执行规格配合 js/atoms/src/inline-markdown.test.ts 覆盖 Markdown 内联渲染。配套工具js/atoms/src/utils/parse_placeholder.ts 解析占位符图标源位于 js/atoms/src/icons/。需要提醒的是本仓库为只读研究环境以上探索请以阅读源码、运行现有测试如包级pnpm test相关命令为主无需改动任何文件。五、小结从 CHANGELOG 的视角看gradio/atoms的演进可以浓缩为四条长期主线容器层能力标准化尺寸三件套、缩放、三态可见性、RTL、全屏/浮层机制的重构与修复、Svelte 5 的渐进迁移Atoms → Audio → Image → 各组件、以及工程化加固单元测试、CI lint/ts:check、加载性能优化。理解这四条主线再对照 Block.svelte 等源码中的 portal 探测、事件委托与 CSS 变量体系就能完整还原 Gradio 前端一切皆组件、一切组件共享同一套外壳的架构全貌。【免费下载链接】gradioBuild and share delightful machine learning apps, all in Python. Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/gr/gradio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考