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