Update app.py

app.py

@@ -46,10 +46,15 @@ if 'model' not in st.session_state:
 
 _, row0_col1, _ = st.columns([2,3,2])
 _, row1_col1, _ = st.columns([2,3,2])
-_, row2_col1, row2_col2, row2_col3, row2_col4, _ = st.columns([8,3,3,3,3,8])
+_, row2_col1, _ = st.columns([2,3,2])
 _, row3_col1, row3_col2, row3_col3, row3_col4, _ = st.columns([8,3,3,3,3,8])
-_, row4_col2, row4_col3, _ = st.columns([1,4,4,1], gap="medium")
+_, row4_col1, row4_col2, row4_col3, row4_col4, _ = st.columns([8,3,3,3,3,8])
+_, row5_col2, row5_col3, _ = st.columns([1,4,4,1], gap="medium")
 
+# heading
+with row0_col1:
+    st.markdown("<h1 style='text-align: center; color: black;'>Find Waldo and His Friends</h1>", unsafe_allow_html=True)
+    st.markdown("<h3 style='text-align: center; color: black;'>Using Computer Vision</h3>", unsafe_allow_html=True)
 
 
 
@@ -60,10 +65,8 @@ _, row4_col2, row4_col3, _ = st.columns([1,4,4,1], gap="medium")
 #####
 # This displays to inform the user about the tool
 if st.session_state.screen == 0:
-    with row0_col1:
-        # heading
-        st.markdown("<h1 style='text-align: center; color: black;'>Find Waldo and His Friends</h1>", unsafe_allow_html=True)
-        st.markdown("<h3 style='text-align: center; color: black;'>Using Computer Vision</h3>", unsafe_allow_html=True)
+    with row1_col1:
+        # overview
         st.markdown("<p style='text-align: left; color: black;'>This tool allows you to take a photo with your phone of a <i>Where's Waldo?</i> book page. Using the computer vision model YOLOv8-large, this tool find Waldo and his friends Wenda, Odlaw, Wizard, and Woof.</p>", unsafe_allow_html=True)
 
         # proceed button
@@ -83,13 +86,11 @@ if st.session_state.screen == 0:
 #####
 if st.session_state.screen == 1:  
     # heading and instructions
-    with row0_col1:
-        st.markdown("<h1 style='text-align: center; color: black;'>Find Waldo and His Friends</h1>", unsafe_allow_html=True)
-        st.markdown("<h3 style='text-align: center; color: black;'>Using Computer Vision</h3>", unsafe_allow_html=True)
+    with row1_col1:
         st.markdown("<p style='text-align: center; color: black;'>Upload an image using your cell phone (single book page), or select an image from the below list</p>", unsafe_allow_html=True)
 
     # image uploader
-    with row1_col1:
+    with row2_col1:
         uploaded_image = st.file_uploader(label="", 
                                           type=['jpg'], 
                                           accept_multiple_files=False, 
@@ -113,7 +114,7 @@ if st.session_state.screen == 1:
         st.markdown("<h4 style='text-align: center; color: black;'>Or Select One of the Following</h4>", unsafe_allow_html=True)
     
     image_path = "/home/user/app/test_images/"
-    with row2_col1:
+    with row3_col1:
         img_1 = Image.open(image_path + "IMG_5356.JPG")
         img_1 = ImageOps.exif_transpose(img_1)
         st.image(img_1, use_column_width=True)
@@ -121,7 +122,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_1
             st.session_state.screen = 2
             st.rerun()
-    with row2_col2:
+    with row3_col2:
         img_2 = Image.open(image_path + "IMG_5357.JPG")
         img_2 = ImageOps.exif_transpose(img_2)
         st.image(img_2, use_column_width=True)
@@ -129,7 +130,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_2
             st.session_state.screen = 2
             st.rerun()
-    with row2_col3:
+    with row3_col3:
         img_3 = Image.open(image_path + "IMG_5368.JPG")
         img_3 = ImageOps.exif_transpose(img_3)
         st.image(img_3, use_column_width=True)
@@ -137,7 +138,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_3
             st.session_state.screen = 2
             st.rerun()
-    with row2_col4:
+    with row3_col4:
         img_4 = Image.open(image_path + "IMG_5369.JPG")
         img_4 = ImageOps.exif_transpose(img_4)
         st.image(img_4, use_column_width=True)
@@ -145,7 +146,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_4
             st.session_state.screen = 2
             st.rerun()
-    with row3_col1:
+    with row4_col1:
         img_5 = Image.open(image_path + "IMG_5382.JPG")
         img_5 = ImageOps.exif_transpose(img_5)
         st.image(img_5, use_column_width=True)
@@ -153,7 +154,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_5
             st.session_state.screen = 2
             st.rerun()
-    with row3_col2:
+    with row4_col2:
         img_6 = Image.open(image_path + "IMG_5383.JPG")
         img_6 = ImageOps.exif_transpose(img_6)
         st.image(img_6, use_column_width=True)
@@ -161,7 +162,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_6
             st.session_state.screen = 2
             st.rerun()
-    with row3_col3:
+    with row4_col3:
         img_7 = Image.open(image_path + "IMG_5408.JPG")
         img_7 = ImageOps.exif_transpose(img_7)
         st.image(img_7, use_column_width=True)
@@ -169,7 +170,7 @@ if st.session_state.screen == 1:
             st.session_state.image = img_7
             st.session_state.screen = 2
             st.rerun()
-    with row3_col4:
+    with row4_col4:
         img_8 = Image.open(image_path + "IMG_5409.JPG")
         img_8 = ImageOps.exif_transpose(img_8)
         st.image(img_8, use_column_width=True)
@@ -203,26 +204,23 @@ def tile_image(image, tile_size, overlap):
 if st.session_state.screen == 2:  
     # tile images
     tiles = tile_image(image=st.session_state.image, tile_size=640, overlap=40)
-    
-    st.write("\n\n")
-    components.html("""<hr style="height:2px;border:none;color:#333;background-color:#333;" /> """)
 
-    with row4_col2:
+    with row5_col2:
         st.image(st.session_state.image, use_column_width=True)
     
-    with row4_col3:
+    with row5_col3:
         # navigation
         row4a_col0, row4a_col1, row4a_col2= st.columns([1,1,1], gap="medium")
-        with row4a_col0:
+        with row5a_col0:
             if st.button("Back"):
                 if st.session_state.image_counter > 0:
                     st.session_state.image_counter -= 1
-        with row4a_col1:
+        with row5a_col1:
             if st.button("Select New Photo"):
                 st.session_state.screen = 1
                 st.session_state.results = None
                 st.rerun()
-        with row4a_col2:
+        with row5a_col2:
             if st.button("Next"):
                 if st.session_state.image_counter < len(st.session_state.results) - 1:
                     st.session_state.image_counter += 1