honestly not sure if hacky

refresh button on right-hand side of model selector is definitely better
GUARANTEE css is distressingly hacky

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=7db2c83" 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=93a0450" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" />
@@ -83,9 +83,15 @@
 					Stable Diffusion settings
 				</button>
 				<div class="content">
-					<button id="refreshModelsBtn" onclick="getModels(true)">🔄</button>
 					<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>
@@ -349,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=8172f3d" 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"
@@ -360,7 +366,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=77f3c91" 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

@@ -591,7 +591,10 @@ const makeSlider = (
 
 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"))

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,

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=7db2c83" 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=93a0450" 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>