28. Sept. 2024, 12:36

app.py

@@ -288,20 +288,31 @@ with gr.Blocks(theme=theme, css=custom_css, js=custom_js) as demo:
         )
     with gr.Tab("Preprocessors"):
         with gr.Row(elem_classes="row-main"):
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, elem_id="input_column", elem_classes="input-column"):
                 input_image = gr.Image(label="Input Image", type="numpy", height=512)
 
                 ## TAB LINEART
                 with gr.Tab("Lineart"):
                     with gr.Row():
-                        gr.Markdown("## Lineart \n<p>Check Invert to use with Mochi Diffusion.  Inverted image can also be created here for use with ControlNet Scribble.")
+                        gr.Markdown("<p>Check Invert to use with Mochi Diffusion. Inverted image can also be created here for use with ControlNet Scribble.")
                     with gr.Row():
                         with gr.Column():
                             preprocessor_name = gr.Radio(label="Preprocessor", show_label=False, choices=["Lineart", "Lineart Coarse", "Lineart Anime"], type="value", value="Lineart")
-                            invert = gr.Checkbox(label="Invertiert", value=True)
+                            invert = gr.Checkbox(label="Invertiert", value=True, elem_classes="toggle-btn")
                             resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
                             run_btn_lineart = gr.Button("Run")
 
+                ## TAB Canny
+                with gr.Tab("Canny Edge"):
+                    with gr.Row():
+                        gr.Markdown("## Canny Edge")
+                    with gr.Row():
+                        with gr.Column():
+                            low_threshold = gr.Slider(label="low_threshold", minimum=1, maximum=255, value=100, step=1)
+                            high_threshold = gr.Slider(label="high_threshold", minimum=1, maximum=255, value=200, step=1)
+                            resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
+                            run_btn_canny = gr.Button("Run")
+
             with gr.Column(scale=2):
                 gallery = gr.Gallery(label="Generated images", show_label=False, interactive=False, format="png", elem_id="output_gallery", elem_classes="output-gallery", columns=[3], rows=[2], object_fit="contain", height="auto", type="filepath")
 
@@ -313,7 +324,10 @@ with gr.Blocks(theme=theme, css=custom_css, js=custom_js) as demo:
                     # Das Tutorial kommt bald.
                     """
                 )
+                
+    # MARK: Button Runs
     run_btn_lineart.click(fn=lineart, inputs=[input_image, resolution, preprocessor_name, invert, gallery], outputs=[gallery])
+    run_btn_canny.click(fn=canny, inputs=[input_image, resolution, low_threshold, high_threshold, gallery], outputs=[gallery])
 
 
 """
@@ -329,7 +343,7 @@ with gr.Blocks(theme=theme, css="custom.css", js="javascript.js") as demo:
                 low_threshold = gr.Slider(label="low_threshold", minimum=1, maximum=255, value=100, step=1)
                 high_threshold = gr.Slider(label="high_threshold", minimum=1, maximum=255, value=200, step=1)
                 resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
-                run_button = gr.Button("Run")
+                run_btn_canny = gr.Button("Run")
             #            run_button = gr.Button(label="Run")
             with gr.Column():
                 #            gallery = gr.Gallery(label="Generated images", show_label=False).style(height="auto")