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('image', (image) => {
 135         const figure = document.createElement('figure');
 136         const img = document.createElement('img');
 137         img.src = image.filename;
 138         const figcaption = document.createElement('figcaption');
 139         const caption_text = document.createTextNode(`${image.prompt} (${image.code})`);
 140         figcaption.appendChild(caption_text);
 141         figure.appendChild(img);
 142         figure.appendChild(figcaption);
 143         images.prepend(figure);
 144     });
 145
 146     function hide_spinner() {
 147         zombo_form.style.display = "grid";
 148         spinner.style.display = "none";
 149     }
 150
 151     zombo_form.addEventListener('submit', function(e) {
 152         e.preventDefault();
 153         /* Hide the form and show spinner while generation is happening. */
 154         zombo_form.style.display = "none";
 155         spinner.style.display = "block";
 156         spinner_timeout = setTimeout(hide_spinner, 60000);
 157         socket.emit('generate', {"prompt": prompt.value, "code": code.value});
 158         prompt.value = '';
 159     });
 160
 161     socket.on('generation-done', () => {
 162         /* Re-display the form and hide spinner now that generation is over. */
 163         clearTimeout(spinner_timeout);
 164         hide_spinner();
 165     });
 166
 167     function random_from(items) {
 168         return items[Math.floor(Math.random()*items.length)];
 169     }
 170
 171     safety.addEventListener("click", () => {
 172         const art_type = [
 173             "A portrait of",
 174             "A hyperrealistic photograph of",
 175             "A matte painting of",
 176             "Epic fantasy card art of",
 177             "Professional oil painting of",
 178             "An image of",
 179             "A pencil sketch of",
 180             "A watercolor of",
 181         ];
 182         const subject = [
 183             " a modern home",
 184             " crashing waves",
 185             " a Porsche 911 Carrera",
 186             " a Halo spartan",
 187             " a cute cat",
 188             " a mad scientist",
 189             " an elfin princess",
 190             " sci-fi buildings",
 191             " pastel purple clouds",
 192             " a Teenage Mutant Ninja Turtle",
 193         ];
 194         const scenery = [
 195             " in tropical surroundings",
 196             " in space",
 197             " in an ocean storm",
 198             " in a snowy forest",
 199             " in a cardboard box",
 200             " holding an axe",
 201             " in an epic landscape",
 202             " in a haunted forest",
 203             " riding a motorbike",
 204             " in a futuristic city at night",
 205             " in a dystopian landscape, foggy",
 206             " in the land of snow",
 207             " that looks like a watermelon",
 208             " on the streets of London at night with neon lights flashing",
 209             " that is part octopus",
 210             " melting into a puddle",
 211         ];
 212         const artist = [
 213             ", unreal engine 5",
 214             ", concept art",
 215             ", graphic novel",
 216             " by Vincent Van Gogh",
 217             " by Claude Monet",
 218             " by Johannes Vermeer",
 219             ", fantasy art, neon fog",
 220             ", epic lighting from above",
 221             ", trending on artstation",
 222         ];
 223
 224         prompt.value = random_from(art_type) + random_from(subject) +
 225             random_from(scenery) + random_from(artist);
 226         return false;
 227     });
 228
 229   </script>
 230 </body>
 231 </html>