updated ui

app.py

@@ -33,21 +33,30 @@ def generate_multiple(num):
       images.append(generate_image())
     return images    
 
-with gr.Blocks() as app:
-    title = "Synthetic Image Generator"
+with gr.Blocks(theme=gr.themes.Soft()) as app:
+    gr.Markdown("""<h1 style="text-align: center;">Synthetic Image Generator</h1>""")
+    
     with gr.Tab("Generate Single Image"):
       gr.Markdown("## Using the Synthetic Generator\n\nSimply click 'Generate Image' to create a synthetic image. The generated image will be displayed below.")
-      gen_img = gr.Image(shape=(256,256), tool="select", type="numpy", label="Generated Image", container=True)
-      gen_button = gr.Button("Generate")
+      gen_img = gr.Image(shape=(256,256), tool="select", type="numpy", label="Generated Image")
+      gen_button = gr.Button("Generate", variant="primary")
+
     with gr.Tab("Generate Multiple Images"):
       gr.Markdown(
           """
           ## Using the Synthetic Image Generator to generate multiple images
           """
       )
-      gen_number = gr.Slider(2, 5, label="Number of Images", info="Generate multiple images")
-      gen_images = gr.Gallery(label="Generated Images", object_fit="contain")
-      gen_m_button = gr.Button("Generate Images")
+      gen_number = gr.Slider(2, 5, step=1.0, label="Number of Images", info="Generate multiple images")
+      gen_images = gr.Gallery(label="Generated Images").style(columns=[2], rows=[2], object_fit="contain", height="auto")
+      gen_m_button = gr.Button("Generate Images", variant="primary")
+        
+    with gr.Accordion("Read More"):
+        gr.Markdown("""
+        - [Images used to train the model](https://ieee-dataport.org/open-access/retinal-fundus-multi-disease-image-dataset-rfmid)
+        """)
+
     gen_button.click(generate_image, inputs=None, outputs=gen_img)
     gen_m_button.click(generate_multiple, inputs=gen_number, outputs=gen_images)
+    
 app.launch(debug=True)