debug canny

app-controlnet.py

@@ -126,6 +126,7 @@ class InputParams(BaseModel):
     controlnet_end: float = 1.0
     canny_low_threshold: float = 0.31
     canny_high_threshold: float = 0.78
+    debug_canny: bool = False
 
 def predict(
     input_image: Image.Image, params: InputParams, prompt_embeds: torch.Tensor = None
@@ -133,7 +134,6 @@ def predict(
     generator = torch.manual_seed(params.seed)
     
     control_image = canny_torch(input_image, params.canny_low_threshold, params.canny_high_threshold)
-    print(params.canny_low_threshold, params.canny_high_threshold)
     results = pipe(
         control_image=control_image,
         prompt_embeds=prompt_embeds,
@@ -157,7 +157,15 @@ def predict(
     )
     if nsfw_content_detected:
         return None
-    return results.images[0]
+    result_image = results.images[0]
+    if params.debug_canny:
+        # paste control_image on top of result_image
+        w0, h0 = (128, 128)
+        control_image = control_image.resize((w0, h0))
+        w1, h1 = result_image.size
+        result_image.paste(control_image, (w1 - w0, h1 - h0))
+
+    return result_image
 
 
 app = FastAPI()

controlnet/index.html

@@ -16,7 +16,12 @@
     </style>
     <script type="module">
         // you can change the size of the input image to 768x768 if you have a powerful GPU
-        const getValue = (id) => document.querySelector(`${id}`).value;
+        const getValue = (id) => {
+            const el = document.querySelector(`${id}`)
+            if (el.type === "checkbox")
+                return el.checked;
+            return el.value;
+        }
         const startBtn = document.querySelector("#start");
         const stopBtn = document.querySelector("#stop");
         const videoEl = document.querySelector("#webcam");
@@ -115,6 +120,7 @@
                     "controlnet_end": getValue("#controlnet_end"),
                     "canny_low_threshold": getValue("#canny_low_threshold"),
                     "canny_high_threshold": getValue("#canny_high_threshold"),
+                    "debug_canny": getValue("#debug_canny")
                 }));
             }
             let mediaDevices = [];
@@ -381,6 +387,14 @@
                         </div>
                     </div>
                     <!--  -->
+                    <!--  -->
+                    <label class="text-sm font-medium" for="debug_canny">Debug Canny</label>
+                    <div class="col-span-2 flex gap-2">
+                        <input type="checkbox" id="debug_canny" name="debug_canny" class="cursor-pointer">
+                        <label for="debug_canny" class="text-sm cursor-pointer"></label>
+                    </div>
+                    <div></div>
+                    <!--  -->
                 </div>
             </details>
         </div>