ready for demo

app.py

@@ -1,5 +1,4 @@
 import streamlit as st
-import streamlit.components.v1 as components
 from PIL import Image, ImageEnhance
 import torch
 from torchvision.transforms import functional as F
@@ -25,7 +24,6 @@ from streamlit_drawable_canvas import st_canvas
 from streamlit_image_select import image_select
 from streamlit_js_eval import streamlit_js_eval
 
-
 def get_memory_usage():
     process = psutil.Process()
     mem_info = process.memory_info()
@@ -200,7 +198,7 @@ def prepare_image(image, pad=True, new_size=(1333, 1333)):
     return new_scaled_size, image
 
 # Function to display various options for image annotation
-def display_options(image, score_threshold, is_mobile):
+def display_options(image, score_threshold, is_mobile, screen_width):
     col1, col2, col3, col4, col5 = st.columns(5)
     with col1:
         write_class = st.toggle("Write Class", value=True)
@@ -230,7 +228,7 @@ def display_options(image, score_threshold, is_mobile):
     if is_mobile is False:
         width = 1000
     else:
-        width = 300
+        width = screen_width
 
     # Display the original and annotated images side by side
     image_comparison(
@@ -371,13 +369,16 @@ def main():
                     st.image(cropped_image, caption="Cropped Image", use_column_width=False, width=500)
             else:
                 resized_image = original_image
-                st.image(resized_image, caption="Image", use_column_width=False, width=300)
+                st.image(resized_image, caption="Image", use_column_width=False, width=int(4/5*screen_width))
                 cropped_image = original_image
                 
         if cropped_image is not None:
-            col1, col2, col3 = st.columns(3)
-            with col1:
-                score_threshold = st.slider("Set score threshold for prediction", min_value=0.0, max_value=1.0, value=0.6, step=0.05)
+            if is_mobile is False:
+                col1, col2, col3 = st.columns(3)
+                with col1:
+                    score_threshold = st.slider("Set score threshold for prediction", min_value=0.0, max_value=1.0, value=0.5, step=0.05)
+            else:
+                score_threshold = st.slider("Set score threshold for prediction", min_value=0.0, max_value=1.0, value=0.5, step=0.05)
             
             if st.button("Launch Prediction"):
                 st.session_state.crop_image = cropped_image
@@ -387,14 +388,14 @@ def main():
 
     if 'prediction' in st.session_state and uploaded_file is not None:
         with st.spinner('Waiting for result display...'): 
-            display_options(st.session_state.crop_image, score_threshold, is_mobile)
+            display_options(st.session_state.crop_image, score_threshold, is_mobile, int(4/5*screen_width))
 
         with st.spinner('Waiting for BPMN modeler...'):
             col1, col2 = st.columns(2)
             with col1:
                 st.session_state.scale = st.slider("Set scale for XML file", min_value=0.1, max_value=2.0, value=1.0, step=0.1)
             st.session_state.bpmn_xml = create_XML(st.session_state.prediction.copy(), st.session_state.text_mapping, st.session_state.scale)
-            display_bpmn_xml(st.session_state.bpmn_xml, is_mobile=is_mobile)
+            display_bpmn_xml(st.session_state.bpmn_xml, is_mobile=is_mobile, screen_width=int(4/5*screen_width))
 
         gc.collect()
 

modules/htlm_webpage.py

@@ -1,7 +1,7 @@
 import streamlit as st
 import streamlit.components.v1 as components
 
-def display_bpmn_xml(bpmn_xml, is_mobile=False):
+def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
 
     if is_mobile:
         html_template = f"""
@@ -78,7 +78,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
                     try {{
                         await bpmnModeler.importXML(bpmnXML);
                         bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
-                        bpmnModeler.get('canvas').zoom(0.2); // Adjust this value for zooming out
+                        bpmnModeler.get('canvas').zoom(0.3); // Adjust this value for zooming out
                     }} catch (err) {{
                         console.error('Error rendering BPMN diagram', err);
                     }}
@@ -141,7 +141,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
         </html>
         """
         
-        components.html(html_template, height=300, width=300)
+        components.html(html_template, height=screen_width, width=screen_width)
    
     else:
         html_template = f"""
@@ -298,4 +298,4 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False):
         </html>
         """
         
-        components.html(html_template, height=1000, width=1500)
+        components.html(html_template, height=1000, width=1600)