Update app.py

app.py

@@ -88,20 +88,30 @@ examples = [
     [f"{base_url}textualis-3.png", "Medieval Textualis"],
 ]
 
-# Custom CSS to make the image wider
+# Custom CSS to make all images wider
 custom_css = """
-#image_upload {
+.container {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+#image_upload, .image-container {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
 }
-#image_upload > div:first-child {
+#image_upload > div:first-child, .image-container > div:first-child {
     width: 100% !important;
 }
-#image_upload img {
+#image_upload img, .image-container img {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
+    object-fit: contain !important;
+}
+.examples-table td {
+    min-width: 400px;
 }
 """
 
@@ -111,7 +121,7 @@ with gr.Blocks(css=custom_css) as iface:
     gr.Markdown("Upload an image of medieval text and select a model to transcribe it. Note: This tool is designed to work on a single line of text at a time for optimal results.")
     
     with gr.Row():
-        input_image = gr.Image(type="pil", label="Input Image", elem_id="image_upload")
+        input_image = gr.Image(type="pil", label="Input Image", elem_id="image_upload", elem_classes="image-container")
         model_dropdown = gr.Dropdown(choices=list(MODEL_OPTIONS.keys()), label="Select Model", value="Medieval Base")
     
     transcription_output = gr.Textbox(label="Transcription")
@@ -119,6 +129,6 @@ with gr.Blocks(css=custom_css) as iface:
     submit_button = gr.Button("Transcribe")
     submit_button.click(fn=process_image, inputs=[input_image, model_dropdown], outputs=transcription_output)
     
-    gr.Examples(examples, inputs=[input_image, model_dropdown], outputs=transcription_output)
+    gr.Examples(examples, inputs=[input_image, model_dropdown], outputs=transcription_output, elem_classes="examples-table")
 
 iface.launch()