5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
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">
16 <div id="header" align="center">
22 <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
27 Welcome to Zombocom. You can do anything at Zombocom, anything at
28 all. The only limit is yourself!
31 <dialog id="name-dialog">
32 <form method="dialog">
35 <input id="name" type="text" autocomplete="off">
39 <button value="default">OK</button>
45 <div id="spinner" align="center">
46 <div class="animate-flicker">
48 <img src="/pngwheel.png" class="rotate thefade">
53 <form action="" id="zombo-form">
54 <div class="form-row large">
58 <button id="safety" type="button">Safety prompt</button>
59 <textarea id="prompt" rows="4" width="100%" autocomplete="off" required></textarea>
62 <div class="form-row small left">
63 <div class="labeled-row">
67 <input id="code" type="number" min="0" max="4294967295" autocomplete="off" placeholder="(Leave blank for random)" />
71 <div class="form-row large">
72 <button id="generate" type="submit">Make the infinite possible</button>
80 <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
81 <button id="mute" class="menu-button fade volume">
84 const mute = document.querySelector("#mute");
85 const icon = document.querySelector("#mute > div");
86 const audio = document.querySelector("audio");
88 mute.addEventListener("click", () => {
92 icon.innerHTML = "🔈";
95 icon.innerHTML = "🔊";
97 mute.classList.add("fade");
103 <button id="profile" class="menu-button">
109 <script src="/socket.io/socket.io.js"></script>
113 const name_input = document.querySelector("#name");
114 const name_dialog = document.querySelector("#name-dialog");
115 const images = document.querySelector("#images");
116 const zombo_form = document.querySelector("#zombo-form");
117 const prompt = document.querySelector("#prompt");
118 const code = document.querySelector("#code");
119 const safety= document.querySelector("#safety");
120 const spinner = document.querySelector("#spinner");
121 const profile = document.querySelector("#profile");
124 profile.addEventListener('click', () => {
125 name_dialog.showModal();
128 name_dialog.addEventListener('close', () => {
129 socket.emit('set-name', name_input.value);
132 socket.on('comment', function(comment) {
133 const comments = document.querySelector("#" + comment.comments_id);
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);
142 socket.on('inform-name', (name) => {
143 console.log("Received inform-name event: " + name);
144 name_input.value = name;
147 socket.on('reset', () => {
148 images.replaceChildren();
151 socket.on('image', (image) => {
152 const figure = document.createElement('figure');
154 const img = document.createElement('img');
155 img.src = image.filename;
156 figure.appendChild(img);
158 const figcaption = document.createElement('figcaption');
159 const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
160 figcaption.appendChild(caption_text);
162 const reuse_button = document.createElement('button');
163 reuse_button.appendChild(document.createTextNode("Reuse"));
164 figcaption.appendChild(reuse_button);
166 reuse_button.addEventListener('click', () => {
167 prompt.value = image.prompt;
168 window.scrollTo(0,0);
171 figure.appendChild(figcaption);
173 const dl_comments = document.createElement('dl');
174 const comments_id = "comments_" + image.index;
175 dl_comments.className = "comments";
176 dl_comments.id = comments_id;
177 figure.appendChild(dl_comments);
179 const comment_form = document.createElement('form');
180 const comment_input = document.createElement('input')
181 comment_input.type = "text";
182 comment_input.className = "comment";
183 comment_input.placeholder = "Add a comment";
184 comment_form.appendChild(comment_input);
185 figure.appendChild(comment_form);
187 comment_input.addEventListener('focus', () => {
188 /* Do nothing if name is already set. */
189 if (name_input.value)
192 /* Otherwise, bring up the modal dialog to set the name. */
193 name_dialog.showModal();
196 comment_form.addEventListener('submit', function(e) {
198 if (comment_input.value) {
199 socket.emit('comment', {comments_id: comments_id,
200 text: comment_input.value});
201 comment_input.value = '';
205 images.prepend(figure);
208 function hide_spinner() {
209 zombo_form.style.display = "grid";
210 spinner.style.display = "none";
213 zombo_form.addEventListener('submit', function(e) {
215 /* Hide the form and show spinner while generation is happening. */
216 zombo_form.style.display = "none";
217 spinner.style.display = "block";
218 spinner_timeout = setTimeout(hide_spinner, 60000);
219 socket.emit('generate', {"prompt": prompt.value, "code": code.value});
223 socket.on('generation-done', () => {
224 /* Re-display the form and hide spinner now that generation is over. */
225 clearTimeout(spinner_timeout);
229 function random_from(items) {
230 return items[Math.floor(Math.random()*items.length)];
233 safety.addEventListener("click", () => {
236 "A hyperrealistic photograph of",
237 "A matte painting of",
238 "Epic fantasy card art of",
239 "Professional oil painting of",
241 "A pencil sketch of",
244 "A marble statue of",
249 " a Porsche 911 Carrera",
253 " an elfin princess",
255 " pastel purple clouds",
256 " a Teenage Mutant Ninja Turtle",
260 " in tropical surroundings",
262 " in an ocean storm",
263 " in a snowy forest",
264 " in a cardboard box",
266 " in an epic landscape",
267 " in a haunted forest",
268 " riding a motorbike",
269 " in a futuristic city at night",
270 " in a dystopian landscape, foggy",
271 " in the land of snow",
272 " that looks like a watermelon",
273 " on the streets of London at night with neon lights flashing",
274 " that is part octopus",
275 " melting into a puddle",
276 " on a birthday cake",
282 " by Vincent Van Gogh",
284 " by Johannes Vermeer",
285 ", fantasy art, neon fog",
286 ", epic lighting from above",
287 ", trending on artstation",
289 " by Leonardo da Vinci",
292 prompt.value = random_from(art_type) + random_from(subject) +
293 random_from(scenery) + random_from(artist);