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="number" min="0" max="4294967295" 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_input = document.querySelector("#name");
 114     const name_dialog = document.querySelector("#name-dialog");
 115     var informed_name;
 116     const images = document.querySelector("#images");
 117     const zombo_form = document.querySelector("#zombo-form");
 118     const prompt = document.querySelector("#prompt");
 119     const code = document.querySelector("#code");
 120     const safety= document.querySelector("#safety");
 121     const spinner = document.querySelector("#spinner");
 122     const profile = document.querySelector("#profile");
 123     var spinner_timeout;
 124
 125     profile.addEventListener('click', () => {
 126         name_dialog.showModal();
 127     });
 128
 129     name_dialog.addEventListener('close', () => {
 130         socket.emit('set-name', name_input.value);
 131     });
 132
 133     function add_comment(comments, comment) {
 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('comment', function(comment) {
 143         const comments = document.querySelector("#comments_" + comment.image_id);
 144         add_comment(comments, comment);
 145     });
 146
 147     socket.on('inform-name', (name) => {
 148         console.log("Received inform-name event: " + name);
 149
 150         /* When we receive a name we store it in 3 places:
 151          *
 152          *   * The informed_name variable (confirming what the server knows)
 153          *   * The name_input field (so the user will see that in their profile)
 154          *   * In localStorage (for use in a future session)
 155          */
 156         informed_name = name;
 157         name_input.value = name;
 158         localStorage.setItem('name', name);
 159     });
 160
 161     socket.on('reset', () => {
 162         images.replaceChildren();
 163
 164         /* Since the server is seeing us for the first time, let it
 165            know our name (if we have one). */
 166         const name = localStorage.getItem('name');
 167         if (name) {
 168             socket.emit('set-name', name);
 169             return;
 170         }
 171     });
 172
 173     socket.on('image', (image) => {
 174         const figure = document.createElement('figure');
 175         figure.id = "image_" + image.id;
 176
 177         const img = document.createElement('img');
 178         img.src = image.filename;
 179         figure.appendChild(img);
 180
 181         if (image.prompt && image.code) {
 182             const figcaption = document.createElement('figcaption');
 183             const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
 184             figcaption.appendChild(caption_text);
 185
 186             const reuse_button = document.createElement('button');
 187             reuse_button.appendChild(document.createTextNode("Reuse"));
 188             figcaption.appendChild(reuse_button);
 189
 190             reuse_button.addEventListener('click', () => {
 191                 prompt.value = image.prompt;
 192                 window.scrollTo(0,0);
 193             });
 194
 195             figure.appendChild(figcaption);
 196         }
 197
 198         const dl_comments = document.createElement('dl');
 199         dl_comments.className = "comments";
 200         dl_comments.id = "comments_" + image.id;
 201
 202         image.comments.forEach((comment) => {
 203             add_comment(dl_comments, comment);
 204         });
 205
 206         figure.appendChild(dl_comments);
 207
 208         const comment_form = document.createElement('form');
 209         const comment_input = document.createElement('input')
 210         comment_input.type = "text";
 211         comment_input.className = "comment";
 212         comment_input.placeholder = "Add a comment";
 213         comment_form.appendChild(comment_input);
 214         figure.appendChild(comment_form);
 215
 216         comment_input.addEventListener('focus', () => {
 217             /* If the server has informed us it has our name, we are done. */
 218             if (informed_name)
 219                 return;
 220
 221             /* If server has no name, check local storage. */
 222             const name = localStorage.getItem('name');
 223             if (name) {
 224                 socket.emit('set-name', name);
 225                 return;
 226             }
 227
 228             /* Failing both, bring up the modal dialog to set the name. */
 229             name_dialog.showModal();
 230         });
 231
 232         comment_form.addEventListener('submit', function(e) {
 233             e.preventDefault();
 234             if (comment_input.value) {
 235                 socket.emit('comment', {image_id: image.id,
 236                                         text: comment_input.value});
 237                 comment_input.value = '';
 238             }
 239         });
 240
 241         images.prepend(figure);
 242     });
 243
 244     function hide_spinner() {
 245         zombo_form.style.display = "grid";
 246         spinner.style.display = "none";
 247     }
 248
 249     zombo_form.addEventListener('submit', function(e) {
 250         e.preventDefault();
 251         /* Hide the form and show spinner while generation is happening. */
 252         zombo_form.style.display = "none";
 253         spinner.style.display = "block";
 254         spinner_timeout = setTimeout(hide_spinner, 60000);
 255         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 256         prompt.value = '';
 257     });
 258
 259     socket.on('generation-done', () => {
 260         /* Re-display the form and hide spinner now that generation is over. */
 261         clearTimeout(spinner_timeout);
 262         hide_spinner();
 263     });
 264
 265     function random_from(items) {
 266         return items[Math.floor(Math.random()*items.length)];
 267     }
 268
 269     safety.addEventListener("click", () => {
 270         const art_type = [
 271             "A portrait of",
 272             "A hyperrealistic photograph of",
 273             "A matte painting of",
 274             "Epic fantasy card art of",
 275             "Professional oil painting of",
 276             "An image of",
 277             "A pencil sketch of",
 278             "A watercolor of",
 279             "A 3D rendering of",
 280             "A marble statue of",
 281         ];
 282         const subject = [
 283             " a modern home",
 284             " crashing waves",
 285             " a Porsche 911 Carrera",
 286             " a Halo spartan",
 287             " a cute cat",
 288             " a mad scientist",
 289             " an elfin princess",
 290             " sci-fi buildings",
 291             " pastel purple clouds",
 292             " a Teenage Mutant Ninja Turtle",
 293             " Pikachu",
 294         ];
 295         const scenery = [
 296             " in tropical surroundings",
 297             " in space",
 298             " in an ocean storm",
 299             " in a snowy forest",
 300             " in a cardboard box",
 301             " holding an axe",
 302             " in an epic landscape",
 303             " in a haunted forest",
 304             " riding a motorbike",
 305             " in a futuristic city at night",
 306             " in a dystopian landscape, foggy",
 307             " in the land of snow",
 308             " that looks like a watermelon",
 309             " on the streets of London at night with neon lights flashing",
 310             " that is part octopus",
 311             " melting into a puddle",
 312             " on a birthday cake",
 313         ];
 314         const artist = [
 315             ", unreal engine 5",
 316             ", concept art",
 317             ", graphic novel",
 318             " by Vincent Van Gogh",
 319             " by Claude Monet",
 320             " by Johannes Vermeer",
 321             ", fantasy art, neon fog",
 322             ", epic lighting from above",
 323             ", trending on artstation",
 324             " by Gustav Klimt",
 325             " by Leonardo da Vinci",
 326         ];
 327
 328         prompt.value = random_from(art_type) + random_from(subject) +
 329             random_from(scenery) + random_from(artist);
 330         return false;
 331     });
 332
 333   </script>
 334 </body>
 335 </html>