Update app.py

app.py

@@ -81,36 +81,43 @@ drawing_mode = st.sidebar.selectbox(
     "Drawing tool:", ("freedraw", "line", "rect", "circle", "transform", "polygon")
 )
 realtime_update = st.sidebar.checkbox("Update in realtime", True)
-
-# Create a canvas component
+#create canvas component
 canvas_result = st_canvas(
-    fill_color="rgba(255, 165, 0, 0.3)",  # Fixed fill color with some opacity
+    fill_color="white",  # Set the canvas background color to white
     stroke_width=stroke_width,
     stroke_color=stroke_color,
-    background_color=bg_color,
-    background_image=Image.open(bg_image) if bg_image else None,
     update_streamlit=realtime_update,
-    height=300,
+    height=28,  # Set the canvas height to 28 pixels
+    width=28,  # Set the canvas width to 28 pixels
     drawing_mode=drawing_mode,
     display_toolbar=st.sidebar.checkbox("Display toolbar", True),
     key="full_app",
 )
 
-# Do something interesting with the image data and paths
 # Do something interesting with the image data and paths
 if canvas_result.image_data is not None:
-    #st.image(canvas_result.image_data)
+    # Preprocess the drawn image
     image = canvas_result.image_data
     image1 = image.copy()
-    image1 = image1.astype('float32')  # Convert to float32
-    image1 = cv2.cvtColor(image1, cv2.COLOR_BGR2GRAY)
-    image1 = cv2.resize(image1, (28, 28))
-    image1 = image1 / 255.0  # Normalize the values to [0, 1]
+    image1 = image1.astype('uint8')
+
+    # Assuming the background is white, you can invert the colors if necessary
+    image1 = 255 - image1
 
-    st.image(image1)
-    image1.resize(1,1,28,28)
-    st.title(np.argmax(cnn.predict(image1)))
+    # Resize the image to match the input size of your CNN model (28x28)
+    image1 = cv2.resize(image1, (28, 28))
+    
+    # Normalize the image to values between 0 and 1
+    image1 = image1 / 255.0
+    
+    # Convert the image to the expected shape for the model
+    image1 = image1.reshape(1, 1, 28, 28).astype('float32')
 
+    # Pass the preprocessed image to your model for prediction
+    prediction = np.argmax(cnn.predict(image1))
     
+    # Display the prediction result
+    st.title(f"Predicted Digit: {prediction}")
+
 if canvas_result.json_data is not None:
-    st.dataframe(pd.json_normalize(canvas_result.json_data["objects"])) 
+    st.dataframe(pd.json_normalize(canvas_result.json_data["objects"]))