diff --git a/css/index.css b/css/index.css index a39c2c6..80fa23d 100644 --- a/css/index.css +++ b/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; diff --git a/js/index.js b/js/index.js index 133439f..b3403a4 100644 --- a/js/index.js +++ b/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 { diff --git a/js/lib/ui.js b/js/lib/ui.js index 5e4cd22..e0d7598 100644 --- a/js/lib/ui.js +++ b/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};