Frontend en IA

Ingeniería del Software para Inteligencia Artificial

¿Qué es un Frontend?

• Parte visual e interactiva de una aplicación.
• Ejecutado en el navegador del usuario.
• Usa tecnologías como HTML, CSS y JavaScript.
• Se comunica con un backend para realizar tareas.

Ejemplo sencillo de HTML y JavaScript:

<button onclick=\"alert('¡Hola Mundo!')\">Clic Aquí</button>

En el contexto de esta asignatura…

NO vamos a ver en profundidad el desarrollo frontend.

• El foco sobre el despliegue de modelos y la comuncicación con el backend
• El desarrollo web requiere competencias distintas.
• Existen herramientas que canalizan estas competencias

Gradio como Frontend

Es una herramienta sencilla para crear interfaces web interactivas. Ideal para prototipos rápidos y demos de modelos de IA. No requiere experiencia en desarrollo web tradicional.

import gradio as gr

def cuadrado(numero):
    return numero ** 2

gr.Interface(fn=cuadrado, inputs="number", outputs="number").launch()

Componentes en Gradio

Es un elemento preconstruido que sirve como entrada o salida en una interfaz, convirtiendo datos entre el navegador y funciones de Python mediante pasos de preprocesamiento y posprocesamiento.

Componentes en Gradio

Gradio ofrece dos maneras de construir interfaces:

• gr.Interface: forma sencilla para funciones con entradas/salidas sencillas

• gr.Blocks: interfaces más complejas con múltiples componentes, eventos, y layouts.

Componentes en Gradio

Gradio ofrece dos maneras de construir interfaces:

• gr.Interface: forma sencilla para funciones con entradas/salidas sencillas

gr.Interface(fn=saludar, inputs="textbox", outputs="textbox").launch()

• gr.Blocks: interfaces más complejas con múltiples componentes, eventos, y layouts.

Componentes en Gradio

Gradio ofrece dos maneras de construir interfaces:

• gr.Interface: forma sencilla para funciones con entradas/salidas sencillas

• gr.Blocks: interfaces más complejas con múltiples componentes, eventos, y layouts.

with gr.Blocks() as demo:
    nombre = gr.Textbox(label="Tu nombre")
    saludo = gr.Textbox(label="Saludo")
    boton = gr.Button("Saludar")
    boton.click(fn=saludar, inputs=nombre, outputs=saludo)

demo.launch()

Input/output de texto - textbox

import gradio as gr

def saludar(nombre):
    return f"¡Hola, {nombre}!"

gr.Interface(fn=saludar, inputs="textbox", outputs="textbox").launch()

https://www.gradio.app/docs/gradio/textbox#demos

Input/output de imagen - gr.Image

import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")

https://www.gradio.app/docs/gradio/image#demos

Botón - gr.Button

import gradio as gr

def mostrar_mensaje():
    return "¡Botón presionado!"

with gr.Blocks() as demo:
    boton = gr.Button("Haz clic aquí")
    salida = gr.Textbox(label="Mensaje")
    boton.click(fn=mostrar_mensaje, inputs=[], outputs=salida)

demo.launch()

Lista de resultados - gr.List

import gradio as gr

def recomendar(categoria):
    if categoria.lower() == "ropa":
        return ["Camiseta", "Pantalones", "Chaqueta"]
    elif categoria.lower() == "tecnología":
        return ["Portátil", "Auriculares", "Ratón"]
    else:
        return ["No hay recomendaciones"]

with gr.Blocks() as demo:
    entrada = gr.Textbox(label="Categoría")
    salida = gr.List(label="Recomendaciones")
    boton = gr.Button("Buscar")

    boton.click(fn=recomendar, inputs=entrada, outputs=salida)

demo.launch()

Comunicación con el backend

Para comunicar Gradio con nuestro backend, por ejemplo uno construido con FastAPI, podemos hacer que Gradio actúe como un cliente que lanza peticiones HTTP.

import requests

def enviar_a_backend(entrada):
    respuesta = requests.post(
        "http://localhost:8000/predict", 
        json={"input": entrada}
    )
    return respuesta.json()["output"]

gr.Interface(fn=enviar_a_backend, inputs="textbox", outputs="textbox").launch()

Mecanismo de polling en Gradio

Si el backend procesa tareas de forma asíncrona (por ejemplo, encoladas), podemos aplicar un mecanismo de sondeo periódico (polling).

Mecanismo de polling en Gradio

import time, requests

def poll_backend():
    for _ in range(10):
        r = requests.get("http://localhost:8000/resultado")
        if r.json().get("status") == "done":
            return r.json().get("result")
        time.sleep(2)
    return "Sin resultado"

Conclusiones…