Implement sketchpad to add layers and paths

README.md

@@ -5,7 +5,7 @@ colorFrom: yellow
 colorTo: purple
 sdk: gradio
 python_version: 3.10.13
-sdk_version: 5.20.0
+sdk_version: 5.20.1
 app_file: app.py
 pinned: false
 short_description: Transform Your Images into Mesmerizing Hexagon Grids

app.py

@@ -415,7 +415,7 @@ def generate_image_to_image(prompt_mash, image_input_path, image_strength, steps
     return final_image
 
 @spaces.GPU(duration=140)
-def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge, use_conditioned_image=False, progress=gr.Progress(track_tqdm=True)):
+def run_lora(prompt, map_option, image_input, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge, use_conditioned_image=False, progress=gr.Progress(track_tqdm=True)):
     if selected_index is None:
         raise gr.Error("You must select a LoRA before proceeding.🧨")
     print(f"input Image: {image_input}\n")
@@ -429,6 +429,10 @@ def run_lora(prompt, image_input, image_strength, cfg_scale, steps, selected_ind
             conditioned_image = open_image(current_prerendered_image.value).convert("RGB")
             image_input = crop_and_resize_image(conditioned_image, width, height)
             print(f"Conditioned Image: {image_input.size}.. converted to RGB and resized\n")
+    if map_option != "Prompt":
+        prompt = PROMPTS[map_option]
+        # negative_prompt = NEGATIVE_PROMPTS.get(map_option, "")
+
     selected_lora = loras[selected_index]
     lora_path = selected_lora["repo"]
     trigger_word = selected_lora["trigger_word"]
@@ -593,12 +597,34 @@ def update_prompt_visibility(map_option):
           gr.update(visible=is_visible),
           gr.update(visible=is_visible)
       )
+def composite_with_control_sync(input_image, sketch_image, slider_value):
+    # Load the images using open_image() if they are provided as file paths.
+    in_img = open_image(input_image) if isinstance(input_image, str) else input_image
+    sk_img_path, _ = get_image_from_dict(sketch_image)
+    sk_img = open_image(sk_img_path)
+
+    # Resize sketch image if dimensions don't match input image.
+    if in_img.size != sk_img.size:
+        sk_img = sk_img.resize(in_img.size, Image.LANCZOS)
+
+    # Now composite using the original alpha_composite_with_control function.
+    result_img = alpha_composite_with_control(in_img, sk_img, slider_value)
+    return result_img
 
 def replace_input_with_sketch_image(sketch_image):
     print(f"Sketch Image: {sketch_image}\n")
     sketch, is_dict = get_image_from_dict(sketch_image)
     return sketch
 
+def on_input_image_change(image_path):
+    if image_path is None:
+        gr.Warning("Please upload an Input Image to get started.")
+        return None, None
+    img, img_path = convert_to_rgba_png(image_path)
+    with Image.open(img_path) as pil_img:
+        width, height = pil_img.size
+    return [img_path, gr.update(width=width, height=height)]
+
 @spaces.GPU()
 def getVersions():
     return versions_html()
@@ -665,35 +691,23 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
                 image_mode="RGB",
                 format="PNG"
             )
-            def on_input_image_change(image_path):
-                if image_path is None:
-                    gr.Warning("Please upload an Input Image to get started.")
-                    return None
-                img, img_path = convert_to_rgba_png(image_path)
-                return img_path
-
-            input_image.input(
-                fn=on_input_image_change,
-                inputs=[input_image],
-                outputs=[input_image], scroll_to_output=True,
-            )
+
         with gr.Column(scale=0):
-            with gr.Accordion("Sketch Pad (WIP)", open = False):
+            with gr.Accordion("Sketch Pad", open = False):
                 with gr.Row():
                     sketch_image = gr.Sketchpad(
                         label="Sketch Image",
                         type="filepath",
                         #invert_colors=True,
-                        #source=['upload','canvas'],
+                        #sources=['upload','canvas'],
                         #tool=['editor','select','color-sketch'],
                         placeholder="Draw a sketch or upload an image. Currently broken in gradio 5.17.1",
                         interactive=True,
                         elem_classes="centered solid imgcontainer",
                         key="imgSketch",
-                        image_mode="RGB",
+                        image_mode="RGBA",
                         format="PNG",
-                        width=512,  # Default width
-                        height=512  # Default height
+                        brush=gr.Brush()
                     )
                 with gr.Row():
                     with gr.Column(scale=1):
@@ -895,10 +909,15 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
         inputs=[input_image, composite_color, composite_opacity],
         outputs=[input_image]
     )
+    input_image.input(
+        fn=on_input_image_change,
+        inputs=[input_image],
+        outputs=[input_image,sketch_image], scroll_to_output=True,
+    )
     #use conditioned_image as the input_image for generate_input_image_click
     generate_input_image_from_gallery.click(
         fn=run_lora,
-        inputs=[prompt, input_image, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge_to_default, gr.State(True)],
+        inputs=[prompt, map_options, input_image, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge_to_default, gr.State(True)],
         outputs=[input_image, seed, progress_bar], scroll_to_output=True
     )
     prerendered_image_gallery.select(
@@ -908,7 +927,7 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
         show_api=False, scroll_to_output=True
     )
     alpha_composite_slider.change(
-        fn=alpha_composite_with_control,
+        fn=composite_with_control_sync,
         inputs=[input_image, sketch_image, alpha_composite_slider],
         outputs=[input_image],
         scroll_to_output=True
@@ -941,7 +960,7 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
     gr.on(
         triggers=[generate_button.click, prompt.submit],
         fn=run_lora,
-        inputs=[prompt, input_image, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge_to_default, gr.State(False)],
+        inputs=[prompt, map_options, input_image, image_strength, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale, enlarge_to_default, gr.State(False)],
         outputs=[input_image, seed, progress_bar]
     )
 

modules/image_utils.py

@@ -17,10 +17,10 @@ from modules.color_utils import (
 )
 def get_image_from_dict(image_path):
     if isinstance(image_path, dict) :
-        if 'image' in image_path:
-            image_path = image_path.get('image')
-        elif 'composite' in image_path:
+        if 'composite' in image_path:
             image_path = image_path.get('composite')
+        elif 'image' in image_path:
+            image_path = image_path.get('image')
         else:
             print("\n Unknown image dictionary.\n")
             raise UserWarning("Unknown image dictionary.")

style_20250128.css

@@ -20,7 +20,7 @@
     background-color: rgba(242, 218, 163, 0.62);
 }
 
-.dark .gradio-container.gradio-container-5-20-0 .contain .intro {
+.dark .gradio-container.gradio-container-5-20-1 .contain .intro {
     background-color: rgba(41, 18, 5, 0.38) !important;
 }