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]]

```py
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`:

```py
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.