From 28988f84bb17e74ce0ac17b650a740608385519d Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 20:08:02 -0300
Subject: [PATCH] no recreating div

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html   |  6 ++---
 js/index.js  | 73 +++++++++++++++++++---------------------------------
 js/lib/ui.js |  6 ++---
 3 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/index.html b/index.html
index 8f3b70a..1d60876 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,7 @@
 					Stable Diffusion settings
 				</button>
 				<div class="content">
-					<button id="refreshModelsBtn" onclick="refreshModels()">🔄</button>
+					<button id="refreshModelsBtn" onclick="getModels(true)">🔄</button>
 					<label>Model:</label>
 					<div id="models-ac-select"></div>
 					<label>Sampler:</label>
@@ -349,7 +349,7 @@
 		<script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script>
 
 		<script src="js/lib/toolbar.js?v=306d637" type="text/javascript"></script>
-		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
+		<script src="js/lib/ui.js?v=5e14f7e" type="text/javascript"></script>
 
 		<script
 			src="js/initalize/layers.populate.js?v=39785ac"
@@ -360,7 +360,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=531781d" type="text/javascript"></script>
+		<script src="js/index.js?v=77f3c91" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
diff --git a/js/index.js b/js/index.js
index 41c98bc..05dee87 100644
--- a/js/index.js
+++ b/js/index.js
@@ -956,29 +956,7 @@ async function getUpscalers() {
 	*/
 }
 
-async function refreshModels() {
-	var original = document.getElementById("models-ac-select");
-	var newdiv = document.createElement("div");
-	newdiv.id = "models-ac-select";
-	original.replaceWith(newdiv);
-	modelAutoComplete = createAutoComplete(
-		"Model",
-		document.getElementById("models-ac-select")
-	);
-	modelAutoComplete.onchange.on(({value}) => {
-		if (value.toLowerCase().includes("inpainting"))
-			document.querySelector(
-				"#models-ac-select input.autocomplete-text"
-			).style.backgroundColor = "#cfc";
-		else
-			document.querySelector(
-				"#models-ac-select input.autocomplete-text"
-			).style.backgroundColor = "#fcc";
-	});
-	getModels();
-}
-
-async function getModels() {
+async function getModels(refresh = false) {
 	const url = document.getElementById("host").value + "/sdapi/v1/sd-models";
 	let opt = null;
 
@@ -1005,7 +983,7 @@ async function getModels() {
 
 			const model = optData.sd_model_checkpoint;
 			console.log("Current model: " + model);
-			modelAutoComplete.value = model;
+			if (modelAutoComplete.value !== model) modelAutoComplete.value = model;
 		} catch (e) {
 			console.warn("[index] Failed to fetch current model:");
 			console.warn(e);
@@ -1015,31 +993,32 @@ async function getModels() {
 		console.warn(e);
 	}
 
-	modelAutoComplete.onchange.on(async ({value}) => {
-		console.log(`[index] Changing model to [${value}]`);
-		const payload = {
-			sd_model_checkpoint: value,
-		};
-		const url = document.getElementById("host").value + "/sdapi/v1/options/";
-		try {
-			await fetch(url, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify(payload),
-			});
+	if (!refresh)
+		modelAutoComplete.onchange.on(async ({value}) => {
+			console.log(`[index] Changing model to [${value}]`);
+			const payload = {
+				sd_model_checkpoint: value,
+			};
+			const url = document.getElementById("host").value + "/sdapi/v1/options/";
+			try {
+				await fetch(url, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(payload),
+				});
 
-			alert(`Model changed to [${value}]`);
-		} catch (e) {
-			console.warn("[index] Error changing model");
-			console.warn(e);
+				alert(`Model changed to [${value}]`);
+			} catch (e) {
+				console.warn("[index] Error changing model");
+				console.warn(e);
 
-			alert(
-				"Error changing model, please check console for additional information"
-			);
-		}
-	});
+				alert(
+					"Error changing model, please check console for additional information"
+				);
+			}
+		});
 
 	// If first time running, ask if user wants to switch to an inpainting model
 	if (global.firstRun && !modelAutoComplete.value.includes("inpainting")) {
diff --git a/js/lib/ui.js b/js/lib/ui.js
index e0d7598..9742720 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -304,7 +304,7 @@ function createAutoComplete(name, wrapper, options = {}) {
 				autocompleteEl.appendChild(optionEl);
 			});
 
-			updateOptions();
+			updateOptions("");
 		},
 	};
 
@@ -317,8 +317,8 @@ function createAutoComplete(name, wrapper, options = {}) {
 			.join(", ");
 	}
 
-	function updateOptions() {
-		const text = inputEl.value.toLowerCase().trim();
+	function updateOptions(value = null) {
+		text = value ?? inputEl.value.toLowerCase().trim();
 
 		acobj._options.forEach((opt) => {
 			const textLocation = opt.name.toLowerCase().indexOf(text);