Gradio 3.0 发布：前端全面重写并推出 Blocks

机器学习演示

机器学习演示是发布模型时越来越重要的一环。演示让任何人——不仅仅是机器学习工程师——都能在浏览器中试用模型、对预测结果给出反馈，并在模型表现良好时建立对它的信任。

自2019年第一个版本发布以来，已经有超过600,000个机器学习演示是用Gradio库构建的，而今天，我们非常激动地宣布Gradio 3.0：Gradio库的一次彻底重新设计 🥳

Gradio 3.0有什么新内容？

🔥 基于我们从Gradio用户那里听到的反馈，前端进行了彻底重新设计：

我们转向了现代技术（如Svelte）来构建Gradio前端。因此，我们看到有效载荷小得多，页面加载也快得多！
我们还采用了更加简洁的设计，这将使Gradio演示在视觉上能够融入更多场景（例如被嵌入到博客文章中）。

我们改造了现有组件，比如Dataframe，使其更加用户友好（试试把CSV文件拖放到Dataframe中），并添加了新组件，比如Gallery，让你能够为你的模型构建合适的UI。

我们新增了一个TabbedInterface类，允许你将相关演示分组为一个Web应用中的多个标签页

查看你可以在我们（重新设计过的）文档中使用的所有组件 🤗！

🔥 我们创建了一种名为Gradio Blocks的新低级语言，让你可以直接在Python中构建复杂的自定义Web应用：

我们为什么创建Blocks？Gradio演示非常容易构建，但如果你希望对演示的布局有更多控制，或者希望数据流有更大灵活性呢？例如，你可能想要：

改变演示的布局，而不是只有所有输入在左侧、输出在右侧
拥有多步骤界面，其中一个模型的输出成为下一个模型的输入，或者拥有更灵活的数据流
根据用户输入改变组件的属性（例如Dropdown中的选项）或其可见性

低级Blocks API允许你直接在Python中完成所有这些操作。

下面是一个Blocks演示示例，它创建了两个简单演示，并使用标签页将它们分组在一起：

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tabs():
        with gr.TabItem("Flip Text"):
            text_input = gr.Textbox()
            text_output = gr.Textbox()
            # this demo runs whenever the input textbox changes
            text_input.change(flip_text, inputs=text_input, outputs=text_output)
        
        with gr.TabItem("Flip Image"):
            with gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            button = gr.Button("Flip")
            # this demo runs whenever the button is clicked
            button.click(flip_image, inputs=image_input, outputs=image_output)
    
demo.launch()

运行launch()后，将出现以下演示：

要逐步了解Blocks，请查看专门的Blocks指南

Gradio Blocks派对

我们对Gradio Blocks非常兴奋——而且我们非常希望你来试用它——所以我们正在组织一场比赛，Gradio Blocks派对（😉），看看谁能用Blocks构建出最好的演示。通过构建这些演示，我们可以让最先进的机器学习不仅对工程师可用，也对任何会使用互联网浏览器的人可用！

即使你以前从未使用过Gradio，现在也是开始的最佳时机，因为Blocks派对将持续到五月底。派对结束时，我们将为使用Blocks构建的演示赠送🤗周边和其他奖品。

在此了解更多关于Blocks派对的信息：https://hf-mirror.com/spaces/Gradio-Blocks/README