add color indication for inpainting models

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/index.css

@@ -304,6 +304,15 @@ input#host {
 	box-sizing: border-box;
 }
 
+/* Model Select */
+#models-ac-select option {
+	background-color: #fcc;
+}
+
+#models-ac-select option.inpainting {
+	background-color: #cfc;
+}
+
 /* Settings button */
 .ui.icon.header-button {
 	padding: 0;

js/index.js

@@ -531,6 +531,16 @@ const 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";
+});
 
 const samplerAutoComplete = createAutoComplete(
 	"Sampler",
@@ -782,6 +792,10 @@ async function getModels() {
 		modelAutoComplete.options = data.map((option) => ({
 			name: option.title,
 			value: option.title,
+			optionelcb: (el) => {
+				if (option.title.toLowerCase().includes("inpainting"))
+					el.classList.add("inpainting");
+			},
 		}));
 
 		try {

js/lib/ui.js

@@ -206,7 +206,7 @@ function createSlider(name, wrapper, options = {}) {
  * @param {HTMLDivElement} wrapper The div element that will wrap the input elements
  * @param {object} options Extra options
  * @param {boolean} options.multiple Whether multiple options can be selected
- * @param {{name: string, value: string}[]} options.options Options to add to the selector
+ * @param {{name: string, value: string, optionelcb: (el: HTMLOptionElement) => void}[]} options.options Options to add to the selector
  * @returns {AutoCompleteElement}
  */
 function createAutoComplete(name, wrapper, options = {}) {
@@ -293,6 +293,7 @@ function createAutoComplete(name, wrapper, options = {}) {
 				const optionEl = document.createElement("option");
 				optionEl.classList.add("autocomplete-option");
 				optionEl.title = title || name;
+				if (opt.optionelcb) opt.optionelcb(optionEl);
 
 				const option = {name, value, optionElement: optionEl};