Widgets de Streamlit: sliders, botões, caixas de seleção e mais

Se você está começando a explorar o mundo da criação de web apps com Python, o Streamlit é uma ferramenta poderosa e intuitiva que pode transformar suas ideias em realidade rapidamente. Um dos recursos mais interessantes do Streamlit são os widgets, que permitem adicionar interatividade aos seus aplicativos. Neste artigo, vamos explorar o que são widgets, como adicioná-los ao seu app e exemplos práticos de uso de sliders, botões, caixas de seleção e outros widgets básicos.

Introdução aos Widgets do Streamlit

Os widgets são componentes interativos que permitem aos usuários interagir com seu aplicativo. Eles são essenciais para coletar entradas do usuário e fornecer uma experiência dinâmica. No Streamlit, widgets como sliders, botões e caixas de seleção são fáceis de implementar e podem transformar um script Python simples em uma aplicação web interativa.

O que são widgets?

Widgets são elementos de interface gráfica que permitem a interação do usuário com o aplicativo. No contexto do Streamlit, eles são usados para capturar entradas do usuário e passar essas informações para o código Python. Isso inclui elementos como sliders para selecionar valores numéricos, botões para acionar ações e caixas de seleção para opções booleanas.

Por que usar widgets no Streamlit?

Usar widgets no Streamlit é uma maneira eficaz de tornar seus aplicativos mais interativos e responsivos. Eles permitem que os usuários forneçam entradas de forma intuitiva, o que pode ser crucial para aplicações que dependem de dados dinâmicos. Além disso, a simplicidade de implementação dos widgets no Streamlit torna essa ferramenta acessível até mesmo para iniciantes.

Como usar Widgets de Streamlit?

Os widgets no Streamlit são componentes interativos que permitem aos usuários filtrar e manipular dados em tempo real. Eles incluem elementos como sliders, botões, caixas de seleção, radio buttons, select boxes, entre outros. Para utilizá-los, você deve importar a biblioteca Streamlit e usar funções específicas para cada tipo de widget. Por exemplo, st.slider para sliders, st.button para botões, e st.checkbox para caixas de seleção. Esses widgets podem ser usados para modificar a disposição dos gráficos e dados exibidos no seu web app, tornando-o mais dinâmico e interativo.

Como adicionar widgets ao seu WebApp

Adicionar widgets ao seu aplicativo Streamlit é um processo simples e direto. Vamos começar com os passos básicos para iniciar um app com Streamlit.

Passos básicos para iniciar um app com Streamlit

Para começar, você precisa instalar o Streamlit. Você pode fazer isso usando o pip:

pip install streamlit

Depois de instalar, você pode criar um novo arquivo Python, por exemplo, app.py, e adicionar o seguinte código básico:

import streamlit as st

st.title('Meu Primeiro App com Streamlit')
st.write('Olá, mundo!')

Para executar o aplicativo, use o comando:

streamlit run app.py

Isso abrirá seu aplicativo em uma nova aba do navegador. Agora, vamos adicionar alguns widgets!

Sliders

Os sliders são widgets que permitem aos usuários selecionar um valor dentro de um intervalo. Eles são úteis para ajustar parâmetros numéricos de forma interativa.

O que é um slider?

Um slider é um controle deslizante que permite ao usuário escolher um valor dentro de um intervalo definido. É ideal para entradas numéricas onde o usuário precisa ajustar um valor de forma precisa.

Como criar um slider

Criar um slider no Streamlit é simples. Aqui está um exemplo básico:

import streamlit as st

valor = st.slider('Selecione um valor', 0, 100, 50)
st.write('O valor selecionado é:', valor)

Exemplos de uso de sliders

Os sliders podem ser usados em diversas situações, como ajustar a sensibilidade de um modelo, definir limites de filtragem de dados, entre outros. Aqui está um exemplo de uso em um contexto de filtragem de dados:

import streamlit as st
import pandas as pd

# Dados de exemplo
data = {'Idade': [23, 45, 12, 67, 34, 25, 19]}
df = pd.DataFrame(data)

# Slider para selecionar a idade mínima
idade_minima = st.slider('Selecione a idade mínima', 0, 100, 18)
df_filtrado = df[df['Idade'] >= idade_minima]

st.write('Dados filtrados:', df_filtrado)

Botões

Os botões são widgets que permitem aos usuários acionar ações específicas. Eles são essenciais para interações que requerem uma confirmação explícita do usuário.

O que é um botão?

Um botão é um elemento de interface que, quando clicado, executa uma ação definida. No Streamlit, os botões são usados para acionar funções ou atualizar a interface com base na entrada do usuário.

Como criar um botão

Criar um botão no Streamlit é tão simples quanto criar um slider. Aqui está um exemplo básico:

import streamlit as st

if st.button('Clique aqui'):
    st.write('Botão clicado!')

Exemplos de uso de botões

Os botões podem ser usados para diversas ações, como enviar formulários, atualizar gráficos ou iniciar cálculos. Aqui está um exemplo de uso para atualizar um gráfico:

import streamlit as st
import numpy as np
import pandas as pd

# Dados de exemplo
data = np.random.randn(10, 2)
df = pd.DataFrame(data, columns=['A', 'B'])

# Botão para atualizar os dados
if st.button('Atualizar dados'):
    data = np.random.randn(10, 2)
    df = pd.DataFrame(data, columns=['A', 'B'])

st.write('Dados:', df)

Caixas de Seleção

As caixas de seleção são widgets que permitem aos usuários selecionar uma ou mais opções de uma lista. Elas são úteis para entradas booleanas e seleção múltipla.

O que é uma caixa de seleção?

Uma caixa de seleção é um elemento de interface que permite ao usuário selecionar ou desmarcar uma opção. No Streamlit, elas são usadas para capturar entradas booleanas ou múltiplas seleções.

Como criar uma caixa de seleção

Criar uma caixa de seleção no Streamlit é simples. Aqui está um exemplo básico:

import streamlit as st

opcao = st.checkbox('Marque esta opção')
if opcao:
    st.write('Opção marcada!')
else:
    st.write('Opção desmarcada!')

Exemplos de uso de caixas de seleção

As caixas de seleção podem ser usadas para mostrar ou ocultar seções de um aplicativo, filtrar dados ou configurar opções. Aqui está um exemplo de uso para mostrar ou ocultar um gráfico:

import streamlit as st
import numpy as np
import pandas as pd

# Dados de exemplo
data = np.random.randn(10, 2)
df = pd.DataFrame(data, columns=['A', 'B'])

# Caixa de seleção para mostrar ou ocultar o gráfico
if st.checkbox('Mostrar gráfico'):
    st.line_chart(df)

Outros Widgets Básicos

Além dos sliders, botões e caixas de seleção, o Streamlit oferece uma variedade de outros widgets básicos que podem ser usados para capturar diferentes tipos de entradas do usuário.

Campos de texto

Os campos de texto permitem que os usuários insiram texto livre. Eles são úteis para capturar entradas como nomes, endereços ou qualquer outro tipo de texto.

import streamlit as st

nome = st.text_input('Digite seu nome')
st.write('Seu nome é:', nome)

Caixas de seleção múltipla (checkboxes)

As caixas de seleção múltipla permitem que os usuários selecionem várias opções de uma lista.

import streamlit as st

opcoes = st.multiselect('Selecione suas opções', ['Opção 1', 'Opção 2', 'Opção 3'])
st.write('Você selecionou:', opcoes)

Botões de rádio

Os botões de rádio permitem que os usuários selecionem uma única opção de um grupo.

import streamlit as st

escolha = st.radio('Escolha uma opção', ['Opção A', 'Opção B', 'Opção C'])
st.write('Você escolheu:', escolha)

Selectbox

A selectbox permite que os usuários selecionem uma opção de um menu suspenso.

import streamlit as st

opcao = st.selectbox('Selecione uma opção', ['Opção 1', 'Opção 2', 'Opção 3'])
st.write('Você selecionou:', opcao)

Dicas para Organizar Widgets

Organizar seus widgets de forma eficiente pode melhorar a usabilidade do seu aplicativo. O Streamlit oferece várias maneiras de organizar widgets, incluindo o uso da barra lateral e layout com colunas.

Usando a barra lateral (sidebar)

A barra lateral é uma ótima maneira de manter os controles do usuário separados do conteúdo principal do aplicativo.

import streamlit as st

# Adicionando widgets à barra lateral
st.sidebar.title('Barra Lateral')
st.sidebar.slider('Selecione um valor', 0, 100, 50)
st.sidebar.selectbox('Selecione uma opção', ['Opção 1', 'Opção 2', 'Opção 3'])

Layout com colunas

O layout com colunas permite que você coloque widgets lado a lado, o que pode ser útil para criar interfaces mais compactas e organizadas.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.button('Botão 1')

with col2:
    st.button('Botão 2')

Conclusão

Neste artigo, exploramos os widgets do Streamlit e como eles podem ser usados para adicionar interatividade aos seus aplicativos. Aprendemos a criar sliders, botões, caixas de seleção e outros widgets básicos, além de dicas para organizar esses elementos de forma eficiente. Com esses conhecimentos, você está pronto para começar a criar aplicativos web interativos e dinâmicos com o Streamlit.

Se você quiser continuar aprendendo sobre o Streamlit e outras ferramentas de desenvolvimento de aplicativos, recomendamos explorar a documentação oficial do Streamlit, participar da comunidade de desenvolvedores e acompanhar os conteúdos da Asimov sobre a biblioteca, como o tutorial Criando seu primeiro app com streamlit. Há sempre algo novo para aprender e implementar em seus projetos!

Referências

• Widget behavior – Streamlit Docs
• Basic concepts of Streamlit – Streamlit Docs
• Anatomy of a widget – Streamlit Docs