From d35a89bb010dbd57c76dba43522adfae35169c49 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Thu, 3 Aug 2023 17:08:21 +0530
Subject: [PATCH] Show the controlnet buttons only for diffusers

---
 ui/index.html             | 111 +++++++++++++++++++-------------------
 ui/media/js/parameters.js |   2 +
 2 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 8bc2a0ba..7cedc0e5 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -161,60 +161,63 @@
                             <a href="https://github.com/easydiffusion/easydiffusion/wiki/Clip-Skip" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Clip Skip</span></i></a>
                         </td>
                     </tr>
-                    <tr id="controlnet_model_container" class="pl-5"><td><label for="controlnet_model">ControlNet Image:</label></td><td>
-                        <div id="control_image_wrapper" class="preview_image_wrapper">
-                            <img id="control_image_preview" class="image_preview" src="" crossorigin="anonymous" />
-                            <span id="control_image_size_box" class="img_bottom_label"></span>
-                            <button class="control_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
-                        </div>
-                        <input id="control_image" name="control_image" type="file" />
-                        <a href="https://github.com/easydiffusion/easydiffusion/wiki/ControlNet" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about ControlNets</span></i></a>
-                        <div id="controlnet_config" class="displayNone">
-                            <label><small>Filter to apply:</small></label>
-                            <select id="control_image_filter">
-                                <option value="">None</option>
-                                <optgroup label="Pose">
-                                    <option value="openpose">OpenPose (*)</option>
-                                    <option value="openpose_face">OpenPose face</option>
-                                    <option value="openpose_faceonly">OpenPose face-only</option>
-                                    <option value="openpose_hand">OpenPose hand</option>
-                                    <option value="openpose_full">OpenPose full</option>
-                                </optgroup>
-                                <optgroup label="Outline">
-                                    <option value="canny">Canny (*)</option>
-                                    <option value="mlsd">Straight lines</option>
-                                    <option value="scribble_hed">Scribble hed (*)</option>
-                                    <option value="scribble_hedsafe">Scribble hedsafe</option>
-                                    <option value="scribble_pidinet">Scribble pidinet</option>
-                                    <option value="scribble_pidsafe">Scribble pidsafe</option>
-                                    <option value="softedge_hed">Softedge hed</option>
-                                    <option value="softedge_hedsafe">Softedge hedsafe</option>
-                                    <option value="softedge_pidinet">Softedge pidinet</option>
-                                    <option value="softedge_pidsafe">Softedge pidsafe</option>
-                                </optgroup>
-                                <optgroup label="Depth">
-                                    <option value="normal_bae">Normal bae (*)</option>
-                                    <option value="depth_midas">Depth midas</option>
-                                    <option value="depth_zoe">Depth zoe</option>
-                                    <option value="depth_leres">Depth leres</option>
-                                    <option value="depth_leres++">Depth leres++</option>
-                                </optgroup>
-                                <optgroup label="Line art">
-                                    <option value="lineart_coarse">Lineart coarse</option>
-                                    <option value="lineart_realistic">Lineart realistic</option>
-                                    <option value="lineart_anime">Lineart anime</option>
-                                </optgroup>
-                                <optgroup label="Misc">
-                                    <option value="shuffle">Shuffle</option>
-                                    <option value="segment">Segment</option>
-                                </optgroup>
-                            </select>
-                            <br/>
-                            <label for="controlnet_model"><small>Model:</small></label> <input id="controlnet_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-                            <br/>
-                            <label><small>Will download the necessary models, the first time.</small></label>
-                        </div>
-                    </td></tr>
+                    <tr id="controlnet_model_container" class="pl-5">
+                        <td><label for="controlnet_model">ControlNet Image:</label></td>
+                        <td class="diffusers-restart-needed">
+                            <div id="control_image_wrapper" class="preview_image_wrapper">
+                                <img id="control_image_preview" class="image_preview" src="" crossorigin="anonymous" />
+                                <span id="control_image_size_box" class="img_bottom_label"></span>
+                                <button class="control_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
+                            </div>
+                            <input id="control_image" name="control_image" type="file" />
+                            <a href="https://github.com/easydiffusion/easydiffusion/wiki/ControlNet" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about ControlNets</span></i></a>
+                            <div id="controlnet_config" class="displayNone">
+                                <label><small>Filter to apply:</small></label>
+                                <select id="control_image_filter">
+                                    <option value="">None</option>
+                                    <optgroup label="Pose">
+                                        <option value="openpose">OpenPose (*)</option>
+                                        <option value="openpose_face">OpenPose face</option>
+                                        <option value="openpose_faceonly">OpenPose face-only</option>
+                                        <option value="openpose_hand">OpenPose hand</option>
+                                        <option value="openpose_full">OpenPose full</option>
+                                    </optgroup>
+                                    <optgroup label="Outline">
+                                        <option value="canny">Canny (*)</option>
+                                        <option value="mlsd">Straight lines</option>
+                                        <option value="scribble_hed">Scribble hed (*)</option>
+                                        <option value="scribble_hedsafe">Scribble hedsafe</option>
+                                        <option value="scribble_pidinet">Scribble pidinet</option>
+                                        <option value="scribble_pidsafe">Scribble pidsafe</option>
+                                        <option value="softedge_hed">Softedge hed</option>
+                                        <option value="softedge_hedsafe">Softedge hedsafe</option>
+                                        <option value="softedge_pidinet">Softedge pidinet</option>
+                                        <option value="softedge_pidsafe">Softedge pidsafe</option>
+                                    </optgroup>
+                                    <optgroup label="Depth">
+                                        <option value="normal_bae">Normal bae (*)</option>
+                                        <option value="depth_midas">Depth midas</option>
+                                        <option value="depth_zoe">Depth zoe</option>
+                                        <option value="depth_leres">Depth leres</option>
+                                        <option value="depth_leres++">Depth leres++</option>
+                                    </optgroup>
+                                    <optgroup label="Line art">
+                                        <option value="lineart_coarse">Lineart coarse</option>
+                                        <option value="lineart_realistic">Lineart realistic</option>
+                                        <option value="lineart_anime">Lineart anime</option>
+                                    </optgroup>
+                                    <optgroup label="Misc">
+                                        <option value="shuffle">Shuffle</option>
+                                        <option value="segment">Segment</option>
+                                    </optgroup>
+                                </select>
+                                <br/>
+                                <label for="controlnet_model"><small>Model:</small></label> <input id="controlnet_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
+                                <br/>
+                                <label><small>Will download the necessary models, the first time.</small></label>
+                            </div>
+                        </td>
+                    </tr>
                     <tr class="pl-5"><td><label for="vae_model">Custom VAE:</label></td><td>
                         <input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                         <a href="https://github.com/easydiffusion/easydiffusion/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index b97356ec..8ff902a9 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -461,6 +461,7 @@ async function getAppConfig() {
         if (!testDiffusersEnabled) {
             document.querySelector("#lora_model_container").style.display = "none"
             document.querySelector("#tiling_container").style.display = "none"
+            document.querySelector("#controlnet_model_container").style.display = "none"
 
             document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
                 option.style.display = "none"
@@ -470,6 +471,7 @@ async function getAppConfig() {
         } else {
             document.querySelector("#lora_model_container").style.display = ""
             document.querySelector("#tiling_container").style.display = ""
+            document.querySelector("#controlnet_model_container").style.display = ""
 
             document.querySelectorAll("#sampler_name option.k_diffusion-only").forEach((option) => {
                 option.style.display = "none"