Update app.py

app.py

@@ -88,30 +88,20 @@ examples = [
     [f"{base_url}textualis-3.png", "Medieval Textualis"],
 ]
 
-# Custom CSS to make all images wider
+# Custom CSS to make the image wider
 custom_css = """
-.container {
-    max-width: 100% !important;
-    width: 100% !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-#image_upload, .image-container {
+#image_upload {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
 }
-#image_upload > div:first-child, .image-container > div:first-child {
+#image_upload > div:first-child {
     width: 100% !important;
 }
-#image_upload img, .image-container img {
+#image_upload img {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
-    object-fit: contain !important;
-}
-.examples-table td {
-    min-width: 400px;
 }
 """
 
@@ -121,7 +111,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", elem_classes="image-container")
+        input_image = gr.Image(type="pil", label="Input Image", elem_id="image_upload")
         model_dropdown = gr.Dropdown(choices=list(MODEL_OPTIONS.keys()), label="Select Model", value="Medieval Base")
     
     transcription_output = gr.Textbox(label="Transcription")
@@ -129,6 +119,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, elem_classes="examples-table")
+    gr.Examples(examples, inputs=[input_image, model_dropdown], outputs=transcription_output)
 
 iface.launch()