Resize Image Dynamically

app.py

@@ -159,16 +159,44 @@ st.write('##')
 
 col1, col2, col3 = st.columns([1, 10, 1], gap='small')
 with col2:
-    st.markdown(f"#### Object Detection Result")
-    with st.container(border = True):
-        static_component = image_comparison(
-        img1=st.session_state["output_1"],
-        img2=st.session_state["output_2"],
-        label1='Raw Diagram',
-        label2='Inference Prediction',
-        width=col2.width,
+    st.subheader('Object Prediction Result')
+    # Add custom CSS to make images responsive and add a border
+    st.markdown(
+        """
+        <style>
+        .stImageComparison > div {
+            max-width: 100%;
+            height: auto;
+            border: 3px solid #000;  /* Add a black border with 3px thickness */
+            border-radius: 10px;  /* Optional: Add rounded corners to the border */
+            padding: 5px;  /* Optional: Add padding around the images */
+        }
+        </style>
+        """, 
+        unsafe_allow_html=True
+    )
+    # Display image comparison with custom width and labels
+    image_comparison(
+        st.session_state["output_1"],
+        st.session_state["output_2"],
+        label1="Raw Diagram",
+        label2="Inference Prediction",
         starting_position=50,
         show_labels=True,
         make_responsive=True,
-        in_memory=True,
-        )   
+        in_memory=True 
+    )
+    
+    #st.markdown(f"#### Object Detection Result")
+    #with st.container(border = True):
+    #    static_component = image_comparison(
+    #    img1=st.session_state["output_1"],
+    #    img2=st.session_state["output_2"],
+    #    label1='Raw Diagram',
+    #    label2='Inference Prediction',
+    #    width=col2.width,
+    #    starting_position=50,
+    #    show_labels=True,
+    #    make_responsive=True,
+    #    in_memory=True,
+    #    )