diff --git a/.prettierrc b/.prettierrc
index e69de29..cce9d3c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "semi": false
+}
diff --git a/dialog_box.js b/dialog_box.js
index 9385ff0..5d38ec1 100644
--- a/dialog_box.js
+++ b/dialog_box.js
@@ -11,44 +11,43 @@ async function prompt(
     "sp-divider",
     "sp-body",
     "footer",
-  ].map((tag) => document.createElement(tag));
-  [headingEl, dividerEl, bodyEl, footerEl].forEach((el) => {
-    el.style.margin = "6px";
-    el.style.width = "calc(100% - 12px)";
-  });
+  ].map((tag) => document.createElement(tag))
+  ;[headingEl, dividerEl, bodyEl, footerEl].forEach((el) => {
+    el.style.margin = "6px"
+    el.style.width = "calc(100% - 12px)"
+  })
 
-  formEl.setAttribute("method", "dialog");
-  formEl.addEventListener("submit", () => dlgEl.close());
+  formEl.setAttribute("method", "dialog")
+  formEl.addEventListener("submit", () => dlgEl.close())
 
-  footerEl.style.marginTop = "26px";
+  footerEl.style.marginTop = "26px"
 
-  dividerEl.setAttribute("size", "large");
+  dividerEl.setAttribute("size", "large")
 
-  headingEl.textContent = heading;
+  headingEl.textContent = heading
 
-  bodyEl.textContent = body;
+  bodyEl.textContent = body
 
   buttons.forEach((btnText, idx) => {
-    const btnEl = document.createElement("sp-button");
+    const btnEl = document.createElement("sp-button")
     btnEl.setAttribute(
       "variant",
       idx === buttons.length - 1 ? btnText.variant || "cta" : "secondary"
-    );
-    if (idx === buttons.length - 1)
-      btnEl.setAttribute("autofocus", "autofocus");
-    if (idx < buttons.length - 1) btnEl.setAttribute("quiet");
-    btnEl.textContent = btnText.text || btnText;
-    btnEl.style.marginLeft = "12px";
-    btnEl.addEventListener("click", () => dlgEl.close(btnText.text || btnText));
-    footerEl.appendChild(btnEl);
-  });
-  [headingEl, dividerEl, bodyEl, footerEl].forEach((el) =>
+    )
+    if (idx === buttons.length - 1) btnEl.setAttribute("autofocus", "autofocus")
+    if (idx < buttons.length - 1) btnEl.setAttribute("quiet")
+    btnEl.textContent = btnText.text || btnText
+    btnEl.style.marginLeft = "12px"
+    btnEl.addEventListener("click", () => dlgEl.close(btnText.text || btnText))
+    footerEl.appendChild(btnEl)
+  })
+  ;[headingEl, dividerEl, bodyEl, footerEl].forEach((el) =>
     formEl.appendChild(el)
-  );
-  dlgEl.appendChild(formEl);
-  document.body.appendChild(dlgEl);
+  )
+  dlgEl.appendChild(formEl)
+  document.body.appendChild(dlgEl)
 
-  return dlgEl.uxpShowModal(options);
+  return dlgEl.uxpShowModal(options)
 }
 
 // const r1 = await prompt(
@@ -73,4 +72,4 @@ async function prompt(
 //   /* Do the delete */
 // }
 
-module.exports = { prompt };
+module.exports = { prompt }
diff --git a/export_png.js b/export_png.js
index f6b5070..1db811c 100644
--- a/export_png.js
+++ b/export_png.js
@@ -1,20 +1,20 @@
-const { executeAsModal } = require("photoshop").core;
-const storage = require("uxp").storage;
-const fs = storage.localFileSystem;
-const formats = require("uxp").storage.formats;
+const { executeAsModal } = require("photoshop").core
+const storage = require("uxp").storage
+const fs = storage.localFileSystem
+const formats = require("uxp").storage.formats
 async function exportPngCommand() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
   // const result = await batchPlay { _obj: “exportSelectionAsFileTypePressed”}
 
   // const destFolder = (await storage.localFileSystem.getDataFolder()).nativePath;
-  const storage = require("uxp").storage;
-  const fs = storage.localFileSystem;
+  const storage = require("uxp").storage
+  const fs = storage.localFileSystem
 
-  let pluginFolder = await fs.getPluginFolder();
+  let pluginFolder = await fs.getPluginFolder()
   // await fs.getFolder("./init_images")
   let init_images_dir = await pluginFolder.getEntry(
     "./server/python_server/init_images"
-  );
+  )
 
   const exportCommand = {
     _obj: "exportSelectionAsFileTypePressed",
@@ -26,20 +26,20 @@ async function exportPngCommand() {
     sRGB: true,
     openWindow: false,
     _options: { dialogOptions: "dontDisplay" },
-  };
+  }
   const result = await batchPlay([exportCommand], {
     synchronousExecution: true,
     modalBehavior: "execute",
-  });
+  })
 
-  return result;
+  return result
 }
 async function exportPng() {
-  const { executeAsModal } = require("photoshop").core;
+  const { executeAsModal } = require("photoshop").core
   try {
-    await executeAsModal(exportPngCommand);
+    await executeAsModal(exportPngCommand)
   } catch (e) {
-    console.warn("exportPng error:", e);
+    console.warn("exportPng error:", e)
   }
 }
 
@@ -49,39 +49,39 @@ const readPng = async (image_name) => {
     await executeAsModal(
       async (control) => {
         // const tempFolder = await fs.getTemporaryFolder() ;
-        const pluginFolder = await fs.getPluginFolder();
+        const pluginFolder = await fs.getPluginFolder()
 
         let init_images_dir = await pluginFolder.getEntry(
           "./server/python_server/init_images"
-        );
+        )
         // let init_images_dir = await pluginFolder.getEntry(
         //   './server/python_server/init_images'
         // )
         const file = await init_images_dir.createFile(image_name, {
           overwrite: true,
-        });
+        })
 
-        const currentDocument = app.activeDocument;
+        const currentDocument = app.activeDocument
         await currentDocument.saveAs.png(
           file,
           {
             compression: 6,
           },
           true
-        );
+        )
 
         // const arrayBuffer = await file.read({format: formats.binary}) ;
         // console.log(arrayBuffer, 'arrayBuffer') ;
       },
 
       { commandName: "readPng" }
-    );
+    )
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-};
+}
 
-const psapi = require("./psapi");
+const psapi = require("./psapi")
 async function newExportPng(layer, image_name) {
   //store layers we want to export in variables
   // let layerToExports =
@@ -97,24 +97,24 @@ async function newExportPng(layer, image_name) {
 
     //create new document
     let exportDoc = await executeAsModal(async () => {
-      return await app.documents.add;
-    });
+      return await app.documents.add
+    })
 
     // for (layer of layersToExport) {
     await executeAsModal(async () => {
-      console.log(layer.id);
-      const dupLayer = await layer.duplicate(exportDoc);
-      await psapi.selectLayers([dupLayer]);
-      await psapi.selectLayerChannelCommand();
-      const selection_info = await psapi.getSelectionInfoExe();
-      await exportDoc.crop(selection_info);
+      console.log(layer.id)
+      const dupLayer = await layer.duplicate(exportDoc)
+      await psapi.selectLayers([dupLayer])
+      await psapi.selectLayerChannelCommand()
+      const selection_info = await psapi.getSelectionInfoExe()
+      await exportDoc.crop(selection_info)
       // export_image_name = `${layer.name}.png`
-      await readPng(image_name);
+      await readPng(image_name)
       // await exportDoc.closeWithoutSaving()
-    });
+    })
     // }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -140,17 +140,17 @@ For the save function, if running UXP AP1 version 1 then use "wait" for modalBeh
 If running on UXP API version 2 then use "execute" for modalBahavior, or remove the options and use {} so the options go to default.
 */
 async function savePNG(saveDataTemp) {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   async function savePNGCommand() {
     var saveFolder =
-      await require("uxp").storage.localFileSystem.getPluginFolder();
+      await require("uxp").storage.localFileSystem.getPluginFolder()
 
     // Again, my variable here is global and assigned earlier. The value is changed during a batch loop for each file.
-    var saveFile = await saveFolder.createFile("fileName.png");
+    var saveFile = await saveFolder.createFile("fileName.png")
 
     const saveData =
-      await require("uxp").storage.localFileSystem.createSessionToken(saveFile);
+      await require("uxp").storage.localFileSystem.createSessionToken(saveFile)
 
     const result = await batchPlay(
       [
@@ -190,11 +190,11 @@ async function savePNG(saveDataTemp) {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
+    )
   }
   await executeAsModal(async () => {
-    savePNGCommand();
-  });
+    savePNGCommand()
+  })
 }
 
 ////////////////////End method 3////////////////////////////
@@ -204,4 +204,4 @@ module.exports = {
   readPng,
   savePNG,
   newExportPng,
-};
+}
diff --git a/helper.js b/helper.js
index d884260..ce71e8b 100644
--- a/helper.js
+++ b/helper.js
@@ -1,28 +1,28 @@
-const { unselectActiveLayers } = require("./psapi");
+const { unselectActiveLayers } = require("./psapi")
 
-const app = window.require("photoshop").app;
+const app = window.require("photoshop").app
 
 function getActiveLayer() {
-  let activeLayers = app.activeDocument.activeLayers;
+  let activeLayers = app.activeDocument.activeLayers
   // console.dir(getSize())
   for (const layer of activeLayers) {
-    console.dir({ layer });
-    const name = layer.name;
-    console.dir({ name });
-    let layer_size = getLayerSize(layer);
-    console.dir({ layer_size });
+    console.dir({ layer })
+    const name = layer.name
+    console.dir({ name })
+    let layer_size = getLayerSize(layer)
+    console.dir({ layer_size })
   }
 
-  return activeLayers[0];
+  return activeLayers[0]
 }
 
 function getSize() {
-  let doc = app.activeDocument;
-  return { height: doc.height, width: doc.width };
+  let doc = app.activeDocument
+  return { height: doc.height, width: doc.width }
 }
 
-const { batchPlay } = require("photoshop").action;
-const { executeAsModal } = require("photoshop").core;
+const { batchPlay } = require("photoshop").action
+const { executeAsModal } = require("photoshop").core
 
 async function reselectBatchPlay(selectionInfo) {
   const result = await batchPlay(
@@ -63,21 +63,21 @@ async function reselectBatchPlay(selectionInfo) {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 }
 
 async function reselect(selectionInfo) {
   await executeAsModal(
     async () => {
-      reselectBatchPlay(selectionInfo);
+      reselectBatchPlay(selectionInfo)
     },
     { commandName: "reselect" }
-  );
+  )
 }
 
 //unselect the rectangular marquee selection area
 async function unSelect() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   const result = await batchPlay(
     [
@@ -102,9 +102,9 @@ async function unSelect() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  return result;
+  return result
 }
 
 // async function layerToSelectionHelper () {
@@ -204,4 +204,4 @@ async function unSelect() {
 
 module.exports = {
   // layerToSelection
-};
+}
diff --git a/index.js b/index.js
index 32fec8b..5487590 100644
--- a/index.js
+++ b/index.js
@@ -2,79 +2,79 @@
 // helloHelper2 = require('./helper.js')
 // for organizational proposes
 
-const helper = require("./helper");
-const sdapi = require("./sdapi");
-const exportHelper = require("./export_png");
-const outpaint = require("./outpaint");
-const psapi = require("./psapi");
-const app = window.require("photoshop").app;
+const helper = require("./helper")
+const sdapi = require("./sdapi")
+const exportHelper = require("./export_png")
+const outpaint = require("./outpaint")
+const psapi = require("./psapi")
+const app = window.require("photoshop").app
 
-const { batchPlay } = require("photoshop").action;
-const { executeAsModal } = require("photoshop").core;
-const dialog_box = require("./dialog_box");
+const { batchPlay } = require("photoshop").action
+const { executeAsModal } = require("photoshop").core
+const dialog_box = require("./dialog_box")
 // const {entrypoints} = require('uxp')
-const html_manip = require("./utility/html_manip");
-const export_png = require("./export_png");
-const viewer = require("./viewer");
-const selection = require("./selection");
-const util_layer = require("./utility/layer");
-const sd_options = require("./utility/sdapi/options");
-const sd_config = require("./utility/sdapi/config");
-const session = require("./utility/session");
-const ui = require("./utility/ui");
-const script_horde = require("./utility/sd_scripts/horde");
+const html_manip = require("./utility/html_manip")
+const export_png = require("./export_png")
+const viewer = require("./viewer")
+const selection = require("./selection")
+const util_layer = require("./utility/layer")
+const sd_options = require("./utility/sdapi/options")
+const sd_config = require("./utility/sdapi/config")
+const session = require("./utility/session")
+const ui = require("./utility/ui")
+const script_horde = require("./utility/sd_scripts/horde")
 async function hasSessionSelectionChanged() {
   try {
-    const isSelectionActive = await psapi.checkIfSelectionAreaIsActive();
+    const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
     if (isSelectionActive) {
-      const current_selection = isSelectionActive; // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
+      const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
 
       if (await hasSelectionChanged(current_selection, g_selection)) {
-        return true;
+        return true
       } else {
         //selection has not changed
-        return false;
+        return false
       }
     }
   } catch (e) {
-    console.warn(e);
-    return false;
+    console.warn(e)
+    return false
   }
 }
 
 async function calcWidthHeightFromSelection() {
   //set the width and height, hrWidth, and hrHeight using selection info and selection mode
-  const selection_mode = html_manip.getSelectionMode();
+  const selection_mode = html_manip.getSelectionMode()
   if (selection_mode === "ratio") {
     //change (width and height) and (hrWidth, hrHeight) to match the ratio of selection
     const [width, height, hr_width, hr_height] =
-      await selection.selectionToFinalWidthHeight();
+      await selection.selectionToFinalWidthHeight()
 
-    html_manip.autoFillInWidth(width);
-    html_manip.autoFillInHeight(height);
-    html_manip.autoFillInHRWidth(hr_width);
-    html_manip.autoFillInHRHeight(hr_height);
+    html_manip.autoFillInWidth(width)
+    html_manip.autoFillInHeight(height)
+    html_manip.autoFillInHRWidth(hr_width)
+    html_manip.autoFillInHRHeight(hr_height)
   } else if (selection_mode === "precise") {
-    const selectionInfo = await psapi.getSelectionInfoExe();
+    const selectionInfo = await psapi.getSelectionInfoExe()
     const [width, height, hr_width, hr_height] = [
       selectionInfo.width,
       selectionInfo.height,
       0,
       0,
-    ];
-    html_manip.autoFillInWidth(width);
-    html_manip.autoFillInHeight(height);
+    ]
+    html_manip.autoFillInWidth(width)
+    html_manip.autoFillInHeight(height)
   }
 }
 const eventHandler = async (event, descriptor) => {
   try {
-    console.log(event, descriptor);
+    console.log(event, descriptor)
 
-    const isSelectionActive = await psapi.checkIfSelectionAreaIsActive();
+    const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
     if (isSelectionActive) {
-      const current_selection = isSelectionActive; // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
+      const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
 
-      await calcWidthHeightFromSelection();
+      await calcWidthHeightFromSelection()
 
       // console.log(` (${final_width}* ${final_height})/(${current_selection.width} * ${current_selection.height})`)
       // console.log("detail density: ",(final_width* final_height)/(current_selection.width * current_selection.height))
@@ -85,53 +85,53 @@ const eventHandler = async (event, descriptor) => {
         // endSessionUI //red color
         // if selection has changed : change the color and text generate btn  "Generate" color "red"
         // g_ui.endSessionUI()
-        const selected_mode = html_manip.getMode();
-        g_ui.generateModeUI(selected_mode);
+        const selected_mode = html_manip.getMode()
+        g_ui.generateModeUI(selected_mode)
       } else {
         //indicate that the session will continue. only if the session we are in the same mode as the session's mode
         // startSessionUI// green color
-        const current_mode = html_manip.getMode();
+        const current_mode = html_manip.getMode()
         if (g_generation_session.isSameMode(current_mode)) {
           // g_ui.startSessionUI()
-          g_ui.generateMoreUI();
+          g_ui.generateMoreUI()
         }
       }
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-};
+}
 
 require("photoshop").action.addNotificationListener(
   ["set", "move"],
   eventHandler
-);
+)
 
 async function getUniqueDocumentId() {
   try {
-    uniqueDocumentId = await psapi.readUniqueDocumentIdExe();
+    uniqueDocumentId = await psapi.readUniqueDocumentIdExe()
 
-    console.log("getUniqueDocumentId():  uniqueDocumentId: ", uniqueDocumentId);
+    console.log("getUniqueDocumentId():  uniqueDocumentId: ", uniqueDocumentId)
 
     // Regular expression to check if string is a valid UUID
     const regexExp =
-      /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi;
+      /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi
 
     // String with valid UUID separated by dash
     // const str = 'a24a6ea4-ce75-4665-a070-57453082c256'
 
-    const isValidId = regexExp.test(uniqueDocumentId); // true
-    console.log("isValidId: ", isValidId);
+    const isValidId = regexExp.test(uniqueDocumentId) // true
+    console.log("isValidId: ", isValidId)
     if (isValidId == false) {
-      let uuid = self.crypto.randomUUID();
-      console.log(uuid); // for example "36b8f84d-df4e-4d49-b662-bcde71a8764f"
-      await psapi.saveUniqueDocumentIdExe(uuid);
-      uniqueDocumentId = uuid;
+      let uuid = self.crypto.randomUUID()
+      console.log(uuid) // for example "36b8f84d-df4e-4d49-b662-bcde71a8764f"
+      await psapi.saveUniqueDocumentIdExe(uuid)
+      uniqueDocumentId = uuid
     }
   } catch (e) {
-    console.warn("warning Document Id may not be valid", e);
+    console.warn("warning Document Id may not be valid", e)
   }
-  return uniqueDocumentId;
+  return uniqueDocumentId
 }
 
 // document
@@ -147,36 +147,36 @@ Array.from(document.querySelectorAll(".sp-tab")).forEach((theTab) => {
       // localStorage.setItem("currentTab", theTab.getAttribute("id"));
       Array.from(document.querySelectorAll(".sp-tab")).forEach((aTab) => {
         if (aTab.getAttribute("id") === theTab.getAttribute("id")) {
-          aTab.classList.add("selected");
+          aTab.classList.add("selected")
         } else {
-          aTab.classList.remove("selected");
+          aTab.classList.remove("selected")
         }
-      });
+      })
       Array.from(document.querySelectorAll(".sp-tab-page")).forEach(
         (tabPage) => {
           if (
             tabPage.getAttribute("id").startsWith(theTab.getAttribute("id"))
           ) {
-            tabPage.classList.add("visible-hack");
+            tabPage.classList.add("visible-hack")
           } else {
-            tabPage.classList.remove("visible-hack");
+            tabPage.classList.remove("visible-hack")
           }
         }
-      );
+      )
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  };
-});
+  }
+})
 
 document.getElementById("sp-viewer-tab").addEventListener("click", () => {
-  moveElementToAnotherTab("batchNumberUi", "batchNumberViewerTabContainer");
-});
+  moveElementToAnotherTab("batchNumberUi", "batchNumberViewerTabContainer")
+})
 document
   .getElementById("sp-stable-diffusion-ui-tab")
   .addEventListener("click", () => {
-    moveElementToAnotherTab("batchNumberUi", "batchNumber-steps-container");
-  });
+    moveElementToAnotherTab("batchNumberUi", "batchNumber-steps-container")
+  })
 // entrypoints.setup({
 
 //   panels:{
@@ -192,17 +192,17 @@ document
 //   )
 // just a number that shouldn't unique enough that we will use when save files.
 // each session will get a number from 1 to 1000000
-const random_session_id = Math.floor(Math.random() * 1000000 + 1);
+const random_session_id = Math.floor(Math.random() * 1000000 + 1)
 
 function getSelectedText() {
   // JavaScript
   //     // Obtain the object reference for the <textarea>
   // const txtarea = document.getElementById("taPrompt");
-  const promptTextarea = document.querySelector("#taPrompt");
-  console.log("promptTextarea: ", promptTextarea.value);
+  const promptTextarea = document.querySelector("#taPrompt")
+  console.log("promptTextarea: ", promptTextarea.value)
   //     // Obtain the index of the first selected character
-  var start = promptTextarea.selectionStart;
-  console.log("start: ", start);
+  var start = promptTextarea.selectionStart
+  console.log("start: ", start)
   //     // Obtain the index of the last selected character
   //     var finish = txtarea.selectionEnd;
   //     console.log("finish: ",finish)
@@ -237,151 +237,150 @@ function getCommentedString() {
 
   and artgerm 
   
-   */ and famous artist`;
-  console.log("getCommentedString: text: ", text);
+   */ and famous artist`
+  console.log("getCommentedString: text: ", text)
 
   // let pattern = /(\/)(\*)(\s|\S)*\*\\/g;
-  let pattern = /(\/)(\*)(\s|\S)*?(\*\/)/g;
+  let pattern = /(\/)(\*)(\s|\S)*?(\*\/)/g
 
-  let result = text.match(pattern);
-  console.log("getCommentedString: ", result);
+  let result = text.match(pattern)
+  console.log("getCommentedString: ", result)
 }
 
 //duplicate the active layer
 async function duplication() {
   try {
-    console.log("active layer id: ", app.activeDocument.activeLayers[0].id);
+    console.log("active layer id: ", app.activeDocument.activeLayers[0].id)
     await executeAsModal(async () => {
-      let inner_new_layer =
-        await app.activeDocument.activeLayers[0].duplicate();
-      console.log("inner_new_layer id: ", inner_new_layer.id);
-    });
+      let inner_new_layer = await app.activeDocument.activeLayers[0].duplicate()
+      console.log("inner_new_layer id: ", inner_new_layer.id)
+    })
 
-    console.log("new active layer id: ", app.activeDocument.activeLayers[0].id);
+    console.log("new active layer id: ", app.activeDocument.activeLayers[0].id)
   } catch (e) {
-    console.warn("duplication error:", e);
+    console.warn("duplication error:", e)
   }
 }
 
 function tempDisableElement(element, time) {
-  element.disabled = true;
-  element.style.opacity = "0.65";
-  element.style.cursor = "not-allowed";
+  element.disabled = true
+  element.style.opacity = "0.65"
+  element.style.cursor = "not-allowed"
   setTimeout(function () {
-    element.disabled = false;
-    element.style.opacity = "1.0";
-    element.style.cursor = "default";
-  }, time);
+    element.disabled = false
+    element.style.opacity = "1.0"
+    element.style.cursor = "default"
+  }, time)
 }
 
 async function refreshUI() {
   try {
-    const b_proxy_server_status = await updateVersionUI();
+    const b_proxy_server_status = await updateVersionUI()
     if (b_proxy_server_status) {
-      html_manip.setProxyServerStatus("connected", "disconnected");
+      html_manip.setProxyServerStatus("connected", "disconnected")
     } else {
-      html_manip.setProxyServerStatus("disconnected", "connected");
+      html_manip.setProxyServerStatus("disconnected", "connected")
     }
 
-    const bSamplersStatus = await initSamplers();
+    const bSamplersStatus = await initSamplers()
     if (bSamplersStatus) {
       //means both automatic1111 and proxy server are online
-      html_manip.setAutomaticStatus("connected", "disconnected");
+      html_manip.setAutomaticStatus("connected", "disconnected")
       // html_manip.setProxyServerStatus('connected','disconnected')
     } else {
-      html_manip.setAutomaticStatus("disconnected", "connected");
+      html_manip.setAutomaticStatus("disconnected", "connected")
     }
-    await refreshModels();
+    await refreshModels()
     //get the latest options
-    await g_sd_options_obj.getOptions();
+    await g_sd_options_obj.getOptions()
     //get the selected model
-    const current_model_title = g_sd_options_obj.getCurrentModel();
+    const current_model_title = g_sd_options_obj.getCurrentModel()
     //update the ui with that model title
     const current_model_hash =
-      html_manip.getModelHashByTitle(current_model_title);
-    html_manip.autoFillInModel(current_model_hash);
+      html_manip.getModelHashByTitle(current_model_title)
+    html_manip.autoFillInModel(current_model_hash)
 
     //fetch the inpaint mask weight from sd webui and update the slider with it.
     const inpainting_mask_weight =
-      await g_sd_options_obj.getInpaintingMaskWeight();
-    console.log("inpainting_mask_weight: ", inpainting_mask_weight);
-    html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight);
+      await g_sd_options_obj.getInpaintingMaskWeight()
+    console.log("inpainting_mask_weight: ", inpainting_mask_weight)
+    html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function refreshModels() {
   try {
-    g_models = await sdapi.requestGetModels();
+    g_models = await sdapi.requestGetModels()
     // const models_menu_element = document.getElementById('mModelsMenu')
     // models_menu_element.value = ""
-    document.getElementById("mModelsMenu").innerHTML = "";
+    document.getElementById("mModelsMenu").innerHTML = ""
 
     for (let model of g_models) {
-      console.log(model.title);
-      const menu_item_element = document.createElement("sp-menu-item");
-      menu_item_element.className = "mModelMenuItem";
-      menu_item_element.innerHTML = model.title;
-      menu_item_element.dataset.model_hash = model.hash;
-      menu_item_element.dataset.model_title = model.title;
-      document.getElementById("mModelsMenu").appendChild(menu_item_element);
+      console.log(model.title)
+      const menu_item_element = document.createElement("sp-menu-item")
+      menu_item_element.className = "mModelMenuItem"
+      menu_item_element.innerHTML = model.title
+      menu_item_element.dataset.model_hash = model.hash
+      menu_item_element.dataset.model_title = model.title
+      document.getElementById("mModelsMenu").appendChild(menu_item_element)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function updateVersionUI() {
-  let bStatus = false;
+  let bStatus = false
   try {
-    version = await sdapi.getVersionRequest();
-    document.getElementById("lVersionNumber").textContent = version;
+    version = await sdapi.getVersionRequest()
+    document.getElementById("lVersionNumber").textContent = version
     if (version !== "v0.0.0") {
-      bStatus = true;
+      bStatus = true
     }
   } catch (e) {
-    console.warn(e);
-    document.getElementById("lVersionNumber").textContent = "v0.0.0";
-    bStatus = false;
+    console.warn(e)
+    document.getElementById("lVersionNumber").textContent = "v0.0.0"
+    bStatus = false
   }
-  return bStatus;
+  return bStatus
 }
 
 async function initSamplers() {
-  let bStatus = false;
+  let bStatus = false
   try {
-    let sampler_group = document.getElementById("sampler_group");
-    sampler_group.innerHTML = "";
+    let sampler_group = document.getElementById("sampler_group")
+    sampler_group.innerHTML = ""
 
-    const samplers = await sdapi.requestGetSamplers();
+    const samplers = await sdapi.requestGetSamplers()
     for (sampler of samplers) {
-      console.log(sampler);
+      console.log(sampler)
       // sampler.name
       // <sp-radio class="rbSampler" value="Euler">Euler</sp-radio>
-      const rbSampler = document.createElement("sp-radio");
+      const rbSampler = document.createElement("sp-radio")
 
-      rbSampler.innerHTML = sampler.name;
-      rbSampler.setAttribute("class", "rbSampler");
-      rbSampler.setAttribute("value", sampler.name);
+      rbSampler.innerHTML = sampler.name
+      rbSampler.setAttribute("class", "rbSampler")
+      rbSampler.setAttribute("value", sampler.name)
 
-      sampler_group.appendChild(rbSampler);
+      sampler_group.appendChild(rbSampler)
       //add click event on radio button for Sampler radio button, so that when a button is clicked it change g_sd_sampler globally
 
       //we could delete the click() event
       rbSampler.addEventListener("click", (evt) => {
-        g_sd_sampler = evt.target.value;
-        console.log(`You clicked: ${g_sd_sampler}`);
-      });
+        g_sd_sampler = evt.target.value
+        console.log(`You clicked: ${g_sd_sampler}`)
+      })
     }
-    document.getElementsByClassName("rbSampler")[0].setAttribute("checked", "");
+    document.getElementsByClassName("rbSampler")[0].setAttribute("checked", "")
     if (samplers.length > 0) {
-      bStatus = true;
+      bStatus = true
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-  return bStatus;
+  return bStatus
 }
 
 function promptShortcutExample() {
@@ -392,13 +391,9 @@ function promptShortcutExample() {
     painterly_style_1:
       "A full portrait of a beautiful post apocalyptic offworld arctic explorer, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration",
     ugly: " ((((ugly)))), (((duplicate))), ((morbid)), ((mutilated)), out of frame, extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck)))",
-  };
-  var JSONInPrettyFormat = JSON.stringify(
-    prompt_shortcut_example,
-    undefined,
-    7
-  );
-  document.getElementById("taPromptShortcut").value = JSONInPrettyFormat;
+  }
+  var JSONInPrettyFormat = JSON.stringify(prompt_shortcut_example, undefined, 7)
+  document.getElementById("taPromptShortcut").value = JSONInPrettyFormat
 }
 
 function autoFillInSettings(metadata_json) {
@@ -415,65 +410,65 @@ function autoFillInSettings(metadata_json) {
       "Seed resize from": "-1x-1",
       "Denoising strength": "0",
       "Conditional mask weight": "1.0",
-    };
+    }
 
     //sometime the negative prompt is stored within the prompt
     function extractNegativePrompt(prompt) {
-      const splitter = "\nNegative prompt:";
-      const prompts = prompt.split(splitter);
-      console.log("prompts: ", prompts);
-      let negative_prompt = "";
+      const splitter = "\nNegative prompt:"
+      const prompts = prompt.split(splitter)
+      console.log("prompts: ", prompts)
+      let negative_prompt = ""
       if (prompts.length > 1) {
-        negative_prompt = prompts[1].trim();
+        negative_prompt = prompts[1].trim()
       }
       //propmt = prompt[0]
 
-      return [prompts[0], negative_prompt];
+      return [prompts[0], negative_prompt]
     }
     let [prompt, negative_prompt] = extractNegativePrompt(
       metadata_json["prompt"]
-    );
-    negative_prompt = metadata_json["Negative prompt"] || negative_prompt;
+    )
+    negative_prompt = metadata_json["Negative prompt"] || negative_prompt
 
-    html_manip.autoFillInPrompt(prompt);
-    html_manip.autoFillInNegativePrompt(negative_prompt);
+    html_manip.autoFillInPrompt(prompt)
+    html_manip.autoFillInNegativePrompt(negative_prompt)
 
-    document.getElementById("tiNumberOfSteps").value = metadata_json["Steps"];
+    document.getElementById("tiNumberOfSteps").value = metadata_json["Steps"]
 
-    document.getElementById("slCfgScale").value = metadata_json["CFG scale"];
-    document.getElementById("tiSeed").value = metadata_json["Seed"];
+    document.getElementById("slCfgScale").value = metadata_json["CFG scale"]
+    document.getElementById("tiSeed").value = metadata_json["Seed"]
 
     // = metadata_json['Denoising strength']
-    html_manip.autoFillInDenoisingStrength(metadata_json["Denoising strength"]);
+    html_manip.autoFillInDenoisingStrength(metadata_json["Denoising strength"])
 
-    model_title = html_manip.autoFillInModel(metadata_json["Model hash"]);
-    sdapi.requestSwapModel(model_title);
+    model_title = html_manip.autoFillInModel(metadata_json["Model hash"])
+    sdapi.requestSwapModel(model_title)
 
-    const [width, height] = metadata_json["Size"].split("x");
-    console.log("width, height: ", width, height);
-    html_manip.autoFillInWidth(width);
-    html_manip.autoFillInHeight(height);
-    html_manip.autoFillInSampler(metadata_json["Sampler"]);
+    const [width, height] = metadata_json["Size"].split("x")
+    console.log("width, height: ", width, height)
+    html_manip.autoFillInWidth(width)
+    html_manip.autoFillInHeight(height)
+    html_manip.autoFillInSampler(metadata_json["Sampler"])
     if (metadata_json.hasOwnProperty("First pass size")) {
       // chHiResFixs
       const [firstphase_width, firstphase_height] =
-        metadata_json["First pass size"].split("x");
-      html_manip.setHiResFixs(true);
-      html_manip.autoFillInHiResFixs(firstphase_width, firstphase_height);
+        metadata_json["First pass size"].split("x")
+      html_manip.setHiResFixs(true)
+      html_manip.autoFillInHiResFixs(firstphase_width, firstphase_height)
       html_manip.autoFillInSliderUi(
         metadata_json["Denoising strength"],
         "hrDenoisingStrength",
         "hDenoisingStrength",
         100
-      );
+      )
     } else {
       //
-      html_manip.setHiResFixs(false);
+      html_manip.setHiResFixs(false)
     }
 
     // document.getElementById('tiSeed').value = metadata_json["Seed"]
   } catch (e) {
-    console.error(`autoFillInSettings: ${e}`);
+    console.error(`autoFillInSettings: ${e}`)
   }
 }
 //steps to load init_image:
@@ -487,49 +482,49 @@ function autoFillInSettings(metadata_json) {
 //
 
 //**********Start: global variables
-let prompt_dir_name = "";
-let gImage_paths = [];
-let g_image_path_to_layer = {};
+let prompt_dir_name = ""
+let gImage_paths = []
+let g_image_path_to_layer = {}
 
-gCurrentImagePath = "";
-let g_init_image_name = "";
+gCurrentImagePath = ""
+let g_init_image_name = ""
 // let g_init_mask_layer;
-let g_init_image_mask_name = "";
+let g_init_image_mask_name = ""
 // let g_mask_related_layers = {}
 // let g_init_image_related_layers = {}
-let numberOfImages = document.querySelector("#tiNumberOfImages").value;
-let g_sd_mode = "txt2img";
-let g_sd_sampler = "Euler a";
-let g_denoising_strength = 0.7;
-let g_use_mask_image = false;
-let g_models = [];
+let numberOfImages = document.querySelector("#tiNumberOfImages").value
+let g_sd_mode = "txt2img"
+let g_sd_sampler = "Euler a"
+let g_denoising_strength = 0.7
+let g_use_mask_image = false
+let g_models = []
 // let g_models_horde = []
-let g_model_title = "";
+let g_model_title = ""
 // let gWidth = 512
 // let gHeight = 512
-let hWidth = 512;
-let hHeight = 512;
-let h_denoising_strength = 0.7;
+let hWidth = 512
+let hHeight = 512
+let h_denoising_strength = 0.7
 // let g_inpainting_fill = 0
 // let g_last_outpaint_layers = []
 // let g_last_inpaint_layers = []
 // let g_last_snap_and_fill_layers = []
 
-let g_metadatas = [];
-let g_can_request_progress = true;
-let g_saved_active_layers = [];
-let g_saved_active_selection = {};
-let g_is_active_layers_stored = false;
+let g_metadatas = []
+let g_can_request_progress = true
+let g_saved_active_layers = []
+let g_saved_active_selection = {}
+let g_is_active_layers_stored = false
 
-let g_number_generation_per_session = 0;
-let g_isViewerMenuDisabled = false; // disable the viewer menu and viewerImage when we're importing images into the current document
-let g_b_mask_layer_exist = false; // true if inpaint mask layer exist, false otherwise.
-let g_inpaint_mask_layer;
-let g_inpaint_mask_layer_history_id; //store the history state id when creating a new inpaint mask layer
-let g_selection = {};
-let g_b_use_smart_object = true; // true to keep layer as smart objects, false to rasterize them
-let g_sd_options_obj = new sd_options.SdOptions();
-g_sd_options_obj.getOptions();
+let g_number_generation_per_session = 0
+let g_isViewerMenuDisabled = false // disable the viewer menu and viewerImage when we're importing images into the current document
+let g_b_mask_layer_exist = false // true if inpaint mask layer exist, false otherwise.
+let g_inpaint_mask_layer
+let g_inpaint_mask_layer_history_id //store the history state id when creating a new inpaint mask layer
+let g_selection = {}
+let g_b_use_smart_object = true // true to keep layer as smart objects, false to rasterize them
+let g_sd_options_obj = new sd_options.SdOptions()
+g_sd_options_obj.getOptions()
 // let g_sd_config_obj = new sd_config.SdConfig()
 // g_sd_config_obj.getConfig();
 
@@ -537,34 +532,34 @@ g_sd_options_obj.getOptions();
 // g_width_slider.getValue = html_manip.getWidth
 // ui_settings.uiElements.push =
 
-let g_sd_config_obj;
-(async function () {
-  let temp_config = new sd_config.SdConfig();
-  await temp_config.getConfig();
-  temp_config.getUpscalerModels();
-  g_sd_config_obj = temp_config;
-})();
+let g_sd_config_obj
+;(async function () {
+  let temp_config = new sd_config.SdConfig()
+  await temp_config.getConfig()
+  temp_config.getUpscalerModels()
+  g_sd_config_obj = temp_config
+})()
 
-let g_generation_session = new session.GenerationSession(0); //session manager
-g_generation_session.deactivate(); //session starte as inactive
-let g_ui = new ui.UI();
-let g_ui_settings = new ui.UISettings();
+let g_generation_session = new session.GenerationSession(0) //session manager
+g_generation_session.deactivate() //session starte as inactive
+let g_ui = new ui.UI()
+let g_ui_settings = new ui.UISettings()
 
 const requestState = {
   Generate: "generate",
   Interrupt: "interrupt",
-};
+}
 
-let g_request_status = ""; //
+let g_request_status = "" //
 const generationMode = {
   Txt2Img: "txt2img",
   Img2Img: "img2img",
   Inpaint: "inpaint",
   Outpaint: "outpaint",
-};
+}
 
-g_generation_session.mode = generationMode["Txt2Img"];
-let g_viewer_manager = new viewer.ViewerManager();
+g_generation_session.mode = generationMode["Txt2Img"]
+let g_viewer_manager = new viewer.ViewerManager()
 
 //********** End: global variables */
 
@@ -573,56 +568,55 @@ let g_viewer_manager = new viewer.ViewerManager();
 // refreshModels() // get the models when the plugin loads
 // initSamplers()
 // updateVersionUI()
-refreshUI();
-displayUpdate();
-promptShortcutExample();
+refreshUI()
+displayUpdate()
+promptShortcutExample()
 
 //***********End: init function calls */
 
 //add click event on radio button mode, so that when a button is clicked it change g_sd_mode globally
-rbModeElements = document.getElementsByClassName("rbMode");
+rbModeElements = document.getElementsByClassName("rbMode")
 for (let rbModeElement of rbModeElements) {
   rbModeElement.addEventListener("click", async (evt) => {
     try {
-      g_sd_mode = evt.target.value;
+      g_sd_mode = evt.target.value
       // console.log(`You clicked: ${g_sd_mode}`)
-      await displayUpdate();
-      await postModeSelection(); // do things after selection
+      await displayUpdate()
+      await postModeSelection() // do things after selection
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 }
 async function createTempInpaintMaskLayer() {
   if (!g_b_mask_layer_exist) {
     //make new layer "Mask -- Paint White to Mask -- temporary"
 
-    const name = "Mask -- Paint White to Mask -- temporary";
-    g_inpaint_mask_layer = await util_layer.createNewLayerExe(name);
+    const name = "Mask -- Paint White to Mask -- temporary"
+    g_inpaint_mask_layer = await util_layer.createNewLayerExe(name)
 
-    g_b_mask_layer_exist = true;
-    const index = app.activeDocument.historyStates.length - 1;
-    g_inpaint_mask_layer_history_id =
-      app.activeDocument.historyStates[index].id;
+    g_b_mask_layer_exist = true
+    const index = app.activeDocument.historyStates.length - 1
+    g_inpaint_mask_layer_history_id = app.activeDocument.historyStates[index].id
     console.log(
       "g_inpaint_mask_layer_history_id: ",
       g_inpaint_mask_layer_history_id
-    );
+    )
   }
 }
 async function deleteTempInpaintMaskLayer() {
   console.log(
     "g_inpaint_mask_layer_history_id: ",
     g_inpaint_mask_layer_history_id
-  );
+  )
   const historyBrushTools = app.activeDocument.historyStates.filter(
     (h) => h.id > g_inpaint_mask_layer_history_id && h.name === "Brush Tool"
-  );
-  console.log(historyBrushTools);
+  )
+  console.log(historyBrushTools)
   if (historyBrushTools.length === 0 && g_b_mask_layer_exist) {
-    await util_layer.deleteLayers([g_inpaint_mask_layer]);
+    await util_layer.deleteLayers([g_inpaint_mask_layer])
 
-    g_b_mask_layer_exist = false;
+    g_b_mask_layer_exist = false
   }
 }
 async function postModeSelection() {
@@ -630,23 +624,23 @@ async function postModeSelection() {
   try {
     if (g_sd_mode === generationMode["Inpaint"]) {
       //check if the we already have created a mask layer
-      await createTempInpaintMaskLayer();
+      await createTempInpaintMaskLayer()
     } else {
       // if we switch from inpaint mode, delete the mask layer
       // Find all history states after the creation of the inpaint mask and their name brush tool
-      await deleteTempInpaintMaskLayer();
+      await deleteTempInpaintMaskLayer()
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
-rbMaskContentElements = document.getElementsByClassName("rbMaskContent");
+rbMaskContentElements = document.getElementsByClassName("rbMaskContent")
 
 for (let rbMaskContentElement of rbMaskContentElements) {
   rbMaskContentElement.addEventListener("click", async (evt) => {
     // g_inpainting_fill = evt.target.value
     // console.log(`You clicked: ${g_inpainting_fill}`)
-  });
+  })
 }
 
 document.addEventListener("mouseenter", async (event) => {
@@ -659,9 +653,9 @@ document.addEventListener("mouseenter", async (event) => {
     ) {
       //if the generation session is active and the selected mode is still the same as the generation mode
 
-      console.log("hover on window");
+      console.log("hover on window")
 
-      const new_selection = await psapi.getSelectionInfoExe(); //get the current active selection if there is any
+      const new_selection = await psapi.getSelectionInfoExe() //get the current active selection if there is any
 
       if (
         new_selection &&
@@ -669,14 +663,14 @@ document.addEventListener("mouseenter", async (event) => {
       ) {
         // if there is an active selection and if the selection has changed
 
-        await calcWidthHeightFromSelection();
+        await calcWidthHeightFromSelection()
 
         if (g_generation_session.state === session.SessionState["Active"]) {
           //indicate that the session will end if you generate
           //only if you move the selection while the session is active
           // g_ui.endSessionUI()
-          const selected_mode = html_manip.getMode();
-          g_ui.generateModeUI(selected_mode);
+          const selected_mode = html_manip.getMode()
+          g_ui.generateModeUI(selected_mode)
         } else {
           // move the selection while the session is inactive
         }
@@ -684,13 +678,13 @@ document.addEventListener("mouseenter", async (event) => {
         // sessionStartHtml(true)//generate more, green color
         //if you didn't move the selection.
         // g_ui.startSessionUI()
-        g_ui.generateMoreUI();
+        g_ui.generateMoreUI()
       }
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-});
+})
 ////add tips to element when mouse hover on an element
 // function getToolTipElement(){
 //   const tool_tip = document.getElementById("tool_tip")
@@ -746,75 +740,75 @@ document.addEventListener("mouseenter", async (event) => {
 async function displayUpdate() {
   try {
     if (g_sd_mode == "txt2img") {
-      document.getElementById("slDenoisingStrength").style.display = "none"; // hide denoising strength slider
+      document.getElementById("slDenoisingStrength").style.display = "none" // hide denoising strength slider
       // document.getElementById("image_viewer").style.display = 'none' // hide images
-      document.getElementById("init_image_container").style.display = "none"; // hide init image
+      document.getElementById("init_image_container").style.display = "none" // hide init image
       document.getElementById("init_image_mask_container").style.display =
-        "none"; // hide init mask
-      document.getElementById("slInpainting_fill").style.display = "none"; // hide inpainting fill mode
-      document.getElementById("chInpaintFullRes").style.display = "none";
+        "none" // hide init mask
+      document.getElementById("slInpainting_fill").style.display = "none" // hide inpainting fill mode
+      document.getElementById("chInpaintFullRes").style.display = "none"
 
-      document.getElementById("slInpaintingMaskWeight").style.display = "none"; // hide inpainting conditional mask weight
+      document.getElementById("slInpaintingMaskWeight").style.display = "none" // hide inpainting conditional mask weight
 
-      document.getElementById("chHiResFixs").style.display = "flex";
+      document.getElementById("chHiResFixs").style.display = "flex"
       if (html_manip.getHiResFixs()) {
-        document.getElementById("HiResDiv").style.display = "block";
+        document.getElementById("HiResDiv").style.display = "block"
       }
 
-      document.getElementById("slMaskExpansion").style.display = "none";
+      document.getElementById("slMaskExpansion").style.display = "none"
 
-      document.getElementById("slInpaintPadding").style.display = "none";
-      document.getElementById("slMaskBlur").style.display = "none";
+      document.getElementById("slInpaintPadding").style.display = "none"
+      document.getElementById("slMaskBlur").style.display = "none"
       // document.getElementById('btnSnapAndFill').style.display = 'none'//"none" will  misaligned the table // hide snap and fill button
     }
 
     if (g_sd_mode == "img2img") {
-      document.getElementById("slDenoisingStrength").style.display = "block"; // show denoising strength
-      document.getElementById("slMaskExpansion").style.display = "none";
+      document.getElementById("slDenoisingStrength").style.display = "block" // show denoising strength
+      document.getElementById("slMaskExpansion").style.display = "none"
       // document.getElementById("image_viewer").style.display = 'block'
-      document.getElementById("init_image_container").style.display = "block"; // hide init image
+      document.getElementById("init_image_container").style.display = "block" // hide init image
 
       document.getElementById("init_image_mask_container").style.display =
-        "none"; // hide mask
-      document.getElementById("slInpainting_fill").style.display = "none"; // hide inpainting fill mode
+        "none" // hide mask
+      document.getElementById("slInpainting_fill").style.display = "none" // hide inpainting fill mode
       // document.getElementById('btnSnapAndFill').style.display = 'inline-flex' // hide snap and fill button mode
-      document.getElementById("HiResDiv").style.display = "none";
-      document.getElementById("chInpaintFullRes").style.display = "none";
-      document.getElementById("slInpaintPadding").style.display = "none";
-      document.getElementById("slMaskBlur").style.display = "none";
-      document.getElementById("chHiResFixs").style.display = "none";
-      document.getElementById("slInpaintingMaskWeight").style.display = "block"; // hide inpainting conditional mask weight
+      document.getElementById("HiResDiv").style.display = "none"
+      document.getElementById("chInpaintFullRes").style.display = "none"
+      document.getElementById("slInpaintPadding").style.display = "none"
+      document.getElementById("slMaskBlur").style.display = "none"
+      document.getElementById("chHiResFixs").style.display = "none"
+      document.getElementById("slInpaintingMaskWeight").style.display = "block" // hide inpainting conditional mask weight
     }
     if (g_sd_mode == "inpaint" || g_sd_mode == "outpaint") {
       ///fix the misalignment problem in the ui (init image is not aligned with init mask when switching from img2img to inpaint ). note: code needs refactoring
       // document.getElementById('btnSnapAndFill').style.display = 'none'//"none" will  misaligned the table // hide snap and fill button
-      document.getElementById("tableInitImageContainer").style.display = "none"; // hide the table
-      document.getElementById("slMaskExpansion").style.display = "block";
+      document.getElementById("tableInitImageContainer").style.display = "none" // hide the table
+      document.getElementById("slMaskExpansion").style.display = "block"
       setTimeout(() => {
         try {
           document.getElementById("tableInitImageContainer").style.display =
-            "table"; // show the table after some time so it gets rendered.
+            "table" // show the table after some time so it gets rendered.
         } catch (e) {
-          console.warn(e);
+          console.warn(e)
         }
-      }, 100);
+      }, 100)
 
-      document.getElementById("slDenoisingStrength").style.display = "block";
+      document.getElementById("slDenoisingStrength").style.display = "block"
       document.getElementById("init_image_mask_container").style.display =
-        "block";
-      document.getElementById("slInpainting_fill").style.display = "block";
-      document.getElementById("init_image_container").style.display = "block"; // hide init image
-      document.getElementById("slInpaintingMaskWeight").style.display = "block"; // hide inpainting conditional mask weight
+        "block"
+      document.getElementById("slInpainting_fill").style.display = "block"
+      document.getElementById("init_image_container").style.display = "block" // hide init image
+      document.getElementById("slInpaintingMaskWeight").style.display = "block" // hide inpainting conditional mask weight
 
-      document.getElementById("HiResDiv").style.display = "none";
-      document.getElementById("chInpaintFullRes").style.display = "inline-flex";
+      document.getElementById("HiResDiv").style.display = "none"
+      document.getElementById("chInpaintFullRes").style.display = "inline-flex"
       if (document.getElementById("chInpaintFullRes").checked) {
-        document.getElementById("slInpaintPadding").style.display = "block";
+        document.getElementById("slInpaintPadding").style.display = "block"
       } else {
-        document.getElementById("slInpaintPadding").style.display = "none";
+        document.getElementById("slInpaintPadding").style.display = "none"
       }
-      document.getElementById("slMaskBlur").style.display = "block";
-      document.getElementById("chHiResFixs").style.display = "none";
+      document.getElementById("slMaskBlur").style.display = "block"
+      document.getElementById("chHiResFixs").style.display = "none"
       // document.getElementById('btnInitOutpaint').style.display = 'inline-flex'
       // document.getElementById('btnInitInpaint').style.display = 'inline-flex'
       // document.getElementById('btnInitOutpaint').style.display = 'none'
@@ -834,12 +828,12 @@ async function displayUpdate() {
         //Note: add this code to the UI class
         const generate_btns = Array.from(
           document.getElementsByClassName("btnGenerateClass")
-        );
+        )
         generate_btns.forEach((element) => {
-          element.textContent = `Generate ${g_sd_mode}`;
-        });
+          element.textContent = `Generate ${g_sd_mode}`
+        })
 
-        html_manip.setGenerateButtonsColor("generate", "generate-more");
+        html_manip.setGenerateButtonsColor("generate", "generate-more")
       } else {
         //1) and the session is active
         //2) is the same generation mode
@@ -849,23 +843,23 @@ async function displayUpdate() {
 
           const generate_btns = Array.from(
             document.getElementsByClassName("btnGenerateClass")
-          );
+          )
           generate_btns.forEach((element) => {
-            element.textContent = "Generate More";
-          });
+            element.textContent = "Generate More"
+          })
 
-          html_manip.setGenerateButtonsColor("generate-more", "generate");
+          html_manip.setGenerateButtonsColor("generate-more", "generate")
         } else {
           //3b) selection has change
         }
       }
     } else {
       //session is not active
-      g_ui.setGenerateBtnText(`Generate ${g_sd_mode}`);
-      html_manip.setGenerateButtonsColor("generate", "generate-more");
+      g_ui.setGenerateBtnText(`Generate ${g_sd_mode}`)
+      html_manip.setGenerateButtonsColor("generate", "generate-more")
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 // function showLayerNames () {
@@ -881,8 +875,8 @@ async function displayUpdate() {
 // }
 
 function selectTool() {
-  var doc = app.activeDocument;
-  var activeTool = app.currentTool;
+  var doc = app.activeDocument
+  var activeTool = app.currentTool
 
   // if (activeTool !== toolName) {
   //   toolName = activeTool;
@@ -891,11 +885,11 @@ function selectTool() {
   // const util = require('util')
 
   // console.log(util.inspect(myObject, {showHidden: false, depth: null, colors: true}))
-  console.dir(app, { depth: null });
-  console.log("hello this is Abdullah");
+  console.dir(app, { depth: null })
+  console.log("hello this is Abdullah")
   document.getElementById("layers").innerHTML = `<span>
     selectTool was called, ${activeTool}
-    </span>`;
+    </span>`
 
   //rectanglemarquee
   // await require('photoshop').core.executeAsModal(newNormalLayer);
@@ -910,46 +904,46 @@ async function testServerPath() {
     // const serverPath = "https://api.coindesk.com/v1/bpi/currentprice.json"
     // const serverPath = "http://127.0.0.1:3000"
     // const serverPath = "http://localhost:3000"
-    const serverPath = "http://127.0.0.1:8000/txt2img/random%20prompt";
+    const serverPath = "http://127.0.0.1:8000/txt2img/random%20prompt"
     // const serverPath = "https://3330-37-106-100-102.eu.ngrok.io"
-    console.log("testServerPath function was called");
+    console.log("testServerPath function was called")
 
-    let response = await fetch(serverPath);
-    console.log("testServerPath finished fetch");
+    let response = await fetch(serverPath)
+    console.log("testServerPath finished fetch")
 
     if (!response.ok) {
       throw new Error(
         `HTTP error fetching weather station; status: ${response.status}`
-      );
+      )
     }
-    let stationJson = await response.json();
-    console.dir(stationJson);
+    let stationJson = await response.json()
+    console.dir(stationJson)
   } catch (err) {
-    console.error("testServerPath error: " + err.message);
+    console.error("testServerPath error: " + err.message)
   }
 }
 
 // User picks an image file
 // open a explorer for user to select a image file
 async function fillImage() {
-  const storage = require("uxp").storage;
-  const fs = storage.localFileSystem;
+  const storage = require("uxp").storage
+  const fs = storage.localFileSystem
   let imageFile = await fs.getFileForOpening({
     types: storage.fileTypes.images,
-  });
+  })
 
   // Create ImageFill for this image
-  const ImageFill = require("scenegraph").ImageFill;
-  let fill = new ImageFill(imageFile);
+  const ImageFill = require("scenegraph").ImageFill
+  let fill = new ImageFill(imageFile)
 
   // Set fill of first selected item
-  selection.items[0].fill = fill;
+  selection.items[0].fill = fill
 }
 // fillImage()
 
 function pastImage2Layer() {
-  const { batchPlay } = require("photoshop").action;
-  const { executeAsModal } = require("photoshop").core;
+  const { batchPlay } = require("photoshop").action
+  const { executeAsModal } = require("photoshop").core
 
   executeAsModal(
     () => {
@@ -974,15 +968,15 @@ function pastImage2Layer() {
           synchronousExecution: true,
           modalBehavior: "fail",
         }
-      );
+      )
     },
     {
       commandName: "Create Label",
     }
-  );
+  )
 }
 function sliderToResolution(sliderValue) {
-  return sliderValue * 64;
+  return sliderValue * 64
 }
 
 // document.querySelector('#slHeight').addEventListener('input', evt => {
@@ -1003,21 +997,21 @@ function sliderToResolution(sliderValue) {
 // })
 
 document.querySelector("#hrHeight").addEventListener("input", (evt) => {
-  hHeight = sliderToResolution(evt.target.value);
-  document.querySelector("#hHeight").textContent = hHeight;
-});
+  hHeight = sliderToResolution(evt.target.value)
+  document.querySelector("#hHeight").textContent = hHeight
+})
 document.querySelector("#hrWidth").addEventListener("input", (evt) => {
-  hWidth = sliderToResolution(evt.target.value);
-  document.querySelector("#hWidth").textContent = hWidth;
-});
+  hWidth = sliderToResolution(evt.target.value)
+  document.querySelector("#hWidth").textContent = hWidth
+})
 //document.querySelector('#hrScale').addEventListener('input', evt => {
 //  hScale = sliderToResolution(evt.target.value)
 //  document.querySelector('#hScale').textContent = hScale
 //})
 document.querySelector("#slInpaintPadding").addEventListener("input", (evt) => {
-  padding = evt.target.value * 4;
-  document.querySelector("#lInpaintPadding").textContent = padding;
-});
+  padding = evt.target.value * 4
+  document.querySelector("#lInpaintPadding").textContent = padding
+})
 
 // document
 //   .querySelector('#slDenoisingStrength')
@@ -1047,7 +1041,7 @@ document.querySelector("#slInpaintPadding").addEventListener("input", (evt) => {
 
 async function snapAndFillHandler() {
   try {
-    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive();
+    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
     if (isSelectionAreaValid) {
       if (g_generation_session.isFirstGeneration) {
         // clear the layers related to the last mask operation.
@@ -1057,18 +1051,18 @@ async function snapAndFillHandler() {
         // create new layers related to the current mask operation.
         await executeAsModal(async () => {
           // g_last_snap_and_fill_layers = await outpaint.snapAndFillExe(random_session_id)
-          await outpaint.snapAndFillExe(random_session_id);
-        });
+          await outpaint.snapAndFillExe(random_session_id)
+        })
         // console.log(
         //   'outpaint.snapAndFillExe(random_session_id):, g_last_snap_and_fill_layers: ',
         //   g_last_snap_and_fill_layers
         // )
       }
     } else {
-      psapi.promptForMarqueeTool();
+      psapi.promptForMarqueeTool()
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -1087,10 +1081,10 @@ async function easyModeOutpaint() {
 
       // create new layers related to the current mask operation.
       // g_last_outpaint_layers = await outpaint.outpaintExe(random_session_id)
-      await outpaint.outpaintExe(random_session_id);
+      await outpaint.outpaintExe(random_session_id)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -1101,12 +1095,12 @@ async function btnInitInpaintHandler() {
       // g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
       // store the layer of the current mask operation
       // g_last_inpaint_layers =  await outpaint.inpaintFasterExe(random_session_id)
-      await outpaint.inpaintFasterExe(random_session_id);
+      await outpaint.inpaintFasterExe(random_session_id)
 
       // console.log ("outpaint.inpaintFasterExe(random_session_id):, g_last_inpaint_layers: ",g_last_inpaint_layers)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 // document
@@ -1118,38 +1112,38 @@ async function btnInitInpaintHandler() {
 function toggleTwoButtonsByClass(isVisible, first_class, second_class) {
   const first_class_btns = Array.from(
     document.getElementsByClassName(first_class)
-  );
+  )
   const second_class_btns = Array.from(
     document.getElementsByClassName(second_class)
-  );
+  )
 
   if (isVisible) {
     //show interrup button
-    first_class_btns.forEach((element) => (element.style.display = "none"));
+    first_class_btns.forEach((element) => (element.style.display = "none"))
     second_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
-    console.log("first_class_btns: ", first_class_btns);
+    )
+    console.log("first_class_btns: ", first_class_btns)
   } else {
     //show generate or generate more button
     first_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
+    )
     if (g_generation_session.isActive()) {
       //show generate more
 
       first_class_btns.forEach(
         (element) => (element.textContent = "Generate More")
-      );
+      )
     } else {
       //show generate button
       first_class_btns.forEach(
         (element) => (element.textContent = `Generate ${g_sd_mode}`)
-      );
+      )
     }
-    second_class_btns.forEach((element) => (element.style.display = "none"));
+    second_class_btns.forEach((element) => (element.style.display = "none"))
   }
-  return isVisible;
+  return isVisible
 }
 
 async function discardAll() {
@@ -1160,15 +1154,15 @@ async function discardAll() {
       g_viewer_manager.pathToViewerImage
     )) {
       try {
-        viewer_image_obj.active(false); //deactivate the layer
-        viewer_image_obj.setHighlight(false); // mark each layer as discarded
+        viewer_image_obj.active(false) //deactivate the layer
+        viewer_image_obj.setHighlight(false) // mark each layer as discarded
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
     }
-    await discard(); // clean viewer tab
+    await discard() // clean viewer tab
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -1189,17 +1183,17 @@ async function acceptAll() {
           if (viewer_image_obj.isLayerValid()) {
             await g_generation_session.moveToTopOfOutputGroup(
               viewer_image_obj.layer
-            );
+            )
           }
         }
-        viewer_image_obj.setHighlight(true); // mark each layer as accepted
+        viewer_image_obj.setHighlight(true) // mark each layer as accepted
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
     }
-    await discard(); // clean viewer tab
+    await discard() // clean viewer tab
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -1212,100 +1206,100 @@ async function discardSelected() {
     )) {
       try {
         if (viewer_image_obj.is_active) {
-          viewer_image_obj.active(false); //convert active to highlight
-          viewer_image_obj.setHighlight(true); //highlight the active image, since active images are not highlighted in the viewer
+          viewer_image_obj.active(false) //convert active to highlight
+          viewer_image_obj.setHighlight(true) //highlight the active image, since active images are not highlighted in the viewer
         }
 
-        viewer_image_obj.toggleHighlight(); // if invert the highlights on all images
+        viewer_image_obj.toggleHighlight() // if invert the highlights on all images
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
     }
-    await discard(); // delete the images that currently highlighted
+    await discard() // delete the images that currently highlighted
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 const discard_selected_class_btns = Array.from(
   document.getElementsByClassName("discardSelectedClass")
-);
+)
 discard_selected_class_btns.forEach((element) =>
   element.addEventListener("click", async () => {
     try {
       await g_generation_session.endSession(
         session.GarbageCollectionState["DiscardSelected"]
-      ); //end session and accept only selected images
-      g_ui.onEndSessionUI();
+      ) //end session and accept only selected images
+      g_ui.onEndSessionUI()
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   })
-);
+)
 
 const accept_selected_class_btns = Array.from(
   document.getElementsByClassName("acceptSelectedClass")
-);
+)
 accept_selected_class_btns.forEach((element) =>
   element.addEventListener("click", async () => {
     try {
       await g_generation_session.endSession(
         session.GarbageCollectionState["AcceptSelected"]
-      ); //end session and accept only selected images
-      g_ui.onEndSessionUI();
+      ) //end session and accept only selected images
+      g_ui.onEndSessionUI()
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   })
-);
+)
 
 const accept_class_btns = Array.from(
   document.getElementsByClassName("acceptClass")
-);
+)
 accept_class_btns.forEach((element) =>
   element.addEventListener("click", async () => {
     try {
       await g_generation_session.endSession(
         session.GarbageCollectionState["Accept"]
-      ); //end session and accept all images
-      g_ui.onEndSessionUI();
+      ) //end session and accept all images
+      g_ui.onEndSessionUI()
 
       // await acceptAll()
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   })
-);
+)
 
 function toggleTwoButtons(defaultVal, first_btn_id, second_btn_id) {
   if (defaultVal) {
-    document.getElementById(first_btn_id).style.display = "none"; // hide generate button
-    document.getElementById(second_btn_id).style.display = "inline-block"; // show interrupt button
+    document.getElementById(first_btn_id).style.display = "none" // hide generate button
+    document.getElementById(second_btn_id).style.display = "inline-block" // show interrupt button
   } else {
-    document.getElementById(first_btn_id).style.display = "inline-block"; // hide generate button
-    document.getElementById(second_btn_id).style.display = "none"; // show interrupt button
+    document.getElementById(first_btn_id).style.display = "inline-block" // hide generate button
+    document.getElementById(second_btn_id).style.display = "none" // show interrupt button
   }
-  return defaultVal;
+  return defaultVal
 }
 
 document.getElementById("btnRandomSeed").addEventListener("click", async () => {
-  document.querySelector("#tiSeed").value = "-1";
-});
+  document.querySelector("#tiSeed").value = "-1"
+})
 document.getElementById("btnLastSeed").addEventListener("click", async () => {
   try {
-    console.log("click on Last seed");
-    let seed = "-1";
+    console.log("click on Last seed")
+    let seed = "-1"
 
-    console.log("g_metadatas.length: ", g_metadatas.length);
+    console.log("g_metadatas.length: ", g_metadatas.length)
     if (g_metadatas.length > 0) {
-      seed = g_metadatas[0].Seed;
+      seed = g_metadatas[0].Seed
     }
-    console.log("seed:", seed);
-    document.querySelector("#tiSeed").value = seed;
+    console.log("seed:", seed)
+    document.querySelector("#tiSeed").value = seed
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-});
+})
 async function discard() {
   try {
     // console.log(
@@ -1336,17 +1330,17 @@ async function discard() {
     //   g_b_mask_layer_exist = false
 
     // }
-    const random_img_src = "https://source.unsplash.com/random";
-    html_manip.setInitImageSrc(random_img_src);
-    html_manip.setInitImageMaskSrc(random_img_src);
+    const random_img_src = "https://source.unsplash.com/random"
+    html_manip.setInitImageSrc(random_img_src)
+    html_manip.setInitImageMaskSrc(random_img_src)
     // const last_gen_layers = Object.keys(g_image_path_to_layer).map(
     //   path => g_image_path_to_layer[path]
     // )
 
     // psapi.cleanLayers(last_gen_layers)
-    await deleteNoneSelected(g_viewer_manager.pathToViewerImage);
+    await deleteNoneSelected(g_viewer_manager.pathToViewerImage)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 Array.from(document.getElementsByClassName("discardClass")).forEach(
@@ -1355,13 +1349,13 @@ Array.from(document.getElementsByClassName("discardClass")).forEach(
       //end session here
       await g_generation_session.endSession(
         session.GarbageCollectionState["Discard"]
-      ); //end session and remove all images
-      g_ui.onEndSessionUI();
+      ) //end session and remove all images
+      g_ui.onEndSessionUI()
 
       // await discard()
-    });
+    })
   }
-);
+)
 
 async function deleteMaskRelatedLayers() {
   // console.log("click on btnCleanLayers,  g_last_outpaint_layers:",g_last_outpaint_layers)
@@ -1398,32 +1392,32 @@ async function deleteMaskRelatedLayers() {
 
 document.getElementById("btnInterrupt").addEventListener("click", async () => {
   try {
-    json = await sdapi.requestInterrupt();
+    json = await sdapi.requestInterrupt()
 
-    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass");
-    g_can_request_progress = false;
-    g_request_status = requestState["Interrupt"];
+    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass")
+    g_can_request_progress = false
+    g_request_status = requestState["Interrupt"]
 
     // g_can_request_progress = toggleTwoButtons(false,'btnGenerate','btnInterrupt')
   } catch (e) {
     // g_can_request_progress = toggleTwoButtons(false,'btnGenerate','btnInterrupt')
-    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass");
-    g_can_request_progress = false;
-    console.warn(e);
+    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass")
+    g_can_request_progress = false
+    console.warn(e)
   }
-});
+})
 
 //store active layers only if they are not stored.
 async function storeActiveLayers() {
   setTimeout(async () => {
-    const layers = await app.activeDocument.activeLayers;
-    console.log("storeActiveLayers: ", layers.length);
+    const layers = await app.activeDocument.activeLayers
+    console.log("storeActiveLayers: ", layers.length)
 
     if (layers.length > 0) {
-      g_saved_active_layers = layers;
-      await psapi.unselectActiveLayersExe();
+      g_saved_active_layers = layers
+      await psapi.unselectActiveLayersExe()
     }
-  }, 200);
+  }, 200)
 
   // if (g_is_active_layers_stored == false) {
   //   g_saved_active_layers = await app.activeDocument.activeLayers
@@ -1433,11 +1427,11 @@ async function storeActiveLayers() {
   // }
 }
 async function restoreActiveLayers() {
-  const layers = await app.activeDocument.activeLayers;
-  console.log("restoreActiveLayers: ", layers.length);
+  const layers = await app.activeDocument.activeLayers
+  console.log("restoreActiveLayers: ", layers.length)
   if (layers.length == 0) {
-    await psapi.selectLayersExe(g_saved_active_layers);
-    g_saved_active_layers = [];
+    await psapi.selectLayersExe(g_saved_active_layers)
+    g_saved_active_layers = []
   }
   // if (g_is_active_layers_stored == true) {
   //   // g_saved_active_layers = await app.activeDocument.activeLayers
@@ -1451,193 +1445,193 @@ async function restoreActiveLayers() {
 async function storeActiveSelection() {
   try {
     setTimeout(async () => {
-      const layers = await app.activeDocument.activeLayers;
-      const current_selection = await psapi.checkIfSelectionAreaIsActive();
-      console.log("storeActiveSelection: ", current_selection);
+      const layers = await app.activeDocument.activeLayers
+      const current_selection = await psapi.checkIfSelectionAreaIsActive()
+      console.log("storeActiveSelection: ", current_selection)
 
       if (current_selection) {
-        g_saved_active_selection = current_selection;
-        await psapi.unSelectMarqueeExe();
+        g_saved_active_selection = current_selection
+        await psapi.unSelectMarqueeExe()
       }
-    }, 200);
+    }, 200)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 async function restoreActiveSelection() {
   try {
-    const current_selection = await psapi.checkIfSelectionAreaIsActive();
+    const current_selection = await psapi.checkIfSelectionAreaIsActive()
 
-    console.log("restoreActiveSelection: ", current_selection);
+    console.log("restoreActiveSelection: ", current_selection)
     if (
       !current_selection &&
       psapi.isSelectionValid(g_saved_active_selection)
     ) {
-      await psapi.reSelectMarqueeExe(g_saved_active_selection);
-      g_saved_active_selection = {};
+      await psapi.reSelectMarqueeExe(g_saved_active_selection)
+      g_saved_active_selection = {}
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 document.getElementById("btnSdUrl").addEventListener("click", async () => {
   //change the sdUrl in server in proxy server
-  console.log("you clicked btnSdUrl");
-  let new_sd_url = document.getElementById("tiSdUrl").value;
+  console.log("you clicked btnSdUrl")
+  let new_sd_url = document.getElementById("tiSdUrl").value
 
-  console.log("new_sd_url: ", new_sd_url);
+  console.log("new_sd_url: ", new_sd_url)
 
-  new_sd_url = new_sd_url.trim();
-  console.log("new_sd_url.trim(): ", new_sd_url);
+  new_sd_url = new_sd_url.trim()
+  console.log("new_sd_url.trim(): ", new_sd_url)
 
   if (new_sd_url.length > 0) {
     //check if the last character of the url has "/" or '\' and remove it
 
-    last_index = new_sd_url.length - 1;
+    last_index = new_sd_url.length - 1
 
     if (new_sd_url[last_index] === "/" || new_sd_url[last_index] === "\\") {
-      new_sd_url = new_sd_url.slice(0, -1);
+      new_sd_url = new_sd_url.slice(0, -1)
     }
 
     //submit the change
-    await sdapi.changeSdUrl(new_sd_url);
+    await sdapi.changeSdUrl(new_sd_url)
   }
-});
+})
 
 document.querySelector("#taPrompt").addEventListener("focus", async () => {
   if (!g_generation_session.isLoadingActive) {
-    console.log("taPrompt focus");
+    console.log("taPrompt focus")
     // console.log('we are in prompt textarea')
     // console.log("g_is_active_layers_stored: ",g_is_active_layers_stored)
-    await storeActiveLayers();
-    await storeActiveSelection();
+    await storeActiveLayers()
+    await storeActiveSelection()
     // await psapi.unselectActiveLayersExe()
   }
-});
+})
 document.querySelector("#taPrompt").addEventListener("blur", async () => {
-  console.log("taPrompt blur");
+  console.log("taPrompt blur")
   // console.log('we are out of prompt textarea')
   // await psapi.unselectActiveLayersExe()
   // console.log("g_is_active_layers_stored: ",g_is_active_layers_stored)
-  await restoreActiveLayers();
-  await restoreActiveSelection();
-});
+  await restoreActiveLayers()
+  await restoreActiveSelection()
+})
 
 document
   .querySelector("#taNegativePrompt")
   .addEventListener("focus", async () => {
     if (!g_generation_session.isLoadingActive) {
-      console.log("taNegativePrompt focus");
+      console.log("taNegativePrompt focus")
       // console.log('we are in prompt textarea')
 
-      await storeActiveLayers();
-      await storeActiveSelection();
+      await storeActiveLayers()
+      await storeActiveSelection()
       // await psapi.unselectActiveLayersExe()
     }
-  });
+  })
 document
   .querySelector("#taNegativePrompt")
   .addEventListener("blur", async () => {
-    console.log("taNegativePrompt blur");
+    console.log("taNegativePrompt blur")
     // console.log('we are out of prompt textarea')
     // await psapi.unselectActiveLayersExe()
-    await restoreActiveLayers();
-    await restoreActiveSelection();
-  });
+    await restoreActiveLayers()
+    await restoreActiveSelection()
+  })
 
 function updateMetadata(new_metadata) {
-  const metadatas = [];
+  const metadatas = []
   try {
     for (metadata of new_metadata) {
-      metadata_json = JSON.parse(metadata);
-      console.log("metadata_json:", metadata_json);
-      metadatas.push(metadata_json);
+      metadata_json = JSON.parse(metadata)
+      console.log("metadata_json:", metadata_json)
+      metadatas.push(metadata_json)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-  return metadatas;
+  return metadatas
 }
 
 async function getSettings() {
-  let payload = {};
+  let payload = {}
   try {
-    numberOfImages = document.querySelector("#tiNumberOfImages").value;
-    numberOfSteps = document.querySelector("#tiNumberOfSteps").value;
-    const prompt = html_manip.getPrompt();
-    const negative_prompt = html_manip.getNegativePrompt();
-    const hi_res_fix = html_manip.getHiResFixs();
+    numberOfImages = document.querySelector("#tiNumberOfImages").value
+    numberOfSteps = document.querySelector("#tiNumberOfSteps").value
+    const prompt = html_manip.getPrompt()
+    const negative_prompt = html_manip.getNegativePrompt()
+    const hi_res_fix = html_manip.getHiResFixs()
     // console.log("prompt:",prompt)
     // console.log("negative_prompt:",negative_prompt)
-    const model_index = document.querySelector("#mModelsMenu").selectedIndex;
-    const upscaler = document.querySelector("#hrModelsMenu").value;
-    const cfg_scale = document.querySelector("#slCfgScale").value;
+    const model_index = document.querySelector("#mModelsMenu").selectedIndex
+    const upscaler = document.querySelector("#hrModelsMenu").value
+    const cfg_scale = document.querySelector("#slCfgScale").value
     //  const model_index = document.querySelector("#")
-    const seed = document.querySelector("#tiSeed").value;
+    const seed = document.querySelector("#tiSeed").value
     // const mask_blur = document.querySelector('#slMaskBlur').value
-    const use_sharp_mask = html_manip.getUseSharpMask();
-    const mask_blur = html_manip.getMaskBlur();
-    const mask_expansion = document.getElementById("slMaskExpansion").value;
+    const use_sharp_mask = html_manip.getUseSharpMask()
+    const mask_blur = html_manip.getMaskBlur()
+    const mask_expansion = document.getElementById("slMaskExpansion").value
 
     const inpaint_full_res_padding =
-      document.querySelector("#slInpaintPadding").value;
+      document.querySelector("#slInpaintPadding").value
 
-    console.dir(numberOfImages);
+    console.dir(numberOfImages)
     const bUsePromptShortcut = document.getElementById(
       "chUsePromptShortcut"
-    ).checked;
-    let prompt_shortcut_ui_dict = {};
+    ).checked
+    let prompt_shortcut_ui_dict = {}
     try {
       let prompt_shortcut_string =
-        document.getElementById("taPromptShortcut").value;
-      prompt_shortcut_ui_dict = JSON.parse(prompt_shortcut_string);
+        document.getElementById("taPromptShortcut").value
+      prompt_shortcut_ui_dict = JSON.parse(prompt_shortcut_string)
     } catch (e) {
       console.warn(
         `warning prompt_shortcut_ui_dict is not valid Json obj: ${e}`
-      );
-      prompt_shortcut_ui_dict = {};
+      )
+      prompt_shortcut_ui_dict = {}
     }
 
     // const slider_width = document.getElementById("slWidth").value
     // gWidth = getWidthFromSlider(slider_width)
-    const width = html_manip.getWidth();
-    const height = html_manip.getHeight();
-    const hWidth = html_manip.getSliderSdValue("hrWidth", 64);
-    const hHeight = html_manip.getSliderSdValue("hrHeight", 64);
-    const hSteps = html_manip.getSliderSdValue("hrNumberOfSteps", 1);
+    const width = html_manip.getWidth()
+    const height = html_manip.getHeight()
+    const hWidth = html_manip.getSliderSdValue("hrWidth", 64)
+    const hHeight = html_manip.getSliderSdValue("hrHeight", 64)
+    const hSteps = html_manip.getSliderSdValue("hrNumberOfSteps", 1)
     //const hScale = html_manip.getSliderSdValue('hrScale',1)
-    console.log("Check");
+    console.log("Check")
 
-    const uniqueDocumentId = await getUniqueDocumentId();
+    const uniqueDocumentId = await getUniqueDocumentId()
     const h_denoising_strength = html_manip.getSliderSdValue(
       "hrDenoisingStrength",
       0.01
-    );
-    console.log("Check2");
+    )
+    console.log("Check2")
 
-    const sampler_name = html_manip.getCheckedSamplerName();
-    const mode = html_manip.getMode();
-    const b_restore_faces = document.getElementById("chRestoreFaces").checked;
+    const sampler_name = html_manip.getCheckedSamplerName()
+    const mode = html_manip.getMode()
+    const b_restore_faces = document.getElementById("chRestoreFaces").checked
 
-    let denoising_strength = h_denoising_strength;
+    let denoising_strength = h_denoising_strength
     if (mode == "inpaint" || mode == "outpaint") {
-      var g_use_mask_image = true;
+      var g_use_mask_image = true
       payload["inpaint_full_res"] =
-        document.getElementById("chInpaintFullRes").checked;
-      payload["inpaint_full_res_padding"] = inpaint_full_res_padding * 4;
+        document.getElementById("chInpaintFullRes").checked
+      payload["inpaint_full_res_padding"] = inpaint_full_res_padding * 4
 
-      console.log("g_use_mask_image is ", g_use_mask_image);
-      console.log("g_init_image_mask_name is ", g_init_image_mask_name);
-      payload["init_image_mask_name"] = g_init_image_mask_name;
-      payload["inpainting_fill"] = html_manip.getMaskContent();
-      payload["mask_expansion"] = mask_expansion;
+      console.log("g_use_mask_image is ", g_use_mask_image)
+      console.log("g_init_image_mask_name is ", g_init_image_mask_name)
+      payload["init_image_mask_name"] = g_init_image_mask_name
+      payload["inpainting_fill"] = html_manip.getMaskContent()
+      payload["mask_expansion"] = mask_expansion
     } else if (mode == "img2img") {
-      var g_use_mask_image = false;
-      delete payload["inpaint_full_res"]; //  inpaint full res is not available in img2img mode
-      delete payload["inpaint_full_res_padding"];
-      delete payload["init_image_mask_name"];
-      delete payload["inpainting_fill"];
+      var g_use_mask_image = false
+      delete payload["inpaint_full_res"] //  inpaint full res is not available in img2img mode
+      delete payload["inpaint_full_res_padding"]
+      delete payload["init_image_mask_name"]
+      delete payload["inpainting_fill"]
     }
 
     if (
@@ -1645,28 +1639,28 @@ async function getSettings() {
       g_sd_mode == "inpaint" ||
       g_sd_mode == "outpaint"
     ) {
-      console.log(`g_use_mask_image:? ${g_use_mask_image}`);
+      console.log(`g_use_mask_image:? ${g_use_mask_image}`)
 
-      denoising_strength = html_manip.getDenoisingStrength();
-      payload["denoising_strength"] = denoising_strength;
-      payload["init_image_name"] = g_init_image_name;
+      denoising_strength = html_manip.getDenoisingStrength()
+      payload["denoising_strength"] = denoising_strength
+      payload["init_image_name"] = g_init_image_name
     }
 
     if (hi_res_fix && width > 512 && height > 512) {
-      payload["enable_hr"] = hi_res_fix;
-      payload["firstphase_width"] = width;
-      payload["firstphase_height"] = height;
-      payload["hr_resize_x"] = hWidth;
-      payload["hr_resize_y"] = hHeight;
+      payload["enable_hr"] = hi_res_fix
+      payload["firstphase_width"] = width
+      payload["firstphase_height"] = height
+      payload["hr_resize_x"] = hWidth
+      payload["hr_resize_y"] = hHeight
       // payload['hr_scale'] =  hScale // Scale
-      payload["hr_upscaler"] = upscaler; // Upscaler
-      payload["hr_second_pass_steps"] = hSteps; // Number of Steps
+      payload["hr_upscaler"] = upscaler // Upscaler
+      payload["hr_second_pass_steps"] = hSteps // Number of Steps
     } else {
       //fix hi res bug: if we include firstphase_width or firstphase_height in the payload,
       // sd api will use them instead of using width and height variables, even when enable_hr is set to "false"
-      delete payload["enable_hr"];
-      delete payload["firstphase_width"];
-      delete payload["firstphase_height"];
+      delete payload["enable_hr"]
+      delete payload["firstphase_width"]
+      delete payload["firstphase_height"]
     }
 
     //work with the hord
@@ -1682,13 +1676,13 @@ async function getSettings() {
     // }
     // const script_args = Object.values(script_args_json)
 
-    const b_use_horde = script_horde.getUseHorde();
+    const b_use_horde = script_horde.getUseHorde()
     if (b_use_horde) {
-      payload["script_name"] = script_horde.script_name;
-      payload["script_args"] = script_horde.getScriptArgs();
+      payload["script_name"] = script_horde.script_name
+      payload["script_args"] = script_horde.getScriptArgs()
     } else {
-      delete payload["script_name"];
-      delete payload["script_args"];
+      delete payload["script_name"]
+      delete payload["script_args"]
     }
 
     payload = {
@@ -1713,23 +1707,23 @@ async function getSettings() {
       restore_faces: b_restore_faces,
       // script_args: script_args,
       // script_name:"Run on Stable Horde"
-    };
+    }
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-  return payload;
+  return payload
 }
 
 async function generateTxt2Img(settings) {
-  let json = {};
+  let json = {}
   try {
-    json = await sdapi.requestTxt2Img(settings);
+    json = await sdapi.requestTxt2Img(settings)
   } catch (e) {
-    console.warn(e);
-    json = {};
+    console.warn(e)
+    json = {}
   }
 
-  return json;
+  return json
 }
 
 async function hasSelectionChanged(new_selection, old_selection) {
@@ -1739,46 +1733,46 @@ async function hasSelectionChanged(new_selection, old_selection) {
     new_selection.right === old_selection.right &&
     new_selection.top === old_selection.top
   ) {
-    return false;
+    return false
   } else {
-    return true;
+    return true
   }
 }
 
 async function easyModeGenerate() {
   try {
-    let active_layer = await app.activeDocument.activeLayers[0]; // store the active layer so we could reselected after the session end clean up
+    let active_layer = await app.activeDocument.activeLayers[0] // store the active layer so we could reselected after the session end clean up
     //make sure you have selection area active on the canvas
-    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive();
+    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
     if (!isSelectionAreaValid) {
-      await psapi.promptForMarqueeTool();
-      return null;
+      await psapi.promptForMarqueeTool()
+      return null
     }
 
-    const mode = html_manip.getMode();
+    const mode = html_manip.getMode()
     // const settings = await getSettings()
-    console.log("easyModeGenerate mdoe: ", mode);
+    console.log("easyModeGenerate mdoe: ", mode)
     if (psapi.isSelectionValid(g_selection)) {
       // check we have an old selection stored
-      const new_selection = await psapi.getSelectionInfoExe();
+      const new_selection = await psapi.getSelectionInfoExe()
       if (await hasSelectionChanged(new_selection, g_selection)) {
         // check the new selection is difference than the old
         // end current session
-        g_selection = new_selection;
+        g_selection = new_selection
         try {
           await g_generation_session.endSession(
             session.GarbageCollectionState["Accept"]
-          ); //end session and accept all images
-          g_ui.onEndSessionUI();
+          ) //end session and accept all images
+          g_ui.onEndSessionUI()
 
           // await acceptAll()
         } catch (e) {
-          console.warn(e);
+          console.warn(e)
         }
       }
     } else {
       // store selection value
-      g_selection = await psapi.getSelectionInfoExe();
+      g_selection = await psapi.getSelectionInfoExe()
     }
 
     if (g_generation_session.isActive()) {
@@ -1789,39 +1783,39 @@ async function easyModeGenerate() {
 
         await g_generation_session.endSession(
           session.GarbageCollectionState["Accept"]
-        );
-        g_ui.onEndSessionUI();
+        )
+        g_ui.onEndSessionUI()
         //start new session after you ended the old one
-        await g_generation_session.startSession();
+        await g_generation_session.startSession()
 
-        g_generation_session.mode = mode;
+        g_generation_session.mode = mode
       }
     } else {
       // new session
-      g_generation_session.mode = mode;
-      await g_generation_session.startSession(); //start the session and create a output folder
+      g_generation_session.mode = mode
+      await g_generation_session.startSession() //start the session and create a output folder
     }
 
-    await psapi.selectLayersExe([active_layer]); //reselect the active layer since the clean up of the session sometime will change which layer is selected
+    await psapi.selectLayersExe([active_layer]) //reselect the active layer since the clean up of the session sometime will change which layer is selected
     if (mode === "txt2img") {
       //Note: keep it for clearity/ readibility
     } else if (mode === generationMode["Img2Img"]) {
-      await snapAndFillHandler();
+      await snapAndFillHandler()
     } else if (mode === "inpaint") {
-      await btnInitInpaintHandler();
+      await btnInitInpaintHandler()
     } else if (mode === "outpaint") {
-      await easyModeOutpaint();
+      await easyModeOutpaint()
     }
 
     //safe to close the previous generation_session outputfolder, since closing a folder will unselect any layer in it.
     ////and the plugin may still need those layers for inpainting mode for example.
 
-    await g_generation_session.closePreviousOutputGroup();
+    await g_generation_session.closePreviousOutputGroup()
 
-    const settings = await getSettings();
-    await generate(settings);
+    const settings = await getSettings()
+    await generate(settings)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 async function generate(settings) {
@@ -1831,33 +1825,33 @@ async function generate(settings) {
 
     // const isFirstGeneration = !(g_is_generation_session_active) // check if this is the first generation in the session
     // const isFirstGeneration = !(g_generation_session.isActive()) // check if this is the first generation in the session
-    const isFirstGeneration = g_generation_session.isFirstGeneration;
+    const isFirstGeneration = g_generation_session.isFirstGeneration
 
     // g_generation_session.startSession()
-    g_generation_session.activate();
+    g_generation_session.activate()
 
-    g_ui.onStartSessionUI();
+    g_ui.onStartSessionUI()
     // toggleTwoButtons(true,'btnGenerate','btnInterrupt')
-    toggleTwoButtonsByClass(true, "btnGenerateClass", "btnInterruptClass");
-    g_can_request_progress = true;
+    toggleTwoButtonsByClass(true, "btnGenerateClass", "btnInterruptClass")
+    g_can_request_progress = true
     //wait 2 seconds till you check for progress
     setTimeout(async function () {
-      await progressRecursive();
-    }, 2000);
+      await progressRecursive()
+    }, 2000)
 
-    console.log(settings);
+    console.log(settings)
 
-    g_request_status = requestState["Generate"];
-    let json = {};
+    g_request_status = requestState["Generate"]
+    let json = {}
     if (g_sd_mode == "txt2img") {
-      json = await generateTxt2Img(settings);
+      json = await generateTxt2Img(settings)
     } else if (g_sd_mode == "img2img" || g_sd_mode == "inpaint") {
-      json = await sdapi.requestImg2Img(settings);
+      json = await sdapi.requestImg2Img(settings)
     }
 
     if (g_sd_mode == "outpaint") {
       // await easyModeOutpaint()
-      json = await sdapi.requestImg2Img(settings);
+      json = await sdapi.requestImg2Img(settings)
 
       // await setTimeout(async ()=> {
       //   json = await sdapi.requestImg2Img(settings)
@@ -1866,18 +1860,18 @@ async function generate(settings) {
     }
     if (g_request_status === requestState["Interrupt"]) {
       //when generate request get interrupted. reset progress bar to 0, discard any meta data and images returned from the proxy server by returning from the function.
-      updateProgressBarsHtml(0);
+      updateProgressBarsHtml(0)
       //check whether request was "generate" or "generate more"
       //if it's generate discard the session
       if (isFirstGeneration) {
         await g_generation_session.endSession(
           session.GarbageCollectionState["Discard"]
-        ); //end session and delete all images
-        g_ui.onEndSessionUI();
+        ) //end session and delete all images
+        g_ui.onEndSessionUI()
 
         // //delete all mask related layers
       }
-      return null;
+      return null
     }
 
     // check if json is empty {}, {} means the proxy server didn't return a valid data
@@ -1885,59 +1879,59 @@ async function generate(settings) {
       if (isFirstGeneration) {
         await g_generation_session.endSession(
           session.GarbageCollectionState["Discard"]
-        ); //end session and delete all images
-        g_ui.onEndSessionUI();
+        ) //end session and delete all images
+        g_ui.onEndSessionUI()
 
         // //delete all mask related layers
       }
-      return null;
+      return null
     }
     //post generation: will execute only if the generate request doesn't get interrupted
     //get the updated metadata from json response
 
-    g_metadatas = updateMetadata(json.metadata);
+    g_metadatas = updateMetadata(json.metadata)
 
     //finished generating, set the button back to generate
 
     // toggleTwoButtons(false,'btnGenerate','btnInterrupt')
-    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass");
-    g_can_request_progress = false;
+    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass")
+    g_can_request_progress = false
 
-    gImage_paths = json.image_paths;
+    gImage_paths = json.image_paths
     //open the generated images from disk and load them onto the canvas
     const b_use_silent_import =
-      document.getElementById("chUseSilentImport").checked;
+      document.getElementById("chUseSilentImport").checked
     if (isFirstGeneration) {
       //this is new generation session
 
       if (b_use_silent_import) {
-        g_image_path_to_layer = await silentImagesToLayersExe(gImage_paths);
+        g_image_path_to_layer = await silentImagesToLayersExe(gImage_paths)
       } else {
-        g_image_path_to_layer = await ImagesToLayersExe(gImage_paths);
+        g_image_path_to_layer = await ImagesToLayersExe(gImage_paths)
       }
 
-      g_number_generation_per_session = 1;
-      g_generation_session.isFirstGeneration = false;
+      g_number_generation_per_session = 1
+      g_generation_session.isFirstGeneration = false
     } else {
       // generation session is active so we will generate more
-      let last_images_paths;
+      let last_images_paths
       if (b_use_silent_import) {
-        last_images_paths = await silentImagesToLayersExe(gImage_paths);
+        last_images_paths = await silentImagesToLayersExe(gImage_paths)
       } else {
-        last_images_paths = await ImagesToLayersExe(gImage_paths);
+        last_images_paths = await ImagesToLayersExe(gImage_paths)
       }
 
       g_image_path_to_layer = {
         ...g_image_path_to_layer,
         ...last_images_paths,
-      };
-      g_number_generation_per_session++;
+      }
+      g_number_generation_per_session++
     }
-    await psapi.reSelectMarqueeExe(g_selection);
+    await psapi.reSelectMarqueeExe(g_selection)
     //update the viewer
-    await loadViewerImages();
+    await loadViewerImages()
   } catch (e) {
-    console.error(`btnGenerate.click(): `, e);
+    console.error(`btnGenerate.click(): `, e)
   }
 }
 
@@ -1993,56 +1987,56 @@ Array.from(document.getElementsByClassName("btnGenerateClass")).forEach(
     btn.addEventListener("click", async () => {
       // const settings = await getSettings()
       // generate(settings)
-      await easyModeGenerate();
-    });
+      await easyModeGenerate()
+    })
   }
-);
+)
 
 document
   .getElementById("btnRefreshModels")
   .addEventListener("click", async (e) => {
-    await refreshUI();
-    tempDisableElement(e.target, 3000);
-  });
+    await refreshUI()
+    tempDisableElement(e.target, 3000)
+  })
 
 document.querySelector("#mModelsMenu").addEventListener("change", (evt) => {
-  const model_index = evt.target.selectedIndex;
-  console.log(`Selected item: ${evt.target.selectedIndex}`);
-  let model = g_models[0];
+  const model_index = evt.target.selectedIndex
+  console.log(`Selected item: ${evt.target.selectedIndex}`)
+  let model = g_models[0]
   if (model_index < g_models.length) {
-    model = g_models[model_index];
+    model = g_models[model_index]
   }
   // g_model_name = `${model.model_name}.ckpt`
-  g_model_title = model.title;
-  console.log("g_model_title: ", g_model_title);
-  sdapi.requestSwapModel(g_model_title);
-});
+  g_model_title = model.title
+  console.log("g_model_title: ", g_model_title)
+  sdapi.requestSwapModel(g_model_title)
+})
 
 document
   .getElementById("btnLayerToSelection")
   .addEventListener("click", async () => {
     try {
-      const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive();
+      const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
       if (isSelectionAreaValid) {
-        const validSelection = isSelectionAreaValid;
-        await psapi.layerToSelection(validSelection);
+        const validSelection = isSelectionAreaValid
+        await psapi.layerToSelection(validSelection)
       } else {
-        await psapi.promptForMarqueeTool();
+        await psapi.promptForMarqueeTool()
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 
 document
   .getElementById("btnSetInitImageViewer")
   .addEventListener("click", async () => {
     //set init image event listener, use when settion is active
-    const layer = await app.activeDocument.activeLayers[0];
-    const image_name = await psapi.setInitImage(layer, random_session_id);
-    const path = `./server/python_server/init_images/${image_name}`;
-    g_viewer_manager.addInitImageLayers(layer, path, false);
-  });
+    const layer = await app.activeDocument.activeLayers[0]
+    const image_name = await psapi.setInitImage(layer, random_session_id)
+    const path = `./server/python_server/init_images/${image_name}`
+    g_viewer_manager.addInitImageLayers(layer, path, false)
+  })
 
 document
   .getElementById("btnSetMaskViewer")
@@ -2050,34 +2044,34 @@ document
     try {
       await executeAsModal(async () => {
         if (g_viewer_manager.mask_solid_background) {
-          g_viewer_manager.mask_solid_background.visible = true;
+          g_viewer_manager.mask_solid_background.visible = true
         }
-      });
-      const layer = g_viewer_manager.maskGroup;
+      })
+      const layer = g_viewer_manager.maskGroup
       // const layer = await app.activeDocument.activeLayers[0]
-      const image_name = await psapi.setInitImageMask(layer, random_session_id);
-      const path = `./server/python_server/init_images/${image_name}`;
-      g_viewer_manager.addMaskLayers(layer, path, false); //can be autodeleted?
-      await psapi.unselectActiveLayersExe();
+      const image_name = await psapi.setInitImageMask(layer, random_session_id)
+      const path = `./server/python_server/init_images/${image_name}`
+      g_viewer_manager.addMaskLayers(layer, path, false) //can be autodeleted?
+      await psapi.unselectActiveLayersExe()
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 
 document.getElementById("bSetInitImage").addEventListener("click", async () => {
-  const layer = await app.activeDocument.activeLayers[0];
-  await psapi.setInitImage(layer, random_session_id);
-});
+  const layer = await app.activeDocument.activeLayers[0]
+  await psapi.setInitImage(layer, random_session_id)
+})
 
 document
   .getElementById("bSetInitImageMask")
   .addEventListener("click", async () => {
-    const layer = await app.activeDocument.activeLayers[0];
-    await psapi.setInitImageMask(layer, random_session_id);
-  });
+    const layer = await app.activeDocument.activeLayers[0]
+    await psapi.setInitImageMask(layer, random_session_id)
+  })
 function moveElementToAnotherTab(elementId, newParentId) {
-  const element = document.getElementById(elementId);
-  document.getElementById(newParentId).appendChild(element);
+  const element = document.getElementById(elementId)
+  document.getElementById(newParentId).appendChild(element)
 }
 
 // moveElementToAnotherTab("batchNumberUi","batchNumberViewerTabContainer")
@@ -2085,19 +2079,19 @@ function updateProgressBarsHtml(new_value) {
   document.querySelectorAll(".pProgressBars").forEach((el) => {
     // id = el.getAttribute("id")
     // console.log("progressbar id:", id)
-    el.setAttribute("value", new_value);
-  });
+    el.setAttribute("value", new_value)
+  })
   // document.querySelector('#pProgressBar').value
 }
 async function progressRecursive() {
-  let json = await sdapi.requestProgress();
+  let json = await sdapi.requestProgress()
   // document.querySelector('#pProgressBar').value = json.progress * 100
-  progress_value = json.progress * 100;
-  updateProgressBarsHtml(progress_value);
+  progress_value = json.progress * 100
+  updateProgressBarsHtml(progress_value)
   if (json.progress > 0 && g_can_request_progress == true) {
     setTimeout(async () => {
-      await progressRecursive();
-    }, 500);
+      await progressRecursive()
+    }, 500)
   }
 }
 
@@ -2106,15 +2100,15 @@ async function progressRecursive() {
 //   .addEventListener('click', progressRecursive)
 
 function changeImage() {
-  let img = document.getElementById("img1");
-  img.src = "https://source.unsplash.com/random";
+  let img = document.getElementById("img1")
+  img.src = "https://source.unsplash.com/random"
 }
 
 // document.getElementById('btnChangeImage').addEventListener('click', changeImage)
 
 async function imageToSmartObject() {
-  const { batchPlay } = require("photoshop").action;
-  const { executeAsModal } = require("photoshop").core;
+  const { batchPlay } = require("photoshop").action
+  const { executeAsModal } = require("photoshop").core
 
   try {
     // const file = await fs.getFileForOpening()
@@ -2124,11 +2118,11 @@ async function imageToSmartObject() {
     // // let token = await fs.createSessionToken(entry)
     await executeAsModal(
       async () => {
-        console.log("imageToSmartObject():");
-        const storage = require("uxp").storage;
-        const fs = storage.localFileSystem;
-        let pluginFolder = await fs.getPluginFolder();
-        let img = await pluginFolder.getEntry("output- 1672730735.1670313.png");
+        console.log("imageToSmartObject():")
+        const storage = require("uxp").storage
+        const fs = storage.localFileSystem
+        let pluginFolder = await fs.getPluginFolder()
+        let img = await pluginFolder.getEntry("output- 1672730735.1670313.png")
         const result = await batchPlay(
           [
             {
@@ -2173,15 +2167,15 @@ async function imageToSmartObject() {
             synchronousExecution: true,
             modalBehavior: "execute",
           }
-        );
+        )
       },
       {
         commandName: "Create Label",
       }
-    );
+    )
   } catch (e) {
-    console.log("imageToSmartObject() => error: ");
-    console.warn(e);
+    console.log("imageToSmartObject() => error: ")
+    console.warn(e)
   }
 }
 
@@ -2191,27 +2185,27 @@ async function placeEmbedded(image_path) {
   //silent importer
 
   try {
-    console.log("placeEmbedded(): image_path: ", image_path);
+    console.log("placeEmbedded(): image_path: ", image_path)
 
-    const formats = require("uxp").storage.formats;
-    const storage = require("uxp").storage;
-    const fs = storage.localFileSystem;
-    const names = image_path.split("/");
-    const length = names.length;
-    const image_name = names[length - 1];
-    const project_name = names[length - 2];
-    let pluginFolder = await fs.getPluginFolder();
-    const image_dir = `./server/python_server/output/${project_name}`;
+    const formats = require("uxp").storage.formats
+    const storage = require("uxp").storage
+    const fs = storage.localFileSystem
+    const names = image_path.split("/")
+    const length = names.length
+    const image_name = names[length - 1]
+    const project_name = names[length - 2]
+    let pluginFolder = await fs.getPluginFolder()
+    const image_dir = `./server/python_server/output/${project_name}`
     // image_path = "output/f027258e-71b8-430a-9396-0a19425f2b44/output- 1674323725.126322.png"
 
-    let img_dir = await pluginFolder.getEntry(image_dir);
+    let img_dir = await pluginFolder.getEntry(image_dir)
     // const file = await img_dir.createFile('output- 1674298902.0571606.png', {overwrite: true});
 
-    const file = await img_dir.createFile(image_name, { overwrite: true });
+    const file = await img_dir.createFile(image_name, { overwrite: true })
 
-    const img = await file.read({ format: formats.binary });
-    const token = await storage.localFileSystem.createSessionToken(file);
-    let place_event_result;
+    const img = await file.read({ format: formats.binary })
+    const token = await storage.localFileSystem.createSessionToken(file)
+    let place_event_result
     await executeAsModal(async () => {
       const result = await batchPlay(
         [
@@ -2247,15 +2241,15 @@ async function placeEmbedded(image_path) {
           synchronousExecution: true,
           modalBehavior: "execute",
         }
-      );
-      console.log("placeEmbedd batchPlay result: ", result);
+      )
+      console.log("placeEmbedd batchPlay result: ", result)
 
-      place_event_result = result[0];
-    });
+      place_event_result = result[0]
+    })
 
-    return place_event_result;
+    return place_event_result
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -2263,32 +2257,32 @@ async function placeEmbedded(image_path) {
 
 // open an image in the plugin folder as new document
 async function openImageAction() {
-  const storage = require("uxp").storage;
-  const fs = storage.localFileSystem;
+  const storage = require("uxp").storage
+  const fs = storage.localFileSystem
   try {
-    let pluginFolder = await fs.getPluginFolder();
+    let pluginFolder = await fs.getPluginFolder()
     // let theTemplate = await pluginFolder.getEntry("/image1.png");
     //directory where all image's request folders are. one folder for each request
-    const relative_dir_path = `./server/python_server/`;
+    const relative_dir_path = `./server/python_server/`
 
-    const image_path = `${relative_dir_path}/${gCurrentImagePath}`;
+    const image_path = `${relative_dir_path}/${gCurrentImagePath}`
     // 'C:/Users/abdul/Desktop/photoshop_plugins/my_plugin_1/server/python_server/output- 1670544300.95411.png'
-    let theTemplate = await pluginFolder.getEntry(image_path);
+    let theTemplate = await pluginFolder.getEntry(image_path)
 
-    await app.open(theTemplate);
+    await app.open(theTemplate)
   } catch (e) {
-    console.warn("couldn't open image ", e);
+    console.warn("couldn't open image ", e)
   }
 }
 
 async function openImageExe() {
-  await require("photoshop").core.executeAsModal(openImageAction);
+  await require("photoshop").core.executeAsModal(openImageAction)
 }
 // document.getElementById('btnImagesToLayers').addEventListener('click',openImageExe)
 
 // convert a layer to a smart object
 async function convertToSmartObjectAction() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
   const result = await batchPlay(
     [
       {
@@ -2300,96 +2294,96 @@ async function convertToSmartObjectAction() {
       },
     ],
     {}
-  );
+  )
 }
 async function convertToSmartObjectExe() {
-  await require("photoshop").core.executeAsModal(convertToSmartObjectAction);
+  await require("photoshop").core.executeAsModal(convertToSmartObjectAction)
 }
 
 async function ImagesToLayersExe(images_paths) {
-  g_generation_session.isLoadingActive = true;
+  g_generation_session.isLoadingActive = true
 
-  await psapi.reSelectMarqueeExe(g_selection);
-  image_path_to_layer = {};
-  console.log("ImagesToLayersExe: images_paths: ", images_paths);
+  await psapi.reSelectMarqueeExe(g_selection)
+  image_path_to_layer = {}
+  console.log("ImagesToLayersExe: images_paths: ", images_paths)
   for (image_path of images_paths) {
-    gCurrentImagePath = image_path;
-    console.log(gCurrentImagePath);
-    await openImageExe(); //local image to new document
-    await convertToSmartObjectExe(); //convert the current image to smart object
+    gCurrentImagePath = image_path
+    console.log(gCurrentImagePath)
+    await openImageExe() //local image to new document
+    await convertToSmartObjectExe() //convert the current image to smart object
     if (g_b_use_smart_object === false) {
       await executeAsModal(async () => {
-        await app.activeDocument.activeLayers[0].rasterize(); //rastrize the active layer
-      });
+        await app.activeDocument.activeLayers[0].rasterize() //rastrize the active layer
+      })
     }
-    await stackLayers(); // move the smart object to the original/old document
-    await psapi.layerToSelection(g_selection); //transform the new smart object layer to fit selection area
-    layer = await app.activeDocument.activeLayers[0];
-    image_path_to_layer[image_path] = layer;
+    await stackLayers() // move the smart object to the original/old document
+    await psapi.layerToSelection(g_selection) //transform the new smart object layer to fit selection area
+    layer = await app.activeDocument.activeLayers[0]
+    image_path_to_layer[image_path] = layer
     // await reselect(selectionInfo)
   }
-  return image_path_to_layer;
+  return image_path_to_layer
 }
 
 async function silentImagesToLayersExe(images_paths) {
   try {
-    g_generation_session.isLoadingActive = true;
+    g_generation_session.isLoadingActive = true
 
-    await psapi.reSelectMarqueeExe(g_selection);
-    image_path_to_layer = {};
-    console.log("silentImagesToLayersExe: images_paths: ", images_paths);
+    await psapi.reSelectMarqueeExe(g_selection)
+    image_path_to_layer = {}
+    console.log("silentImagesToLayersExe: images_paths: ", images_paths)
     // Returns a Promise that resolves after "ms" Milliseconds
-    const timer = (ms) => new Promise((res) => setTimeout(res, ms));
+    const timer = (ms) => new Promise((res) => setTimeout(res, ms))
 
     for (image_path of images_paths) {
-      gCurrentImagePath = image_path;
-      console.log(gCurrentImagePath);
+      gCurrentImagePath = image_path
+      console.log(gCurrentImagePath)
       //unselect all layers so that the imported layer get place at the top of the document
-      await psapi.unselectActiveLayersExe();
+      await psapi.unselectActiveLayersExe()
 
-      const placeEventResult = await placeEmbedded(image_path); //silent import into the document
+      const placeEventResult = await placeEmbedded(image_path) //silent import into the document
 
       let layer = await app.activeDocument.layers.filter(
         (l) => l.id === placeEventResult?.ID
-      )[0];
+      )[0]
       // await openImageExe() //local image to new document
       // await convertToSmartObjectExe() //convert the current image to smart object
-      let timer_count = 0;
+      let timer_count = 0
       // console.log("image_path: ",image_path)
       // let layer = await app.activeDocument.activeLayers[0]
-      console.log("loaded layer: ", layer);
-      console.log("placeEventResult?.ID: ", placeEventResult?.ID);
+      console.log("loaded layer: ", layer)
+      console.log("placeEventResult?.ID: ", placeEventResult?.ID)
       while (!layer && timer_count <= 10000) {
-        await timer(100); // then the created Promise can be awaited
-        timer_count += 100;
+        await timer(100) // then the created Promise can be awaited
+        timer_count += 100
         // layer = await app.activeDocument.activeLayers[0]
         layer = await app.activeDocument.layers.filter(
           (l) => l.id === placeEventResult?.ID
-        )[0];
-        const active_layer = await app.activeDocument.activeLayers[0];
-        console.log("active_layer.id: ", active_layer.id);
+        )[0]
+        const active_layer = await app.activeDocument.activeLayers[0]
+        console.log("active_layer.id: ", active_layer.id)
         if (active_layer.id === placeEventResult?.ID) {
-          layer = active_layer;
+          layer = active_layer
         }
 
-        console.log("timer_count: ", timer_count);
-        console.log("loaded layer: ", layer);
-        console.log("placeEventResult?.ID: ", placeEventResult?.ID);
+        console.log("timer_count: ", timer_count)
+        console.log("loaded layer: ", layer)
+        console.log("placeEventResult?.ID: ", placeEventResult?.ID)
       }
 
       if (g_b_use_smart_object === false) {
         await executeAsModal(async () => {
-          await layer.rasterize(); //rastrize the active layer
-        });
+          await layer.rasterize() //rastrize the active layer
+        })
       }
 
-      await psapi.selectLayersExe([layer]);
-      await psapi.layerToSelection(g_selection);
+      await psapi.selectLayersExe([layer])
+      await psapi.layerToSelection(g_selection)
 
       // await stackLayers() // move the smart object to the original/old document
       // await psapi.layerToSelection(g_selection) //transform the new smart object layer to fit selection area
       // layer = await app.activeDocument.activeLayers[0]
-      await g_generation_session.moveToTopOfOutputGroup(layer);
+      await g_generation_session.moveToTopOfOutputGroup(layer)
       // const output_group_id = await g_generation_session.outputGroup.id
       // let group_index = await psapi.getLayerIndex(output_group_id)
       // const indexOffset = 1 //1 for background, 0 if no background exist
@@ -2398,14 +2392,14 @@ async function silentImagesToLayersExe(images_paths) {
 
       // })
 
-      image_path_to_layer[image_path] = layer;
+      image_path_to_layer[image_path] = layer
       // await reselect(selectionInfo)
     }
-    return image_path_to_layer;
+    return image_path_to_layer
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-  g_generation_session.isLoadingActive = false;
+  g_generation_session.isLoadingActive = false
 }
 
 // document.getElementById('btnLoadImages').addEventListener('click',ImagesToLayersExe)
@@ -2413,17 +2407,17 @@ async function silentImagesToLayersExe(images_paths) {
 //stack layer to original document
 async function stackLayers() {
   //workingDoc is the project you are using stable diffusion in
-  const workingDoc = app.documents[0];
+  const workingDoc = app.documents[0]
   //you should not open two multiple projects this script assume there is only one project opened
-  const docsToStack = app.documents.filter((doc) => doc._id !== workingDoc._id);
-  let docCounter = 0;
+  const docsToStack = app.documents.filter((doc) => doc._id !== workingDoc._id)
+  let docCounter = 0
 
   // execute as modal is required for functions that change the state of Photoshop or documents
   // think of it as a function that 'wraps' yours and tells Photoshop to go into a modal state and not allow anything to interrupt it from doing whatever is contained in the executeAsModal
   // we also call it with the await keyword to tell JS that we want to wait for it to complete before moving on to later code (in this case there isn't any though)
   await require("photoshop").core.executeAsModal(() => {
     // increment counter
-    docCounter++;
+    docCounter++
 
     // loop through other open docs
     for (const doc of docsToStack) {
@@ -2431,31 +2425,31 @@ async function stackLayers() {
       // doc.flatten();
 
       // rename layer with counter
-      doc.layers[0].name = `Layer ${docCounter}`;
+      doc.layers[0].name = `Layer ${docCounter}`
 
       // increment counter
-      docCounter++;
+      docCounter++
 
       // duplicate layer to docZero
-      doc.layers[0].duplicate(workingDoc);
+      doc.layers[0].duplicate(workingDoc)
 
       // close doc
-      doc.closeWithoutSaving();
+      doc.closeWithoutSaving()
     }
-  });
+  })
 }
 document.getElementById("collapsible").addEventListener("click", function () {
-  this.classList.toggle("active");
-  var content = this.nextElementSibling;
-  console.log("content:", content);
+  this.classList.toggle("active")
+  var content = this.nextElementSibling
+  console.log("content:", content)
   if (content.style.display === "block") {
-    content.style.display = "none";
-    this.textContent = "Show Samplers";
+    content.style.display = "none"
+    this.textContent = "Show Samplers"
   } else {
-    content.style.display = "block";
-    this.textContent = "Hide Samplers";
+    content.style.display = "block"
+    this.textContent = "Hide Samplers"
   }
-});
+})
 
 function removeInitImageFromViewer() {}
 function removeMaskFromViewer() {}
@@ -2464,7 +2458,7 @@ async function NewViewerImageClickHandler(img, viewer_obj_owner) {
   try {
     img.addEventListener("click", async (e) => {
       if (g_isViewerMenuDisabled) {
-        return g_isViewerMenuDisabled;
+        return g_isViewerMenuDisabled
       }
 
       // e.target.classList.add("viewerImgSelected")
@@ -2494,14 +2488,14 @@ async function NewViewerImageClickHandler(img, viewer_obj_owner) {
             } else {
               // viewer_object.state = viewer.ViewerObjState["Delete"]
             }
-            viewer_object.visible(false);
-            viewer_object.active(false);
+            viewer_object.visible(false)
+            viewer_object.active(false)
 
             // console.log("viewer_object.path: ",viewer_object.path)
             // console.log("viewer_object.info(): ")
             // viewer_object.info()
           } catch (e) {
-            console.error("cannot hide a layer: ", e);
+            console.error("cannot hide a layer: ", e)
           }
         }
 
@@ -2525,9 +2519,9 @@ async function NewViewerImageClickHandler(img, viewer_obj_owner) {
         // selectedViewerImageObj.visible(true)
         // selectedViewerImageObj.select(true)
         // viewer_obj_owner.state = viewer.ViewerObjState['Unlink']
-        viewer_obj_owner.visible(true);
-        await viewer_obj_owner.select(true); //select() does take arguments
-        viewer_obj_owner.active(true);
+        viewer_obj_owner.visible(true)
+        await viewer_obj_owner.select(true) //select() does take arguments
+        viewer_obj_owner.active(true)
         // console.log("viewer_obj_owner.path: ",viewer_obj_owner.path)
         // console.log("viewer_obj_owner.info(): ")
         // viewer_obj_owner.info()
@@ -2535,51 +2529,51 @@ async function NewViewerImageClickHandler(img, viewer_obj_owner) {
           try {
             if (g_viewer_manager.last_selected_viewer_obj) {
               //if the last selected layer is valid then converted last selected layer into highlight layer
-              g_viewer_manager.last_selected_viewer_obj.setHighlight(true);
+              g_viewer_manager.last_selected_viewer_obj.setHighlight(true)
             }
           } catch (e) {
-            console.warn(e);
+            console.warn(e)
           }
 
-          viewer_obj_owner.setHighlight(true);
+          viewer_obj_owner.setHighlight(true)
           // e.target.classList.add("viewerImgSelected")
         } else if (e.altKey) {
-          g_viewer_manager.last_selected_viewer_obj = null;
-          viewer_obj_owner.setHighlight(false);
-          viewer_obj_owner.visible(false);
-          viewer_obj_owner.active(false);
+          g_viewer_manager.last_selected_viewer_obj = null
+          viewer_obj_owner.setHighlight(false)
+          viewer_obj_owner.visible(false)
+          viewer_obj_owner.active(false)
 
           // await viewer_obj_owner.select(false)
-          await psapi.unselectActiveLayersExe();
+          await psapi.unselectActiveLayersExe()
           // e.target.classList.remove("viewerImgSelected")
         }
 
         if (viewer_obj_owner.isActive()) {
           // will not store current viewer_obj if we click "alt" click if we hit alt click
 
-          g_viewer_manager.last_selected_viewer_obj = viewer_obj_owner; //store the current selection as last selection for the next click attempt .
+          g_viewer_manager.last_selected_viewer_obj = viewer_obj_owner //store the current selection as last selection for the next click attempt .
         }
-      });
-    });
+      })
+    })
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 function createViewerImgHtml(output_dir_relative, image_path) {
-  const img = document.createElement("img");
-  img.src = `${output_dir_relative}/${image_path}`;
-  img.className = "viewer-image";
-  console.log("image_path: ", image_path);
+  const img = document.createElement("img")
+  img.src = `${output_dir_relative}/${image_path}`
+  img.className = "viewer-image"
+  console.log("image_path: ", image_path)
   // img.dataset.image_id = layer_id
   // img.dataset.image_path = image_path // image_path is not the same as src
-  return img;
+  return img
 }
 
 function toggleLayerVisibility(layer, b_on) {
   try {
-    layer.visible = b_on;
+    layer.visible = b_on
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 async function turnMaskVisible(
@@ -2590,37 +2584,35 @@ async function turnMaskVisible(
   //will turn a mask group, white layer mask, and the solid black layer on and off
   try {
     await executeAsModal(() => {
-      toggleLayerVisibility(g_mask_group, b_mask_group_on);
-      toggleLayerVisibility(g_white_mask, b_white_mask_on);
-      toggleLayerVisibility(g_solid_black_mask, b_solid_black_mask_on);
-    });
+      toggleLayerVisibility(g_mask_group, b_mask_group_on)
+      toggleLayerVisibility(g_white_mask, b_white_mask_on)
+      toggleLayerVisibility(g_solid_black_mask, b_solid_black_mask_on)
+    })
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function loadViewerImages() {
   try {
     //get the images path
-    console.log("g_image_path_to_layer:", g_image_path_to_layer);
+    console.log("g_image_path_to_layer:", g_image_path_to_layer)
 
-    const output_dir_relative = "./server/python_server/";
+    const output_dir_relative = "./server/python_server/"
     const init_image_container = document.getElementById(
       "divInitImageViewerContainer"
-    );
-    const mask_container = document.getElementById(
-      "divInitMaskViewerContainer"
-    );
+    )
+    const mask_container = document.getElementById("divInitMaskViewerContainer")
     const output_image_container = document.getElementById(
       "divViewerImagesContainer"
-    );
+    )
 
     // while(container.firstChild){
     // container.removeChild(container.firstChild);
     // }
-    image_paths = Object.keys(g_image_path_to_layer);
-    console.log("image_paths: ", image_paths);
-    let i = 0;
+    image_paths = Object.keys(g_image_path_to_layer)
+    console.log("image_paths: ", image_paths)
+    let i = 0
 
     // const viewer_layers = []
     // Object.keys(g_image_path_to_layer).map(path =>  new viewer.OutputImage(g_image_path_to_layer[path],path))
@@ -2629,73 +2621,73 @@ async function loadViewerImages() {
     if (g_viewer_manager.initGroup) {
       //it means we are in an img2img related mode
       // const path =  `./server/python_server/init_images/${g_init_image_name}`
-      const paths = Object.keys(g_viewer_manager.initImageLayersJson);
+      const paths = Object.keys(g_viewer_manager.initImageLayersJson)
       for (const path of paths) {
         if (!g_viewer_manager.hasViewerImage(path)) {
           // const group = g_init_image_related_layers['init_image_group']
           // const snapshot = g_init_image_related_layers['init_image_layer']
           // const solid_background = g_init_image_related_layers['solid_white']
 
-          const group = g_viewer_manager.initImageLayersJson[path].group;
-          const snapshot = g_viewer_manager.initImageLayersJson[path].snapshot;
+          const group = g_viewer_manager.initImageLayersJson[path].group
+          const snapshot = g_viewer_manager.initImageLayersJson[path].snapshot
           const solid_background =
-            g_viewer_manager.initImageLayersJson[path].solid_background;
+            g_viewer_manager.initImageLayersJson[path].solid_background
           const auto_delete =
-            g_viewer_manager.initImageLayersJson[path].autoDelete;
+            g_viewer_manager.initImageLayersJson[path].autoDelete
           const initImage = g_viewer_manager.addInitImage(
             group,
             snapshot,
             solid_background,
             path,
             auto_delete
-          );
+          )
 
           const init_img_html = createViewerImgHtml(
             "./server/python_server/init_images/",
             g_init_image_name
-          );
-          init_image_container.appendChild(init_img_html);
-          initImage.setImgHtml(init_img_html);
+          )
+          init_image_container.appendChild(init_img_html)
+          initImage.setImgHtml(init_img_html)
 
-          await NewViewerImageClickHandler(init_img_html, initImage); // create click handler for each images
+          await NewViewerImageClickHandler(init_img_html, initImage) // create click handler for each images
         }
       }
     }
 
     // if (g_mask_related_layers.hasOwnProperty('mask_group')) {
     if (g_viewer_manager.maskGroup) {
-      const path = `./server/python_server/init_images/${g_init_image_mask_name}`;
+      const path = `./server/python_server/init_images/${g_init_image_mask_name}`
       if (!g_viewer_manager.hasViewerImage(path)) {
         // const group = g_mask_related_layers['mask_group']
         // const white_mark = g_mask_related_layers['white_mark']
         // const solid_background = g_mask_related_layers['solid_black']
 
-        const group = g_viewer_manager.maskLayersJson[path].group;
-        const white_mark = g_viewer_manager.maskLayersJson[path].white_mark;
+        const group = g_viewer_manager.maskLayersJson[path].group
+        const white_mark = g_viewer_manager.maskLayersJson[path].white_mark
         const solid_background =
-          g_viewer_manager.maskLayersJson[path].solid_background;
+          g_viewer_manager.maskLayersJson[path].solid_background
         const mask_obj = g_viewer_manager.addMask(
           group,
           white_mark,
           solid_background,
           path
-        );
+        )
 
         const mask_img_html = createViewerImgHtml(
           "./server/python_server/init_images/",
           g_init_image_mask_name
-        );
+        )
 
-        mask_container.appendChild(mask_img_html);
-        mask_obj.setImgHtml(mask_img_html);
+        mask_container.appendChild(mask_img_html)
+        mask_obj.setImgHtml(mask_img_html)
 
-        await NewViewerImageClickHandler(mask_img_html, mask_obj); // create click handler for each images ,viewer_layers)// create click handler for each images
+        await NewViewerImageClickHandler(mask_img_html, mask_obj) // create click handler for each images ,viewer_layers)// create click handler for each images
         // await viewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images
       }
     }
 
-    console.log("image_paths: ", image_paths);
-    let lastOutputImage;
+    console.log("image_paths: ", image_paths)
+    let lastOutputImage
     for (const path of image_paths) {
       // const path = image_path
       //check if viewer obj already exist by using the path on hard drive
@@ -2706,28 +2698,28 @@ async function loadViewerImages() {
 
         //create an html image element and attach it container, and link it to the viewer obj
 
-        const layer = g_image_path_to_layer[path];
-        const img = createViewerImgHtml(output_dir_relative, path, layer.id);
-        const output_image_obj = g_viewer_manager.addOutputImage(layer, path);
-        lastOutputImage = output_image_obj;
-        output_image_obj.setImgHtml(img);
+        const layer = g_image_path_to_layer[path]
+        const img = createViewerImgHtml(output_dir_relative, path, layer.id)
+        const output_image_obj = g_viewer_manager.addOutputImage(layer, path)
+        lastOutputImage = output_image_obj
+        output_image_obj.setImgHtml(img)
         if (g_generation_session.mode !== generationMode["Txt2Img"]) {
           //we don't need a button in txt2img mode
-          output_image_obj.addButtonHtml();
+          output_image_obj.addButtonHtml()
         }
-        output_image_container.appendChild(output_image_obj.img_html);
+        output_image_container.appendChild(output_image_obj.img_html)
         //add on click event handler to the html img
-        await NewViewerImageClickHandler(img, output_image_obj);
+        await NewViewerImageClickHandler(img, output_image_obj)
       }
 
       // i++
     }
     if (lastOutputImage) {
       //select the last generate/output image
-      lastOutputImage.img_html.click();
+      lastOutputImage.img_html.click()
     }
   } catch (e) {
-    console.error(`loadViewer images: `, e);
+    console.error(`loadViewer images: `, e)
   }
 }
 
@@ -2742,9 +2734,9 @@ async function deleteNoneSelected(viewer_objects) {
           // if (viewer_object.getHighlight() || viewer_object.is_active){//keep it if it's highlighted
           // const path = viewer_object.path
 
-          viewer_object.visible(true); //make them visiable on the canvas
+          viewer_object.visible(true) //make them visiable on the canvas
 
-          await viewer_object.delete(); //delete the layer from layers stack
+          await viewer_object.delete() //delete the layer from layers stack
 
           //   if(viewer_object.state ===  viewer.ViewerObjState['Unlink']){
           //   viewer_object.unlink() // just delete the html image but keep the layer in the layers stack
@@ -2753,24 +2745,24 @@ async function deleteNoneSelected(viewer_objects) {
           //   await viewer_object.delete()//delete the layer from layers stack
 
           // }
-          delete g_image_path_to_layer[path];
+          delete g_image_path_to_layer[path]
         } catch (e) {
-          console.warn(e);
+          console.warn(e)
         }
       }
-      g_viewer_manager.pathToViewerImage = {};
-      g_viewer_manager.initImageLayersJson = {};
-      g_image_path_to_layer = {};
-    });
+      g_viewer_manager.pathToViewerImage = {}
+      g_viewer_manager.initImageLayersJson = {}
+      g_image_path_to_layer = {}
+    })
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function deleteNoneSelectedAndReloadViewer() {
-  await deleteNoneSelected(g_viewer_manager.pathToViewerImage);
-  console.log("g_image_path_to_layer: ", g_image_path_to_layer);
-  await loadViewerImages(); // maybe we should pass g_image_path_to_layer instead of it been global
+  await deleteNoneSelected(g_viewer_manager.pathToViewerImage)
+  console.log("g_image_path_to_layer: ", g_image_path_to_layer)
+  await loadViewerImages() // maybe we should pass g_image_path_to_layer instead of it been global
 }
 
 // document.getElementById('btnLoadViewer').addEventListener('click', loadViewerImages)
@@ -2779,104 +2771,104 @@ document
   .getElementById("btnLoadHistory")
   .addEventListener("click", async function () {
     try {
-      const output_dir_relative = "./server/python_server/";
-      const container = document.getElementById("divHistoryImagesContainer");
-      const uniqueDocumentId = await getUniqueDocumentId();
+      const output_dir_relative = "./server/python_server/"
+      const container = document.getElementById("divHistoryImagesContainer")
+      const uniqueDocumentId = await getUniqueDocumentId()
       const [image_paths, metadata_jsons] = await sdapi.loadHistory(
         uniqueDocumentId
-      );
+      )
 
       while (container.firstChild) {
-        container.removeChild(container.firstChild);
+        container.removeChild(container.firstChild)
       }
 
-      let i = 0;
+      let i = 0
       for (image_path of image_paths) {
-        const img = document.createElement("img");
-        img.src = `${output_dir_relative}/${image_path}`;
-        img.dataset.path = `${output_dir_relative}/${image_path}`;
-        img.className = "history-image";
-        img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i]);
-        const img_container = html_manip.addHistoryButtonsHtml(img);
-        container.appendChild(img_container);
+        const img = document.createElement("img")
+        img.src = `${output_dir_relative}/${image_path}`
+        img.dataset.path = `${output_dir_relative}/${image_path}`
+        img.className = "history-image"
+        img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
+        const img_container = html_manip.addHistoryButtonsHtml(img)
+        container.appendChild(img_container)
 
         // container.appendChild(img)
         img.addEventListener("click", async (e) => {
           //auto fill the ui with metadata
           const metadata_json = JSON.parse(
             e.target.dataset.metadata_json_string
-          );
-          console.log("metadata_json: ", metadata_json);
+          )
+          console.log("metadata_json: ", metadata_json)
           // document.querySelector('#tiSeed').value = metadata_json.Seed
           document.querySelector("#historySeedLabel").textContent =
-            metadata_json.Seed;
-          autoFillInSettings(metadata_json);
+            metadata_json.Seed
+          autoFillInSettings(metadata_json)
 
           //load the image onto the canvas
           // let image_path = img.dataset.path
           // const image_path_escape = image_path.replace(/\o/g,"/o") //escape string "\o" in "\output"
           // await placeEmbedded(image_path_escape)
-        });
-        i++;
+        })
+        i++
       }
     } catch (e) {
-      console.warn(`loadHistory warning: ${e}`);
+      console.warn(`loadHistory warning: ${e}`)
     }
-  });
+  })
 
 document
   .getElementById("btnImageSearch")
   .addEventListener("click", async function () {
     try {
       // const output_dir_relative = "./server/python_server/"
-      const container = document.getElementById("divHistoryImagesContainer");
+      const container = document.getElementById("divHistoryImagesContainer")
       // const uniqueDocumentId = await getUniqueDocumentId()
       // const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
-      const keywords = document.getElementById("imageSearchField").value;
-      const image_search_objs = await sdapi.imageSearch(keywords);
+      const keywords = document.getElementById("imageSearchField").value
+      const image_search_objs = await sdapi.imageSearch(keywords)
       while (container.firstChild) {
-        container.removeChild(container.firstChild);
+        container.removeChild(container.firstChild)
       }
 
       // let i = 0
       for (let image_search_obj of image_search_objs) {
-        const img = document.createElement("img");
+        const img = document.createElement("img")
         // img.src = image_search_obj['image']
 
-        img.src = image_search_obj["thumbnail"];
+        img.src = image_search_obj["thumbnail"]
 
-        img.className = "image-search";
+        img.className = "image-search"
         // img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
-        container.appendChild(img);
+        container.appendChild(img)
         img.addEventListener("click", async (e) => {
-          console.log(`the image url: ${img.src}`);
-          const link = img.src;
-          await downloadItExe(link);
+          console.log(`the image url: ${img.src}`)
+          const link = img.src
+          await downloadItExe(link)
           // const metadata_json = JSON.parse(e.target.dataset.metadata_json_string)
           // console.log("metadata_json: ",metadata_json)
           // document.querySelector('#tiSeed').value = metadata_json.Seed
           // document.querySelector('#historySeedLabel').textContent = metadata_json.Seed
           // autoFillInSettings(metadata_json)
-        });
+        })
         // i++
       }
     } catch (e) {
-      console.warn(`imageSearch warning: ${e}`);
+      console.warn(`imageSearch warning: ${e}`)
     }
-  });
+  })
 document
   .getElementById("btnLoadPromptShortcut")
   .addEventListener("click", async function () {
     try {
-      prompt_shortcut = await sdapi.loadPromptShortcut();
+      prompt_shortcut = await sdapi.loadPromptShortcut()
       // var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
       // document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
-      html_manip.setPromptShortcut(prompt_shortcut); // fill the prompt shortcut textarea
-      refreshPromptMenue(); //refresh the prompt menue
+      html_manip.setPromptShortcut(prompt_shortcut) // fill the prompt shortcut textarea
+      refreshPromptMenue() //refresh the prompt menue
     } catch (e) {
-      console.warn(`loadPromptShortcut warning: ${e}`);
+      console.warn(`loadPromptShortcut warning: ${e}`)
     }
-  });
+  })
 
 document
   .getElementById("btnUpdatePromptShortcut")
@@ -2884,21 +2876,21 @@ document
     try {
       // prompt_shortcut = await sdapi.loadPromptShortcut()
       const prompt_shortcut_string =
-        document.getElementById("taPromptShortcut").value;
-      const prompt_shortcut = JSON.parse(prompt_shortcut_string);
-      var newKey = document.getElementById("KeyPromptShortcut").value;
-      var newValue = document.getElementById("ValuePromptShortcut").value;
-      console.log(newKey);
-      console.log(newValue);
-      prompt_shortcut[newKey] = newValue;
-      var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
-      console.log(JSONInPrettyFormat);
-      document.getElementById("taPromptShortcut").value = JSONInPrettyFormat;
-      refreshPromptMenue();
+        document.getElementById("taPromptShortcut").value
+      const prompt_shortcut = JSON.parse(prompt_shortcut_string)
+      var newKey = document.getElementById("KeyPromptShortcut").value
+      var newValue = document.getElementById("ValuePromptShortcut").value
+      console.log(newKey)
+      console.log(newValue)
+      prompt_shortcut[newKey] = newValue
+      var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4)
+      console.log(JSONInPrettyFormat)
+      document.getElementById("taPromptShortcut").value = JSONInPrettyFormat
+      refreshPromptMenue()
     } catch (e) {
-      console.warn(`loadPromptShortcut warning: ${e}`);
+      console.warn(`loadPromptShortcut warning: ${e}`)
     }
-  });
+  })
 
 document
   .getElementById("btnSavePromptShortcut")
@@ -2908,26 +2900,26 @@ document
         "Are you sure you want to save prompt shortcut?",
         "This will override your old prompt shortcut file, you can't undo this operation",
         ["Cancel", "Save"]
-      );
+      )
       if ((r1 || "Save") !== "Save") {
         /* cancelled or No */
-        console.log("cancel");
+        console.log("cancel")
       } else {
         /* Yes */
-        console.log("Save");
+        console.log("Save")
 
         prompt_shortcut_string =
-          document.getElementById("taPromptShortcut").value;
-        let prompt_shortcut = JSON.parse(prompt_shortcut_string);
+          document.getElementById("taPromptShortcut").value
+        let prompt_shortcut = JSON.parse(prompt_shortcut_string)
 
-        prompt_shortcut = await sdapi.savePromptShortcut(prompt_shortcut);
+        prompt_shortcut = await sdapi.savePromptShortcut(prompt_shortcut)
         // var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
-        console.log("prompt_shortcut was saved: ", prompt_shortcut);
+        console.log("prompt_shortcut was saved: ", prompt_shortcut)
       }
     } catch (e) {
-      console.warn(`savePromptShortcut warning: ${e}`);
+      console.warn(`savePromptShortcut warning: ${e}`)
     }
-  });
+  })
 
 // Hi res fix stuff
 
@@ -2946,71 +2938,71 @@ var hr_models = [
   "R-ESRGAN 4x+ Anime6B",
   "LDSR",
   "SwinIR 4x",
-];
+]
 
 for (let model of hr_models) {
   // console.log(model.title)
-  const menu_item_element = document.createElement("sp-menu-item");
-  menu_item_element.className = "hrModelsMenuItem";
-  menu_item_element.innerHTML = model;
-  document.getElementById("hrModelsMenu").appendChild(menu_item_element);
+  const menu_item_element = document.createElement("sp-menu-item")
+  menu_item_element.className = "hrModelsMenuItem"
+  menu_item_element.innerHTML = model
+  document.getElementById("hrModelsMenu").appendChild(menu_item_element)
 }
 
-var chHiResFixs = document.getElementById("chHiResFixs");
-var div = document.getElementById("HiResDiv");
+var chHiResFixs = document.getElementById("chHiResFixs")
+var div = document.getElementById("HiResDiv")
 chHiResFixs.addEventListener("change", function () {
   if (chHiResFixs.checked) {
-    div.style.display = "block";
+    div.style.display = "block"
   } else {
-    div.style.display = "none";
+    div.style.display = "none"
   }
-});
+})
 
 async function refreshPromptMenue() {
   try {
     //get the prompt_shortcut_json
     //iterate over the each entery
-    const prompt_shortcut = html_manip.getPromptShortcut();
-    const prompt_shortcut_menu = document.getElementById("mPromptShortcutMenu");
-    prompt_shortcut_menu.innerHTML = "";
+    const prompt_shortcut = html_manip.getPromptShortcut()
+    const prompt_shortcut_menu = document.getElementById("mPromptShortcutMenu")
+    prompt_shortcut_menu.innerHTML = ""
 
     for (const [key, value] of Object.entries(prompt_shortcut)) {
       if (value.trim() === "") {
         //skip empty spaces
-        continue;
+        continue
       }
-      const menu_item_element = document.createElement("sp-menu-item");
+      const menu_item_element = document.createElement("sp-menu-item")
 
-      menu_item_element.innerHTML = key;
-      prompt_shortcut_menu.appendChild(menu_item_element);
+      menu_item_element.innerHTML = key
+      prompt_shortcut_menu.appendChild(menu_item_element)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
-refreshPromptMenue();
+refreshPromptMenue()
 
 document
   .getElementById("mPromptShortcutMenu")
   .addEventListener("change", (evt) => {
-    const prompt_shortcut = html_manip.getPromptShortcut();
-    const key = evt.target.value;
-    console.log("key:", key);
-    changePromptShortcutKey(key);
-    changePromptShortcutValue(prompt_shortcut[key]);
-  });
+    const prompt_shortcut = html_manip.getPromptShortcut()
+    const key = evt.target.value
+    console.log("key:", key)
+    changePromptShortcutKey(key)
+    changePromptShortcutValue(prompt_shortcut[key])
+  })
 document
   .getElementById("btnRefreshPromptShortcutMenu")
   .addEventListener("click", () => {
-    refreshPromptMenue();
-  });
+    refreshPromptMenue()
+  })
 
 function changePromptShortcutKey(new_key) {
-  document.getElementById("KeyPromptShortcut").value = new_key;
+  document.getElementById("KeyPromptShortcut").value = new_key
 }
 function changePromptShortcutValue(new_value) {
-  document.getElementById("ValuePromptShortcut").value = new_value;
+  document.getElementById("ValuePromptShortcut").value = new_value
 }
 
 // adding a listner here for the inpaint_mask_strengh to be able to use api calls, allowing to dynamicly change the value
@@ -3018,75 +3010,75 @@ function changePromptShortcutValue(new_value) {
 document
   .querySelector("#slInpaintingMaskWeight")
   .addEventListener("input", async (evt) => {
-    const label_value = evt.target.value / 100;
+    const label_value = evt.target.value / 100
     document.getElementById(
       "lInpaintingMaskWeight"
-    ).innerHTML = `${label_value}`;
+    ).innerHTML = `${label_value}`
     // await sdapi.setInpaintMaskWeight(label_value)
-  });
+  })
 
 document
   .querySelector("#slInpaintingMaskWeight")
   .addEventListener("change", async (evt) => {
     try {
-      const label_value = evt.target.value / 100;
+      const label_value = evt.target.value / 100
       document.getElementById(
         "lInpaintingMaskWeight"
-      ).innerHTML = `${label_value}`;
-      await sdapi.setInpaintMaskWeight(label_value);
+      ).innerHTML = `${label_value}`
+      await sdapi.setInpaintMaskWeight(label_value)
 
       //get the inpaint mask weight from the webui sd
-      await g_sd_options_obj.getOptions();
+      await g_sd_options_obj.getOptions()
       const inpainting_mask_weight =
-        await g_sd_options_obj.getInpaintingMaskWeight();
+        await g_sd_options_obj.getInpaintingMaskWeight()
       // html_manip.autoFillInInpaintingMaskWeight(inpainting_mask_weight)
       // const slider_value = inpainting_mask_weight * 100
       // evt.target.value = inpainting_mask_weight * 100
       // document.getElementById('lInpaintingMaskWeight').innerHTML = `${inpainting_mask_weight}`
-      console.log("inpainting_mask_weight: ", inpainting_mask_weight);
-      html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight);
+      console.log("inpainting_mask_weight: ", inpainting_mask_weight)
+      html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight)
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 
 async function downloadIt(link) {
-  const image = await fetch(link);
-  console.log(link);
-  const storage = require("uxp").storage;
-  const fs = storage.localFileSystem;
+  const image = await fetch(link)
+  console.log(link)
+  const storage = require("uxp").storage
+  const fs = storage.localFileSystem
 
   try {
-    const img = await image.arrayBuffer();
+    const img = await image.arrayBuffer()
     // const file = await fs.getFileForSaving("image.png");
-    const folder = await storage.localFileSystem.getTemporaryFolder();
-    const file = await folder.createFile("image.png", { overwrite: true });
+    const folder = await storage.localFileSystem.getTemporaryFolder()
+    const file = await folder.createFile("image.png", { overwrite: true })
     // const file = await fs.getTempFolder()
 
-    await file.write(img);
-    const currentDocument = app.activeDocument;
-    const newDocument = await app.open(file);
+    await file.write(img)
+    const currentDocument = app.activeDocument
+    const newDocument = await app.open(file)
     if (currentDocument) {
-      await newDocument.activeLayers[0].duplicate(currentDocument);
-      await newDocument.closeWithoutSaving();
+      await newDocument.activeLayers[0].duplicate(currentDocument)
+      await newDocument.closeWithoutSaving()
     }
 
     if (!file) {
-      return;
+      return
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function downloadItExe(link) {
   await executeAsModal(async () => {
     try {
-      await downloadIt(link);
+      await downloadIt(link)
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 }
 
 document
@@ -3094,47 +3086,47 @@ document
   .addEventListener("click", async () => {
     try {
       if (psapi.isSelectionValid(g_selection)) {
-        await psapi.reSelectMarqueeExe(g_selection);
-        await eventHandler();
+        await psapi.reSelectMarqueeExe(g_selection)
+        await eventHandler()
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
-  });
+  })
 
 function addPresetMenuItem(preset_title) {
   // console.log(model_title,model_name)
-  const menu_item_element = document.createElement("sp-menu-item");
-  menu_item_element.className = "mPresetMenuItem";
-  menu_item_element.innerHTML = preset_title;
+  const menu_item_element = document.createElement("sp-menu-item")
+  menu_item_element.className = "mPresetMenuItem"
+  menu_item_element.innerHTML = preset_title
 
   // menu_item_element.addEventListener('select',()=>{
   //   preset_func(g_ui_settings)
   // })
-  return menu_item_element;
+  return menu_item_element
 }
 
 function populatePresetMenu() {
-  const divider_elem = document.createElement("sp-menu-divider");
-  const preset_name = "Select Smart Preset";
-  const preset_func = () => {};
-  const dummy_preset_item = addPresetMenuItem(preset_name, preset_func);
-  dummy_preset_item.setAttribute("selected", "selected");
+  const divider_elem = document.createElement("sp-menu-divider")
+  const preset_name = "Select Smart Preset"
+  const preset_func = () => {}
+  const dummy_preset_item = addPresetMenuItem(preset_name, preset_func)
+  dummy_preset_item.setAttribute("selected", "selected")
   // dummy_preset_item.setAttribute('disabled')
-  document.getElementById("mPresetMenu").appendChild(dummy_preset_item);
-  document.getElementById("mPresetMenu").appendChild(divider_elem);
+  document.getElementById("mPresetMenu").appendChild(dummy_preset_item)
+  document.getElementById("mPresetMenu").appendChild(divider_elem)
   for ([key, value] of Object.entries(ui.loadedPresets)) {
-    const preset_menu_item = addPresetMenuItem(key, value);
-    document.getElementById("mPresetMenu").appendChild(preset_menu_item);
+    const preset_menu_item = addPresetMenuItem(key, value)
+    document.getElementById("mPresetMenu").appendChild(preset_menu_item)
   }
 }
 
-populatePresetMenu();
+populatePresetMenu()
 document.getElementById("mPresetMenu").addEventListener("change", (evt) => {
-  const preset_index = evt.target.selectedIndex;
-  const preset_name = evt.target.options[preset_index].textContent;
+  const preset_index = evt.target.selectedIndex
+  const preset_name = evt.target.options[preset_index].textContent
   if (ui.loadedPresets.hasOwnProperty(preset_name)) {
-    const loader = ui.loadedPresets[preset_name];
-    loader(g_ui_settings);
+    const loader = ui.loadedPresets[preset_name]
+    loader(g_ui_settings)
   }
-});
+})
diff --git a/outpaint.js b/outpaint.js
index d8303b7..cd5d952 100644
--- a/outpaint.js
+++ b/outpaint.js
@@ -1,7 +1,7 @@
-const app = window.require("photoshop").app;
+const app = window.require("photoshop").app
 
-const batchPlay = require("photoshop").action.batchPlay;
-const psapi = require("./psapi");
+const batchPlay = require("photoshop").action.batchPlay
+const psapi = require("./psapi")
 
 // async function moveToGroupCommand (to_index, layerIDs) {
 //   const batchPlay = require('photoshop').action.batchPlay
@@ -39,27 +39,27 @@ const psapi = require("./psapi");
 // }
 
 async function moveLayersToGroup(group_id) {
-  const activeLayers = await app.activeDocument.activeLayers;
-  const layerIDs = activeLayers.map((layer) => layer.id);
-  const { executeAsModal } = require("photoshop").core;
+  const activeLayers = await app.activeDocument.activeLayers
+  const layerIDs = activeLayers.map((layer) => layer.id)
+  const { executeAsModal } = require("photoshop").core
   await executeAsModal(async () => {
-    await psapi.moveToGroupCommand(group_id, layerIDs);
-  });
+    await psapi.moveToGroupCommand(group_id, layerIDs)
+  })
 }
 
 async function createSnapshot() {
-  const { executeAsModal } = require("photoshop").core;
+  const { executeAsModal } = require("photoshop").core
   //get all layers,
   //duplicate the layers
   //create a group
   //move the duplicate layers to the group
-  let snapshotLayer, snapshotGroup;
+  let snapshotLayer, snapshotGroup
   try {
-    const selectionInfo = await psapi.getSelectionInfoExe();
-    await psapi.unSelectMarqueeExe();
+    const selectionInfo = await psapi.getSelectionInfoExe()
+    await psapi.unSelectMarqueeExe()
 
     //get all layers
-    const allLayers = await app.activeDocument.layers;
+    const allLayers = await app.activeDocument.layers
 
     // const allLayerNames = allLayers.map(
     //     layer => `${layer.name} (${layer.opacity} %)`
@@ -68,69 +68,69 @@ async function createSnapshot() {
     //     console.log(layer)
     // }
     //duplicate the layers
-    let duplicatedLayers = [];
+    let duplicatedLayers = []
 
     // const group_id = await createGroup()
-    const groupLayer = await psapi.createEmptyGroup();
+    const groupLayer = await psapi.createEmptyGroup()
 
-    console.log("createSnapshot(), group_id:", groupLayer.id);
+    console.log("createSnapshot(), group_id:", groupLayer.id)
     // let bHasBackground = false
-    let indexOffset = 0;
+    let indexOffset = 0
 
     const result1 = await executeAsModal(async () => {
       for (layer of allLayers) {
         if (layer.id == 1) {
           //skip the background layer
           // bHasBackground = true
-          indexOffset = 1;
-          continue;
+          indexOffset = 1
+          continue
         }
         if (layer.visible) {
-          const copyLayer = await layer.duplicate();
-          duplicatedLayers.push(copyLayer);
+          const copyLayer = await layer.duplicate()
+          duplicatedLayers.push(copyLayer)
         }
       }
 
-      const layerIDs = duplicatedLayers.map((layer) => layer.id);
-      console.log("createSnapshot, layerIDs:", layerIDs);
+      const layerIDs = duplicatedLayers.map((layer) => layer.id)
+      console.log("createSnapshot, layerIDs:", layerIDs)
 
       //select the layer since layerIDs don't seem to have an affect on moveToGroupCommand(), don't know why!!!!
-      psapi.selectLayers(duplicatedLayers);
-      let group_index = await psapi.getLayerIndex(groupLayer.id);
+      psapi.selectLayers(duplicatedLayers)
+      let group_index = await psapi.getLayerIndex(groupLayer.id)
 
-      await psapi.moveToGroupCommand(group_index - indexOffset, layerIDs);
+      await psapi.moveToGroupCommand(group_index - indexOffset, layerIDs)
 
-      await psapi.collapseGroup(duplicatedLayers[0]);
-      snapshotLayer = app.activeDocument.activeLayers[0];
-      await psapi.createSolidLayer(255, 255, 255);
-      const whiteSolidLayer = app.activeDocument.activeLayers[0];
-      await snapshotLayer.moveAbove(whiteSolidLayer);
-      snapshotGroup = await psapi.createEmptyGroup();
-      let snapshot_group_index = await psapi.getLayerIndex(snapshotGroup.id);
+      await psapi.collapseGroup(duplicatedLayers[0])
+      snapshotLayer = app.activeDocument.activeLayers[0]
+      await psapi.createSolidLayer(255, 255, 255)
+      const whiteSolidLayer = app.activeDocument.activeLayers[0]
+      await snapshotLayer.moveAbove(whiteSolidLayer)
+      snapshotGroup = await psapi.createEmptyGroup()
+      let snapshot_group_index = await psapi.getLayerIndex(snapshotGroup.id)
 
-      await psapi.selectLayers([snapshotLayer, whiteSolidLayer]);
-      await psapi.moveToGroupCommand(snapshot_group_index - indexOffset, []);
-      await psapi.selectLayers([snapshotGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createMaskExe();
+      await psapi.selectLayers([snapshotLayer, whiteSolidLayer])
+      await psapi.moveToGroupCommand(snapshot_group_index - indexOffset, [])
+      await psapi.selectLayers([snapshotGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createMaskExe()
       //   await psapi.selectLayerChannelCommand()
       //   await psapi.createSolidLayer(0, 0, 0)
-    });
+    })
 
-    return [snapshotLayer, snapshotGroup];
+    return [snapshotLayer, snapshotGroup]
   } catch (e) {
-    console.warn("createSnapshot Error:", e);
+    console.warn("createSnapshot Error:", e)
   }
 }
 
 function executeCommand(batchPlayCommandFunc) {
-  const { executeAsModal } = require("photoshop").core;
+  const { executeAsModal } = require("photoshop").core
   try {
     executeAsModal(async () => {
-      await batchPlayCommandFunc();
-    });
+      await batchPlayCommandFunc()
+    })
   } catch (e) {
-    console.warn("executeCommand error:", e);
+    console.warn("executeCommand error:", e)
   }
 }
 
@@ -142,61 +142,61 @@ async function snapAndFillExe(session_id) {
   //set mask image
 
   try {
-    let snapAndFillLayers = [];
+    let snapAndFillLayers = []
     await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe();
+      const selectionInfo = await psapi.getSelectionInfoExe()
       // await psapi.unSelectMarqueeExe()
 
       //create a snapshot of canvas
       // let [snapshotLayer,snapshotGroup] =  await createSnapshot()
-      await psapi.snapshot_layerExe();
-      const snapshotLayer = await app.activeDocument.activeLayers[0];
-      const snapshotGroup = await psapi.createEmptyGroup();
-      snapshotLayer.name = "Init Image Snapshot -- temporary";
-      snapshotGroup.name = "Init Image Group -- temporary";
+      await psapi.snapshot_layerExe()
+      const snapshotLayer = await app.activeDocument.activeLayers[0]
+      const snapshotGroup = await psapi.createEmptyGroup()
+      snapshotLayer.name = "Init Image Snapshot -- temporary"
+      snapshotGroup.name = "Init Image Group -- temporary"
 
       // snapshotGroup.name = `${snapshotGroup.name}_init_image`
-      await psapi.createSolidLayer(255, 255, 255);
-      const whiteSolidLayer = await app.activeDocument.activeLayers[0];
-      whiteSolidLayer.name = "Background Color -- temporary";
-      snapshotLayer.moveAbove(whiteSolidLayer);
+      await psapi.createSolidLayer(255, 255, 255)
+      const whiteSolidLayer = await app.activeDocument.activeLayers[0]
+      whiteSolidLayer.name = "Background Color -- temporary"
+      snapshotLayer.moveAbove(whiteSolidLayer)
       console.log("[snapshotLayer,snapshotGroup]:", [
         snapshotLayer,
         snapshotGroup,
-      ]);
+      ])
 
       //create a snapshot of mask
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
       // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
 
-      await psapi.selectLayers([snapshotGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
+      await psapi.selectLayers([snapshotGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
 
-      await psapi.selectLayers([snapshotGroup]);
+      await psapi.selectLayers([snapshotGroup])
 
-      snapAndFillLayers = [snapshotLayer, snapshotGroup, whiteSolidLayer];
+      snapAndFillLayers = [snapshotLayer, snapshotGroup, whiteSolidLayer]
 
       // g_init_image_related_layers['init_image_group'] = snapshotGroup
       // g_init_image_related_layers['init_image_layer'] = snapshotLayer
       // g_init_image_related_layers['solid_white'] = whiteSolidLayer
 
-      const image_name = await psapi.setInitImage(snapshotGroup, session_id);
-      const path = `./server/python_server/init_images/${image_name}`;
+      const image_name = await psapi.setInitImage(snapshotGroup, session_id)
+      const path = `./server/python_server/init_images/${image_name}`
 
       g_viewer_manager.initializeInitImage(
         snapshotGroup,
         snapshotLayer,
         whiteSolidLayer,
         path
-      ); //this will be called once a session and will add the first init image to th viewer manager
+      ) //this will be called once a session and will add the first init image to th viewer manager
 
       for (layer of snapAndFillLayers) {
-        layer.visible = false;
+        layer.visible = false
       }
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      const util_layer = require("./utility/layer");
-      await util_layer.collapseFolderExe([snapshotGroup], false);
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      const util_layer = require("./utility/layer")
+      await util_layer.collapseFolderExe([snapshotGroup], false)
 
       //   function timeout(ms) {
       //     return new Promise(resolve => setTimeout(resolve, ms));
@@ -219,13 +219,13 @@ async function snapAndFillExe(session_id) {
       //             }
       //           }
       // sleep(saveAndHide)
-    });
-    console.log("snapAndFillLayers: ", snapAndFillLayers);
-    return snapAndFillLayers;
+    })
+    console.log("snapAndFillLayers: ", snapAndFillLayers)
+    return snapAndFillLayers
   } catch (e) {
-    console.error(`snapAndFill error: ${e}`);
+    console.error(`snapAndFill error: ${e}`)
   }
-  return [];
+  return []
 }
 
 async function outpaintFasterExe(session_id) {
@@ -236,67 +236,67 @@ async function outpaintFasterExe(session_id) {
   //set mask image
 
   try {
-    let outpaintLayers = [];
+    let outpaintLayers = []
     await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe();
+      const selectionInfo = await psapi.getSelectionInfoExe()
       // await psapi.unSelectMarqueeExe()
 
       //create a snapshot of canvas
       // let [snapshotLayer,snapshotGroup] =  await createSnapshot()
-      await psapi.snapshot_layerExe();
-      const snapshotLayer = await app.activeDocument.activeLayers[0];
-      snapshotLayer.name = "Init Image Snapshot -- temporary";
-      const snapshotGroup = await psapi.createEmptyGroup();
+      await psapi.snapshot_layerExe()
+      const snapshotLayer = await app.activeDocument.activeLayers[0]
+      snapshotLayer.name = "Init Image Snapshot -- temporary"
+      const snapshotGroup = await psapi.createEmptyGroup()
       // snapshotGroup.name = `${snapshotGroup.name}_init_image`
-      snapshotGroup.name = "Init Image Group -- temporary";
-      await psapi.createSolidLayer(255, 255, 255);
-      const whiteSolidLayer = await app.activeDocument.activeLayers[0];
-      whiteSolidLayer.name = "Background Color -- temporary";
-      snapshotLayer.moveAbove(whiteSolidLayer);
+      snapshotGroup.name = "Init Image Group -- temporary"
+      await psapi.createSolidLayer(255, 255, 255)
+      const whiteSolidLayer = await app.activeDocument.activeLayers[0]
+      whiteSolidLayer.name = "Background Color -- temporary"
+      snapshotLayer.moveAbove(whiteSolidLayer)
       console.log("[snapshotLayer,snapshotGroup]:", [
         snapshotLayer,
         snapshotGroup,
-      ]);
+      ])
 
       //select opaque pixel and create black fill layer
-      await psapi.selectLayersExe([snapshotLayer]);
-      await psapi.selectLayerChannelCommand();
-      const snapshotMaskGroup = await psapi.createEmptyGroup();
+      await psapi.selectLayersExe([snapshotLayer])
+      await psapi.selectLayerChannelCommand()
+      const snapshotMaskGroup = await psapi.createEmptyGroup()
 
-      await psapi.createSolidLayer(0, 0, 0);
-      let solid_black_layer = app.activeDocument.activeLayers[0];
+      await psapi.createSolidLayer(0, 0, 0)
+      let solid_black_layer = app.activeDocument.activeLayers[0]
       //create a snapshot of mask
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
       // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
-      await psapi.snapshot_layerExe();
-      const snapshotMaskLayer = await app.activeDocument.activeLayers[0];
-      snapshotMaskLayer.name = "Mask -- Paint White to Mask -- temporary";
+      await psapi.snapshot_layerExe()
+      const snapshotMaskLayer = await app.activeDocument.activeLayers[0]
+      snapshotMaskLayer.name = "Mask -- Paint White to Mask -- temporary"
       // const snapshotMaskGroup = await psapi.createEmptyGroup()
 
       // snapshotMaskGroup.name = `${snapshotMaskGroup.name}_mask`
-      snapshotMaskGroup.name = "Mask Group -- temporary";
-      snapshotMaskLayer.moveBelow(solid_black_layer);
-      await snapshotMaskGroup.moveAbove(snapshotGroup);
-      await solid_black_layer.delete(); // should we await for the deletion?
+      snapshotMaskGroup.name = "Mask Group -- temporary"
+      snapshotMaskLayer.moveBelow(solid_black_layer)
+      await snapshotMaskGroup.moveAbove(snapshotGroup)
+      await solid_black_layer.delete() // should we await for the deletion?
 
-      await psapi.selectLayers([snapshotGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
-      await psapi.selectLayers([snapshotGroup]);
+      await psapi.selectLayers([snapshotGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
+      await psapi.selectLayers([snapshotGroup])
 
-      const image_name = await psapi.setInitImage(snapshotGroup, session_id);
-      const path = `./server/python_server/init_images/${image_name}`;
+      const image_name = await psapi.setInitImage(snapshotGroup, session_id)
+      const path = `./server/python_server/init_images/${image_name}`
 
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      await psapi.selectLayers([snapshotMaskGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
-      await psapi.selectLayers([snapshotMaskGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.selectLayers([snapshotMaskGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
+      await psapi.selectLayers([snapshotMaskGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      await psapi.setInitImageMask(snapshotMaskGroup, session_id);
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.setInitImageMask(snapshotMaskGroup, session_id)
+      await psapi.reSelectMarqueeExe(selectionInfo)
       //set initial image
       //set mask image
       outpaintLayers = [
@@ -305,7 +305,7 @@ async function outpaintFasterExe(session_id) {
         snapshotLayer,
         snapshotGroup,
         whiteSolidLayer,
-      ];
+      ]
       // g_mask_related_layers['mask_group'] = snapshotMaskGroup
       // g_mask_related_layers['white_mark'] = snapshotMaskLayer
       // // g_mask_related_layers['solid_black'] = blackSolidLayer
@@ -314,7 +314,7 @@ async function outpaintFasterExe(session_id) {
         snapshotMaskLayer,
         null,
         path
-      );
+      )
       // g_init_image_related_layers['init_image_group'] = snapshotGroup
       // g_init_image_related_layers['init_image_layer'] = snapshotLayer
       // g_init_image_related_layers['solid_white'] = whiteSolidLayer
@@ -324,31 +324,31 @@ async function outpaintFasterExe(session_id) {
         snapshotLayer,
         whiteSolidLayer,
         path
-      ); //this will be called once a session and will add the first init image to th viewer manager
+      ) //this will be called once a session and will add the first init image to th viewer manager
       for (layer of outpaintLayers) {
-        layer.visible = false;
+        layer.visible = false
       }
 
       //collapse the folders
-      const util_layer = require("./utility/layer");
+      const util_layer = require("./utility/layer")
       await util_layer.collapseFolderExe(
         [snapshotGroup, snapshotMaskGroup],
         false
-      );
-    });
-    console.log("outpaintLayers 2: ", outpaintLayers);
-    return outpaintLayers;
+      )
+    })
+    console.log("outpaintLayers 2: ", outpaintLayers)
+    return outpaintLayers
   } catch (e) {
-    console.error(`outpaintFasterExe error: ${e}`);
+    console.error(`outpaintFasterExe error: ${e}`)
   }
-  return [];
+  return []
 }
 async function addClippingMaskToLayer(layer, selectionInfo) {
-  await psapi.selectLayers([layer]); //select the layer
-  await psapi.reSelectMarqueeExe(selectionInfo); //reselect the selection
-  await psapi.createClippingMaskExe(); //this will create an cliping mask and select the mask of the layer
-  await psapi.selectLayers([layer]); //reselect the layer instead of the mask
-  await psapi.reSelectMarqueeExe(selectionInfo); //reselect the selection
+  await psapi.selectLayers([layer]) //select the layer
+  await psapi.reSelectMarqueeExe(selectionInfo) //reselect the selection
+  await psapi.createClippingMaskExe() //this will create an cliping mask and select the mask of the layer
+  await psapi.selectLayers([layer]) //reselect the layer instead of the mask
+  await psapi.reSelectMarqueeExe(selectionInfo) //reselect the selection
 
   ////test addClippingMaskToLayer
   // await executeAsModal(
@@ -365,70 +365,70 @@ async function outpaintExe(session_id) {
   //set mask image
 
   try {
-    let outpaintLayers = [];
+    let outpaintLayers = []
     await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe();
+      const selectionInfo = await psapi.getSelectionInfoExe()
       // await psapi.unSelectMarqueeExe()
 
       //create a snapshot of canvas
       // let [snapshotLayer,snapshotGroup] =  await createSnapshot()
-      await psapi.snapshot_layerExe();
-      const snapshotLayer = await app.activeDocument.activeLayers[0];
-      snapshotLayer.name = "Init Image Snapshot -- temporary";
-      const snapshotGroup = await psapi.createEmptyGroup();
+      await psapi.snapshot_layerExe()
+      const snapshotLayer = await app.activeDocument.activeLayers[0]
+      snapshotLayer.name = "Init Image Snapshot -- temporary"
+      const snapshotGroup = await psapi.createEmptyGroup()
       // snapshotGroup.name = `${snapshotGroup.name}_init_image`
-      snapshotGroup.name = "Init Image Group -- temporary";
-      await psapi.createSolidLayer(255, 255, 255); //solid white inside the Init Image Group
-      const whiteSolidLayer = await app.activeDocument.activeLayers[0];
-      whiteSolidLayer.name = "Background Color -- temporary";
-      snapshotLayer.moveAbove(whiteSolidLayer); //move the snapshot layer to be the first layer in "Init Image Group"
+      snapshotGroup.name = "Init Image Group -- temporary"
+      await psapi.createSolidLayer(255, 255, 255) //solid white inside the Init Image Group
+      const whiteSolidLayer = await app.activeDocument.activeLayers[0]
+      whiteSolidLayer.name = "Background Color -- temporary"
+      snapshotLayer.moveAbove(whiteSolidLayer) //move the snapshot layer to be the first layer in "Init Image Group"
       console.log("[snapshotLayer,snapshotGroup]:", [
         snapshotLayer,
         snapshotGroup,
-      ]);
+      ])
 
       //select opaque pixel and create black fill layer
-      await psapi.selectLayers([snapshotLayer]);
-      await psapi.selectLayerChannelCommand();
-      const snapshotMaskGroup = await psapi.createEmptyGroup();
+      await psapi.selectLayers([snapshotLayer])
+      await psapi.selectLayerChannelCommand()
+      const snapshotMaskGroup = await psapi.createEmptyGroup()
 
-      await psapi.createSolidLayer(0, 0, 0);
-      let solid_black_layer = app.activeDocument.activeLayers[0];
+      await psapi.createSolidLayer(0, 0, 0)
+      let solid_black_layer = app.activeDocument.activeLayers[0]
       //create a snapshot of mask
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
       // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
-      await psapi.snapshot_layerExe();
-      const snapshotMaskLayer = await app.activeDocument.activeLayers[0];
-      snapshotMaskLayer.name = "Mask -- Paint White to Mask -- temporary";
+      await psapi.snapshot_layerExe()
+      const snapshotMaskLayer = await app.activeDocument.activeLayers[0]
+      snapshotMaskLayer.name = "Mask -- Paint White to Mask -- temporary"
       // const snapshotMaskGroup = await psapi.createEmptyGroup()
 
       // snapshotMaskGroup.name = `${snapshotMaskGroup.name}_mask`
-      snapshotMaskGroup.name = "Mask Group -- temporary";
-      snapshotMaskLayer.moveBelow(solid_black_layer);
-      await snapshotMaskGroup.moveAbove(snapshotGroup);
-      await solid_black_layer.delete(); //
+      snapshotMaskGroup.name = "Mask Group -- temporary"
+      snapshotMaskLayer.moveBelow(solid_black_layer)
+      await snapshotMaskGroup.moveAbove(snapshotGroup)
+      await solid_black_layer.delete() //
 
-      await addClippingMaskToLayer(snapshotGroup, selectionInfo);
+      await addClippingMaskToLayer(snapshotGroup, selectionInfo)
 
       const init_image_name = await psapi.setInitImage(
         snapshotGroup,
         session_id
-      );
-      const init_path = `./server/python_server/init_images/${init_image_name}`;
+      )
+      const init_path = `./server/python_server/init_images/${init_image_name}`
 
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      await addClippingMaskToLayer(snapshotMaskGroup, selectionInfo);
+      await addClippingMaskToLayer(snapshotMaskGroup, selectionInfo)
 
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
       // await psapi.setInitImageMask(snapshotMaskGroup,session_id)
       const mask_name = await psapi.setInitImageMask(
         snapshotMaskGroup,
         session_id
-      );
-      const mask_path = `./server/python_server/init_images/${mask_name}`;
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      )
+      const mask_path = `./server/python_server/init_images/${mask_name}`
+      await psapi.reSelectMarqueeExe(selectionInfo)
       //set initial image
       //set mask image
       outpaintLayers = [
@@ -437,7 +437,7 @@ async function outpaintExe(session_id) {
         snapshotLayer,
         snapshotGroup,
         whiteSolidLayer,
-      ];
+      ]
       // g_mask_related_layers['mask_group'] = snapshotMaskGroup
       // g_mask_related_layers['white_mark'] = snapshotMaskLayer
       // // g_mask_related_layers['solid_black'] = blackSolidLayer
@@ -446,7 +446,7 @@ async function outpaintExe(session_id) {
         snapshotMaskLayer,
         null,
         mask_path
-      );
+      )
       // g_init_image_related_layers['init_image_group'] = snapshotGroup
       // g_init_image_related_layers['init_image_layer'] = snapshotLayer
       // g_init_image_related_layers['solid_white'] = whiteSolidLayer
@@ -455,25 +455,25 @@ async function outpaintExe(session_id) {
         snapshotLayer,
         whiteSolidLayer,
         init_path
-      ); //this will be called once a session and will add the first init image to th viewer manager
+      ) //this will be called once a session and will add the first init image to th viewer manager
 
       for (layer of outpaintLayers) {
-        layer.visible = false;
+        layer.visible = false
       }
 
       //collapse the folders
-      const util_layer = require("./utility/layer");
+      const util_layer = require("./utility/layer")
       await util_layer.collapseFolderExe(
         [snapshotGroup, snapshotMaskGroup],
         false
-      );
-    });
-    console.log("outpaintLayers 2: ", outpaintLayers);
-    return outpaintLayers;
+      )
+    })
+    console.log("outpaintLayers 2: ", outpaintLayers)
+    return outpaintLayers
   } catch (e) {
-    console.error(`outpaintExe error: ${e}`);
+    console.error(`outpaintExe error: ${e}`)
   }
-  return [];
+  return []
 }
 
 async function inpaintFasterExe(session_id) {
@@ -484,57 +484,57 @@ async function inpaintFasterExe(session_id) {
   //set initial image
   //set mask image
   try {
-    let inpaintLayers = [];
+    let inpaintLayers = []
     await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe();
+      const selectionInfo = await psapi.getSelectionInfoExe()
 
       //hide the current white mark mask layer
-      const white_mark_layer = await app.activeDocument.activeLayers[0];
-      await psapi.selectLayers([white_mark_layer]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      const white_mark_layer = await app.activeDocument.activeLayers[0]
+      await psapi.selectLayers([white_mark_layer])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      white_mark_layer.visible = false;
-      white_mark_layer.name = "Mask -- Paint White to Mask -- temporary";
+      white_mark_layer.visible = false
+      white_mark_layer.name = "Mask -- Paint White to Mask -- temporary"
       // white_mark_layer.visible = true
 
       //create a snapshot of canvas
 
       // let [snapshotLayer,snapshotGroup] =  await createSnapshot()
       // await psapi.snapshot_layer()
-      await psapi.unselectActiveLayersExe(); //invisible layer will cause problem with merging "command is not available" type of error
+      await psapi.unselectActiveLayersExe() //invisible layer will cause problem with merging "command is not available" type of error
       // await psapi.mergeVisibleExe()
-      await psapi.snapshot_layerExe();
+      await psapi.snapshot_layerExe()
 
-      const snapshotLayer = await app.activeDocument.activeLayers[0];
-      snapshotLayer.name = "Init Image Snapshot -- temporary";
-      const snapshotGroup = await psapi.createEmptyGroup();
-      snapshotGroup.name = "Init Image Group -- temporary";
-      await psapi.createSolidLayer(255, 255, 255);
-      const whiteSolidLayer = await app.activeDocument.activeLayers[0];
-      whiteSolidLayer.name = "Background Color -- temporary";
-      await snapshotLayer.moveAbove(whiteSolidLayer);
+      const snapshotLayer = await app.activeDocument.activeLayers[0]
+      snapshotLayer.name = "Init Image Snapshot -- temporary"
+      const snapshotGroup = await psapi.createEmptyGroup()
+      snapshotGroup.name = "Init Image Group -- temporary"
+      await psapi.createSolidLayer(255, 255, 255)
+      const whiteSolidLayer = await app.activeDocument.activeLayers[0]
+      whiteSolidLayer.name = "Background Color -- temporary"
+      await snapshotLayer.moveAbove(whiteSolidLayer)
 
-      await psapi.selectLayers([snapshotGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.selectLayers([snapshotGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      const maskGroup = await psapi.createEmptyGroup();
+      const maskGroup = await psapi.createEmptyGroup()
       // maskGroup.name = `${maskGroup.name}_mask`
 
-      maskGroup.name = "Mask Group -- temporary";
+      maskGroup.name = "Mask Group -- temporary"
 
-      await psapi.createSolidLayer(0, 0, 0);
-      const blackSolidLayer = await app.activeDocument.activeLayers[0];
-      blackSolidLayer.name = "Don't Edit -- temporary";
+      await psapi.createSolidLayer(0, 0, 0)
+      const blackSolidLayer = await app.activeDocument.activeLayers[0]
+      blackSolidLayer.name = "Don't Edit -- temporary"
       // snapshotLayer.moveAbove(blackSolidLayer)
-      white_mark_layer.moveAbove(blackSolidLayer);
-      white_mark_layer.visible = true;
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      white_mark_layer.moveAbove(blackSolidLayer)
+      white_mark_layer.visible = true
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
-      console.log("[snapshotLayer,maskGroup]:", [snapshotLayer, maskGroup]);
+      console.log("[snapshotLayer,maskGroup]:", [snapshotLayer, maskGroup])
       // //select opaque pixel and create black fill layer
       // await psapi.selectLayers([snapshotLayer])
       // await psapi.selectLayerChannelCommand()
@@ -554,31 +554,31 @@ async function inpaintFasterExe(session_id) {
       // await snapshotMaskGroup.moveAbove(snapshotGroup)
       // solid_black_layer.delete()
 
-      await psapi.selectLayers([maskGroup]);
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.createClippingMaskExe();
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.selectLayers([maskGroup])
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.createClippingMaskExe()
+      await psapi.reSelectMarqueeExe(selectionInfo)
 
       // await psapi.selectLayers([snapshotGroup])
 
-      await psapi.selectLayers([maskGroup]);
+      await psapi.selectLayers([maskGroup])
       // await psapi.setInitImageMask(maskGroup,session_id)
-      const mask_name = await psapi.setInitImageMask(maskGroup, session_id);
-      const mask_path = `./server/python_server/init_images/${mask_name}`;
+      const mask_name = await psapi.setInitImageMask(maskGroup, session_id)
+      const mask_path = `./server/python_server/init_images/${mask_name}`
 
-      await psapi.reSelectMarqueeExe(selectionInfo);
-      await psapi.selectLayers([snapshotGroup]);
+      await psapi.reSelectMarqueeExe(selectionInfo)
+      await psapi.selectLayers([snapshotGroup])
 
-      const image_name = await psapi.setInitImage(snapshotGroup, session_id);
-      const path = `./server/python_server/init_images/${image_name}`;
+      const image_name = await psapi.setInitImage(snapshotGroup, session_id)
+      const path = `./server/python_server/init_images/${image_name}`
 
-      await psapi.reSelectMarqueeExe(selectionInfo);
+      await psapi.reSelectMarqueeExe(selectionInfo)
       // await psapi.selectLayers([snapshotMaskGroup])
       // await psapi.setInitImageMask(snapshotMaskGroup)
       // //set initial image
       // //set mask image
 
-      await psapi.selectLayers([maskGroup]);
+      await psapi.selectLayers([maskGroup])
       inpaintLayers = [
         maskGroup,
         white_mark_layer,
@@ -586,7 +586,7 @@ async function inpaintFasterExe(session_id) {
         snapshotGroup,
         snapshotLayer,
         whiteSolidLayer,
-      ];
+      ]
       // g_mask_related_layers['mask_group'] = maskGroup
       // g_mask_related_layers['white_mark'] = white_mark_layer
       // g_mask_related_layers['solid_black'] = blackSolidLayer
@@ -595,7 +595,7 @@ async function inpaintFasterExe(session_id) {
         white_mark_layer,
         blackSolidLayer,
         mask_path
-      );
+      )
       // g_init_image_related_layers['init_image_group'] = snapshotGroup
       // g_init_image_related_layers['init_image_layer'] = snapshotLayer
       // g_init_image_related_layers['solid_white'] = whiteSolidLayer
@@ -604,19 +604,19 @@ async function inpaintFasterExe(session_id) {
         snapshotLayer,
         whiteSolidLayer,
         path
-      ); //this will be called once a session and will add the first init image to th viewer manager
+      ) //this will be called once a session and will add the first init image to th viewer manager
       for (layer of inpaintLayers) {
-        layer.visible = false;
+        layer.visible = false
       }
-      const util_layer = require("./utility/layer");
+      const util_layer = require("./utility/layer")
 
-      await util_layer.collapseFolderExe([snapshotGroup, maskGroup], false);
-    });
-    return inpaintLayers;
+      await util_layer.collapseFolderExe([snapshotGroup, maskGroup], false)
+    })
+    return inpaintLayers
   } catch (e) {
-    console.warn("inpaintFasterExe error:", e);
+    console.warn("inpaintFasterExe error:", e)
   }
-  return [];
+  return []
 }
 module.exports = {
   createSnapshot,
@@ -628,4 +628,4 @@ module.exports = {
   inpaintFasterExe,
   snapAndFillExe,
   addClippingMaskToLayer,
-};
+}
diff --git a/psapi.js b/psapi.js
index 14b7f02..3c5c727 100644
--- a/psapi.js
+++ b/psapi.js
@@ -1,12 +1,12 @@
-const app = window.require("photoshop").app;
-const batchPlay = require("photoshop").action.batchPlay;
-const { executeAsModal } = require("photoshop").core;
-const export_png = require("./export_png");
-const { selectionToFinalWidthHeight } = require("./selection");
+const app = window.require("photoshop").app
+const batchPlay = require("photoshop").action.batchPlay
+const { executeAsModal } = require("photoshop").core
+const export_png = require("./export_png")
+const { selectionToFinalWidthHeight } = require("./selection")
 // const { layerToSelection } = require('./helper')
 
-const storage = require("uxp").storage;
-const fs = storage.localFileSystem;
+const storage = require("uxp").storage
+const fs = storage.localFileSystem
 
 async function createSolidLayer(r, g, b) {
   await executeAsModal(async () => {
@@ -40,8 +40,8 @@ async function createSolidLayer(r, g, b) {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
-  });
+    )
+  })
 }
 
 async function makeGroupCommand() {
@@ -66,27 +66,27 @@ async function makeGroupCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  console.log("makeGroupCommand: ", result);
+  console.log("makeGroupCommand: ", result)
 
-  return result;
+  return result
 }
 async function createEmptyGroup(name = "New Group") {
-  let groupLayer;
+  let groupLayer
   await executeAsModal(async () => {
-    await makeGroupCommand();
-    groupLayer = app.activeDocument.activeLayers[0];
-    groupLayer.name = name;
-  });
-  console.log("groupLayer:", groupLayer);
-  return groupLayer;
+    await makeGroupCommand()
+    groupLayer = app.activeDocument.activeLayers[0]
+    groupLayer.name = name
+  })
+  console.log("groupLayer:", groupLayer)
+  return groupLayer
 }
 
 async function moveToGroupCommand(to_index, layerIDs) {
-  const batchPlay = require("photoshop").action.batchPlay;
-  console.log("to_index:", to_index);
-  console.log("layerIDs:", layerIDs);
+  const batchPlay = require("photoshop").action.batchPlay
+  console.log("to_index:", to_index)
+  console.log("layerIDs:", layerIDs)
 
   const result = await batchPlay(
     [
@@ -115,15 +115,15 @@ async function moveToGroupCommand(to_index, layerIDs) {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 }
 function MoveToGroupExe(toIndex, layerIDs) {
   try {
     executeAsModal(async () => {
-      await moveToGroupCommand(toIndex, layerIDs);
-    });
+      await moveToGroupCommand(toIndex, layerIDs)
+    })
   } catch (e) {
-    console.warn("executeCommand error:", e);
+    console.warn("executeCommand error:", e)
   }
 }
 
@@ -148,67 +148,67 @@ async function getIndexCommand(layer_id) {
       },
     ],
     { synchronousExecution: true }
-  )[0]["itemIndex"];
-  console.log("index:", idx);
-  return idx;
+  )[0]["itemIndex"]
+  console.log("index:", idx)
+  return idx
 }
 
 async function getLayerIndex(layer_id) {
-  const { executeAsModal } = require("photoshop").core;
+  const { executeAsModal } = require("photoshop").core
   try {
-    let index;
+    let index
     await executeAsModal(async () => {
-      index = await getIndexCommand(layer_id);
-      console.log("getIndex: ", index);
-    });
-    return index;
+      index = await getIndexCommand(layer_id)
+      console.log("getIndex: ", index)
+    })
+    return index
   } catch (e) {
-    console.warn("getIndex error:", e);
+    console.warn("getIndex error:", e)
   }
 }
 
 async function unselectActiveLayers() {
-  const layers = await app.activeDocument.activeLayers;
+  const layers = await app.activeDocument.activeLayers
   for (layer of layers) {
-    layer.selected = false;
+    layer.selected = false
   }
 }
 async function unselectActiveLayersExe() {
   await executeAsModal(async () => {
-    await unselectActiveLayers();
-  });
+    await unselectActiveLayers()
+  })
 }
 async function selectLayers(layers) {
-  await unselectActiveLayers();
+  await unselectActiveLayers()
   for (layer of layers) {
     try {
       if (layer) {
-        const is_visible = layer.visible; // don't change the visibility when selecting the layer
-        layer.selected = true;
-        layer.visible = is_visible;
+        const is_visible = layer.visible // don't change the visibility when selecting the layer
+        layer.selected = true
+        layer.visible = is_visible
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 }
 
 async function selectLayersExe(layers) {
   await executeAsModal(async () => {
-    await selectLayers(layers);
-  });
+    await selectLayers(layers)
+  })
 }
 async function selectGroup(layer) {
-  await unselectActiveLayers();
-  layer.parent.selected = true;
+  await unselectActiveLayers()
+  layer.parent.selected = true
 }
 async function collapseGroup(layer) {
-  await selectGroup(layer);
-  await app.activeDocument.activeLayers[0].merge();
+  await selectGroup(layer)
+  await app.activeDocument.activeLayers[0].merge()
 }
 
 async function createMaskCommand() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   const result = await batchPlay(
     [
@@ -235,17 +235,17 @@ async function createMaskCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 }
 
 async function createMaskExe() {
-  const { executeAsModal } = require("photoshop").core;
-  await executeAsModal(createMaskCommand);
+  const { executeAsModal } = require("photoshop").core
+  await executeAsModal(createMaskCommand)
 }
 
 //unselect the rectangular marquee selection area
 async function unSelectMarqueeCommand() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   const result = await batchPlay(
     [
@@ -270,12 +270,12 @@ async function unSelectMarqueeCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  return result;
+  return result
 }
 async function unSelectMarqueeExe() {
-  await executeAsModal(unSelectMarqueeCommand);
+  await executeAsModal(unSelectMarqueeCommand)
 }
 ////selection:
 async function selectMarqueeRectangularToolExe() {
@@ -298,30 +298,30 @@ async function selectMarqueeRectangularToolExe() {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
-    return result;
+    )
+    return result
   }
   await executeAsModal(async () => {
-    await selectMarqueeRectangularToolCommand();
-  });
+    await selectMarqueeRectangularToolCommand()
+  })
 }
 
 async function promptForMarqueeTool() {
-  (async () => {
+  ;(async () => {
     const r1 = await dialog_box.prompt(
       "Please Select a Rectangular Area",
       "You Forgot to select a Rectangular Area",
       ["Cancel", "Rectangular Marquee"]
-    );
+    )
     if ((r1 || "Rectangular Marquee") !== "Rectangular Marquee") {
       /* cancelled or No */
-      console.log("cancel");
+      console.log("cancel")
     } else {
       /* Yes */
-      console.log("Rectangular Marquee");
-      selectMarqueeRectangularToolExe();
+      console.log("Rectangular Marquee")
+      selectMarqueeRectangularToolExe()
     }
-  })();
+  })()
 }
 
 async function selectLayerChannelCommand() {
@@ -358,7 +358,7 @@ async function selectLayerChannelCommand() {
   //       modalBehavior: 'execute'
   //     }
   //   )
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   const result = await batchPlay(
     [
@@ -384,7 +384,7 @@ async function selectLayerChannelCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 }
 
 async function getSelectionInfoCommand() {
@@ -410,9 +410,9 @@ async function getSelectionInfoCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  return result;
+  return result
 }
 
 function isSelectionValid(selection) {
@@ -423,17 +423,17 @@ function isSelectionValid(selection) {
     selection.hasOwnProperty("top") &&
     selection.hasOwnProperty("bottom")
   ) {
-    return true;
+    return true
   }
 
-  return false;
+  return false
 }
 async function getSelectionInfoExe() {
-  console.log("getSelectionInfo was called");
+  console.log("getSelectionInfo was called")
 
   try {
     const selection = (await executeAsModal(getSelectionInfoCommand))[0]
-      .selection;
+      .selection
 
     if (isSelectionValid(selection)) {
       let selection_info = {
@@ -443,12 +443,12 @@ async function getSelectionInfoExe() {
         top: selection.top._value,
         height: selection.bottom._value - selection.top._value,
         width: selection.right._value - selection.left._value,
-      };
+      }
       // console.dir({selection_info})
-      return selection_info;
+      return selection_info
     }
   } catch (e) {
-    console.warn("selection info error", e);
+    console.warn("selection info error", e)
   }
 }
 
@@ -491,18 +491,18 @@ async function reSelectMarqueeCommand(selectionInfo) {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 }
 async function reSelectMarqueeExe(selectionInfo) {
   await executeAsModal(async () => {
-    await reSelectMarqueeCommand(selectionInfo);
-  });
+    await reSelectMarqueeCommand(selectionInfo)
+  })
 }
 
 async function snapshot_layer() {
-  let psAction = require("photoshop").action;
+  let psAction = require("photoshop").action
   // const ids = (await app.activeDocument.activeLayers).map(layer => layer.id)
-  const ids = await app.activeDocument.layers.map((layer) => layer.id);
+  const ids = await app.activeDocument.layers.map((layer) => layer.id)
   let command = [
     // Select All Layers current layer
     {
@@ -533,35 +533,35 @@ async function snapshot_layer() {
       _target: [{ _property: "selection", _ref: "channel" }],
       to: { _enum: "ordinal", _ref: "channel", _value: "targetEnum" },
     },
-  ];
+  ]
   const result = await psAction.batchPlay(command, {
     synchronousExecution: true,
     modalBehavior: "execute",
-  });
-  console.log("snapshot_layer: result: ", result);
-  return result;
+  })
+  console.log("snapshot_layer: result: ", result)
+  return result
 }
 
 async function snapshot_layerExe() {
   try {
     await executeAsModal(
       async () => {
-        await snapshot_layer();
+        await snapshot_layer()
       },
       {
         commandName: "Action Commands",
       }
-    );
+    )
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
 }
 
 // await runModalFunction();
 
 async function fillAndGroup() {
-  let result;
-  let psAction = require("photoshop").action;
+  let result
+  let psAction = require("photoshop").action
 
   // let newCommand =[
   //   // snapshotLayer
@@ -592,13 +592,13 @@ async function fillAndGroup() {
     // {"_obj":"select","_target":[{"_name":"Layer 4 copy","_ref":"layer"}],"layerID":[17,15],"makeVisible":false,"selectionModifier":{"_enum":"selectionModifierType","_value":"addToSelectionContinuous"}},
     // Make Group
     // {"_obj":"make","_target":[{"_ref":"layerSection"}],"from":{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"},"layerSectionEnd":19,"layerSectionStart":18,"name":"Group 1"}
-  ];
-  const snapshotLayer = await app.activeDocument.activeLayers[0];
-  await makeGroupCommand();
-  const groupLayer = app.activeDocument.activeLayers[0];
-  result = await psAction.batchPlay(command, {});
-  const fillLayer = app.activeDocument.activeLayers[0];
-  snapshotLayer.moveAbove(fillLayer);
+  ]
+  const snapshotLayer = await app.activeDocument.activeLayers[0]
+  await makeGroupCommand()
+  const groupLayer = app.activeDocument.activeLayers[0]
+  result = await psAction.batchPlay(command, {})
+  const fillLayer = app.activeDocument.activeLayers[0]
+  snapshotLayer.moveAbove(fillLayer)
   // await app.activeDocument.activeLayers[0].moveAbove()
   // const layerIDs = []
   // const to_index = await getIndexCommand(groupLayer.id)
@@ -608,40 +608,40 @@ async function fillAndGroup() {
 async function fillAndGroupExe() {
   await require("photoshop").core.executeAsModal(fillAndGroup, {
     commandName: "Action Commands",
-  });
+  })
 }
 async function fastSnapshot() {
-  await snapshot_layerExe();
-  await fillAndGroupExe();
+  await snapshot_layerExe()
+  await fillAndGroupExe()
 }
 
 function layerToFileName(layer, session_id) {
-  file_name = `${layer.name}_${layer.id}_${session_id}`;
-  return file_name;
+  file_name = `${layer.name}_${layer.id}_${session_id}`
+  return file_name
 }
 function layerNameToFileName(layer_name, layer_id, session_id) {
-  file_name = `${layer_name}_${layer_id}_${session_id}`;
-  return file_name;
+  file_name = `${layer_name}_${layer_id}_${session_id}`
+  return file_name
 }
 async function exportPngCommand(session_id) {
   try {
     // const result = await batchPlay { _obj: “exportSelectionAsFileTypePressed”}
 
     // const destFolder = (await storage.localFileSystem.getDataFolder()).nativePath;
-    const storage = require("uxp").storage;
-    const fs = storage.localFileSystem;
+    const storage = require("uxp").storage
+    const fs = storage.localFileSystem
 
-    let pluginFolder = await fs.getPluginFolder();
+    let pluginFolder = await fs.getPluginFolder()
     // await fs.getFolder("./init_images")
     let init_images_dir = await pluginFolder.getEntry(
       "./server/python_server/init_images"
-    );
-    const layer = await app.activeDocument.activeLayers[0];
-    const old_name = layer.name;
+    )
+    const layer = await app.activeDocument.activeLayers[0]
+    const old_name = layer.name
     //change the name of layer to unique name
-    const file_name = layerToFileName(layer, session_id);
-    layer.name = file_name;
-    const id = await app.activeDocument.activeLayers[0].id;
+    const file_name = layerToFileName(layer, session_id)
+    layer.name = file_name
+    const id = await app.activeDocument.activeLayers[0].id
     const exportCommand = {
       _obj: "exportSelectionAsFileTypePressed",
       // _target: { _ref: 'layer', _enum: 'ordinal', _value: 'targetEnum' },
@@ -659,98 +659,98 @@ async function exportPngCommand(session_id) {
       sRGB: true,
       openWindow: false,
       _options: { dialogOptions: "dontDisplay" },
-    };
+    }
     const result = await batchPlay([exportCommand], {
       synchronousExecution: true,
       modalBehavior: "execute",
-    });
+    })
 
-    return result;
+    return result
   } catch (e) {
-    console.error(`exportPngCommand error:, ${e}`);
+    console.error(`exportPngCommand error:, ${e}`)
   }
 }
 
 async function exportPng(session_id) {
-  console.log("exportPng() -> session_id:", session_id);
+  console.log("exportPng() -> session_id:", session_id)
   try {
-    const old_name = await app.activeDocument.activeLayers[0].name;
+    const old_name = await app.activeDocument.activeLayers[0].name
     await executeAsModal(async () => {
-      await exportPngCommand(session_id);
-    });
+      await exportPngCommand(session_id)
+    })
     setTimeout(async () => {
-      console.log("setTimeout() -> old_name: ", old_name);
+      console.log("setTimeout() -> old_name: ", old_name)
       await executeAsModal(async () => {
-        app.activeDocument.activeLayers[0].name = old_name;
-      });
-    }, 3000);
+        app.activeDocument.activeLayers[0].name = old_name
+      })
+    }, 3000)
     //after export rename the layer to it's original name by remove the "_${id}" from the name
   } catch (e) {
-    console.error(`exportPng error:, ${e}`);
+    console.error(`exportPng error:, ${e}`)
   }
 }
 
 // await runModalFunction();
 async function setInitImage(layer, session_id) {
   try {
-    const html_manip = require("./utility/html_manip");
+    const html_manip = require("./utility/html_manip")
     // const layer = await app.activeDocument.activeLayers[0]
-    const old_name = layer.name;
-    const sdapi = require("./sdapi");
+    const old_name = layer.name
+    const sdapi = require("./sdapi")
     // await exportPng(session_id)
     // image_name = await app.activeDocument.activeLayers[0].name
 
     //convert layer name to a file name
-    image_name = layerNameToFileName(old_name, layer.id, session_id);
-    image_name = `${image_name}.png`;
+    image_name = layerNameToFileName(old_name, layer.id, session_id)
+    image_name = `${image_name}.png`
 
     //the width and height of the exported image
-    const width = html_manip.getWidth();
-    const height = html_manip.getHeight();
-    await newExportPng(layer, image_name, width, height);
+    const width = html_manip.getWidth()
+    const height = html_manip.getHeight()
+    await newExportPng(layer, image_name, width, height)
 
-    g_init_image_name = image_name;
-    console.log(image_name);
+    g_init_image_name = image_name
+    console.log(image_name)
 
-    const image_src = await sdapi.getInitImage(g_init_image_name);
-    let ini_image_element = document.getElementById("init_image");
-    ini_image_element.src = image_src;
+    const image_src = await sdapi.getInitImage(g_init_image_name)
+    let ini_image_element = document.getElementById("init_image")
+    ini_image_element.src = image_src
 
-    return image_name;
+    return image_name
   } catch (e) {
-    console.error(`psapi.js setInitImage error:, ${e}`);
+    console.error(`psapi.js setInitImage error:, ${e}`)
   }
 }
 async function setInitImageMask(layer, session_id) {
   try {
-    const html_manip = require("./utility/html_manip");
+    const html_manip = require("./utility/html_manip")
 
     // const layer = await app.activeDocument.activeLayers[0]
-    const old_name = layer.name;
-    const sdapi = require("./sdapi");
+    const old_name = layer.name
+    const sdapi = require("./sdapi")
     // await exportPng(session_id)
     //get the active layer name
     // image_name = await app.activeDocument.activeLayers[0].name
     // image_name = layerNameToFileName(old_name,layer.id,random_session_id)
-    image_name = layerNameToFileName(old_name, layer.id, session_id);
-    image_name = `${image_name}.png`;
-    const width = html_manip.getWidth();
-    const height = html_manip.getHeight();
-    await newExportPng(layer, image_name, width, height);
-    g_init_image_mask_name = image_name; // this is the name we will send to the server
+    image_name = layerNameToFileName(old_name, layer.id, session_id)
+    image_name = `${image_name}.png`
+    const width = html_manip.getWidth()
+    const height = html_manip.getHeight()
+    await newExportPng(layer, image_name, width, height)
+    g_init_image_mask_name = image_name // this is the name we will send to the server
     // g_init_mask_layer = layer
     // g_mask_related_layers = {}
-    console.log(image_name);
+    console.log(image_name)
 
-    const image_src = await sdapi.getInitImage(g_init_image_mask_name); // we should replace this with getInitImagePath which return path to local disk
-    const ini_image_mask_element = document.getElementById("init_image_mask");
-    ini_image_mask_element.src = image_src;
-    ini_image_mask_element.dataset.layer_id = layer.id;
+    const image_src = await sdapi.getInitImage(g_init_image_mask_name) // we should replace this with getInitImagePath which return path to local disk
+    const ini_image_mask_element = document.getElementById("init_image_mask")
+    ini_image_mask_element.src = image_src
+    ini_image_mask_element.dataset.layer_id = layer.id
 
     //create viewer init image obj
-    return image_name;
+    return image_name
   } catch (e) {
-    console.error(`psapi.js setInitImageMask error: `, e);
+    console.error(`psapi.js setInitImageMask error: `, e)
   }
 }
 
@@ -777,20 +777,20 @@ async function cleanLayers(layers) {
   // g_init_image_related_layers = {}
   // g_mask_related_layers = {}
   // await loadViewerImages()// we should move loadViewerImages to a new file viewer.js
-  console.log("cleanLayers() -> layers:", layers);
+  console.log("cleanLayers() -> layers:", layers)
   for (layer of layers) {
     try {
       if (layer) {
         await executeAsModal(async () => {
-          await layer.delete();
-        });
+          await layer.delete()
+        })
       }
     } catch (e) {
-      console.warn("warning attempting to a delete layer: ", e);
-      continue;
+      console.warn("warning attempting to a delete layer: ", e)
+      continue
     }
   }
-  return [];
+  return []
 }
 
 // async function cleanLayersOutpaint(layers){
@@ -823,7 +823,7 @@ async function cleanLayers(layers) {
 // return []
 // }
 async function createClippingMaskExe() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   async function createClippingMaskCommand() {
     const result = await batchPlay(
@@ -851,27 +851,27 @@ async function createClippingMaskExe() {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
+    )
   }
 
   await executeAsModal(async () => {
-    await createClippingMaskCommand();
-  });
+    await createClippingMaskCommand()
+  })
 }
 
 async function checkIfSelectionAreaIsActive() {
   try {
-    let isSelectionAreaValid = await getSelectionInfoExe();
-    return isSelectionAreaValid;
+    let isSelectionAreaValid = await getSelectionInfoExe()
+    return isSelectionAreaValid
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 async function saveUniqueDocumentIdExe(new_id) {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   async function saveUniqueDocumentIdCommand() {
-    const batchPlay = require("photoshop").action.batchPlay;
+    const batchPlay = require("photoshop").action.batchPlay
 
     const result = await batchPlay(
       [
@@ -902,19 +902,19 @@ async function saveUniqueDocumentIdExe(new_id) {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
+    )
   }
 
   await executeAsModal(async () => {
-    await saveUniqueDocumentIdCommand();
-  });
+    await saveUniqueDocumentIdCommand()
+  })
 }
 
 async function readUniqueDocumentIdExe() {
-  const batchPlay = require("photoshop").action.batchPlay;
+  const batchPlay = require("photoshop").action.batchPlay
 
   async function readUniqueDocumentIdCommand() {
-    const batchPlay = require("photoshop").action.batchPlay;
+    const batchPlay = require("photoshop").action.batchPlay
 
     const result = await batchPlay(
       [
@@ -945,26 +945,26 @@ async function readUniqueDocumentIdExe() {
         synchronousExecution: true,
         modalBehavior: "execute",
       }
-    );
-    console.log("readUniqueDocumentIdCommand: result ", result);
-    return result;
+    )
+    console.log("readUniqueDocumentIdCommand: result ", result)
+    return result
   }
 
-  let uniqueDocumentId = "";
+  let uniqueDocumentId = ""
   try {
     await executeAsModal(async () => {
       uniqueDocumentId = (await readUniqueDocumentIdCommand())[0].fileInfo
-        .caption;
+        .caption
       if (typeof uniqueDocumentId === "string") {
-        uniqueDocumentId = uniqueDocumentId.trim();
+        uniqueDocumentId = uniqueDocumentId.trim()
       }
-    });
+    })
   } catch (e) {
-    console.warn("readUniqueDocumentIdExe: ", e);
-    uniqueDocumentId = "";
+    console.warn("readUniqueDocumentIdExe: ", e)
+    uniqueDocumentId = ""
   }
 
-  return uniqueDocumentId;
+  return uniqueDocumentId
 }
 
 const readPng = async (image_name) => {
@@ -973,19 +973,19 @@ const readPng = async (image_name) => {
     await executeAsModal(
       async (control) => {
         // const tempFolder = await fs.getTemporaryFolder() ;
-        const pluginFolder = await fs.getPluginFolder();
+        const pluginFolder = await fs.getPluginFolder()
 
         let init_images_dir = await pluginFolder.getEntry(
           "./server/python_server/init_images"
-        );
+        )
         // let init_images_dir = await pluginFolder.getEntry(
         //   './server/python_server/init_images'
         // )
         const file = await init_images_dir.createFile(image_name, {
           overwrite: true,
-        });
+        })
 
-        const currentDocument = app.activeDocument;
+        const currentDocument = app.activeDocument
         await currentDocument.saveAs.png(
           file,
           // {
@@ -993,18 +993,18 @@ const readPng = async (image_name) => {
           // },
           null,
           true
-        );
+        )
 
         // const arrayBuffer = await file.read({format: formats.binary}) ;
         // console.log(arrayBuffer, 'arrayBuffer') ;
       },
 
       { commandName: "readPng" }
-    );
+    )
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-};
+}
 
 async function selectCanvasCommand() {
   // const result = await batchPlay(
@@ -1049,17 +1049,17 @@ async function selectCanvasCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  return result;
+  return result
 }
 async function selectCanvasExe() {
   await executeAsModal(
     async () => {
-      await selectCanvasCommand();
+      await selectCanvasCommand()
     },
     { commandName: "selectCanvasExe" }
-  );
+  )
 }
 async function newExportPng(layer, image_name, width, height) {
   //store layers we want to export in variables
@@ -1076,7 +1076,7 @@ async function newExportPng(layer, image_name, width, height) {
 
     //create new document
     // let exportDoc = await executeAsModal(app.documents.add)
-    let exportDoc;
+    let exportDoc
     const makeDoc = async () => {
       let exportDoc = await app.documents.add({
         width: width,
@@ -1084,35 +1084,35 @@ async function newExportPng(layer, image_name, width, height) {
         resolution: 300,
         mode: "RGBColorMode",
         fill: "transparent",
-      });
-    };
+      })
+    }
     await executeAsModal(
       async () => {
         // await app.documents.add()
-        await makeDoc();
-        exportDoc = app.activeDocument;
+        await makeDoc()
+        exportDoc = app.activeDocument
 
-        console.log("exportDoc.id: ", exportDoc.id);
+        console.log("exportDoc.id: ", exportDoc.id)
         // for (layer of layersToExport) {
 
-        console.log(layer.id);
-        const dupLayer = await layer.duplicate(exportDoc);
-        await selectLayers([dupLayer]);
+        console.log(layer.id)
+        const dupLayer = await layer.duplicate(exportDoc)
+        await selectLayers([dupLayer])
         // await selectLayerChannelCommand()
-        await selectCanvasExe();
-        const canvas_selection_info = await getSelectionInfoExe();
-        await layerToSelection(canvas_selection_info);
+        await selectCanvasExe()
+        const canvas_selection_info = await getSelectionInfoExe()
+        await layerToSelection(canvas_selection_info)
         // const selection_info = await getSelectionInfoExe()
         // await exportDoc.crop(selection_info)
         // export_image_name = `${layer.name}.png`
-        await readPng(image_name);
-        await exportDoc.closeWithoutSaving();
+        await readPng(image_name)
+        await exportDoc.closeWithoutSaving()
       },
       { commandName: "NewExportPng" }
-    );
+    )
     // }
   } catch (e) {
-    console.error(`newExportPng error: ,${e}`);
+    console.error(`newExportPng error: ,${e}`)
   }
 }
 async function mergeVisibleCommand() {
@@ -1131,15 +1131,15 @@ async function mergeVisibleCommand() {
       synchronousExecution: true,
       modalBehavior: "execute",
     }
-  );
+  )
 
-  return result;
+  return result
 }
 
 async function mergeVisibleExe() {
   await executeAsModal(async () => {
-    await mergeVisibleCommand();
-  });
+    await mergeVisibleCommand()
+  })
 }
 
 async function layerToSelection(selection_info) {
@@ -1153,16 +1153,16 @@ async function layerToSelection(selection_info) {
     //Select from selection info
     // let selection_info = await getSelectionInfo()
 
-    console.log("selection_info:", selection_info);
+    console.log("selection_info:", selection_info)
 
-    console.log("unSelect");
+    console.log("unSelect")
 
     function getLayerSize(layer) {
-      console.log("layer.bounds:");
-      console.dir(layer.bounds);
-      const bounds = layer.bounds;
-      const height = bounds.bottom - bounds.top;
-      const width = bounds.right - bounds.left;
+      console.log("layer.bounds:")
+      console.dir(layer.bounds)
+      const bounds = layer.bounds
+      const height = bounds.bottom - bounds.top
+      const width = bounds.right - bounds.left
       return {
         height: height,
         width: width,
@@ -1170,49 +1170,49 @@ async function layerToSelection(selection_info) {
         right: bounds.right,
         top: bounds.top,
         bottom: bounds.bottom,
-      };
+      }
     }
     //scale layer
     async function scaleLayer(layer, selection_info) {
-      console.log("scaleLayer got called");
+      console.log("scaleLayer got called")
       // const activeLayer = getActiveLayer()
       // const activeLayer = await app.activeDocument.activeLayers[0]
 
-      let layer_info = getLayerSize(layer);
-      scale_x_ratio = (selection_info.width / layer_info.width) * 100;
-      scale_y_ratio = (selection_info.height / layer_info.height) * 100;
-      console.log("scale_x_y_ratio:", scale_x_ratio, scale_y_ratio);
-      await layer.scale(scale_x_ratio, scale_y_ratio);
+      let layer_info = getLayerSize(layer)
+      scale_x_ratio = (selection_info.width / layer_info.width) * 100
+      scale_y_ratio = (selection_info.height / layer_info.height) * 100
+      console.log("scale_x_y_ratio:", scale_x_ratio, scale_y_ratio)
+      await layer.scale(scale_x_ratio, scale_y_ratio)
     }
 
     async function moveLayerExe(layerToMove, selection_info) {
-      let layer_info = getLayerSize(layerToMove);
-      top_dist = layer_info.top - selection_info.top;
-      left_dist = layer_info.left - selection_info.left;
-      await layerToMove.translate(-left_dist, -top_dist);
+      let layer_info = getLayerSize(layerToMove)
+      top_dist = layer_info.top - selection_info.top
+      left_dist = layer_info.left - selection_info.left
+      await layerToMove.translate(-left_dist, -top_dist)
     }
     // const activeLayer = await getActiveLayer()
 
     //store all active layers
-    const activeLayers = await app.activeDocument.activeLayers;
-    await unSelectMarqueeExe();
+    const activeLayers = await app.activeDocument.activeLayers
+    await unSelectMarqueeExe()
     // await executeAsModal(unSelect,  {'commandName': 'unSelect'})
     // await executeAsModal(scaleLayer,  {'commandName': 'scaleLayer'})
 
     await executeAsModal(
       async () => {
         for (let layer of activeLayers) {
-          await selectLayers([layer]); // make sure only one layer is selected
-          await scaleLayer(layer, selection_info); //scale to selection size
-          await moveLayerExe(layer, selection_info); //move to selection
+          await selectLayers([layer]) // make sure only one layer is selected
+          await scaleLayer(layer, selection_info) //scale to selection size
+          await moveLayerExe(layer, selection_info) //move to selection
         }
       },
       { commandName: "moveLayerExe" }
-    );
+    )
 
     // await reselect(selection_info)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -1257,4 +1257,4 @@ module.exports = {
   selectCanvasExe,
   layerToSelection,
   isSelectionValid,
-};
+}
diff --git a/sdapi.js b/sdapi.js
index 0dffd82..3f88a00 100644
--- a/sdapi.js
+++ b/sdapi.js
@@ -1,13 +1,13 @@
 //javascript plugin can't read images from local directory so we send a request to local server to read the image file and send it back to plugin as image string base64
 async function getInitImage(init_image_name) {
-  console.log("getInitImage(): get Init Image from the server :");
+  console.log("getInitImage(): get Init Image from the server :")
   const payload = {
     init_image_name: init_image_name,
-  };
+  }
 
-  const full_url = "http://127.0.0.1:8000/getInitImage/";
-  console.log(full_url);
-  console.log("getInitImage payload:", payload);
+  const full_url = "http://127.0.0.1:8000/getInitImage/"
+  console.log(full_url)
+  console.log("getInitImage payload:", payload)
   let request = await fetch(full_url, {
     method: "POST",
     headers: {
@@ -16,14 +16,14 @@ async function getInitImage(init_image_name) {
     },
     body: JSON.stringify(payload),
     // "body": payload
-  });
+  })
 
-  let json = await request.json();
-  console.log("json:");
-  console.dir(json);
-  base64data = json.init_image_str;
-  image_src = `data:image/png;base64, ${base64data}`;
-  return image_src;
+  let json = await request.json()
+  console.log("json:")
+  console.dir(json)
+  base64data = json.init_image_str
+  image_src = `data:image/png;base64, ${base64data}`
+  return image_src
 
   // console.log(img.src)
 
@@ -34,10 +34,10 @@ async function getInitImage(init_image_name) {
 
 async function requestTxt2Img(payload) {
   try {
-    console.log("requestTxt2Img(): about to send a fetch request");
+    console.log("requestTxt2Img(): about to send a fetch request")
 
-    const full_url = "http://127.0.0.1:8000/txt2img/";
-    console.log(full_url);
+    const full_url = "http://127.0.0.1:8000/txt2img/"
+    console.log(full_url)
 
     let request = await fetch(full_url, {
       method: "POST",
@@ -47,25 +47,25 @@ async function requestTxt2Img(payload) {
       },
       body: JSON.stringify(payload),
       // "body": payload
-    });
+    })
 
-    let json = await request.json();
-    console.log("requestTxt2Img json:");
-    console.dir(json);
+    let json = await request.json()
+    console.log("requestTxt2Img json:")
+    console.dir(json)
 
-    return json;
+    return json
   } catch (e) {
-    console.warn(e);
-    return {};
+    console.warn(e)
+    return {}
   }
 }
 
 async function requestImg2Img(payload) {
-  console.log("requestImg2Img(): about to send a fetch request");
+  console.log("requestImg2Img(): about to send a fetch request")
   try {
-    const full_url = "http://127.0.0.1:8000/img2img/";
-    console.log(full_url);
-    console.log("requestImg2Img payload is: ", payload);
+    const full_url = "http://127.0.0.1:8000/img2img/"
+    console.log(full_url)
+    console.log("requestImg2Img payload is: ", payload)
     let request = await fetch(full_url, {
       method: "POST",
       headers: {
@@ -74,67 +74,67 @@ async function requestImg2Img(payload) {
       },
       body: JSON.stringify(payload),
       // "body": payload
-    });
+    })
 
-    let json = await request.json();
-    console.log("requestImg2Img json:");
-    console.dir(json);
+    let json = await request.json()
+    console.log("requestImg2Img json:")
+    console.dir(json)
 
-    return json;
+    return json
   } catch (e) {
-    console.warn(e);
-    return {};
+    console.warn(e)
+    return {}
   }
 }
 
 async function requestProgress() {
-  console.log("requestProgress: ");
+  console.log("requestProgress: ")
 
   const full_url =
-    "http://127.0.0.1:8000/sdapi/v1/progress?skip_current_image=false";
-  let request = await fetch(full_url);
-  let json = await request.json();
-  console.log("progress json:");
-  console.dir(json);
+    "http://127.0.0.1:8000/sdapi/v1/progress?skip_current_image=false"
+  let request = await fetch(full_url)
+  let json = await request.json()
+  console.log("progress json:")
+  console.dir(json)
 
-  return json;
+  return json
 }
 
 async function requestGetModels() {
-  console.log("requestGetModels: ");
-  let json = [];
+  console.log("requestGetModels: ")
+  let json = []
   try {
-    const full_url = "http://127.0.0.1:8000/sdapi/v1/sd-models";
-    let request = await fetch(full_url);
-    json = await request.json();
-    console.log("models json:");
-    console.dir(json);
+    const full_url = "http://127.0.0.1:8000/sdapi/v1/sd-models"
+    let request = await fetch(full_url)
+    json = await request.json()
+    console.log("models json:")
+    console.dir(json)
   } catch (e) {
-    console.warn(`issues requesting from ${full_url}`, e);
+    console.warn(`issues requesting from ${full_url}`, e)
   }
-  return json;
+  return json
 }
 
 async function requestGetSamplers() {
-  console.log("requestGetSamplers: ");
+  console.log("requestGetSamplers: ")
 
-  const full_url = "http://127.0.0.1:8000/sdapi/v1/samplers";
-  let request = await fetch(full_url);
-  let json = await request.json();
-  console.log("samplers json:");
-  console.dir(json);
+  const full_url = "http://127.0.0.1:8000/sdapi/v1/samplers"
+  let request = await fetch(full_url)
+  let json = await request.json()
+  console.log("samplers json:")
+  console.dir(json)
 
-  return json;
+  return json
 }
 
 async function requestSwapModel(model_title) {
-  console.log("requestSwapModel: ");
+  console.log("requestSwapModel: ")
   // const full_url = 'http://127.0.0.1:8000/swapModel'
 
-  const full_url = "http://127.0.0.1:8000/sdapi/v1/options";
+  const full_url = "http://127.0.0.1:8000/sdapi/v1/options"
   payload = {
     sd_model_checkpoint: model_title,
-  };
+  }
   let request = await fetch(full_url, {
     method: "POST",
     headers: {
@@ -143,26 +143,26 @@ async function requestSwapModel(model_title) {
     },
     body: JSON.stringify(payload),
     // "body": payload
-  });
+  })
 
-  let json = await request.json();
+  let json = await request.json()
 
-  console.log("models json:");
-  console.dir(json);
+  console.log("models json:")
+  console.dir(json)
 
-  return json;
+  return json
 }
 
 async function requestInterrupt(model_title) {
   try {
-    console.log("requestInterrupt: ");
+    console.log("requestInterrupt: ")
     // const full_url = 'http://127.0.0.1:8000/swapModel'
 
-    const full_url = "http://127.0.0.1:8000/sdapi/v1/interrupt";
+    const full_url = "http://127.0.0.1:8000/sdapi/v1/interrupt"
     // payload = {
     //   sd_model_checkpoint: model_title
     // }
-    payload = "";
+    payload = ""
     let request = await fetch(full_url, {
       method: "POST",
       headers: {
@@ -171,49 +171,49 @@ async function requestInterrupt(model_title) {
       },
       // body: JSON.stringify(payload)
       // "body": payload
-    });
+    })
 
-    console.log("interrupt request:", request);
-    let json = await request.json();
+    console.log("interrupt request:", request)
+    let json = await request.json()
 
-    console.log("interrupt json:");
-    console.dir(json);
+    console.log("interrupt json:")
+    console.dir(json)
 
-    return json;
+    return json
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function getVersionRequest() {
   // version = "v0.0.0"
-  console.log("requestGetSamplers: ");
+  console.log("requestGetSamplers: ")
   try {
-    const full_url = "http://127.0.0.1:8000/version";
-    let request = await fetch(full_url);
-    let json = await request.json();
-    console.log("version json:", json);
-    version = json["version"];
+    const full_url = "http://127.0.0.1:8000/version"
+    let request = await fetch(full_url)
+    let json = await request.json()
+    console.log("version json:", json)
+    version = json["version"]
 
-    return version;
+    return version
   } catch (e) {
-    console.warn(e);
-    version = "v0.0.0";
+    console.warn(e)
+    version = "v0.0.0"
 
-    return version;
+    return version
   }
 }
 
 async function changeSdUrl(new_sd_url) {
   // version = "v0.0.0"
-  console.log("changeSdUrl: new_sd_url:", new_sd_url);
+  console.log("changeSdUrl: new_sd_url:", new_sd_url)
   try {
     payload = {
       sd_url: new_sd_url,
-    };
+    }
 
-    const full_url = "http://127.0.0.1:8000/sd_url/";
-    console.log("changeSdUrl: payload: ", payload);
+    const full_url = "http://127.0.0.1:8000/sd_url/"
+    console.log("changeSdUrl: payload: ", payload)
     let request = await fetch(full_url, {
       method: "POST",
       headers: {
@@ -221,13 +221,13 @@ async function changeSdUrl(new_sd_url) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
 
     // let json = await request.json()
     // console.log('changeSdUrl:',json)
-    console.log("changeSdUrl: request: ", request);
+    console.log("changeSdUrl: request: ", request)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -238,13 +238,13 @@ async function changeSdUrl(new_sd_url) {
 //   // return
 // }
 async function loadHistory(uniqueDocumentId) {
-  let json = {};
+  let json = {}
   try {
     payload = {
       uniqueDocumentId: uniqueDocumentId,
-    };
+    }
 
-    const full_url = "http://127.0.0.1:8000/history/load";
+    const full_url = "http://127.0.0.1:8000/history/load"
 
     let request = await fetch(full_url, {
       method: "POST",
@@ -253,24 +253,24 @@ async function loadHistory(uniqueDocumentId) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
 
-    json = await request.json();
-    console.log("loadHistory:", json);
+    json = await request.json()
+    console.log("loadHistory:", json)
     // console.log('loadPromptShortcut: request: ',request)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 
-  return [json["image_paths"], json["metadata_jsons"]];
+  return [json["image_paths"], json["metadata_jsons"]]
 }
 async function loadPromptShortcut() {
   // console.log('loadPromptShortcut:')
-  let json = {};
+  let json = {}
   try {
-    payload = {};
+    payload = {}
 
-    const full_url = "http://127.0.0.1:8000/prompt_shortcut/load";
+    const full_url = "http://127.0.0.1:8000/prompt_shortcut/load"
 
     let request = await fetch(full_url, {
       method: "POST",
@@ -279,25 +279,25 @@ async function loadPromptShortcut() {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
 
-    json = await request.json();
-    console.log("loadPromptShortcut:", json);
+    json = await request.json()
+    console.log("loadPromptShortcut:", json)
     // console.log('loadPromptShortcut: request: ',request)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 
-  return json["prompt_shortcut"];
+  return json["prompt_shortcut"]
 }
 
 async function savePromptShortcut(prompt_shortcut) {
   // console.log('loadPromptShortcut:')
-  let json = {};
+  let json = {}
   try {
-    payload = { prompt_shortcut: prompt_shortcut };
+    payload = { prompt_shortcut: prompt_shortcut }
 
-    const full_url = "http://127.0.0.1:8000/prompt_shortcut/save";
+    const full_url = "http://127.0.0.1:8000/prompt_shortcut/save"
 
     let request = await fetch(full_url, {
       method: "POST",
@@ -306,23 +306,23 @@ async function savePromptShortcut(prompt_shortcut) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
 
-    json = await request.json();
-    console.log("savePromptShortcut:", json);
+    json = await request.json()
+    console.log("savePromptShortcut:", json)
     // console.log('loadPromptShortcut: request: ',request)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 
-  return json["prompt_shortcut"];
+  return json["prompt_shortcut"]
 }
 async function setInpaintMaskWeight(value) {
-  const full_url = "http://127.0.0.1:8000/sdapi/v1/options";
+  const full_url = "http://127.0.0.1:8000/sdapi/v1/options"
   try {
     payload = {
       inpainting_mask_weight: value,
-    };
+    }
     await fetch(full_url, {
       method: "POST",
       headers: {
@@ -330,49 +330,49 @@ async function setInpaintMaskWeight(value) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 async function requestGetConfig() {
-  console.log("requestGetConfig: ");
-  let json = [];
-  const full_url = "http://127.0.0.1:8000/config";
+  console.log("requestGetConfig: ")
+  let json = []
+  const full_url = "http://127.0.0.1:8000/config"
   try {
-    let request = await fetch(full_url);
-    json = await request.json();
-    console.log("models json:");
-    console.dir(json);
+    let request = await fetch(full_url)
+    json = await request.json()
+    console.log("models json:")
+    console.dir(json)
   } catch (e) {
-    console.warn(`issues requesting from ${full_url}`, e);
+    console.warn(`issues requesting from ${full_url}`, e)
   }
-  return json;
+  return json
 }
 async function requestGetOptions() {
-  console.log("requestGetOptions: ");
-  let json = [];
-  const full_url = "http://127.0.0.1:8000/sdapi/v1/options";
+  console.log("requestGetOptions: ")
+  let json = []
+  const full_url = "http://127.0.0.1:8000/sdapi/v1/options"
   try {
-    let request = await fetch(full_url);
-    json = await request.json();
-    console.log("models json:");
-    console.dir(json);
+    let request = await fetch(full_url)
+    json = await request.json()
+    console.log("models json:")
+    console.dir(json)
   } catch (e) {
-    console.warn(`issues requesting from ${full_url}`, e);
+    console.warn(`issues requesting from ${full_url}`, e)
   }
-  return json;
+  return json
 }
 
 async function imageSearch(keywords) {
-  let json = {};
+  let json = {}
   try {
     payload = {
       keywords: keywords,
-    };
+    }
 
-    const full_url = "http://127.0.0.1:8000/search/image/";
+    const full_url = "http://127.0.0.1:8000/search/image/"
 
     let request = await fetch(full_url, {
       method: "POST",
@@ -381,16 +381,16 @@ async function imageSearch(keywords) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
-    });
+    })
 
-    json = await request.json();
-    console.log("imageSearch:", json);
+    json = await request.json()
+    console.log("imageSearch:", json)
 
-    return json["images"];
+    return json["images"]
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
-  return [];
+  return []
 }
 
 module.exports = {
@@ -411,4 +411,4 @@ module.exports = {
   requestGetConfig,
   requestGetOptions,
   imageSearch,
-};
+}
diff --git a/selection.js b/selection.js
index 67c8b31..cf761d7 100644
--- a/selection.js
+++ b/selection.js
@@ -10,47 +10,47 @@ function finalWidthHeight(
   // const selectionWidth = 256
   // const selectionHeight = 1000
 
-  let finalWidth = 0;
-  let finalHeight = 0;
+  let finalWidth = 0
+  let finalHeight = 0
 
   if (selectionWidth <= selectionHeight) {
     //do operation on the smaller dimension
-    const scaleRatio = selectionWidth / minWidth;
+    const scaleRatio = selectionWidth / minWidth
 
-    finalWidth = minWidth;
-    finalHeight = selectionHeight / scaleRatio;
+    finalWidth = minWidth
+    finalHeight = selectionHeight / scaleRatio
   } else {
-    const scaleRatio = selectionHeight / minHeight;
+    const scaleRatio = selectionHeight / minHeight
 
-    finalHeight = minHeight;
-    finalWidth = selectionWidth / scaleRatio;
+    finalHeight = minHeight
+    finalWidth = selectionWidth / scaleRatio
   }
-  return [finalWidth, finalHeight];
+  return [finalWidth, finalHeight]
 }
 
 async function selectionToFinalWidthHeight() {
-  const { getSelectionInfoExe } = require("./psapi");
+  const { getSelectionInfoExe } = require("./psapi")
   try {
-    const selectionInfo = await getSelectionInfoExe();
+    const selectionInfo = await getSelectionInfoExe()
     const [finalWidth, finalHeight] = finalWidthHeight(
       selectionInfo.width,
       selectionInfo.height,
       512,
       512
-    );
+    )
 
     return [
       parseInt(finalWidth),
       parseInt(finalHeight),
       selectionInfo.width,
       selectionInfo.height,
-    ];
+    ]
   } catch (e) {
-    console.warn("you need a rectangular selection", e);
+    console.warn("you need a rectangular selection", e)
   }
 }
 
 module.exports = {
   finalWidthHeight,
   selectionToFinalWidthHeight,
-};
+}
diff --git a/utility/html_manip.js b/utility/html_manip.js
index 1930537..66b7541 100644
--- a/utility/html_manip.js
+++ b/utility/html_manip.js
@@ -1,12 +1,12 @@
 ////// Start Prompt//////////
 
 function getPrompt() {
-  const prompt = document.getElementById("taPrompt").value;
-  return prompt;
+  const prompt = document.getElementById("taPrompt").value
+  return prompt
 }
 
 function autoFillInPrompt(prompt_value) {
-  document.getElementById("taPrompt").value = prompt_value;
+  document.getElementById("taPrompt").value = prompt_value
 }
 
 ////// End Prompt//////////
@@ -14,12 +14,12 @@ function autoFillInPrompt(prompt_value) {
 ////// Start Negative Prompt//////////
 
 function getNegativePrompt() {
-  const negative_prompt = document.getElementById("taNegativePrompt").value;
-  return negative_prompt;
+  const negative_prompt = document.getElementById("taNegativePrompt").value
+  return negative_prompt
 }
 
 function autoFillInNegativePrompt(negative_prompt_value) {
-  document.getElementById("taNegativePrompt").value = negative_prompt_value;
+  document.getElementById("taNegativePrompt").value = negative_prompt_value
 }
 
 ////// End Negative Prompt//////////
@@ -27,63 +27,63 @@ function autoFillInNegativePrompt(negative_prompt_value) {
 ////// Start Width//////////
 
 document.getElementById("slWidth").addEventListener("input", (evt) => {
-  const width = evt.target.value * 64;
-  document.getElementById("lWidth").textContent = width;
-});
+  const width = evt.target.value * 64
+  document.getElementById("lWidth").textContent = width
+})
 
 function getWidth() {
-  slider_width = document.getElementById("slWidth").value;
-  const width = slider_width * 64;
-  return width;
+  slider_width = document.getElementById("slWidth").value
+  const width = slider_width * 64
+  return width
 }
 
 function getHrWidth() {
-  slider_width = document.getElementById("hrWidth").value;
-  const width = slider_width * 64;
-  return width;
+  slider_width = document.getElementById("hrWidth").value
+  const width = slider_width * 64
+  return width
 }
 
 function getHrHeight() {
-  slider_width = document.getElementById("hrHeight").value;
-  const width = slider_width * 64;
-  return width;
+  slider_width = document.getElementById("hrHeight").value
+  const width = slider_width * 64
+  return width
 }
 function autoFillInWidth(width_value) {
-  document.getElementById("slWidth").value = `${width_value / 64}`;
+  document.getElementById("slWidth").value = `${width_value / 64}`
   //update the label
-  document.getElementById("lWidth").innerHTML = `${width_value}`;
+  document.getElementById("lWidth").innerHTML = `${width_value}`
 }
 ////// End Width//////////
 
 ////// Start Height//////////
 
 document.getElementById("slHeight").addEventListener("input", (evt) => {
-  const height = evt.target.value * 64;
-  document.getElementById("lHeight").textContent = height;
-});
+  const height = evt.target.value * 64
+  document.getElementById("lHeight").textContent = height
+})
 
 function getHeight() {
-  slider_value = document.getElementById("slHeight").value;
-  const height = slider_value * 64;
-  return height;
+  slider_value = document.getElementById("slHeight").value
+  const height = slider_value * 64
+  return height
 }
 
 function autoFillInHeight(height_value) {
-  document.getElementById("slHeight").value = `${height_value / 64}`;
+  document.getElementById("slHeight").value = `${height_value / 64}`
   //update the label
-  document.getElementById("lHeight").innerHTML = `${height_value}`;
+  document.getElementById("lHeight").innerHTML = `${height_value}`
 }
 
 function autoFillInHRHeight(height_value) {
-  document.getElementById("hrHeight").value = `${height_value / 64}`;
+  document.getElementById("hrHeight").value = `${height_value / 64}`
   //update the label
-  document.getElementById("hHeight").innerHTML = `${height_value}`;
+  document.getElementById("hHeight").innerHTML = `${height_value}`
 }
 
 function autoFillInHRWidth(height_value) {
-  document.getElementById("hrWidth").value = `${height_value / 64}`;
+  document.getElementById("hrWidth").value = `${height_value / 64}`
   //update the label
-  document.getElementById("hWidth").innerHTML = `${height_value}`;
+  document.getElementById("hWidth").innerHTML = `${height_value}`
 }
 
 ////// End Height//////////
@@ -92,16 +92,16 @@ function autoFillInHRWidth(height_value) {
 document
   .querySelector("#slDenoisingStrength")
   .addEventListener("input", (evt) => {
-    const label_value = evt.target.value / 100;
+    const label_value = evt.target.value / 100
     // console.log("label_value: ", label_value)
-    document.getElementById("lDenoisingStrength").innerHTML = `${label_value}`;
-  });
+    document.getElementById("lDenoisingStrength").innerHTML = `${label_value}`
+  })
 
 //get the value that is relevant to stable diffusion
 function getDenoisingStrength() {
-  const slider_value = document.getElementById("slDenoisingStrength").value;
-  const denoising_strength_value = slider_value / 100.0;
-  return denoising_strength_value;
+  const slider_value = document.getElementById("slDenoisingStrength").value
+  const denoising_strength_value = slider_value / 100.0
+  return denoising_strength_value
 }
 
 // display the value the user need to see in all elements related to denoising strength attribute
@@ -110,11 +110,11 @@ function autoFillInDenoisingStrength(denoising_strength_value) {
   //update the slider
   document.getElementById("slDenoisingStrength").value = `${
     denoising_strength_value * 100
-  }`;
+  }`
   //update the label
   document.getElementById(
     "lDenoisingStrength"
-  ).innerHTML = `${denoising_strength_value}`;
+  ).innerHTML = `${denoising_strength_value}`
 }
 
 ////// End Denoising Strength//////////
@@ -122,65 +122,65 @@ function autoFillInDenoisingStrength(denoising_strength_value) {
 ////// Start Hi Res Fix//////////
 
 document.getElementById("chInpaintFullRes").addEventListener("click", (ev) => {
-  const inpaint_padding_slider = document.getElementById("slInpaintPadding");
+  const inpaint_padding_slider = document.getElementById("slInpaintPadding")
 
   if (ev.target.checked) {
-    inpaint_padding_slider.style.display = "block";
+    inpaint_padding_slider.style.display = "block"
   } else {
-    inpaint_padding_slider.style.display = "none";
+    inpaint_padding_slider.style.display = "none"
   }
-});
+})
 document.getElementById("chHiResFixs").addEventListener("click", (ev) => {
-  const container = document.getElementById("hi-res-sliders-container");
+  const container = document.getElementById("hi-res-sliders-container")
 
   if (ev.target.checked) {
-    container.style.display = "flex";
+    container.style.display = "flex"
   } else {
-    container.style.display = "none";
+    container.style.display = "none"
   }
-});
+})
 //get the value that is relevant to stable diffusion
 function getHiResFixs() {
-  const isChecked = document.getElementById("chHiResFixs").checked;
-  return isChecked;
+  const isChecked = document.getElementById("chHiResFixs").checked
+  return isChecked
 }
 
 function setHiResFixs(isChecked) {
-  document.getElementById("chHiResFixs").checked = isChecked;
+  document.getElementById("chHiResFixs").checked = isChecked
 }
 
 function sliderAddEventListener(slider_id, label_id, multiplier) {
   document.getElementById(slider_id).addEventListener("input", (evt) => {
-    const sd_value = evt.target.value * multiplier; // convert slider value to SD ready value
-    document.getElementById(label_id).textContent = Number(sd_value).toFixed(2);
-  });
+    const sd_value = evt.target.value * multiplier // convert slider value to SD ready value
+    document.getElementById(label_id).textContent = Number(sd_value).toFixed(2)
+  })
 }
 
 //get the stable diffusion ready value from the slider with  "slider_id"
 function getSliderSdValue(slider_id, multiplier) {
-  const slider_value = document.getElementById(slider_id).value;
-  const sd_value = slider_value * multiplier;
-  return sd_value;
+  const slider_value = document.getElementById(slider_id).value
+  const sd_value = slider_value * multiplier
+  return sd_value
 }
 function autoFillInSliderUi(sd_value, slider_id, label_id, multiplier) {
   //update the slider
-  document.getElementById(slider_id).value = `${sd_value * multiplier}`;
+  document.getElementById(slider_id).value = `${sd_value * multiplier}`
   //update the label
-  document.getElementById(label_id).innerHTML = `${sd_value}`;
+  document.getElementById(label_id).innerHTML = `${sd_value}`
 }
 
 //hrWidth is from [1 to 32] * 64 => [64 to 2048]
-sliderAddEventListener("hrWidth", "hWidth", 64);
-sliderAddEventListener("hrHeight", "hHeight", 64);
+sliderAddEventListener("hrWidth", "hWidth", 64)
+sliderAddEventListener("hrHeight", "hHeight", 64)
 
 //convert hrDenoisingStrength  from  [1, 100] * 0.01 => [0.01 to 1]
-sliderAddEventListener("hrDenoisingStrength", "hDenoisingStrength", 0.01);
+sliderAddEventListener("hrDenoisingStrength", "hDenoisingStrength", 0.01)
 
 function autoFillInHiResFixs(firstphase_width, firstphase_height) {
   //update the firstphase width slider and label
-  autoFillInSliderUi(firstphase_width, "hrWidth", "hWidth", 1.0 / 64);
+  autoFillInSliderUi(firstphase_width, "hrWidth", "hWidth", 1.0 / 64)
   //update the firstphase height slider and label
-  autoFillInSliderUi(firstphase_height, "hrHeight", "hHeight", 1.0 / 64);
+  autoFillInSliderUi(firstphase_height, "hrHeight", "hHeight", 1.0 / 64)
 }
 ////// End Hi Res Fix//////////
 
@@ -192,7 +192,7 @@ function autoFillInInpaintMaskWeight(sd_value) {
     "slInpaintingMaskWeight",
     "lInpaintingMaskWeight",
     100
-  );
+  )
 }
 ////// End Inpaint Mask Weight//////////
 
@@ -201,7 +201,7 @@ function unCheckAllSamplers() {
   document
     .getElementsByClassName("rbSampler")
 
-    .forEach((e) => e.removeAttribute("checked"));
+    .forEach((e) => e.removeAttribute("checked"))
 }
 
 function getSamplerElementByName(sampler_name) {
@@ -211,10 +211,10 @@ function getSamplerElementByName(sampler_name) {
     //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
     const sampler_element = [
       ...document.getElementsByClassName("rbSampler"),
-    ].filter((e) => e.value == sampler_name)[0];
-    return sampler_element;
+    ].filter((e) => e.value == sampler_name)[0]
+    return sampler_element
   } catch (e) {
-    console.warn(`Sampler '${sampler_name}' not found ${e}`);
+    console.warn(`Sampler '${sampler_name}' not found ${e}`)
   }
 }
 
@@ -223,21 +223,21 @@ function getCheckedSamplerName() {
   //return the name of the first checked sampler
   return [...document.getElementsByClassName("rbSampler")].filter(
     (e) => e.checked == true
-  )[0].value;
+  )[0].value
 }
 function getMode() {
   return [...document.getElementsByClassName("rbMode")].filter(
     (e) => e.checked == true
-  )[0].value;
+  )[0].value
 }
 
 function checkSampler(sampler_name) {
-  sampler_element = getSamplerElementByName(sampler_name);
-  sampler_element.checked = true;
+  sampler_element = getSamplerElementByName(sampler_name)
+  sampler_element.checked = true
 }
 function autoFillInSampler(sampler_name) {
   // unCheckAllSamplers()
-  checkSampler(sampler_name);
+  checkSampler(sampler_name)
 }
 ////// End Samplers//////////
 
@@ -249,10 +249,10 @@ function getModelElementByHash(model_hash) {
     //return the first model menu item element with model_hash
     const model_element = [
       ...document.getElementsByClassName("mModelMenuItem"),
-    ].filter((e) => e.dataset.model_hash == model_hash)[0];
-    return model_element;
+    ].filter((e) => e.dataset.model_hash == model_hash)[0]
+    return model_element
   } catch (e) {
-    console.warn(`Model '${model_hash}' not found ${e}`);
+    console.warn(`Model '${model_hash}' not found ${e}`)
   }
 }
 function getModelHashByTitle(model_title) {
@@ -260,9 +260,9 @@ function getModelHashByTitle(model_title) {
   try {
     return [...document.getElementsByClassName("mModelMenuItem")].filter(
       (e) => e.dataset.model_title == model_title
-    )[0].dataset.model_hash;
+    )[0].dataset.model_hash
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -271,60 +271,60 @@ function getSelectedModelHash() {
   try {
     return [...document.getElementsByClassName("mModelMenuItem")].filter(
       (e) => e.selected == true
-    )[0].dataset.model_hash;
+    )[0].dataset.model_hash
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 function selectModelUi(model_hash) {
-  model_element = getModelElementByHash(model_hash);
-  model_element.selected = true;
+  model_element = getModelElementByHash(model_hash)
+  model_element.selected = true
 }
 
 function autoFillInModel(model_hash) {
   // unCheckAllSamplers()
-  model_element = getModelElementByHash(model_hash);
-  selectModelUi(model_hash);
+  model_element = getModelElementByHash(model_hash)
+  selectModelUi(model_hash)
   // model_element.
-  const model_title = model_element.dataset.model_title;
-  return model_title;
+  const model_title = model_element.dataset.model_title
+  return model_title
 }
 ////// End Models//////////
 
 ////// Start Init Image && Init Image Mask//////////
 
 function getInitImageElement() {
-  const ini_image_element = document.getElementById("init_image");
-  return ini_image_element;
+  const ini_image_element = document.getElementById("init_image")
+  return ini_image_element
 }
 function setInitImageSrc(image_src) {
-  const ini_image_element = getInitImageElement();
-  ini_image_element.src = image_src;
+  const ini_image_element = getInitImageElement()
+  ini_image_element.src = image_src
 }
 
 function getInitImageMaskElement() {
-  const ini_image_mask_element = document.getElementById("init_image_mask");
-  return ini_image_mask_element;
+  const ini_image_mask_element = document.getElementById("init_image_mask")
+  return ini_image_mask_element
 }
 function setInitImageMaskSrc(image_src) {
-  const ini_image_mask_element = getInitImageMaskElement();
-  ini_image_mask_element.src = image_src;
+  const ini_image_mask_element = getInitImageMaskElement()
+  ini_image_mask_element.src = image_src
 }
 ////// End Init Image && Init Image Mask//////////
 
 ////// Start Generate Buttons //////////
 
 function getGenerateButtonsElements() {
-  generate_buttons = [...document.getElementsByClassName("btnGenerateClass")];
-  return generate_buttons;
+  generate_buttons = [...document.getElementsByClassName("btnGenerateClass")]
+  return generate_buttons
 }
 function setGenerateButtonsColor(addClassName, removeClassName) {
-  const buttons = getGenerateButtonsElements();
+  const buttons = getGenerateButtonsElements()
   buttons.forEach((button) => {
-    button.classList.add(addClassName);
-    button.classList.remove(removeClassName);
-  });
+    button.classList.add(addClassName)
+    button.classList.remove(removeClassName)
+  })
 }
 
 ////// End Generate Buttons //////////
@@ -332,12 +332,12 @@ function setGenerateButtonsColor(addClassName, removeClassName) {
 ////// Start Servers Status //////////
 
 function setAutomaticStatus(newStatusClass, oldStatusClass) {
-  document.getElementById("automaticStatus").classList.add(newStatusClass);
-  document.getElementById("automaticStatus").classList.remove(oldStatusClass);
+  document.getElementById("automaticStatus").classList.add(newStatusClass)
+  document.getElementById("automaticStatus").classList.remove(oldStatusClass)
 }
 function setProxyServerStatus(newStatusClass, oldStatusClass) {
-  document.getElementById("proxyServerStatus").classList.add(newStatusClass);
-  document.getElementById("proxyServerStatus").classList.remove(oldStatusClass);
+  document.getElementById("proxyServerStatus").classList.add(newStatusClass)
+  document.getElementById("proxyServerStatus").classList.remove(oldStatusClass)
 }
 ////// End Servers Status //////////
 
@@ -365,67 +365,67 @@ const defaultSettings = {
   seed: -1,
   samplers: null,
   mask_content: null,
-};
+}
 
 document.getElementById("btnResetSettings").addEventListener("click", () => {
-  autoFillDefaultSettings(defaultSettings);
-});
+  autoFillDefaultSettings(defaultSettings)
+})
 document.getElementById("btnSnapshot").addEventListener("click", async () => {
-  await psapi.snapshot_layerExe();
-});
+  await psapi.snapshot_layerExe()
+})
 
 function getBatchNumber() {
-  return document.getElementById("tiNumberOfImages").value;
+  return document.getElementById("tiNumberOfImages").value
 }
 function autoFillInBatchNumber(batch_number) {
-  document.getElementById("tiNumberOfImages").value = String(batch_number);
+  document.getElementById("tiNumberOfImages").value = String(batch_number)
 }
 
 function getSteps() {
-  return document.getElementById("tiNumberOfSteps").value;
+  return document.getElementById("tiNumberOfSteps").value
 }
 function autoFillInSteps(steps) {
-  document.getElementById("tiNumberOfSteps").value = String(steps);
+  document.getElementById("tiNumberOfSteps").value = String(steps)
 }
 function autoFillDefaultSettings(default_settings) {
-  autoFillSettings(default_settings);
+  autoFillSettings(default_settings)
 }
 
 function setCFG(cfg_value) {
-  document.getElementById("slCfgScale").value = cfg_value;
+  document.getElementById("slCfgScale").value = cfg_value
 }
 function getCFG() {
-  return document.getElementById("slCfgScale").value;
+  return document.getElementById("slCfgScale").value
 }
 
 function autoFillSettings(settings) {
   try {
     //reset all UI settings except model selection and sampler selection
-    autoFillInPrompt(settings["positive_prompt"]);
-    autoFillInNegativePrompt(settings["negative_prompt"]);
-    autoFillInBatchNumber(settings["batch_number"]);
-    autoFillInSteps(settings["steps"]);
-    autoFillInWidth(settings["width"]);
-    autoFillInHeight(settings["height"]);
+    autoFillInPrompt(settings["positive_prompt"])
+    autoFillInNegativePrompt(settings["negative_prompt"])
+    autoFillInBatchNumber(settings["batch_number"])
+    autoFillInSteps(settings["steps"])
+    autoFillInWidth(settings["width"])
+    autoFillInHeight(settings["height"])
     autoFillInHiResFixs(
       settings["firstphase_width"],
       settings["firstphase_height"]
-    );
-    document.getElementById("slCfgScale").value = settings["cfg"];
-    autoFillInDenoisingStrength(settings["denoising_strength"]);
+    )
+    document.getElementById("slCfgScale").value = settings["cfg"]
+    autoFillInDenoisingStrength(settings["denoising_strength"])
     autoFillInSliderUi(
       settings["hi_res_denoising_strength"],
       "hrDenoisingStrength",
       "hDenoisingStrength",
       100
-    );
-    document.getElementById("slMaskBlur").value = settings["mask_blur"];
+    )
+    document.getElementById("slMaskBlur").value = settings["mask_blur"]
     document.getElementById("chInpaintFullRes").checked =
-      settings["inpaint_at_full_res"];
-    setHiResFixs(settings["hi_res_fix"]);
-    document.getElementById("tiSeed").value = String(settings["seed"]);
+      settings["inpaint_at_full_res"]
+    setHiResFixs(settings["hi_res_fix"])
+    document.getElementById("tiSeed").value = String(settings["seed"])
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 ////// End Reset Settings Button //////////
@@ -433,62 +433,62 @@ function autoFillSettings(settings) {
 function getMaskBlur() {
   const isDisabled = document
     .getElementById("slMaskBlur")
-    .hasAttribute("disabled");
-  let mask_blur = 0;
+    .hasAttribute("disabled")
+  let mask_blur = 0
   if (isDisabled) {
-    mask_blur = 0;
+    mask_blur = 0
   } else {
-    mask_blur = document.getElementById("slMaskBlur").value;
+    mask_blur = document.getElementById("slMaskBlur").value
   }
-  return mask_blur;
+  return mask_blur
 }
 function getUseSharpMask() {
-  const isChecked = document.getElementById("chUseSharpMask").checked;
-  return isChecked;
+  const isChecked = document.getElementById("chUseSharpMask").checked
+  return isChecked
 }
 document.getElementById("chUseSharpMask").addEventListener("change", (ev) => {
-  const isChecked = ev.target.checked;
+  const isChecked = ev.target.checked
   if (isChecked) {
-    document.getElementById("slMaskBlur").setAttribute("disabled");
+    document.getElementById("slMaskBlur").setAttribute("disabled")
   } else {
-    document.getElementById("slMaskBlur").removeAttribute("disabled");
+    document.getElementById("slMaskBlur").removeAttribute("disabled")
   }
-});
+})
 
 document.getElementById("chUseSmartObject").addEventListener("change", (ev) => {
-  const isChecked = ev.target.checked;
+  const isChecked = ev.target.checked
   if (isChecked) {
-    g_b_use_smart_object = true;
+    g_b_use_smart_object = true
   } else {
-    g_b_use_smart_object = false;
+    g_b_use_smart_object = false
   }
-});
+})
 
 function getPromptShortcut() {
   //read json string
   //converted into json object
   const prompt_shortcut_string =
-    document.getElementById("taPromptShortcut").value;
-  const prompt_shortcut = JSON.parse(prompt_shortcut_string);
-  return prompt_shortcut;
+    document.getElementById("taPromptShortcut").value
+  const prompt_shortcut = JSON.parse(prompt_shortcut_string)
+  return prompt_shortcut
 }
 function setPromptShortcut(prompt_shortcut) {
   //prompt_shortcut is json object
   //convert it into pretty json string and save it in the prompt shortcut textarea
-  var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 7);
-  document.getElementById("taPromptShortcut").value = JSONInPrettyFormat;
+  var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 7)
+  document.getElementById("taPromptShortcut").value = JSONInPrettyFormat
 }
 
 ////start selection mode/////
 function getSelectionMode() {
   return [...document.getElementsByClassName("rbSelectionMode")].filter(
     (e) => e.checked == true
-  )[0].value;
+  )[0].value
 }
 function getMaskContent() {
   return [...document.getElementsByClassName("rbMaskContent")].filter(
     (e) => e.checked == true
-  )[0].value;
+  )[0].value
 }
 function setMaskContent(value) {
   try {
@@ -497,46 +497,46 @@ function setMaskContent(value) {
     //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
     const mask_content_element = [
       ...document.getElementsByClassName("rbMaskContent"),
-    ].filter((e) => e.value == value)[0];
-    mask_content_element.checked = true;
-    return mask_content_element;
+    ].filter((e) => e.value == value)[0]
+    mask_content_element.checked = true
+    return mask_content_element
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
 function addHistoryButtonsHtml(img_html) {
   // Create new container element
-  const container = document.createElement("div");
+  const container = document.createElement("div")
 
-  container.className = "viewer-image-container";
+  container.className = "viewer-image-container"
 
-  const elem = document.getElementById("svg_sp_btn");
+  const elem = document.getElementById("svg_sp_btn")
   // Create a copy of it
-  const clone = elem.cloneNode(true);
-  const button = clone;
-  button.style.display = null;
-  button.removeAttribute("id");
+  const clone = elem.cloneNode(true)
+  const button = clone
+  button.style.display = null
+  button.removeAttribute("id")
 
-  button.setAttribute("title", "place the image on the canvas");
+  button.setAttribute("title", "place the image on the canvas")
 
   // Create button element
   // const button = document.createElement('sp-button');
-  button.className = "viewer-image-button";
+  button.className = "viewer-image-button"
   // button.innerHTML = "Button";
 
   button.addEventListener("click", async () => {
     //set init image event listener, use when settion is active
-    let image_path = img_html.dataset.path;
-    const image_path_escape = image_path.replace(/\o/g, "/o"); //escape string "\o" in "\output"
-    await placeEmbedded(image_path_escape);
-  });
+    let image_path = img_html.dataset.path
+    const image_path_escape = image_path.replace(/\o/g, "/o") //escape string "\o" in "\output"
+    await placeEmbedded(image_path_escape)
+  })
 
   // Append elements to container
-  container.appendChild(img_html);
-  container.appendChild(button);
+  container.appendChild(img_html)
+  container.appendChild(button)
 
-  return container;
+  return container
 }
 
 ///end selection mode////
@@ -588,4 +588,4 @@ module.exports = {
   getMaskContent,
   setMaskContent,
   addHistoryButtonsHtml,
-};
+}
diff --git a/utility/layer.js b/utility/layer.js
index a2eed18..c34bb95 100644
--- a/utility/layer.js
+++ b/utility/layer.js
@@ -1,13 +1,13 @@
-const { batchPlay } = require("photoshop").action;
-const { executeAsModal } = require("photoshop").core;
-const { cleanLayers, getLayerIndex, selectLayers } = require("../psapi");
+const { batchPlay } = require("photoshop").action
+const { executeAsModal } = require("photoshop").core
+const { cleanLayers, getLayerIndex, selectLayers } = require("../psapi")
 
 async function createNewLayerExe(layerName) {
   await executeAsModal(async () => {
-    await createNewLayerCommand(layerName);
-  });
-  const new_layer = await app.activeDocument.activeLayers[0];
-  return new_layer;
+    await createNewLayerCommand(layerName)
+  })
+  const new_layer = await app.activeDocument.activeLayers[0]
+  return new_layer
 }
 
 async function createNewLayerCommand(layerName) {
@@ -15,14 +15,14 @@ async function createNewLayerCommand(layerName) {
     name: layerName,
     opacity: 100,
     mode: "normal",
-  });
+  })
 }
 
 async function deleteLayers(layers) {
   try {
-    await cleanLayers(layers);
+    await cleanLayers(layers)
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 
@@ -39,27 +39,27 @@ async function getIndexCommand() {
         _value: "targetEnum",
       },
     ],
-  };
+  }
   const result = await batchPlay([command], {
     synchronousExecution: true,
     modalBehavior: "execute",
-  });
+  })
 
-  return result;
+  return result
 }
 
 async function getIndexExe() {
-  let index;
+  let index
   await executeAsModal(async () => {
-    index = await getIndexCommand();
-  });
+    index = await getIndexCommand()
+  })
 
-  return index;
+  return index
 }
-const photoshop = require("photoshop");
+const photoshop = require("photoshop")
 
 const collapseFolderCommand = async (expand = false, recursive = false) => {
-  let result;
+  let result
   try {
     result = await batchPlay(
       [
@@ -81,23 +81,23 @@ const collapseFolderCommand = async (expand = false, recursive = false) => {
         },
       ],
       { synchronousExecution: true }
-    );
+    )
   } catch (e) {
-    console.error(e.message);
+    console.error(e.message)
   }
-  return result;
-};
+  return result
+}
 async function collapseFolderExe(layers, expand = false, recursive = false) {
   for (let layer of layers) {
     try {
       await executeAsModal(async () => {
-        const is_visible = await layer.visible; // don't change the visiblity of the layer when collapsing
-        await selectLayers([layer]);
-        await collapseFolderCommand(expand, recursive);
-        layer.visible = is_visible;
-      });
+        const is_visible = await layer.visible // don't change the visiblity of the layer when collapsing
+        await selectLayers([layer])
+        await collapseFolderCommand(expand, recursive)
+        layer.visible = is_visible
+      })
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 }
@@ -107,4 +107,4 @@ module.exports = {
   deleteLayers,
   getIndexExe,
   collapseFolderExe,
-};
+}
diff --git a/utility/presets/preset.js b/utility/presets/preset.js
index fd795e9..ae18b77 100644
--- a/utility/presets/preset.js
+++ b/utility/presets/preset.js
@@ -20,7 +20,7 @@ let settings = {
   seed: null,
   samplers: null,
   mask_content: null,
-};
+}
 
 let LatentNoiseSettings = {
   model: null,
@@ -44,7 +44,7 @@ let LatentNoiseSettings = {
   seed: null,
   samplers: null,
   mask_content: "2",
-};
+}
 
 let FillSettings = {
   model: null,
@@ -68,7 +68,7 @@ let FillSettings = {
   seed: null,
   samplers: null,
   mask_content: "0",
-};
+}
 let OriginalSettings = {
   model: null,
   prompt_shortcut: null,
@@ -91,7 +91,7 @@ let OriginalSettings = {
   seed: null,
   samplers: null,
   mask_content: "1",
-};
+}
 
 function nullAllSettings() {}
 
@@ -106,4 +106,4 @@ module.exports = {
   LatentNoiseSettings,
   FillSettings,
   OriginalSettings,
-};
+}
diff --git a/utility/sd_scripts/horde.js b/utility/sd_scripts/horde.js
index 692bdb3..9142c64 100644
--- a/utility/sd_scripts/horde.js
+++ b/utility/sd_scripts/horde.js
@@ -2,74 +2,74 @@ async function requestModelsHorde() {
   //get the models list from url
   // https://stablehorde.net/api/v2/status/models
 
-  console.log("requestModelsHorde: ");
+  console.log("requestModelsHorde: ")
 
-  const full_url = "https://stablehorde.net/api/v2/status/models";
-  let request = await fetch(full_url);
-  let json = await request.json();
-  console.log("hordes models json:");
-  console.dir(json);
+  const full_url = "https://stablehorde.net/api/v2/status/models"
+  let request = await fetch(full_url)
+  let json = await request.json()
+  console.log("hordes models json:")
+  console.dir(json)
 
-  return json;
+  return json
 }
 
 function addHordeModelMenuItem(model_title, model_name) {
   // console.log(model_title,model_name)
-  const menu_item_element = document.createElement("sp-menu-item");
-  menu_item_element.className = "mModelMenuItemHorde";
-  menu_item_element.innerHTML = model_title;
+  const menu_item_element = document.createElement("sp-menu-item")
+  menu_item_element.className = "mModelMenuItemHorde"
+  menu_item_element.innerHTML = model_title
 
-  menu_item_element.dataset.name = model_name;
-  return menu_item_element;
+  menu_item_element.dataset.name = model_name
+  return menu_item_element
 }
 
 async function refreshModelsHorde() {
   try {
-    let g_models_horde = await requestModelsHorde();
+    let g_models_horde = await requestModelsHorde()
     // const models_menu_element = document.getElementById('mModelsMenu')
     // models_menu_element.value = ""
     //(optional): sort the models
 
     g_models_horde.sort(function (a, b) {
-      return b.count - a.count;
-    });
+      return b.count - a.count
+    })
     // g_models_horde = g_models_horde.sort( compareModelCounts );
-    document.getElementById("mModelsMenuHorde").innerHTML = "";
-    let model_item_random = addHordeModelMenuItem("Random", "Random");
-    model_item_random.selected = true;
-    document.getElementById("mModelsMenuHorde").appendChild(model_item_random);
+    document.getElementById("mModelsMenuHorde").innerHTML = ""
+    let model_item_random = addHordeModelMenuItem("Random", "Random")
+    model_item_random.selected = true
+    document.getElementById("mModelsMenuHorde").appendChild(model_item_random)
     for (let model of g_models_horde) {
-      console.log(model.name, model.count);
-      const model_html_tile = `${model.name}: ${model.count}`;
+      console.log(model.name, model.count)
+      const model_html_tile = `${model.name}: ${model.count}`
       const model_item_element = addHordeModelMenuItem(
         model_html_tile,
         model.name
-      );
+      )
 
       document
         .getElementById("mModelsMenuHorde")
-        .appendChild(model_item_element);
+        .appendChild(model_item_element)
     }
   } catch (e) {
-    console.warn(e);
+    console.warn(e)
   }
 }
 function getModelHorde() {
   return [...document.getElementsByClassName("mModelMenuItemHorde")].filter(
     (e) => e.selected == true
-  )[0].dataset.name;
+  )[0].dataset.name
 }
 function getUseHorde() {
-  const isChecked = document.getElementById("chUseHorde").checked;
-  return isChecked;
+  const isChecked = document.getElementById("chUseHorde").checked
+  return isChecked
 }
 function getScriptArgs() {
-  const model = getModelHorde();
-  const b_nsfw = document.getElementById("chUseNSFW").checked;
-  const b_shared_laion = document.getElementById("chUseSharedLaion").checked;
+  const model = getModelHorde()
+  const b_nsfw = document.getElementById("chUseNSFW").checked
+  const b_shared_laion = document.getElementById("chUseSharedLaion").checked
 
-  let seed_variation = document.getElementById("slSeedVariation").value;
-  seed_variation = parseInt(seed_variation);
+  let seed_variation = document.getElementById("slSeedVariation").value
+  seed_variation = parseInt(seed_variation)
   const script_args_json = {
     model: model,
     nsfw: b_nsfw,
@@ -78,20 +78,20 @@ function getScriptArgs() {
     post_processing_1: "None",
     post_processing_2: "None",
     post_processing_3: "None",
-  };
-  const script_args = Object.values(script_args_json);
-  return script_args;
+  }
+  const script_args = Object.values(script_args_json)
+  return script_args
 }
 
 document
   .getElementById("btnRefreshModelsHorde")
   .addEventListener("click", async () => {
-    await refreshModelsHorde();
-  });
+    await refreshModelsHorde()
+  })
 
-const script_name = "Run on Stable Horde";
+const script_name = "Run on Stable Horde"
 
-refreshModelsHorde(); //refresh the model when importing the script
+refreshModelsHorde() //refresh the model when importing the script
 
 module.exports = {
   requestModelsHorde,
@@ -100,4 +100,4 @@ module.exports = {
   getUseHorde,
   getScriptArgs,
   script_name,
-};
+}
diff --git a/utility/sdapi/config.js b/utility/sdapi/config.js
index 17c980e..22c5167 100644
--- a/utility/sdapi/config.js
+++ b/utility/sdapi/config.js
@@ -1,43 +1,43 @@
-const sdapi = require("../../sdapi");
+const sdapi = require("../../sdapi")
 
 class SdConfig {
   constructor() {
-    this.config; //store sd options
+    this.config //store sd options
   }
 
   async getConfig() {
     try {
-      this.config = await sdapi.requestGetConfig();
-      return this.config;
+      this.config = await sdapi.requestGetConfig()
+      return this.config
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   getUpscalerModels() {
     try {
       // const upscaler_comp = this.config.components.filter(comp =>comp.props.elem_id === "txt2img_hr_upscaler")[0]
-      let upscaler_comp;
-      console.log("this.config: ", this.config);
+      let upscaler_comp
+      console.log("this.config: ", this.config)
       for (let comp of this.config.components) {
         if (comp?.props?.elem_id) {
-          const elem_id = comp?.props?.elem_id;
+          const elem_id = comp?.props?.elem_id
           if (elem_id === "txt2img_hr_upscaler") {
-            console.log("elem_id: ", elem_id);
-            upscaler_comp = comp;
-            break;
+            console.log("elem_id: ", elem_id)
+            upscaler_comp = comp
+            break
           }
         }
       }
-      console.log("upscaler_comp: ", upscaler_comp);
-      const upscalers = upscaler_comp.props.choices;
+      console.log("upscaler_comp: ", upscaler_comp)
+      const upscalers = upscaler_comp.props.choices
 
-      return upscalers;
+      return upscalers
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 }
 
 module.exports = {
   SdConfig,
-};
+}
diff --git a/utility/sdapi/options.js b/utility/sdapi/options.js
index fa94e76..a412417 100644
--- a/utility/sdapi/options.js
+++ b/utility/sdapi/options.js
@@ -1,9 +1,9 @@
-const sdapi = require("../../sdapi");
+const sdapi = require("../../sdapi")
 
 class SdOptions {
   constructor() {
     // this.status = false // true if we have a valid copy of sd options, false otherwise
-    this.options; //store sd options
+    this.options //store sd options
   }
 
   async getOptions() {
@@ -16,19 +16,19 @@ class SdOptions {
       //     this.status = true
       //   }
       // }
-      this.options = await sdapi.requestGetOptions();
-      return this.options;
+      this.options = await sdapi.requestGetOptions()
+      return this.options
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   getCurrentModel() {
-    const current_model = this.options?.sd_model_checkpoint;
-    return current_model;
+    const current_model = this.options?.sd_model_checkpoint
+    return current_model
   }
   getInpaintingMaskWeight() {
-    const inpainting_mask_weight = this.options?.inpainting_mask_weight;
-    return inpainting_mask_weight;
+    const inpainting_mask_weight = this.options?.inpainting_mask_weight
+    return inpainting_mask_weight
   }
 }
 // const sd_options = new SdOptions()
@@ -36,4 +36,4 @@ class SdOptions {
 
 module.exports = {
   SdOptions,
-};
+}
diff --git a/utility/session.js b/utility/session.js
index 581b7b1..7c97c4a 100644
--- a/utility/session.js
+++ b/utility/session.js
@@ -1,93 +1,93 @@
-const { cleanLayers } = require("../psapi");
+const { cleanLayers } = require("../psapi")
 
 const SessionState = {
   Active: "active",
   Inactive: "inactive",
-};
+}
 const GarbageCollectionState = {
   Accept: "accept", // accept all generated images
   Discard: "discard", //discard all generated images
   DiscardSelected: "discard_selected",
   AcceptSelected: "accept_selected", //accept_selected only chosen images
-};
+}
 
 class GenerationSession {
   constructor() {
     //this should be unique session id and it also should act as the total number of sessions been created in the project
-    this.id = 0;
-    this.state = SessionState["Inactive"];
-    this.mode = "txt2img";
-    this.selectionInfo = null;
-    this.isFirstGeneration = true; // only before the first generation is requested should this be true
-    this.outputGroup;
-    this.prevOutputGroup;
-    this.isLoadingActive = false;
+    this.id = 0
+    this.state = SessionState["Inactive"]
+    this.mode = "txt2img"
+    this.selectionInfo = null
+    this.isFirstGeneration = true // only before the first generation is requested should this be true
+    this.outputGroup
+    this.prevOutputGroup
+    this.isLoadingActive = false
   }
   isActive() {
-    return this.state === SessionState["Active"];
+    return this.state === SessionState["Active"]
   }
   isInactive() {
-    return this.state === SessionState["Inactive"];
+    return this.state === SessionState["Inactive"]
   }
   activate() {
-    this.state = SessionState["Active"];
+    this.state = SessionState["Active"]
   }
   deactivate() {
-    this.state = SessionState["Inactive"];
+    this.state = SessionState["Inactive"]
   }
   name() {
-    return `session - ${this.id}`;
+    return `session - ${this.id}`
   }
   async startSession() {
-    this.id += 1; //increment the session id for each session we start
-    this.activate();
-    this.isFirstGeneration = true; // only before the first generation is requested should this be true
+    this.id += 1 //increment the session id for each session we start
+    this.activate()
+    this.isFirstGeneration = true // only before the first generation is requested should this be true
 
-    console.log("current session id: ", this.id);
+    console.log("current session id: ", this.id)
     try {
-      const session_name = this.name();
-      const activeLayers = await app.activeDocument.activeLayers;
-      await psapi.unselectActiveLayersExe(); // unselect all layer so the create group is place at the top of the document
-      this.prevOutputGroup = this.outputGroup;
-      const outputGroup = await psapi.createEmptyGroup(session_name);
-      this.outputGroup = outputGroup;
-      await psapi.selectLayersExe(activeLayers);
+      const session_name = this.name()
+      const activeLayers = await app.activeDocument.activeLayers
+      await psapi.unselectActiveLayersExe() // unselect all layer so the create group is place at the top of the document
+      this.prevOutputGroup = this.outputGroup
+      const outputGroup = await psapi.createEmptyGroup(session_name)
+      this.outputGroup = outputGroup
+      await psapi.selectLayersExe(activeLayers)
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   async endSession(garbage_collection_state) {
     try {
-      this.state = SessionState["Inactive"]; // end the session by deactivate it
+      this.state = SessionState["Inactive"] // end the session by deactivate it
 
-      this.deactivate();
+      this.deactivate()
 
       if (garbage_collection_state === GarbageCollectionState["Accept"]) {
-        await acceptAll();
+        await acceptAll()
       } else if (
         garbage_collection_state === GarbageCollectionState["Discard"]
       ) {
         //this should be discardAll()
 
-        await discardAll();
+        await discardAll()
       } else if (
         garbage_collection_state === GarbageCollectionState["DiscardSelected"]
       ) {
         //this should be discardAllExcept(selectedLayers)
-        await discardSelected(); //this will discard what is not been highlighted
+        await discardSelected() //this will discard what is not been highlighted
       } else if (
         garbage_collection_state === GarbageCollectionState["AcceptSelected"]
       ) {
         //this should be discardAllExcept(selectedLayers)
-        await discard(); //this will discard what is not been highlighted
+        await discard() //this will discard what is not been highlighted
       }
 
       //delete the old selection area
       // g_selection = {}
 
-      this.isFirstGeneration = true; // only before the first generation is requested should this be true
+      this.isFirstGeneration = true // only before the first generation is requested should this be true
       // const is_visible = await this.outputGroup.visible
-      await util_layer.collapseFolderExe([this.outputGroup], false); // close the folder group
+      await util_layer.collapseFolderExe([this.outputGroup], false) // close the folder group
       // this.outputGroup.visible = is_visible
 
       if (
@@ -96,12 +96,12 @@ class GenerationSession {
       ) {
         //create "Mask -- Paint White to Mask -- temporary" layer if current session was inpiant and the selected session is inpaint
         // the current inpaint session ended on inpaint
-        g_b_mask_layer_exist = false;
-        await util_layer.deleteLayers([g_inpaint_mask_layer]);
-        await createTempInpaintMaskLayer();
+        g_b_mask_layer_exist = false
+        await util_layer.deleteLayers([g_inpaint_mask_layer])
+        await createTempInpaintMaskLayer()
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   async closePreviousOutputGroup() {
@@ -110,20 +110,20 @@ class GenerationSession {
 
       if (this.prevOutputGroup) {
         // const is_visible = await this.prevOutputGroup.visible
-        await util_layer.collapseFolderExe([this.prevOutputGroup], false); // close the folder group
+        await util_layer.collapseFolderExe([this.prevOutputGroup], false) // close the folder group
         // and reselect the current output folder for clarity
-        await psapi.selectLayersExe([this.outputGroup]);
+        await psapi.selectLayersExe([this.outputGroup])
         // this.prevOutputGroup.visible = is_visible
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   isSameMode(selected_mode) {
     if (this.mode === selected_mode) {
-      return true;
+      return true
     }
-    return false;
+    return false
   }
   loadLastSession() {
     //load the last session from the server
@@ -132,12 +132,12 @@ class GenerationSession {
     //all session info will be saved in a json file in the project folder
   }
   async moveToTopOfOutputGroup(layer) {
-    const output_group_id = await this.outputGroup.id;
-    let group_index = await psapi.getLayerIndex(output_group_id);
-    const indexOffset = 1; //1 for background, 0 if no background exist
+    const output_group_id = await this.outputGroup.id
+    let group_index = await psapi.getLayerIndex(output_group_id)
+    const indexOffset = 1 //1 for background, 0 if no background exist
     await executeAsModal(async () => {
-      await psapi.moveToGroupCommand(group_index - indexOffset, layer.id);
-    });
+      await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
+    })
   }
 }
 
@@ -145,4 +145,4 @@ module.exports = {
   GenerationSession,
   GarbageCollectionState,
   SessionState,
-};
+}
diff --git a/utility/tips.js b/utility/tips.js
index 76c597d..83efd69 100644
--- a/utility/tips.js
+++ b/utility/tips.js
@@ -35,6 +35,6 @@ const tips_json = {
   mask_expansion:
     "the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur",
   mask_content_fill: "",
-};
+}
 
-module.exports = { tips_json };
+module.exports = { tips_json }
diff --git a/utility/ui.js b/utility/ui.js
index d3f0c53..42a0b23 100644
--- a/utility/ui.js
+++ b/utility/ui.js
@@ -1,6 +1,6 @@
-const { loadHistory } = require("../sdapi");
-const html_manip = require("./html_manip");
-const presets = require("./presets/preset");
+const { loadHistory } = require("../sdapi")
+const html_manip = require("./html_manip")
+const presets = require("./presets/preset")
 
 class UI {
   constructor() {}
@@ -10,93 +10,93 @@ class UI {
 
     const accept_class_btns = Array.from(
       document.getElementsByClassName("acceptClass")
-    );
+    )
 
     const discard_class_btns = Array.from(
       document.getElementsByClassName("discardClass")
-    );
+    )
 
     const discard_selected_class_btns = Array.from(
       document.getElementsByClassName("discardSelectedClass")
-    );
+    )
 
     const accept_selected_class_btns = Array.from(
       document.getElementsByClassName("acceptSelectedClass")
-    );
+    )
 
     //show the accept and discard buttons when a new session is active
     accept_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
+    )
     discard_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
+    )
     discard_selected_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
+    )
     accept_selected_class_btns.forEach(
       (element) => (element.style.display = "inline-block")
-    );
+    )
 
-    this.generateMoreUI();
+    this.generateMoreUI()
   }
   onActiveSessionUI() {}
   generateModeUI(mode) {
     const generate_btns = Array.from(
       document.getElementsByClassName("btnGenerateClass")
-    );
+    )
     generate_btns.forEach((element) => {
-      element.textContent = `Generate ${mode}`;
-    });
-    html_manip.setGenerateButtonsColor("generate", "generate-more");
+      element.textContent = `Generate ${mode}`
+    })
+    html_manip.setGenerateButtonsColor("generate", "generate-more")
   }
   generateMoreUI() {
     const generate_btns = Array.from(
       document.getElementsByClassName("btnGenerateClass")
-    );
+    )
     generate_btns.forEach((element) => {
-      element.textContent = `Generate More`;
-    });
-    html_manip.setGenerateButtonsColor("generate-more", "generate");
+      element.textContent = `Generate More`
+    })
+    html_manip.setGenerateButtonsColor("generate-more", "generate")
   }
 
   onEndSessionUI() {
     const accept_class_btns = Array.from(
       document.getElementsByClassName("acceptClass")
-    );
+    )
 
     const discard_class_btns = Array.from(
       document.getElementsByClassName("discardClass")
-    );
+    )
     const discard_selected_class_btns = Array.from(
       document.getElementsByClassName("discardSelectedClass")
-    );
+    )
 
     const accept_selected_class_btns = Array.from(
       //Node: change customClass to acceptSelectedClass
       document.getElementsByClassName("acceptSelectedClass")
-    );
+    )
 
-    accept_class_btns.forEach((element) => (element.style.display = "none"));
-    discard_class_btns.forEach((element) => (element.style.display = "none"));
+    accept_class_btns.forEach((element) => (element.style.display = "none"))
+    discard_class_btns.forEach((element) => (element.style.display = "none"))
     discard_selected_class_btns.forEach(
       (element) => (element.style.display = "none")
-    );
+    )
 
     accept_selected_class_btns.forEach(
       (element) => (element.style.display = "none")
-    );
+    )
 
-    this.generateModeUI(g_sd_mode);
+    this.generateModeUI(g_sd_mode)
   }
 
   setGenerateBtnText(textContent) {
     const generate_btns = Array.from(
       document.getElementsByClassName("btnGenerateClass")
-    );
+    )
     generate_btns.forEach((element) => {
-      element.textContent = textContent;
-    });
+      element.textContent = textContent
+    })
   }
 }
 
@@ -126,18 +126,18 @@ class UI {
 
 class UIElement {
   constructor() {
-    this.name;
-    this.html_elem;
-    this.sd_value;
+    this.name
+    this.html_elem
+    this.sd_value
   }
   setValue() {}
   getValue() {}
 }
 function createUIElement(getter, setter) {
-  let ui_element_obj = new ui.UIElement();
-  ui_element_obj.getValue = getter;
-  ui_element_obj.setValue = setter;
-  return ui_element_obj;
+  let ui_element_obj = new ui.UIElement()
+  ui_element_obj.getValue = getter
+  ui_element_obj.setValue = setter
+  return ui_element_obj
 }
 class UISettings {
   // get and set the settings of the ui. the stable diffusion settings not the human friendly settings
@@ -148,37 +148,37 @@ class UISettings {
     this.width = createUIElement(
       html_manip.getWidth,
       html_manip.autoFillInWidth
-    );
+    )
     this.height = createUIElement(
       html_manip.getHeight,
       html_manip.autoFillInHeight
-    );
+    )
     this.steps = createUIElement(
       html_manip.getSteps,
       html_manip.autoFillInSteps
-    );
+    )
     this.batch_number = createUIElement(
       html_manip.getBatchNumber,
       html_manip.autoFillInBatchNumber
-    );
+    )
     this.firstphase_width = createUIElement(
       html_manip.getHrWidth,
       html_manip.autoFillInHRWidth
-    );
+    )
     this.firstphase_height = createUIElement(
       html_manip.getHrHeight,
       html_manip.autoFillInHRHeight
-    );
-    this.cfg = createUIElement(html_manip.getCFG, html_manip.setCFG);
+    )
+    this.cfg = createUIElement(html_manip.getCFG, html_manip.setCFG)
     this.denoising_strength = createUIElement(
       html_manip.getDenoisingStrength,
       html_manip.autoFillInDenoisingStrength
-    );
+    )
 
     this.mask_content = createUIElement(
       html_manip.getMaskContent,
       html_manip.setMaskContent
-    );
+    )
     this.uiElements = {
       // model: null,
       // prompt_shortcut: null,
@@ -201,17 +201,17 @@ class UISettings {
       // seed:-1,
       // samplers: null,
       mask_content: this.mask_content,
-    };
+    }
   }
 
   autoFillInSettings(settings) {
     for (const [name, value] of Object.entries(settings)) {
       if (this.uiElements.hasOwnProperty(name) && value) {
         //get the values for debugging
-        const old_value = this.uiElements[name].getValue();
-        console.log("(name,old_value) => newValue:", name, old_value, value);
+        const old_value = this.uiElements[name].getValue()
+        console.log("(name,old_value) => newValue:", name, old_value, value)
         //set the value
-        this.uiElements[name].setValue(value);
+        this.uiElements[name].setValue(value)
       }
     }
   }
@@ -219,25 +219,25 @@ class UISettings {
 // const ui_settings = new UISettings()
 
 function loadPreset(ui_settings, preset) {
-  console.log("preset:", preset);
-  ui_settings.autoFillInSettings(preset);
+  console.log("preset:", preset)
+  ui_settings.autoFillInSettings(preset)
 }
 
 function loadLatentNoiseSettings(ui_settings) {
-  loadPreset(ui_settings, presets.LatentNoiseSettings);
+  loadPreset(ui_settings, presets.LatentNoiseSettings)
 }
 
 function loadFillSettings(ui_settings) {
-  loadPreset(ui_settings, presets.FillSettings);
+  loadPreset(ui_settings, presets.FillSettings)
 }
 function loadOriginalSettings(ui_settings) {
-  loadPreset(ui_settings, presets.OriginalSettings);
+  loadPreset(ui_settings, presets.OriginalSettings)
 }
 let loadedPresets = {
   fill: loadFillSettings,
   original: loadOriginalSettings,
   "latent noise": loadLatentNoiseSettings,
-};
+}
 
 module.exports = {
   UI,
@@ -247,4 +247,4 @@ module.exports = {
   loadFillSettings,
 
   loadedPresets,
-};
+}
diff --git a/viewer.js b/viewer.js
index 968cfda..86fcbe9 100644
--- a/viewer.js
+++ b/viewer.js
@@ -19,39 +19,39 @@
 // 	* viewe()
 // 	* isLayerValid()
 
-const psapi = require("./psapi");
+const psapi = require("./psapi")
 
 const ViewerObjState = {
   Delete: "delete",
   Unlink: "unlink",
-};
+}
 
 class ViewerImage {
   constructor() {
-    this.img_html = null;
-    this.is_highlighted = false;
-    this.can_highlight = true;
-    this.is_active = false; // active is a temporary highlight
-    this.state = ViewerObjState["Unlink"];
+    this.img_html = null
+    this.is_highlighted = false
+    this.can_highlight = true
+    this.is_active = false // active is a temporary highlight
+    this.state = ViewerObjState["Unlink"]
 
     // true will delete the layers from the layer stacks when the session ends,
     // false mean use this.state to determine whither you delete the layer or not
-    this.autoDelete = false;
+    this.autoDelete = false
   }
   info() {
-    console.log("state: ", this.state);
+    console.log("state: ", this.state)
   }
   visible(visibleOn) {}
   select() {}
   isActive() {
-    return this.is_active;
+    return this.is_active
   }
   active(isActive) {
     if (isActive) {
       //unlink it if it's active
       // this.state = ViewerObjState['Unlink']
 
-      this.img_html.classList.add("viewerImgActive");
+      this.img_html.classList.add("viewerImgActive")
     } else {
       if (this.getHighlight() === false) {
         // if it's not active and it's not highlighted
@@ -59,33 +59,33 @@ class ViewerImage {
       } else {
         // this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
       }
-      this.img_html.classList.remove("viewerImgActive");
+      this.img_html.classList.remove("viewerImgActive")
     }
-    this.is_active = isActive;
+    this.is_active = isActive
   }
   setAutoDelete(auto_delete) {
-    this.autoDelete = auto_delete;
+    this.autoDelete = auto_delete
   }
   isLayerValid() {}
   isSameLayer(layer_id) {}
   setHighlight(is_highlighted) {
     if (this.can_highlight) {
-      this.is_highlighted = is_highlighted;
+      this.is_highlighted = is_highlighted
       if (this.is_highlighted) {
         // this.state = ViewerObjState['Unlink']
-        this.img_html.classList.add("viewerImgSelected");
+        this.img_html.classList.add("viewerImgSelected")
       } else {
-        this.img_html.classList.remove("viewerImgSelected");
+        this.img_html.classList.remove("viewerImgSelected")
         // this.state = ViewerObjState["Delete"]
       }
     }
   }
   getHighlight() {
-    return this.is_highlighted;
+    return this.is_highlighted
   }
   toggleHighlight() {
-    const toggle_value = !this.getHighlight();
-    this.setHighlight(toggle_value);
+    const toggle_value = !this.getHighlight()
+    this.setHighlight(toggle_value)
     // this.is_highlighted = !this.is_highlighted
     // this.img_html.classList.toggle("viewerImgSelected")
   }
@@ -93,7 +93,7 @@ class ViewerImage {
 
   async delete() {
     try {
-      this.img_html.remove(); //delete the img html element
+      this.img_html.remove() //delete the img html element
 
       //1) it's output layer // can_highlight && this.getHighlight()
       //2) it init or mask relate layers // this.autoDelete
@@ -104,15 +104,15 @@ class ViewerImage {
       //1)
       if (this.can_highlight && (this.getHighlight() || this.is_active)) {
         //keep if can be highlighted and either is highlighted or active
-        this.state = ViewerObjState["Unlink"];
+        this.state = ViewerObjState["Unlink"]
       } else {
         //
-        this.state = ViewerObjState["Delete"];
+        this.state = ViewerObjState["Delete"]
       }
 
       if (this.autoDelete) {
         //remove if it's first automated layer
-        this.state = ViewerObjState["Delete"];
+        this.state = ViewerObjState["Delete"]
       }
 
       // else {
@@ -122,115 +122,115 @@ class ViewerImage {
       //   }
       // }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 
   unlink() {
     //keep the layer but unlink it from the ui
     try {
-      this.img_html.remove(); //delete the img html element
+      this.img_html.remove() //delete the img html element
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 
   addButtonHtml() {
     // Create new container element
-    const container = document.createElement("div");
+    const container = document.createElement("div")
 
-    container.className = "viewer-image-container";
+    container.className = "viewer-image-container"
 
-    const elem = document.getElementById("svg_sp_btn");
+    const elem = document.getElementById("svg_sp_btn")
 
     // Create a copy of it
-    const clone = elem.cloneNode(true);
-    const button = clone;
-    button.style.display = null;
+    const clone = elem.cloneNode(true)
+    const button = clone
+    button.style.display = null
     button.setAttribute(
       "title",
       "use this image to generate more variance like it"
-    );
+    )
 
     // Create button element
     // const button = document.createElement('sp-button');
-    button.className = "viewer-image-button";
+    button.className = "viewer-image-button"
     // button.innerHTML = "Button";
 
     button.addEventListener("click", async () => {
       //set init image event listener, use when settion is active
-      const layer = await app.activeDocument.activeLayers[0];
-      const image_name = await psapi.setInitImage(layer, random_session_id);
-      const path = `./server/python_server/init_images/${image_name}`;
-      g_viewer_manager.addInitImageLayers(layer, path, false);
-    });
+      const layer = await app.activeDocument.activeLayers[0]
+      const image_name = await psapi.setInitImage(layer, random_session_id)
+      const path = `./server/python_server/init_images/${image_name}`
+      g_viewer_manager.addInitImageLayers(layer, path, false)
+    })
 
     // Append elements to container
-    container.appendChild(this.img_html);
-    container.appendChild(button);
+    container.appendChild(this.img_html)
+    container.appendChild(button)
 
-    this.img_html = container;
+    this.img_html = container
   }
 }
 
 class OutputImage extends ViewerImage {
   constructor(layer, path) {
-    super();
-    this.layer = layer;
-    this.path = path;
-    this.img_html = null;
+    super()
+    this.layer = layer
+    this.path = path
+    this.img_html = null
   }
   visible(visibleOn) {
     try {
-      super.visible(visibleOn);
+      super.visible(visibleOn)
       if (this.isLayerValid()) {
-        this.layer.visible = visibleOn;
+        this.layer.visible = visibleOn
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   async select() {
-    super.select();
+    super.select()
     if (this.isLayerValid()) {
-      await psapi.selectLayersExe([this.layer]);
+      await psapi.selectLayersExe([this.layer])
       //   console.log(`${this.layer.id} got selected`);
     }
   }
   isLayerValid() {
-    super.isLayerValid();
+    super.isLayerValid()
     //check if layer is defined or not
     //true if the layer is defined
     //false otherwise
-    let isValid = false;
+    let isValid = false
     if (typeof this.layer !== "undefined" && this.layer) {
-      isValid = true;
+      isValid = true
     }
-    return isValid;
+    return isValid
   }
   isSameLayer(layer_id) {
-    super.isSameLayer(layer_id);
-    const is_same = this.layer.id == layer_id;
-    return is_same;
+    super.isSameLayer(layer_id)
+    const is_same = this.layer.id == layer_id
+    return is_same
   }
 
   setImgHtml(img_html) {
-    super.setImgHtml();
-    this.img_html = img_html;
+    super.setImgHtml()
+    this.img_html = img_html
   }
   async delete() {
     try {
-      await super.delete();
+      await super.delete()
       // this.img_html.remove()//delete the img html element
       if (this.state === ViewerObjState["Delete"]) {
-        await psapi.cleanLayers([this.layer]);
+        await psapi.cleanLayers([this.layer])
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   info() {
-    super.info();
+    super.info()
   }
   // unlink(){
   //   //keep the layer but unlink it from the ui
@@ -247,13 +247,13 @@ class OutputImage extends ViewerImage {
 
 class InitImage extends ViewerImage {
   constructor(init_group, init_snapshot, solid_layer, path) {
-    super();
-    this.init_group = init_group;
-    this.init_snapshot = init_snapshot;
-    this.solid_layer = solid_layer;
+    super()
+    this.init_group = init_group
+    this.init_snapshot = init_snapshot
+    this.solid_layer = solid_layer
 
-    this.path = path;
-    this.can_highlight = false;
+    this.path = path
+    this.can_highlight = false
 
     // if (this.autoDelete === false){
     //   this.state = ViewerObjState['Unlink']
@@ -261,44 +261,44 @@ class InitImage extends ViewerImage {
   }
   visible(visibleOn) {
     try {
-      super.visible(visibleOn);
+      super.visible(visibleOn)
       //   const isValid = this.isLayerValid()
-      let visibleValues = [];
+      let visibleValues = []
       if (visibleOn) {
-        visibleValues = [true, true, true];
+        visibleValues = [true, true, true]
       } else {
-        visibleValues = [false, false, false];
+        visibleValues = [false, false, false]
       }
 
       if (this.isLayerValid(this.init_group)) {
-        this.init_group.visible = visibleValues[0];
+        this.init_group.visible = visibleValues[0]
       }
       if (this.isLayerValid(this.init_snapshot)) {
-        this.init_snapshot.visible = visibleValues[1];
+        this.init_snapshot.visible = visibleValues[1]
       }
 
       if (this.isLayerValid(this.solid_layer)) {
-        this.solid_layer.visible = visibleValues[2];
+        this.solid_layer.visible = visibleValues[2]
       }
 
       if (!this.autoDelete) {
         //means it's not the first init image
 
         if (this.isLayerValid(this.solid_layer)) {
-          this.solid_layer.visible = false; //turn it off sense the init group is above the output group, and the white solid will hide the init image reference located in the output group
+          this.solid_layer.visible = false //turn it off sense the init group is above the output group, and the white solid will hide the init image reference located in the output group
         }
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 
   async select() {
-    super.select();
+    super.select()
 
-    const selectLayers = [];
+    const selectLayers = []
     if (this.isLayerValid(this.init_group)) {
-      selectLayers.push(this.init_group);
+      selectLayers.push(this.init_group)
     }
     // if (this.isLayerValid(this.init_snapshot)) {
 
@@ -308,44 +308,44 @@ class InitImage extends ViewerImage {
     //   selectLayers.push(this.solid_layer)
     // }
 
-    await psapi.selectLayersExe(selectLayers);
+    await psapi.selectLayersExe(selectLayers)
     //   console.log(`${this.layer.id} got selected`);
   }
 
   isLayerValid(layer) {
-    super.isLayerValid();
+    super.isLayerValid()
     //check if layer is defined or not
     //true if the layer is defined
     //false otherwise
     //   let isValid = [false,false,false]
-    let isValid = false;
+    let isValid = false
     if (typeof layer !== "undefined" && layer) {
-      isValid = true;
+      isValid = true
     }
 
-    return isValid;
+    return isValid
   }
   isSameLayer(layer_id) {
-    super.isSameLayer(layer_id);
-    let is_same = false;
+    super.isSameLayer(layer_id)
+    let is_same = false
     if (this.isLayerValid(this.init_group)) {
-      is_same = this.init_group.id == layer_id;
+      is_same = this.init_group.id == layer_id
     }
-    return is_same;
+    return is_same
   }
   setImgHtml(img_html) {
-    super.setImgHtml();
-    this.img_html = img_html;
+    super.setImgHtml()
+    this.img_html = img_html
   }
   async delete() {
     try {
-      await super.delete();
+      await super.delete()
 
       // this.img_html.remove()//delete the img html element
 
       if (!this.autoDelete && !this.can_highlight) {
         //don't delete since it's output layer that is been used as init image
-        this.state = ViewerObjState["Unlink"];
+        this.state = ViewerObjState["Unlink"]
       }
 
       if (this.state === ViewerObjState["Delete"]) {
@@ -353,106 +353,106 @@ class InitImage extends ViewerImage {
           this.init_group,
           this.init_snapshot,
           this.solid_layer,
-        ]);
+        ])
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 }
 
 class InitMaskImage extends ViewerImage {
   constructor(mask_group, white_mark, solid_black, path) {
-    super();
-    this.mask_group = mask_group;
-    this.white_mark = white_mark;
-    this.solid_black = solid_black;
+    super()
+    this.mask_group = mask_group
+    this.white_mark = white_mark
+    this.solid_black = solid_black
 
-    this.path = path;
-    this.can_highlight = false;
+    this.path = path
+    this.can_highlight = false
   }
   visible(visibleOn) {
     try {
-      super.visible(visibleOn);
+      super.visible(visibleOn)
       //   const isValid = this.isLayerValid()
-      let visibleValues = [];
+      let visibleValues = []
       if (visibleOn) {
-        visibleValues = [true, true, false];
+        visibleValues = [true, true, false]
       } else {
-        visibleValues = [false, false, false];
+        visibleValues = [false, false, false]
       }
 
       if (this.isLayerValid(this.mask_group)) {
-        this.mask_group.visible = visibleValues[0];
+        this.mask_group.visible = visibleValues[0]
       }
       if (this.isLayerValid(this.white_mark)) {
-        this.white_mark.visible = visibleValues[1];
+        this.white_mark.visible = visibleValues[1]
       }
       if (this.isLayerValid(this.solid_black)) {
-        this.solid_black.visible = visibleValues[2];
+        this.solid_black.visible = visibleValues[2]
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 
   async select() {
-    super.select();
+    super.select()
 
-    const selectLayers = [];
+    const selectLayers = []
     // if (this.isLayerValid(this.mask_group)) {
 
     //   selectLayers.push(this.mask_group)
     // }
     if (this.isLayerValid(this.white_mark)) {
-      selectLayers.push(this.white_mark);
+      selectLayers.push(this.white_mark)
     }
     // if (this.isLayerValid(this.solid_layer)) {
     //   selectLayers.push(this.solid_layer)
     // }
 
-    await psapi.selectLayersExe(selectLayers);
+    await psapi.selectLayersExe(selectLayers)
     //   console.log(`${this.layer.id} got selected`);
   }
 
   isLayerValid(layer) {
-    super.isLayerValid();
+    super.isLayerValid()
     //check if layer is defined or not
     //true if the layer is defined
     //false otherwise
     //   let isValid = [false,false,false]
-    let isValid = false;
+    let isValid = false
     if (typeof layer !== "undefined" && layer) {
-      isValid = true;
+      isValid = true
     }
 
-    return isValid;
+    return isValid
   }
   isSameLayer(layer_id) {
-    super.isSameLayer(layer_id);
-    let is_same = false;
+    super.isSameLayer(layer_id)
+    let is_same = false
     if (this.isLayerValid(this.mask_group)) {
-      is_same = this.mask_group.id == layer_id;
+      is_same = this.mask_group.id == layer_id
     }
-    return is_same;
+    return is_same
   }
   setImgHtml(img_html) {
-    super.setImgHtml();
-    this.img_html = img_html;
+    super.setImgHtml()
+    this.img_html = img_html
   }
   async delete() {
     try {
-      await super.delete();
+      await super.delete()
       // this.img_html.remove()//delete the img html element
       if (this.state === ViewerObjState["Delete"]) {
         await psapi.cleanLayers([
           this.mask_group,
           this.white_mark,
           this.solid_black,
-        ]);
+        ])
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 }
@@ -460,52 +460,52 @@ class InitMaskImage extends ViewerImage {
 class initImageLayers {
   //store info about the init image related layers
   constructor(group, snapshot, solid_background, autoDelete) {
-    this.group = group;
-    this.snapshot = snapshot;
-    this.solid_background = solid_background;
-    this.autoDelete = autoDelete;
+    this.group = group
+    this.snapshot = snapshot
+    this.solid_background = solid_background
+    this.autoDelete = autoDelete
   }
 }
 class maskLayers {
   //store info about the init image related layers
   constructor(group, white_mark, solid_background, autoDelete) {
-    this.group = group;
-    this.white_mark = white_mark;
-    this.solid_background = solid_background;
-    this.autoDelete = autoDelete;
+    this.group = group
+    this.white_mark = white_mark
+    this.solid_background = solid_background
+    this.autoDelete = autoDelete
   }
 }
 class ViewerManager {
   //viewer manager will reset after the end of the session
   //it will store
   constructor() {
-    this.outputImages = [];
-    this.initImages = [];
-    this.initMaskImage;
-    this.pathToViewerImage = {}; // quick way to check if an link image path on disk to ViewerImage object.
-    this.initImageLayersJson = {}; //{path: initImageLayers}
+    this.outputImages = []
+    this.initImages = []
+    this.initMaskImage
+    this.pathToViewerImage = {} // quick way to check if an link image path on disk to ViewerImage object.
+    this.initImageLayersJson = {} //{path: initImageLayers}
 
-    this.mask_layer;
-    this.maskLayersJson = {}; //{path: MaskLayers}
+    this.mask_layer
+    this.maskLayersJson = {} //{path: MaskLayers}
 
     //Note:move initGroup, to GenerationSession
-    this.initGroup;
-    this.init_solid_background;
-    this.maskGroup;
-    this.mask_solid_background;
+    this.initGroup
+    this.init_solid_background
+    this.maskGroup
+    this.mask_solid_background
 
     //last_selected_obj
-    this.last_selected_viewer_obj;
+    this.last_selected_viewer_obj
   }
   initializeInitImage(group, snapshot, solid_background, path) {
-    this.initGroup = group;
-    this.init_solid_background = solid_background;
-    this.addInitImageLayers(snapshot, path, true);
+    this.initGroup = group
+    this.init_solid_background = solid_background
+    this.addInitImageLayers(snapshot, path, true)
   }
   initializeMask(group, white_mark, solid_background, path) {
-    this.maskGroup = group;
-    this.mask_solid_background = solid_background;
-    this.addMaskLayers(white_mark, path, true);
+    this.maskGroup = group
+    this.mask_solid_background = solid_background
+    this.addMaskLayers(white_mark, path, true)
   }
   addMaskLayers(white_mark, path, auto_delete) {
     try {
@@ -517,19 +517,19 @@ class ViewerManager {
           white_mark,
           this.mask_solid_background,
           auto_delete
-        );
-        this.maskLayersJson[path] = mask_layers;
+        )
+        this.maskLayersJson[path] = mask_layers
       } else {
         //for updating the mask
 
         //just update the html
-        const new_path = `${path}?t=${new Date().getTime()}`;
-        console.log("new mask path: ", new_path);
+        const new_path = `${path}?t=${new Date().getTime()}`
+        console.log("new mask path: ", new_path)
         // this.maskLayersJson[path].img_html.src = new_path
-        this.pathToViewerImage[path].img_html.src = new_path;
+        this.pathToViewerImage[path].img_html.src = new_path
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
   updateMaskLayer() {}
@@ -543,40 +543,40 @@ class ViewerManager {
           snapshot,
           this.init_solid_background,
           auto_delete
-        );
-        this.initImageLayersJson[path] = init_image_layers;
+        )
+        this.initImageLayersJson[path] = init_image_layers
       }
     } catch (e) {
-      console.warn(e);
+      console.warn(e)
     }
   }
 
   hasViewerImage(path) {
     if (this.pathToViewerImage.hasOwnProperty(path)) {
-      return true;
+      return true
     }
-    return false;
+    return false
   }
   addOutputImage(layer, path) {
-    const outputImage = new OutputImage(layer, path);
+    const outputImage = new OutputImage(layer, path)
 
-    this.outputImages.push(outputImage);
-    this.pathToViewerImage[path] = outputImage; //
-    return outputImage;
+    this.outputImages.push(outputImage)
+    this.pathToViewerImage[path] = outputImage //
+    return outputImage
   }
   addInitImage(group, snapshot, solid_background, path, auto_delete) {
-    const initImage = new InitImage(group, snapshot, solid_background, path);
-    initImage.setAutoDelete(auto_delete);
-    this.initImages.push(initImage);
-    this.pathToViewerImage[path] = initImage;
-    return initImage;
+    const initImage = new InitImage(group, snapshot, solid_background, path)
+    initImage.setAutoDelete(auto_delete)
+    this.initImages.push(initImage)
+    this.pathToViewerImage[path] = initImage
+    return initImage
   }
   addMask(group, white_mark, solid_background, path) {
-    const mask = new InitMaskImage(group, white_mark, solid_background, path);
+    const mask = new InitMaskImage(group, white_mark, solid_background, path)
 
-    this.initMaskImage = mask;
-    this.pathToViewerImage[path] = mask;
-    return mask;
+    this.initMaskImage = mask
+    this.pathToViewerImage[path] = mask
+    return mask
   }
   deleteAll() {}
   keepAll() {}
@@ -592,4 +592,4 @@ module.exports = {
   InitMaskImage,
   ViewerObjState,
   ViewerManager,
-};
+}