使用渲染装饰器的动态应用

到目前为止，你在 Blocks 中定义的组件和事件监听器都是固定的 - 一旦演示启动，就无法添加新的组件和监听器，也无法删除现有的组件和监听器。

`@gr.render` 装饰器引入了动态更改此功能的能力。让我们来看一下。

组件的动态数量

在下面的示例中，我们将创建可变数量的文本框。当用户编辑输入文本框时，我们为输入中的每个字母创建一个文本框。请在下面尝试一下

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")

    @gr.render(inputs=input_text)
    def show_split(text):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                gr.Textbox(letter)

demo.launch()

看看我们现在如何使用自定义逻辑（在本例中，是一个简单的 `for` 循环）创建可变数量的文本框。`@gr.render` 装饰器通过以下步骤实现这一点：

创建一个函数并将 @gr.render 装饰器附加到它。
将输入组件添加到 @gr.render 的 `inputs=` 参数中，并在你的函数中为每个组件创建一个相应的参数。此函数将在组件的任何更改时自动重新运行。
将所有你想要基于输入渲染的组件添加到函数内部。

现在，每当输入更改时，函数都会重新运行，并将先前函数运行中创建的组件替换为最新运行中的组件。非常简单直接！让我们为这个应用增加一点复杂性。

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
    def show_split(text, mode):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                if mode == "textbox":
                    gr.Textbox(letter)
                else:
                    gr.Button(letter)

demo.launch()

默认情况下，`@gr.render` 重新运行由应用程序的 `.load` 监听器和提供的任何输入组件的 `.change` 监听器触发。我们可以通过在装饰器中显式设置触发器来覆盖此设置，就像我们在本应用程序中所做的那样，仅在 `input_text.submit` 上触发。如果你正在设置自定义触发器，并且你也希望在应用程序启动时自动渲染，请确保将 `demo.load` 添加到你的触发器列表中。

动态事件监听器

如果你正在创建组件，你可能也想将事件监听器附加到它们。让我们看一个示例，该示例接受可变数量的文本框作为输入，并将所有文本合并到一个框中。

import gradio as gr

with gr.Blocks() as demo:
    text_count = gr.State(1)
    add_btn = gr.Button("Add Box")
    add_btn.click(lambda x: x + 1, text_count, text_count)

    @gr.render(inputs=text_count)
    def render_count(count):
        boxes = []
        for i in range(count):
            box = gr.Textbox(key=i, label=f"Box {i}")
            boxes.append(box)

        def merge(*args):
            return " ".join(args)

        merge_btn.click(merge, boxes, output)

    merge_btn = gr.Button("Merge")
    output = gr.Textbox(label="Merged Output")

demo.launch()

让我们看看这里发生了什么

状态变量 `text_count` 正在跟踪要创建的文本框数量。通过单击“添加”按钮，我们增加 `text_count`，这会触发渲染装饰器。
请注意，在我们在渲染函数中创建的每个文本框中，我们都显式设置了 `key=` 参数。此键允许我们在重新渲染之间保留此组件的值。如果你在文本框中键入一个值，然后单击“添加”按钮，则所有文本框都会重新渲染，但它们的值不会被清除，因为 `key=` 会在渲染过程中维护组件的值。
我们已将渲染函数中创建的文本框存储在一个列表中，并将此列表作为输入提供给合并按钮事件监听器。请注意，**所有使用在渲染函数内部创建的组件的事件监听器也必须在该渲染函数内部定义**。事件监听器仍然可以引用渲染函数外部的组件，就像我们在此处通过引用 `merge_btn` 和 `output` 所做的那样，它们都在渲染函数外部定义。

正如组件一样，每当函数重新渲染时，先前渲染中创建的事件监听器都会被清除，并附加最新运行中的新事件监听器。

这使我们能够创建高度可定制和复杂的交互！

整合在一起

让我们看两个使用上述所有功能的示例。首先，尝试一下下面的待办事项列表应用程序：

import gradio as gr

with gr.Blocks() as demo:

    tasks = gr.State([])
    new_task = gr.Textbox(label="Task Name", autofocus=True)

    def add_task(tasks, new_task_name):
        return tasks + [{"name": new_task_name, "complete": False}], ""

    new_task.submit(add_task, [tasks, new_task], [tasks, new_task])

    @gr.render(inputs=tasks)
    def render_todos(task_list):
        complete = [task for task in task_list if task["complete"]]
        incomplete = [task for task in task_list if not task["complete"]]
        gr.Markdown(f"### Incomplete Tasks ({len(incomplete)})")
        for task in incomplete:
            with gr.Row():
                gr.Textbox(task['name'], show_label=False, container=False)
                done_btn = gr.Button("Done", scale=0)
                def mark_done(task=task):
                    task["complete"] = True
                    return task_list
                done_btn.click(mark_done, None, [tasks])

                delete_btn = gr.Button("Delete", scale=0, variant="stop")
                def delete(task=task):
                    task_list.remove(task)
                    return task_list
                delete_btn.click(delete, None, [tasks])

        gr.Markdown(f"### Complete Tasks ({len(complete)})")
        for task in complete:
            gr.Textbox(task['name'], show_label=False, container=False)

demo.launch()

请注意，几乎整个应用程序都在单个 `gr.render` 内部，该 `gr.render` 对任务 `gr.State` 变量做出反应。此变量是一个嵌套列表，这带来了一些复杂性。如果你设计一个 `gr.render` 来对列表或字典结构做出反应，请确保执行以下操作：

任何以应触发重新渲染的方式修改状态变量的事件监听器都必须将状态变量设置为输出。这让 Gradio 知道检查变量是否在后台已更改。
在 `gr.render` 中，如果在循环中的变量在事件监听器函数内部使用，则应通过在函数头中将其设置为自身的默认参数来“冻结”该变量。请参阅我们在 `mark_done` 和 `delete` 中如何使用 `task=task`。这会将变量冻结为其“循环时间”值。

让我们看最后一个使用我们所学一切的示例。下面是一个音频混音器。提供多个音轨并将它们混合在一起。

import gradio as gr

with gr.Blocks() as demo:
    track_count = gr.State(1)
    add_track_btn = gr.Button("Add Track")

    add_track_btn.click(lambda count: count + 1, track_count, track_count)

    @gr.render(inputs=track_count)
    def render_tracks(count):
        audios = []
        volumes = []
        with gr.Row():
            for i in range(count):
                with gr.Column(variant="panel", min_width=200):
                    gr.Textbox(placeholder="Track Name", key=f"name-{i}", show_label=False)
                    track_audio = gr.Audio(label=f"Track {i}", key=f"track-{i}")
                    track_volume = gr.Slider(0, 100, value=100, label="Volume", key=f"volume-{i}")
                    audios.append(track_audio)
                    volumes.append(track_volume)

            def merge(data):
                sr, output = None, None
                for audio, volume in zip(audios, volumes):
                    sr, audio_val = data[audio]
                    volume_val = data[volume]
                    final_track = audio_val * (volume_val / 100)
                    if output is None:
                        output = final_track
                    else:
                        min_shape = tuple(min(s1, s2) for s1, s2 in zip(output.shape, final_track.shape))
                        trimmed_output = output[:min_shape[0], ...][:, :min_shape[1], ...] if output.ndim > 1 else output[:min_shape[0]]
                        trimmed_final = final_track[:min_shape[0], ...][:, :min_shape[1], ...] if final_track.ndim > 1 else final_track[:min_shape[0]]
                        output += trimmed_output + trimmed_final
                return (sr, output)

            merge_btn.click(merge, set(audios + volumes), output_audio)

    merge_btn = gr.Button("Merge Tracks")
    output_audio = gr.Audio(label="Output", interactive=False)

demo.launch()

在此应用中需要注意两件事：

我们为所有组件提供 key=！我们需要这样做，以便在为现有轨道设置值后添加另一个轨道时，现有轨道的输入值不会在重新渲染时重置。
当有大量不同类型和任意数量的组件传递给事件监听器时，使用集合和字典表示法来表示输入比列表表示法更容易。在上面，当我们将输入传递给 merge 函数时，我们创建了一个包含所有输入 gr.Audio 和 gr.Slider 组件的大集合。在函数体中，我们将组件值作为字典查询。

gr.render 极大地扩展了 Gradio 的功能 - 看看你能用它做出什么！