move static into invokeai.frontend.web directory for dist install

installer/templates/invoke.bat.in

@@ -26,7 +26,7 @@ IF /I "%restore%" == "1" (
     python .venv\Scripts\invokeai.exe %*
 ) ELSE IF /I "%restore%" == "2" (
     echo Starting the InvokeAI browser-based UI..
-    python .venv\Scripts\invokeai.exe --web %*
+    python .venv\Scripts\invokeai-web.exe %*
 ) ELSE IF /I "%restore%" == "3" (
     echo Starting textual inversion training..
     python .venv\Scripts\invokeai-ti.exe --gui

installer/templates/invoke.sh.in

@@ -49,7 +49,7 @@ if [ "$0" != "bash" ]; then
             ;;
         2)
             echo "Starting the InvokeAI browser-based UI..."
-            invokeai --web $@
+            invokeai-web $@
             ;;
         3)
             echo "Starting Textual Inversion:"

invokeai/app/api_app.py

@@ -4,6 +4,7 @@ from inspect import signature
 
 import uvicorn
 import invokeai.backend.util.logging as logger
+import invokeai.frontend.web as web_dir
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.openapi.docs import get_redoc_html, get_swagger_ui_html
@@ -11,6 +12,7 @@ from fastapi.openapi.utils import get_openapi
 from fastapi.staticfiles import StaticFiles
 from fastapi_events.handlers.local import local_handler
 from fastapi_events.middleware import EventHandlerASGIMiddleware
+from pathlib import Path
 from pydantic.schema import schema
 
 from .api.dependencies import ApiDependencies
@@ -119,7 +121,7 @@ def custom_openapi():
 app.openapi = custom_openapi
 
 # Override API doc favicons
-app.mount("/static", StaticFiles(directory="static/dream_web"), name="static")
+app.mount("/static", StaticFiles(directory=Path(web_dir.__path__[0], 'static/dream_web')), name="static")
 
 @app.get("/docs", include_in_schema=False)
 def overridden_swagger():
@@ -139,7 +141,7 @@ def overridden_redoc():
     )
 
 # Must mount *after* the other routes else it borks em
-app.mount("/", StaticFiles(directory="invokeai/frontend/web/dist", html=True), name="ui")
+app.mount("/", StaticFiles(directory=Path(web_dir.__path__[0],"dist"), html=True), name="ui")
 
 def invoke_api():
     # Start our own event loop for eventing usage

invokeai/frontend/web/.eslintignore

@@ -1,4 +1,5 @@
 dist/
+static/
 .husky/
 node_modules/
 patches/

invokeai/frontend/web/static/dream_web/index.js

@@ -0,0 +1,409 @@
+const socket = io();
+
+var priorResultsLoadState = {
+  page: 0,
+  pages: 1,
+  per_page: 10,
+  total: 20,
+  offset: 0, // number of items generated since last load
+  loading: false,
+  initialized: false,
+};
+
+function loadPriorResults() {
+  // Fix next page by offset
+  let offsetPages =
+    priorResultsLoadState.offset / priorResultsLoadState.per_page;
+  priorResultsLoadState.page += offsetPages;
+  priorResultsLoadState.pages += offsetPages;
+  priorResultsLoadState.total += priorResultsLoadState.offset;
+  priorResultsLoadState.offset = 0;
+
+  if (priorResultsLoadState.loading) {
+    return;
+  }
+
+  if (priorResultsLoadState.page >= priorResultsLoadState.pages) {
+    return; // Nothing more to load
+  }
+
+  // Load
+  priorResultsLoadState.loading = true;
+  let url = new URL('/api/images', document.baseURI);
+  url.searchParams.append(
+    'page',
+    priorResultsLoadState.initialized
+      ? priorResultsLoadState.page + 1
+      : priorResultsLoadState.page
+  );
+  url.searchParams.append('per_page', priorResultsLoadState.per_page);
+  fetch(url.href, {
+    method: 'GET',
+    headers: new Headers({ 'content-type': 'application/json' }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      priorResultsLoadState.page = data.page;
+      priorResultsLoadState.pages = data.pages;
+      priorResultsLoadState.per_page = data.per_page;
+      priorResultsLoadState.total = data.total;
+
+      data.items.forEach(function (dreamId, index) {
+        let src = 'api/images/' + dreamId;
+        fetch('/api/images/' + dreamId + '/metadata', {
+          method: 'GET',
+          headers: new Headers({ 'content-type': 'application/json' }),
+        })
+          .then((response) => response.json())
+          .then((metadata) => {
+            let seed = metadata.seed || 0; // TODO: Parse old metadata
+            appendOutput(src, seed, metadata, true);
+          });
+      });
+
+      // Load until page is full
+      if (!priorResultsLoadState.initialized) {
+        if (document.body.scrollHeight <= window.innerHeight) {
+          loadPriorResults();
+        }
+      }
+    })
+    .finally(() => {
+      priorResultsLoadState.loading = false;
+      priorResultsLoadState.initialized = true;
+    });
+}
+
+function resetForm() {
+  var form = document.getElementById('generate-form');
+  form.querySelector('fieldset').removeAttribute('disabled');
+}
+
+function initProgress(totalSteps, showProgressImages) {
+  // TODO: Progress could theoretically come from multiple jobs at the same time (in the future)
+  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 = showProgressImages ? 'initial' : 'none';
+}
+
+function setProgress(step, totalSteps, src) {
+  let progressEle = document.querySelector('#progress-bar');
+  progressEle.setAttribute('value', step);
+
+  if (src) {
+    let progressImageEle = document.querySelector('#progress-image');
+    progressImageEle.src = src;
+  }
+}
+
+function resetProgress(hide = true) {
+  if (hide) {
+    let progressSectionEle = document.querySelector('#progress-section');
+    progressSectionEle.style.display = 'none';
+  }
+  let progressEle = document.querySelector('#progress-bar');
+  progressEle.setAttribute('value', 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 ondragdream(event) {
+  let dream = event.target.dataset.dream;
+  event.dataTransfer.setData('dream', dream);
+}
+
+function seedClick(event) {
+  // Get element
+  var image = event.target.closest('figure').querySelector('img');
+  var dream = JSON.parse(decodeURIComponent(image.dataset.dream));
+
+  let form = document.querySelector('#generate-form');
+  for (const [k, v] of new FormData(form)) {
+    if (k == 'initimg') {
+      continue;
+    }
+    let formElem = form.querySelector(`*[name=${k}]`);
+    formElem.value = dream[k] !== undefined ? dream[k] : formElem.defaultValue;
+  }
+
+  document.querySelector('#seed').value = dream.seed;
+  document.querySelector('#iterations').value = 1; // Reset to 1 iteration since we clicked a single image (not a full job)
+
+  // NOTE: leaving this manual for the user for now - it was very confusing with this behavior
+  // 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'));
+}
+
+function appendOutput(src, seed, config, toEnd = false) {
+  let outputNode = document.createElement('figure');
+  let altText = seed.toString() + ' | ' + config.prompt;
+
+  // img needs width and height for lazy loading to work
+  // TODO: store the full config in a data attribute on the image?
+  const figureContents = `
+        <a href="${src}" target="_blank">
+            <img src="${src}"
+                 alt="${altText}"
+                 title="${altText}"
+                 loading="lazy"
+                 width="256"
+                 height="256"
+                 draggable="true"
+                 ondragstart="ondragdream(event, this)"
+                 data-dream="${encodeURIComponent(JSON.stringify(config))}"
+                 data-dreamId="${encodeURIComponent(config.dreamId)}">
+        </a>
+        <figcaption onclick="seedClick(event, this)">${seed}</figcaption>
+    `;
+
+  outputNode.innerHTML = figureContents;
+
+  if (toEnd) {
+    document.querySelector('#results').append(outputNode);
+  } else {
+    document.querySelector('#results').prepend(outputNode);
+  }
+  document.querySelector('#no-results-message')?.remove();
+}
+
+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,<svg xmlns="http://www.w3.org/2000/svg"/>';
+async function generateSubmit(form) {
+  // Convert file data to base64
+  // TODO: Should probably uplaod files with formdata or something, and store them in the backend?
+  let formData = Object.fromEntries(new FormData(form));
+  if (!formData.enable_generate && !formData.enable_init_image) {
+    gen_label = document.querySelector('label[for=enable_generate]').innerHTML;
+    initimg_label = document.querySelector(
+      'label[for=enable_init_image]'
+    ).innerHTML;
+    alert(`Error: one of "${gen_label}" or "${initimg_label}" must be set`);
+  }
+
+  formData.initimg_name = formData.initimg.name;
+  formData.initimg =
+    formData.initimg.name !== '' ? await toBase64(formData.initimg) : null;
+
+  // Evaluate all checkboxes
+  let checkboxes = form.querySelectorAll('input[type=checkbox]');
+  checkboxes.forEach(function (checkbox) {
+    if (checkbox.checked) {
+      formData[checkbox.name] = 'true';
+    }
+  });
+
+  let strength = formData.strength;
+  let totalSteps = formData.initimg
+    ? Math.floor(strength * formData.steps)
+    : formData.steps;
+  let showProgressImages = formData.progress_images;
+
+  // Set enabling flags
+
+  // Initialize the progress bar
+  initProgress(totalSteps, showProgressImages);
+
+  // POST, use response to listen for events
+  fetch(form.action, {
+    method: form.method,
+    headers: new Headers({ 'content-type': 'application/json' }),
+    body: JSON.stringify(formData),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      var jobId = data.jobId;
+      socket.emit('join_room', { room: jobId });
+    });
+
+  form.querySelector('fieldset').setAttribute('disabled', '');
+}
+
+function fieldSetEnableChecked(event) {
+  cb = event.target;
+  fields = cb.closest('fieldset');
+  fields.disabled = !cb.checked;
+}
+
+// Socket listeners
+socket.on('job_started', (data) => {});
+
+socket.on('dream_result', (data) => {
+  var jobId = data.jobId;
+  var dreamId = data.dreamId;
+  var dreamRequest = data.dreamRequest;
+  var src = 'api/images/' + dreamId;
+
+  priorResultsLoadState.offset += 1;
+  appendOutput(src, dreamRequest.seed, dreamRequest);
+
+  resetProgress(false);
+});
+
+socket.on('dream_progress', (data) => {
+  // TODO: it'd be nice if we could get a seed reported here, but the generator would need to be updated
+  var step = data.step;
+  var totalSteps = data.totalSteps;
+  var jobId = data.jobId;
+  var dreamId = data.dreamId;
+
+  var progressType = data.progressType;
+  if (progressType === 'GENERATION') {
+    var src = data.hasProgressImage
+      ? 'api/intermediates/' + dreamId + '/' + step
+      : null;
+    setProgress(step, totalSteps, src);
+  } else if (progressType === 'UPSCALING_STARTED') {
+    // step and totalSteps are used for upscale count on this message
+    document.getElementById('processing_cnt').textContent = step;
+    document.getElementById('processing_total').textContent = totalSteps;
+    document.getElementById('scaling-inprocess-message').style.display =
+      'block';
+  } else if (progressType == 'UPSCALING_DONE') {
+    document.getElementById('scaling-inprocess-message').style.display = 'none';
+  }
+});
+
+socket.on('job_canceled', (data) => {
+  resetForm();
+  resetProgress();
+});
+
+socket.on('job_done', (data) => {
+  jobId = data.jobId;
+  socket.emit('leave_room', { room: jobId });
+
+  resetForm();
+  resetProgress();
+});
+
+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 = 0;
+    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('/api/cancel').catch((e) => {
+      console.error(e);
+    });
+  });
+  document.documentElement.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape')
+      fetch('/api/cancel').catch((err) => {
+        console.error(err);
+      });
+  });
+
+  if (!config.gfpgan_model_exists) {
+    document.querySelector('#gfpgan').style.display = 'none';
+  }
+
+  window.addEventListener('scroll', () => {
+    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
+      loadPriorResults();
+    }
+  });
+
+  // Enable/disable forms by checkboxes
+  document
+    .querySelectorAll('legend > input[type=checkbox]')
+    .forEach(function (cb) {
+      cb.addEventListener('change', fieldSetEnableChecked);
+      fieldSetEnableChecked({ target: cb });
+    });
+
+  // Load some of the previous results
+  loadPriorResults();
+
+  // Image drop/upload WIP
+  /*
+    let drop = document.getElementById('dropper');
+    function ondrop(event) {
+      let dreamData = event.dataTransfer.getData('dream');
+      if (dreamData) {
+        var dream = JSON.parse(decodeURIComponent(dreamData));
+        alert(dream.dreamId);
+      }
+    };
+
+    function ondragenter(event) {
+      event.preventDefault();
+    };
+
+    function ondragover(event) {
+      event.preventDefault();
+    };
+
+    function ondragleave(event) {
+
+    }
+
+    drop.addEventListener('drop', ondrop);
+    drop.addEventListener('dragenter', ondragenter);
+    drop.addEventListener('dragover', ondragover);
+    drop.addEventListener('dragleave', ondragleave);
+    */
+};

invokeai/frontend/web/static/dream_web/test.html

@@ -0,0 +1,246 @@
+<html lang="en">
+  <head>
+    <title>InvokeAI Test</title>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/x-icon" href="static/dream_web/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--<script src="config.js"></script>-->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
+      integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.0.9/index.js"></script>
+
+    <style>
+      body {
+        background: #334;
+      }
+
+      #gallery > a.image {
+        display: inline-block;
+        width: 128px;
+        height: 128px;
+        margin: 8px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      .results {
+        border-color: green;
+        border-width: 1px;
+        border-style: solid;
+      }
+
+      .intermediates {
+        border-color: yellow;
+        border-width: 1px;
+        border-style: solid;
+      }
+    </style>
+  </head>
+
+  <body>
+    <button onclick="dostuff();">Test Invoke</button>
+    <div id="gallery"></div>
+    <div id="textlog">
+      <textarea id="log" rows="10" cols="60" autofocus> </textarea>
+    </div>
+
+    <script type="text/javascript">
+      const socket_url = `ws://${window.location.host}`;
+      const socket = io(socket_url, {
+        path: '/ws/socket.io',
+      });
+      socket.on('connect', (data) => {
+        //socket.emit('subscribe', { 'session': 'WcBtYATwT92Mrb9zLgeyNw==' });
+      });
+
+      function addGalleryImage(src, className) {
+        let gallery = document.getElementById('gallery');
+        let div = document.createElement('a');
+        div.href = src;
+        div.setAttribute('data-fslightbox', '');
+        div.classList.add('image');
+        div.classList.add(className);
+        div.style.backgroundImage = `url('${src}')`;
+        gallery.appendChild(div);
+
+        refreshFsLightbox();
+      }
+
+      function log(event, data) {
+        document.getElementById('log').value += `${event} => ${JSON.stringify(
+          data
+        )}\n`;
+
+        if (data.result?.image?.image_type) {
+          addGalleryImage(
+            `/api/v1/images/${data.result.image.image_type}/${data.result.image.image_name}`,
+            data.result.image.image_type
+          );
+        }
+        if (data.result?.mask?.image_type) {
+          addGalleryImage(
+            `/api/v1/images/${data.result.mask.image_type}/${data.result.mask.image_name}`,
+            data.result.mask.image_type
+          );
+        }
+
+        console.log(`${event} => ${JSON.stringify(data)}`);
+      }
+
+      socket.on('generator_progress', (data) =>
+        log('generator_progress', data)
+      );
+      socket.on('invocation_complete', (data) =>
+        log('invocation_complete', data)
+      );
+      socket.on('invocation_started', (data) =>
+        log('invocation_started', data)
+      );
+      socket.on('session_complete', (data) => {
+        log('session_complete', data);
+
+        // NOTE: you may not want to unsubscribe if you plan to continue using this session,
+        //       just make sure you unsubscribe eventually
+        socket.emit('unsubscribe', { session: data.session_id });
+      });
+
+      function dostuff() {
+        let prompt =
+          'hyper detailed 4k cryengine 3D render of a cat in a dune buggy, trending on artstation, soft atmospheric lighting, volumetric lighting, cinematic still, golden hour, crepuscular rays, smooth [grainy]';
+        let strength = 0.95;
+        let sampler = 'keuler_a';
+        let steps = 50;
+        let seed = -1;
+
+        // Start building nodes
+        var id = 1;
+        var initialNode = {
+          id: id.toString(),
+          type: 'txt2img',
+          prompt: prompt,
+          model: 'stable-diffusion-1-5',
+          sampler: sampler,
+          steps: steps,
+          seed: seed,
+        };
+        id++;
+        var i2iNode = {
+          id: id.toString(),
+          type: 'img2img',
+          prompt: prompt,
+          model: 'stable-diffusion-1-5',
+          sampler: sampler,
+          steps: steps,
+          seed: Math.floor(Math.random() * 10000),
+        };
+        id++;
+        var upscaleNode = { id: id.toString(), type: 'show_image' };
+        id++;
+
+        nodes = {};
+        nodes[initialNode.id] = initialNode;
+        nodes[i2iNode.id] = i2iNode;
+        nodes[upscaleNode.id] = upscaleNode;
+        links = [
+          {
+            source: { node_id: initialNode.id, field: 'image' },
+            destination: { node_id: i2iNode.id, field: 'image' },
+          },
+          {
+            source: { node_id: i2iNode.id, field: 'image' },
+            destination: { node_id: upscaleNode.id, field: 'image' },
+          },
+        ];
+        // expandSize = 128;
+        // for (var i = 0; i < 6; ++i) {
+        //     var i_seed = (seed == -1) ? -1 : seed + i + 1;
+        //     var startid = id - 1;
+        //     var offset = (i < 3) ? -expandSize : (3 * expandSize) + ((i - 3 + 1) * expandSize);
+        //     nodes.push({"id": id.toString(), "type": "crop", "x": offset, "y": 0, "width": 512, "height": 512});
+        //     let id_gen = id;
+        //     links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_gen.toString(),"field": "image"}});
+        //     id++;
+
+        //     nodes.push({"id": id.toString(), "type": "tomask"});
+        //     let id_mask = id;
+        //     links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_mask.toString(),"field": "image"}});
+        //     id++;
+
+        //     nodes.push({"id": id.toString(), "type": "blur", "radius": 32});
+        //     let id_mask_blur = id;
+        //     links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_mask_blur.toString(),"field": "image"}});
+        //     id++
+
+        //     nodes.push({"id": id.toString(), "type": "ilerp", "min": 128, "max": 255});
+        //     let id_ilerp = id;
+        //     links.push({"from_node": {"id": id_mask_blur.toString(), "field": "image"},"to_node": {"id": id_ilerp.toString(),"field": "image"}});
+        //     id++
+
+        //     nodes.push({"id": id.toString(), "type": "cv_inpaint"});
+        //     let id_cv_inpaint = id;
+        //     links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_cv_inpaint.toString(),"field": "image"}});
+        //     links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_cv_inpaint.toString(),"field": "mask"}});
+        //     id++;
+
+        //     nodes.push({"id": id.toString(), "type": "img2img", "prompt": prompt, "strength": strength, "sampler": sampler, "steps": steps, "seed": i_seed, "color_match": true, "inpaint_replace": inpaint_replace});
+        //     let id_i2i = id;
+        //     links.push({"from_node": {"id": id_cv_inpaint.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "image"}});
+        //     links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "mask"}});
+        //     id++;
+
+        //     nodes.push({"id": id.toString(), "type": "paste", "x": offset, "y": 0});
+        //     let id_paste = id;
+        //     links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "base_image"}});
+        //     links.push({"from_node": {"id": id_i2i.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "image"}});
+        //     links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "mask"}});
+        //     id++;
+        // }
+
+        var graph = {
+          nodes: nodes,
+          edges: links,
+        };
+
+        // var defaultGraph = {"nodes": [
+        //     {"id": "1", "type": "txt2img", "prompt": prompt},
+        //     {"id": "2", "type": "crop", "x": -256, "y": 128, "width": 512, "height": 512},
+        //     {"id": "3", "type": "tomask"},
+        //     {"id": "4", "type": "cv_inpaint"},
+        //     {"id": "5", "type": "img2img", "prompt": prompt, "strength": 0.9},
+        //     {"id": "6", "type": "paste", "x": -256, "y": 128},
+        // ],
+        // "links": [
+        //     {"from_node": {"id": "1","field": "image"},"to_node": {"id": "2","field": "image"}},
+        //     {"from_node": {"id": "2","field": "image"},"to_node": {"id": "3","field": "image"}},
+        //     {"from_node": {"id": "2","field": "image"},"to_node": {"id": "4","field": "image"}},
+        //     {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "4","field": "mask"}},
+        //     {"from_node": {"id": "4","field": "image"},"to_node": {"id": "5","field": "image"}},
+        //     {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "5","field": "mask"}},
+        //     {"from_node": {"id": "1","field": "image"},"to_node": {"id": "6","field": "base_image"}},
+        //     {"from_node": {"id": "5","field": "image"},"to_node": {"id": "6","field": "image"}}
+        // ]};
+        fetch('/api/v1/sessions/', {
+          method: 'POST',
+          headers: new Headers({ 'content-type': 'application/json' }),
+          body: JSON.stringify(graph),
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            sessionId = data.id;
+            socket.emit('subscribe', { session: sessionId });
+            fetch(`/api/v1/sessions/${sessionId}/invoke?all=true`, {
+              method: 'PUT',
+              headers: new Headers({ 'content-type': 'application/json' }),
+              body: '',
+            });
+          });
+      }
+    </script>
+  </body>
+</html>

invokeai/frontend/web/static/legacy_web/index.js

@@ -0,0 +1,234 @@
+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 = `
+        <a href="${src}" target="_blank">
+            <img src="${src}"
+                 alt="${altText}"
+                 title="${altText}"
+                 loading="lazy"
+                 width="256"
+                 height="256">
+        </a>
+        <figcaption>${seed}</figcaption>
+    `;
+
+  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,<svg xmlns="http://www.w3.org/2000/svg"/>';
+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();
+};

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "3.0.0+a0"
+__version__ = "3.0.0+a1"

pyproject.toml

@@ -132,6 +132,7 @@ version = { attr = "invokeai.version.__version__" }
     "invokeai.assets.web*","invokeai.version*",
     "invokeai.generator*","invokeai.backend*",
     "invokeai.frontend*", "invokeai.frontend.web.dist*",
+    "invokeai.frontend.web.static*",
     "invokeai.configs*",
     "invokeai.app*","ldm*",
 ]
@@ -141,6 +142,7 @@ version = { attr = "invokeai.version.__version__" }
 "invokeai.backend" = ["**.png"]
 "invokeai.configs" = ["*.example", "**/*.yaml", "*.txt"]
 "invokeai.frontend.web.dist" = ["**"]
+"invokeai.frontend.web.static" = ["**"]
 
 #=== Begin: PyTest and Coverage
 [tool.pytest.ini_options]

static/dream_web/index.js

@@ -1,396 +0,0 @@
-const socket = io();
-
-var priorResultsLoadState = {
-  page: 0,
-  pages: 1,
-  per_page: 10,
-  total: 20,
-  offset: 0, // number of items generated since last load
-  loading: false,
-  initialized: false
-};
-
-function loadPriorResults() {
-  // Fix next page by offset
-  let offsetPages = priorResultsLoadState.offset / priorResultsLoadState.per_page;
-  priorResultsLoadState.page += offsetPages;
-  priorResultsLoadState.pages += offsetPages;
-  priorResultsLoadState.total += priorResultsLoadState.offset;
-  priorResultsLoadState.offset = 0;
-
-  if (priorResultsLoadState.loading) {
-    return;
-  }
-
-  if (priorResultsLoadState.page >= priorResultsLoadState.pages) {
-    return; // Nothing more to load
-  }
-
-  // Load
-  priorResultsLoadState.loading = true
-  let url = new URL('/api/images', document.baseURI);
-  url.searchParams.append('page', priorResultsLoadState.initialized ? priorResultsLoadState.page + 1 : priorResultsLoadState.page);
-  url.searchParams.append('per_page', priorResultsLoadState.per_page);
-  fetch(url.href, {
-    method: 'GET',
-    headers: new Headers({'content-type': 'application/json'})
-  })
-  .then(response => response.json())
-  .then(data => {
-    priorResultsLoadState.page = data.page;
-    priorResultsLoadState.pages = data.pages;
-    priorResultsLoadState.per_page = data.per_page;
-    priorResultsLoadState.total = data.total;
-
-    data.items.forEach(function(dreamId, index) {
-      let src = 'api/images/' + dreamId;
-      fetch('/api/images/' + dreamId + '/metadata', {
-        method: 'GET',
-        headers: new Headers({'content-type': 'application/json'})
-      })
-      .then(response => response.json())
-      .then(metadata => {
-        let seed = metadata.seed || 0; // TODO: Parse old metadata
-        appendOutput(src, seed, metadata, true);
-      });
-    });
-
-    // Load until page is full
-    if (!priorResultsLoadState.initialized) {
-      if (document.body.scrollHeight <= window.innerHeight) {
-        loadPriorResults();
-      }
-    }
-  })
-  .finally(() => {
-    priorResultsLoadState.loading = false;
-    priorResultsLoadState.initialized = true;
-  });
-}
-
-function resetForm() {
-  var form = document.getElementById('generate-form');
-  form.querySelector('fieldset').removeAttribute('disabled');
-}
-
-function initProgress(totalSteps, showProgressImages) {
-  // TODO: Progress could theoretically come from multiple jobs at the same time (in the future)
-  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 = showProgressImages ? 'initial': 'none';
-}
-
-function setProgress(step, totalSteps, src) {
-  let progressEle = document.querySelector('#progress-bar');
-  progressEle.setAttribute('value', step);
-
-  if (src) {
-    let progressImageEle = document.querySelector('#progress-image');
-    progressImageEle.src = src;
-  }
-}
-
-function resetProgress(hide = true) {
-  if (hide) {
-    let progressSectionEle = document.querySelector('#progress-section');
-    progressSectionEle.style.display = 'none';
-  }
-  let progressEle = document.querySelector('#progress-bar');
-  progressEle.setAttribute('value', 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 ondragdream(event) {
-  let dream = event.target.dataset.dream;
-  event.dataTransfer.setData("dream", dream);
-}
-
-function seedClick(event) {
-    // Get element
-    var image = event.target.closest('figure').querySelector('img');
-    var dream = JSON.parse(decodeURIComponent(image.dataset.dream));
-
-    let form = document.querySelector("#generate-form");
-    for (const [k, v] of new FormData(form)) {
-        if (k == 'initimg') { continue; }
-        let formElem = form.querySelector(`*[name=${k}]`);
-        formElem.value = dream[k] !== undefined ? dream[k] : formElem.defaultValue;
-    }
-
-    document.querySelector("#seed").value = dream.seed;
-    document.querySelector('#iterations').value = 1; // Reset to 1 iteration since we clicked a single image (not a full job)
-
-    // NOTE: leaving this manual for the user for now - it was very confusing with this behavior
-    // 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"));
-}
-
-function appendOutput(src, seed, config, toEnd=false) {
-    let outputNode = document.createElement("figure");
-    let altText = seed.toString() + " | " + config.prompt;
-
-    // img needs width and height for lazy loading to work
-    // TODO: store the full config in a data attribute on the image?
-    const figureContents = `
-        <a href="${src}" target="_blank">
-            <img src="${src}"
-                 alt="${altText}"
-                 title="${altText}"
-                 loading="lazy"
-                 width="256"
-                 height="256"
-                 draggable="true"
-                 ondragstart="ondragdream(event, this)"
-                 data-dream="${encodeURIComponent(JSON.stringify(config))}"
-                 data-dreamId="${encodeURIComponent(config.dreamId)}">
-        </a>
-        <figcaption onclick="seedClick(event, this)">${seed}</figcaption>
-    `;
-
-    outputNode.innerHTML = figureContents;
-
-    if (toEnd) {
-      document.querySelector("#results").append(outputNode);
-    } else {
-      document.querySelector("#results").prepend(outputNode);
-    }
-    document.querySelector("#no-results-message")?.remove();
-}
-
-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,<svg xmlns="http://www.w3.org/2000/svg"/>';
-async function generateSubmit(form) {
-    // Convert file data to base64
-    // TODO: Should probably uplaod files with formdata or something, and store them in the backend?
-    let formData = Object.fromEntries(new FormData(form));
-    if (!formData.enable_generate && !formData.enable_init_image) {
-      gen_label = document.querySelector("label[for=enable_generate]").innerHTML;
-      initimg_label = document.querySelector("label[for=enable_init_image]").innerHTML;
-      alert(`Error: one of "${gen_label}" or "${initimg_label}" must be set`);
-    }
-
-
-    formData.initimg_name = formData.initimg.name
-    formData.initimg = formData.initimg.name !== '' ? await toBase64(formData.initimg) : null;
-
-    // Evaluate all checkboxes
-    let checkboxes = form.querySelectorAll('input[type=checkbox]');
-    checkboxes.forEach(function (checkbox) {
-      if (checkbox.checked) {
-        formData[checkbox.name] = 'true';
-      }
-    });
-
-    let strength = formData.strength;
-    let totalSteps = formData.initimg ? Math.floor(strength * formData.steps) : formData.steps;
-    let showProgressImages = formData.progress_images;
-
-    // Set enabling flags
-
-
-    // Initialize the progress bar
-    initProgress(totalSteps, showProgressImages);
-
-    // POST, use response to listen for events
-    fetch(form.action, {
-        method: form.method,
-        headers: new Headers({'content-type': 'application/json'}),
-        body: JSON.stringify(formData),
-    })
-    .then(response => response.json())
-    .then(data => {
-        var jobId = data.jobId;
-        socket.emit('join_room', { 'room': jobId });
-    });
-
-    form.querySelector('fieldset').setAttribute('disabled','');
-}
-
-function fieldSetEnableChecked(event) {
-  cb = event.target;
-  fields = cb.closest('fieldset');
-  fields.disabled = !cb.checked;
-}
-
-// Socket listeners
-socket.on('job_started', (data) => {})
-
-socket.on('dream_result', (data) => {
-  var jobId = data.jobId;
-  var dreamId = data.dreamId;
-  var dreamRequest = data.dreamRequest;
-  var src = 'api/images/' + dreamId;
-
-  priorResultsLoadState.offset += 1;
-  appendOutput(src, dreamRequest.seed, dreamRequest);
-
-  resetProgress(false);
-})
-
-socket.on('dream_progress', (data) => {
-  // TODO: it'd be nice if we could get a seed reported here, but the generator would need to be updated
-  var step = data.step;
-  var totalSteps = data.totalSteps;
-  var jobId = data.jobId;
-  var dreamId = data.dreamId;
-
-  var progressType = data.progressType
-  if (progressType === 'GENERATION') {
-    var src = data.hasProgressImage ?
-      'api/intermediates/' + dreamId + '/' + step
-      : null;
-    setProgress(step, totalSteps, src);
-  } else if (progressType === 'UPSCALING_STARTED') {
-    // step and totalSteps are used for upscale count on this message
-    document.getElementById("processing_cnt").textContent = step;
-    document.getElementById("processing_total").textContent = totalSteps;
-    document.getElementById("scaling-inprocess-message").style.display = "block";
-  } else if (progressType == 'UPSCALING_DONE') {
-    document.getElementById("scaling-inprocess-message").style.display = "none";
-  }
-})
-
-socket.on('job_canceled', (data) => {
-  resetForm();
-  resetProgress();
-})
-
-socket.on('job_done', (data) => {
-  jobId = data.jobId
-  socket.emit('leave_room', { 'room': jobId });
-
-  resetForm();
-  resetProgress();
-})
-
-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 = 0;
-        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('/api/cancel').catch(e => {
-            console.error(e);
-        });
-    });
-    document.documentElement.addEventListener('keydown', (e) => {
-      if (e.key === "Escape")
-        fetch('/api/cancel').catch(err => {
-          console.error(err);
-        });
-    });
-
-    if (!config.gfpgan_model_exists) {
-        document.querySelector("#gfpgan").style.display = 'none';
-    }
-
-    window.addEventListener("scroll", () => {
-      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
-        loadPriorResults();
-      }
-    });
-
-
-
-    // Enable/disable forms by checkboxes
-    document.querySelectorAll("legend > input[type=checkbox]").forEach(function(cb) {
-      cb.addEventListener('change', fieldSetEnableChecked);
-      fieldSetEnableChecked({ target: cb})
-    });
-
-
-    // Load some of the previous results
-    loadPriorResults();
-
-    // Image drop/upload WIP
-    /*
-    let drop = document.getElementById('dropper');
-    function ondrop(event) {
-      let dreamData = event.dataTransfer.getData('dream');
-      if (dreamData) {
-        var dream = JSON.parse(decodeURIComponent(dreamData));
-        alert(dream.dreamId);
-      }
-    };
-
-    function ondragenter(event) {
-      event.preventDefault();
-    };
-
-    function ondragover(event) {
-      event.preventDefault();
-    };
-
-    function ondragleave(event) {
-
-    }
-
-    drop.addEventListener('drop', ondrop);
-    drop.addEventListener('dragenter', ondragenter);
-    drop.addEventListener('dragover', ondragover);
-    drop.addEventListener('dragleave', ondragleave);
-    */
-};

static/dream_web/test.html

@@ -1,209 +0,0 @@
-<html lang="en">
-
-<head>
-  <title>InvokeAI Test</title>
-  <meta charset="utf-8">
-  <link rel="icon" type="image/x-icon" href="static/dream_web/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <!--<script src="config.js"></script>-->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
-    integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
-    crossorigin="anonymous"></script>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.0.9/index.js"></script>
-
-  <style>
-      body {
-          background:#334;
-      }
-
-      #gallery > a.image {
-          display:inline-block;
-          width:128px;
-          height:128px;
-          margin:8px;
-          background-size:contain;
-          background-repeat:no-repeat;
-          background-position:center;
-      }
-
-      .results {
-        border-color:green;
-        border-width:1px;
-        border-style:solid;
-      }
-
-      .intermediates {
-        border-color:yellow;
-        border-width:1px;
-        border-style:solid;
-      }
-  </style>
-</head>
-
-<body>
-    <button onclick="dostuff();">Test Invoke</button>
-    <div id="gallery"></div>
-    <div id="textlog">
-        <textarea id='log' rows=10 cols=60 autofocus>
-        </textarea>
-    </div>
-
-    <script type="text/javascript">
-        const socket_url = `ws://${window.location.host}`;
-        const socket = io(socket_url, {
-            path: "/ws/socket.io"
-        });
-        socket.on('connect', (data) => {
-            //socket.emit('subscribe', { 'session': 'WcBtYATwT92Mrb9zLgeyNw==' });
-        });
-
-        function addGalleryImage(src, className) {
-                let gallery = document.getElementById("gallery");
-                let div = document.createElement("a");
-                div.href = src;
-                div.setAttribute('data-fslightbox', '');
-                div.classList.add("image");
-                div.classList.add(className);
-                div.style.backgroundImage = `url('${src}')`;
-                gallery.appendChild(div);
-
-                refreshFsLightbox();
-        }
-
-        function log(event, data) {
-            document.getElementById("log").value += `${event} => ${JSON.stringify(data)}\n`;
-
-            if (data.result?.image?.image_type) {
-                addGalleryImage(`/api/v1/images/${data.result.image.image_type}/${data.result.image.image_name}`, data.result.image.image_type);
-            }
-            if (data.result?.mask?.image_type) {
-                addGalleryImage(`/api/v1/images/${data.result.mask.image_type}/${data.result.mask.image_name}`, data.result.mask.image_type);
-            }
-
-            console.log(`${event} => ${JSON.stringify(data)}`);
-        }
-
-        socket.on('generator_progress', (data) => log('generator_progress', data));
-        socket.on('invocation_complete', (data) => log('invocation_complete', data));
-        socket.on('invocation_started', (data) => log('invocation_started', data));
-        socket.on('session_complete', (data) => {
-            log('session_complete', data);
-
-            // NOTE: you may not want to unsubscribe if you plan to continue using this session,
-            //       just make sure you unsubscribe eventually
-            socket.emit('unsubscribe', { 'session': data.session_id });
-        });
-
-        function dostuff() {
-            let prompt = "hyper detailed 4k cryengine 3D render of a cat in a dune buggy, trending on artstation, soft atmospheric lighting, volumetric lighting, cinematic still, golden hour, crepuscular rays, smooth [grainy]";
-            let strength = 0.95;
-            let sampler = 'keuler_a';
-            let steps = 50;
-            let seed = -1;
-
-            // Start building nodes
-            var id = 1;
-            var initialNode = {"id": id.toString(), "type": "txt2img", "prompt": prompt, "model": "stable-diffusion-1-5", "sampler": sampler, "steps": steps, "seed": seed};
-            id++;
-            var i2iNode = {"id": id.toString(), "type": "img2img", "prompt": prompt, "model": "stable-diffusion-1-5", "sampler": sampler, "steps": steps, "seed": Math.floor(Math.random() * 10000)};
-            id++;
-            var upscaleNode = {"id": id.toString(), "type": "show_image" };
-            id++
-
-            nodes = {};
-            nodes[initialNode.id] = initialNode;
-            nodes[i2iNode.id] = i2iNode;
-            nodes[upscaleNode.id] = upscaleNode;
-            links = [
-                { "source": { "node_id": initialNode.id, field: "image" }, "destination": { "node_id": i2iNode.id, field: "image" }},
-                { "source": { "node_id": i2iNode.id, field: "image" }, "destination": { "node_id": upscaleNode.id, field: "image" }}
-            ];
-            // expandSize = 128;
-            // for (var i = 0; i < 6; ++i) {
-            //     var i_seed = (seed == -1) ? -1 : seed + i + 1;
-            //     var startid = id - 1;
-            //     var offset = (i < 3) ? -expandSize : (3 * expandSize) + ((i - 3 + 1) * expandSize);
-            //     nodes.push({"id": id.toString(), "type": "crop", "x": offset, "y": 0, "width": 512, "height": 512});
-            //     let id_gen = id;
-            //     links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_gen.toString(),"field": "image"}});
-            //     id++;
-                
-            //     nodes.push({"id": id.toString(), "type": "tomask"});
-            //     let id_mask = id;
-            //     links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_mask.toString(),"field": "image"}});
-            //     id++;
-
-            //     nodes.push({"id": id.toString(), "type": "blur", "radius": 32});
-            //     let id_mask_blur = id;
-            //     links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_mask_blur.toString(),"field": "image"}});
-            //     id++
-
-            //     nodes.push({"id": id.toString(), "type": "ilerp", "min": 128, "max": 255});
-            //     let id_ilerp = id;
-            //     links.push({"from_node": {"id": id_mask_blur.toString(), "field": "image"},"to_node": {"id": id_ilerp.toString(),"field": "image"}});
-            //     id++
-
-            //     nodes.push({"id": id.toString(), "type": "cv_inpaint"});
-            //     let id_cv_inpaint = id;
-            //     links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_cv_inpaint.toString(),"field": "image"}});
-            //     links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_cv_inpaint.toString(),"field": "mask"}});
-            //     id++;
-
-            //     nodes.push({"id": id.toString(), "type": "img2img", "prompt": prompt, "strength": strength, "sampler": sampler, "steps": steps, "seed": i_seed, "color_match": true, "inpaint_replace": inpaint_replace});
-            //     let id_i2i = id;
-            //     links.push({"from_node": {"id": id_cv_inpaint.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "image"}});
-            //     links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "mask"}});
-            //     id++;
-
-            //     nodes.push({"id": id.toString(), "type": "paste", "x": offset, "y": 0});
-            //     let id_paste = id;
-            //     links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "base_image"}});
-            //     links.push({"from_node": {"id": id_i2i.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "image"}});
-            //     links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "mask"}});
-            //     id++;
-            // }
-
-            var graph = {
-                "nodes": nodes,
-                "edges": links
-            };
-
-            // var defaultGraph = {"nodes": [
-            //     {"id": "1", "type": "txt2img", "prompt": prompt},
-            //     {"id": "2", "type": "crop", "x": -256, "y": 128, "width": 512, "height": 512},
-            //     {"id": "3", "type": "tomask"},
-            //     {"id": "4", "type": "cv_inpaint"},
-            //     {"id": "5", "type": "img2img", "prompt": prompt, "strength": 0.9},
-            //     {"id": "6", "type": "paste", "x": -256, "y": 128},
-            // ],
-            // "links": [
-            //     {"from_node": {"id": "1","field": "image"},"to_node": {"id": "2","field": "image"}},
-            //     {"from_node": {"id": "2","field": "image"},"to_node": {"id": "3","field": "image"}},
-            //     {"from_node": {"id": "2","field": "image"},"to_node": {"id": "4","field": "image"}},
-            //     {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "4","field": "mask"}},
-            //     {"from_node": {"id": "4","field": "image"},"to_node": {"id": "5","field": "image"}},
-            //     {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "5","field": "mask"}},
-            //     {"from_node": {"id": "1","field": "image"},"to_node": {"id": "6","field": "base_image"}},
-            //     {"from_node": {"id": "5","field": "image"},"to_node": {"id": "6","field": "image"}}
-            // ]};
-            fetch('/api/v1/sessions/', {
-                method: 'POST',
-                headers: new Headers({'content-type': 'application/json'}),
-                body: JSON.stringify(graph)
-            }).then(response => response.json())
-            .then(data => {
-                sessionId = data.id;
-                socket.emit('subscribe', { 'session': sessionId });
-                fetch(`/api/v1/sessions/${sessionId}/invoke?all=true`, {
-                    method: 'PUT',
-                    headers: new Headers({'content-type': 'application/json'}),
-                    body: ''
-                });
-            });
-        }
-    </script>
-</body>
-
-</html>

static/legacy_web/index.js

@@ -1,213 +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 = `
-        <a href="${src}" target="_blank">
-            <img src="${src}"
-                 alt="${altText}"
-                 title="${altText}"
-                 loading="lazy"
-                 width="256"
-                 height="256">
-        </a>
-        <figcaption>${seed}</figcaption>
-    `;
-
-    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,<svg xmlns="http://www.w3.org/2000/svg"/>';
-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()
-};