Gradio-Lite Gradio sin servidor funcionando completamente en tu navegador

Gradio-Lite El Gradio sin servidor que funciona completamente en tu navegador

Gradio es una popular biblioteca de Python para crear aplicaciones interactivas de aprendizaje automático. Tradicionalmente, las aplicaciones de Gradio han dependido de la infraestructura del lado del servidor para ejecutarse, lo cual puede ser un obstáculo para los desarrolladores que necesitan alojar sus aplicaciones.

Ingresa Gradio-lite (@gradio/lite): una biblioteca que aprovecha Pyodide para llevar Gradio directamente a tu navegador. En esta publicación del blog, exploraremos qué es @gradio/lite, repasaremos un código de ejemplo y discutiremos los beneficios que ofrece para ejecutar aplicaciones de Gradio.

¿Qué es @gradio/lite?

@gradio/lite es una biblioteca de JavaScript que te permite ejecutar aplicaciones de Gradio directamente en tu navegador web. Esto se logra utilizando Pyodide, un tiempo de ejecución de Python para WebAssembly, que permite ejecutar código de Python en el entorno del navegador. Con @gradio/lite, puedes escribir código Python regular para tu aplicaciones de Gradio, y se ejecutarán sin problemas en el navegador sin la necesidad de infraestructura del lado del servidor.

Empezando

Construyamos una aplicación de Gradio de “Hola Mundo” en @gradio/lite

1. Importar JS y CSS

Comienza creando un archivo HTML nuevo, si aún no tienes uno. Importa el JavaScript y CSS correspondientes al paquete @gradio/lite utilizando el siguiente código:

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head></html>

Ten en cuenta que generalmente debes utilizar la versión más reciente de @gradio/lite que esté disponible. Puedes ver las versiones disponibles aquí.

2. Crea las etiquetas <gradio-lite>

En algún lugar del cuerpo de tu página HTML (donde quieras que se renderice la aplicación Gradio), crea las etiquetas de apertura y cierre <gradio-lite>.

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        </gradio-lite>    </body></html>

Nota: puedes agregar el atributo theme a la etiqueta <gradio-lite> para forzar el tema oscuro o claro (por defecto, respeta el tema del sistema). Ejemplo:

<gradio-lite theme="dark">...</gradio-lite>

3. Escribe tu aplicación Gradio dentro de las etiquetas

Ahora, ¡escribe tu aplicación Gradio como lo harías normalmente en Python! Ten en cuenta que, como esto es Python, los espacios en blanco y las indentaciones importan.

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        import gradio as gr        def greet(name):            return "Hello, " + name + "!"                gr.Interface(greet, "textbox", "textbox").launch()        </gradio-lite>    </body></html>

¡Y listo! Ahora deberías poder abrir tu página HTML en el navegador y ver la aplicación Gradio renderizada. Ten en cuenta que puede llevar un poco de tiempo cargar inicialmente la aplicación Gradio, ya que Pyodide puede tardar en instalarse en tu navegador.

Nota sobre depuración: para ver cualquier error en tu aplicación Gradio-lite, abre el inspector en tu navegador web. Todos los errores (incluidos los errores de Python) se mostrarán allí.

Más ejemplos: Agregar archivos y requisitos adicionales

¿Qué tal si quieres crear una aplicación Gradio que abarque varios archivos? ¿O que tenga requisitos personalizados de Python? ¡Ambas opciones son posibles con @gradio/lite!

Varios archivos

Agregar múltiples archivos dentro de una aplicación @gradio/lite es muy sencillo: usa la etiqueta <gradio-file>. Puedes tener tantas etiquetas <gradio-file> como desees, pero cada una debe tener un atributo name y el punto de entrada de tu aplicación Gradio debe tener el atributo entrypoint.

Este es un ejemplo:

<gradio-lite><gradio-file name="app.py" entrypoint>import gradio as grfrom utils import adddemo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")demo.launch()</gradio-file><gradio-file name="utils.py" >def add(a, b):    return a + b</gradio-file></gradio-lite>

Requisitos adicionales

Si tu aplicación Gradio tiene requisitos adicionales, generalmente es posible instalarlos en el navegador usando micropip. Hemos creado un contenedor para hacer esto particularmente conveniente: simplemente lista tus requisitos en la misma sintaxis que un archivo requirements.txt y enciérralos con las etiquetas <gradio-requirements>.

Aquí, instalamos transformers_js_py para ejecutar un modelo de clasificación de texto directamente en el navegador.

<gradio-lite><gradio-requirements>transformers_js_py</gradio-requirements><gradio-file name="app.py" entrypoint>from transformers_js import import_transformers_jsimport gradio as grtransformers = await import_transformers_js()pipeline = transformers.pipelinepipe = await pipeline('sentiment-analysis')async def classify(text):    return await pipe(text)demo = gr.Interface(classify, "textbox", "json")demo.launch()</gradio-file></gradio-lite>

Pruébalo: Puedes ver este ejemplo funcionando en este Hugging Face Static Space, que te permite alojar aplicaciones web estáticas (sin servidor) de forma gratuita. ¡Visita la página y podrás ejecutar un modelo de aprendizaje automático sin acceso a internet!

Beneficios de usar @gradio/lite

1. Implementación sin servidor

La principal ventaja de @gradio/lite es que elimina la necesidad de infraestructura de servidor. Esto simplifica la implementación, reduce los costos relacionados con el servidor y facilita compartir tus aplicaciones Gradio con otros.

2. Baja latencia

Al ejecutarse en el navegador, @gradio/lite ofrece interacciones de baja latencia para los usuarios. No es necesario que los datos viajen hacia o desde un servidor, lo que se traduce en respuestas más rápidas y una experiencia de usuario más fluida.

3. Privacidad y seguridad

Dado que todo el procesamiento se realiza dentro del navegador del usuario, @gradio/lite mejora la privacidad y la seguridad. Los datos del usuario permanecen en su dispositivo, lo que brinda tranquilidad en cuanto al manejo de datos.

Limitaciones

  • Actualmente, la mayor limitación de usar @gradio/lite es que las aplicaciones Gradio generalmente tardarán más tiempo (normalmente de 5 a 15 segundos) en cargarse inicialmente en el navegador. Esto se debe a que el navegador necesita cargar el tiempo de ejecución de Pyodide antes de poder renderizar el código de Python.

  • No todos los paquetes de Python son compatibles con Pyodide. Si bien gradio y muchos otros paquetes populares (incluidos numpy, scikit-learn y transformers-js) se pueden instalar en Pyodide, si tu aplicación tiene muchas dependencias, vale la pena verificar si las dependencias están incluidas en Pyodide, o si se pueden instalar con micropip.

¡Pruébalo!

Puedes probar @gradio/lite al instante copiando y pegando este código en un archivo local index.html y abriéndolo con tu navegador:

<html>    <head>        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />    </head>    <body>        <gradio-lite>        import gradio as gr        def saludar(nombre):            return "¡Hola, " + nombre + "!"                gr.Interface(saludar, "textbox", "textbox").launch()        </gradio-lite>    </body></html>

También hemos creado un playground en el sitio web de Gradio que te permite editar el código de manera interactiva y ver los resultados inmediatamente.

Playground: https://www.gradio.app/playground

We will continue to update Zepes; if you have any questions or suggestions, please contact us!

Share:

Was this article helpful?

93 out of 132 found this helpful

Related articles

Discover more

Ciencia de Datos

Conoce a TARDIS Un marco de trabajo de IA que identifica singularidades en espacios complejos y captura estructuras singulares y complejidad geométrica local en datos de imágenes.

Estamos inundados con enormes volúmenes de datos de todos los dominios diferentes, incluidos los datos científicos, m...

Inteligencia Artificial

Pronóstico de Eventos Futuros Las Capacidades y Limitaciones de la IA y el Aprendizaje Automático

¿Alguna vez te has preguntado cómo los adivinos, astrólogos o nuestra conocida Baba Vanga solían predecir eventos fut...

Inteligencia Artificial

¿Podrían ser los Parches? Este enfoque de IA analiza el principal contribuyente al éxito de los Transformadores de Visión

Las redes neuronales convolucionales (CNN) han sido la columna vertebral de los sistemas para tareas de visión por co...

Inteligencia Artificial

Microsoft y los investigadores de Columbia proponen LLM-AUGMENTER un sistema de inteligencia artificial que aumenta un LLM de caja negra con un conjunto de módulos plug-and-play

Los grandes modelos de lenguaje (LLMs), como GPT-3, son ampliamente reconocidos por su capacidad para generar textos ...

Inteligencia Artificial

Técnica de Machine Learning Mejor para Predecir Tasas de Cura del Cáncer

Un modelo de aprendizaje automático desarrollado por investigadores de la Universidad de Texas en Arlington (UTA) pue...

Inteligencia Artificial

Investigadores de la Universidad de Indiana presentan 'Brainoware' una tecnología de inteligencia artificial de vanguardia inspirada en organoides cerebrales y chips de silicio.

La fusión de los principios biológicos con la innovación tecnológica ha dado lugar a avances significativos en la int...

Want to read more? Go here