什么是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可以自定义界面布局,下一篇我们将继续聊聊自定义组件触发事件。