Gradio中如何将示例块移至输入组件下方？

不需要改用gr.Blocks，通过自定义CSS即可调整示例块的位置，同时保留gr.Interface的原有简洁性。以下是修改后的代码：

import gradio as gr
from PIL import Image

def text(img):
    return None, None, None, 'Test'

demo = gr.Interface(
    fn=text, 
    inputs=gr.Image(type="pil"),
    examples=["rock.jpg", "rock2.jpg"],
    outputs=[
        gr.Image(),
        gr.Label(num_top_classes=3), 
        gr.Label(num_top_classes=3),
        gr.Textbox()
    ],
    title="Test", 
    description="Test",
    theme=gr.themes.Monochrome(),
    css="""
    /* 调整容器flex布局的顺序，将示例块移到输入下方 */
    .gr-container {
        display: flex;
        flex-direction: column;
    }
    .gr-examples {
        order: 2;
        margin: 1rem 0;
    }
    .gr-output-container {
        order: 3;
    }
    """
)

demo.launch()

原理说明 #

Gradio的gr.Interface默认采用flex布局，通过CSS的order属性调整各区域的排列顺序：

• 输入区域默认处于order:1的位置
• 将示例块（.gr-examples）的order设为2，使其紧跟在输入区域之后
• 输出容器（.gr-output-container）设为3，排在示例块之后

这样就能实现示例块位于输入图像组件正下方的需求，无需重构为gr.Blocks。

内容的提问来源于stack exchange，提问作者test tes