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         if (image.censored) {
 178             figure.style.display = "none";
 179         }
 180
 181         const img = document.createElement('img');
 182         img.src = image.filename;
 183         figure.appendChild(img);
 184
 185         if (image.prompt && image.code) {
 186             const figcaption = document.createElement('figcaption');
 187             const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
 188             figcaption.appendChild(caption_text);
 189
 190             const reuse_button = document.createElement('button');
 191             reuse_button.appendChild(document.createTextNode("Reuse"));
 192             figcaption.appendChild(reuse_button);
 193
 194             reuse_button.addEventListener('click', () => {
 195                 prompt.value = image.prompt;
 196                 window.scrollTo(0,0);
 197             });
 198
 199             figure.appendChild(figcaption);
 200         }
 201
 202         const dl_comments = document.createElement('dl');
 203         dl_comments.className = "comments";
 204         dl_comments.id = "comments_" + image.id;
 205
 206         image.comments.forEach((comment) => {
 207             add_comment(dl_comments, comment);
 208         });
 209
 210         figure.appendChild(dl_comments);
 211
 212         const comment_form = document.createElement('form');
 213         const comment_input = document.createElement('input')
 214         comment_input.type = "text";
 215         comment_input.className = "comment";
 216         comment_input.placeholder = "Add a comment";
 217         comment_form.appendChild(comment_input);
 218         figure.appendChild(comment_form);
 219
 220         comment_input.addEventListener('focus', () => {
 221             /* If the server has informed us it has our name, we are done. */
 222             if (informed_name)
 223                 return;
 224
 225             /* If server has no name, check local storage. */
 226             const name = localStorage.getItem('name');
 227             if (name) {
 228                 socket.emit('set-name', name);
 229                 return;
 230             }
 231
 232             /* Failing both, bring up the modal dialog to set the name. */
 233             name_dialog.showModal();
 234         });
 235
 236         comment_form.addEventListener('submit', function(e) {
 237             e.preventDefault();
 238             if (comment_input.value) {
 239                 socket.emit('comment', {image_id: image.id,
 240                                         text: comment_input.value});
 241                 comment_input.value = '';
 242             }
 243         });
 244
 245         images.prepend(figure);
 246     });
 247
 248     function hide_spinner() {
 249         zombo_form.style.display = "grid";
 250         spinner.style.display = "none";
 251     }
 252
 253     zombo_form.addEventListener('submit', function(e) {
 254         e.preventDefault();
 255         /* Hide the form and show spinner while generation is happening. */
 256         zombo_form.style.display = "none";
 257         spinner.style.display = "block";
 258         spinner_timeout = setTimeout(hide_spinner, 60000);
 259         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 260         prompt.value = '';
 261     });
 262
 263     socket.on('generation-done', () => {
 264         /* Re-display the form and hide spinner now that generation is over. */
 265         clearTimeout(spinner_timeout);
 266         hide_spinner();
 267     });
 268
 269     function random_from(items) {
 270         return items[Math.floor(Math.random()*items.length)];
 271     }
 272
 273     safety.addEventListener("click", () => {
 274         const art_type = [
 275             "A portrait of",
 276             "A hyperrealistic photograph of",
 277             "A matte painting of",
 278             "Epic fantasy card art of",
 279             "Professional oil painting of",
 280             "An image of",
 281             "A pencil sketch of",
 282             "A watercolor of",
 283             "A 3D rendering of",
 284             "A marble statue of",
 285         ];
 286         const subject = [
 287             " a modern home",
 288             " crashing waves",
 289             " a Porsche 911 Carrera",
 290             " a Halo spartan",
 291             " a cute cat",
 292             " a mad scientist",
 293             " an elfin princess",
 294             " sci-fi buildings",
 295             " pastel purple clouds",
 296             " a Teenage Mutant Ninja Turtle",
 297             " Pikachu",
 298         ];
 299         const scenery = [
 300             " in tropical surroundings",
 301             " in space",
 302             " in an ocean storm",
 303             " in a snowy forest",
 304             " in a cardboard box",
 305             " holding an axe",
 306             " in an epic landscape",
 307             " in a haunted forest",
 308             " riding a motorbike",
 309             " in a futuristic city at night",
 310             " in a dystopian landscape, foggy",
 311             " in the land of snow",
 312             " that looks like a watermelon",
 313             " on the streets of London at night with neon lights flashing",
 314             " that is part octopus",
 315             " melting into a puddle",
 316             " on a birthday cake",
 317         ];
 318         const artist = [
 319             ", unreal engine 5",
 320             ", concept art",
 321             ", graphic novel",
 322             " by Vincent Van Gogh",
 323             " by Claude Monet",
 324             " by Johannes Vermeer",
 325             ", fantasy art, neon fog",
 326             ", epic lighting from above",
 327             ", trending on artstation",
 328             " by Gustav Klimt",
 329             " by Leonardo da Vinci",
 330         ];
 331
 332         prompt.value = random_from(art_type) + random_from(subject) +
 333             random_from(scenery) + random_from(artist);
 334         return false;
 335     });
 336
 337   </script>
 338 </body>
 339 </html>