Gradio的Blocks开发实战1：实现图片的切换显示

前言：在使用Gradio开发界面时，使用Blocks比Interface更加灵活。但是博主在实际的开发过程中，发现网上有关Block的相关教程很少，而Block的官方文档又比较晦涩难懂，因此创作了此系列教程，希望能帮助到大家。

实现的效果：按键控制图片的切换显示

为了方便演示，我用gr.Row()+gr.Column()将模块复制为左右各一份。如上图，左侧模块选择展示image1，而右侧模块选择展示image2。通常，界面只需要一个单选按钮和一个图片显示组件就足够了。读者可以自行删除其中一个。

代码：

import gradio as gr

images = {
     "image1": r"C:\Users\lenovo\Desktop\Kobe.jpg",
     "image2": r"C:\Users\lenovo\Desktop\Kobe.png",
     "image3": r"C:\Users\lenovo\Desktop\KOBE4.png",
 }
def change_image(choice):
    # 根据选择返回对应的图片路径
    return images[choice]


with gr.Blocks() as demo:
    with gr.Row():

        # 显示图片的块
        with gr.Column(scale=2):
            radio = gr.Radio(["image1", "image2", "image3"], label="选择图片")
            image = gr.Image(images["image1"])  # 初始显示"short"图片

    # 当单选按钮的值改变时，更新图片组件的source属性
            radio.change(fn=change_image, inputs=radio, outputs=image)
        with gr.Column(scale=2):
            radio = gr.Radio(["image1", "image2", "image3"], label="选择图片")
            image = gr.Image(images["image1"])  # 初始显示"short"图片

            # 当单选按钮的值改变时，更新图片组件的source属性
            radio.change(fn=change_image, inputs=radio, outputs=image)

demo.launch()

实现切换功能的关键在于调用了radio.change函数，它能检测到radio的变化，读取radio的值导入到change_image（），函数的return返回给image。