Building a Simple Web Interface for ML Models with Streamlit

Previously in this course, we covered creating an inference script to turn your model into a reusable function. Now, we’re taking that script and wrapping it in a web interface so that others can actually use your model without needing to touch Python code.

In the world of machine learning, "deployment" often feels like a massive hurdle involving cloud infrastructure and complex APIs. However, for internal tools and rapid prototyping, you don't need a full-stack web application. You need a way to serve your model quickly. That’s where Streamlit shines.

Why Streamlit for ML Deployment?

Streamlit is a Python library that turns data scripts into shareable web apps in minutes. Unlike traditional web frameworks like Flask or FastAPI, which require you to write HTML, CSS, and JavaScript, Streamlit lets you define your UI components using pure Python.

For an ML engineer, this is a productivity superpower. It allows you to focus on the model and the input validation rather than the intricacies of HTTP requests.

Building Your First Prediction UI

To get started, ensure you have Streamlit installed in your environment: pip install streamlit.

We will build a simple interface that loads our saved model (from our exporting trained models lesson) and takes user input to generate a prediction.

The Worked Example

Create a file named app.py. This script will load the model once and use Streamlit’s widgets to capture user input.

PYTHON
import streamlit as st
import joblib
import pandas as pd

# 1. Load the model and pipeline
model = joblib.load(CE9178">'my_model.pkl')

st.title("Project Prediction Interface")
st.write("Enter the features below to get a prediction.")

# 2. Define input widgets
# Match these to the features your model expects
age = st.number_input("Age", min_value=0, max_value=100, value=30)
income = st.number_input("Annual Income", min_value=0, value=50000)
category = st.selectbox("Category", ["Option A", "Option B", "Option C"])

# 3. Predict button
if st.button("Predict"):
    # Prepare the input as a DataFrame
    input_data = pd.DataFrame({
        CE9178">'age': [age],
        CE9178">'income': [income],
        CE9178">'category': [category]
    })
    
    # Generate prediction
    prediction = model.predict(input_data)
    
    # Display result
    st.success(f"The predicted value is: {prediction[0]}")

To run this, open your terminal and execute: streamlit run app.py

Streamlit will automatically launch a local web server (usually at http://localhost:8501) and open it in your browser.

Hands-on Exercise

1. Modify the UI: Add a slider for one of your numerical features instead of a number_input.
2. Add Validation: Add a check to ensure the income input is not negative before calling model.predict().
3. Display Stats: Use st.dataframe() to show the user the data format the model is currently processing.

Common Pitfalls

• Caching Issues: Streamlit re-runs the entire script from top to bottom every time a user interacts with a widget. If your model takes 10 seconds to load, use @st.cache_resource to keep the model in memory.
• Data Type Mismatches: If your model expects a specific column to be a float, but your widget returns an int, your model might throw an error. Always cast your input data explicitly before calling predict().
• Environment Drift: Ensure the environment running your Streamlit app has the exact same versions of scikit-learn, pandas, and numpy as the environment where you trained the model. Mismatched versions are the silent killers of production models.

Recap

We’ve successfully moved from a raw inference script to a functional web interface. By using Streamlit, you’ve provided a pathway for non-technical stakeholders to interact with your work. Remember: the best model in the world provides zero value if no one can use it.

Up next: We will learn how to draft the documentation for your project, ensuring your model’s assumptions and limitations are clear to anyone who uses it.