Merge pull request #52 from seijihariki/quick-patches

Quick patches 2

css/index.css

@@ -97,8 +97,9 @@ body {
 
 .content {
 	max-height: 0;
-	overflow: hidden;
+	overflow-y: clip;
-	transition: max-height 0.2s ease-out;
+	overflow-x: visible;
+	transition: max-height 0.2s ease-out, height 0s ease-out;
 }
 
 .menu-container {
@@ -155,3 +156,30 @@ body {
 	font-weight: 600;
 	color: #fff;
 }
+
+#models {
+	width: 100%;
+	text-overflow: ellipsis;
+}
+
+/* Prompt Fields */
+
+div.prompt-wrapper {
+	overflow: visible;
+}
+
+div.prompt-wrapper > textarea {
+	margin: 0;
+	padding: 0;
+
+	top: 0px;
+	bottom: 0px;
+	left: 0px;
+	right: 0;
+
+	resize: vertical;
+}
+
+div.prompt-wrapper > textarea:focus {
+	width: 700px;
+}

index.html

@@ -37,16 +37,13 @@
 				<div class="content">
 					<label for="prompt">Prompt:</label>
 					<br />
-					<textarea id="prompt">
+					<div class="prompt-wrapper">
-ocean floor scientific expedition, underwater wildlife</textarea
+						<textarea id="prompt"></textarea>
-					>
+					</div>
-					<br />
 					<label for="negPrompt">Negative prompt:</label>
-					<br />
+					<div class="prompt-wrapper">
-					<textarea id="negPrompt">
+						<textarea id="negPrompt"></textarea>
-people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea
+					</div>
-					>
-					<br />
 					<!-- <hr /> -->
 				</div>
 				<!-- SD section -->

js/index.js

@@ -113,8 +113,29 @@ const bgCanvas = document.getElementById("backgroundCanvas"); // gray bg grid
 const bgCtx = bgCanvas.getContext("2d");
 
 function startup() {
-	checkIfWebuiIsRunning();
 	loadSettings();
+
+	const hostEl = document.getElementById("host");
+	hostEl.oninput = () => {
+		host = hostEl.value;
+		localStorage.setItem("host", host);
+	};
+
+	const promptEl = document.getElementById("prompt");
+	promptEl.oninput = () => {
+		stableDiffusionData.prompt = promptEl.value;
+		promptEl.title = promptEl.value;
+		localStorage.setItem("prompt", stableDiffusionData.prompt);
+	};
+
+	const negPromptEl = document.getElementById("negPrompt");
+	negPromptEl.oninput = () => {
+		stableDiffusionData.negative_prompt = negPromptEl.value;
+		negPromptEl.title = negPromptEl.value;
+		localStorage.setItem("neg_prompt", stableDiffusionData.negative_prompt);
+	};
+
+	checkIfWebuiIsRunning();
 	getSamplers();
 	getUpscalers();
 	getModels();
@@ -859,6 +880,18 @@ async function upscaleAndDownload() {
 
 function loadSettings() {
 	// set default values if not set
+	var _host =
+		localStorage.getItem("host") == null
+			? "http://127.0.0.1:7860"
+			: localStorage.getItem("host");
+	var _prompt =
+		localStorage.getItem("prompt") == null
+			? "oceanographic study, underwater wildlife, award winning"
+			: localStorage.getItem("prompt");
+	var _negprompt =
+		localStorage.getItem("neg_prompt") == null
+			? "people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry"
+			: localStorage.getItem("neg_prompt");
 	var _sampler =
 		localStorage.getItem("sampler") == null
 			? "DDIM"
@@ -885,9 +918,18 @@ function loadSettings() {
 			: localStorage.getItem("overmask_px");
 
 	// set the values into the UI
+	document.getElementById("host").value = String(_host);
+	document.getElementById("prompt").value = String(_prompt);
+	document.getElementById("prompt").title = String(_prompt);
+	document.getElementById("negPrompt").value = String(_negprompt);
+	document.getElementById("negPrompt").title = String(_negprompt);
 	document.getElementById("samplerSelect").value = String(_sampler);
 	document.getElementById("maskBlur").value = Number(_mask_blur);
 	document.getElementById("seed").value = Number(_seed);
 	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
 	// document.getElementById("overMaskPx").value = Number(_overmask_px);
 }
+
+document.getElementById("mainHSplit").addEventListener("wheel", (evn) => {
+	evn.preventDefault();
+});

js/input.js

@@ -323,7 +323,6 @@ window.onmousemove = (evn) => {
 window.addEventListener(
 	"wheel",
 	(evn) => {
-		evn.preventDefault();
 		mouse.contexts.forEach(({name}) => {
 			mouse.listen[name].onwheel.emit({
 				target: evn.target,

js/settingsbar.js

@@ -36,13 +36,32 @@ document.querySelectorAll(".floating-window").forEach((w) => {
 
 var coll = document.getElementsByClassName("collapsible");
 for (var i = 0; i < coll.length; i++) {
+	let active = false;
 	coll[i].addEventListener("click", function () {
-		this.classList.toggle("active");
 		var content = this.nextElementSibling;
-		if (content.style.maxHeight) {
+
+		if (!active) {
+			this.classList.add("active");
+			content.classList.add("active");
+		} else {
+			this.classList.remove("active");
+			content.classList.remove("active");
+		}
+
+		const observer = new ResizeObserver(() => {
+			if (active) content.style.maxHeight = content.scrollHeight + "px";
+		});
+
+		Array.from(content.children).forEach((child) => {
+			observer.observe(child);
+		});
+
+		if (active) {
 			content.style.maxHeight = null;
+			active = false;
 		} else {
 			content.style.maxHeight = content.scrollHeight + "px";
+			active = true;
 		}
 	});
 }