Creating a Machine Learning Application with Streamlit

Originally published on Medium.

In my previous article, I explained how to train a deep neural network when the data doesn’t fit into memory. In this article, I take that neural network and create a simple website that serves predictions using the python package Streamlit.

So what is Streamlit? Essentially it is an easy way to build a web application while only using python. I don’t have a web dev background so not having to learn all that tech saves me thousands of hours. I have used Flask before, but Streamlit comes with more features and is tailored to building Data/ML easily.

I first built a (private) GitHub repo that will contain all the code necessary to run the site.

In my main file, I import the necessary packages and set the title of the page (think browser tab name) to something that makes sense.

import streamlit as st
import pandas as pd
import numpy as np
from tensorflow import keras
import pickle
import os

st.set_page_config(page_title=‘Draft App’)

And then I initialize the session state. This is a special Streamlit object that carries over information when the Streamlit app changes. In my case, I use it to keep track of the current card pool, which card is currently being selected (I want the model to run on perspective card picks), and the model’s overall prediction for all picked cards.

# Initialize session state
def init_session_state():
    if ‘selected_items’ not in st.session_state:
        #keeps track of whatever card is being hovered
        st.session_state.selected_items = []
    if ‘card_pool’ not in st.session_state:
        #init pool creates an empty dataframe
        st.session_state.card_pool = init_pool()
    if ‘total_prediction’ not in st.session_state:
        #runs the prediction for the current card_pool.
        #defaults to 50% chance of winning
        st.session_state.total_prediction = np.array([[0.50]])

You can see this in my helper function. Evaluate pick sees what would happen if a pick was made. Make pick actually updates the chosen card pool.

def evaluate_pick(card_name, model, pool):
  pool_copy = pool.copy()
  pool_copy[“pool_” + card_name] = pool_copy[“pool_” + card_name]+1
  return model.predict(pool_copy.values.reshape(1, -1))

def make_pick(card_name, model, pool):
  pool[“pool_” + card_name] = pool[“pool_” + card_name]+1
  return model.predict(pool.values.reshape(1, -1))

Finally, the app itself:

# Streamlit app
def main():    
    filepath_parent = os.getcwd()
    MODEL_PATH = os.path.join(filepath_parent,“MTGModel.keras”)
    model = keras.models.load_model(MODEL_PATH)

    # Initialize session state
    init_session_state()
    st.title(‘MTG Draft Helper’)
    # Add a select box
    selected_item = st.selectbox(‘Evaluate a card’, cards, index=cards.index(“Island”))
    
    # Run prediction when an item is selected
    if selected_item:
        selected_prediction = evaluate_pick(selected_item, model, st.session_state.card_pool, card_df)
        #st.write(st.session_state.total_prediction.item())
        #Some fancy formatting
        st.metric(‘Pick Evaluation:’, f”{100selected_prediction.item():2.{2}f}%”, delta=f”{100(selected_prediction.item()-st.session_state.total_prediction.item()):2.{2}f}%”)
        
    # Add a button to add the selected item to the list
    if st.button(‘Pick this card’):
        st.session_state.selected_items.append(selected_item)
        st.session_state.total_prediction = make_pick(selected_item, model, st.session_state.card_pool, card_df) 
    
    st.metric(‘Complete Draft Evaluation:’, f”{100*st.session_state.total_prediction.item():2.{2}f}%” )
    st.write(‘Selected Items:’, st.session_state.selected_items)

    if st.button(‘Reset Draft’):
        st.session_state.selected_items = []    
        st.session_state.card_pool = init_pool()    
        st.session_state.total_prediction = np.array([[0.50]])

if name == ‘main’:
    main()

Just to explain some of the above code:

st.selectbox — shows all possible cards and has nice features with autofill
st.write — just plain text
st.button — a button
st.metric — is a special type of writing that shows the difference between a previous state

You can find my Streamlit app hosted here. It uses Streamlit’s community cloud which allows you to host a small app for free (a pretty cool feature if you ask me).