Python - Gradio用Blocks构建自定义界面布局的应用程序

什么是Blocks

Blocks是Gradio的低级API,它允许你创建比Interfaces更多的自定义web应用程序和演示。简单来说就是比Interfaces更灵活。
一般使用上下文管理,示例代码如下:

import gradio as grwith gr.Blocks() as demo:gr.Image("lion.jpg", scale=2)gr.Image("tiger.jpg", scale=1)
demo.launch()

Blocks的布局

既然更灵活,那么界面怎么布局也可以你自己决定。
如果没提供布局,那么就是默认一个个组件垂直排列下来。

Row、Column

行布局和列布局

with gr.Blocks() as demo:with gr.Row():with gr.Column():gr.Text(value='1')gr.Text(value='2')with gr.Column():gr.Text(value='3')gr.Text(value='4')
demo.launch()

在这里插入图片描述

Tab

标签页布局

with gr.Blocks(title='test Blocks') as demo:  # title可以修改页面标题with gr.Tab('标签页1'):gr.Text(value='1')gr.Text(value='2')with gr.Tab('标签页2'):gr.Text(value='3')gr.Text(value='4')
demo.launch()

在这里插入图片描述
在这里插入图片描述

Box

盒子布局。就是把组件放同一个盒子里,个人认为没啥用,基本没用到过。
可能我不说都看不出有啥变化,跟第一张图对比,你会发现中间的缝没了,也就是把Box里的所有组件放在同一个盒子里了,而第一张图是两个盒子。

with gr.Blocks(title='test Blocks') as demo:with gr.Box():with gr.Row():with gr.Column():gr.Text(value='1')gr.Text(value='2')with gr.Column():gr.Text(value='3')gr.Text(value='4')
demo.launch()

在这里插入图片描述

Accordion

这个布局就是可以把组件隐藏。

with gr.Blocks(title='test Blocks') as demo:with gr.Accordion("See Details"):with gr.Row():with gr.Column():gr.Text(value='1')gr.Text(value='2')with gr.Column():gr.Text(value='3')gr.Text(value='4')
demo.launch()

在这里插入图片描述
在这里插入图片描述

总结

总之,使用Blocks()来构建程序比使用Inferfaces()肯定灵活得多。
本篇只谈到用Blocks可以自定义界面布局,下一篇我们将继续聊聊自定义组件触发事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22702.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

事务@transactional执行产生重复数据

背景 系统设计之初,每次来新请求,业务层会先查询数据库,判断是否存在相同的id数据(id是唯一标识产品的),有则返回当前数据库查到的数据,根据数据决定下一步动作,没有则认为是初次请…

python+pytest接口自动化之测试函数、测试类/测试方法的封装

目录 前言 测试用例封装的一般规则 测试函数的封装 测试类/方法的封装 示例代码 总结 前言 在pythonpytest 接口自动化系列中,我们之前的文章基本都没有将代码进行封装,但实际编写自动化测试脚本中,我们都需要将测试代码进行封装&#…

C# Winfrom将DataGridView数据导入Excel

1.项目添加Word和Excel的COM类型库引用 2.创建Excel工作表 //定义Excel操作对象Microsoft.Office.Interop.Excel.Application excelApp new Microsoft.Office.Interop.Excel.Application();//定义Excel工作表Microsoft.Office.Interop.Excel.Worksheet worksheet excelApp.Wo…

“管理Layui树形图,提高页面交互性与可视化效果“

标题:管理Layui树形图,提高页面交互性与可视化效果 Layui树形图简介一、引入Layui和jQuery库:二、HTML结构准备:三、初始化树形图:四、配置树形图的其他属性和事件:4.1 实体类4.2 PermissionDao方法4.3 Per…

20230714----重返学习-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性

day-112-one-hundred-and-twelve-20230714-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性 DOM-diff算法 vue2中diff算法 同级比对,跨级比对性能差。而且采用的方式是递归比对,更差一点。根节点只能有一个,比对的时候会从根节…

【Unity面试篇】Unity 面试题总结甄选 |Unity基础篇 | ❤️持续更新❤️

2.2 前言 关于Unity面试题相关的所有知识点:🐱‍🏍2023年Unity面试题大全,共十万字面试题总结【收藏一篇足够面试,持续更新】为了方便大家可以重点复习某个模块,所以将各方面的知识点进行了拆分并更新整理…

Jenkins全栈体系(二)

Jenkins 第三章 Jenkins Git Maven 自动化部署配置 十、几种构建方式 快照依赖构建/Build whenever a SNAPSHOT dependency is built 当依赖的快照被构建时执行本job 触发远程构建 (例如,使用脚本) 远程调用本job的restapi时执行本job job依赖构建/Build after other proj…

matlab学习指南(2):安装工具箱Toolbox的方法(详细图解)

🌅*🔹** φ(゜▽゜*)♪ **🔹*🌅 欢迎来到馒头侠的博客,该类目主要讲数学建模的知识,大家一起学习,联系最后的横幅! 喜欢的朋友可以关注下,私信下次更新不迷路&#xff0…

青岛大学_王卓老师【数据结构与算法】Week05_12_队列的类型定义_学习笔记

本文是个人学习笔记,素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享, 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权,请留言作删文处理。 课程视频链接: 数据结构与算法基础…

Elasticsearch 倒排索引原理

看下面这个表格里的文档内容: 如果我这时候想要在这么多文档中查找带有 比亚迪 的我要怎么查,传统这个查询里面我想查这个比亚迪的话。就是先在文档1里面搜索一下有没有 比亚迪,没有,我在到文档2中查找比亚迪,还是没有…

多态的基本使用

这部分的内容主要是记住使用方法,原理在之后会讲。 多态的概念 多态的概念:通俗来说,就是多种形态,具体点就是去完成某个行为,当不同的对象去完成时会产生出不同的状态。 比如说买票,普通人买票就是正常买&…

Low-Light Image Enhancement via Self-Reinforced Retinex Projection Model 论文阅读笔记

这是马龙博士2022年在TMM期刊发表的基于改进的retinex方法去做暗图增强(非深度学习)的一篇论文 文章用一张图展示了其动机,第一行是估计的亮度层,第二列是通常的retinex方法会对估计的亮度层进行RTV约束优化,从而产生…