Construindo uma interface web com streamlit

Como em breve vamos precisar de uma interface para o nosso LangChain Python Projeto, vamos logo aprender como usar o streamlit para nos ajudar a criar essa interface.

Abrir uma pasta/diretório

Para iniciarmos, no nosso editor de código(Microsoft Visual Code Studio) vamos criar uma pasta/diretório para o nosso projeto. 

Criar um ambiente virtual

Depois de criada a nossa pasta, se ainda não tiver sido feito, vamos criar um ambiente virtual, digitando o comando abaixo no terminal do seu computador:

python -m venv .venv

Esse comando cria um ambiente virtual e automaticamente cria também um arquivo chamado .venv. no diretório corrente.

Ativação do ambiente virtual

Agora, fazemos a ativação deste ambiente, usando o comando:

.venv/Scripts/Activate.ps1

Obs.: Toda vez que você fechar o seu editor de código e voltar a trabalhar no seu projeto você vai precisar fazer novamente a ativação do ambiente virtual, usando o mesmo comando.

Criação do arquivo principal (.py)

Dentro desta pasta, vamos criar um arquivo novo com a extensão .py, que significa python.

Podemos chamar de main01.py.

Instalando Streamlit

Para trabalharmos com o streamlit, vamos precisar ter baixado o pacote streamlit, que pode ser feito através do comando abaixo no terminal do seu computador.

pip install streamlit

Instalando LangChain

Caso ainda não tenha instalado ainda pode instalar também o pacote langchain, através do comando abaixo:

pip install langchain

Agora, que temos tudo que precisamos, vamos começar a criar a nossa interface usando o streamlit.

Em nosso arquivo main01.py, vamos inicialmente, fazer a importação de algumas classes que vamos precisar na construção da nossa interface.

Importando streamlit

Primeiramente, vamos importar o pacote streamlit para a nossa aplicação, usando o comando abaixo:

import streamlit as st

Title

Agora, podemos iniciar a construção da interface do nosso projeto. Para isso, vamos usar o comando title para criar o título de nossa interface.

st.title(“Gerador de Nomes de Animais”)

Esse comando vai criar o título de nossa página web.

Observe o st antes do title. Esse st é a entidade onde vão está todos os métodos do streamlit na nossa aplicação, já que nós ao importarmos o streamlit chamamos-o de st( as st). Então, toda vez que formos usarmos algum método do pacote streamlit vamos fazer da seguinte forma: st.nome_do_método().

Execução

Não menos importante, para você executar o streamlit script, você digita o seguinte comando no seu termina:

streamlit run main01.py

Esse comando vai abrir o seu navegador no localhost server com o seu script.

Como até o momento só adicionamos na nossa interface o título Gerador de Nomes de Animais é só isso que vai aparecer na nossa página.

Quando finalizada a nossa página web vai ficar com essa aparência:

Write

Depois do título, vamos criar uma linha de texto usando o comando write:

st.write("Aqui você pode obter ideias para dar nome ao seu novo pet")

Você pode verificar o resultado na imagem acima.

Selectbox

Agora, vamos adicionar o seletor(selectbox) para o tipo de animais, usando o seguinte comando:

tipo_de_pet = st.selectbox(
    label = "Selecione o tipo de animal que você quer dar um nome:",
    options = ("Cachorro", "Gato", "Hamster", "Cavalo", "Pássaro", "Outros")
)

Observe na imagem acima na seta st.selectbox, para ver como ficou renderizado esse código no navegador de internet.

Neste, seletor o usuário vai poder escolher o tipo de animal ele tem de uma lista de animais no formato de menu drop down.

Multiselect

O próximo objeto da interface é o st.multiselect. Esse objeto permite que o usuário escolha uma cor ou várias cores para descrever a cor do seu animal.

O esse objeto,st.multiselect, permite a seleção de várias opções.

A sintaxe dele é da seguinte forma:

cor = st.multiselect(
    label = "Qual(ais) a(s) cor(es) do seu animal?",
    options = ("Preto", "Branco", "Marrom", "Dourado", "Cinza", "Creme",            "Amarelo", "Vermelho", "Azul","Chocolate", "Prateado", "Fulvo", "Areia", "Rajado", "Tigrado", "Malhado", "Merle", "Marrom-avermelhado", "Tricolor", "Preto e Castanho")

O label é o texto que vai em cima do seletor e options são todas as opções de cor para descrever o animal.

Slider

O próximo objeto é o slider que consiste de uma barra onde o usuário vai poder escolher a idade do seu animal.

O código desse slider é o seguinte:

idade = st.slider(
    label = "Qual é a idade do seu animal em meses?",
    min_value = 0,
    max_value = 12,
    value = 0, # esse é o defualt value
    step = 1
)

Esses 5 objetos são os que vamos precisar no nosso projeto inicialmente. Naturalmente, existem muito mais objetos no streamlit mas vamos explorá-los aos poucos, para que seja mais fácil o processo de aprendizagem.