adjust shape and size of canvas on aspect_ratios_selection change

requires fix of gradio-app/gradio#5019, which is available from 3.45.0, but 3.50.2 is also compatible

requirements_versions.txt

@@ -11,7 +11,7 @@ psutil==5.9.5
 numpy==1.23.5
 pytorch_lightning==1.9.4
 omegaconf==2.2.3
-gradio==3.41.2
+gradio==3.50.2
 pygit2==1.12.2
 opencv-contrib-python==4.8.0.74
 httpx==0.24.1

webui.py

@@ -194,8 +194,12 @@ def ip_advance_checked(x):
                         example_inpaint_prompts.click(lambda x: x[0], inputs=example_inpaint_prompts, outputs=inpaint_additional_prompt, show_progress=False, queue=False)
                     with gr.TabItem(label='Realtime Canvas') as paint_tab:
                         with gr.Row(equal_height=True):
-                            canvas_size = 512
-                            realtime_input_image = gr.Image(source="canvas", tool="color-sketch", shape=(canvas_size, canvas_size), width=canvas_size, height=canvas_size)
+                            def aspect_ratios_selection_change(aspect_ratios_selection):
+                                width, height = aspect_ratios_selection.replace('×', ' ').split(' ')[:2]
+                                width, height = int(int(width)/2), int(int(height)/2)
+                                return gr.Paint(shape=(width, height), width=width, height=height)
+
+                            realtime_input_image = aspect_ratios_selection_change(modules.config.default_aspect_ratio)
 
             switch_js = "(x) => {if(x){viewer_to_bottom(100);viewer_to_bottom(500);}else{viewer_to_top();} return x;}"
             down_js = "() => {viewer_to_bottom();}"
@@ -493,7 +497,8 @@ def inpaint_mode_change(mode):
             inpaint_strength, inpaint_respective_field
         ], show_progress=False, queue=False)
 
-        realtime_input_image.change(lambda: gr.update(value='Extreme Speed'), outputs=performance_selection, queue=False, show_progress=False, _js="() => {document.getElementById('generate_button').click();}")
+        realtime_input_image.change(lambda: (gr.update(value='Extreme Speed'), gr.update(value=False)), outputs=[performance_selection, seed_random], queue=False, show_progress=False, _js="() => {document.getElementById('generate_button').click();}")
+        aspect_ratios_selection.change(aspect_ratios_selection_change, inputs=aspect_ratios_selection, outputs=realtime_input_image, queue=False, show_progress=False)
 
         ctrls = [
             prompt, negative_prompt, style_selections,