Update gradio/demo.py

gradio/demo.py

@@ -12,7 +12,23 @@ def face_liveness(frame):
     r = requests.post(url=url, files=files)
     return r.json()
 
-with gr.Blocks() as demo:
+css = """
+.example-image img{
+    display: flex; /* Use flexbox to align items */
+    justify-content: center; /* Center the image horizontally */
+    align-items: center; /* Center the image vertically */
+    height: 300px; /* Set the height of the container */
+    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
+}
+.example-image{
+    display: flex; /* Use flexbox to align items */
+    justify-content: center; /* Center the image horizontally */
+    align-items: center; /* Center the image vertically */
+    height: 350px; /* Set the height of the container */
+    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
+}
+"""
+with gr.Blocks(css=css) as demo:
     gr.Markdown(
         """
     # Face Liveness Detection
@@ -26,7 +42,7 @@ with gr.Blocks() as demo:
     )
     with gr.Row():
         with gr.Column(scale=5):
-            image_input = gr.Image(type='filepath')
+            image_input = gr.Image(type='filepath', elem_classes="example-image")
             gr.Examples(['gradio/examples/1.jpg', 'gradio/examples/2.jpg', 'gradio/examples/3.jpg', 'gradio/examples/4.jpg'], 
                             inputs=image_input)
             face_liveness_button = gr.Button("Check Liveness")