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