# Gradio Spaces

**Gradio** ofrece una interfaz fácil e intuitiva para ejecutar un modelo a partir de una lista de entradas y mostrar las salidas en formatos como imágenes, audio, objetos 3D y más. Gradio ahora incluso cuenta con un [componente de salida de gráfico](https://gradio.app/docs/#o_plot) para crear visualizaciones de datos con Matplotlib, Bokeh y Plotly. Para más detalles, consulta la guía [Introducción](https://gradio.app/getting_started/) del equipo de Gradio.

Seleccionar **Gradio** como SDK al [crear un nuevo Space](https://huggingface.co/new-space) inicializará tu Space con la última versión de Gradio, estableciendo la propiedad `sdk` en `gradio` dentro del bloque YAML de tu archivo `README.md`. Si deseas cambiar la versión de Gradio, puedes editar la propiedad `sdk_version`.

Visita la [documentación de Gradio](https://gradio.app/docs/) para conocer todas sus funciones y echa un vistazo a las [Guías de Gradio](https://gradio.app/guides/) para encontrar tutoriales útiles que te ayuden a empezar.

## Tu primer Espacio de Gradio: 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 Gradio que se utilizará para demostrar el modelo [julien-c/hotdog-not-hotdog](https://huggingface.co/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-gradio](https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio).

## Crear un nuevo espacio de Gradio

Comenzaremos [creando un Space nuevo](https://huggingface.co/new-space) y eligiendo **Gradio** 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](./repositories-getting-started) para aprender cómo crear y editar archivos antes de continuar.

## Agregue las dependencias

Para el **Hot Dog Classifier** utilizaremos un [🤗 Transformers pipeline](https://huggingface.co/docs/transformers/pipeline_tutorial) 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 interfaz de Gradio

Para crear la aplicación de Gradio, crea un nuevo archivo en el repositorio llamado **app.py** y añade el siguiente código:

```python
import gradio as gr
from transformers import pipeline

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

def predict(input_img):
    predictions = pipeline(input_img)
    return input_img, {p["label"]: p["score"] for p in predictions} 

gradio_app = gr.Interface(
    predict,
    inputs=gr.Image(label="Select hot dog candidate", sources=['upload', 'webcam'], type="pil"),
    outputs=[gr.Image(label="Processed Image"), gr.Label(label="Result", num_top_classes=2)],
    title="Hot Dog? Or Not?",
)

if __name__ == "__main__":
    gradio_app.launch()
```

Este script de Python utiliza un [🤗 pipeline de Transformers](https://huggingface.co/docs/transformers/pipeline_tutorial) para cargar el modelo [julien-c/hotdog-not-hotdog](https://huggingface.co/julien-c/hotdog-not-hotdog), que es el que utiliza la interfaz de Gradio. La aplicación de Gradio esperará que subas una imagen, la cual 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 espacios de Gradio en otras páginas web

Puedes incrustar un Espacio de Gradio en otras páginas web utilizando componentes web o la etiqueta HTML `<iframe>`. Consulta [nuestra documentación](./spaces-embed) o la [documentación de Gradio](https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces) para obtener más detalles.