definitive (for now) fix for None style

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

css/ui/generic.css

@@ -94,3 +94,22 @@ div.slider-wrapper > input.text {
 	text-align: center;
 	background-color: transparent;
 }
+
+/* Select Input */
+select > option:checked::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("/res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("/res/icons/check.svg");
+	mask-size: contain;
+}

js/index.js

@@ -779,7 +779,12 @@ async function getStyles() {
 			option.text = style.name;
 			option.value = style.name;
 			option.title = `prompt: ${style.prompt}\nnegative: ${style.negative_prompt}`;
-			option.selected = !!stored.find((styleName) => style.name === styleName);
+			if (stored.length === 0) option.selected = style.name === "None";
+			else
+				option.selected = !!stored.find(
+					(styleName) => style.name === styleName
+				);
+
 			styleSelect.add(option);
 		});
 
@@ -803,14 +808,21 @@ function changeStyles() {
 	const selected = Array.from(styleSelectEl.options).filter(
 		(option) => option.selected
 	);
-	const selectedString = selected.map((option) => option.value);
+	let selectedString = selected.map((option) => option.value);
 
-	selectedString != "None"
-		? localStorage.setItem("promptStyle", JSON.stringify(selectedString))
-		: localStorage.setItem("promptStyle", "[]");
+	if (selectedString.find((selected) => selected === "None")) {
+		selectedString = [];
+		Array.from(styleSelectEl.options).forEach((option) => {
+			if (option.value !== "None") option.selected = false;
+		});
+	}
+
+	localStorage.setItem("promptStyle", JSON.stringify(selectedString));
 
 	// change the model
-	console.log(`[index] Changing styles to ${selectedString.join(", ")}`);
+	if (selectedString.length > 0)
+		console.log(`[index] Changing styles to ${selectedString.join(", ")}`);
+	else console.log(`[index] Clearing styles`);
 	stableDiffusionData.styles = selectedString;
 }
 

res/icons/check.svg

@@ -0,0 +1,4 @@
+<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">
+  <polyline points="20 6 9 17 4 12"></polyline>
+
+</svg>