From b95908daec46203db8a7a4b594f849d5f05e7052 Mon Sep 17 00:00:00 2001 From: tesseractcat Date: Thu, 25 Aug 2022 14:15:08 -0400 Subject: [PATCH 1/4] Move style and script to individual files --- scripts/dream_web.py | 15 ++-- scripts/static/index.css | 49 ++++++++++++ scripts/static/index.html | 153 +------------------------------------- scripts/static/index.js | 101 +++++++++++++++++++++++++ 4 files changed, 162 insertions(+), 156 deletions(-) create mode 100644 scripts/static/index.css create mode 100644 scripts/static/index.js diff --git a/scripts/dream_web.py b/scripts/dream_web.py index 41bc9a9029..b429d749d9 100644 --- a/scripts/dream_web.py +++ b/scripts/dream_web.py @@ -1,5 +1,6 @@ import json import base64 +import mimetypes import os from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer @@ -16,11 +17,15 @@ class DreamServer(BaseHTTPRequestHandler): with open("./scripts/static/index.html", "rb") as content: self.wfile.write(content.read()) elif os.path.exists("." + self.path): - self.send_response(200) - self.send_header("Content-type", "image/png") - self.end_headers() - with open("." + self.path, "rb") as content: - self.wfile.write(content.read()) + mime_type = mimetypes.guess_type(self.path)[0] + if mime_type is not None: + self.send_response(200) + self.send_header("Content-type", mime_type) + self.end_headers() + with open("." + self.path, "rb") as content: + self.wfile.write(content.read()) + else: + self.send_response(404) else: self.send_response(404) diff --git a/scripts/static/index.css b/scripts/static/index.css new file mode 100644 index 0000000000..d3674525f6 --- /dev/null +++ b/scripts/static/index.css @@ -0,0 +1,49 @@ +* { + font-family: 'Arial'; +} +#header { + text-decoration: dotted underline; +} +#search { + margin-top: 20vh; + text-align: center; +} +fieldset { + border: none; +} +#prompt { + width: 500px; + border-radius: 20px 0px 0px 20px; + padding: 5px 10px 5px 10px; + border: 1px solid black; + outline: none; +} +#submit { + border-radius: 0px 20px 20px 0px; + padding: 5px 10px 5px 10px; + border: 1px solid black; +} +#results { + text-align: center; + padding-left: 20vw; + padding-right: 20vw; + padding-top: 10px; +} +img { + cursor: pointer; + height: 30vh; + border-radius: 5px; + margin: 10px; +} +#generate-config { + line-height:2em; +} +input[type="number"] { + width: 60px; +} +#seed { + width: 150px; +} +hr { + width: 200px; +} diff --git a/scripts/static/index.html b/scripts/static/index.html index 663a32ed12..2e035fc9df 100644 --- a/scripts/static/index.html +++ b/scripts/static/index.html @@ -2,157 +2,9 @@ Stable Diffusion WebUI - - + + -

No results...

 diff --git a/scripts/static/index.js b/scripts/static/index.js new file mode 100644 index 0000000000..3b99deecf4 --- /dev/null +++ b/scripts/static/index.js @@ -0,0 +1,101 @@ +function toBase64(file) { + return new Promise((resolve, reject) => { + const r = new FileReader(); + r.readAsDataURL(file); + r.onload = () => resolve(r.result); + r.onerror = (error) => reject(error); + }); +} + +function appendOutput(output) { + let outputNode = document.createElement("img"); + outputNode.src = output[0]; + + let outputConfig = output[2]; + let altText = output[1].toString() + " | " + outputConfig.prompt; + outputNode.alt = altText; + outputNode.title = altText; + + // Reload image config + outputNode.addEventListener('click', () => { + let form = document.querySelector("#generate-form"); + for (const [k, v] of new FormData(form)) { + form.querySelector(`*[name=${k}]`).value = outputConfig[k]; + } + document.querySelector("#seed").value = output[1]; + + saveFields(document.querySelector("#generate-form")); + }); + + document.querySelector("#results").prepend(outputNode); +} + +function appendOutputs(outputs) { + for (const output of outputs) { + appendOutput(output); + } +} + +function saveFields(form) { + for (const [k, v] of new FormData(form)) { + if (typeof v !== 'object') { // Don't save 'file' type + localStorage.setItem(k, v); + } + } +} +function loadFields(form) { + for (const [k, v] of new FormData(form)) { + const item = localStorage.getItem(k); + if (item != null) { + form.querySelector(`*[name=${k}]`).value = item; + } + } +} + +async function generateSubmit(form) { + const prompt = document.querySelector("#prompt").value; + + // Convert file data to base64 + let formData = Object.fromEntries(new FormData(form)); + formData.initimg = formData.initimg.name !== '' ? await toBase64(formData.initimg) : null; + + // Post as JSON + fetch(form.action, { + method: form.method, + body: JSON.stringify(formData), + }).then(async (result) => { + let data = await result.json(); + + // Re-enable form, remove no-results-message + form.querySelector('fieldset').removeAttribute('disabled'); + document.querySelector("#prompt").value = prompt; + + if (data.outputs.length != 0) { + document.querySelector("#no-results-message")?.remove(); + appendOutputs(data.outputs); + } else { + alert("Error occurred while generating."); + } + }); + + // Disable form while generating + form.querySelector('fieldset').setAttribute('disabled',''); + document.querySelector("#prompt").value = `Generating: "${prompt}"`; +} + +window.onload = () => { + document.querySelector("#generate-form").addEventListener('submit', (e) => { + e.preventDefault(); + const form = e.target; + + generateSubmit(form); + }); + document.querySelector("#generate-form").addEventListener('change', (e) => { + saveFields(e.target.form); + }); + document.querySelector("#reset").addEventListener('click', (e) => { + document.querySelector("#seed").value = -1; + saveFields(e.target.form); + }); + loadFields(document.querySelector("#generate-form")); +}; From d3a802db69b19f3a8362dd296feafed7a664604d Mon Sep 17 00:00:00 2001 From: tesseractcat Date: Thu, 25 Aug 2022 14:18:29 -0400 Subject: [PATCH 2/4] Fix horizontal divider --- scripts/static/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/static/index.html b/scripts/static/index.html index 2e035fc9df..d670dc64f5 100644 --- a/scripts/static/index.html +++ b/scripts/static/index.html @@ -36,6 +36,7 @@
+

No results...

 From 2ad73246f94000624c06a9f8950c4c22a1ee6617 Mon Sep 17 00:00:00 2001 From: tesseractcat Date: Thu, 25 Aug 2022 14:27:33 -0400 Subject: [PATCH 3/4] Normalize working directory --- scripts/dream_web.py | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/dream_web.py b/scripts/dream_web.py index b429d749d9..4622f457c5 100644 --- a/scripts/dream_web.py +++ b/scripts/dream_web.py @@ -81,6 +81,12 @@ class DreamServer(BaseHTTPRequestHandler): self.wfile.write(bytes(json.dumps(result), "utf-8")) if __name__ == "__main__": + # Change working directory to the stable-diffusion directory + os.chdir( + os.path.abspath(os.path.join(os.path.dirname( __file__ ), '..')) + ) + + # Start server dream_server = ThreadingHTTPServer(("0.0.0.0", 9090), DreamServer) print("Started Stable Diffusion dream server!") From 91966e9ffa01a256ede7b0b49902587f9d41fcf7 Mon Sep 17 00:00:00 2001 From: tesseractcat Date: Thu, 25 Aug 2022 15:01:08 -0400 Subject: [PATCH 4/4] Fix appearance on mobile --- scripts/static/index.css | 20 ++++++++++++++++---- scripts/static/index.html | 5 +++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/scripts/static/index.css b/scripts/static/index.css index d3674525f6..ed840a056a 100644 --- a/scripts/static/index.css +++ b/scripts/static/index.css @@ -6,16 +6,25 @@ } #search { margin-top: 20vh; + margin-left: auto; + margin-right: auto; + max-width: 800px; + text-align: center; } fieldset { border: none; } +#fieldset-search { + display: flex; +} #prompt { - width: 500px; + flex-grow: 1; + border-radius: 20px 0px 0px 20px; padding: 5px 10px 5px 10px; border: 1px solid black; + border-right: none; outline: none; } #submit { @@ -25,8 +34,8 @@ fieldset { } #results { text-align: center; - padding-left: 20vw; - padding-right: 20vw; + max-width: 1000px; + margin: auto; padding-top: 10px; } img { @@ -35,7 +44,7 @@ img { border-radius: 5px; margin: 10px; } -#generate-config { +#fieldset-config { line-height:2em; } input[type="number"] { @@ -47,3 +56,6 @@ input[type="number"] { hr { width: 200px; } +label { + white-space: nowrap; +} diff --git a/scripts/static/index.html b/scripts/static/index.html index d670dc64f5..55f338688a 100644 --- a/scripts/static/index.html +++ b/scripts/static/index.html @@ -2,6 +2,7 @@ Stable Diffusion WebUI + @@ -11,11 +12,11 @@
-
+ -
+