La opción de usar Streamlit como SDK integrado predeterminado para Spaces está en desuso. Si deseas desplegar un Space con Streamlit, selecciona el SDK de Docker y luego usa la plantilla de Streamlit.

Espacios de Streamlit

Streamlit ofrece a los usuarios la libertad de crear una aplicación web completa con Python de forma reactiva. Tu código se vuelve a ejecutar cada vez que cambia el estado de la aplicación. Streamlit también es excelente para la visualización de datos y admite varias bibliotecas de gráficos, como Bokeh, Plotly y Altair. Lee esta entrada de blog sobre cómo crear y alojar aplicaciones de Streamlit en Spaces.

Seleccionar Streamlit como SDK al crear un nuevo Space inicializará tu Space con la última versión de Streamlit, estableciendo la propiedad sdk en streamlit dentro del bloque YAML de tu archivo README.md. Si deseas cambiar la versión de Streamlit, puedes editar la propiedad sdk_version.

Para usar Streamlit en un Space, seleccione Streamlit como SDK al crear un Space a través del formulario New Space. Esto creará un repositorio con un README.md que contiene las siguientes propiedades en el bloque de configuración YAML:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

Puedes editar sdk_version, pero ten en cuenta que pueden surgir problemas si usas una versión de Streamlit no compatible. No todas las versiones de Streamlit son compatibles, por lo que consulta la sección de referencia para ver qué versiones están disponibles.

Para obtener información detallada sobre Streamlit, consulte la documentación de Streamlit.

Solo se permite el puerto 8501 para los Spaces de Streamlit (puerto predeterminado). Como resultado, si proporcionas un archivo config.toml para tu Space, asegúrate de que el puerto predeterminado no se sobrescriba.

Tu primer espacio de Streamlit: clasificador de hot dogs

En las siguientes secciones, aprenderás lo básico para crear un Space, configurarlo y desplegar tu código en él. Crearemos un Space de Hot Dog Classifier con Streamlit que se utilizará para demostrar el modelo julien-c/hotdog-not-hotdog, el cual puede detectar si una imagen dada contiene un hot dog 🌭

Puedes encontrar una versión completada de esto alojada en NimaBoscarino/hotdog-streamlit.

Crear un nuevo Space de Streamlit

Comenzaremos creando un Space nuevo y eligiendo Streamlit como SDK. Los Hugging Face Spaces son repositorios Git, lo que significa que puedes trabajar en tu Space de forma incremental (y colaborativa) enviando commits. Consulta la guía Getting Started with Repositories para aprender cómo crear y editar archivos antes de continuar.

Agregue las dependencias

Para el Hot Dog Classifier utilizaremos un 🤗 Transformers pipeline para usar el modelo, por lo que necesitamos empezar instalando algunas dependencias. Esto se puede hacer creando un archivo requirements.txt en nuestro repositorio y añadiendo las siguientes dependencias:

transformers
torch

¡El runtime de Spaces se encargará de instalar las dependencias!

Crear la aplicación de Streamlit

Para crear la aplicación de Streamlit, cree un nuevo archivo en el repositorio llamado app.py y agregue el siguiente código:

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

Este script de Python utiliza un 🤗 pipeline de Transformers para cargar el modelo julien-c/hotdog-not-hotdog, que es utilizado por la interfaz de Streamlit. La aplicación de Streamlit esperará que subas una imagen, que luego clasificará como hot dog o not hot dog. Una vez que hayas guardado el código en el archivo app.py, visita la pestaña App para ver tu aplicación en acción.

Incrustar Spaces de Streamlit en otras páginas web

Puedes usar la etiqueta HTML <iframe> para incrustar un Space de Streamlit como un marco en línea en otras páginas web. Simplemente incluye la URL de tu Space, que termina con el sufijo .hf.space. Para encontrar la URL de tu Space, puedes usar el botón “Embed this Space” desde las opciones de Spaces.

Por ejemplo, la demostración anterior se puede incrustar en estos documentos con la siguiente etiqueta:

<iframe
  src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

Tenga en cuenta que hemos añadido ?embed=true a la URL, lo que activa el modo de incrustación de la aplicación de Streamlit, eliminando algunos espaciadores y el pie de página para incrustaciones más ligeras.

Incrustar Spaces de Streamlit con marcos IFrame de redimensionamiento automático

Streamlit ha admitido el redimensionamiento automático de iframes desde la versión 1.17.0, de modo que el tamaño del iframe principal se ajusta automáticamente para adaptarse al volumen de contenido de la aplicación de Streamlit incrustada.

Se basa en la biblioteca iFrame Resizer, para la cual es necesario agregar unas pocas líneas de código, como en el siguiente ejemplo donde

• id se establece en <iframe />, que se utiliza para especificar el objetivo del redimensionamiento automático.
• El iFrame Resizer se carga mediante la etiqueta script.
• La función iFrameResize() se llama con el ID del elemento iframe de destino, de modo que su tamaño cambia automáticamente.

Podemos pasar opciones al primer argumento de iFrameResize(). Consulta la documentación para ver los detalles.

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

Además, puedes consultar nuestra documentación.