add lcm realtime canvas painting

javascript/zoom.js

@@ -235,7 +235,7 @@ onUiLoaded(async() => {
 
         // Reset zoom when uploading a new image
         const fileInput = gradioApp().querySelector(
-            `${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
+            `${elemId} input[type="file"][accept="image/*"].svelte-izfbkb`
         );
         fileInput.addEventListener("click", resetZoom);
 

modules/async_worker.py

@@ -139,6 +139,7 @@ def handler(async_task):
         outpaint_selections = args.pop()
         inpaint_input_image = args.pop()
         inpaint_additional_prompt = args.pop()
+        realtime_input_image = args.pop()
 
         cn_tasks = {x: [] for x in flags.ip_list}
         for _ in range(4):
@@ -312,6 +313,10 @@ def handler(async_task):
                     clip_vision_path, ip_negative_path, ip_adapter_face_path = modules.config.downloading_ip_adapters(
                         'face')
                 progressbar(async_task, 1, 'Loading control models ...')
+            if current_tab == 'paint' and realtime_input_image is not None:
+                uov_input_image = HWC3(realtime_input_image)
+                goals.append('vary')
+                uov_method = 'strong'
 
         # Load or unload CNs
         pipeline.refresh_controlnets([controlnet_canny_path, controlnet_cpds_path])

requirements_versions.txt

@@ -10,7 +10,7 @@ tqdm==4.64.1
 psutil==5.9.5
 pytorch_lightning==1.9.4
 omegaconf==2.2.3
-gradio==3.41.2
+gradio==3.45.0
 pygit2==1.12.2
 opencv-contrib-python==4.8.0.74
 httpx==0.24.1

webui.py

@@ -194,6 +194,7 @@ def ip_advance_checked(x):
                         example_inpaint_prompts = gr.Dataset(samples=modules.config.example_inpaint_prompts, label='Additional Prompt Quick List', components=[inpaint_additional_prompt], visible=False)
                         gr.HTML('* Powered by Fooocus Inpaint Engine <a href="https://github.com/lllyasviel/Fooocus/discussions/414" target="_blank">\U0001F4D4 Document</a>')
                         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='Describe') as desc_tab:
                         with gr.Row():
                             with gr.Column():
@@ -205,6 +206,16 @@ def ip_advance_checked(x):
                                     value=flags.desc_type_photo)
                                 desc_btn = gr.Button(value='Describe this Image into Prompt')
                                 gr.HTML('<a href="https://github.com/lllyasviel/Fooocus/discussions/1363" target="_blank">\U0001F4D4 Document</a>')
+
+                    with gr.TabItem(label='Realtime Canvas') as paint_tab:
+                        with gr.Row(equal_height=True):
+                            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();}"
 
@@ -217,6 +228,7 @@ def ip_advance_checked(x):
             inpaint_tab.select(lambda: 'inpaint', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
             ip_tab.select(lambda: 'ip', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
             desc_tab.select(lambda: 'desc', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
+            paint_tab.select(lambda: 'paint', outputs=current_tab, queue=False, _js=down_js, show_progress=False)
 
         with gr.Column(scale=1, visible=modules.config.default_advanced_checkbox) as advanced_column:
             with gr.Tab(label='Setting'):
@@ -502,6 +514,9 @@ 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'), gr.update(value=1), gr.update(value=False)), outputs=[performance_selection, image_number, 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,
             performance_selection, aspect_ratios_selection, image_number, image_seed, sharpness, guidance_scale
@@ -511,6 +526,7 @@ def inpaint_mode_change(mode):
         ctrls += [input_image_checkbox, current_tab]
         ctrls += [uov_method, uov_input_image]
         ctrls += [outpaint_selections, inpaint_input_image, inpaint_additional_prompt]
+        ctrls += [realtime_input_image]
         ctrls += ip_ctrls
 
         def parse_meta(raw_prompt_txt):
@@ -557,11 +573,11 @@ def parse_meta(raw_prompt_txt):
             load_parameter_button
         ] + lora_ctrls, queue=False, show_progress=False)
 
-        generate_button.click(lambda: (gr.update(visible=True, interactive=True), gr.update(visible=True, interactive=True), gr.update(visible=False), []), outputs=[stop_button, skip_button, generate_button, gallery]) \
+        generate_button.click(lambda: (gr.update(visible=True, interactive=True), gr.update(visible=True, interactive=True), gr.update(visible=False, interactive=False), []), outputs=[stop_button, skip_button, generate_button, gallery]) \
             .then(fn=refresh_seed, inputs=[seed_random, image_seed], outputs=image_seed) \
             .then(advanced_parameters.set_all_advanced_parameters, inputs=adps) \
             .then(fn=generate_clicked, inputs=ctrls, outputs=[progress_html, progress_window, progress_gallery, gallery]) \
-            .then(lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), outputs=[generate_button, stop_button, skip_button]) \
+            .then(lambda: (gr.update(visible=True, interactive=True), gr.update(visible=False), gr.update(visible=False)), outputs=[generate_button, stop_button, skip_button]) \
             .then(fn=lambda: None, _js='playNotification').then(fn=lambda: None, _js='refresh_grid_delayed')
 
         for notification_file in ['notification.ogg', 'notification.mp3']: