Introdução aos Componentes do Streamlit

Name: Olaf Källström

Updated on 24/07/2023

O Streamlit é uma poderosa biblioteca de código aberto que permite que cientistas de dados e desenvolvedores criem aplicativos web interativos e amigáveis para aprendizado de máquina e ciência de dados. No coração dessas aplicações estão os componentes do Streamlit, um conjunto de widgets interativos que permitem aos usuários manipular e interagir com os dados apresentados.

Os componentes do Streamlit são os blocos de construção das aplicações do Streamlit. Eles fornecem a interface do usuário, permitindo que os usuários interajam com a aplicação de várias maneiras. Desde botões simples e caixas de seleção até formulários e tabelas mais complexos, os componentes do Streamlit oferecem uma ampla gama de possibilidades para criar aplicativos interativos e dinâmicos de ciência de dados.

Você já ouviu falar dessa incrível ferramenta de Análise de Dados e Visualização de Dados, que transforma seu aplicativo Streamlit em um Tableau?

PyGWalker (opens in a new tab) é uma biblioteca em Python que ajuda você a incorporar facilmente uma interface semelhante à Tableau em seu próprio aplicativo Streamlit sem esforço. Confira este incrível vídeo produzido por Sven, do Coding is Fun (opens in a new tab) demonstrando os passos detalhados para potencializar seu aplicativo Streamlit com esta poderosa Biblioteca de Visualização de Dados em Python!

Agradecimentos especiais a Sven e sua grande contribuição (opens in a new tab) à comunidade do PyGWalker!

Além disso, você também pode conferir a página do GitHub do PyGWalker (opens in a new tab) para mais exemplos do PyGWalker.

Widgets Interativos no Streamlit

No Streamlit, os widgets são a principal forma de interação do usuário. Eles permitem que os usuários insiram dados, façam seleções e controlem o comportamento da aplicação. O Streamlit oferece uma variedade de widgets, incluindo botões, caixas de seleção, entradas de texto, sliders e muito mais. Cada widget serve a um propósito específico e pode ser personalizado para atender às necessidades da aplicação.

Os widgets no Streamlit não são apenas para entrada do usuário. Eles também podem ser usados para exibir dados e outras informações. Por exemplo, um widget de tabela pode ser usado para exibir um data frame, enquanto um widget de markdown pode ser usado para exibir texto formatado. Essa flexibilidade torna os widgets uma ferramenta poderosa para criar aplicativos interativos e dinâmicos de ciência de dados.

Aprofundando nos Componentes do Streamlit

Botão do Streamlit

Um botão do Streamlit é um componente simples, mas poderoso. Ele permite que os usuários executem ações na aplicação, como executar um script ou atualizar uma tela. O componente de botão é definido usando a função st.button, que recebe uma string como argumento para o rótulo do botão.

import streamlit as st
 
if st.button('Clique Aqui'):
    st.write('Botão clicado!')

Neste exemplo, quando o botão com o rótulo 'Clique Aqui' é clicado, a mensagem 'Botão clicado!' é exibida na tela. Esse mecanismo simples pode ser usado para acionar ações mais complexas, tornando o botão um componente versátil em aplicações do Streamlit.

Colunas do Streamlit

As colunas do Streamlit permitem que você organize o layout da sua aplicação de forma mais eficaz. Com a função st.columns, você pode dividir sua aplicação em várias colunas e colocar diferentes componentes em cada coluna.

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('Esta é a coluna 1')
 
with col2:
    st.write('Esta é a coluna 2')

Neste exemplo, a aplicação é dividida em duas colunas. A primeira coluna exibe o texto 'Esta é a coluna 1' e a segunda coluna exibe 'Esta é a coluna 2'. Isso permite que você crie layouts mais complexos e melhore a experiência do usuário da sua aplicação.

Formulário do Streamlit

Os formulários do Streamlit são uma maneira de agrupar widgets de entrada relacionados e enviar seus valores todos juntos. Isso é particularmente útil quando você tem várias entradas que devem ser enviadas juntas.

import streamlit as st
 
with st.form(key='meu_formulario'):
    text_input = st.text_input(label='Digite algum texto')
    submit_button = st.form_submit_button(label='Enviar')

Neste exemplo, um formulário é criado com um campo de entrada de texto e um botão de envio. Quando o botão de envio é clicado, todas as entradas dentro do formulário são enviadas juntas.

Tabela do Streamlit

As tabelas do Streamlit oferecem uma maneira de exibir dados em um formato estruturado. Você pode criar uma tabela no Streamlit usando a função st.table, que recebe um data frame ou um dicionário como entrada.

import streamlit as st
import pandas as pd
 
data = {'Nome': ['João', 'Ana', 'Pedro'],
        'Idade': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

Neste exemplo, um data frame é criado com a biblioteca pandas e exibido como uma tabela na aplicação do Streamlit. A tabela mostra claramente os dados em linhas e colunas, facilitando o entendimento pelos usuários.

Checkbox do Streamlit

Um checkbox do Streamlit é um componente que permite que os usuários alternem uma opção binária. Ele pode ser usado para controlar o comportamento da aplicação, como mostrar ou ocultar informações adicionais. O componente de checkbox é definido usando a função st.checkbox, que recebe uma string como argumento para o rótulo do checkbox.

import streamlit as st
 
if st.checkbox('Mostrar detalhes'):
    st.write('Detalhes mostrados!')

Neste exemplo, um checkbox com o rótulo 'Mostrar detalhes' é exibido. Quando o checkbox é marcado, a mensagem 'Detalhes mostrados!' é exibida. streamlit as st

st.write('Aqui estão os detalhes...')

Em exemplo, quando a caixa de seleção rotulada 'Mostrar detalhes' estiver marcada, a mensagem 'Aqui estão os detalhes...' é exibida na tela. Este mecanismo pode ser usado para controlar a visibilidade de informações adicionais com base na preferência do usuário.

Streamlit Text Input

A entrada de texto do Streamlit é um componente que permite aos usuários digitar uma linha de texto. Ele pode ser usado para capturar a entrada do usuário, como uma pesquisa ou uma resposta de formulário. O componente de entrada de texto é definido usando a função st.text_input, que recebe uma string como argumento para a etiqueta de entrada.

import streamlit as st
 
title = st.text_input('Título do filme', 'A Vida de Brian')
st.write('O título atual do filme é', title)

Neste exemplo, é criado um campo de entrada de texto rotulado 'Título do filme' com um valor padrão de 'A Vida de Brian'. O valor do campo de entrada de texto pode ser acessado e usado na aplicação, como mostrado pela mensagem que exibe o título atual do filme.

Streamlit Markdown

O Markdown do Streamlit é um componente que permite exibir texto formatado de acordo com a sintaxe Markdown. Isso pode ser usado para exibir cabeçalhos, texto em negrito ou itálico, listas, links e mais. O componente Markdown é definido usando a função st.markdown, que recebe uma string como argumento contendo o texto formatado em Markdown.

import streamlit as st
 
st.markdown('## Este é um cabeçalho')
st.markdown('Este é um texto em **negrito**')

Neste exemplo, é exibido um cabeçalho e um texto em negrito usando a sintaxe Markdown. Isso permite criar texto formatado rico em suas aplicações Streamlit.

Streamlit Multiselect

O multiselect do Streamlit é um componente que permite aos usuários selecionar várias opções de uma lista. Ele pode ser usado para filtrar dados, controlar a exibição de informações e mais. O componente multiselect é definido usando a função st.multiselect, que recebe uma string como argumento para a etiqueta de entrada e uma lista de opções.

import streamlit as st
 
options = st.multiselect(
    'Quais são suas cores favoritas',
    ['Verde', 'Amarelo', 'Vermelho', 'Azul'],
    ['Amarelo', 'Vermelho']
)
st.write('Você selecionou:', options)

Neste exemplo, é criado um campo multiselect rotulado 'Quais são suas cores favoritas' com quatro opções. O usuário pode selecionar várias opções e as opções selecionadas são exibidas na tela.

Streamlit Container

Os contêineres do Streamlit são uma maneira de agrupar componentes relacionados. Eles podem ser usados para criar layouts mais complexos e para gerenciar a exibição de componentes de maneira mais organizada. O componente do contêiner é definido usando a função st.container, que não recebe nenhum argumento.

import streamlit as st
 
with st.container():
    st.write('Isso está dentro do contêiner')
    st.button('Clique em mim')

Neste exemplo, é criado um contêiner com um componente de texto e um botão dentro dele. Os componentes dentro do contêiner são exibidos juntos, permitindo criar layouts mais complexos e melhorar a organização de sua aplicação.

Melhores práticas para usar os componentes Streamlit

Ao incorporar os componentes Streamlit em suas aplicações, é crucial seguir certas melhores práticas para garantir um desempenho e uma experiência do usuário ótimos. Aqui estão alguns pontos-chave a serem considerados:

Experiência do usuário: sempre dê prioridade à experiência do usuário. Organize seus componentes de maneira intuitiva e forneça rótulos e instruções claras. Isso não apenas melhora a usabilidade, mas também adiciona contexto a cada componente.

## Boa prática: rótulos e instruções claras
st.markdown('### Por favor, digite seus detalhes')
name = st.text_input('Nome')
email = st.text_input('E-mail')

Desempenho: esteja ciente das possíveis implicações de desempenho de seus componentes. Certos componentes, como formulários e tabelas, podem exigir muitos recursos e podem tornar sua aplicação mais lenta se não forem usados com parcimônia. Esforce-se para otimizar seus componentes e use-os com moderação para manter uma experiência do usuário suave e responsiva.

## Má prática: tabela grande
st.table(grande_dataframe)
 
## Boa prática: tabela otimizada com paginação
for i in range(0, len(grande_dataframe), 100):
    st.table(grande_dataframe[i:i+100])

Teste: certifique-se de testar completamente seus componentes. Eles devem funcionar como esperado e lidar com a entrada do usuário de forma adequada. Isso inclui testar casos extremos e lidar com erros de forma apropriada.

## Boa prática: tratamento de erros
try:
    result = alguma_função(entrada_do_usuário)
except AlgumErro as e:
    st.error(f'Ocorreu um erro: {e}')

Aplicações do mundo real dos componentes Streamlit

Os componentes Streamlit são usados em uma infinidade de aplicações do mundo real, aprimorando a interatividade e o envolvimento do usuário. Aqui estão alguns exemplos:

Ciência de dados: os componentes Streamlit são frequentemente usados para criar painéis interativos e ferramentas de exploração de dados. Os usuários podem usar controles deslizantes, caixas de seleção e menus suspensos para filtrar e manipular dados, enquanto tabelas e gráficos são usados para exibir os resultados.

## Exemplo: ferramenta de exploração de dados
dados_selecionados = dados[st.multiselect('Selecione colunas', dados.columns)]
st.line_chart(dados_selecionados)

Aprendizado de máquina: Os componentes Streamlit são usados para criar ferramentas interativas de exploração de modelos. Os usuários podem inserir parâmetros, executar modelos e visualizar os resultados tudo dentro da mesma aplicação. Isso facilita a compreensão e a interpretação de modelos de aprendizado de máquina.

## Exemplo: ferramenta de exploração de modelo
params = st.sidebar.slider('Parâmetro do modelo', 0, 10)
modelo = train_model(params)
st.write('Pontuação do modelo:', modelo.score(X, y))

Desenvolvimento Web: os componentes Streamlit são usados para criar aplicativos web dinâmicos e interativos. Desde simples formulários e botões até layouts complexos com vários contêineres, os componentes Streamlit oferecem uma ampla gama de possibilidades para criar experiências web envolventes.

## Exemplo: aplicativo web
with st.container():
st.header('Bem-vindo ao meu aplicativo!')
    if st.button('Clique em mim'):
        st.balloons()

Em todas essas aplicações, a chave é usar os componentes do Streamlit de uma maneira que melhore a experiência do usuário, torne o aplicativo mais interativo e permita que o usuário interaja com os dados de maneira significativa.

Aplicações do Mundo Real dos Componentes do Streamlit

Os componentes do Streamlit são usados em uma variedade de aplicações do mundo real. Por exemplo, na ciência de dados, eles são frequentemente usados para criar painéis interativos e ferramentas de exploração de dados. Os usuários podem usar deslizadores, caixas de seleção e menus suspensos para filtrar e manipular dados, enquanto tabelas e gráficos são usados para exibir os resultados.

Na aprendizagem de máquina, os componentes do Streamlit são usados para criar ferramentas interativas de exploração de modelos. Os usuários podem inserir parâmetros, executar modelos e visualizar os resultados, tudo dentro do mesmo aplicativo. Isso facilita a compreensão e interpretação de modelos de aprendizado de máquina.
No desenvolvimento web, os componentes do Streamlit são usados para criar aplicativos da web dinâmicos e interativos. Desde formulários e botões simples até layouts complexos com vários containers, os componentes do Streamlit oferecem uma ampla variedade de possibilidades para criar experiências web envolventes.

Conclusão

Os componentes do Streamlit são os blocos de construção de aplicativos interativos de ciência de dados. Eles oferecem uma ampla variedade de possibilidades para criar interfaces de usuário dinâmicas e envolventes, desde botões simples e caixas de seleção até formulários e tabelas mais complexas. Ao entender e usar efetivamente esses componentes, você pode criar aplicativos poderosos que permitem aos usuários interagir com os dados de maneiras significativas.

Se você é um cientista de dados que deseja criar um painel interativo, um engenheiro de aprendizado de máquina que deseja construir uma ferramenta de exploração de modelos ou um desenvolvedor web que deseja criar um aplicativo web dinâmico, os componentes do Streamlit têm tudo o que você precisa. Lembre-se sempre de considerar a experiência do usuário, ter cuidado com o desempenho e testar rigorosamente seus componentes. Com essas melhores práticas em mente, você está no caminho certo para dominar os componentes do Streamlit.

Você já ouviu falar dessa incrível ferramenta de análise de dados e visualização de dados, que transforma seu aplicativo Streamlit em um Tableau?

PyGWalker (opens in a new tab) é uma biblioteca Python que ajuda a incorporar facilmente uma interface semelhante ao Tableau em seu próprio aplicativo Streamlit de forma eficiente.

(opens in a new tab)

Perguntas Frequentes

1. Quais são as desvantagens do Streamlit?

Embora o Streamlit seja uma ferramenta poderosa para construir aplicativos interativos de ciência de dados, ele possui algumas limitações. Por exemplo, não é projetado para criar aplicativos complexos de várias páginas, e não oferece suporte à autenticação do usuário ou gerenciamento de sessões por padrão. Além disso, como o Streamlit é executado no lado do servidor, pode não ser tão responsivo quanto aplicativos JavaScript do lado do cliente para grandes conjuntos de dados ou cálculos complexos.

2. Como estruturar um aplicativo Streamlit?

Um aplicativo Streamlit é estruturado em torno do conceito de "execução de script". Quando um usuário interage com um widget, todo o script é executado do início ao fim. Isso torna o código simples e linear, semelhante a um script Python tradicional. No entanto, você também pode usar funções e classes para estruturar seu código e pode usar o decorador st.cache para armazenar em cache os resultados de cálculos demorados e evita que sejam executados desnecessariamente.

3. Como posso otimizar o desempenho do meu aplicativo Streamlit?

Existem várias maneiras de otimizar o desempenho do seu aplicativo Streamlit. Uma delas é usar o decorador st.cache para armazenar em cache os resultados de cálculos demorados. Outra opção é usar a função st.beta_columns para criar várias colunas e paralelizar a renderização de seus componentes. Você também pode usar a função st.experimental_memo para memoizar chamadas de função e evitar recálculos desnecessários. Por fim, tenha cuidado com o tamanho dos seus dados e a complexidade dos seus cálculos, e considere usar um servidor mais poderoso, se necessário.