Full-Stack AI: Building a UI for Your Latest AI Project in No Time at All | by Posey | Towards Data Science

Let’s see how we can build a Convolutional Neural Network into a user-friendly application with a clean UI. How can we integrate both training and predictions into an easy to use interface? More importantly, how can we do this without spending countless hours on technology we may not be great at. We’re Data Scientists, Machine Learning Engineers, and analysts, not Front-End Developers. And if you ARE a Front-End Dev, you may still be interested to see how streamlined this approach is.
Our stated objective is to identify the type of animal from various pictures of different animals. Let’s see how we can do this.
First things first, we need to find some data. For the purposes of this application we used https://www.kaggle.com/alessiocorrado99/animals10
This is a 1.2 GB dataset with thousands of images across 10 classes of animals.
Since we’re using Keras’ ImageGenerator for this, we need to split our dataset accordingly. First, split the data into Training and Test folders. In each folder your labels will be the names of each folder as the class name. For example, all the pictures of cats should be in a folder named cat, horse in a folder named horse, etc.
Next, we start model building. After iterating on parameters to see what worked best, here’s where the CNN’s parameters landed:
You can find the rest of the CNN’s code in the Github link at the end of the article.
This is where things get interesting. How can we integrate both training and predictions into an easy to use interface? More importantly, how can we do this without spending countless hours on technology we may not be great at. We’re Data Scientists, Machine Learning Engineers, and analysts, not Front-End Developers.
The answer is Streamlit. Streamlit works with all of your favorite Python-based libraries. You can easily integrate your Machine Learning models with a clean UI. You can then easily deploy the application from Streamlit onto your platform of choice: AWS, Azure, etc...
Let’s walk through it step by step.
First things first, install Streamlit.
pip install streamlit
Now, let’s import the necessary libraries and get this show on the road.
The first thing we did is import our libraries and construct a sidebar for our otherwise empty application. The above code will produce this:
Next, let’s add a selectbox for picking images from a folder local to the project...
from os import listdirfrom os.path import isfile, joinonlyfiles = [f for f in listdir("C:/Users/Luke/Desktop/StreamlitDemo/Data/Test/") if isfile(join("C:/Users/Luke/Desktop/StreamlitDemo/Data/Test/", f))]imageselect = st.sidebar.selectbox("Pick an image.", onlyfiles)
From here, we can use that selected image to display a picture on the screen...
Now that we’ve got our image on the screen, let’s incorporate our Neural Network...
In Training.py we’ve built our neural network and can use those functions in our Demo.py (main Streamlit file) to add training and predicting power to the application.
First, the training portion...
import Training st.sidebar.title("Train Neural Network")if st.sidebar.button('Train CNN'):      Training.train()
Now, let’s add the prediction portion...
I hope this inspired you to build your own project with the above stack. I think it’s a really great tool for us data people who don’t want to drown in HTML or some modern tech stack. Let’s continue the convo in the comments or feel free to tweet at me.
For the full code to this project:
github.com
Let’s continue the conversation on Twitter.
To support my writing and get full access to all articles on Medium, visit https://posey.medium.com/membership