change Image Aspect ratio to be fixed

app.py

@@ -8,7 +8,7 @@ import pandas as pd
 import os.path
 import numpy as np
 from datetime import datetime, timedelta
-from descriptions import prefer_frontal_cam_html, docu_eng, docu_cat
+from descriptions import prefer_frontal_cam_html, docu_eng, docu_cat, css_image_aspect_ratio
 
 DEBUG = True
 
@@ -69,7 +69,7 @@ def start_app(shift_id, mode, date):
     return gr.Tabs(selected=tab_id, visible=True)
 
 
-def predict_app(image, patient_id):
+def predict_app(image, patient_id=None):
     gr.Info('Predicting ...')
     buffered = BytesIO()
     image.save(buffered, format='JPEG')
@@ -84,17 +84,17 @@ def predict_app(image, patient_id):
 
 
 # APP
-with (gr.Blocks(head=prefer_frontal_cam_html) as block):
+with (gr.Blocks(head=prefer_frontal_cam_html, css=css_image_aspect_ratio) as block):
     with gr.Tabs() as tabs:
         with gr.Tab(label='Welcome', id=0) as welcome_tab:
             gr.Info('Loading ...')
+
+
             @gr.render()
             def header():
                 gr.Markdown(f'# User: {config.get("restaurant_name", "Proppos")}', render=True)
 
 
-            logout_button = gr.Button(icon=None, link='/logout', value='Logout / Exit ↩')
-
             @gr.render()
             def render_dropdowns():
                 shift_dropdown = gr.Dropdown(label='Meal/Apat/Comida',
@@ -111,6 +111,7 @@ with (gr.Blocks(head=prefer_frontal_cam_html) as block):
                 start_button = gr.Button(value='START ▶️')
                 start_button.click(fn=start_app, inputs=[shift_dropdown, mode_dropdown, date_chooser], outputs=tabs)
 
+
             gr.Markdown(""" * Do you have any doubt? Please, see the documentation tab. \n
                             * Tens un dubte? Consulta la pestanya de documentació. """)
 
@@ -123,13 +124,19 @@ with (gr.Blocks(head=prefer_frontal_cam_html) as block):
                              3. Place the tray so it is centered in the displayed image and
                              4. Press the grey button 'PRESS TO PREDICT'
                         """)
-            im = gr.Image(sources=['webcam'], streaming=True, mirror_webcam=False, type='pil',
-                          height=720, width=1280)
-            with gr.Accordion():
-                eater_id = gr.Textbox(label='Patient Identification', placeholder='Searching Patient ID')
-
-            current_eater_id = {'value': None}
-
+            im = gr.Image(sources=['webcam'],
+                          mirror_webcam=False,
+                          type='pil',
+                          show_share_button=False,
+                          show_download_button=False,
+                          height=720, width=1280,
+                          elem_id="image-container")
+
+            ## Patient ID searcher. Uncomment if needed
+            # with gr.Accordion(open=False):
+            #     eater_id = gr.Textbox(label='Patient Identification', placeholder='Searching Patient ID')
+            #
+            # current_eater_id = {'value': None}
 
             # @gr.on(inputs=im, outputs=eater_id)
             # def search_eater_id(image):
@@ -141,10 +148,12 @@ with (gr.Blocks(head=prefer_frontal_cam_html) as block):
             #     final_value = new_value if new_value != default_value else current_value
             #     current_eater_id['value'] = final_value
             #     return final_value
-
+            eater_id = None
 
             b = gr.Button('PRESS TO PREDICT')
-            b.click(fn=predict_app, inputs=[im, eater_id], outputs=gr.Info())
+            b.click(fn=predict_app, inputs=[im], outputs=gr.Info()) # add eater id to input if needed
+
+        logout_button = gr.Button(link='/logout', value='Logout / Exit ↩', size='sm')
 
         with gr.Tab(label='ℹ️ Status', id=2):
             gr.Markdown(' Press the button to see the status of the Application and technical information')
@@ -156,11 +165,11 @@ with (gr.Blocks(head=prefer_frontal_cam_html) as block):
             choices = [('ENG 🇬🇧', docu_eng), ('CAT', docu_cat)]
             c = gr.Radio(label='Select the language', choices=choices)
 
+
             @gr.render()
             def display_docu():
                 d = gr.Markdown(docu_eng)
                 c.change(fn=lambda x: x, inputs=c, outputs=d)
 
 
-
 block.launch(show_api=False, auth=login)

descriptions.py

@@ -11,7 +11,7 @@ navigator.mediaDevices.getUserMedia = (constraints) => {
 </script>
 """
 
-docu_eng="""
+docu_eng = """
 ## User Guide
 
 This application is intended to create the multiple 
@@ -89,8 +89,7 @@ Some of the info can be pretty technical.
 Thank you for using our application! We hope this guide helps you navigate and use all the features effectively.
 """
 
-
-docu_cat="""
+docu_cat = """
 ## Guia d'Usuari
 
 Aquesta aplicació està destinada a crear els múltiples
@@ -165,3 +164,29 @@ Alguna de la informació pot ser tècnica.
 
 Gràcies per utilitzar la nostra aplicació! Esperem que aquesta guia t'ajudi a navegar i utilitzar totes les funcions de manera efectiva.
 """
+
+css_image_aspect_ratio = """
+#image-container {
+    position: relative;
+    width: min(1280px, 100%);
+    height: 100% !important;
+    border-style: dashed;
+    overflow: hidden;
+    min-width: min(160px, 100%);
+}
+
+#image-container > div.wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#image-container video {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+"""
+