{"id":554,"date":"2024-02-14T13:14:34","date_gmt":"2024-02-14T16:14:34","guid":{"rendered":"https:\/\/portal7ia.com.br\/?p=554"},"modified":"2024-02-14T17:00:30","modified_gmt":"2024-02-14T20:00:30","slug":"construindo-uma-interface-web-com-streamlit","status":"publish","type":"post","link":"https:\/\/portal7ia.com.br\/index.php\/2024\/02\/14\/construindo-uma-interface-web-com-streamlit\/","title":{"rendered":"Construindo uma interface web com streamlit"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Abrir uma pasta\/diret\u00f3rio<\/h6>\n\n\n\n

\ufeffPara iniciarmos, no nosso editor de c\u00f3digo(Microsoft Visual Code Studio) vamos criar uma pasta\/diret\u00f3rio para o nosso projeto. <\/p>\n\n\n\n

Criar um ambiente virtual<\/h6>\n\n\n\n

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

python -m venv .venv<\/code><\/pre>\n\n\n\n
Esse comando cria um ambiente virtual e automaticamente cria tamb\u00e9m um arquivo chamado .venv<\/strong>. no diret\u00f3rio corrente.<\/p>\n\n\n\n
Ativa\u00e7\u00e3o do ambiente virtual<\/h6>\n\n\n\n
Agora, fazemos a ativa\u00e7\u00e3o deste ambiente, usando o comando:<\/p>\n\n\n\n
.venv\/Scripts\/Activate.ps1<\/code><\/pre>\n\n\n\n
Obs.: Toda vez que voc\u00ea fechar o seu editor de c\u00f3digo e voltar a trabalhar no seu projeto voc\u00ea vai precisar fazer novamente a ativa\u00e7\u00e3o do ambiente virtual, usando o mesmo comando.<\/em><\/p>\n\n\n\n
Cria\u00e7\u00e3o do arquivo principal (.py)<\/h6>\n\n\n\n
Dentro desta pasta, vamos criar um arquivo novo com a extens\u00e3o .py, que significa python.<\/p>\n\n\n\n
Podemos chamar de main01.py<\/strong>.<\/p>\n\n\n\n
Instalando Streamlit<\/h6>\n\n\n\n
Para trabalharmos com o streamlit, vamos precisar ter baixado o pacote streamlit, que pode ser feito atrav\u00e9s do comando abaixo no terminal do seu computador.<\/p>\n\n\n\n
pip install streamlit<\/code><\/pre>\n\n\n\n
Instalando LangChain<\/h6>\n\n\n\n
Caso ainda n\u00e3o tenha instalado ainda pode instalar tamb\u00e9m o pacote langchain, atrav\u00e9s do comando abaixo:<\/p>\n\n\n\n
pip install langchain<\/code><\/pre>\n\n\n\n
Agora, que temos tudo que precisamos, vamos come\u00e7ar a criar a nossa interface usando o streamlit.<\/p>\n\n\n\n
Em nosso arquivo main01.py, vamos inicialmente, fazer a importa\u00e7\u00e3o de algumas classes que vamos precisar na constru\u00e7\u00e3o da nossa interface.<\/p>\n\n\n\n
Importando streamlit<\/h6>\n\n\n\n
Primeiramente, vamos importar o pacote streamlit para a nossa aplica\u00e7\u00e3o, usando o comando abaixo:<\/p>\n\n\n\n
import streamlit as st<\/code><\/pre>\n\n\n\n
Title<\/h6>\n\n\n\n
Agora, podemos iniciar a constru\u00e7\u00e3o da interface do nosso projeto. Para isso, vamos usar o comando title para criar o t\u00edtulo de nossa interface.<\/p>\n\n\n\n
st.title(\u201cGerador de Nomes de Animais\u201d)<\/code><\/pre>\n\n\n\n
Esse comando vai criar o t\u00edtulo de nossa p\u00e1gina web.<\/p>\n\n\n\n
Observe o st<\/strong> antes do title. Esse st<\/strong> \u00e9 a entidade onde v\u00e3o est\u00e1 todos os m\u00e9todos do streamlit na nossa aplica\u00e7\u00e3o<\/strong>, j\u00e1 que n\u00f3s ao importarmos o streamlit chamamos-o de st( as st)<\/strong>. Ent\u00e3o, toda vez que formos usarmos algum m\u00e9todo do pacote streamlit vamos fazer da seguinte forma: st.nome_do_m\u00e9todo()<\/strong>.<\/p>\n\n\n\n
Execu\u00e7\u00e3o<\/h6>\n\n\n\n
N\u00e3o menos importante, para voc\u00ea executar o streamlit script, voc\u00ea digita o seguinte comando no seu termina:<\/p>\n\n\n\n
streamlit run main01.py<\/code><\/pre>\n\n\n\n
Esse comando vai abrir o seu navegador no localhost server com o seu script.<\/p>\n\n\n\n
Como at\u00e9 o momento s\u00f3 adicionamos na nossa interface o t\u00edtulo Gerador de Nomes de Animais<\/strong> \u00e9 s\u00f3 isso que vai aparecer na nossa p\u00e1gina.<\/p>\n\n\n\n
Quando finalizada a nossa p\u00e1gina web vai ficar com essa apar\u00eancia:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Write<\/h6>\n\n\n\n
Depois do t\u00edtulo, vamos criar uma linha de texto usando o comando write:<\/p>\n\n\n\n
st.write(\"Aqui voc\u00ea pode obter ideias para dar nome ao seu novo pet\")<\/code><\/pre>\n\n\n\n
Voc\u00ea pode verificar o resultado na imagem acima.<\/p>\n\n\n\n
Selectbox<\/h6>\n\n\n\n
Agora, vamos adicionar o seletor(selectbox) para o tipo de animais, usando o seguinte comando:<\/p>\n\n\n\n
tipo_de_pet = st.selectbox<\/strong>(\n    label<\/strong> = \"Selecione o tipo de animal que voc\u00ea quer dar um nome:\",\n    options<\/strong> = (\"Cachorro\", \"Gato\", \"Hamster\", \"Cavalo\", \"P\u00e1ssaro\", \"Outros\")\n)<\/code><\/pre>\n\n\n\n
Observe na imagem acima na seta st.selectbox, para ver como ficou renderizado esse c\u00f3digo no navegador de internet.<\/p>\n\n\n\n
Neste, seletor o usu\u00e1rio vai poder escolher o tipo de animal ele tem de uma lista de animais no formato de menu drop down.<\/p>\n\n\n\n
Multiselect<\/h6>\n\n\n\n
O pr\u00f3ximo objeto da interface \u00e9 o st.multiselect<\/strong>. Esse objeto permite que o usu\u00e1rio escolha uma cor ou v\u00e1rias cores para descrever a cor do seu animal.<\/p>\n\n\n\n
O esse objeto,st.multiselect, permite a sele\u00e7\u00e3o de v\u00e1rias op\u00e7\u00f5es.<\/p>\n\n\n\n
A sintaxe dele \u00e9 da seguinte forma:<\/p>\n\n\n\n
cor = st.multiselect<\/strong>(\n    label<\/strong> = \"Qual(ais) a(s) cor(es) do seu animal?\",\n    options<\/strong> = (\"Preto\", \"Branco\", \"Marrom\", \"Dourado\", \"Cinza\", \"Creme\",            \"Amarelo\", \"Vermelho\", \"Azul\",\"Chocolate\", \"Prateado\", \"Fulvo\", \"Areia\", \"Rajado\", \"Tigrado\", \"Malhado\", \"Merle\", \"Marrom-avermelhado\", \"Tricolor\", \"Preto e Castanho\")<\/code><\/pre>\n\n\n\n
O label \u00e9 o texto que vai em cima do seletor e options s\u00e3o todas as op\u00e7\u00f5es de cor para descrever o animal.<\/p>\n\n\n\n
Slider<\/h6>\n\n\n\n
O pr\u00f3ximo objeto \u00e9 o slider que consiste de uma barra onde o usu\u00e1rio vai poder escolher a idade do seu animal.<\/p>\n\n\n\n
O c\u00f3digo desse slider \u00e9 o seguinte:<\/p>\n\n\n\n
idade = st.slider<\/strong>(\n    label<\/strong> = \"Qual \u00e9 a idade do seu animal em meses?\",\n    min_value<\/strong> = 0,\n    max_value <\/strong>= 12,\n    value<\/strong> = 0, # esse \u00e9 o defualt value\n    step<\/strong> = 1\n)<\/code><\/pre>\n\n\n\n
Esses 5 objetos s\u00e3o os que vamos precisar no nosso projeto inicialmente. Naturalmente, existem muito mais objetos no streamlit mas vamos explor\u00e1-los aos poucos, para que seja mais f\u00e1cil o processo de aprendizagem.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00f3rio \ufeffPara iniciarmos, no nosso editor de c\u00f3digo(Microsoft Visual Code Studio) vamos criar uma pasta\/diret\u00f3rio para o nosso projeto.  Criar um ambiente virtual Depois de […]<\/p>\n","protected":false},"author":1,"featured_media":569,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,16,53,17],"tags":[],"class_list":["post-554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ferramentas-ia","category-how-to","category-linguagens-de-programacao"],"blocksy_meta":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=554"}],"version-history":[{"count":9,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"predecessor-version":[{"id":579,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/posts\/554\/revisions\/579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/media\/569"}],"wp:attachment":[{"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portal7ia.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}