changed order of the layout and added more descriptions

app.py

@@ -9,7 +9,8 @@ import streamlit as st
 # st.set_page_config(layout="wide")
 
 st.write('# MNIST Digit Recognition')
-st.write('## Using a CNN `Keras` model')
+st.write('## Using trained CNN `Keras` model')
+st.write('To view how this model was trained go to the `Files and Versions` tab and download the `Week1.ipynb` notebook')
 
 # Import Pre-trained Model
 model = tf.keras.models.load_model('mnist.h5')
@@ -34,16 +35,9 @@ canvas_result = st_canvas(
 )
 
 if canvas_result.image_data is not None:
-    st.write('### Resized Image')
-    st.write("The image needs to be resized, because it can only input 28x28 images")
-    # st.image(canvas_result.image_data)
-    # st.write(type(canvas_result.image_data))
-    # st.write(canvas_result.image_data.shape)
-    # st.write(canvas_result.image_data)
+
     im = ImageOps.grayscale(Image.fromarray(canvas_result.image_data.astype(
         'uint8'), mode="RGBA")).resize((28, 28))
-    # img_data = im.
-    st.image(im, width=28*9)
 
     data = img_to_array(im)
     data = data / 255
@@ -61,3 +55,7 @@ if canvas_result.image_data is not None:
     plt.title('Drawing Prediction')
     plt.ylim(0, 1)
     st.write(result)
+
+    st.write('### Resized Image')
+    st.write("The image needs to be resized, because it can only input 28x28 images")
+    st.image(im, width=28*9)