Add code to submit image generation instructions to the server

Though the server is just printing them on the console for now, and not
actually doing any image generation yet.

diff --git a/index.html b/index.html
index 931efa6c327f18e1dd65dc150709b3f48ff88729..f438b60f3ac1f53abc9350715812caea641308f0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -34,14 +34,13 @@
           <label for="prompt">
             What do you imagine?
           </label>
-          <textarea id="prompt" rows="4" width="100%" autocomplete="off" required>
-          </textarea>
+          <textarea id="prompt" rows="4" width="100%" autocomplete="off" required></textarea>
         </div>
 
         <div class="form-row small left">
           <div class="labeled-row">
             <label for="code">
-              Numeric code: 
+              Numeric code:
             </label>
             <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
           </div>
@@ -49,15 +48,6 @@
 
         <div class="form-row small right">
           <button id="safety" class="right" type="button">Safety prompt</button>
-          <script>
-            const prompt = document.querySelector("#prompt");
-            const safety= document.querySelector("#safety");
-            // TODO: Dynamically generate many different prompts here
-            safety.addEventListener("click", () => {
-                prompt.value = "Matte painting of a Samurai warrior";
-                return false;
-            })
-          </script>
         </div>
 
         <div class="form-row large">
@@ -112,11 +102,17 @@ mute.addEventListener("click", () => {
   <script>
     var socket = io();
 
-    var comments = document.querySelector("#comments");
-    var form = document.querySelector("#comment-form");
-    var comment = document.querySelector("#comment");
+    const comments = document.querySelector("#comments");
+    const comment_form = document.querySelector("#comment-form");
+    const comment = document.querySelector("#comment");
 
-    form.addEventListener('submit', function(e) {
+    const zombo_form = document.querySelector("#zombo-form");
+    const prompt = document.querySelector("#prompt");
+    const code = document.querySelector("#code");
+
+    const safety= document.querySelector("#safety");
+
+    comment_form.addEventListener('submit', function(e) {
         e.preventDefault();
         if (comment.value) {
             socket.emit('comment', comment.value);
@@ -129,6 +125,19 @@ mute.addEventListener("click", () => {
         item.textContent = msg;
         comments.appendChild(item);
     });
+
+    zombo_form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        socket.emit('generate', {"prompt": prompt.value, "code": code.value});
+        prompt.value = '';
+    });
+
+    // TODO: Dynamically generate many different prompts here
+    safety.addEventListener("click", () => {
+        prompt.value = "Matte painting of a Samurai warrior";
+        return false;
+    });
+
   </script>
 </body>
 </html>

diff --git a/index.js b/index.js
index 5e88926ae3e29db5bf7161a44e0deb10eb008d13..249537fd3414cd2541b16513901ab6eaeb68359a 100644 (file)
--- a/index.js
+++ b/index.js
@@ -42,15 +42,22 @@ app.get('/index.html', (req, res) => {
 });
 
 io.on('connection', (socket) => {
+
     // Replay old comments to a newly-joining client
     comments.forEach((comment) => {
         socket.emit('comment', comment)
     });
+
     // When any client comments, send that to all clients (including sender)
     socket.on('comment', (comment) => {
         io.emit('comment', comment);
         comments.push(comment);
     });
+
+    // Generate an image when requested
+    socket.on('generate', (request) => {
+        console.log(`Generating image with code=${request['code']} and prompt=${request['prompt']}`);
+    });
 });
 
 server.listen(port, () => {