Hub documentation
Widgets
Widgets
¿Qué es un widget?
Muchos repositorios de modelos incluyen un widget que permite a cualquier persona ejecutar inferencias directamente en el navegador. Estos widgets funcionan con Inference Providers, que ofrecen a los desarrolladores un acceso unificado y simplificado a cientos de modelos de aprendizaje automático, respaldado por nuestros socios de inferencia serverless.
Aquí hay algunos ejemplos de modelos populares actuales:
- DeepSeek V3 - Modelo conversacional de pesos abiertos de última generación
- Flux Kontext - Modelo transformer de pesos abiertos para edición de imágenes
- Detección de NSFW de Falconsai - Moderación de contenido de imágenes
- Chatterbox de ResembleAI - Modelo de texto a voz de grado de producción y código abierto.
Puedes explorar más modelos y sus widgets en la página de modelos o probarlos de forma interactiva en el Inference Playground.
Activar un widget
Los widgets se muestran cuando el modelo está alojado por al menos un proveedor de inferencia, lo que garantiza un rendimiento y una fiabilidad óptimos para la inferencia del modelo. Los proveedores eligen y controlan de forma autónoma qué modelos despliegan.
El tipo de widget que se muestra (texto a imagen, reconocimiento automático de voz, etc.) se infiere a partir del pipeline_tag del modelo, una etiqueta especial que el Hub intenta calcular automáticamente para todos los modelos. La única excepción es el widget conversational, que se muestra en todos los modelos cuyo pipeline_tag sea text-generation o image-text-to-text. Hemos optado por exponer un solo widget por modelo por simplicidad.
Para algunas bibliotecas, como transformers, el tipo de modelo se puede inferir automáticamente a partir de los archivos de configuración (config.json). La arquitectura puede determinar el tipo: por ejemplo, AutoModelForTokenClassification corresponde a token-classification. Si te interesa, puedes ver el pseudocódigo en este gist.
Para la mayoría de los demás casos de uso, utilizamos las etiquetas del modelo para determinar el tipo de tarea del modelo. Por ejemplo, si hay tag: text-classification en los metadatos de la tarjeta del modelo, la pipeline_tag inferida será text-classification.
Puedes sobrescribir manualmente el tipo de pipeline con pipeline_tag: xxx en los metadatos de la tarjeta del modelo. (También puedes usar el editor de interfaz gráfica de metadatos para hacer esto).
¿Cómo puedo controlar la entrada de ejemplo del widget de mi modelo?
Puede especificar la entrada del widget en la sección de metadatos de la tarjeta del modelo:
widget:
- text: "This new restaurant has amazing food and great service!"
example_title: "Positive Review"
- text: "I'm really disappointed with this product. Poor quality and overpriced."
example_title: "Negative Review"
- text: "The weather is nice today."
example_title: "Neutral Statement"Puedes proporcionar más de una entrada de ejemplo. En el menú desplegable de ejemplos del widget, aparecerán como Example 1, Example 2, etc. Opcionalmente, también puedes proporcionar example_title.

widget:
- text: "Is this review positive or negative? Review: Best cast iron skillet you will ever buy."
example_title: "Sentiment analysis"
- text: "Barack Obama nominated Hilary Clinton as his secretary of state on Monday. He chose her because she had ..."
example_title: "Coreference resolution"
- text: "On a shelf, there are five books: a gray book, a red book, a purple book, a blue book, and a black book ..."
example_title: "Logic puzzles"
- text: "The two men running to become New York City's next mayor will face off in their first debate Wednesday night ..."
example_title: "Reading comprehension"Además, puede especificar entradas de ejemplo no textuales en los metadatos de la tarjeta del modelo. Consulte aquí para obtener una lista completa de los formatos de entrada de ejemplo para todos los tipos de widget. Para los tipos de widget de visión y audio, proporcione entradas de ejemplo con src en lugar de text.
Por ejemplo, permita a los usuarios elegir entre dos archivos de audio de muestra para tareas de reconocimiento automático del habla mediante:
widget:
- src: https://example.org/somewhere/speech_samples/sample1.flac
example_title: Speech sample 1
- src: https://example.org/somewhere/speech_samples/sample2.flac
example_title: Speech sample 2Tenga en cuenta que también puede incluir archivos de ejemplo en su repositorio de modelos y usarlos como:
widget:
- src: https://huggingface.co/username/model_repo/resolve/main/sample1.flac
example_title: Custom Speech Sample 1Pero aún más conveniente, si el archivo se encuentra en el repositorio del modelo correspondiente, puedes usar simplemente el nombre del archivo o la ruta del archivo dentro del repositorio:
widget:
- src: sample1.flac
example_title: Custom Speech Sample 1o si estaba anidado dentro del repositorio:
widget:
- src: nested/directory/sample1.flacProporcionamos entradas de ejemplo para algunos idiomas y la mayoría de los tipos de widget en el archivo default-widget-inputs.ts. Si faltan algunos ejemplos, ¡damos la bienvenida a PR de la comunidad para agregarlos!
Ejemplos de salidas
Como extensión de las entradas de ejemplo, para cada ejemplo de widget, también puedes describir opcionalmente la salida correspondiente del modelo, directamente en la propiedad output.
Esto es útil cuando el modelo aún no es compatible con los proveedores de inferencia, de modo que la página del modelo pueda seguir mostrando cómo funciona el modelo y qué resultados produce.
Por ejemplo, para un modelo de automatic-speech-recognition:
widget:
- src: sample1.flac
output:
text: "Hello my name is Julien"

La propiedad output debe ser un diccionario YAML que represente el formato de salida de Inference Providers.
Para un modelo que genera texto, consulte el ejemplo anterior.
Para un modelo que genera etiquetas (por ejemplo, un modelo de text-classification), la salida debe ser así:
widget:
- text: "I liked this movie"
output:
- label: POSITIVE
score: 0.8
- label: NEGATIVE
score: 0.2

Por último, para un modelo que genera una imagen, audio u otro tipo de recurso, la salida debe incluir una propiedad url que enlace a un nombre de archivo o ruta dentro del repositorio o a una URL remota. Por ejemplo, para un modelo de texto a imagen:
widget:
- text: "picture of a futuristic tiger, artstation"
output:
url: images/tiger.jpg

También podemos mostrar las salidas de ejemplo en la interfaz de Hugging Face, por ejemplo, para un modelo de texto a imagen, a fin de mostrar una galería de generaciones de imágenes interesantes.

Disponibilidad de widgets y soporte de proveedores
No todos los modelos tienen widgets disponibles. La disponibilidad de widgets depende de:
- Soporte de tareas: la tarea del modelo debe estar soportada por al menos un proveedor en la red de Inference Providers
- Disponibilidad del proveedor: Al menos un proveedor debe estar sirviendo el modelo específico
- Configuración del modelo: El modelo debe tener metadatos y archivos de configuración adecuados
Para ver la lista completa de tareas compatibles, consulta nuestra página de documentación dedicada.
La lista de todos los proveedores y las tareas que admiten está disponible en esta página de documentación.
Para los modelos sin soporte de proveedor, aún puedes mostrar la funcionalidad usando salidas de ejemplo en tu tarjeta de modelo.
También puedes hacer clic en Solicitar soporte del proveedor directamente en la página del modelo para animar a los proveedores a servir el modelo, siempre que exista suficiente interés de la comunidad.
Explorar modelos con el Inference Playground
Antes de integrar modelos en tus aplicaciones, puedes probarlos de forma interactiva con el Inference Playground. El playground te permite:
- Prueba diferentes modelos de completado de chat con prompts personalizados
- Compare las respuestas entre diferentes modelos
- Experimenta con parámetros de inferencia como la temperatura, los tokens máximos y más
- Encuentra el modelo perfecto para tu caso de uso específico
El playground utiliza la misma infraestructura de Inference Providers que alimenta los widgets, por lo que puedes esperar un rendimiento y capacidades similares al integrar los modelos en tus propias aplicaciones.
Update on GitHub