From dd21c07d4a64dfddd42968e2e37ffedc6c1ba97e Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 13 Feb 2023 00:13:13 +0100
Subject: [PATCH] Use new model selector for merging and gfpgan

---
 ui/index.html                 |  2 +-
 ui/media/js/main.js           |  2 +-
 ui/plugins/ui/merge.plugin.js | 22 ++++++++++------------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 1f29b855..734bedf9 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -228,7 +228,7 @@
                     <div><ul>
                     <li><b class="settings-subheader">Render Settings</b></li>
                     <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slower images)</small></label></li>
-                    <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes <small><select id="gfpgan_model" name="gfpgan_model"></select></small></label></li>
+                    <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <small><input id="gfpgan_model" type="text" spellcheck="false" class="model-filter" data-path="" /></small></li>
                     <li class="pl-5">
                         <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Scale up by</label> 
                         <select id="upscale_amount" name="upscale_amount">
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 2b190654..3307b9e7 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -33,7 +33,7 @@ let promptStrengthField = document.querySelector('#prompt_strength')
 let samplerField = document.querySelector('#sampler_name')
 let samplerSelectionContainer = document.querySelector("#samplerSelection")
 let useFaceCorrectionField = document.querySelector("#use_face_correction")
-let gfpganModelField = document.querySelector("#gfpgan_model")
+let gfpganModelField = new ModelDropdown(document.querySelector("#gfpgan_model"), 'gfpgan', 'None')
 let useUpscalingField = document.querySelector("#use_upscale")
 let upscaleModelField = document.querySelector("#upscale_model")
 let upscaleAmountField = document.querySelector("#upscale_amount")
diff --git a/ui/plugins/ui/merge.plugin.js b/ui/plugins/ui/merge.plugin.js
index 93508ead..1d6f3cbf 100644
--- a/ui/plugins/ui/merge.plugin.js
+++ b/ui/plugins/ui/merge.plugin.js
@@ -241,13 +241,9 @@
     <div class="merge-container panel-box">
       <div class="merge-input">
          <p><label for="#mergeModelA">Select Model A:</label></p>
-         <select id="mergeModelA">
-             <option>A</option>
-         </select>
+         <input id="mergeModelA" type="text" spellcheck="false" class="model-filter" data-path="" />
          <p><label for="#mergeModelB">Select Model B:</label></p>
-         <select id="mergeModelB">
-             <option>A</option>
-         </select>
+         <input id="mergeModelB" type="text" spellcheck="false" class="model-filter" data-path="" />
          <br/><br/>
          <p id="merge-warning"><small><b>Important:</b> Please merge models of similar type.<br/>For e.g. <code>SD 1.4</code> models with only <code>SD 1.4/1.5</code> models,<br/><code>SD 2.0</code> with <code>SD 2.0</code>-type, and <code>SD 2.1</code> with <code>SD 2.1</code>-type models.</small></p>
          <br/>
@@ -337,17 +333,19 @@
     const tabSettingsBatch = document.querySelector('#tab-merge-opts-batch')
     linkTabContents(tabSettingsSingle)
     linkTabContents(tabSettingsBatch)
+    let mergeModelAField = new ModelDropdown(document.querySelector('#mergeModelA'), 'stable-diffusion')
+    let mergeModelBField = new ModelDropdown(document.querySelector('#mergeModelB'), 'stable-diffusion')
 
     /////////////////////// Event Listener
     document.addEventListener('tabClick', (e) => { 
         if (e.detail.name == 'merge') {
 	    console.log('Activate')
-            let modelList = stableDiffusionModelField.cloneNode(true)
-            modelList.id = "mergeModelA"
-            document.querySelector("#mergeModelA").replaceWith(modelList)
-            modelList = stableDiffusionModelField.cloneNode(true)
-            modelList.id = "mergeModelB"
-            document.querySelector("#mergeModelB").replaceWith(modelList)
+            // let modelList = stableDiffusionModelField.cloneNode(true)
+            // modelList.id = "mergeModelA"
+            // document.querySelector("#mergeModelA").replaceWith(modelList)
+            // modelList = stableDiffusionModelField.cloneNode(true)
+            // modelList.id = "mergeModelB"
+            // document.querySelector("#mergeModelB").replaceWith(modelList)
             updateChart()
 	}
     })