更多区块功能

示例

就像使用gr.Interface一样，当你在使用gr.Blocks时，你也可以为你的函数添加示例。在这种情况下，实例化一个gr.Examples，就像你实例化任何其他组件一样。gr.Examples的构造函数需要两个必需的参数：

examples: 一个嵌套的示例列表，其中外部列表由示例组成，每个内部列表由对应于每个输入组件的输入组成
inputs: 当点击示例时应填充的组件或组件列表

你也可以设置cache_examples=True或cache_examples='lazy'，类似于在gr.Interface中的缓存API，在这种情况下，必须提供两个额外的参数：

outputs: 与示例输出对应的组件或组件列表
fn: 用于生成与示例对应的输出的函数

这里有一个示例，展示了如何在gr.Blocks应用中使用gr.Examples：

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            num_1 = gr.Number(value=4)
            operation = gr.Radio(["add", "subtract", "multiply", "divide"])
            num_2 = gr.Number(value=0)
            submit_btn = gr.Button(value="Calculate")
        with gr.Column():
            result = gr.Number()

    submit_btn.click(
        calculator, inputs=[num_1, operation, num_2], outputs=[result], api_name=False
    )
    examples = gr.Examples(
        examples=[
            [5, "add", 3],
            [4, "divide", 2],
            [-4, "multiply", 2.5],
            [0, "subtract", 1.2],
        ],
        inputs=[num_1, operation, num_2],
    )

if __name__ == "__main__":
    demo.launch(show_api=False)

注意：当你点击示例时，不仅输入组件的值会更新为示例值，组件的配置也会恢复到构建组件时的属性。这确保了即使组件的配置发生了变化，示例仍然与组件兼容。

持续运行事件

你可以使用gr.Timer()对象在固定时间表上运行事件。这将在计时器的tick事件触发时运行该事件。请参见下面的代码：

with gr.Blocks as demo:
    timer = gr.Timer(5)
    textbox = gr.Textbox()
    textbox2 = gr.Textbox()
    timer.tick(set_textbox_fn, textbox, textbox2)

这也可以直接与组件的every=参数一起使用，如果组件的值是一个函数：

with gr.Blocks as demo:
    timer = gr.Timer(5)
    textbox = gr.Textbox()
    textbox2 = gr.Textbox(set_textbox_fn, inputs=[textbox], every=timer)

这是一个示例演示，它打印当前时间戳，并定期打印随机数！

import gradio as gr
import random
import time

with gr.Blocks() as demo:
  timer = gr.Timer(1)
  timestamp = gr.Number(label="Time")
  timer.tick(lambda: round(time.time()), outputs=timestamp)

  number = gr.Number(lambda: random.randint(1, 10), every=timer, label="Random Number")
  with gr.Row():
    gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer)
    gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer)
    gr.Button("Go Fast").click(lambda: 0.2, None, timer)

if __name__ == "__main__":
  demo.launch()

收集事件数据

您可以通过将关联的事件数据类作为类型提示添加到事件监听器函数中的参数来收集有关事件的特定数据。

例如，.select()的事件数据可以通过gradio.SelectData参数进行类型提示。当用户选择触发组件的某一部分时，会触发此事件，事件数据包括用户具体选择的信息。例如，如果用户在Textbox中选择了一个特定的单词，在Image中选择了一个特定的像素，在Gallery中选择了一个特定的图像，或者在DataFrame中选择了一个特定的单元格，事件数据参数将包含有关特定选择的信息。

SelectData 包含所选的值以及选择发生的索引。一个简单的示例，展示了在 Textbox 中选择了什么文本。

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox("The quick brown fox jumped.")
    selection = gr.Textbox()
    
    def get_selection(select_evt: gr.SelectData):
        return select_evt.value

    textbox.select(get_selection, None, selection)

在下面的2人井字游戏演示中，用户可以选择DataFrame中的一个单元格来进行移动。事件数据参数包含有关所选特定单元格的信息。我们可以首先检查单元格是否为空，然后用用户的移动更新单元格。

import gradio as gr

with gr.Blocks() as demo:
    turn = gr.Textbox("X", interactive=False, label="Turn")
    board = gr.Dataframe(value=[["", "", ""]] * 3, interactive=False, type="array")

    def place(board: list[list[int]], turn, evt: gr.SelectData):  
        if evt.value:
            return board, turn
        board[evt.index[0]][evt.index[1]] = turn
        turn = "O" if turn == "X" else "X"
        return board, turn

    board.select(place, [board, turn], [board, turn], show_progress="hidden")

demo.launch()