Expand the safety-prompt possibilities a bit

[zombocom-ai] / index.html

diff --git a/index.html b/index.html
index 75a4cb804a97938e6ec346604c2f34351dd54e34..6bdd28b134138d24eb8568a49a4dfb328829c79f 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>
@@ -110,7 +110,7 @@ mute.addEventListener("click", () => {
   <script>
     var socket = io();
 
-    const name = document.querySelector("#name");
+    const name_input = document.querySelector("#name");
     const name_dialog = document.querySelector("#name-dialog");
     const images = document.querySelector("#images");
     const zombo_form = document.querySelector("#zombo-form");
@@ -126,7 +126,7 @@ mute.addEventListener("click", () => {
     });
 
     name_dialog.addEventListener('close', () => {
-        socket.emit('set-name', name.value);
+        socket.emit('set-name', name_input.value);
     });
 
     socket.on('comment', function(comment) {
@@ -141,7 +141,7 @@ mute.addEventListener("click", () => {
 
     socket.on('inform-name', (name) => {
         console.log("Received inform-name event: " + name);
-        name.value = name;
+        name_input.value = name;
     });
 
     socket.on('reset', () => {
@@ -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');
@@ -176,7 +186,7 @@ mute.addEventListener("click", () => {
 
         comment_input.addEventListener('focus', () => {
             /* Do nothing if name is already set. */
-            if (name.value)
+            if (name_input.value)
                 return;
 
             /* Otherwise, bring up the modal dialog to set the name. */
@@ -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) {
@@ -230,6 +242,8 @@ mute.addEventListener("click", () => {
             "An image of",
             "A pencil sketch of",
             "A watercolor of",
+            "A 3D rendering of",
+            "A marble statue of",
         ];
         const subject = [
             " a modern home",
@@ -242,6 +256,7 @@ mute.addEventListener("click", () => {
             " sci-fi buildings",
             " pastel purple clouds",
             " a Teenage Mutant Ninja Turtle",
+            " Pikachu",
         ];
         const scenery = [
             " in tropical surroundings",
@@ -260,6 +275,7 @@ mute.addEventListener("click", () => {
             " on the streets of London at night with neon lights flashing",
             " that is part octopus",
             " melting into a puddle",
+            " on a birthday cake",
         ];
         const artist = [
             ", unreal engine 5",
@@ -271,6 +287,8 @@ mute.addEventListener("click", () => {
             ", fantasy art, neon fog",
             ", epic lighting from above",
             ", trending on artstation",
+            " by Gustav Klimt",
+            " by Leonardo da Vinci",
         ];
 
         prompt.value = random_from(art_type) + random_from(subject) +