initial commit

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.keras filter=lfs diff=lfs merge=lfs -text

README.md

@@ -10,4 +10,46 @@ pinned: false
 license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MNIST Streamlit
+
+This is a simple Streamlit app that demonstrates the differences between neural nets trained on the MNIST
+
+There are three models saved locally available in the `models` directory:
+
+- `autokeras_model.keras`
+- `mnist_12.onnx`
+- `mnist_model.keras`
+
+The `mnist_model.keras` is a simple 300x300 neural net trained over 35 epochs.
+
+The `autokeras_model.keras` is a more complex model generated by running the [Autokeras image classifier class](https://autokeras.com/image_classifier/).
+
+Meanwhile, the `mnist_12.onnx` model is a pre-trained model from theOnnx model zoo. Onnx provides detailed information about how the model was created [in the repository on GitHub](https://github.com/onnx/models/blob/main/validated/vision/classification/mnist/README.md).
+
+The application allows you to:
+
+1. Select which model you want to use for predicting a handwritten digit
+2. Select your stroke width of the digit you draw
+3. Draw a specific digit within a canvas
+
+Once you draw a digit, the model will be loaded, asked to make a prediction on your input, and provide:
+
+- The name of the model used to make the prediction
+- A prediction (the top prediction from it's probability distribution)
+- The time the model took to predict
+- The time it took to load the model
+- The probability distribution of predictions as a bar chart and table
+
+## Usage
+
+To run the Streamlit app locally using Poetry, clone the repository, `cd` into the created directory, and run the following commands:
+
+- `poetry shell`
+- `poetry install`
+- `streamlit run app.py`
+
+If you don't have Poetry installed, never fear! There is a `requirements.txt` file that you may use to install the necessary packages with Pip. Simply create a new virtual environment and run:
+
+```shell
+pip install -r requirements.txt
+```

app.py

@@ -0,0 +1,169 @@
+"""
+A small Streamlit app that loads a Keras model trained on the MNIST dataset and allows the user to draw a digit on a canvas and get a predicted digit from the model.
+"""
+
+import streamlit as st
+from PIL import Image
+from streamlit_drawable_canvas import st_canvas
+import os
+import numpy as np
+from keras import models
+import keras.datasets.mnist as mnist
+import matplotlib.pyplot as plt
+import pandas as pd
+import time
+import onnx
+import onnxruntime
+from scipy.special import softmax
+
+
+@st.cache_resource
+def load_picture():
+    """
+    Loads the first 9 images from the mnist dataset and add them to a plot
+    to be displayed in streamlit.
+    """
+    # load the mnist dataset
+    (x_train, y_train), (x_test, y_test) = mnist.load_data()
+    # plot the first 9 images
+    for i in range(9):
+        plt.subplot(330 + 1 + i)
+        image = x_train[i] / 255.0
+        plt.imshow(image, cmap=plt.get_cmap("gray"))
+
+    # Save the plot as a png file and show it in streamlit
+    # This is commented out for not because the plot was created and saved in the img directory during the initial run of the app locally
+    # plt.savefig("img/show.png")
+    st.image("img/show.png", width=250, caption="First 9 images from the MNIST dataset")
+
+
+def keras_prediction(final, model_path):
+    load_time = time.time()
+    model = models.load_model(
+        os.path.abspath(os.path.join(os.path.dirname(__file__), model_path))
+    )
+    after_load_curr = time.time()
+    curr_time = time.time()
+    prediction = model.predict(final[None, ...])
+    after_time = time.time()
+    return prediction, after_time - curr_time, after_load_curr - load_time
+
+
+def onnx_prediction(final, model_path):
+    im_np = np.expand_dims(final, axis=0)  # Add batch dimension
+    im_np = np.expand_dims(im_np, axis=0)  # Add channel dimension
+    im_np = im_np.astype("float32")
+    load_curr = time.time()
+    session = onnxruntime.InferenceSession(model_path, None)
+    input_name = session.get_inputs()[0].name
+    output_name = session.get_outputs()[0].name
+    after_load_curr = time.time()
+
+    curr_time = time.time()
+    result = session.run([output_name], {input_name: im_np})
+    prediction = softmax(np.array(result).squeeze(), axis=0)
+    after_time = time.time()
+    return prediction, after_time - curr_time, after_load_curr - load_curr
+
+
+def main():
+    """
+    The main function/primary entry point of the app
+    """
+    # write the title of the page as MNIST Digit Recognizer
+    st.title("MNIST Digit Recognizer")
+
+    col1, col2 = st.columns([0.8, 0.2], gap="small")
+    with col1:
+        st.markdown(
+            """
+            This Streamlit app loads a Keras neural network trained on the MNIST dataset to predict handwritten digits. Draw a digit in the canvas below and see the model's prediction. You can: 
+            - Change the stroke width of the digit using the slider
+            - Choose what model you use for predictions
+                - Onnx: The mnist-12 Onnx model from <a href="https://xethub.com/XetHub/onnx-models/src/branch/main/vision/classification/mnist">Onnx's pre-trained MNIST models</a>
+                - Autokeras: A model generated using the <a href="https://autokeras.com/image_classifier/">Autokeras image classifier class</a>
+                - Basic: A simple two layer nueral net where each layer has 300 nodes
+            
+            Like any machine learning model, this model is a function of the data it was fed during training. As you can see in the picture, the numbers in the images have a specific shape, location, and size. By playing around with the stroke width and where you draw the digit, you can see how the model's prediction changes.""",
+            unsafe_allow_html=True,
+        )
+    with col2:
+        # Load the first 9 images from the MNIST dataset and show them
+        load_picture()
+
+    col3, col4 = st.columns(2, gap="small")
+
+    with col4:
+        # Stroke width slider to change the width of the canvas stroke
+        # Starts at 10 because that's reasonably close to the width of the MNIST digits
+        stroke_width = st.slider("Stroke width: ", 1, 25, 10)
+        model_choice = st.selectbox(
+            "Choose what model to use for predictions:", ("Onnx", "Autokeras", "Basic")
+        )
+        if "Basic" in model_choice:
+            model_path = "models/mnist_model.keras"
+
+        if "Auto" in model_choice:
+            model_path = "models/autokeras_model.keras"
+
+        if "Onnx" in model_choice:
+            model_path = "models/mnist_12.onnx"
+
+    with col3:
+        # Create a canvas component
+        canvas_result = st_canvas(
+            stroke_width=stroke_width,
+            stroke_color="#FFF",
+            fill_color="#000",
+            background_color="#000",
+            background_image=None,
+            update_streamlit=True,
+            height=200,
+            width=200,
+            drawing_mode="freedraw",
+            point_display_radius=0,
+            key="canvas",
+        )
+
+    if canvas_result is not None and canvas_result.image_data is not None:
+
+        # Get the image data, convert it to grayscale, and resize it to 28x28 (the same size as the MNIST dataset images)
+        img_data = canvas_result.image_data
+        im = Image.fromarray(img_data.astype("uint8")).convert("L")
+        im = im.resize((28, 28))
+
+        # Convert the image to a numpy array and normalize the values
+        final = np.array(im, dtype=np.float32) / 255.0
+
+        # if final is not all zeros, run the prediction
+        if not np.all(final == 0):
+
+            if model_choice != "Onnx":
+                prediction, pred_time, load_time = keras_prediction(final, model_path)
+            else:
+                prediction, pred_time, load_time = onnx_prediction(final, model_path)
+
+            # print the prediction
+            st.header(f"Using model: {model_choice}")
+            st.write(f"Prediction: {np.argmax(prediction)}")
+            st.write(f"Load time (in ms): {(load_time) * 1000:.2f}")
+            st.write(f"Prediction time (in ms): {(pred_time) * 1000:.2f}")
+
+            # Create a 2 column dataframe with one column as the digits and the other as the probability
+            data = pd.DataFrame(
+                {"Digit": list(range(10)), "Probability": np.ravel(prediction)}
+            )
+
+            col1, col2 = st.columns([0.8, 0.2], gap="small")
+            # create a bar chart to show the predictions
+            with col1:
+                st.bar_chart(data, x="Digit", y="Probability", height=500)
+
+            # show the probability distribution numerically
+            with col2:
+                data["Probability"] = data["Probability"].apply(lambda x: f"{x:.2%}")
+                st.dataframe(data, hide_index=True)
+
+
+if __name__ == "__main__":
+    main()

models/autokeras_model.keras

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52ade8cfa53511a4c1bb4718d6aae0c9997537b6aa41cbb0561e9a2ba8776379
+size 1374323

models/mnist_12.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c688690f8bacf667d4c2074af5ad0646ca328d7ab03eccf944a65b320171bdd
+size 26143

models/mnist_model.keras

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca930b40ac309a75ed3ccea89c9dad0b54e957de648f052e87f5c5799173923f
+size 1333377

pyproject.toml

@@ -0,0 +1,25 @@
+[tool.poetry]
+name = "mnist-streamlit"
+version = "0.1.0"
+description = "A small Streamlit project demoing a Keras-backed neural network trained on the MNIST dataset."
+authors = ["jsulz <[email protected]>"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.12"
+streamlit = "^1.35.0"
+keras = "^3.3.3"
+tensorflow = "^2.16.1"
+streamlit-drawable-canvas = "^0.9.3"
+pillow = "^10.3.0"
+numpy = "^1.26.4"
+matplotlib = "^3.9.0"
+onnx = "^1.16.1"
+onnxruntime = "^1.18.1"
+scipy = "1.13.0"
+autokeras = "^2.0.0"
+
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

requirements.txt

@@ -0,0 +1,88 @@
+absl-py==2.1.0 
+altair==5.3.0 
+astunparse==1.6.3 
+attrs==23.2.0 
+autokeras==2.0.0 
+blinker==1.8.2 
+cachetools==5.3.3 
+certifi==2024.6.2 
+charset-normalizer==3.3.2 
+click==8.1.7 
+colorama==0.4.6  
+coloredlogs==15.0.1 
+contourpy==1.2.1 
+cycler==0.12.1 
+dm-tree==0.1.8 
+flatbuffers==24.3.25 
+fonttools==4.53.0 
+gast==0.5.4 
+gitdb==4.0.11 
+gitpython==3.1.43 
+google-pasta==0.2.0 
+grpcio==1.64.1 
+h5py==3.11.0 
+humanfriendly==10.0 
+idna==3.7 
+jinja2==3.1.4 
+jsonschema-specifications==2023.12.1 
+jsonschema==4.22.0 
+kagglehub==0.2.9 
+keras-nlp==0.14.3 
+keras-tuner==1.4.7 
+keras==3.3.3 
+kiwisolver==1.4.5 
+kt-legacy==1.0.5 
+libclang==18.1.1 
+markdown-it-py==3.0.0 
+markdown==3.6 
+markupsafe==2.1.5 
+matplotlib==3.9.0 
+mdurl==0.1.2 
+ml-dtypes==0.3.2 
+mpmath==1.3.0 
+namex==0.0.8 
+numpy==1.26.4 
+onnx==1.16.1 
+onnxruntime==1.18.1 
+opt-einsum==3.3.0 
+optree==0.11.0 
+packaging==24.0 
+pandas==2.2.2 
+pillow==10.3.0 
+protobuf==4.25.3 
+pyarrow==16.1.0 
+pydeck==0.9.1 
+pygments==2.18.0 
+pyparsing==3.1.2 
+pyreadline3==3.4.1 
+python-dateutil==2.9.0.post0 
+pytz==2024.1 
+referencing==0.35.1 
+regex==2024.7.24 
+requests==2.32.3 
+rich==13.7.1 
+rpds-py==0.18.1 
+scipy==1.13.0 
+setuptools==70.0.0 
+six==1.16.0 
+smmap==5.0.1 
+streamlit-drawable-canvas==0.9.3 
+streamlit==1.35.0 
+sympy==1.12.1 
+tenacity==8.3.0 
+tensorboard-data-server==0.7.2 
+tensorboard==2.16.2 
+tensorflow-text==2.16.1 
+tensorflow==2.16.1 
+termcolor==2.4.0 
+toml==0.10.2 
+toolz==0.12.1 
+tornado==6.4.1 
+tqdm==4.66.5 
+typing-extensions==4.12.2 
+tzdata==2024.1 
+urllib3==2.2.1 
+watchdog==4.0.1 
+werkzeug==3.0.3 
+wheel==0.43.0 
+wrapt==1.16.0