Merge pull request #172 from zero01101/i167

fixes issue 167

css/index.css

@@ -650,3 +650,8 @@ select > .style-select-option:active {
 .thirdwidth {
 	max-width: 33%;
 }
+
+.refreshbutton {
+	max-width: 50%;
+	max-height: 50%;
+}

css/ui/generic.css

@@ -212,6 +212,10 @@ div.autocomplete > .autocomplete-text {
 	width: 100%;
 }
 
+div.autocomplete > .refreshable {
+	width: 82% !important;
+}
+
 div.autocomplete > .autocomplete-list {
 	position: absolute;
 

index.html

@@ -7,10 +7,10 @@
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="css/icons.css?v=9ae0466" rel="stylesheet" />
 
-		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
+		<link href="css/index.css?v=882f400" rel="stylesheet" />
 		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=802bd41" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" />
@@ -85,6 +85,13 @@
 				<div class="content">
 					<label>Model:</label>
 					<div id="models-ac-select"></div>
+					<button id="refreshModelsBtn" onclick="getModels(true)">
+						<img
+							class="refreshbutton"
+							src="./res/icons/refresh-cw.svg"
+							alt="refresh models"
+							title="refresh models" />
+					</button>
 					<label>Sampler:</label>
 					<div id="sampler-ac-select"></div>
 					<label for="seed">Seed (-1 for random):</label>
@@ -348,7 +355,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=fe9b702" type="text/javascript"></script>
 
 		<script
 			src="js/initalize/layers.populate.js?v=39785ac"
@@ -359,7 +366,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=b446b93" type="text/javascript"></script>
+		<script src="js/index.js?v=dc296e8" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"

js/index.js

@@ -589,9 +589,12 @@ const makeSlider = (
 	});
 };
 
-const modelAutoComplete = createAutoComplete(
+let modelAutoComplete = createAutoComplete(
 	"Model",
-	document.getElementById("models-ac-select")
+	document.getElementById("models-ac-select"),
+	{},
+	document.getElementById("refreshModelsBtn"),
+	"refreshable"
 );
 modelAutoComplete.onchange.on(({value}) => {
 	if (value.toLowerCase().includes("inpainting"))
@@ -956,7 +959,7 @@ async function getUpscalers() {
 	*/
 }
 
-async function getModels() {
+async function getModels(refresh = false) {
 	const url = document.getElementById("host").value + "/sdapi/v1/sd-models";
 	let opt = null;
 
@@ -983,7 +986,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);
@@ -993,31 +996,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")) {

js/lib/ui.js

@@ -207,9 +207,17 @@ function createSlider(name, wrapper, options = {}) {
  * @param {object} options Extra options
  * @param {boolean} options.multiple Whether multiple options can be selected
  * @param {{name: string, value: string, optionelcb: (el: HTMLOptionElement) => void}[]} options.options Options to add to the selector
+ * @param {object} extraEl Additional element to include in wrapper div (e.g. model refresh button)
+ * @param {string} extraClass Additional class to attach to the autocomplete input element
  * @returns {AutoCompleteElement}
  */
-function createAutoComplete(name, wrapper, options = {}) {
+function createAutoComplete(
+	name,
+	wrapper,
+	options = {},
+	extraEl = null,
+	extraClass = null
+) {
 	defaultOpt(options, {
 		multiple: false,
 		options: [],
@@ -220,6 +228,9 @@ function createAutoComplete(name, wrapper, options = {}) {
 	const inputEl = document.createElement("input");
 	inputEl.type = "text";
 	inputEl.classList.add("autocomplete-text");
+	if (extraClass != null) {
+		inputEl.classList.add(extraClass);
+	}
 
 	const autocompleteEl = document.createElement("div");
 	autocompleteEl.classList.add("autocomplete-list", "display-none");
@@ -230,6 +241,9 @@ function createAutoComplete(name, wrapper, options = {}) {
 
 	wrapper.appendChild(inputEl);
 	wrapper.appendChild(autocompleteEl);
+	if (extraEl != null) {
+		wrapper.appendChild(extraEl);
+	}
 
 	const acobj = {
 		name,
@@ -304,7 +318,7 @@ function createAutoComplete(name, wrapper, options = {}) {
 				autocompleteEl.appendChild(optionEl);
 			});
 
-			updateOptions();
+			updateOptions("");
 		},
 	};
 
@@ -317,8 +331,8 @@ function createAutoComplete(name, wrapper, options = {}) {
 			.join(", ");
 	}
 
-	function updateOptions() {
-		const text = inputEl.value.toLowerCase().trim();
+	function updateOptions(value = null) {
+		const text = value ?? inputEl.value.toLowerCase().trim();
 
 		acobj._options.forEach((opt) => {
 			const textLocation = opt.name.toLowerCase().indexOf(text);

pages/configuration.html

@@ -7,10 +7,10 @@
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="../css/icons.css?v=9ae0466" rel="stylesheet" />
 
-		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
+		<link href="../css/index.css?v=882f400" rel="stylesheet" />
 		<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=802bd41" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=30837f8" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=ae472cd" rel="stylesheet" />

res/icons/refresh-cw.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 2v6h-6"></path>
+  <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
+  <path d="M3 22v-6h6"></path>
+  <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
+
+</svg>