Demos con Gradio y Hugging Face

Creación y hosting de demos con Gradio y Hugging Face

Abubakar Abid
Compartir
Compartir

Open In Colab

Notebook original en inglésaquí.

Este notebook se encuentra originalmente en elKit Educativo de Hugging Face.

💡 ¡Hola!

Hemos reunido un conjunto de herramientas que l@s profesor@s universitari@s pueden usar para preparar fácilmente laboratorios, tareas o clases. El contenido está diseñado de manera autónoma, de modo que se puede incorporar fácilmente al plan de estudios existente. Este contenido es gratuito y utiliza tecnologías Open Source ampliamente conocidas (transformers,gradio, etc).

Alternativamente, puede solicitar que alguien del equipo de Hugging Face ejecute los tutoriales para su clase a través de la iniciativaGira de demo.cratización de ML!

Además de los tutoriales, también compartimos otros recursos para profundizar en ML que pueden ayudar a diseñar el contenido del curso.

Acerca de este tutorial

Objetivos:

  1. Crear un demo rápido para su modelo de Machine Learning en Python usando la bibliotecagradio
  2. Alojar los demos de forma gratuita con Hugging Face Spaces
  3. Agregar el demo a su organización en Hugging Face para su clase o conferencia. Esto incluye:
  • Un paso de configuración para instructor@s (u organizador@s de conferencias)
  • Instrucciones de cómo subir los demos para l@s estudiantes (o participantes de conferencias)

Duración: 20-40 minutos

Requisitos previos:Conocimiento de Python y familiaridad básica del Machine Learning

Autor:Abubakar Abid(siéntase libre de enviarme un ping con cualquier pregunta sobre este tutorial)

¡Todos estos pasos se pueden hacer gratis! Todo lo que necesita es un navegador de Internet y un lugar donde pueda escribir Python 👩‍💻

¿Por qué demos?

Losdemosde modelos de Machine Learning son una parte cada vez más importante de loscursosyconferenciasde Machine Learning. Los demos permiten:

  • que las personas que desarrollan modelos puedanpresentarfácilmente su trabajo a una amplia audiencia
  • aumentar lareproducibilidadde la investigación en Machine Learning
  • que divers@s usuari@s puedanidentificar y depurarmás fácilmente los puntos de falla de los modelos

Como un ejemplo rápido de lo que nos gustaría construir, eche un vistazo aKeras org en Hugging Face, que incluye una tarjeta de descripción y una colección de Modelos y Spaces construidos por la comunidad de Keras. Cualquier Space se puede abrir en su navegador y puede usar el modelo inmediatamente como se muestra aquí:

1. Crear demos rápidos de ML en Python usando la biblioteca Gradio

gradioes una biblioteca de Python que le permite crear demos web simplemente especificando la lista de componentes de entrada y salida que espera su modelo de Machine Learning.

¿Qué quiero decir con componentes de entrada y salida? Gradio viene con un montón de componentes predefinidos para diferentes tipos de modelos de aprendizaje automático. Aquí hay unos ejemplos:

  • Para unclasificador de imágenes, el tipo de entrada esperado es unaImagey el tipo de salida es unaLabel.
  • Para unmodelo de reconocimiento de voz, el componente de entrada esperado es unMicrophone(que permite a los usuarios grabar desde el navegador) oAudio(que permite a los usuarios arrastrar y soltar archivos de audio), mientras que el tipo de salida esText.
  • Para unmodelo de respuesta a preguntas, esperamos2 entradas: [Text,Text], un cuadro de texto para el párrafo y otro para la pregunta, y el tipo de salida es un soloTextcorrespondiente a la respuesta.

Ya se va notando la idea… (para todos los componentes,ver la documentación)

Además de los tipos de entrada y salida, Gradio espera un tercer parámetro, que es la propia función de predicción. Este parámetro puede sercualquierfunción normal de Pythonque tome los parámetros correspondientes a los componentes de entrada y devuelva los valores correspondientes a los componentes de salida.

Basta de palabras. ¡Veamos algo de código!

# Primero, instale Gradio
!pip install --quiet gradio

# Definir una función simple "Hola mundo"
def  greet(name):
	return  "Hello " + name + "!!"

# Escriba 2 líneas de Python para crear una GUI simple
import gradio as gr
gr.Interface(fn=greet, inputs="text", outputs="text").launch();

Ejecutar el código anterior debería producir una GUI simple dentro de este Notebook que le permita escribir entradas de ejemplo y ver el resultado devuelto por su función.

Note que definimos una ‘Interface’ usando los 3 ingredientes mencionados anteriormente:

  • Una función
  • Componente(s) de entrada
  • Componente(s) de salida

Este es un ejemplo simple para texto, pero el mismo principio es válido para cualquier otro tipo de tipo de datos. Por ejemplo, aquí hay una interface que genera un tono musical cuando se le proporcionan algunos parámetros diferentes (el código específico dentro degenerate_tone()no es importante para el propósito de este tutorial):

import numpy as np
import gradio as gr

def  generate_tone(note, octave, duration):
	sampling_rate = 48000
	a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
	frequency = a4_freq * 2 ** (tones_from_a4 / 12)
	audio = np.linspace(0, int(duration), int(duration) * sampling_rate)
	audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
	return sampling_rate, audio

gr.Interface(
	generate_tone,
	[
		gr.inputs.Dropdown(["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"], type="index"),
		gr.inputs.Slider(4, 6, step=1),
		gr.inputs.Textbox(type="number", default=1, label="Duration in seconds"),
	],
	"audio",
	title="Generate a Musical Tone!"
).launch()

Desafío #1: cree un demo de Gradio que tome una imagen y aplique unfiltro sepiaen menos de 10 líneas de código Python. Puedes encontrareste enlace útil.

Hay muchos más ejemplos que puede probar en lapágina de iniciode Gradio que cubren características adicionales tales como:

  • Agregar entradas de ejemplo
  • Agregarestado(por ejemplo para chatbots)
  • Compartir demos fácilmente usando un parámetro llamadoshare(<-- Esto está muy cool 😎)

Es especialmente fácil hacer un demo de modelostransformersdesde el Hub de Hugging Face utilizando el método especialgr.Interface.load. Por ejemplo, aquí está el código para construir un demo paraGPT-J, un modelo de lenguaje grande, y agregar un par de ejemplos de entradas:

import gradio as gr

examples = [["The Moon's orbit around Earth has"], ["There once was a pineapple"]]

gr.Interface.load("huggingface/EleutherAI/gpt-j-6B", examples=examples).launch();

Desafío #2: Vaya alModel Hub de Hugging Face, y elija un modelo que realice uno de las otros tasks admitidos en la bibliotecatransformers(aparte de la generación de texto). Cree un demos de Gradio para ese modelo usandogr.Interface.load.

2. Aloje el demo (gratis) en los Spaces de Hugging Face

Una vez que haya realizado un demo de Gradio puede alojarlo de forma permanente en Hugging Spaces muy fácilmente:

Estos son los pasos (que se muestran en el GIF a continuación):

  1. Cree una cuenta de Hugging Face, si aún no tiene una, visitandohttps://huggingface.co/y haciendo clic en “Sign Up”
  2. Una vez que haya iniciado sesión, haga clic en su foto de perfil y luego haga clic debajo en “New Space” para ir a esta página:https://huggingface.co/new-space
  3. Dale a tu Space un nombre y una licencia. Selecciona “Gradio” como Space SDK y elija “Public” si está de acuerdo con que todos accedan a su Space y al código subyacente
  4. Luego encontrará una página que le brinda instrucciones sobre cómo subir sus archivos en el repositorio de Git para ese Space. Es posible que también deba agregar un archivorequirements.txtpara especificar las dependencias del paquete de Python
  5. Una vez que haya enviado sus archivos, ¡eso es todo! Spaces creará automáticamente el demo de Gradio. Podrá compartirla con cualquier persona, en cualquier lugar!

GIF

Incluso puede insertar su demo de Gradio en cualquier sitio web. En un blog, una pagina de portfolio, o incluso en un Colab notebook como el modelo de reconocimiento de bocetos de Pictionary a continuación:

from IPython.display import IFrame

IFrame(src='https://hf.space/gradioiframe/abidlabs/Draw/+', width=1000, height=800)

Desafío #3: Suba su demo de Gradio a los Spaces de Hugging Face y obtenga un URL permanente para él. Comparta el URL permanente con alguien (la persona con la que colabora, un@ amig@, un@ usuari@, etc.). ¿Qué tipo de comentarios recibe sobre su modelo de Machine Learning?

3. Agregue su demo a la organización Hugging Face para su clase o conferencia

Configuración(Para instructor@s u organizador@s de conferencias)

  1. Cree una cuenta de Hugging Face, si aún no tiene una, visitandohttps://huggingface.co/y haciendo clic en “Sign Up”
  2. Una vez que haya iniciado sesión, haga clic en su foto de perfil y luego haga clic en “Nueva organización” para ir a esta página:https://huggingface.co/organizations/new
  3. Complete la información para su clase o conferencia. Recomendamos crear una organización separada cada vez que se imparte una clase (por ejemplo, “Stanford-CS236g-20222”) y para cada año de la conferencia.
  4. Se creará su organización y ahora l@s usuari@s podrán solicitar ser agregad@s a su organización visitando la página de la organización.
  5. Opcionalmente, puede cambiar la configuración haciendo clic en el botón “Organization settings”. Por lo general, para clases y conferencias, querrá navegar aSettings > Membersy establezca el rol predeterminado para nuev@s miembr@s en “write”, lo que les permite enviar Spaces pero no cambiar la configuración.

Para estudiantes o participantes de conferencias

  1. Pída a a la persona que instruye el curso u organiza la conferencia el enlace a la página de la Organización si aún no lo tiene.
  2. Visite la página de la Organización y haga clic en el botón “Request to join this org”, si aún no es parte de la organización.
  3. Una vez que haya sido aprobado para unirse a la organización, haya creado su demo de Gradio y lo haya subido a Spaces (ver las secciones 1 y 2), simplemente vaya a su Space y enSettings > Rename or transfer this spaceseleccione el nombre de la organización enNew owner. Haga clic en el botón y el Space ahora se agregará a su clase o conferencia!

Traducción del notebook original al español hecha por@espejelomar.