-
-
✖
-
-
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>)
-
- Postprocessing...1/3
-
-
-
-
-
-
-
-
diff --git a/invokeai/frontend/web/static/legacy_web/index.js b/invokeai/frontend/web/static/legacy_web/index.js
deleted file mode 100644
index a150f3f2e9..0000000000
--- a/invokeai/frontend/web/static/legacy_web/index.js
+++ /dev/null
@@ -1,234 +0,0 @@
-function toBase64(file) {
- return new Promise((resolve, reject) => {
- const r = new FileReader();
- r.readAsDataURL(file);
- r.onload = () => resolve(r.result);
- r.onerror = (error) => reject(error);
- });
-}
-
-function appendOutput(src, seed, config) {
- let outputNode = document.createElement('figure');
-
- let variations = config.with_variations;
- if (config.variation_amount > 0) {
- variations =
- (variations ? variations + ',' : '') +
- seed +
- ':' +
- config.variation_amount;
- }
- let baseseed =
- config.with_variations || config.variation_amount > 0 ? config.seed : seed;
- let altText =
- baseseed + ' | ' + (variations ? variations + ' | ' : '') + config.prompt;
-
- // img needs width and height for lazy loading to work
- const figureContents = `
-
- 
-
-
${seed}
- `;
-
- outputNode.innerHTML = figureContents;
- let figcaption = outputNode.querySelector('figcaption');
-
- // Reload image config
- figcaption.addEventListener('click', () => {
- let form = document.querySelector('#generate-form');
- for (const [k, v] of new FormData(form)) {
- if (k == 'initimg') {
- continue;
- }
- form.querySelector(`*[name=${k}]`).value = config[k];
- }
-
- document.querySelector('#seed').value = baseseed;
- document.querySelector('#with_variations').value = variations || '';
- if (document.querySelector('#variation_amount').value <= 0) {
- document.querySelector('#variation_amount').value = 0.2;
- }
-
- saveFields(document.querySelector('#generate-form'));
- });
-
- document.querySelector('#results').prepend(outputNode);
-}
-
-function saveFields(form) {
- for (const [k, v] of new FormData(form)) {
- if (typeof v !== 'object') {
- // Don't save 'file' type
- localStorage.setItem(k, v);
- }
- }
-}
-
-function loadFields(form) {
- for (const [k, v] of new FormData(form)) {
- const item = localStorage.getItem(k);
- if (item != null) {
- form.querySelector(`*[name=${k}]`).value = item;
- }
- }
-}
-
-function clearFields(form) {
- localStorage.clear();
- let prompt = form.prompt.value;
- form.reset();
- form.prompt.value = prompt;
-}
-
-const BLANK_IMAGE_URL =
- 'data:image/svg+xml,
';
-async function generateSubmit(form) {
- const prompt = document.querySelector('#prompt').value;
-
- // Convert file data to base64
- let formData = Object.fromEntries(new FormData(form));
- formData.initimg_name = formData.initimg.name;
- formData.initimg =
- formData.initimg.name !== '' ? await toBase64(formData.initimg) : null;
-
- let strength = formData.strength;
- let totalSteps = formData.initimg
- ? Math.floor(strength * formData.steps)
- : formData.steps;
-
- let progressSectionEle = document.querySelector('#progress-section');
- progressSectionEle.style.display = 'initial';
- let progressEle = document.querySelector('#progress-bar');
- progressEle.setAttribute('max', totalSteps);
- let progressImageEle = document.querySelector('#progress-image');
- progressImageEle.src = BLANK_IMAGE_URL;
-
- progressImageEle.style.display = {}.hasOwnProperty.call(
- formData,
- 'progress_images'
- )
- ? 'initial'
- : 'none';
-
- // Post as JSON, using Fetch streaming to get results
- fetch(form.action, {
- method: form.method,
- body: JSON.stringify(formData),
- }).then(async (response) => {
- const reader = response.body.getReader();
-
- let noOutputs = true;
- while (true) {
- let { value, done } = await reader.read();
- value = new TextDecoder().decode(value);
- if (done) {
- progressSectionEle.style.display = 'none';
- break;
- }
-
- for (let event of value.split('\n').filter((e) => e !== '')) {
- const data = JSON.parse(event);
-
- if (data.event === 'result') {
- noOutputs = false;
- appendOutput(data.url, data.seed, data.config);
- progressEle.setAttribute('value', 0);
- progressEle.setAttribute('max', totalSteps);
- } else if (data.event === 'upscaling-started') {
- document.getElementById('processing_cnt').textContent =
- data.processed_file_cnt;
- document.getElementById('scaling-inprocess-message').style.display =
- 'block';
- } else if (data.event === 'upscaling-done') {
- document.getElementById('scaling-inprocess-message').style.display =
- 'none';
- } else if (data.event === 'step') {
- progressEle.setAttribute('value', data.step);
- if (data.url) {
- progressImageEle.src = data.url;
- }
- } else if (data.event === 'canceled') {
- // avoid alerting as if this were an error case
- noOutputs = false;
- }
- }
- }
-
- // Re-enable form, remove no-results-message
- form.querySelector('fieldset').removeAttribute('disabled');
- document.querySelector('#prompt').value = prompt;
- document.querySelector('progress').setAttribute('value', '0');
-
- if (noOutputs) {
- alert('Error occurred while generating.');
- }
- });
-
- // Disable form while generating
- form.querySelector('fieldset').setAttribute('disabled', '');
- document.querySelector('#prompt').value = `Generating: "${prompt}"`;
-}
-
-async function fetchRunLog() {
- try {
- let response = await fetch('/run_log.json');
- const data = await response.json();
- for (let item of data.run_log) {
- appendOutput(item.url, item.seed, item);
- }
- } catch (e) {
- console.error(e);
- }
-}
-
-window.onload = async () => {
- document.querySelector('#prompt').addEventListener('keydown', (e) => {
- if (e.key === 'Enter' && !e.shiftKey) {
- const form = e.target.form;
- generateSubmit(form);
- }
- });
- document.querySelector('#generate-form').addEventListener('submit', (e) => {
- e.preventDefault();
- const form = e.target;
-
- generateSubmit(form);
- });
- document.querySelector('#generate-form').addEventListener('change', (e) => {
- saveFields(e.target.form);
- });
- document.querySelector('#reset-seed').addEventListener('click', (e) => {
- document.querySelector('#seed').value = -1;
- saveFields(e.target.form);
- });
- document.querySelector('#reset-all').addEventListener('click', (e) => {
- clearFields(e.target.form);
- });
- document.querySelector('#remove-image').addEventListener('click', (e) => {
- initimg.value = null;
- });
- loadFields(document.querySelector('#generate-form'));
-
- document.querySelector('#cancel-button').addEventListener('click', () => {
- fetch('/cancel').catch((e) => {
- console.error(e);
- });
- });
- document.documentElement.addEventListener('keydown', (e) => {
- if (e.key === 'Escape')
- fetch('/cancel').catch((err) => {
- console.error(err);
- });
- });
-
- if (!config.gfpgan_model_exists) {
- document.querySelector('#gfpgan').style.display = 'none';
- }
- await fetchRunLog();
-};