Criar guias dinâmicas no Streamlit: Comece rapidamente

Name

Olaf Källström

Updated on 24/07/2023

O Streamlit é uma biblioteca Python popular de código aberto que permite aos desenvolvedores criar aplicativos web interativos de forma rápida e fácil. É especialmente favorito pelos cientistas de dados por sua simplicidade e eficiência na construção de aplicativos orientados por dados. Uma das principais funcionalidades que o Streamlit oferece é a capacidade de criar guias, que são essenciais para estruturar o layout de seus aplicativos e melhorar a navegação do usuário.

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

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

Agradecimento especial a Sven e sua grande contribuição (opens in a new tab) à comunidade 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.

Parte 1. O que são guias do Streamlit?

Guias do Streamlit são contêineres que podem conter qualquer conteúdo que você queira criar em seu aplicativo. Elas fornecem uma maneira fácil de navegar entre grupos de conteúdo relacionado, tornando seu aplicativo mais organizado e fácil de usar. Por exemplo, você pode usar guias para separar diferentes seções de seu experimento de aprendizado de máquina, como visualização de dados, treinamento de modelo e análise de resultados.

Parte 2. Por que usar guias do Streamlit?

O objetivo principal de usar guias do Streamlit é agrupar conteúdo relacionado em visualizações independentes. Isso não só melhora a experiência do usuário, fornecendo uma interface limpa e organizada, mas também permite um fluxo de trabalho mais eficiente. Por exemplo, em um projeto de aprendizado de máquina, você pode ter guias separadas para pré-processamento de dados, treinamento do modelo, métricas de avaliação e previsões.

Parte 3. Como criar guias no Streamlit

Para criar guias no Streamlit, você primeiro precisa criar uma lista de títulos de guia. Cada opção nesta lista corresponde ao nome de uma guia. Em seguida, para cada guia, você escreve o conteúdo que deseja exibir. Aqui está um exemplo simples:

import streamlit as st
 
st.title('Meu Aplicativo')
 
# Criar guias
titulos_guias = ['Tópico A', 'Tópico B', 'Tópico C']
guia1, guia2, guia3 = st.tabs(titulos_guias)
 
# Adicionar conteúdo a cada guia
with guia1:
    st.header('Tópico A')
    st.write('Conteúdo do tópico A')
 
with guia2:
    st.header('Tópico B')
    st.write('Conteúdo do tópico B')
 
with guia3:
    st.header('Tópico C')
    st.write('Conteúdo do tópico C')

Neste exemplo, foram criadas três guias com os títulos 'Tópico A', 'Tópico B' e 'Tópico C'. Cada guia exibe um cabeçalho e um texto.

Parte 4. Criando Múltiplas Guias no Streamlit

A criação de múltiplas guias no Streamlit segue o mesmo processo de criação de uma única guia. Você simplesmente adiciona mais opções à lista de títulos de guia e, em seguida, adiciona conteúdo para cada guia. Isso é particularmente útil quando você tem uma grande quantidade de conteúdo relacionado que deseja agrupar em seções separadas.

Por exemplo, suponha que você esteja construindo um aplicativo Streamlit para um projeto de aprendizado de máquina. Você pode ter seções separadas para pré-processamento de dados, treinamento de modelo, avaliação do modelo e visualização de resultados. Cada uma dessas seções pode ser agrupada em sua própria guia, tornando seu aplicativo mais organizado e mais fácil de navegar.

Aqui está um exemplo de como criar múltiplas guias no Streamlit:

import streamlit as st
 
st.title('Meu Projeto de Aprendizado de Máquina')
 
# Criar guias
titulos_guias = ['Pré-processamento de Dados', 'Treinamento do Modelo', 'Avaliação do Modelo', 'Visualização de Resultados']
guias = st.tabs(titulos_guias)
 
# Adicionar conteúdo à guia de Pré-processamento de Dados
with guias[0]:
    st.header('Pré-processamento de Dados')
    st.write('Aqui é onde você pode pré-processar seus dados.')
 
# Adicionar conteúdo à guia de Treinamento do Modelo
with guias[1]:
    st.header('Treinamento do Modelo')
    st.write('Aqui é onde você pode treinar seu modelo.')
 
# Adicionar conteúdo à guia de Avaliação do Modelo
with guias[2]:
    st.header('Avaliação do Modelo')
    st.write('Aqui é onde você pode avaliar seu modelo.')
 
# Adicionar conteúdo à guia de Visualização de Resultados
with guias[3]:
    st.header('Visualização de Resultados')
    st.write('Aqui é onde você pode visualizar seus resultados.')

Neste exemplo, foram criadas quatro guias para um projeto de aprendizado de máquina. Cada guia corresponde a uma seção diferente do projeto e cada guia contém seu próprio conteúdo.

Você pode adicionar quantas guias forem necessárias e cada guia pode conter qualquer tipo de conteúdo, como texto, imagens, gráficos e widgets. Isso torna as guias do Streamlit uma ferramenta versátil para criar aplicativos interativos e dinâmicos.

A criação de múltiplas guias no Streamlit é uma forma simples e eficaz de melhorar a funcionalidade e a experiência do usuário de seus aplicativos. Portanto, comece a explorar esse recurso e veja como ele pode beneficiar seus projetos.

Parte 5. Criando Guias Dinâmicas no Streamlit

As abas dinâmicas no Streamlit são abas que são criadas e renderizadas dinamicamente com base no conteúdo de um servidor ou API. Isso é vantajoso quando o número de abas e seu conteúdo não são conhecidos antecipadamente e podem mudar ao longo do tempo. Aqui está um exemplo de como criar abas dinâmicas no Streamlit:

import streamlit as st
 
st.title('Minha Aplicação')
 
# Função para obter o conteúdo da aba do servidor
def obter_conteudo_aba():
    return [
        {'title': 'Tópico A', 'content': 'Conteúdo do Tópico A'},
        {'title': 'Tópico B', 'content': 'Conteúdo do Tópico B'},
        {'title': 'Tópico C', 'content': 'Conteúdo do Tópico C'},
    ]
 
# Obter conteúdo da aba do servidor
conteudo_abas = obter_conteudo_aba()
 
# Criar abas
nomes_abas = [conteudo['title'] for conteudo in conteudo_abas]
abas = st.tabs(nomes_abas)
 
# Iterar por cada aba e montar o conteúdo
for aba, conteudo_aba in zip(abas, conteudo_abas):
    with aba:
        st.header(conteudo_aba['title'])
        st.write(conteudo_aba['content'])

Neste exemplo, primeiro definimos uma função obter_conteudo_aba que imita o que um servidor ou API pode retornar. Essa função retorna uma lista de dicionários, cada um contendo um título de aba e conteúdo de aba. Em seguida, criamos as abas e iteramos por elas para escrever o conteúdo.

Par 6. Exemplos Práticos de Abas no Streamlit

As abas no Streamlit são uma funcionalidade versátil que pode ser aproveitada em várias aplicações, principalmente no campo da ciência de dados e aprendizado de máquina. Aqui está uma análise detalhada de alguns dos usos práticos das abas no Streamlit:

Abas no Streamlit para Experimentos de Aprendizado de Máquina

Imagine que você está imerso em um experimento de aprendizado de máquina. Você tem pré-processamento de dados, treinamento de modelo, avaliação de modelo e visualização de resultados, tudo acontecendo simultaneamente. É uma sucessão de estágios e processos que poderiam facilmente se tornar avassaladores. Mas é aqui que as abas no Streamlit entram em ação. Ao agrupar cada estágio em abas separadas, você não apenas facilita a navegação dos usuários pelo experimento, mas também melhora sua compreensão de todo o processo.

Por exemplo, você pode ter um aplicativo Streamlit com abas como estas:

import streamlit as st
 
st.title('Meu Experimento de Aprendizado de Máquina')
 
# Criar abas
titulos_abas = ['Pré-processamento de Dados', 'Treinamento do Modelo', 'Avaliação do Modelo', 'Visualização dos Resultados']
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
with abas[0]:
    st.header('Pré-processamento de Dados')
    st.write('Aqui realizamos o pré-processamento dos dados...')
 
with abas[1]:
    st.header('Treinamento do Modelo')
    st.write('Aqui realizamos o treinamento do modelo...')
 
with abas[2]:
    st.header('Avaliação do Modelo')
    st.write('Aqui realizamos a avaliação do modelo...')
 
with abas[3]:
    st.header('Visualização dos Resultados')
    st.write('Aqui realizamos a visualização dos resultados...')

Neste exemplo, cada estágio do experimento de aprendizado de máquina tem sua própria aba dedicada, tornando o aplicativo mais organizado e amigável para o usuário.

Abas no Streamlit para Visualização de Dados

A visualização de dados é o coração e a alma da análise de dados e aprendizado de máquina. É a arte de criar uma imagem com seus dados, e as abas no Streamlit são o cenário perfeito para essa obra-prima. Com as abas no Streamlit, você pode criar abas separadas para diferentes tipos de visualizações, como gráficos de barras, gráficos de dispersão e mapas de calor. Isso permite que os usuários alternem facilmente entre diferentes visualizações e obtenham insights dos dados.

Aqui está um exemplo de como você pode usar as abas no Streamlit para visualização de dados:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Carregar alguns dados
data = pd.read_csv('data.csv')
 
st.title('Minha Aplicação de Visualização de Dados')
 
# Criar abas
titulos_abas = ['Gráfico de Barras', 'Gráfico de Dispersão', 'Mapa de Calor']
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
with abas[0]:
    st.header('Gráfico de Barras')
    st.bar_chart(data)
 
with abas[1]:
    st.header('Gráfico de Dispersão')
    fig, ax = plt.subplots()
    ax.scatter(data['x'], data['y'])
    st.pyplot(fig)
 
with abas[2]:
    st.header('Mapa de Calor')
    st.heatmap(data.corr())

Neste exemplo, cada aba exibe um tipo diferente de visualização de dados, permitindo que os usuários explorem os dados de diferentes perspectivas.

Abas no Streamlit para Criação de Painéis de Controle

As abas no Streamlit podem ser usadas para criar painéis de controle interativos. Por exemplo, você pode ter uma aba para entrada de dados do usuário, outra aba para exibir os dados e outra aba para mostrar os resultados da análise de dados. Isso torna o painel de controle mais organizado e amigável para o usuário.

Aqui está um exemplo de um painel de controle Streamlit com abas:

import streamlit as st
 
st.title('Meu Painel de Controle')
 
# Criar abas
titulos_abas = ['Entrada de Usuário', 'Exibição de Dados', 'Análise de Dados']
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
with abas[0]:
    st.header('Entrada de Usuário')
    st.text_input('Digite algum texto')
    st.number_input('Digite um número')
 
with abas[1]:
    st.header('Exibição de Dados')
    st.table({'coluna1': [1, 2, 3], 'coluna2': [4, 5, 6]})
 
with abas[2]:
    st.header('Análise de Dados')
    st.line_chart([1, 2, 3, 4, 5])

Neste exemplo, a aba 'Entrada de Usuário' contém widgets de entrada, a aba 'Exibição de Dados' mostra uma tabela de dados e a aba 'Análise de Dados' exibe um gráfico de linha.

Abas no Streamlit para Organização de Projetos

Em um projeto grande com vários componentes, as abas no Streamlit podem ser usadas para organizar os componentes em seções separadas. Isso não apenas torna o projeto mais gerenciável, mas também melhora a experiência do usuário, fornecendo uma interface limpa e organizada.

Por exemplo, se você estiver construindo um aplicativo grande com vários componentes, como carregamento de dados, limpeza de dados, análise de dados e visualização de dados, você poderia organizar esses componentes em abas separadas, assim:

import streamlit as st
 
st.title('Meu Projeto Grande')
 
# Criar abas
titulos_abas = ['Carregamento de Dados', 'Limpeza de Dados', 'Análise de Dados', 'Visualização de Dados']
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
with abas[0]:
```markdown
st.header('Carregamento de Dados')
st.write('Aqui carregamos os dados...')
 
with tabs[1]:
    st.header('Limpeza de Dados')
    st.write('Aqui limpamos os dados...')
 
with tabs[2]:
    st.header('Análise de Dados')
    st.write('Aqui analisamos os dados...')
 
with tabs[3]:
    st.header('Visualização de Dados')
    st.write('Aqui visualizamos os dados...')

Neste exemplo, cada componente do projeto tem sua própria aba dedicada, tornando a aplicação mais organizada e mais fácil de navegar.

Parte 7. Conceitos Avançados em Abas do Streamlit

As abas do Streamlit oferecem uma variedade de recursos avançados que podem aprimorar a funcionalidade e a experiência do usuário de suas aplicações. Aqui estão alguns conceitos avançados em abas do Streamlit:

Container de Abas do Streamlit e Seus Usos

Um container de abas do Streamlit é um container que armazena o conteúdo de uma aba. Você pode adicionar qualquer conteúdo a um container de abas, como texto, imagens, gráficos e widgets. O container de abas fornece uma maneira fácil de agrupar conteúdo relacionado e melhorar a navegação do usuário.

Por exemplo, você pode ter um aplicativo Streamlit com um container de abas assim:

import streamlit as st
 
st.title('Meu Aplicativo')
 
# Criar um container de abas
tabs = st.tabs(['Aba 1', 'Aba 2', 'Aba 3'])
 
# Adicionar conteúdo à primeira aba
with tabs[0]:
    st.header('Aba 1')
    st.write('Este é o conteúdo da Aba 1.')
 
# Adicionar conteúdo à segunda aba
with tabs[1]:
    st.header('Aba 2')
    st.write('Este é o conteúdo da Aba 2.')
 
# Adicionar conteúdo à terceira aba
with tabs[2]:
    st.header('Aba 3')
    st.write('Este é o conteúdo da Aba 3.')

Neste exemplo, cada aba é um container que contém seu próprio conteúdo, e os usuários podem alternar entre as abas para visualizar diferentes conteúdos.

Layout e Design de Abas do Streamlit

O Streamlit oferece uma API para criar e projetar aplicativos interativos em Python. O layout de abas é uma das características de design oferecidas pelo Streamlit. Com um layout de abas, você pode organizar seu conteúdo em abas separadas, tornando seu aplicativo mais organizado e amigável ao usuário.

Aqui está um exemplo de um aplicativo Streamlit com um layout de abas:

import streamlit as st
 
st.title('Meu Aplicativo')
 
# Criar um layout de abas
tabs = st.tabs(['Aba 1', 'Aba 2', 'Aba 3'])
 
# Adicionar conteúdo à primeira aba
with tabs[0]:
    st.header('Aba 1')
    st.write('Este é o conteúdo da Aba 1.')
 
# Adicionar conteúdo à segunda aba
with tabs[1]:
    st.header('Aba 2')
    st.write('Este é o conteúdo da Aba 2.')
 
# Adicionar conteúdo à terceira aba
with tabs[2]:
    st.header('Aba 3')
    st.write('Este é o conteúdo da Aba 3.')

Neste exemplo, o aplicativo tem um layout de abas com três abas, e cada aba contém seu próprio conteúdo.

Navegação e Interface de Abas do Streamlit

As abas do Streamlit fornecem uma navegação fácil entre grupos de conteúdo relacionados. A transição entre abas é rápida e suave, proporcionando uma ótima experiência do usuário. Além disso, você pode criar abas dinamicamente e inserir conteúdo nelas, o que é particularmente útil quando o número de abas e seu conteúdo não são conhecidos antecipadamente.

Por exemplo, você pode ter um aplicativo Streamlit em que o número de abas e seu conteúdo são determinados pela entrada do usuário:

import streamlit as st
 
st.title('Meu Aplicativo Dinâmico')
 
# Obter o número de abas do usuário
num_abas = st.number_input('Informe o número de abas', min_value=1, max_value=10, value=3)
 
# Criar abas
titulos_abas = [f'Aba {i+1}' for i in range(num_abas)]
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
for i in range(num_abas):
    with abas[i]:
        st.header(f'Aba {i+1}')
        st.write(f'Este é o conteúdo da Aba {i+1}.')

Neste exemplo, o usuário pode especificar o número de abas, e o aplicativo cria dinamicamente as abas e adiciona conteúdo a elas.

Conteúdo e Exibição de Abas do Streamlit

As abas do Streamlit são basicamente contêineres para qualquer coisa que você queira criar em seu aplicativo. Elas fornecem uma maneira de exibir uma variedade de conteúdo, como métricas, gráficos, gráficos e widgets de entrada. Isso torna as abas do Streamlit uma ferramenta versátil para criar aplicativos interativos e dinâmicos.

Aqui está um exemplo de um aplicativo Streamlit que usa abas para exibir diferentes tipos de conteúdo:

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Carregar alguns dados
dados = pd.read_csv('data.csv')
 
st.title('Meu Aplicativo de Visualização de Dados')
 
# Criar abas
titulos_abas = ['Métricas', 'Gráfico', 'Gráfico', 'Entrada']
abas = st.tabs(titulos_abas)
 
# Adicionar conteúdo a cada aba
with abas[0]:
    st.header('Métricas')
    st.metric('Métrica 1', 123)
    st.metric('Métrica 2', 456)
 
with abas[1]:
    st.header('Gráfico')
    fig, ax = plt.subplots()
    ax.plot(dados['x'], dados['y'])
    st.pyplot(fig)
 
with abas[2]:
    st.header('Gráfico')
    st.line_chart(dados)
 
with abas[3]:
    st.header('Entrada')
    st.text_input('Digite algum texto')
    st.number_input('Digite um número')

Neste exemplo, a aba 'Métricas' exibe métricas, a aba 'Gráfico' mostra um gráfico, a aba 'Gráfico' exibe um gráfico de linha e a aba 'Entrada' contém widgets de input.

Conclusão

As abas do Streamlit são um recurso poderoso que pode melhorar significativamente a funcionalidade e a experiência do usuário de suas aplicações. Seja trabalhando em um projeto de ciência de dados, criando um painel de controle ou construindo um aplicativo complexo, as abas do Streamlit podem ajudá-lo a organizar seu conteúdo e tornar seu aplicativo mais amigável ao usuário. Portanto, comece a explorar as abas do Streamlit hoje mesmo e veja como elas podem beneficiar seus projetos.

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

O PyGWalker (opens in a new tab) é uma biblioteca Python que ajuda você a incorporar facilmente uma interface semelhante ao Tableau em seu próprio aplicativo Streamlit sem esforço.

(opens in a new tab)

Perguntas Frequentes

O Streamlit oferece suporte a abas?

Sim, o Streamlit oferece suporte a abas. Você pode criar várias abas em sua aplicação Streamlit para organizar seu conteúdo e melhorar a navegação do usuário.

Como posicionar elementos no Streamlit?

No Streamlit, você posiciona os elementos escrevendo-os na ordem em que deseja que apareçam. O Streamlit é executado de cima para baixo, então a ordem em que você escreve seus elementos é a ordem em que eles aparecerão em sua aplicação.

Como o Streamlit funciona?

O Streamlit funciona transformando scripts Python em aplicações web interativas. Ele fornece um conjunto de APIs de alto nível para criar elementos interativos, como deslizadores, caixas de seleção e abas. Quando você executa seu script Streamlit, ele cria um servidor web e abre uma janela do navegador apontando para o servidor.

Qual é o papel do Streamlit em Python?

O Streamlit é uma biblioteca Python para criar aplicações web interativas. Ele permite que desenvolvedores Python e cientistas de dados criem aplicações para análise de dados, aprendizado de máquina e visualização de dados sem precisar saber HTML, CSS ou JavaScript.