Gradio Visual Improvements

app.py

@@ -134,71 +134,70 @@ if __name__ == "__main__":
     with gr.Blocks() as demo:
         gr.Markdown("# Saliency Maps with the MERIT Dataset 🎒📃🏆")
 
-        gr.Image(value=README_IMAGE_PATH, width=800, height=600)
-
-        with gr.Tab("Introduction"):
-            gr.Markdown(
-                """
-            ## Welcome to Saliency Maps with the [MERIT Dataset](https://huggingface.co/datasets/de-Rodrigo/merit) 🎒📃🏆
-
-            This space demonstrates the capabilities of different Vision Language models 
-            for document understanding tasks.
-
-            ### Key Features:
-            - Process images from the [MERIT Dataset](https://huggingface.co/datasets/de-Rodrigo/merit) or upload your own image.
-            - Use a fine-tuned version of the models availabe to extract grades from documents.
-            - Visualize saliency maps to understand where the model is looking (WIP 🛠️).
-            """
-            )
-
-            gr.Image(
-                value=GIF_PATH,
-                label="Dataset samples you can process",
-                width=800,
-                height=600,
-            )
-
-        with gr.Tab("Try It Yourself"):
-            gr.Markdown(
-                "Select a model and an image from the dataset, or upload your own image."
-            )
-
-            with gr.Row():
-                with gr.Column():
-                    model_dropdown = gr.Dropdown(choices=models, label="Select Model")
-                    dataset_slider = gr.Slider(
-                        minimum=0,
-                        maximum=len(dataset) - 1,
-                        step=1,
-                        label="Dataset Image Index",
-                    )
-                    upload_image = gr.Image(
-                        type="pil", label="Or Upload Your Own Image"
+        with gr.Column(scale=2, min_width=600):
+            gr.Image(value=README_IMAGE_PATH, height=400, fit="scale-down")
+
+            with gr.Tabs():
+                with gr.Tab("Introduction"):
+                    gr.Markdown(
+                        """
+                    ## Welcome to Saliency Maps with the [MERIT Dataset](https://huggingface.co/datasets/de-Rodrigo/merit) 🎒📃🏆
+
+                    This space demonstrates the capabilities of different Vision Language models 
+                    for document understanding tasks.
+
+                    ### Key Features:
+                    - Process images from the [MERIT Dataset](https://huggingface.co/datasets/de-Rodrigo/merit) or upload your own image.
+                    - Use a fine-tuned version of the models availabe to extract grades from documents.
+                    - Visualize saliency maps to understand where the model is looking (WIP 🛠️).
+                    """
                     )
 
-                preview_image = gr.Image(label="Selected/Uploaded Image")
-
-            process_button = gr.Button("Process Image")
-
-            with gr.Row():
-                output_image = gr.Image(label="Processed Image")
-                output_text = gr.Textbox(label="Result")
+                with gr.Tab("Try It Yourself"):
+                    gr.Markdown(
+                        "Select a model and an image from the dataset, or upload your own image."
+                    )
 
-            # Update preview image when slider changes
-            dataset_slider.change(
-                fn=update_image, inputs=[dataset_slider], outputs=[preview_image]
-            )
+                    with gr.Row():
+                        with gr.Column():
+                            model_dropdown = gr.Dropdown(
+                                choices=models, label="Select Model"
+                            )
+                            dataset_slider = gr.Slider(
+                                minimum=0,
+                                maximum=len(dataset) - 1,
+                                step=1,
+                                label="Dataset Image Index",
+                            )
+                            upload_image = gr.Image(
+                                type="pil", label="Or Upload Your Own Image"
+                            )
+
+                        preview_image = gr.Image(label="Selected/Uploaded Image")
+
+                    process_button = gr.Button("Process Image")
+
+                    with gr.Row():
+                        output_image = gr.Image(label="Processed Image")
+                        output_text = gr.Textbox(label="Result")
+
+                    # Update preview image when slider changes
+                    dataset_slider.change(
+                        fn=update_image,
+                        inputs=[dataset_slider],
+                        outputs=[preview_image],
+                    )
 
-            # Update preview image when an image is uploaded
-            upload_image.change(
-                fn=lambda x: x, inputs=[upload_image], outputs=[preview_image]
-            )
+                    # Update preview image when an image is uploaded
+                    upload_image.change(
+                        fn=lambda x: x, inputs=[upload_image], outputs=[preview_image]
+                    )
 
-            # Process image when button is clicked
-            process_button.click(
-                fn=process_image,
-                inputs=[model_dropdown, upload_image, dataset_slider],
-                outputs=[output_image, output_text],
-            )
+                    # Process image when button is clicked
+                    process_button.click(
+                        fn=process_image,
+                        inputs=[model_dropdown, upload_image, dataset_slider],
+                        outputs=[output_image, output_text],
+                    )
 
     demo.launch()