Merge branch 'main' into img2img

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

Former-commit-id: 4a07944ebfb71076a6dfb9a83e45a07a30874abd

README.md

@@ -1,6 +1,6 @@
 # hello there 🐠
 
-[openOutpaint creating some undersea wildlife](https://user-images.githubusercontent.com/1765167/203318284-a9f6970f-c9f1-44be-8c61-810aa5ed46be.webm)
+[openOutpaint creating some undersea wildlife](https://user-images.githubusercontent.com/1649724/203454747-9984d408-c973-4e4a-8085-fb1ee6574ff7.webm)
 
 this is a completely vanilla javascript and html canvas outpainting convenience doodad built for the API optionally exposed by [AUTOMATIC1111's stable diffusion webUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui), operating similarly to a few others which certainly have superior functionality. this simply offers an alternative for my following vain desires:
 

index.html

@@ -46,6 +46,12 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
 					Stable Diffusion settings
 				</button>
 				<div class="content">
+					<label for="models">Model:</label>
+					<select id="models" onchange="changeModel()"></select
+					><br />
+					<label for="samplerSelect">Sampler:</label>
+					<select id="samplerSelect" onchange="changeSampler()"></select
+					><br />
 					<label for="seed">Seed (-1 for random):</label> <br />
 					<input
 						type="number"
@@ -55,25 +61,6 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
 						max="9999999999"
 						value="-1"
 						step="1" /><br />
-					<label for="samplerSelect">Sampler:</label>
-					<select id="samplerSelect" onchange="changeSampler()">
-						<option value="DDIM">DDIM</option>
-						<option value="Euler a">Euler A</option>
-						<option value="Euler">Euler</option>
-						<option value="LMS">LMS</option>
-						<option value="Heun">Heun</option>
-						<option value="DPM2">DPM2</option>
-						<option value="DPM2 a">DPM2a</option>
-						<option value="DPM++ 2S a">DPM++2Sa</option>
-						<option value="DPM++ 2m">DPM++2m</option>
-						<option value="DPM fast">DPM fast</option>
-						<option value="DPM adaptive">DPM adaptive</option>
-						<option value="LMS Karras">LMS Karras</option>
-						<option value="DPM2 Karras">DPM2 Karras</option>
-						<option value="DPM2 a Karras">DPM2a Karras</option>
-						<option value="DPM++ 2S a Karras">DPM++2Sa Karras</option>
-						<option value="DPM++ 2M Karras">DPM++2M Karras</option></select
-					><br />
 					<label for="steps">Steps: <input type="number" id="stepsTxt" /></label
 					><br />
 					<input type="range" id="steps" name="steps" min="1" max="50" /><br />
@@ -155,12 +142,8 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
 				<button type="button" class="collapsible">Save/Load/New image</button>
 				<div class="content">
 					<label for="preloadImage">Load image:</label>
-					<input
+					<input type="file" id="preloadImage" onchange="preloadImage()"
-						type="file"
+					accept="image/*" / style="width: 200px;"><br />
-						id="preloadImage"
-						onchange="preloadImage()"
-						accept="image/*"
-						style="width: 200px" /><br />
 					<button onclick="downloadCanvas()">Save canvas</button><br />
 					<label for="upscalers">Choose upscaler</label>
 					<select id="upscalers"></select>

js/index.js

@@ -171,7 +171,9 @@ const bgCtx = bgCanvas.getContext("2d");
 function startup() {
 	checkIfWebuiIsRunning();
 	loadSettings();
+	getSamplers();
 	getUpscalers();
+	getModels();
 	drawBackground();
 	changeScaleFactor();
 	changeSampler();
@@ -532,9 +534,13 @@ function mouseUp(evt) {
 }
 
 function changeSampler() {
+	if (!document.getElementById("samplerSelect").value == "") {
+		// must be done, since before getSamplers is done, the options are empty
+		console.log(document.getElementById("samplerSelect").value == "");
 		stableDiffusionData.sampler_index =
 			document.getElementById("samplerSelect").value;
 		localStorage.setItem("sampler", stableDiffusionData.sampler_index);
+	}
 }
 
 const changeCfgScale = sliderChangeHandlerFactory(
@@ -821,6 +827,99 @@ function getUpscalers() {
 	*/
 }
 
+async function getModels() {
+	var modelSelect = document.getElementById("models");
+	var url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	await fetch(url)
+		.then((response) => response.json())
+		.then((data) => {
+			//console.log(data); All models
+			for (var i = 0; i < data.length; i++) {
+				var option = document.createElement("option");
+				option.text = data[i].model_name;
+				option.value = data[i].title;
+				modelSelect.add(option);
+			}
+		});
+
+	/* 	To get the current model, we might need to call /config/ which returns a json file with EVERYTHING from the webui, 25k lines of json... i havent figured out any other way to get the model thats loaded
+		response >> components >> second component(quicksettings with checkpoint chooser as default) >> value = the current model
+		The current model we get only updates on full restart of WebUI, so if we change the model, and then refresh the page, it will still show the old model.
+		We could just not show the current model, but i think it would be nice to show it.
+	*/
+	await fetch(document.getElementById("host").value + "/config/")
+		.then((response) => response.json())
+		.then((data) => {
+			//console.log(data)
+			var model = data.components[1].props.value;
+			console.log("Current model: " + model);
+			modelSelect.value = model;
+		});
+}
+
+function changeModel() {
+	// change the model
+	console.log("changing model to " + document.getElementById("models").value);
+	var model_title = document.getElementById("models").value;
+	var payload = {
+		sd_model_checkpoint: model_title,
+	};
+	var url = document.getElementById("host").value + "/sdapi/v1/options/";
+	fetch(url, {
+		method: "POST",
+		mode: "cors", // no-cors, *cors, same-origin
+		cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
+		credentials: "same-origin", // include, *same-origin, omit
+		redirect: "follow", // manual, *follow, error
+		referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+		headers: {
+			Accept: "application/json",
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify(payload),
+	})
+		.then((response) => response.json())
+		.then(() => {
+			alert("Model changed to " + model_title);
+		})
+		.catch((error) => {
+			alert(
+				"Error changing model, please check console for additional info\n" +
+					error
+			);
+		});
+}
+
+function getSamplers() {
+	var samplerSelect = document.getElementById("samplerSelect");
+	var url = document.getElementById("host").value + "/sdapi/v1/samplers";
+	fetch(url)
+		.then((response) => response.json())
+		.then((data) => {
+			//console.log(data); All samplers
+			for (var i = 0; i < data.length; i++) {
+				// PLMS SAMPLER DOES NOT WORK FOR ANY IMAGES BEYOND FOR THE INITIAL IMAGE (for me at least), GIVES ASGI Exception; AttributeError: 'PLMSSampler' object has no attribute 'stochastic_encode'
+
+				var option = document.createElement("option");
+				option.text = data[i].name;
+				option.value = data[i].name;
+				samplerSelect.add(option);
+			}
+			if (localStorage.getItem("sampler") != null) {
+				samplerSelect.value = localStorage.getItem("sampler");
+			} else {
+				// needed now, as hardcoded sampler cant be guaranteed to be in the list
+				samplerSelect.value = data[0].name;
+				localStorage.setItem("sampler", samplerSelect.value);
+			}
+		})
+		.catch((error) => {
+			alert(
+				"Error getting samplers, please check console for additional info\n" +
+					error
+			);
+		});
+}
 async function upscaleAndDownload() {
 	// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount
 

js/ui/toolbar.js

@@ -278,7 +278,7 @@ tools.img2img = toolbar.registerTool(
 					evn.y,
 					basePixelCount * scaleFactor,
 					basePixelCount * scaleFactor,
-					snapToGrid && basePixelCount
+					state.snapToGrid && basePixelCount
 				);
 
 				// For displaying border mask