Cree aplicaciones de aprendizaje automático interactivo con Gradio

Como desarrollador que trabaja con modelos de aprendizaje automático, es probable que pase horas escribiendo scripts y ajustando hiperparámetros. Pero cuando se trata de compartir su trabajo o dejar que otros interactúen con sus modelos, la brecha entre un script de Python y una aplicación web utilizable puede sentirse enorme. Gradio es una biblioteca de Python de código abierto que le permite convertir sus scripts de Python en aplicaciones web interactivas sin requerir experiencia frontend.

En este blog, adoptaremos un enfoque divertido y práctico para aprender los componentes clave de Gradio construyendo un texto a voz (TTS) Aplicación web que puede ejecutar en un AI PC o Intel® Tiber ™ AI Cloud y compartir con otros. (Divulgación completa: el autor está afiliado a Intel).

Una descripción general de nuestro proyecto: un script TTS Python

Desarrollaremos un script de Python básico utilizando la biblioteca Coqui TTS y su xtts_v2 modelo multilingüe. Para continuar con este proyecto, haga un requirements.txt Archivo con el siguiente contenido:

gradio
coqui-tts
torch

Luego cree un entorno virtual e instale estas bibliotecas con

pip install -r requirements.txt

Alternativamente, si está utilizando Intel Tiber Ai Cloud, o si tiene el Administrador de paquetes UV instalado en su sistema, cree un entorno virtual e instale las bibliotecas con

uv init --bare
uv add -r requirements.txt

Entonces, puedes ejecutar los scripts con

uv run <filename.py>

Alerta de GOTCHA Para la compatibilidad con versiones de dependencia recientes, estamos utilizando `coqui-tts`que es una bifurcación del coqui original ‘TTS`. Entonces, no intente instalar el paquete original con pip install TTS.

A continuación, podemos hacer las importaciones necesarias para nuestro script:

import torch
from TTS.api import TTS

Actualmente, `TTS` le brinda acceso a 94 modelos que puede enumerar ejecutando

print(TTS().list_models())

Para este blog, usaremos el XTTS-v2 modelo, que admite 17 idiomas y 58 voces de altavoces. Puede cargar el modelo y ver los altavoces a través de

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")

print(tts.speakers)

Aquí hay un script mínimo de Python que genera discurso a partir del texto y:

import torch
from TTS.api import TTS

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")

tts.tts_to_file(
    text="Every bug was once a brilliant idea--until reality kicked in.",
    speaker="Craig Gutsy",
    language="en",
    file_path="bug.wav",
)

Este script funciona, pero no es interactivo. ¿Qué pasa si desea dejar que los usuarios ingresen su propio texto, elija un altavoz y obtengan una salida de audio instantánea? Ahí es donde brilla Gradio.

Anatomía de una aplicación de Gradio

Una aplicación típica de Gradio comprende los siguientes componentes:

• Interfaz Para definir entradas y salidas
• Componentes como Textbox, Dropdowny Audio
• Funciones para vincular la lógica de backend
• .lanzamiento() para girar y opcionalmente compartir la aplicación con la opción share=True.

El Interfaz La clase tiene tres argumentos centrales: fn, entradasy salidas. Asignar (o establecer) el fn Argumento a cualquier función de Python que desee envolver con una interfaz de usuario (UI). Las entradas y salidas toman uno o más componentes de Gradio. Puede pasar en el nombre de estos componentes como una cadena, como "textbox" o "text"o para más personalización, una instancia de una clase como Textbox ().

import gradio as gr


# A simple Gradio app that multiplies two numbers using sliders
def multiply(x, y):
    return f"{x} x {y} = {x * y}"


demo = gr.Interface(
    fn=multiply,
    inputs=[
        gr.Slider(1, 20, step=1, label="Number 1"),
        gr.Slider(1, 20, step=1, label="Number 2"),
    ],
    outputs="textbox",  # Or outputs=gr.Textbox()
)

demo.launch()

El Bandera El botón aparece de forma predeterminada en la interfaz para que el usuario pueda marcar cualquier combinación “interesante”. En nuestro ejemplo, si presionamos el botón FLAG, Gradio generará un archivo de registro CSV en .gradio\flagged Con el siguiente contenido:

Number 1,Number 2,output,timestamp

12,9,12 x 9 = 108,2025-06-02 00:47:33.864511

Puede desactivar esta opción de marcado configurando flagging_mode="never" dentro de la interfaz.

También tenga en cuenta que podemos eliminar el botón Enviar y activar automáticamente el multiply función a través de la configuración live=True en interfaz.

Convertir nuestro script TTS a una aplicación Gradio

Como se demostró, el concepto central de Gradio es simple: envuelve su función de pitón con una interfaz de usuario utilizando el Interface clase. Así es como puede convertir el script TTS en una aplicación web:

import gradio as gr
from TTS.api import TTS

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")


def tts_fn(text, speaker):
    wav_path = "output.wav"
    tts.tts_to_file(text=text, speaker=speaker, language="en", file_path=wav_path)
    return wav_path


demo = gr.Interface(
    fn=tts_fn,
    inputs=[
        gr.Textbox(label="Text"),
        gr.Dropdown(choices=tts.speakers, label="Speaker"),
    ],
    outputs=gr.Audio(label="Generated Audio"),
    title="Text-to-Speech Demo",
    description="Enter text and select a speaker to generate speech.",
)
demo.launch()

Con solo unas pocas líneas, puede tener una aplicación web donde los usuarios pueden escribir texto, elegir un altavoz y escuchar el audio generado, todo en ejecución localmente. Compartir esta aplicación es tan simple como reemplazar la última línea con demo.launch(share=True)que te da una URL pública al instante. Para la producción o alojamiento persistente, puede implementar aplicaciones de Gradio de forma gratuita en Abrazando espacios facialeso ejecutarlos en su propio servidor.

Más allá de la interfaz: bloques para usuarios avanzados

Si bien la interfaz es adecuada para la mayoría de los casos de uso, Gradio también ofrece Bloquesuna API de nivel inferior para construir aplicaciones complejas de múltiples pasos complejas con diseños personalizados, múltiples funciones e interactividad dinámica. Con bloques, puedes:

• Organizar componentes en filas, columnas o pestañas
• Salidas de cadena como entradas para otras funciones
• Actualizar las propiedades del componente dinámicamente (por ejemplo, ocultar/show, habilitar/deshabilitar)
• Construir paneles, aplicaciones multimodales o incluso UIS web con todas las funciones

Aquí hay un sabor de lo que es posible con una aplicación simple que cuenta la cantidad de palabras tan pronto como el usuario termina de escribir, y permite que el usuario borre la entrada y la salida con un solo botón. El ejemplo muestra cómo puede controlar el diseño de la aplicación con Fila y muestra dos tipos de eventos clave: .change() y .click().

import gradio as gr


def word_count(text):
    return f"{len(text.split())} word(s)" if text.strip() else ""


def clear_text():
    return "", ""


with gr.Blocks() as demo:
    gr.Markdown("## Word Counter")

    with gr.Row():
        input_box = gr.Textbox(placeholder="Type something...", label="Input")
        count_box = gr.Textbox(label="Word Count", interactive=False)

    with gr.Row():
        clear_btn = gr.Button("Clear")

    input_box.change(fn=word_count, inputs=input_box, outputs=count_box)
    clear_btn.click(
        fn=clear_text, outputs=[input_box, count_box]
    )  # No inputs needed for clear_text

demo.launch()

En caso de que tenga curiosidad sobre el tipo de estos componentes, intente

print(type(input_box))  # <class 'gradio.components.textbox.Textbox'>

Tenga en cuenta que en tiempo de ejecución, no puede “leer” directamente el valor de un Textbox como una variable. Los componentes de Gradio no están vinculados a las variables de Python, solo definen la interfaz de usuario y el comportamiento. El valor real de un Textbox existe en el cliente (en el navegador), y se pasa a sus funciones de Python solo cuando ocurre una interacción de usuario (como .click() o .change()). Si está explorando flujos avanzados (como mantener o sincronizar el estado), Gradio’s Estado puede ser útil.

Actualización de componentes de Gradio

Gradio le brinda cierta flexibilidad cuando se trata de actualizar los componentes. Considere los siguientes dos fragmentos de código, aunque se ven un poco diferentes, pero hacen lo mismo: actualizar el texto dentro de un Textbox Cuando se hace clic en un botón.

Opción 1: Devolver el nuevo valor directamente

import gradio as gr


def update_text(box):
    return "Text successfully launched!"


with gr.Blocks() as demo:
    textbox = gr.Textbox(value="Awaiting launch sequence", label="Mission Log")
    button = gr.Button("Initiate Launch")

    button.click(fn=update_text, inputs=textbox, outputs=textbox)

demo.launch()

Opción 2: Usando gr.update()

import gradio as gr


def update_text():
    return gr.update(value="Text successfully launched!")


with gr.Blocks() as demo:
    textbox = gr.Textbox(value="Awaiting launch sequence", label="Mission Log")
    button = gr.Button("Initiate Launch")

    button.click(fn=update_text, inputs=[], outputs=textbox)

demo.launch()

Entonces, ¿cuál debería usar? Si solo estás actualizando el value de un componente, devolver una cadena simple (o número, o lo que sea que el componente espere) está totalmente bien. Sin embargo, si desea actualizar otras propiedades, como ocultar un componente, cambiar su etiqueta o deshabilitarla, entonces gr.update() es el camino a seguir.

También es útil entender qué tipo de objeto gr.update() Devuelve, para disipar parte del misterio a su alrededor. Por ejemplo, debajo del capó, gr.update(visible=False) es solo un diccionario:

{'__type__': 'update', 'visible': False}

Es un pequeño detalle, pero saber cuándo y cómo usar gr.update() Puede hacer que sus aplicaciones de Gradio sean más dinámicas y receptivas.

Si encontró este artículo valioso, considere compartirlo con su red. Para obtener más contenido sobre cómo hacer un desarrollo de IA, visite Recursos de desarrollo de IA Intel®.

Asegúrate de revisar Abrazando espacios faciales Para una amplia gama de aplicaciones de aprendizaje automático donde puede aprender de los demás examinando su código y compartir su trabajo con la comunidad.

Expresiones de gratitud

El autor agradece a Jack Erickson por proporcionar comentarios sobre un borrador anterior de este trabajo.

Recursos