Update cropImage style

app.py

@@ -49,13 +49,14 @@ with gr.Blocks(css="style.css", js="script.js") as demo:
                                             maximum=1,
                                             step=0.1,
                                             value=0.3)
-                run_button = gr.Button('Run')
-                result_text = gr.HTML(value="")
-                with gr.Accordion("Crop Image"):
-                    crop_image = gr.Image(elem_classes='m5dd_image',
+                run_button = gr.Button('Run')                
+                with gr.Accordion(label="Crop Image", open=False):
+                    crop_image = gr.Image(elem_classes='m5dd_image2',
                                           format='jpg',
                                           show_label=False,
+                                          show_share_button=False,
                                           container=False)
+                result_text = gr.HTML(value="")
             with gr.Column(scale=2):
                 result_html = gr.HTML(value="")
     with gr.Tab(label='Batch'):

cropImage.py

@@ -24,8 +24,9 @@ def cropImage(image: PIL.Image.Image):
     else:
         new_height = int(original_width * (target_height / target_width))
         crop_box = (0, (original_height - new_height) // 2, original_width, (original_height + new_height) // 2)
-    cropped_image = image.crop(crop_box)
 
+    cropped_image = image.convert("RGB")
+    cropped_image = cropped_image.crop(crop_box)
     cropped_image = cropped_image.resize((target_width, target_height))
 
     return cropped_image

style.css

@@ -27,3 +27,10 @@
 .m5dd_image .upload-container .image-frame {
   height: 20em;
 }
+
+.m5dd_image .upload-container .image-frame {
+  height: 20em;
+}
+.m5dd_image2 .image-container {
+  height: 20em;
+}