+
+ if (image.prompt && image.code) {
+ const figcaption = document.createElement('figcaption');
+ const caption_text = document.createTextNode(`${image.prompt} (${image.code}) `);
+ figcaption.appendChild(caption_text);
+
+ const reuse_button = document.createElement('button');
+ reuse_button.appendChild(document.createTextNode("Reuse"));
+ figcaption.appendChild(reuse_button);
+
+ reuse_button.addEventListener('click', () => {
+ prompt.value = image.prompt;
+ window.scrollTo(0,0);
+ });
+
+ if (image.censored) {
+ figcaption.style.display = "none";
+ }
+
+ figure.appendChild(figcaption);
+ }
+
+ const dl_comments = document.createElement('dl');
+ dl_comments.className = "comments";
+ dl_comments.id = "comments_" + image.id;
+
+ image.comments.forEach((comment) => {
+ add_comment(dl_comments, comment);
+ });
+
+ figure.appendChild(dl_comments);
+
+ const comment_form = document.createElement('form');
+ const comment_input = document.createElement('input')
+ comment_input.type = "text";
+ comment_input.className = "comment";
+ comment_input.placeholder = "Add a comment";
+ comment_form.appendChild(comment_input);
+ figure.appendChild(comment_form);
+
+ comment_input.addEventListener('focus', () => {
+ /* If the server has informed us it has our name, we are done. */
+ if (informed_name)
+ return;
+
+ /* If server has no name, check local storage. */
+ const name = localStorage.getItem('name');
+ if (name) {
+ socket.emit('set-name', name);
+ return;
+ }
+
+ /* Failing both, bring up the modal dialog to set the name. */
+ name_dialog.showModal();
+ });
+
+ comment_form.addEventListener('submit', function(e) {
+ e.preventDefault();
+ if (comment_input.value) {
+ socket.emit('comment', {image_id: image.id,
+ text: comment_input.value});
+ comment_input.value = '';
+ }
+ });
+
+ images.prepend(figure);
+ });
+
+ function hide_spinner() {
+ zombo_form.style.display = "grid";
+ spinner.style.display = "none";
+ }
+
+ zombo_form.addEventListener('submit', function(e) {
+ e.preventDefault();
+ /* Hide the form and show spinner while generation is happening. */
+ zombo_form.style.display = "none";
+ spinner.style.display = "block";
+ spinner_timeout = setTimeout(hide_spinner, 60000);
+ socket.emit('generate', {"prompt": prompt.value, "code": code.value});
+ prompt.value = '';
+ });
+
+ socket.on('generation-done', () => {
+ /* Re-display the form and hide spinner now that generation is over. */
+ clearTimeout(spinner_timeout);
+ hide_spinner();