course/pr_1213/es/chapter9/7.md

Introducción a Gradio Blocks[[introduction-to-gradio-blocks]]

En las secciones anteriores hemos explorado y creado demos usando la clase Interface. En esta sección presentaremos la API de bajo nivel gradio.Blocks.

• Interface: una API de alto nivel para construir demos sencillas.
• Blocks: una API de bajo nivel para controlar el diseño y el flujo de datos de tu aplicación.

¿Por qué Blocks?[[why-blocks-]]

Blocks es útil cuando quieres:

• Agrupar varias demos relacionadas en pestañas.
• Cambiar el diseño de entradas y salidas.
• Crear interfaces de varios pasos.
• Modificar propiedades o visibilidad de componentes según la entrada del usuario.

Crear una demo sencilla usando Blocks[[creating-a-simple-demo-using-blocks]]

import gradio as gr

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

demo = gr.Blocks()

with demo:
    gr.Markdown(
        """
    # Flip Text!
    Start typing below to see the output.
    """
    )
    input = gr.Textbox(placeholder="Flip this text")
    output = gr.Textbox()

    input.change(fn=flip_text, inputs=input, outputs=output)

demo.launch()

Personalizar el diseño de tu demo[[customizing-the-layout-of-your-demo]]

Puedes organizar componentes con Row, Column, Tabs y TabItem:

import numpy as np
import gradio as gr

demo = gr.Blocks()

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

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

with demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tabs():
        with gr.TabItem("Flip Text"):
            with gr.Row():
                text_input = gr.Textbox()
                text_output = gr.Textbox()
            text_button = gr.Button("Flip")
        with gr.TabItem("Flip Image"):
            with gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button("Flip")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

Explorar eventos y estado[[exploring-events-and-state]]

Con Blocks puedes conectar eventos como click() o change() a funciones Python, reutilizar componentes como entrada y salida, y construir flujos más complejos.

Crear demos de varios pasos[[creating-multi-step-demos]]

También puedes encadenar varias funciones, usando la salida de una como entrada de otra, por ejemplo de speech-to-text a análisis de sentimiento.

Actualizar propiedades de componentes[[updating-component-properties]]

Además de cambiar valores, puedes actualizar propiedades como visibilidad o número de líneas devolviendo gr.Textbox.update(...) desde una función.

Al igual que con Interface, puedes compartir demos de Blocks con share=True o desplegarlas en Hugging Face Spaces.