mobile friendly

app.py

@@ -24,6 +24,8 @@ from streamlit_cropper import st_cropper
 from streamlit_drawable_canvas import st_canvas
 from streamlit_image_select import image_select
 
+from streamlit_javascript import st_javascript
+
 
 def get_memory_usage():
     process = psutil.Process()
@@ -199,7 +201,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):
+def display_options(image, score_threshold, is_mobile):
     col1, col2, col3, col4, col5 = st.columns(5)
     with col1:
         write_class = st.toggle("Write Class", value=True)
@@ -226,6 +228,11 @@ def display_options(image, score_threshold):
         score_threshold=score_threshold, write_score=write_score, resize=True, return_image=True, axis=True
     )
 
+    if is_mobile is False:
+        width = 1000
+    else:
+        width = 300
+
     # Display the original and annotated images side by side
     image_comparison(
         img1=annotated_image,
@@ -233,11 +240,11 @@ def display_options(image, score_threshold):
         label1="Annotated Image",
         label2="Original Image",
         starting_position=99,
-        width=1000,
+        width=width,
     )
 
 # Function to perform inference on the uploaded image using the loaded models
-def perform_inference(model_object, model_arrow, image, score_threshold):
+def perform_inference(model_object, model_arrow, image, score_threshold,is_mobile):
     _, uploaded_image = prepare_image(image, pad=False)
               
     img_tensor = F.to_tensor(prepare_image(image.convert('RGB'))[1])
@@ -245,7 +252,8 @@ def perform_inference(model_object, model_arrow, image, score_threshold):
     # Display original image
     if 'image_placeholder' not in st.session_state:
         image_placeholder = st.empty()  # Create an empty placeholder
-    image_placeholder.image(uploaded_image, caption='Original Image', width=1000)
+    if is_mobile is False:
+        image_placeholder.image(uploaded_image, caption='Original Image', width=1000)
 
     # Prediction
     _, st.session_state.prediction = full_prediction(model_object, model_arrow, img_tensor, score_threshold=score_threshold, iou_threshold=0.5, distance_treshold=30)
@@ -267,27 +275,21 @@ def perform_inference(model_object, model_arrow, image, score_threshold):
 def get_image(uploaded_file):
     return Image.open(uploaded_file).convert('RGB')
 
+ 
+import streamlit as st
+from streamlit_js_eval import streamlit_js_eval
 
 def main():
+    st.set_page_config(layout="wide")
 
-    # Inject JavaScript to detect mobile devices
-    mobile_detect_js = """
-    <script>
-      const isMobile = /Mobi|Android/i.test(navigator.userAgent);
-      document.cookie = `isMobile=${isMobile}; path=/`;
-    </script>
-    """
-    components.html(mobile_detect_js)
-
-    # Check if the user is on a mobile device
-    is_mobile = False
-    if 'isMobile' in st.session_state:
-        is_mobile = st.session_state.isMobile == 'true'
-        st.set_page_config(layout="centered")
-    else:
-        st.set_page_config(layout="wide")
-
+    screen_width = streamlit_js_eval(js_expressions='screen.width', want_output = True, key = 'SCR')
 
+    if screen_width is not None and screen_width < 800:
+        is_mobile = True
+        print('Mobile version')
+    else:
+        is_mobile = False
+        print('Desktop version')
     
     # Add your company logo banner
     if is_mobile:
@@ -295,6 +297,14 @@ def main():
     else:
         st.image("./images/banner.png", use_column_width=True)
 
+       # Use is_mobile flag in your logic
+    if is_mobile:
+        st.title(f"Welcome on the mobile version of the app")
+    else:
+        st.title(f"Welcome on the desktop version of the app")
+        
+
+
     # Sidebar content
     st.sidebar.header("This BPMN AI model recognition is proposed by: \n ELCA in collaboration with EPFL.")
     st.sidebar.subheader("Instructions:")
@@ -313,8 +323,6 @@ def main():
 
     st.sidebar.subheader("You can close this sidebar")
 
-    # Set the title of the app
-    st.title("BPMN recognition by AI demo")
     
     # Display current memory usage
     memory_usage = get_memory_usage()
@@ -358,15 +366,16 @@ def main():
     if uploaded_file is not None:
         with st.spinner('Waiting for image display...'): 
             original_image = get_image(uploaded_file)
-            if is_mobile:
-                cropped_image = st_cropper(original_image, realtime_update=True, box_color='#0000FF', should_resize_image=True, default_coords=(30, original_image.size[0]-30, 30, original_image.size[1]-30))
-                st.image(cropped_image, caption="Cropped Image", use_column_width=False, width=500)
-            else:
+            if is_mobile is False:
                 col1, col2 = st.columns(2)
                 with col1:           
                     cropped_image = st_cropper(original_image, realtime_update=True, box_color='#0000FF', should_resize_image=True, default_coords=(30, original_image.size[0]-30, 30, original_image.size[1]-30))
                 with col2:
                     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)
+                cropped_image = original_image
                 
         if cropped_image is not None:
             col1, col2, col3 = st.columns(3)
@@ -376,19 +385,19 @@ def main():
             if st.button("Launch Prediction"):
                 st.session_state.crop_image = cropped_image
                 with st.spinner('Processing...'):
-                    perform_inference(model_object, model_arrow, st.session_state.crop_image, score_threshold)
+                    perform_inference(model_object, model_arrow, st.session_state.crop_image, score_threshold, is_mobile)
                     st.balloons()
 
     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)
+            display_options(st.session_state.crop_image, score_threshold, is_mobile)
 
         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)
+            display_bpmn_xml(st.session_state.bpmn_xml, is_mobile=is_mobile)
 
         gc.collect()
 

requirements.txt

@@ -9,4 +9,4 @@ streamlit-drawable-canvas==0.9.3
 streamlit_image_select
 opencv-python==4.9.0.80
 gdown
-psutil
+streamlit_js_eval