A opção de usar o Streamlit como o SDK embutido padrão para Spaces está descontinuada. Se você deseja implantar um Space com Streamlit, selecione o SDK Docker e, em seguida, use o modelo do Streamlit.

Spaces do Streamlit

Streamlit dá aos usuários a liberdade de construir um aplicativo web completo em Python de forma reativa. Seu código é reexecutado sempre que o estado do aplicativo muda. O Streamlit também é ótimo para visualização de dados e suporta várias bibliotecas de gráficos, como Bokeh, Plotly e Altair. Leia este post de blog sobre como criar e hospedar aplicativos Streamlit em Spaces.

Selecionar Streamlit como SDK ao criar um novo Space inicializa seu Space com a versão mais recente do Streamlit, definindo a propriedade sdk como streamlit no bloco YAML do seu arquivo README.md. Se você quiser alterar a versão do Streamlit, pode editar a propriedade sdk_version.

Para usar o Streamlit em um Space, selecione Streamlit como SDK ao criar um Space por meio do formulário New Space. Isso criará um repositório com um README.md que contém as seguintes propriedades no bloco de configuração YAML:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

Você pode editar o sdk_version, mas observe que problemas podem ocorrer ao usar uma versão do Streamlit não suportada. Nem todas as versões do Streamlit são suportadas, portanto, consulte a seção de referência para ver quais versões estão disponíveis.

Para informações detalhadas sobre o Streamlit, consulte a documentação do Streamlit.

Apenas a porta 8501 é permitida para Spaces do Streamlit (porta padrão). Como resultado, se você fornecer um arquivo config.toml para o seu Space, certifique-se de que a porta padrão não seja substituída.

Seu primeiro Space Streamlit: Classificador de Hot Dog

Nas seções a seguir, você aprenderá os fundamentos para criar um Space, configurá-lo e implantar seu código nele. Criaremos um Space Hot Dog Classifier com Streamlit que será usado para demonstrar o modelo julien-c/hotdog-not-hotdog, capaz de detectar se uma imagem contém um hot dog 🌭

Você pode encontrar uma versão concluída deste projeto hospedada em NimaBoscarino/hotdog-streamlit.

Crie um novo Space do Streamlit

Vamos começar criando um novo Space e escolhendo Streamlit como nosso SDK. Os Hugging Face Spaces são repositórios Git, o que significa que você pode trabalhar no seu Space de forma incremental (e colaborativa) enviando commits. Dê uma olhada no guia Getting Started with Repositories para aprender como criar e editar arquivos antes de continuar.

Adicione as dependências

Para o Hot Dog Classifier, usaremos um 🤗 Transformers pipeline para utilizar o modelo, então precisamos começar instalando algumas dependências. Isso pode ser feito criando um arquivo requirements.txt em nosso repositório e adicionando as seguintes dependências a ele:

transformers
torch

O runtime do Spaces cuidará da instalação das dependências!

Crie o aplicativo Streamlit

Para criar o aplicativo Streamlit, crie um novo arquivo no repositório chamado app.py e adicione o seguinte 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 em Python usa um 🤗 Transformers pipeline para carregar o modelo julien-c/hotdog-not-hotdog, que é utilizado pela interface Streamlit. O aplicativo Streamlit espera que você envie uma imagem, que será classificada como hot dog ou not hot dog. Depois de salvar o código no arquivo app.py, visite a aba App para ver seu aplicativo em ação!

Incorporar Spaces do Streamlit em outras páginas da web

Você pode usar a tag HTML <iframe> para incorporar um Space do Streamlit como um quadro inline em outras páginas da web. Basta incluir a URL do seu Space, terminando com o sufixo .hf.space. Para encontrar a URL do seu Space, você pode usar o botão “Embed this Space” nas opções dos Spaces.

Por exemplo, a demonstração acima pode ser incorporada a estes documentos com a seguinte tag:

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

Observe que adicionamos ?embed=true à URL, o que ativa o modo de incorporação do aplicativo Streamlit, removendo alguns espaçadores e o rodapé para incorporações compactas.

Incorporar Spaces do Streamlit com IFrames de redimensionamento automático

O Streamlit suporta redimensionamento automático de iframes desde a versão 1.17.0, de modo que o tamanho do iframe pai é ajustado automaticamente para se adequar ao volume de conteúdo da aplicação Streamlit incorporada.

Ele depende da biblioteca iFrame Resizer, para a qual você precisa adicionar algumas linhas de código, como no exemplo a seguir em que

• id é definido como <iframe />, que é usado para especificar o alvo do redimensionamento automático.
• O iFrame Resizer é carregado por meio da tag script.
• A função iFrameResize() é chamada com o ID do elemento iframe de destino, para que seu tamanho mude automaticamente.

Podemos passar opções para o primeiro argumento de iFrameResize(). Consulte a documentação para mais detalhes.

<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>

Além disso, você pode consultar nossa documentação.