Gradio之blocks灵活搭建页面

这里写目录标题

  • 搭建一个UI界面
    • 搭建上半部分的框架
    • 比例调节以及其他效果
    • 搭建下半部分左边部分
    • 搭建下半部分右边部分
    • 拓展-CSS的应用
  • 使用标签搭建第二个页面
    • 示例
  • 补充
    • Accordion
    • Group()

搭建一个UI界面

搭建上半部分的框架

如下图,我们想要基本还原下图右边的UI界面,首先搭建上半部分
在这里插入图片描述
导包之后,
第一个with,要with上Blocks,并重命名:
with gr.Tab(label=“txt.img”):
(之后,这里是创建了一个标签,就是右图中那个一整个页面的底层,可以看到当前在第一个标签下,而label的值,就是标签上标注)
with gr.Row():
(从这里开始,要进行布局了,基本上每个页面都是由多个行布局和列布局交错配合形成的,这里,上半部分整体是一个水平布局,所以,以Row引导)
with gr.Column():

with gr.Column():

with gr.Column():

(之后三个垂直布局,因为在整个水平布局里面,可以拆分为三个垂直布局,这三个布局会水平放置,因为他们在水平布局之下)
第一个垂直布局里面,加了两个文本框(属性lines表示其高度,label是其原始标注内容)
第二个垂直布局里面,加了四个按钮(属性value是其原始标注内容)
第三个垂直布局里面:
gr.Button(value=“Generate”)
(首先是一个按钮,value是其原始标注内容)
with gr.Row():
(之后是一个水平布局,说明在按钮下面是一个水平布局)
将两个下拉框放入水平布局(属性第一个参数是数组,表示下拉框的选项;第二个参数是label,是其上方的原始标注内容)

最终呈现的效果如下图:
在这里插入图片描述

比例调节以及其他效果

可以看到,我们目前搭建出来的,是三个垂直布局五五开的效果,而我们的目标图并不是这样,所以,需要进行比例的微调
在这里插入图片描述
对于垂直布局,他有一个属性:scale,他可以调节与之相邻的垂直布局的比例,比如,上面这种写法,就是15:1:6的比例布局
,那么效果是:
在这里插入图片描述
可以看到,第二个垂直布局和第三个垂直布局,似乎还是五五开的状态。接下来解决这个问题:

出现这个问题主要是因为很多组件都有他的最小宽度,比如,我们ctrl+左键,进入Textbox组件内,可以看到其最小宽度是160
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
同样的,对于column,也有他的最小宽度。
在这里插入图片描述
所以,我们在这里调整其最小宽度,只要保证最小宽度比我们想要设置的宽度小就可以了,我们调为1,就已经是最小的宽度了,基本上调为1之后,不会限制任何比例对宽度的下调了

最后的效果是这样:
在这里插入图片描述
但是Generate这个按钮,他的颜色,包括他的高度,都需要进行调整:
在这里插入图片描述
首先,对其variant属性进行设置,设置为primary,之后设置其scale=1(可以让其撑大其高度)
tips:我们可以通过ctrl+左键,进入variant中,查看可以设置为哪些值,以及其默认值是谁,如下图
在这里插入图片描述

搭建下半部分左边部分

在这里插入图片描述

可以看到上来就是一个Row,
(表明,下半部分整个是个水平布局)
with gr.Column():
(水平布局里面整体分为两个垂直布局,现在是第一个垂直布局)
而在该垂直布局里面,是多个水平布局的堆积
with gr.Row():

with gr.Row():

with gr.Row():

checkboxgroup
dropdown4
(在诸多水平布局之间,混入了几个没有写任何布局的组件,那是因为该行就那一个组件,所以,在只有一个组件,且目前在垂直布局的大引导下,也就无需再写一个水平布局了,但是还是建议写上,便于代码的阅读和维护)

搭建下半部分右边部分

在这里插入图片描述

可以看到,最后的效果,有一点小bug,因为那一行六个按钮,本来是写在一个row内的,也就是本就是一行,现在怎么会变成两行,
问题还是那个,每个按钮有他的最小宽度,我们设置其最小宽度为1,就不会干扰我们的设置了:
在这里插入图片描述

拓展-CSS的应用

在这里插入图片描述
我们现在有一个css文件,对样式进行更加深度的自定义,例如,上图中利用css,对所有样式名为btn的组件,进行css样式设置
在这里插入图片描述
我们在blocks内,将css加载进来,之后对四个按钮设置其样式名,用属性elem_classes=“btn”,这样,这四个按钮,就可以生效css中.btn的设置了,效果如下图:
在这里插入图片描述

使用标签搭建第二个页面

示例

在这里插入图片描述
在第一个Tab之后,
with gr.Tab(label=“标注”):
可以生成第二个标签,这样,点击第二个标签,他就是一个全新的页面,如下图:
在这里插入图片描述

补充

Accordion

使用方法:
with gr.Accordion():
在这里插入图片描述
在with gr.Accordion():下面的组件,可以被选择被展示还是隐藏:
在这里插入图片描述

在这里插入图片描述

Group()

在这里插入图片描述
在六个按钮之前放一个组,该组内有两个按钮,我们来看看什么效果:
在这里插入图片描述
可以看到两个button捏在一起了

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【优选算法】——Leetcode——202—— 快乐数

目录 1.题目 2. 题⽬分析: 3.简单证明: 4. 解法(快慢指针): 算法思路: 补充知识:如何求⼀个数n每个位置上的数字的平⽅和。 总结概括 5.代码实现 1.C语言 2.C 1.题目 202. 快乐数 编写一个算法来…

论文复现和点评《基于随机森林模型的个人信用风险评估研究》

作者Toby,来源公众号:Python风控模型,论文复现和点评《基于随机森林模型的个人信用风险评估研究》 最近Toby老师看到一篇论文热度比较高,下载量有665次,论文标题是《基于随机森林模型的 个人信用风险评估研究》 论文篇…

陪诊系统|陪诊小程序成品|陪诊系统功能

随着人们对健康的日益关注以及医疗技术的不断进步,陪诊小程序应运而生,通过提供陪同就医、医疗服务和健康管理等功能为患者和家庭成员提供了更多的便利和选择。本文将分析陪诊小程序的关键功能,以便更好地理解其在医疗领域的作用。 在陪诊小程…

练习项目后端代码解析注解篇(annotation)

前言 本来想从接口处入手的,但是一下看到接口里几十个方法,眼睛有点抗拒,想想还是先看作者写的自定义注解吧。 项目里有三个自定义注解: 分别是AccessLimit注解、OperationLogger注解、VisitLogger注解 AccessLimit注解 这是一…

Summer ‘24来啦!15个最热门的功能抢先看!

Salesforce Summer 24即将发布!本篇文章我们将深入了解Summer 24最热门的声明性功能。 01 自动化Lightning应用程序 新的自动化Lightning应用程序中包含所有与自动化相关的内容。访问该应用程序的用户可以在主应用程序中看到Flow、错误信息和其他基于社区的链接。…

自动驾驶主流芯片及平台架构(一)

零部件成本下降、中低端车竞争加剧,推动ADAS渗透率在中国市场快速提升,自主品牌ADAS装配量大幅提升 零部件成本下降、中低端车竞争加剧,推动ADAS渗透率在中国市场快速提升,自主品牌ADAS装配量大幅提升。5年前在一些高端车型上才有…

【JVM】类加载机制及双亲委派模型

目录 一、类加载过程 1. 加载 2. 连接 a. 验证 b. 准备 c. 解析 3. 初始化 二、双亲委派模型 类加载器 双亲委派模型的工作过程 双亲委派模型的优点 一、类加载过程 JVM的类加载机制是JVM在运行时,将 .class 文件加载到内存中并转换为Java类的过程。它…

【硬核科普】一文读懂生成对抗网络GAN

0. 前言 按照国际惯例,首先声明:本文只是我自己学习的理解,虽然参考了他人的宝贵见解及成果,但是内容可能存在不准确的地方。如果发现文中错误,希望批评指正,共同进步。 本文基于Ian在2014年发表在NIPS的论…

GDPU 天码行空11

(一)实验目的 1、掌握JAVA中IO中各种类及其构造方法; 2、重点掌握IO中类所具有的IO操作方法; 3、熟悉软件中登录模块的开发方法; 4、掌握IO中读写常用方法。 5、进一步熟悉正则规则的使用方法。 (二&…

GT资源-Clock资源

一、Transmitter 时钟分布 XCLK:在使用TX buffer的模式下,XCLK来源于TXOUTCLK。在使用TX bypassing的模式下XCLK来源于TXUSERCLK。TXUSRCLK是GTX/GTH中PCS的内部逻辑时钟。TXUSRCLK2是GT Transceiver 用户侧逻辑时钟。 TXUSRCLK与TXUSRCLK2的关系 FPGA …

聚类分析:使用R语言对Iris数据集进行K均值聚类

引言 聚类分析是一种常用的无监督学习技术,旨在将数据集中的样本分成具有相似特征的组。K均值聚类是其中一种常见的方法,它通过将数据点划分为K个簇,并使每个数据点与其所属簇的中心点距离最小化来实现聚类。本文将介绍如何使用R语言执行K均…

奥威-金蝶BI现金流量表模板,可借鉴、可套用

企业现金流一旦出了问题都是大问题,会直接影响到企业的日常运作,甚至直接关系到企业能不能继续存活,因此现金流量表是企业财务分析中重要报表之一,也是企业监控财务监控情况的重要手段之一。那么这么重要的一份现金流量表该怎么做…

羊大师解读,当代年轻人焦虑应对指南

羊大师解读,当代年轻人焦虑应对指南 当代年轻人面临焦虑问题时,羊大师提出以下综合建议,要增强自我认知了解自身的需求和期望,明确自己的价值观和目标。这有助于避免盲目跟风和过度比较,从而减轻不必要的焦虑。 合理规…

Mybatis-Plus大批量插入数据到MySQL

MyBatis-Plus的saveBatch方法 GetMapping("/save1") public void save1() {// 数据准备List<MallOrder> orderList getMallOrderList();// mybatis-pluslong start System.currentTimeMillis();mallOrderService.saveBatch(orderList);System.out.println(&…

做私域,朋友圈到底该怎么发?

说到做私域&#xff0c;很多人都会问&#xff1a;朋友圈该怎么发&#xff1f;相信大家的朋友圈早已经被各种广告攻占了&#xff0c;很多也都被大家屏蔽了。但如果要做私域&#xff0c;单纯发广告是行不通的&#xff0c;可是现在依然有很多人&#xff0c;认为做私域就是狂发朋友…

RabbitMQ的介绍和使用

1.同步通讯和异步通讯 举个例子&#xff0c;同步通讯就像是在打电话&#xff0c;因此它时效性较强&#xff0c;可以立即得到结果&#xff0c;但如果你正在和一个MM打电话&#xff0c;其他MM找你的话&#xff0c;你们之间是不能进行消息的传递和响应的 异步通讯就像是微信&#…

美国纽扣电池UL4200A及16CFR1262标准亚马逊要求

2023年9月21日&#xff0c;美国消费品安全委员会CPSC(Consumer Product Safety Commission) 决定采用UL 4200A-2023&#xff08;包含纽扣电池或硬币电池的产品安全标准&#xff09;作为包含纽扣电池或硬币电池的消费品的强制性消费品安全规则&#xff0c;相关要求同时被编入到1…

前端数据可视化基础(折线图)

目录 前言&#xff1a; 画布&#xff1a; 折线图 (Line Chart): 前言&#xff1a; 前端中的数据可视化是指将大量数据以图形或图像的形式在前端页面上展示出来&#xff0c;以便用户能够更直观地理解和分析这些数据。数据可视化是一种强大的工具&#xff0c;它利用了人类视觉…

《架构思维:从程序员到CTO》:通往顶级架构师之路

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

使用excel合理整理数据

使用excel合理整理数据 Excel函数LOOKUP把两个sheet数据关联起来LOOKUP函数 Excel函数LOOKUP把两个sheet数据关联起来 LOOKUP函数 需求场景 1、sheet1是视频的数据比如 aid、作者、视频信息 2、sheet2是视频的播放数据比如 aid vv uv等 做的就是根据1、2 的aid 将 sheet2中的所…