added support for parsing run log and displaying images in the fronte…

…nd init state (#410)

Co-authored-by: Johan Roxendal <johan.roxendal@litteraturbanken.se>
Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

ldm/dream/server.py

@@ -31,6 +31,23 @@ def do_GET(self):
                 'gfpgan_model_exists': gfpgan_model_exists
             }
             self.wfile.write(bytes("let config = " + json.dumps(config) + ";\n", "utf-8"))
+        elif self.path == "/run_log.json":
+            self.send_response(200)
+            self.send_header("Content-type", "application/json")
+            self.end_headers()
+            output = []
+
+            log_file = os.path.join(self.outdir, "dream_web_log.txt")
+            if os.path.exists(log_file):
+                with open(log_file, "r") as log:
+                    for line in log:
+                        url, config = line.split(": {", maxsplit=1)
+                        config = json.loads("{" + config)
+                        config["url"] = url.lstrip(".")
+                        if os.path.exists(url):
+                            output.append(config)
+
+            self.wfile.write(bytes(json.dumps({"run_log": output}), "utf-8"))
         elif self.path == "/cancel":
             self.canceled.set()
             self.send_response(200)

static/dream_web/index.css

@@ -86,8 +86,8 @@ header h1 {
     cursor: pointer;
 }
 #results img {
-    height: 30vh;
     border-radius: 5px;
+    object-fit: cover;
 }
 #fieldset-config {
     line-height:2em;
@@ -138,3 +138,7 @@ label {
     background-color: #F5F5F5;
 }
 
+#no-results-message:not(:only-child) {
+    display: none;
+}
+

static/dream_web/index.js

@@ -11,9 +11,15 @@ function appendOutput(src, seed, config) {
     let outputNode = document.createElement("figure");
     let altText = seed.toString() + " | " + config.prompt;
 
+    // img needs width and height for lazy loading to work
     const figureContents = `
         <a href="${src}" target="_blank">
-            <img src="${src}" alt="${altText}" title="${altText}">
+            <img src="${src}"
+                 alt="${altText}"
+                 title="${altText}"
+                 loading="lazy"
+                 width="256"
+                 height="256">
         </a>
         <figcaption>${seed}</figcaption>
     `;
@@ -117,7 +123,6 @@ async function generateSubmit(form) {
 
                 if (data.event === 'result') {
                     noOutputs = false;
-                    document.querySelector("#no-results-message")?.remove();
                     appendOutput(data.url, data.seed, data.config);
                     progressEle.setAttribute('value', 0);
                     progressEle.setAttribute('max', totalSteps);
@@ -153,7 +158,19 @@ async function generateSubmit(form) {
     document.querySelector("#prompt").value = `Generating: "${prompt}"`;
 }
 
-window.onload = () => {
+async function fetchRunLog() {
+    try {
+        let response = await fetch('/run_log.json')
+        const data = await response.json();
+        for(let item of data.run_log) {
+            appendOutput(item.url, item.seed, item);
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+window.onload = async () => {
     document.querySelector("#prompt").addEventListener("keydown", (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         const form = e.target.form;
@@ -196,4 +213,5 @@ window.onload = () => {
     if (!config.gfpgan_model_exists) {
         document.querySelector("#gfpgan").style.display = 'none';
     }
+    await fetchRunLog()
 };