Gradio：构建交互式web界面之设置布局

1、前言

之前文章总体概述过Gradio工具，也使用该工具创建过简单的交互界面。本章主要通过gr.Blocks模块，构建自己设计的任意界面。

Gradio概述文章链接：
https://blog.csdn.net/weixin_47285222/article/details/140825512?spm=1001.2014.3001.5501

2、gr.Blocks应用

构建一个界面，首要构思出界面的整体分布，接下来就可以用gr.Blocks模块来实现界面布局。实现之前，需要先了解下定义组件布局的对象

• gr.Row：行布局，组件从左到右排列
• gr.Column：列布局，组件从上到下排列

如何理解呢？可以理解为两个对象定义的组件会在同一行或同一列显示，可以使用下面代码具体展示

import gradio as gr

# 创建应用界面
with gr.Blocks() as demo:
    #总布局划分为两块，从左到右排列
    with gr.Row():
    	#左边，从上到下排列组件，共四个组件
        with gr.Column():
            gr.Image(label = '输入图像')
            gr.Slider(label = '阈值',
                      value=0.5,
                      minimum=0.0,
                      maximum=1.0,
                      step=0.01,
                      )
            gr.Checkbox(label = 'box')
            gr.Checkbox(label = 'mask')
        #右边，从上到下排列组件，两个组件
        with gr.Column():
            gr.Textbox(label = '坐标信息')
            gr.Button('提交')
demo.launch(share=True)

打开分享链接，如下图所示。同一布局对象下的组件会按同一行或列的位置显示。

以上布局可进一步划分，对于左边的四个组件，下面的两个复选框组件可左右排列。

实现代码如下，将上面两个组件划分为一组，两个复选框划分为一组，这样对每一组中的组件在重新划分布局。界面越复杂，这个with嵌套会越深。

import gradio as gr

# 创建应用界面
with gr.Blocks() as demo:
    #总布局从左到右排列
    with gr.Row():
        with gr.Column():
        	#将两个复选框单设为一小块，重新布局
            with gr.Column():
                gr.Image(label = '输入图像')
                gr.Slider(label = '阈值',
                          value=0.5,
                          minimum=0.0,
                          maximum=1.0,
                          step=0.01,
                          )
            with gr.Row():
                gr.Checkbox(label = 'box')
                gr.Checkbox(label = 'mask')
        with gr.Column():
                gr.Textbox(label = '坐标信息')
                gr.Button('提交')
demo.launch(share=True)