Spaces:
Paused
Paused
| // The button's text node (it also holds an icon). | |
| function setButtonText(button, text) { | |
| const node = Array.from(button.childNodes).find(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim()); | |
| if (node) { | |
| node.textContent = ' ' + text + ' '; | |
| } | |
| } | |
| // Follow a queued job until it finishes, showing progress on the generate button. | |
| function followJob(jobId, button) { | |
| const label = 'Generate'; | |
| const poll = () => { | |
| fetch(`/jobs/${jobId}`) | |
| .then(response => response.json()) | |
| .then(job => { | |
| const p = job.progress || {}; | |
| const text = job.status === 'queued' ? 'Queued' : `${p.done || 0}/${p.total || 0}`; | |
| setButtonText(button, text); | |
| button.setAttribute('title', p.current ? `Generating ${p.current}` : job.status); | |
| button.style.opacity = job.status === 'running' || job.status === 'queued' ? 0.6 : 1; | |
| if (p.done > 0 && typeof loadImages === 'function' && document.getElementById('output-directory').value) { | |
| loadImages(); | |
| } | |
| if (job.status === 'queued' || job.status === 'running') { | |
| setTimeout(poll, 1500); | |
| return; | |
| } | |
| setButtonText(button, label); | |
| button.removeAttribute('title'); | |
| if (job.status === 'failed' && job.error) { | |
| // e.g. ADetailer or the ComfyUI Impact Pack is missing on the selected WebUI | |
| alert(job.error.message); | |
| } | |
| if (job.notes && job.notes.length) { | |
| // e.g. expression LoRAs to install on the WebUI by hand, with their download links | |
| alert(job.notes.map(note => note.message).join('\n\n')); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Lost track of the job:', error); | |
| setTimeout(poll, 5000); | |
| }); | |
| }; | |
| poll(); | |
| } | |
| document.querySelector('.generate-button').addEventListener('click', function () { | |
| var button = this; | |
| // Create an XMLHttpRequest to send data | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open("POST", "/generate", true); | |
| xhr.setRequestHeader("Content-Type", "application/json"); | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState !== 4) { | |
| return; | |
| } | |
| var result = {}; | |
| try { | |
| result = JSON.parse(xhr.responseText || '{}'); | |
| } catch (e) { | |
| console.error('Unexpected response', xhr.responseText); | |
| } | |
| if (xhr.status === 202 && result.job_id) { | |
| followJob(result.job_id, button); | |
| } else if (result.status === 'Failed') { | |
| // Invalid input, or the WebUI is not ready | |
| alert(result.message); | |
| } else { | |
| console.log('Failed to send data'); | |
| } | |
| }; | |
| // Get the thumbnail element | |
| var thumbnailElement = document.querySelector('#drop-zone-thumbnail-image'); | |
| // Get the base64 string of the image, or an empty string if no image uploaded | |
| var thumbnailSrc = thumbnailElement ? thumbnailElement.src : ""; | |
| const loraInputElements = document.querySelectorAll('.multi-select-header-option-row'); | |
| let loras = []; | |
| loras = Array.from(loraInputElements).map(loraElement => { | |
| const loraName = loraElement.querySelector('.lora-name').textContent; | |
| const loraStrength = loraElement.querySelector('.lora-strength').value; | |
| return { lora_name: loraName, lora_strength: loraStrength }; | |
| }).filter(Boolean); | |
| console.log(loras); | |
| var data = JSON.stringify({ | |
| init_images: thumbnailSrc, | |
| output_dir: document.getElementById('output-directory').value, | |
| wait: false, | |
| method: document.getElementById('edit-method-input').value, | |
| ad_scheduler: document.getElementById('scheduler-input').value, | |
| loras: loras, | |
| seed: document.getElementById('seed-input').value, | |
| ad_prompt: document.getElementById('prompt-textfield').value, | |
| ad_negative_prompt: document.getElementById('negative-prompt-textfield').value, | |
| ad_steps: document.getElementById('steps-input').value, | |
| ad_checkpoint: document.getElementById('model-input').value, | |
| ad_sampler: document.getElementById('sampler-input').value, | |
| ad_clip_skip: document.getElementById('clip-skip-input').value, | |
| ad_cfg_scale: document.getElementById('cfg-scale-input').value, | |
| ad_denoising_strength: document.getElementById('denoising-strength-input').value, | |
| // ad_inpaint_width: document.getElementById('width-input').value, | |
| // ad_inpaint_height: document.getElementById('height-input').value, | |
| }); | |
| xhr.send(data); | |
| }); |