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         console.log("Received inform-name event: " + name);
 161         name.value = name;
 162     });
 163
 164     socket.on('reset', () => {
 165         images.replaceChildren();
 166     });
 167
 168     socket.on('image', (image) => {
 169         const figure = document.createElement('figure');
 170         const img = document.createElement('img');
 171         img.src = image.filename;
 172         const figcaption = document.createElement('figcaption');
 173         const caption_text = document.createTextNode(`${image.prompt} (${image.code})`);
 174         figcaption.appendChild(caption_text);
 175         figure.appendChild(img);
 176         figure.appendChild(figcaption);
 177         images.prepend(figure);
 178     });
 179
 180     function hide_spinner() {
 181         zombo_form.style.display = "grid";
 182         spinner.style.display = "none";
 183     }
 184
 185     zombo_form.addEventListener('submit', function(e) {
 186         e.preventDefault();
 187         /* Hide the form and show spinner while generation is happening. */
 188         zombo_form.style.display = "none";
 189         spinner.style.display = "block";
 190         spinner_timeout = setTimeout(hide_spinner, 60000);
 191         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 192         prompt.value = '';
 193     });
 194
 195     socket.on('generation-done', () => {
 196         /* Re-display the form and hide spinner now that generation is over. */
 197         clearTimeout(spinner_timeout);
 198         hide_spinner();
 199     });
 200
 201     function random_from(items) {
 202         return items[Math.floor(Math.random()*items.length)];
 203     }
 204
 205     safety.addEventListener("click", () => {
 206         const art_type = [
 207             "A portrait of",
 208             "A hyperrealistic photograph of",
 209             "A matte painting of",
 210             "Epic fantasy card art of",
 211             "Professional oil painting of",
 212             "An image of",
 213             "A pencil sketch of",
 214             "A watercolor of",
 215         ];
 216         const subject = [
 217             " a modern home",
 218             " crashing waves",
 219             " a Porsche 911 Carrera",
 220             " a Halo spartan",
 221             " a cute cat",
 222             " a mad scientist",
 223             " an elfin princess",
 224             " sci-fi buildings",
 225             " pastel purple clouds",
 226             " a Teenage Mutant Ninja Turtle",
 227         ];
 228         const scenery = [
 229             " in tropical surroundings",
 230             " in space",
 231             " in an ocean storm",
 232             " in a snowy forest",
 233             " in a cardboard box",
 234             " holding an axe",
 235             " in an epic landscape",
 236             " in a haunted forest",
 237             " riding a motorbike",
 238             " in a futuristic city at night",
 239             " in a dystopian landscape, foggy",
 240             " in the land of snow",
 241             " that looks like a watermelon",
 242             " on the streets of London at night with neon lights flashing",
 243             " that is part octopus",
 244             " melting into a puddle",
 245         ];
 246         const artist = [
 247             ", unreal engine 5",
 248             ", concept art",
 249             ", graphic novel",
 250             " by Vincent Van Gogh",
 251             " by Claude Monet",
 252             " by Johannes Vermeer",
 253             ", fantasy art, neon fog",
 254             ", epic lighting from above",
 255             ", trending on artstation",
 256         ];
 257
 258         prompt.value = random_from(art_type) + random_from(subject) +
 259             random_from(scenery) + random_from(artist);
 260         return false;
 261     });
 262
 263   </script>
 264 </body>
 265 </html>