From 7459f507f1d176e74af08b4a20b048532b24de15 Mon Sep 17 00:00:00 2001
From: Johan Roxendal <johan.roxendal@litteraturbanken.se>
Date: Tue, 6 Sep 2022 18:53:46 +0200
Subject: [PATCH] added support for parsing run log and displaying images in
 the frontend init state

---
 ldm/dream/server.py        | 17 +++++++++++++++++
 static/dream_web/index.css |  6 +++++-
 static/dream_web/index.js  | 15 ++++++++++-----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/ldm/dream/server.py b/ldm/dream/server.py
index f22c5847e22..c7d055191f9 100644
--- a/ldm/dream/server.py
+++ b/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)
diff --git a/static/dream_web/index.css b/static/dream_web/index.css
index 117db7b5fbb..cbe753d4231 100644
--- a/static/dream_web/index.css
+++ b/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;
+}
+
diff --git a/static/dream_web/index.js b/static/dream_web/index.js
index 2d2dce1452c..2edd0f9734f 100644
--- a/static/dream_web/index.js
+++ b/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,13 +158,12 @@ async function generateSubmit(form) {
     document.querySelector("#prompt").value = `Generating: "${prompt}"`;
 }
 
-window.onload = () => {
+window.onload = async () => {
     document.querySelector("#prompt").addEventListener("keydown", (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         const form = e.target.form;
         generateSubmit(form);
-      }
-    });
+    }
     document.querySelector("#generate-form").addEventListener('submit', (e) => {
         e.preventDefault();
         const form = e.target;
@@ -196,4 +200,5 @@ window.onload = () => {
     if (!config.gfpgan_model_exists) {
         document.querySelector("#gfpgan").style.display = 'none';
     }
+    await fetchRunLog()
 };