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     <dialog id="name-dialog">
  32       <form method="dialog">
  33         <p>
  34           <label>Your name:
  35             <input id="name" type="text" autocomplete="off">
  36           </label>
  37         </p>
  38         <div>
  39           <button value="default">OK</button>
  40         </div>
  41       </form>
  42     </dialog>
  43
  44     <p>
  45       <div id="spinner" align="center">
  46         <div class="animate-flicker">
  47           <p>
  48             <img src="/pngwheel.png" class="rotate thefade">
  49           </p>
  50         </div>
  51       </div>
  52
  53       <form action="" id="zombo-form">
  54         <div class="form-row large">
  55           <label for="prompt">
  56             What can you imagine?
  57           </label>
  58           <button id="safety" type="button">Safety prompt</button>
  59           <textarea id="prompt" rows="4" width="100%" autocomplete="off" required></textarea>
  60         </div>
  61
  62         <div class="form-row small left">
  63           <div class="labeled-row">
  64             <label for="code">
  65               Numeric code:
  66             </label>
  67             <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
  68           </div>
  69         </div>
  70
  71         <div class="form-row large">
  72           <button id="generate" type="submit">Make the infinite possible</button>
  73         </div>
  74       </form>
  75     </p>
  76
  77     <div id="images">
  78     </div>
  79
  80     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
  81     <button id="mute" class="menu-button fade volume">
  82       <div>🔊</div>
  83       <script>
  84 const mute = document.querySelector("#mute");
  85 const icon = document.querySelector("#mute > div");
  86 const audio = document.querySelector("audio");
  87
  88 mute.addEventListener("click", () => {
  89   if (audio.paused) {
  90       audio.volume = 0.2;
  91       audio.play();
  92       icon.innerHTML = "🔈";
  93   } else {
  94       audio.pause();
  95       icon.innerHTML = "🔊";
  96   }
  97   mute.classList.add("fade");
  98 });
  99       </script>
 100
 101     </button>
 102
 103     <button id="profile" class="menu-button">
 104       <div>👤</div>
 105     </button>
 106
 107   </div>
 108
 109   <script src="/socket.io/socket.io.js"></script>
 110   <script>
 111     var socket = io();
 112
 113     const name = document.querySelector("#name");
 114     const name_dialog = document.querySelector("#name-dialog");
 115     const images = document.querySelector("#images");
 116     const zombo_form = document.querySelector("#zombo-form");
 117     const prompt = document.querySelector("#prompt");
 118     const code = document.querySelector("#code");
 119     const safety= document.querySelector("#safety");
 120     const spinner = document.querySelector("#spinner");
 121     const profile = document.querySelector("#profile");
 122     var spinner_timeout;
 123
 124     profile.addEventListener('click', () => {
 125         name_dialog.showModal();
 126     });
 127
 128     name_dialog.addEventListener('close', () => {
 129         socket.emit('set-name', name.value);
 130     });
 131
 132     socket.on('comment', function(comment) {
 133         const comments = document.querySelector("#" + comment.comments_id);
 134         const dt = document.createElement('dt');
 135         const dd = document.createElement('dd');
 136         dt.textContent = comment.name + ':';
 137         dd.textContent = comment.text;
 138         comments.appendChild(dt);
 139         comments.appendChild(dd);
 140     });
 141
 142     socket.on('inform-name', (name) => {
 143         console.log("Received inform-name event: " + name);
 144         name.value = name;
 145     });
 146
 147     socket.on('reset', () => {
 148         images.replaceChildren();
 149     });
 150
 151     socket.on('image', (image) => {
 152         const figure = document.createElement('figure');
 153
 154         const img = document.createElement('img');
 155         img.src = image.filename;
 156         figure.appendChild(img);
 157
 158         const figcaption = document.createElement('figcaption');
 159         const caption_text = document.createTextNode(`${image.prompt} (${image.code})`);
 160         figcaption.appendChild(caption_text);
 161         figure.appendChild(figcaption);
 162
 163         const dl_comments = document.createElement('dl');
 164         const comments_id = "comments_" + image.index;
 165         dl_comments.className = "comments";
 166         dl_comments.id = comments_id;
 167         figure.appendChild(dl_comments);
 168
 169         const comment_form = document.createElement('form');
 170         const comment_input = document.createElement('input')
 171         comment_input.type = "text";
 172         comment_input.className = "comment";
 173         comment_input.placeholder = "Add a comment";
 174         comment_form.appendChild(comment_input);
 175         figure.appendChild(comment_form);
 176
 177         comment_input.addEventListener('focus', () => {
 178             /* Do nothing if name is already set. */
 179             if (name.value)
 180                 return;
 181
 182             /* Otherwise, bring up the modal dialog to set the name. */
 183             name_dialog.showModal();
 184         });
 185
 186         comment_form.addEventListener('submit', function(e) {
 187             e.preventDefault();
 188             if (comment_input.value) {
 189                 socket.emit('comment', {comments_id: comments_id,
 190                                         text: comment_input.value});
 191                 comment_input.value = '';
 192             }
 193         });
 194
 195         images.prepend(figure);
 196     });
 197
 198     function hide_spinner() {
 199         zombo_form.style.display = "grid";
 200         spinner.style.display = "none";
 201     }
 202
 203     zombo_form.addEventListener('submit', function(e) {
 204         e.preventDefault();
 205         /* Hide the form and show spinner while generation is happening. */
 206         zombo_form.style.display = "none";
 207         spinner.style.display = "block";
 208         spinner_timeout = setTimeout(hide_spinner, 60000);
 209         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 210         prompt.value = '';
 211     });
 212
 213     socket.on('generation-done', () => {
 214         /* Re-display the form and hide spinner now that generation is over. */
 215         clearTimeout(spinner_timeout);
 216         hide_spinner();
 217     });
 218
 219     function random_from(items) {
 220         return items[Math.floor(Math.random()*items.length)];
 221     }
 222
 223     safety.addEventListener("click", () => {
 224         const art_type = [
 225             "A portrait of",
 226             "A hyperrealistic photograph of",
 227             "A matte painting of",
 228             "Epic fantasy card art of",
 229             "Professional oil painting of",
 230             "An image of",
 231             "A pencil sketch of",
 232             "A watercolor of",
 233         ];
 234         const subject = [
 235             " a modern home",
 236             " crashing waves",
 237             " a Porsche 911 Carrera",
 238             " a Halo spartan",
 239             " a cute cat",
 240             " a mad scientist",
 241             " an elfin princess",
 242             " sci-fi buildings",
 243             " pastel purple clouds",
 244             " a Teenage Mutant Ninja Turtle",
 245         ];
 246         const scenery = [
 247             " in tropical surroundings",
 248             " in space",
 249             " in an ocean storm",
 250             " in a snowy forest",
 251             " in a cardboard box",
 252             " holding an axe",
 253             " in an epic landscape",
 254             " in a haunted forest",
 255             " riding a motorbike",
 256             " in a futuristic city at night",
 257             " in a dystopian landscape, foggy",
 258             " in the land of snow",
 259             " that looks like a watermelon",
 260             " on the streets of London at night with neon lights flashing",
 261             " that is part octopus",
 262             " melting into a puddle",
 263         ];
 264         const artist = [
 265             ", unreal engine 5",
 266             ", concept art",
 267             ", graphic novel",
 268             " by Vincent Van Gogh",
 269             " by Claude Monet",
 270             " by Johannes Vermeer",
 271             ", fantasy art, neon fog",
 272             ", epic lighting from above",
 273             ", trending on artstation",
 274         ];
 275
 276         prompt.value = random_from(art_type) + random_from(subject) +
 277             random_from(scenery) + random_from(artist);
 278         return false;
 279     });
 280
 281   </script>
 282 </body>
 283 </html>