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="text" autocomplete="off" placeholder="(Leave blank for random)" />
71 <div class="form-row large">
72 <button id="generate" type="submit">Make the infinite possible</button>
77 <div id="images" style="display: none">
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);
227 /* Also display all of the images. */
228 images.style.display = "block";
231 function random_from(items) {
232 return items[Math.floor(Math.random()*items.length)];
235 safety.addEventListener("click", () => {
238 "A hyperrealistic photograph of",
239 "A matte painting of",
240 "Epic fantasy card art of",
241 "Professional oil painting of",
243 "A pencil sketch of",
249 " a Porsche 911 Carrera",
253 " an elfin princess",
255 " pastel purple clouds",
256 " a Teenage Mutant Ninja Turtle",
259 " in tropical surroundings",
261 " in an ocean storm",
262 " in a snowy forest",
263 " in a cardboard box",
265 " in an epic landscape",
266 " in a haunted forest",
267 " riding a motorbike",
268 " in a futuristic city at night",
269 " in a dystopian landscape, foggy",
270 " in the land of snow",
271 " that looks like a watermelon",
272 " on the streets of London at night with neon lights flashing",
273 " that is part octopus",
274 " melting into a puddle",
280 " by Vincent Van Gogh",
282 " by Johannes Vermeer",
283 ", fantasy art, neon fog",
284 ", epic lighting from above",
285 ", trending on artstation",
288 prompt.value = random_from(art_type) + random_from(subject) +
289 random_from(scenery) + random_from(artist);