git.cworth.org Git - zombocom-ai/blob - index.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <title>ZOMBO</title>
   7   <link href="/zombo.css" rel="stylesheet" type="text/css">
   8   <meta name="viewport" content="width=device-width,initial-scale=1">
   9   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10   <meta name="HandheldFriendly" content="true">
  11 </head>
  12
  13 <body>
  14   <div id="content">
  15
  16     <div id="header" align="center">
  17       <p>
  18         <br>
  19       </p>
  20
  21       <p>
  22         <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
  23       </p>
  24     </div>
  25
  26     <p>
  27       Welcome to Zombocom. You can do anything at Zombocom, anything at
  28       all. The only limit is yourself!
  29     </p>
  30
  31     <p>
  32       <div id="spinner" align="center">
  33         <div class="animate-flicker">
  34           <p>
  35             <img src="/pngwheel.png" class="rotate thefade">
  36           </p>
  37         </div>
  38       </div>
  39
  40       <form action="" id="zombo-form">
  41         <div class="form-row large">
  42           <label for="prompt">
  43             What can you imagine?
  44           </label>
  45           <button id="safety" type="button">Safety prompt</button>
  46           <textarea id="prompt" rows="4" width="100%" autocomplete="off" required></textarea>
  47         </div>
  48
  49         <div class="form-row small left">
  50           <div class="labeled-row">
  51             <label for="code">
  52               Numeric code:
  53             </label>
  54             <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
  55           </div>
  56         </div>
  57
  58         <div class="form-row large">
  59           <button id="generate" type="submit">Make the infinite possible</button>
  60         </div>
  61       </form>
  62     </p>
  63
  64     <div id="images">
  65     </div>
  66
  67     <ul id="comments">
  68     </ul>
  69
  70     <p>
  71       <form action="" id="comment-form">
  72         <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
  73       </form>
  74     </p>
  75
  76     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
  77     <button id="mute" class="fade volume">
  78       <div>🔊</div>
  79       <script>
  80 const mute = document.querySelector("#mute");
  81 const icon = document.querySelector("#mute > div");
  82 const audio = document.querySelector("audio");
  83
  84 mute.addEventListener("click", () => {
  85   if (audio.paused) {
  86       audio.volume = 0.2;
  87       audio.play();
  88       icon.innerHTML = "🔈";
  89   } else {
  90       audio.pause();
  91       icon.innerHTML = "🔊";
  92   }
  93   mute.classList.add("fade");
  94 });
  95       </script>
  96
  97     </button>
  98
  99   </div>
 100
 101   <script src="/socket.io/socket.io.js"></script>
 102   <script>
 103     var socket = io();
 104
 105     const images = document.querySelector("#images");
 106
 107     const comments = document.querySelector("#comments");
 108     const comment_form = document.querySelector("#comment-form");
 109     const comment = document.querySelector("#comment");
 110
 111     const zombo_form = document.querySelector("#zombo-form");
 112     const prompt = document.querySelector("#prompt");
 113     const code = document.querySelector("#code");
 114
 115     const safety= document.querySelector("#safety");
 116
 117     const spinner = document.querySelector("#spinner");
 118     var spinner_timeout;
 119
 120     comment_form.addEventListener('submit', function(e) {
 121         e.preventDefault();
 122         if (comment.value) {
 123             socket.emit('comment', comment.value);
 124             comment.value = '';
 125         }
 126     });
 127
 128     socket.on('comment', function(msg) {
 129         var item = document.createElement('li');
 130         item.textContent = msg;
 131         comments.appendChild(item);
 132     });
 133
 134     socket.on('image', (image) => {
 135         const figure = document.createElement('figure');
 136         const img = document.createElement('img');
 137         img.src = image.filename;
 138         const figcaption = document.createElement('figcaption');
 139         const caption_text = document.createTextNode(`${image.prompt} (${image.code})`);
 140         figcaption.appendChild(caption_text);
 141         figure.appendChild(img);
 142         figure.appendChild(figcaption);
 143         images.prepend(figure);
 144     });
 145
 146     function hide_spinner() {
 147         zombo_form.style.display = "grid";
 148         spinner.style.display = "none";
 149     }
 150
 151     zombo_form.addEventListener('submit', function(e) {
 152         e.preventDefault();
 153         /* Hide the form and show spinner while generation is happening. */
 154         zombo_form.style.display = "none";
 155         spinner.style.display = "block";
 156         spinner_timeout = setTimeout(hide_spinner, 60000);
 157         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 158         prompt.value = '';
 159     });
 160
 161     socket.on('generation-done', () => {
 162         /* Re-display the form and hide spinner now that generation is over. */
 163         clearTimeout(spinner_timeout);
 164         hide_spinner();
 165     });
 166
 167     // TODO: Dynamically generate many different prompts here
 168     safety.addEventListener("click", () => {
 169         prompt.value = "Matte painting of a Samurai warrior";
 170         return false;
 171     });
 172
 173   </script>
 174 </body>
 175 </html>