Conectando GitHub e Streamlit

Através da união de ferramentas como GitHub e Streamlit é possível criar um aplicativo que fique na nuvem, sem que precise gerar um link toda vez, de forma muito simples e prática.

01.Criando uma conta no Streamlit

Para criar uma conta no Streamlit basta seguir o paasso a passo:

01.Clicar neste link: https://share.streamlit.io/signup

02.Clicar em “Continue with GitHub”

_images/continue_githubb.png

03.Clicar em Authrorize Streamlit

_images/authorize_streamlit.png

04.Escolha o plano Community

_images/community.png

05.Insira seus dados pessoais e clique em Continue

_images/continue_dados.png

06.Pronto! Você já pode lançar seus aplicativos agora

_images/sign_in_done.png

02.Criando um aplicativo de classificação com Streamlit no GitHub

02.a.Criando o repositório no GitHub

Antes de fazermos o deploy (subir para nuvem) do aplicativo vamos primeiro criá-lo no GitHub.

Para isso siga o passo a passo abaixo:

1.Entre na sua conta do GitHub e vá em Repositories e clique em New

_images/new_repository.png

2.Coloque o nome desejado do repositório e deixe selecionado como Public (caso contrário não é possível realizar o deploy), adicione um README file se desejado e clique em Create repository

_images/create_repository.png

Pronto, seu repositório está criado.

02.b.Criando o arquivo requirements.txt

Este arquivo chamado requirements.txt é o arquivo onde vamos colocar todas as bibliotecas que iremos utilizar em nosso código

Que em nosso caso são:

1numpy
2pillow
3tensorflow
4keras
5streamlit

Para isso dentro de seu repositório clique em Add file e depois em Create new file

_images/create_new_file.png

Insira o nome requirements.txt , coloque as bibliotecas desejadas e depois clique em Commit new file

_images/commit_new_file.png

Pronto, seu arquivo requimerents.txt já está criado com todas as bibliotecas necessárias.

02.c.Fazendo upload do modelo de classificação de imagem

Em nosso exemplo estamos desenvolvendo um aplicativo de classificação de imagem, para isso iremos usar o keras_model.h5 e o labels treinado no Teachable Machine

Para realizar o upload desses arquivos vá em seu repositório do streamlit, clique me Add file e depois em Upload files

_images/upload_files.png

Selecione o arquivo keras_model.h5 e o labels e arraste para a área de Drag files here to add them to your repository

_images/drag_files.png

Espere o upload dos arquivos e depois selecione Commit changes

_images/upload_files_done.png

Pronto, agora já temos em nosso repositório o modelo treinado.

02.d.Criar o arquivo para classificar imagens

Para criarmos o arquivo classificador de imagens clique em Add file e depois em Create new file

_images/create_new_file.png

Insira o nome arquivo_classificador_de_imagem.py e coloque o código abaixo:

 1import tensorflow
 2from keras.models import load_model
 3from PIL import Image, ImageOps
 4import numpy as np
 5
 6def funcao_classificar_imagem(img, keras_model):
 7
 8  # Disable scientific notation for clarity
 9  np.set_printoptions(suppress=True)
10
11  # Load the model
12  model = load_model('keras_model.h5')
13
14  # Create the array of the right shape to feed into the keras model
15  # The 'length' or number of images you can put into the array is
16  # determined by the first position in the shape tuple, in this case 1.
17  data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
18
19  # Replace this with the path to your image
20  image = img
21
22  #resize the image to a 224x224 with the same strategy as in TM2:
23  #resizing the image to be at least 224x224 and then cropping from the center
24  size = (224, 224)
25  image = ImageOps.fit(image, size, Image.ANTIALIAS)
26
27  #turn the image into a numpy array
28  image_array = np.asarray(image)
29
30  # display the resized image
31  image.show()
32
33  # Normalize the image
34  normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
35
36  # Load the image into the array
37  data[0] = normalized_image_array
38
39  # run the inference
40  prediction = model.predict(data)
41  print(prediction)
42
43  return np.argmax(prediction)

Depois de inserir o código no arquivo clique Commit new file

_images/commit_file_arquivo_imagem.png

Pronto, com isso já temos o arquivo necessário para classificar nossas imagens.

02.e.Criar o arquivo para o aplicativo

Este é o arquivo que de fato o Streamlit irá ler e rodar as funções, será o nosso front-end responsável pela aparência e ferramentas disponíveis para o usuário final.

Até agora estávamos preparando o back-end responsável por dar toda a estrura que precisávamos para rodar nosso aplicativo.

Para criarmos o arquivo para o aplicativo clique em Add file e depois em Create new file

_images/create_new_file.png

Insira o nome arquivo_aplicativo_de_classificacao.py e coloque o código abaixo:

 1from arquivo_classificador_de_imagem import funcao_classificar_imagem
 2import streamlit as st
 3from PIL import Image
 4
 5# Criar os elementos que compõe o aplicativo.
 6# TÍTULO DO SITE.
 7st.title("Classificador de milho.")
 8
 9# BOTÃO PARA FAZER UPLOAD DA IMAGEM A SER CLASSIFICADA.
10uploaded_file = st.file_uploader("Escolha um arquivo", type="jpg")
11
12# CLASSIFICAÇÃO DA IMAGEM.
13if uploaded_file is not None:
14
15    # ABRIR A IMAGEM CARREGADA.
16    image = Image.open(uploaded_file)
17
18    # MOSTRAR A IMAGEM.
19    st.image(image, caption='', use_column_width=True)
20
21    # TEXTO INDICANDO QUE A IMAGEM ESTÁ SENDO CLASSIFICADA.
22    st.write("Classificando...")
23
24    # CHAMAR A FUNÇÃO DE CLASSIFICAÇÃO DE IMAGEM
25    # E ARMAZENAR O RESULTADO NA VARIÁVEL LABEL.
26    label = funcao_classificar_imagem(image, 'keras_model.h5')
27
28    # CONDICIONAL PARA IDENTIFICAR A CLASSE DA IMAGEM.
29    if label == 1:
30
31        # INSIRA O NOME DA PRIMEIRA CLASSE.
32        st.write("Milho bom.")
33
34    else:
35
36      # INSIRA O NOME DA SEGUNDA CLASSE.
37        st.write("Milho ruim.")

Warning

Não esqueça de realizar as alterações necessárias como o título do aplicativo, nome das classes, etc.

Depois de inserir o código no arquivo e realizar as alterações desejadas clique Commit new file

_images/commit_file_arquivo_aplicativo.png

Pronto, com isso já temos o arquivo necessário para rodar o aplicativo.

03.Fazendo deploy do app no Streamlit

Agora que já temos todo nosso repositório criado no GitHub iremos fazer o deploy do aplicativo via Streamlit.

Para isso:

01.Vá em sua conta do Streamlit clique em New app

_images/new_app.png

02.Clique me Authorize streamlit

_images/authorize_streamlit_2.png

03.Na parte de Repository selecione o repositório do seu aplicativo

_images/repository.png

04.Em Branch selecione qual versão deseja, em nosso caso main

_images/branch1.png

05.Em Main file path selecione onde está o arquivo que o streamlit irá ler, o nosso front-end, em nosso caso é o arquivo_aplicativo_de_classificacao.py

_images/main_path_file.png

06.Clique em Deploy!

_images/deploy.png

07.Espere enquanto seu aplicativo “está no forno” (pode levar alguns minutos)

_images/oven_app.png

Pronto!! Seu aplicativo já está pronto e inclusive este link é compartilhavel e não cai, funciona 24/7!

https://share.streamlit.io/orbeai/streamlit_teachable/main/arquivo_aplicativo_de_classificacao.py

_images/app.png