Gradio 3.0 发布：全新前端设计与 Blocks 低阶 API

机器学习演示

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

自 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://huggingface.co/spaces/Gradio-Blocks/README