Don't show any images until the user generates a new one

[zombocom-ai] / index.html

diff --git a/index.html b/index.html
index 0654ae41c33cc11f5e416ad2ff04b3ce70dcc901..a1f4e51955dc0d15096494ea3327d9a56399c738 100644 (file)
--- a/index.html
+++ b/index.html
@@ -74,7 +74,7 @@
       </form>
     </p>
 
-    <div id="images">
+    <div id="images" style="display: none">
     </div>
 
     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
@@ -156,8 +156,18 @@ mute.addEventListener("click", () => {
         figure.appendChild(img);
 
         const figcaption = document.createElement('figcaption');
-        const caption_text = document.createTextNode(`${image.prompt} (${image.code})`);
+        const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
         figcaption.appendChild(caption_text);
+
+        const reuse_button = document.createElement('button');
+        reuse_button.appendChild(document.createTextNode("Reuse"));
+        figcaption.appendChild(reuse_button);
+
+        reuse_button.addEventListener('click', () => {
+            prompt.value = image.prompt;
+            window.scrollTo(0,0);
+        });
+
         figure.appendChild(figcaption);
 
         const dl_comments = document.createElement('dl');
@@ -214,6 +224,8 @@ mute.addEventListener("click", () => {
         /* Re-display the form and hide spinner now that generation is over. */
         clearTimeout(spinner_timeout);
         hide_spinner();
+        /* Also display all of the images. */
+        images.style.display = "block";
     });
 
     function random_from(items) {