diff --git a/.prettierrc b/.prettierrc
index cce9d3c..e74ed9f 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,6 @@
 {
-  "semi": false
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
 }
diff --git a/dialog_box.js b/dialog_box.js
index 5d38ec1..1dc465f 100644
--- a/dialog_box.js
+++ b/dialog_box.js
@@ -1,53 +1,56 @@
 async function prompt(
-  heading,
-  body,
-  buttons = ["Cancel", "Ok"],
-  options = { title: heading, size: { width: 360, height: 280 } }
+    heading,
+    body,
+    buttons = ['Cancel', 'Ok'],
+    options = { title: heading, size: { width: 360, height: 280 } }
 ) {
-  const [dlgEl, formEl, headingEl, dividerEl, bodyEl, footerEl] = [
-    "dialog",
-    "form",
-    "sp-heading",
-    "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)"
-  })
+    const [dlgEl, formEl, headingEl, dividerEl, bodyEl, footerEl] = [
+        'dialog',
+        'form',
+        'sp-heading',
+        '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)'
+    })
 
-  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")
-    btnEl.setAttribute(
-      "variant",
-      idx === buttons.length - 1 ? btnText.variant || "cta" : "secondary"
+    buttons.forEach((btnText, idx) => {
+        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) =>
+        formEl.appendChild(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(
diff --git a/export_png.js b/export_png.js
index 1db811c..87393b7 100644
--- a/export_png.js
+++ b/export_png.js
@@ -1,121 +1,121 @@
-const { executeAsModal } = require("photoshop").core
-const storage = require("uxp").storage
+const { executeAsModal } = require('photoshop').core
+const storage = require('uxp').storage
 const fs = storage.localFileSystem
-const formats = require("uxp").storage.formats
+const formats = require('uxp').storage.formats
 async function exportPngCommand() {
-  const batchPlay = require("photoshop").action.batchPlay
-  // const result = await batchPlay { _obj: “exportSelectionAsFileTypePressed”}
+    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 destFolder = (await storage.localFileSystem.getDataFolder()).nativePath;
+    const storage = require('uxp').storage
+    const fs = storage.localFileSystem
 
-  let pluginFolder = await fs.getPluginFolder()
-  // await fs.getFolder("./init_images")
-  let init_images_dir = await pluginFolder.getEntry(
-    "./server/python_server/init_images"
-  )
+    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",
-    _target: { _ref: "layer", _enum: "ordinal", _value: "targetEnum" },
-    fileType: "png",
-    quality: 32,
-    metadata: 0,
-    destFolder: init_images_dir.nativePath,
-    sRGB: true,
-    openWindow: false,
-    _options: { dialogOptions: "dontDisplay" },
-  }
-  const result = await batchPlay([exportCommand], {
-    synchronousExecution: true,
-    modalBehavior: "execute",
-  })
+    const exportCommand = {
+        _obj: 'exportSelectionAsFileTypePressed',
+        _target: { _ref: 'layer', _enum: 'ordinal', _value: 'targetEnum' },
+        fileType: 'png',
+        quality: 32,
+        metadata: 0,
+        destFolder: init_images_dir.nativePath,
+        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
-  try {
-    await executeAsModal(exportPngCommand)
-  } catch (e) {
-    console.warn("exportPng error:", e)
-  }
+    const { executeAsModal } = require('photoshop').core
+    try {
+        await executeAsModal(exportPngCommand)
+    } catch (e) {
+        console.warn('exportPng error:', e)
+    }
 }
 
 const readPng = async (image_name) => {
-  // image_name = 'test.png'
-  try {
-    await executeAsModal(
-      async (control) => {
-        // const tempFolder = await fs.getTemporaryFolder() ;
-        const pluginFolder = await fs.getPluginFolder()
+    // image_name = 'test.png'
+    try {
+        await executeAsModal(
+            async (control) => {
+                // const tempFolder = await fs.getTemporaryFolder() ;
+                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'
+                )
+                // 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
+                await currentDocument.saveAs.png(
+                    file,
+                    {
+                        compression: 6,
+                    },
+                    true
+                )
+
+                // const arrayBuffer = await file.read({format: formats.binary}) ;
+                // console.log(arrayBuffer, 'arrayBuffer') ;
+            },
+
+            { commandName: 'readPng' }
         )
-        // 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
-        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)
-  }
+    } catch (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 =
-  // create new document
-  // duplicate the layers to the new documnet
-  //select the layer channel selectLayerChannelCommand
-  //document.crop
-  //export using readPng()
+    //store layers we want to export in variables
+    // let layerToExports =
+    // create new document
+    // duplicate the layers to the new documnet
+    //select the layer channel selectLayerChannelCommand
+    //document.crop
+    //export using readPng()
 
-  try {
-    //get the active layers
-    // const layersToExport = app.activeDocument.activeLayers
+    try {
+        //get the active layers
+        // const layersToExport = app.activeDocument.activeLayers
 
-    //create new document
-    let exportDoc = await executeAsModal(async () => {
-      return await app.documents.add
-    })
+        //create new document
+        let exportDoc = await executeAsModal(async () => {
+            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)
-      // export_image_name = `${layer.name}.png`
-      await readPng(image_name)
-      // await exportDoc.closeWithoutSaving()
-    })
-    // }
-  } catch (e) {
-    console.warn(e)
-  }
+        // 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)
+            // export_image_name = `${layer.name}.png`
+            await readPng(image_name)
+            // await exportDoc.closeWithoutSaving()
+        })
+        // }
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 ///////////////////////Start method 3///////////////////////
@@ -140,68 +140,70 @@ 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()
+    async function savePNGCommand() {
+        var saveFolder =
+            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")
+        // 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')
 
-    const saveData =
-      await require("uxp").storage.localFileSystem.createSessionToken(saveFile)
+        const saveData =
+            await require('uxp').storage.localFileSystem.createSessionToken(
+                saveFile
+            )
 
-    const result = await batchPlay(
-      [
-        {
-          _obj: "save",
-          as: {
-            _obj: "PNGFormat",
-            method: {
-              _enum: "PNGMethod",
-              _value: "quick",
-            },
-            PNGInterlaceType: {
-              _enum: "PNGInterlaceType",
-              _value: "PNGInterlaceNone",
-            },
-            PNGFilter: {
-              _enum: "PNGFilter",
-              _value: "PNGFilterAdaptive",
-            },
-            compression: 6,
-          },
-          in: {
-            _path: saveData,
-            _kind: "local",
-          },
-          saveStage: {
-            _enum: "saveStageType",
-            _value: "saveBegin",
-          },
-          _isCommand: false,
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-  }
-  await executeAsModal(async () => {
-    savePNGCommand()
-  })
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'save',
+                    as: {
+                        _obj: 'PNGFormat',
+                        method: {
+                            _enum: 'PNGMethod',
+                            _value: 'quick',
+                        },
+                        PNGInterlaceType: {
+                            _enum: 'PNGInterlaceType',
+                            _value: 'PNGInterlaceNone',
+                        },
+                        PNGFilter: {
+                            _enum: 'PNGFilter',
+                            _value: 'PNGFilterAdaptive',
+                        },
+                        compression: 6,
+                    },
+                    in: {
+                        _path: saveData,
+                        _kind: 'local',
+                    },
+                    saveStage: {
+                        _enum: 'saveStageType',
+                        _value: 'saveBegin',
+                    },
+                    _isCommand: false,
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
+            {
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+    }
+    await executeAsModal(async () => {
+        savePNGCommand()
+    })
 }
 
 ////////////////////End method 3////////////////////////////
 
 module.exports = {
-  exportPng,
-  readPng,
-  savePNG,
-  newExportPng,
+    exportPng,
+    readPng,
+    savePNG,
+    newExportPng,
 }
diff --git a/helper.js b/helper.js
index ce71e8b..f36b4e5 100644
--- a/helper.js
+++ b/helper.js
@@ -1,110 +1,110 @@
-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
-  // 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 })
-  }
+    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 })
+    }
 
-  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(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _obj: 'rectangle',
+                    top: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.top,
+                    },
+                    left: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.left,
+                    },
+                    bottom: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.bottom,
+                    },
+                    right: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.right,
+                    },
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _obj: "rectangle",
-          top: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.top,
-          },
-          left: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.left,
-          },
-          bottom: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.bottom,
-          },
-          right: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.right,
-          },
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 }
 
 async function reselect(selectionInfo) {
-  await executeAsModal(
-    async () => {
-      reselectBatchPlay(selectionInfo)
-    },
-    { commandName: "reselect" }
-  )
+    await executeAsModal(
+        async () => {
+            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(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _enum: 'ordinal',
+                    _value: 'none',
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _enum: "ordinal",
-          _value: "none",
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  return result
+    return result
 }
 
 // async function layerToSelectionHelper () {
@@ -203,5 +203,5 @@ async function unSelect() {
 // }
 
 module.exports = {
-  // layerToSelection
+    // layerToSelection
 }
diff --git a/index.html b/index.html
index 69df257..fdcdc18 100644
--- a/index.html
+++ b/index.html
@@ -1,1072 +1,1128 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <script src="index.js"></script>
-  </head>
-  <style>
-    sp-textarea,
-    textarea {
-      width: 100%;
-      height: 100px;
-    }
+    <head>
+        <script src="index.js"></script>
+    </head>
+    <style>
+        sp-textarea,
+        textarea {
+            width: 100%;
+            height: 100px;
+        }
 
-    #taPromptShortcut {
-      height: 300px;
-      margin: 3px auto;
-    }
+        #taPromptShortcut {
+            height: 300px;
+            margin: 3px auto;
+        }
 
-    #taPrompt {
-      box-sizing: border-box;
-      background: rgb(37, 37, 37);
-    }
+        #taPrompt {
+            box-sizing: border-box;
+            background: rgb(37, 37, 37);
+        }
 
-    .container {
-      width: 100%;
-      padding-left: 3%;
-      padding-right: 3%;
-    }
+        .container {
+            width: 100%;
+            padding-left: 3%;
+            padding-right: 3%;
+        }
 
-    sp-progressbar {
-      margin-bottom: 3px;
-      margin-top: 3px;
-    }
+        sp-progressbar {
+            margin-bottom: 3px;
+            margin-top: 3px;
+        }
 
-    .prompt-container {
-      width: 100%;
-      padding-left: 5%;
-      padding-right: 5%;
-    }
+        .prompt-container {
+            width: 100%;
+            padding-left: 5%;
+            padding-right: 5%;
+        }
 
-    #collapsible {
-      background-color: #777;
-      color: white;
-      cursor: pointer;
-      padding: 5px;
-      width: 100%;
-      border: none;
-      text-align: left;
-      outline: none;
-      font-size: 15px;
-    }
+        #collapsible {
+            background-color: #777;
+            color: white;
+            cursor: pointer;
+            padding: 5px;
+            width: 100%;
+            border: none;
+            text-align: left;
+            outline: none;
+            font-size: 15px;
+        }
 
-    #collapsible:hover {
-      background-color: #333;
-    }
+        #collapsible:hover {
+            background-color: #333;
+        }
 
-    .content {
-      padding: 0 18px;
-      display: none;
-      overflow: hidden;
-    }
+        .content {
+            padding: 0 18px;
+            display: none;
+            overflow: hidden;
+        }
 
-    .grid-container {
-      display: inline-flex;
-      grid-template-columns: auto auto auto;
-    }
+        .grid-container {
+            display: inline-flex;
+            grid-template-columns: auto auto auto;
+        }
 
-    .column-item-image {
-      width: 100px;
-      height: 100px;
-      margin: 0;
-    }
+        .column-item-image {
+            width: 100px;
+            height: 100px;
+            margin: 0;
+        }
 
-    .viewer-image,
-    .history-image,
-    .image-search {
-      width: 100px;
-      height: 100px;
-      margin: 0;
-      position: relative;
-      max-height: 100%;
-      max-width: 100%;
-    }
+        .viewer-image,
+        .history-image,
+        .image-search {
+            width: 100px;
+            height: 100px;
+            margin: 0;
+            position: relative;
+            max-height: 100%;
+            max-width: 100%;
+        }
 
-    .viewer-image-button {
-      display: none;
-      /* background-color:  #495b79; */
-      color: white;
-      border: none;
-      cursor: pointer;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      /* height: 20px; */
-      margin: 0;
-      max-height: 100%;
-      max-width: 100%;
-    }
+        .viewer-image-button {
+            display: none;
+            /* background-color:  #495b79; */
+            color: white;
+            border: none;
+            cursor: pointer;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            /* height: 20px; */
+            margin: 0;
+            max-height: 100%;
+            max-width: 100%;
+        }
 
-    /* .viewer-image-button:hover {
+        /* .viewer-image-button:hover {
      background-color: #333f52;
   } */
-    .viewer-image-container {
-      position: relative;
-      width: 100px;
-      height: 100px;
-      margin: 0;
-    }
-
-    .viewer-image-container:hover .viewer-image-button {
-      display: flex;
-    }
-
-    .viewer-container {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .column-item {
-      margin: 0;
-    }
-
-    .button-style {
-      background-color: #777;
-      color: white;
-      cursor: pointer;
-      width: 100px;
-      border: none;
-      text-align: left;
-      outline: none;
-      font-size: 15px;
-      margin: 0;
-    }
-
-    .btnSquare,
-    #btnRefreshModels {
-      background-color: #777;
-      color: white;
-      cursor: pointer;
-
-      border: none;
-
-      text-align: left;
-      outline: none;
-      font-size: 15px;
-      margin: 0;
-    }
-
-    .button-style2 {
-      background-color: #777;
-      color: white;
-      cursor: pointer;
-
-      border: 1px;
-
-      text-align: left;
-      outline-style: solid;
-      outline: solid;
-      font-size: 15px;
-      margin: 10px;
-    }
-
-    .wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      /* overflow: auto; */
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-
-    #progressContainer {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    #lVersionNumber {
-      display: flex;
-      margin-left: auto;
-    }
-
-    .flexContainer {
-      flex: 0 0 auto;
-      display: flex;
-      flex-direction: row;
-    }
-
-    #historySeedLabelContainer {
-      display: flex;
-      margin-left: auto;
-    }
-
-    #menu-bar-container {
-      width: 100%;
-      display: flex;
-      /* justify-content: space-between; */
-      margin: 3px auto;
-    }
-
-    #sdBtnContainer {
-      display: flex;
-      flex: 0 0 auto;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-
-    .labelNumber {
-      color: aliceblue;
-    }
-
-    #lNameInpaintPdding {
-      margin-right: 10px;
-    }
-
-    /* tabs */
-    .sp-tabs {
-      flex: 0 0 auto;
-      display: flex;
-      flex-direction: row;
-      border-bottom: 2px solid #3e3e3e;
-    }
-
-    .sp-tab {
-      margin-right: 12px;
-    }
-
-    .sp-tab sp-label {
-      color: rgba(255, 255, 255, 0.75);
-    }
-
-    .sp-tab:hover sp-label {
-      color: white;
-    }
-
-    .sp-tab.selected {
-      border-bottom: 2px solid white;
-      margin-bottom: -2px;
-    }
-
-    .sp-tab.selected sp-label {
-      color: white;
-    }
-
-    @media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
-      .sp-tabs {
-        border-bottom: 2px solid #b8b8b8;
-      }
-
-      .sp-tab sp-label {
-        color: rgba(0, 0, 0, 0.66);
-      }
-
-      .sp-tab:hover sp-label {
-        color: black;
-      }
-
-      .sp-tab.selected {
-        border-bottom: 2px solid black;
-      }
-
-      .sp-tab.selected sp-label {
-        color: black;
-      }
-    }
-
-    .sp-tab-page {
-      visibility: hidden;
-      /* display: none; */
-      flex: 1 1 auto;
-      /* overflow: scroll; */
-      overflow-y: scroll;
-      padding: 12px 0;
-      flex-direction: column;
-    }
-
-    .sp-tab-page.visible-hack {
-      display: flex;
-      /* overflow: hidden; */
-      /* overflow-y: scroll; */
-      /* position: fixed; */
-      top: 25px;
-      visibility: visible;
-      max-width: 100%;
-      width: 100%;
-      /* margin: 0px; */
-      position: absolute;
-      width: 100%;
-      left: 0;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    .sp-tab-page.visible {
-      display: flex;
-    }
-
-    .sp-tab-page > * {
-      flex: 0 0 auto;
-    }
-
-    .viewerImgSelected {
-      border: 3px solid #6db579;
-    }
-
-    .viewerImgActive {
-      border: 3px solid #fb9700;
-    }
-
-    .generate-more {
-      background-color: #6db579;
-    }
-
-    .generate {
-      background-color: #ff595e;
-    }
-
-    .connected {
-      color: #6db579;
-    }
-
-    .disconnected {
-      color: #ff595e;
-    }
-
-    #slWidth {
-      width: 50%;
-      margin-right: 10px;
-    }
-
-    #slHeight {
-      width: 50%;
-      margin-left: 10px;
-    }
-
-    #hrWidth {
-      width: 33%;
-      margin-right: 10px;
-    }
-
-    #hrHeight {
-      width: 33%;
-      margin-left: 10px;
-    }
-
-    #hrDenoisingStrength {
-      width: 33%;
-      margin-left: 10px;
-    }
-
-    #tiNumberOfSteps {
-      width: 50%;
-    }
-
-    #tiNumberOfSteps {
-      width: auto;
-    }
-
-    .rbMaskContent {
-      font-size: 1.1em;
-    }
-
-    #rbSelectionModeLabel,
-    .rbSelectionMode {
-      font-size: 1em;
-      margin-right: 12px;
-    }
-
-    .checkbox {
-      font-size: 1em;
-      margin-right: 10px;
-    }
-
-    #slCfgScale {
-      width: 50%;
-      margin-right: 10px;
-    }
-
-    #slDenoisingStrength {
-      width: 50%;
-      margin-left: 10px;
-    }
-
-    #slInpaintingMaskWeight {
-      width: 100%;
-      margin-left: 10px;
-    }
-
-    .disabled-btn {
-      opacity: 0.65;
-      cursor: not-allowed;
-    }
-
-    .buttonImage {
-      padding: 8px 8px 8px 32px;
-      font-family: Arial, Verdana;
-      background: #f0f0f0
-        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABfUlEQVQ4y42TP2tUQRTFf3PnPYiLIAiKiKhIsLbxS9hZaykWNmKjgqT0A6SxslRIFRsRv0QwdZB1YyGipImbzWbfnHst3sZdZF92Bw7D/LmH37nDpL1NAyAlHgDXWW18j+A9QBXTnQhu3H704TXS2aU5s/f2/qvTZeXx78goDdE0Z9anusYDmxn4zMAlYglBMsN9zkAzgxwrGGCGnLzIwELCVZbUG+oicDWoLOtBhZwcAQFUZd6gCC/dBPW5Hr+/7VPaCHci2DU5TJVDBe+Q5cyvwT4ucfdleS7noQdURfMEDd4Rwc04OvzDtfWbjCYTitpG/hehoI4IZhmpjTgcj09jUGmeQAVXB4EypbRxjk5O0JTAvgygOBSnap9xsUJC0/nx4BLFW3p78c7Z6SeOJ2ktvL2wUC7G4zHh4uBgxPEkre30Ewb0NrZ0+XDEeUtGXdULZckYDodYMp59vLD9eZftjS31EnARuPr0Xn6yfoVbq/zlrz/pb37SG+DHXyrMGdFXikHpAAAAAElFTkSuQmCC);
-      background-position: 8px 8px;
-      background-repeat: no-repeat;
-    }
-
-    .acceptAllImgBtn {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/accept_all.png);
-      background-color: transparent;
-      background-size: 30px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-
-    .acceptSelectedImgBtn {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/accept_selected.png);
-      background-color: transparent;
-      background-size: 30px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-
-    .discardAllImgBtn {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/discard_all_border.png);
-      background-color: transparent;
-      background-size: 30px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-
-    .discardSelectedImgBtn {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/discard_selected_border.png);
-      background-color: transparent;
-      background-size: 24px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-
-    .resetButton {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/reset_settings.png);
-      background-color: transparent;
-      background-size: 30px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-
-    .snapshotButton {
-      font-family: Arial, Verdana;
-      background-image: url(./icon/camera_icon.png);
-      background-color: transparent;
-      background-size: 30px;
-      width: 30px;
-      height: 30px;
-      background-repeat: no-repeat;
-    }
-  </style>
-
-  <body>
-    <!-- <sp-textarea id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-textarea> -->
-    <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
-
-    <div class="container wrapper">
-      <div class="sp-tabs">
-        <div class="sp-tab selected" id="sp-stable-diffusion-ui-tab">
-          <sp-label>Stable Diffusion UI</sp-label>
-        </div>
-        <div class="sp-tab" id="sp-viewer-tab"><sp-label>Viewer</sp-label></div>
-        <div class="sp-tab" id="sp-history-tab">
-          <sp-label>History</sp-label>
-        </div>
-        <div class="sp-tab" id="sp-prompts-library-tab">
-          <sp-label>Prompts library</sp-label>
-        </div>
-        <div class="sp-tab" id="sp-horde-tab"><sp-label>Horde</sp-label></div>
-        <div class="sp-tab" id="sp-settings-tab">
-          <sp-label>Settings</sp-label>
-        </div>
-        <div>
-          <span
-            class="disconnected"
-            id="automaticStatus"
-            title="'A' for Automatic1111 server (webui-user.bat), Green is connected. Red Means there is a problem with your Automatic1111. Run 'webui-user.bat' and hit 'Refresh' button "
-            >A</span
-          >
-          <span
-            class="disconnected"
-            id="proxyServerStatus"
-            title="'P' for proxy server (start_server.bat), Green is connected. Red means you need to run 'start_server.bat' or hit Refresh button"
-            >P</span
-          >
-        </div>
-        <sp-label slot="label" id="lVersionNumber">v0.0.0</sp-label>
-      </div>
-
-      <div class="sp-tab-page" id="sp-viewer-tab-page">
-        <div class="flexContainer">
-          <sp-label slot="label"
-            >View your generated images on the canvas</sp-label
-          >
-        </div>
-        <div></div>
-        <div>
-          <button class="btnSquare" id="btnSetMaskViewer">Set Mask</button>
-          <button class="btnSquare" id="btnSetInitImageViewer">
-            Set Init Image
-          </button>
-          <button class="btnSquare btnGenerateClass" id="btnGenerate">
-            Generate txt2img
-          </button>
-          <button
-            class="btnSquare btnInterruptClass"
-            id="btnInterruptViewer"
-            style="display: none"
-          >
-            Interrupt
-          </button>
-          <button class="btnSquare" id="btnSelectionArea">
-            Selection Area
-          </button>
-
-          <div style="display: flex; justify-content: space-between">
-            <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
+        .viewer-image-container {
+            position: relative;
+            width: 100px;
+            height: 100px;
+            margin: 0;
+        }
+
+        .viewer-image-container:hover .viewer-image-button {
+            display: flex;
+        }
+
+        .viewer-container {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .column-item {
+            margin: 0;
+        }
+
+        .button-style {
+            background-color: #777;
+            color: white;
+            cursor: pointer;
+            width: 100px;
+            border: none;
+            text-align: left;
+            outline: none;
+            font-size: 15px;
+            margin: 0;
+        }
+
+        .btnSquare,
+        #btnRefreshModels {
+            background-color: #777;
+            color: white;
+            cursor: pointer;
+
+            border: none;
+
+            text-align: left;
+            outline: none;
+            font-size: 15px;
+            margin: 0;
+        }
+
+        .button-style2 {
+            background-color: #777;
+            color: white;
+            cursor: pointer;
+
+            border: 1px;
+
+            text-align: left;
+            outline-style: solid;
+            outline: solid;
+            font-size: 15px;
+            margin: 10px;
+        }
+
+        .wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            /* overflow: auto; */
+            overflow-x: hidden;
+            overflow-y: scroll;
+        }
+
+        #progressContainer {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #lVersionNumber {
+            display: flex;
+            margin-left: auto;
+        }
+
+        .flexContainer {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+        }
+
+        #historySeedLabelContainer {
+            display: flex;
+            margin-left: auto;
+        }
+
+        #menu-bar-container {
+            width: 100%;
+            display: flex;
+            /* justify-content: space-between; */
+            margin: 3px auto;
+        }
+
+        #sdBtnContainer {
+            display: flex;
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        .labelNumber {
+            color: aliceblue;
+        }
+
+        #lNameInpaintPdding {
+            margin-right: 10px;
+        }
+
+        /* tabs */
+        .sp-tabs {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+            border-bottom: 2px solid #3e3e3e;
+        }
+
+        .sp-tab {
+            margin-right: 12px;
+        }
+
+        .sp-tab sp-label {
+            color: rgba(255, 255, 255, 0.75);
+        }
+
+        .sp-tab:hover sp-label {
+            color: white;
+        }
+
+        .sp-tab.selected {
+            border-bottom: 2px solid white;
+            margin-bottom: -2px;
+        }
+
+        .sp-tab.selected sp-label {
+            color: white;
+        }
+
+        @media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
+            .sp-tabs {
+                border-bottom: 2px solid #b8b8b8;
+            }
+
+            .sp-tab sp-label {
+                color: rgba(0, 0, 0, 0.66);
+            }
+
+            .sp-tab:hover sp-label {
+                color: black;
+            }
+
+            .sp-tab.selected {
+                border-bottom: 2px solid black;
+            }
+
+            .sp-tab.selected sp-label {
+                color: black;
+            }
+        }
+
+        .sp-tab-page {
+            visibility: hidden;
+            /* display: none; */
+            flex: 1 1 auto;
+            /* overflow: scroll; */
+            overflow-y: scroll;
+            padding: 12px 0;
+            flex-direction: column;
+        }
+
+        .sp-tab-page.visible-hack {
+            display: flex;
+            /* overflow: hidden; */
+            /* overflow-y: scroll; */
+            /* position: fixed; */
+            top: 25px;
+            visibility: visible;
+            max-width: 100%;
+            width: 100%;
+            /* margin: 0px; */
+            position: absolute;
+            width: 100%;
+            left: 0;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .sp-tab-page.visible {
+            display: flex;
+        }
+
+        .sp-tab-page > * {
+            flex: 0 0 auto;
+        }
+
+        .viewerImgSelected {
+            border: 3px solid #6db579;
+        }
+
+        .viewerImgActive {
+            border: 3px solid #fb9700;
+        }
+
+        .generate-more {
+            background-color: #6db579;
+        }
+
+        .generate {
+            background-color: #ff595e;
+        }
+
+        .connected {
+            color: #6db579;
+        }
+
+        .disconnected {
+            color: #ff595e;
+        }
+
+        #slWidth {
+            width: 50%;
+            margin-right: 10px;
+        }
+
+        #slHeight {
+            width: 50%;
+            margin-left: 10px;
+        }
+
+        #hrWidth {
+            width: 33%;
+            margin-right: 10px;
+        }
+
+        #hrHeight {
+            width: 33%;
+            margin-left: 10px;
+        }
+
+        #hrDenoisingStrength {
+            width: 33%;
+            margin-left: 10px;
+        }
+
+        #tiNumberOfSteps {
+            width: 50%;
+        }
+
+        #tiNumberOfSteps {
+            width: auto;
+        }
+
+        .rbMaskContent {
+            font-size: 1.1em;
+        }
+
+        #rbSelectionModeLabel,
+        .rbSelectionMode {
+            font-size: 1em;
+            margin-right: 12px;
+        }
+
+        .checkbox {
+            font-size: 1em;
+            margin-right: 10px;
+        }
+
+        #slCfgScale {
+            width: 50%;
+            margin-right: 10px;
+        }
+
+        #slDenoisingStrength {
+            width: 50%;
+            margin-left: 10px;
+        }
+
+        #slInpaintingMaskWeight {
+            width: 100%;
+            margin-left: 10px;
+        }
+
+        .disabled-btn {
+            opacity: 0.65;
+            cursor: not-allowed;
+        }
+
+        .buttonImage {
+            padding: 8px 8px 8px 32px;
+            font-family: Arial, Verdana;
+            background: #f0f0f0
+                url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABfUlEQVQ4y42TP2tUQRTFf3PnPYiLIAiKiKhIsLbxS9hZaykWNmKjgqT0A6SxslRIFRsRv0QwdZB1YyGipImbzWbfnHst3sZdZF92Bw7D/LmH37nDpL1NAyAlHgDXWW18j+A9QBXTnQhu3H704TXS2aU5s/f2/qvTZeXx78goDdE0Z9anusYDmxn4zMAlYglBMsN9zkAzgxwrGGCGnLzIwELCVZbUG+oicDWoLOtBhZwcAQFUZd6gCC/dBPW5Hr+/7VPaCHci2DU5TJVDBe+Q5cyvwT4ucfdleS7noQdURfMEDd4Rwc04OvzDtfWbjCYTitpG/hehoI4IZhmpjTgcj09jUGmeQAVXB4EypbRxjk5O0JTAvgygOBSnap9xsUJC0/nx4BLFW3p78c7Z6SeOJ2ktvL2wUC7G4zHh4uBgxPEkre30Ewb0NrZ0+XDEeUtGXdULZckYDodYMp59vLD9eZftjS31EnARuPr0Xn6yfoVbq/zlrz/pb37SG+DHXyrMGdFXikHpAAAAAElFTkSuQmCC);
+            background-position: 8px 8px;
+            background-repeat: no-repeat;
+        }
+
+        .acceptAllImgBtn {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/accept_all.png);
+            background-color: transparent;
+            background-size: 30px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .acceptSelectedImgBtn {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/accept_selected.png);
+            background-color: transparent;
+            background-size: 30px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .discardAllImgBtn {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/discard_all_border.png);
+            background-color: transparent;
+            background-size: 30px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .discardSelectedImgBtn {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/discard_selected_border.png);
+            background-color: transparent;
+            background-size: 24px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .resetButton {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/reset_settings.png);
+            background-color: transparent;
+            background-size: 30px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .snapshotButton {
+            font-family: Arial, Verdana;
+            background-image: url(./icon/camera_icon.png);
+            background-color: transparent;
+            background-size: 30px;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+        }
+    </style>
+
+    <body>
+        <!-- <sp-textarea id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-textarea> -->
+        <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
+
+        <div class="container wrapper">
+            <div class="sp-tabs">
+                <div class="sp-tab selected" id="sp-stable-diffusion-ui-tab">
+                    <sp-label>Stable Diffusion UI</sp-label>
+                </div>
+                <div class="sp-tab" id="sp-viewer-tab">
+                    <sp-label>Viewer</sp-label>
+                </div>
+                <div class="sp-tab" id="sp-history-tab">
+                    <sp-label>History</sp-label>
+                </div>
+                <div class="sp-tab" id="sp-prompts-library-tab">
+                    <sp-label>Prompts library</sp-label>
+                </div>
+                <div class="sp-tab" id="sp-horde-tab">
+                    <sp-label>Horde</sp-label>
+                </div>
+                <div class="sp-tab" id="sp-settings-tab">
+                    <sp-label>Settings</sp-label>
+                </div>
+                <div>
+                    <span
+                        class="disconnected"
+                        id="automaticStatus"
+                        title="'A' for Automatic1111 server (webui-user.bat), Green is connected. Red Means there is a problem with your Automatic1111. Run 'webui-user.bat' and hit 'Refresh' button "
+                        >A</span
+                    >
+                    <span
+                        class="disconnected"
+                        id="proxyServerStatus"
+                        title="'P' for proxy server (start_server.bat), Green is connected. Red means you need to run 'start_server.bat' or hit Refresh button"
+                        >P</span
+                    >
+                </div>
+                <sp-label slot="label" id="lVersionNumber">v0.0.0</sp-label>
+            </div>
+
+            <div class="sp-tab-page" id="sp-viewer-tab-page">
+                <div class="flexContainer">
+                    <sp-label slot="label"
+                        >View your generated images on the canvas</sp-label
+                    >
+                </div>
+                <div></div>
+                <div>
+                    <button class="btnSquare" id="btnSetMaskViewer">
+                        Set Mask
+                    </button>
+                    <button class="btnSquare" id="btnSetInitImageViewer">
+                        Set Init Image
+                    </button>
+                    <button class="btnSquare btnGenerateClass" id="btnGenerate">
+                        Generate txt2img
+                    </button>
+                    <button
+                        class="btnSquare btnInterruptClass"
+                        id="btnInterruptViewer"
+                        style="display: none"
+                    >
+                        Interrupt
+                    </button>
+                    <button class="btnSquare" id="btnSelectionArea">
+                        Selection Area
+                    </button>
+
+                    <div style="display: flex; justify-content: space-between">
+                        <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
             <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button>
             <button class="btnSquare acceptSelectedClass acceptSelectedImgBtn"  style="display:none;">Accept Selected</button>
             <button class="btnSquare discardSelectedClass discardSelectedImgBtn"  style="display:none;">Discard Selected</button> -->
-            <button
-              title="Keep all generated images on the canvas"
-              class="btnSquare acceptClass acceptAllImgBtn"
-              style="display: none"
-            ></button>
-            <button
-              title="Delete all generated images from the canvas"
-              class="btnSquare discardClass discardAllImgBtn"
-              style="display: none"
-            ></button>
-            <button
-              title="Keep only the highlighted images"
-              class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
-              style="display: none"
-            ></button>
-            <button
-              title="Delete only the highlighted images"
-              class="btnSquare discardSelectedClass discardSelectedImgBtn"
-              style="display: none"
-            ></button>
-          </div>
+                        <button
+                            title="Keep all generated images on the canvas"
+                            class="btnSquare acceptClass acceptAllImgBtn"
+                            style="display: none"
+                        ></button>
+                        <button
+                            title="Delete all generated images from the canvas"
+                            class="btnSquare discardClass discardAllImgBtn"
+                            style="display: none"
+                        ></button>
+                        <button
+                            title="Keep only the highlighted images"
+                            class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
+                            style="display: none"
+                        ></button>
+                        <button
+                            title="Delete only the highlighted images"
+                            class="btnSquare discardSelectedClass discardSelectedImgBtn"
+                            style="display: none"
+                        ></button>
+                    </div>
 
-          <div style="display: inline-flex">
-            <div id="batchNumberViewerTabContainer">
-              <!-- we will append here batch number field here   -->
-              <!-- <sp-label>Images:</sp-label> -->
-              <!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
+                    <div style="display: inline-flex">
+                        <div id="batchNumberViewerTabContainer">
+                            <!-- we will append here batch number field here   -->
+                            <!-- <sp-label>Images:</sp-label> -->
+                            <!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
                 value="1"></sp-textfield> -->
-            </div>
-            <sp-progressbar
-              class="pProgressBars"
-              id="pViewerProgressBar"
-              max="100"
-              value="0"
-              style="margin-left: 10px; width: 100px"
-            >
-              <sp-label slot="label">Progress...</sp-label>
-            </sp-progressbar>
-          </div>
+                        </div>
+                        <sp-progressbar
+                            class="pProgressBars"
+                            id="pViewerProgressBar"
+                            max="100"
+                            value="0"
+                            style="margin-left: 10px; width: 100px"
+                        >
+                            <sp-label slot="label">Progress...</sp-label>
+                        </sp-progressbar>
+                    </div>
 
-          <!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
-        </div>
-        <div class="" id="divInitImageViewerContainer">
-          <!-- <img  class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-        </div>
-        <hr />
-        <div class="" id="divInitMaskViewerContainer">
-          <!-- <img  class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-        </div>
-        <hr />
-        <div class="viewer-container" id="divViewerImagesContainer">
-          <!-- <img  class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-        </div>
-      </div>
-
-      <div class="sp-tab-page" id="sp-history-tab-page">
-        <div class="flexContainer">
-          <sp-label slot="label"
-            >history of all the images you generated</sp-label
-          >
-          <div id="historySeedLabelContainer">
-            <sp-label slot="label">Seed:</sp-label
-            ><sp-label slot="label" id="historySeedLabel">00000000000</sp-label>
-          </div>
-        </div>
-        <div></div>
-        <div>
-          <sp-textfield
-            id="imageSearchField"
-            type="text"
-            placeholder="cute cats"
-            value=""
-            ><sp-label slot="label">Search:</sp-label></sp-textfield
-          >
-
-          <button class="btnSquare" id="btnImageSearch">Image Search</button>
-          <button class="btnSquare" id="btnLoadHistory">
-            Load Previous Generations
-          </button>
-        </div>
-        <div class="viewer-container" id="divHistoryImagesContainer">
-          <img
-            class="history-image"
-            id="history_image_test"
-            data-metadata_json_string='{"a":1}'
-            src="https://source.unsplash.com/random"
-          />
-        </div>
-      </div>
-
-      <div class="sp-tab-page" id="sp-prompts-library-tab-page">
-        <sp-label slot="label"
-          >Prompt Shortcut: a single word that represent a prompt</sp-label
-        >
-        <div class="">
-          <sp-label slot="label">Key for new prompt shortcut</sp-label>
-          <sp-textarea
-            id="KeyPromptShortcut"
-            placeholder="to be replaced"
-            value=""
-          ></sp-textarea>
-        </div>
-        <div class="">
-          <sp-label slot="label">Value for new prompt shortcut</sp-label>
-          <sp-textarea
-            id="ValuePromptShortcut"
-            placeholder="to be replaced with"
-            value=""
-          ></sp-textarea>
-          <button class="btnSquare" id="btnUpdatePromptShortcut">
-            Add to Prompt Shortcut
-          </button>
-        </div>
-        <div class="">
-          <sp-textarea
-            id="taPromptShortcut"
-            placeholder="prompt shortcut"
-            value=""
-          ></sp-textarea>
-        </div>
-        <div>
-          <sp-picker size="m" label="Selection a prompt">
-            <sp-menu id="mPromptShortcutMenu" slot="options">
-              <!-- <sp-menu-item> item </sp-menu-item> -->
-            </sp-menu>
-          </sp-picker>
-          <button class="btnSquare" id="btnRefreshPromptShortcutMenu">
-            Refresh Menu
-          </button>
-        </div>
-        <div>
-          <button class="btnSquare" id="btnLoadPromptShortcut">Load</button>
-          <button class="btnSquare" id="btnSavePromptShortcut">Save</button>
-        </div>
-      </div>
-      <div class="sp-tab-page" id="sp-horde-tab-page">
-        <!-- Horde tab page -->
-        <div></div>
-        <sp-checkbox id="chUseHorde">Use Stable Diffusion Horde</sp-checkbox>
-        <div id="menu-bar-container_horde" style="display: flex">
-          <sp-picker size="m" label="Selection type">
-            <sp-menu id="mModelsMenuHorde" slot="options">
-              <!-- <sp-menu-item> item </sp-menu-item> -->
-            </sp-menu>
-          </sp-picker>
-
-          <button class="btnSquare" id="btnRefreshModelsHorde">
-            Refresh Models
-          </button>
-          <!-- <sp-label slot="label"
-              id="lVersionNumber">v0.0.0</sp-label> -->
-        </div>
-        <div>
-          <sp-checkbox id="chUseNSFW">NSFW</sp-checkbox>
-          <sp-checkbox id="chUseSharedLaion">Share with LION</sp-checkbox>
-          <sp-slider
-            style="display: none"
-            show-value="true"
-            id="slSeedVariation"
-            min="1"
-            max="30"
-            value="1"
-          >
-            <sp-label slot="label">Seed variation:</sp-label>
-          </sp-slider>
-        </div>
-      </div>
-
-      <div class="sp-tab-page" id="sp-settings-tab-page">
-        <!-- settings tab page -->
-        <div>
-          <sp-label>SD Url:</sp-label
-          ><sp-textfield
-            id="tiSdUrl"
-            type="text"
-            placeholder="http://127.0.0.1:7860"
-            value=""
-          ></sp-textfield
-          ><button class="btnSquare" id="btnSdUrl">Submit</button>
-        </div>
-        <sp-checkbox id="chUseSharpMask">use sharp mask</sp-checkbox>
-        <sp-checkbox checked id="chUseSmartObject">Smart Object</sp-checkbox>
-        <sp-checkbox checked id="chUseSilentImport"
-          >Use Silent Import</sp-checkbox
-        >
-        <!-- <a href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing" target="_blank">Don't have GPU, use Colab</a> -->
-        <sp-link
-          href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing"
-          >Use Colab</sp-link
-        >
-      </div>
-
-      <div
-        class="sp-tab-page visible-hack"
-        id="sp-stable-diffusion-ui-tab-page"
-      >
-        <div id="menu-bar-container">
-          <sp-picker size="m" label="Selection type">
-            <sp-menu id="mModelsMenu" slot="options">
-              <!-- <sp-menu-item> item </sp-menu-item> -->
-            </sp-menu>
-          </sp-picker>
-
-          <button
-            title="Refresh the plugin, only fixes minor issues."
-            class=""
-            id="btnRefreshModels"
-          >
-            Refresh
-          </button>
-          <!-- <sp-label slot="label"
-          id="lVersionNumber">v0.0.0</sp-label> -->
-        </div>
-
-        <!-- stable diffusion tab page -->
-
-        <div id="sdBtnContainer">
-          <div style="display: inline-flex; justify-content: space-between">
-            <button
-              class="btnSquare"
-              id="btnLayerToSelection"
-              title="Move and reSize the highlighted layer to fit into the Selection Area "
-            >
-              L2S
-            </button>
-            <button class="btnSquare btnGenerateClass">Generate txt2img</button>
-            <button
-              class="btnSquare btnInterruptClass"
-              id="btnInterrupt"
-              style="display: none"
-            >
-              Interrupt
-            </button>
-          </div>
-          <!-- <button class="btnSquare btnInterruptClass" style="display:none;">Interrupt More</button> -->
-          <!-- <button class="btnSquare" id="btnCleanLayers">Clean Layers</button> -->
-          <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
-        <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button> -->
-
-          <div
-            style="
-              display: inline-flex;
-              justify-content: space-between;
-              width: 133px;
-            "
-          >
-            <button
-              class="btnSquare acceptClass acceptAllImgBtn"
-              style="display: none"
-            ></button>
-            <button
-              class="btnSquare discardClass discardAllImgBtn"
-              style="display: none"
-            ></button>
-            <!-- <button class="btnSquare customClass"  style="display:none;">Accept Selected</button> -->
-            <button
-              class="btnSquare snapshotButton"
-              id="btnSnapshot"
-              title="create a snapshot of what you see on the canvas and place on a new layer"
-            >
-              Snapshot
-            </button>
-            <button
-              class="btnSquare resetButton"
-              id="btnResetSettings"
-              title="reset the ui settings to their default values"
-            >
-              Reset Settings
-            </button>
-
-            <!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
-          </div>
-        </div>
-
-        <div>
-          <div id="progressContainer" class="">
-            <sp-progressbar
-              class="pProgressBars"
-              id="pProgressBar"
-              max="100"
-              value="0"
-            >
-              <sp-label slot="label">Progress...</sp-label>
-            </sp-progressbar>
-            <sp-checkbox
-              title="use {keyword} form the prompts library"
-              id="chUsePromptShortcut"
-              checked
-              >prompt shortcut</sp-checkbox
-            >
-          </div>
-          <div>
-            <!-- icon only svg button -->
-            <sp-action-button
-              id="svg_sp_btn"
-              style="
-                padding: 0;
-                max-width: 32px;
-                max-height: 32px;
-                display: none;
-              "
-            >
-              <div slot="icon" style="fill: currentColor">
-                <svg viewBox="0 0 36 36" style="width: 18px; height: 18px">
-                  <path
-                    d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-                  />
-                </svg>
-              </div>
-            </sp-action-button>
-
-            <!-- icon with svg button -->
-            <sp-action-button style="display: none">
-              <div slot="icon" style="fill: currentColor">
-                <svg viewBox="0 0 36 36" style="width: 18px; height: 18px">
-                  <path
-                    d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
-                  />
-                </svg>
-              </div>
-              Edit Text
-            </sp-action-button>
-
-            <!-- <img width="15px" height="15px" src="./icon/ftcopy.svg">   -->
-          </div>
-          <div class="prompts">
-            <!-- <sp-label slot="label">Prompt</sp-label> -->
-            <div class="">
-              <sp-textarea
-                id="taPrompt"
-                placeholder="Prompt"
-                value="cute cat, {painterly_style_1}"
-              ></sp-textarea>
-              <!-- <textarea id="taPrompt" placeholder="Prompt" value="cute cat"></textarea> -->
+                    <!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
+                </div>
+                <div class="" id="divInitImageViewerContainer">
+                    <!-- <img  class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                </div>
+                <hr />
+                <div class="" id="divInitMaskViewerContainer">
+                    <!-- <img  class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                </div>
+                <hr />
+                <div class="viewer-container" id="divViewerImagesContainer">
+                    <!-- <img  class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                </div>
             </div>
 
-            <div class="">
-              <sp-textarea
-                id="taNegativePrompt"
-                placeholder="Negative Prompt"
-                id="taNegativePrompt"
-                value="{ugly}"
-                multiline
-                grows
-              ></sp-textarea>
-            </div>
-          </div>
+            <div class="sp-tab-page" id="sp-history-tab-page">
+                <div class="flexContainer">
+                    <sp-label slot="label"
+                        >history of all the images you generated</sp-label
+                    >
+                    <div id="historySeedLabelContainer">
+                        <sp-label slot="label">Seed:</sp-label
+                        ><sp-label slot="label" id="historySeedLabel"
+                            >00000000000</sp-label
+                        >
+                    </div>
+                </div>
+                <div></div>
+                <div>
+                    <sp-textfield
+                        id="imageSearchField"
+                        type="text"
+                        placeholder="cute cats"
+                        value=""
+                        ><sp-label slot="label">Search:</sp-label></sp-textfield
+                    >
 
-          <sp-radio-group>
-            <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
-            <sp-radio
-              title="use this mode to generate images from text only"
-              class="rbMode"
-              checked
-              value="txt2img"
-              >txt2img</sp-radio
-            >
-            <sp-radio
-              title="use this mode to generate variation of an image"
-              class="rbMode"
-              value="img2img"
-              >img2img</sp-radio
-            >
-            <sp-radio
-              title="use this mode to generate variation of a small area of an image, while keeping the rest of the image intact"
-              class="rbMode"
-              value="inpaint"
-              >inpaint</sp-radio
-            >
-            <sp-radio
-              title="use this mode to (1) fill any missing area of an image,(2) expand an image"
-              class="rbMode"
-              id="rbOutpaintMode"
-              value="outpaint"
-              >outpaint</sp-radio
-            >
-            <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
-          </sp-radio-group>
-
-          <div id="image_viewer">
-            <div class="imgButton">
-              <!-- 
-            <button class="button-style2" id="btnInitInpaint">Init inpaint
-              Mask</button> -->
-              <!-- <button button class="button-style2" id="btnInitOutpaint">Init Outpaint
-              Mask</button> -->
-            </div>
-
-            <!-- <sp-detail>Image from Web:</sp-detail> -->
-
-            <!--       
-          <img id="init_image" src='' width="100" height="100">
-          <img id="init_image_mask" src='' width="100" height="100"> -->
-            <!-- <sp-checkbox id="chUseMaskImage">use mask image</sp-checkbox> -->
-            <table id="tableInitImageContainer">
-              <tr>
-                <td id="initImageColumn">
-                  <div id="init_image_container" class="imgContainer">
-                    <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
-
-                    <div>
-                      <img
-                        id="init_image"
-                        class="column-item-image"
+                    <button class="btnSquare" id="btnImageSearch">
+                        Image Search
+                    </button>
+                    <button class="btnSquare" id="btnLoadHistory">
+                        Load Previous Generations
+                    </button>
+                </div>
+                <div class="viewer-container" id="divHistoryImagesContainer">
+                    <img
+                        class="history-image"
+                        id="history_image_test"
+                        data-metadata_json_string='{"a":1}'
                         src="https://source.unsplash.com/random"
-                        width="300px"
-                        height="100px"
-                      />
-                    </div>
-                    <div class="imgButton">
-                      <button
-                        class="column-item button-style disabled-btn"
-                        disabled
-                        id="bSetInitImage"
-                      >
-                        Image
-                      </button>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div id="init_image_mask_container" class="imgContainer">
-                    <div>
-                      <img
-                        id="init_image_mask"
-                        class="column-item-image"
-                        src="https://source.unsplash.com/random"
-                        width="100px"
-                        height="100px"
-                      />
-                    </div>
-                    <div class="imgButton">
-                      <button
-                        class="column-item button-style disabled-btn"
-                        disabled
-                        id="bSetInitImageMask"
-                      >
-                        Mask
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </table>
-          </div>
-        </div>
-        <div class="">
-          <div id="batchNumber-steps-container">
-            <div id="batchNumberUi">
-              <div style="display: flex">
-                <div id="batchNumberSdUiTabContainer">
-                  <sp-label>Images:</sp-label
-                  ><sp-textfield
-                    title="the number of images to generate at once.The larger the number more VRAM stable diffusion will use."
-                    id="tiNumberOfImages"
-                    type="number"
-                    placeholder="1"
-                    value="1"
-                  ></sp-textfield>
+                    />
+                </div>
+            </div>
+
+            <div class="sp-tab-page" id="sp-prompts-library-tab-page">
+                <sp-label slot="label"
+                    >Prompt Shortcut: a single word that represent a
+                    prompt</sp-label
+                >
+                <div class="">
+                    <sp-label slot="label"
+                        >Key for new prompt shortcut</sp-label
+                    >
+                    <sp-textarea
+                        id="KeyPromptShortcut"
+                        placeholder="to be replaced"
+                        value=""
+                    ></sp-textarea>
+                </div>
+                <div class="">
+                    <sp-label slot="label"
+                        >Value for new prompt shortcut</sp-label
+                    >
+                    <sp-textarea
+                        id="ValuePromptShortcut"
+                        placeholder="to be replaced with"
+                        value=""
+                    ></sp-textarea>
+                    <button class="btnSquare" id="btnUpdatePromptShortcut">
+                        Add to Prompt Shortcut
+                    </button>
+                </div>
+                <div class="">
+                    <sp-textarea
+                        id="taPromptShortcut"
+                        placeholder="prompt shortcut"
+                        value=""
+                    ></sp-textarea>
                 </div>
                 <div>
-                  <sp-label>Steps:</sp-label
-                  ><sp-textfield
-                    title="the higher the steps the longer it will take to generate an image"
-                    id="tiNumberOfSteps"
-                    type="number"
-                    placeholder="20"
-                    value="20"
-                  ></sp-textfield>
+                    <sp-picker size="m" label="Selection a prompt">
+                        <sp-menu id="mPromptShortcutMenu" slot="options">
+                            <!-- <sp-menu-item> item </sp-menu-item> -->
+                        </sp-menu>
+                    </sp-picker>
+                    <button class="btnSquare" id="btnRefreshPromptShortcutMenu">
+                        Refresh Menu
+                    </button>
+                </div>
+                <div>
+                    <button class="btnSquare" id="btnLoadPromptShortcut">
+                        Load
+                    </button>
+                    <button class="btnSquare" id="btnSavePromptShortcut">
+                        Save
+                    </button>
                 </div>
-              </div>
             </div>
-          </div>
-          <div id="selectionMode">
-            <div>
-              <sp-label id="rbSelectionModeLabel" slot="label"
-                >Selection Mode:</sp-label
-              >
+            <div class="sp-tab-page" id="sp-horde-tab-page">
+                <!-- Horde tab page -->
+                <div></div>
+                <sp-checkbox id="chUseHorde"
+                    >Use Stable Diffusion Horde</sp-checkbox
+                >
+                <div id="menu-bar-container_horde" style="display: flex">
+                    <sp-picker size="m" label="Selection type">
+                        <sp-menu id="mModelsMenuHorde" slot="options">
+                            <!-- <sp-menu-item> item </sp-menu-item> -->
+                        </sp-menu>
+                    </sp-picker>
+
+                    <button class="btnSquare" id="btnRefreshModelsHorde">
+                        Refresh Models
+                    </button>
+                    <!-- <sp-label slot="label"
+              id="lVersionNumber">v0.0.0</sp-label> -->
+                </div>
+                <div>
+                    <sp-checkbox id="chUseNSFW">NSFW</sp-checkbox>
+                    <sp-checkbox id="chUseSharedLaion"
+                        >Share with LION</sp-checkbox
+                    >
+                    <sp-slider
+                        style="display: none"
+                        show-value="true"
+                        id="slSeedVariation"
+                        min="1"
+                        max="30"
+                        value="1"
+                    >
+                        <sp-label slot="label">Seed variation:</sp-label>
+                    </sp-slider>
+                </div>
             </div>
 
-            <div id="menu-bar-container_preset" style="display: inline-flex">
-              <sp-radio-group id="selectionModeGroup" class="">
-                <sp-radio class="rbSelectionMode" checked value="ratio"
-                  >ratio</sp-radio
+            <div class="sp-tab-page" id="sp-settings-tab-page">
+                <!-- settings tab page -->
+                <div>
+                    <sp-label>SD Url:</sp-label
+                    ><sp-textfield
+                        id="tiSdUrl"
+                        type="text"
+                        placeholder="http://127.0.0.1:7860"
+                        value=""
+                    ></sp-textfield
+                    ><button class="btnSquare" id="btnSdUrl">Submit</button>
+                </div>
+                <sp-checkbox id="chUseSharpMask">use sharp mask</sp-checkbox>
+                <sp-checkbox checked id="chUseSmartObject"
+                    >Smart Object</sp-checkbox
                 >
-                <sp-radio
-                  title="use the selection area width and height to fill the width and height sliders"
-                  class="rbSelectionMode"
-                  value="precise"
-                  >precise</sp-radio
+                <sp-checkbox checked id="chUseSilentImport"
+                    >Use Silent Import</sp-checkbox
                 >
-                <sp-radio
-                  title="fill the width and height sliders manually"
-                  class="rbSelectionMode"
-                  value="ignore"
-                  >ignore</sp-radio
+                <!-- <a href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing" target="_blank">Don't have GPU, use Colab</a> -->
+                <sp-link
+                    href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing"
+                    >Use Colab</sp-link
                 >
-              </sp-radio-group>
+            </div>
 
-              <sp-picker
-                title="auto fill the plugin with smart settings, to speed up your working process."
-                size="s"
-                label="Smart Preset"
-              >
-                <sp-menu id="mPresetMenu" slot="options">
-                  <!-- <sp-menu-item> item </sp-menu-item> -->
-                </sp-menu>
-              </sp-picker>
-            </div>
-            <div style="display: flex">
-              <sp-slider
-                show-value="false"
-                id="slWidth"
-                min="1"
-                max="32"
-                value="8"
-              >
-                <sp-label slot="label">Width:</sp-label>
-                <sp-label class="labelNumber" slot="label" id="lWidth"
-                  >512</sp-label
-                >
-              </sp-slider>
-              <sp-slider
-                show-value="false"
-                id="slHeight"
-                min="1"
-                max="32"
-                value="8"
-              >
-                <sp-label slot="label">Height:</sp-label>
-                <sp-label class="labelNumber" slot="label" id="lHeight"
-                  >512</sp-label
-                >
-              </sp-slider>
-            </div>
-            <!-- <div id='hi-res-sliders-container' style="display:none;">
+            <div
+                class="sp-tab-page visible-hack"
+                id="sp-stable-diffusion-ui-tab-page"
+            >
+                <div id="menu-bar-container">
+                    <sp-picker size="m" label="Selection type">
+                        <sp-menu id="mModelsMenu" slot="options">
+                            <!-- <sp-menu-item> item </sp-menu-item> -->
+                        </sp-menu>
+                    </sp-picker>
+
+                    <button
+                        title="Refresh the plugin, only fixes minor issues."
+                        class=""
+                        id="btnRefreshModels"
+                    >
+                        Refresh
+                    </button>
+                    <!-- <sp-label slot="label"
+          id="lVersionNumber">v0.0.0</sp-label> -->
+                </div>
+
+                <!-- stable diffusion tab page -->
+
+                <div id="sdBtnContainer">
+                    <div
+                        style="
+                            display: inline-flex;
+                            justify-content: space-between;
+                        "
+                    >
+                        <button
+                            class="btnSquare"
+                            id="btnLayerToSelection"
+                            title="Move and reSize the highlighted layer to fit into the Selection Area "
+                        >
+                            L2S
+                        </button>
+                        <button class="btnSquare btnGenerateClass">
+                            Generate txt2img
+                        </button>
+                        <button
+                            class="btnSquare btnInterruptClass"
+                            id="btnInterrupt"
+                            style="display: none"
+                        >
+                            Interrupt
+                        </button>
+                    </div>
+                    <!-- <button class="btnSquare btnInterruptClass" style="display:none;">Interrupt More</button> -->
+                    <!-- <button class="btnSquare" id="btnCleanLayers">Clean Layers</button> -->
+                    <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
+        <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button> -->
+
+                    <div
+                        style="
+                            display: inline-flex;
+                            justify-content: space-between;
+                            width: 133px;
+                        "
+                    >
+                        <button
+                            class="btnSquare acceptClass acceptAllImgBtn"
+                            style="display: none"
+                        ></button>
+                        <button
+                            class="btnSquare discardClass discardAllImgBtn"
+                            style="display: none"
+                        ></button>
+                        <!-- <button class="btnSquare customClass"  style="display:none;">Accept Selected</button> -->
+                        <button
+                            class="btnSquare snapshotButton"
+                            id="btnSnapshot"
+                            title="create a snapshot of what you see on the canvas and place on a new layer"
+                        >
+                            Snapshot
+                        </button>
+                        <button
+                            class="btnSquare resetButton"
+                            id="btnResetSettings"
+                            title="reset the ui settings to their default values"
+                        >
+                            Reset Settings
+                        </button>
+
+                        <!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
+                    </div>
+                </div>
+
+                <div>
+                    <div id="progressContainer" class="">
+                        <sp-progressbar
+                            class="pProgressBars"
+                            id="pProgressBar"
+                            max="100"
+                            value="0"
+                        >
+                            <sp-label slot="label">Progress...</sp-label>
+                        </sp-progressbar>
+                        <sp-checkbox
+                            title="use {keyword} form the prompts library"
+                            id="chUsePromptShortcut"
+                            checked
+                            >prompt shortcut</sp-checkbox
+                        >
+                    </div>
+                    <div>
+                        <!-- icon only svg button -->
+                        <sp-action-button
+                            id="svg_sp_btn"
+                            style="
+                                padding: 0;
+                                max-width: 32px;
+                                max-height: 32px;
+                                display: none;
+                            "
+                        >
+                            <div slot="icon" style="fill: currentColor">
+                                <svg
+                                    viewBox="0 0 36 36"
+                                    style="width: 18px; height: 18px"
+                                >
+                                    <path
+                                        d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+                                    />
+                                </svg>
+                            </div>
+                        </sp-action-button>
+
+                        <!-- icon with svg button -->
+                        <sp-action-button style="display: none">
+                            <div slot="icon" style="fill: currentColor">
+                                <svg
+                                    viewBox="0 0 36 36"
+                                    style="width: 18px; height: 18px"
+                                >
+                                    <path
+                                        d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+                                    />
+                                </svg>
+                            </div>
+                            Edit Text
+                        </sp-action-button>
+
+                        <!-- <img width="15px" height="15px" src="./icon/ftcopy.svg">   -->
+                    </div>
+                    <div class="prompts">
+                        <!-- <sp-label slot="label">Prompt</sp-label> -->
+                        <div class="">
+                            <sp-textarea
+                                id="taPrompt"
+                                placeholder="Prompt"
+                                value="cute cat, {painterly_style_1}"
+                            ></sp-textarea>
+                            <!-- <textarea id="taPrompt" placeholder="Prompt" value="cute cat"></textarea> -->
+                        </div>
+
+                        <div class="">
+                            <sp-textarea
+                                id="taNegativePrompt"
+                                placeholder="Negative Prompt"
+                                id="taNegativePrompt"
+                                value="{ugly}"
+                                multiline
+                                grows
+                            ></sp-textarea>
+                        </div>
+                    </div>
+
+                    <sp-radio-group>
+                        <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
+                        <sp-radio
+                            title="use this mode to generate images from text only"
+                            class="rbMode"
+                            checked
+                            value="txt2img"
+                            >txt2img</sp-radio
+                        >
+                        <sp-radio
+                            title="use this mode to generate variation of an image"
+                            class="rbMode"
+                            value="img2img"
+                            >img2img</sp-radio
+                        >
+                        <sp-radio
+                            title="use this mode to generate variation of a small area of an image, while keeping the rest of the image intact"
+                            class="rbMode"
+                            value="inpaint"
+                            >inpaint</sp-radio
+                        >
+                        <sp-radio
+                            title="use this mode to (1) fill any missing area of an image,(2) expand an image"
+                            class="rbMode"
+                            id="rbOutpaintMode"
+                            value="outpaint"
+                            >outpaint</sp-radio
+                        >
+                        <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
+                    </sp-radio-group>
+
+                    <div id="image_viewer">
+                        <div class="imgButton">
+                            <!-- 
+            <button class="button-style2" id="btnInitInpaint">Init inpaint
+              Mask</button> -->
+                            <!-- <button button class="button-style2" id="btnInitOutpaint">Init Outpaint
+              Mask</button> -->
+                        </div>
+
+                        <!-- <sp-detail>Image from Web:</sp-detail> -->
+
+                        <!--       
+          <img id="init_image" src='' width="100" height="100">
+          <img id="init_image_mask" src='' width="100" height="100"> -->
+                        <!-- <sp-checkbox id="chUseMaskImage">use mask image</sp-checkbox> -->
+                        <table id="tableInitImageContainer">
+                            <tr>
+                                <td id="initImageColumn">
+                                    <div
+                                        id="init_image_container"
+                                        class="imgContainer"
+                                    >
+                                        <!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
+
+                                        <div>
+                                            <img
+                                                id="init_image"
+                                                class="column-item-image"
+                                                src="https://source.unsplash.com/random"
+                                                width="300px"
+                                                height="100px"
+                                            />
+                                        </div>
+                                        <div class="imgButton">
+                                            <button
+                                                class="column-item button-style disabled-btn"
+                                                disabled
+                                                id="bSetInitImage"
+                                            >
+                                                Image
+                                            </button>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div
+                                        id="init_image_mask_container"
+                                        class="imgContainer"
+                                    >
+                                        <div>
+                                            <img
+                                                id="init_image_mask"
+                                                class="column-item-image"
+                                                src="https://source.unsplash.com/random"
+                                                width="100px"
+                                                height="100px"
+                                            />
+                                        </div>
+                                        <div class="imgButton">
+                                            <button
+                                                class="column-item button-style disabled-btn"
+                                                disabled
+                                                id="bSetInitImageMask"
+                                            >
+                                                Mask
+                                            </button>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div class="">
+                    <div id="batchNumber-steps-container">
+                        <div id="batchNumberUi">
+                            <div style="display: flex">
+                                <div id="batchNumberSdUiTabContainer">
+                                    <sp-label>Images:</sp-label
+                                    ><sp-textfield
+                                        title="the number of images to generate at once.The larger the number more VRAM stable diffusion will use."
+                                        id="tiNumberOfImages"
+                                        type="number"
+                                        placeholder="1"
+                                        value="1"
+                                    ></sp-textfield>
+                                </div>
+                                <div>
+                                    <sp-label>Steps:</sp-label
+                                    ><sp-textfield
+                                        title="the higher the steps the longer it will take to generate an image"
+                                        id="tiNumberOfSteps"
+                                        type="number"
+                                        placeholder="20"
+                                        value="20"
+                                    ></sp-textfield>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="selectionMode">
+                        <div>
+                            <sp-label id="rbSelectionModeLabel" slot="label"
+                                >Selection Mode:</sp-label
+                            >
+                        </div>
+
+                        <div
+                            id="menu-bar-container_preset"
+                            style="display: inline-flex"
+                        >
+                            <sp-radio-group id="selectionModeGroup" class="">
+                                <sp-radio
+                                    class="rbSelectionMode"
+                                    checked
+                                    value="ratio"
+                                    >ratio</sp-radio
+                                >
+                                <sp-radio
+                                    title="use the selection area width and height to fill the width and height sliders"
+                                    class="rbSelectionMode"
+                                    value="precise"
+                                    >precise</sp-radio
+                                >
+                                <sp-radio
+                                    title="fill the width and height sliders manually"
+                                    class="rbSelectionMode"
+                                    value="ignore"
+                                    >ignore</sp-radio
+                                >
+                            </sp-radio-group>
+
+                            <sp-picker
+                                title="auto fill the plugin with smart settings, to speed up your working process."
+                                size="s"
+                                label="Smart Preset"
+                            >
+                                <sp-menu id="mPresetMenu" slot="options">
+                                    <!-- <sp-menu-item> item </sp-menu-item> -->
+                                </sp-menu>
+                            </sp-picker>
+                        </div>
+                        <div style="display: flex">
+                            <sp-slider
+                                show-value="false"
+                                id="slWidth"
+                                min="1"
+                                max="32"
+                                value="8"
+                            >
+                                <sp-label slot="label">Width:</sp-label>
+                                <sp-label
+                                    class="labelNumber"
+                                    slot="label"
+                                    id="lWidth"
+                                    >512</sp-label
+                                >
+                            </sp-slider>
+                            <sp-slider
+                                show-value="false"
+                                id="slHeight"
+                                min="1"
+                                max="32"
+                                value="8"
+                            >
+                                <sp-label slot="label">Height:</sp-label>
+                                <sp-label
+                                    class="labelNumber"
+                                    slot="label"
+                                    id="lHeight"
+                                    >512</sp-label
+                                >
+                            </sp-slider>
+                        </div>
+                        <!-- <div id='hi-res-sliders-container' style="display:none;">
           <sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
             <sp-label slot="label">Hi Res Width:</sp-label>
             <sp-label class="labelNumber" slot="label" id="hWidth">512</sp-label>
@@ -1080,234 +1136,296 @@
             <sp-label class="labelNumber" slot="label" id="hDenoisingStrength">0.7</sp-label>
           </sp-slider>
         </div> -->
-            <div style="display: flex">
-              <sp-slider
-                title="larger value will put more emphasis on the prompt"
-                show-value="true"
-                id="slCfgScale"
-                min="1"
-                max="30"
-                value="7"
-              >
-                <sp-label slot="label">CFG Scale:</sp-label>
-                <!-- <sp-label slot="label" id="lCfgScale">7</sp-label> -->
-              </sp-slider>
+                        <div style="display: flex">
+                            <sp-slider
+                                title="larger value will put more emphasis on the prompt"
+                                show-value="true"
+                                id="slCfgScale"
+                                min="1"
+                                max="30"
+                                value="7"
+                            >
+                                <sp-label slot="label">CFG Scale:</sp-label>
+                                <!-- <sp-label slot="label" id="lCfgScale">7</sp-label> -->
+                            </sp-slider>
 
-              <sp-slider
-                show-value="false"
-                id="slDenoisingStrength"
-                min="0"
-                max="100"
-                value="70"
-              >
-                <sp-label slot="label">Denoising Strength:</sp-label>
-                <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label>
-              </sp-slider>
-            </div>
+                            <sp-slider
+                                show-value="false"
+                                id="slDenoisingStrength"
+                                min="0"
+                                max="100"
+                                value="70"
+                            >
+                                <sp-label slot="label"
+                                    >Denoising Strength:</sp-label
+                                >
+                                <sp-label slot="label" id="lDenoisingStrength"
+                                    >0.7</sp-label
+                                >
+                            </sp-slider>
+                        </div>
 
-            <sp-slider
-              show-value="true"
-              id="slMaskBlur"
-              min="0"
-              max="64"
-              value="7"
-            >
-              <sp-label slot="label">Mask Blur:</sp-label>
-              <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
-            </sp-slider>
-            <sp-slider
-              show-value="true"
-              id="slMaskExpansion"
-              min="0"
-              max="64"
-              value="40"
-              title="the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur"
-            >
-              <sp-label slot="label">Mask Expansion:</sp-label>
-              <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
-            </sp-slider>
+                        <sp-slider
+                            show-value="true"
+                            id="slMaskBlur"
+                            min="0"
+                            max="64"
+                            value="7"
+                        >
+                            <sp-label slot="label">Mask Blur:</sp-label>
+                            <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
+                        </sp-slider>
+                        <sp-slider
+                            show-value="true"
+                            id="slMaskExpansion"
+                            min="0"
+                            max="64"
+                            value="40"
+                            title="the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur"
+                        >
+                            <sp-label slot="label">Mask Expansion:</sp-label>
+                            <!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
+                        </sp-slider>
 
-            <div style="display: flex">
-              <sp-slider
-                show-value="false"
-                id="slInpaintingMaskWeight"
-                min="0"
-                max="100"
-                value="100"
-                title="0 will keep the composition; 1 will allow composition to change"
-              >
-                <sp-label slot="label"
-                  >Inpainting conditioning mask strength:</sp-label
-                >
-                <sp-label slot="label" id="lInpaintingMaskWeight">1</sp-label>
-              </sp-slider>
-            </div>
+                        <div style="display: flex">
+                            <sp-slider
+                                show-value="false"
+                                id="slInpaintingMaskWeight"
+                                min="0"
+                                max="100"
+                                value="100"
+                                title="0 will keep the composition; 1 will allow composition to change"
+                            >
+                                <sp-label slot="label"
+                                    >Inpainting conditioning mask
+                                    strength:</sp-label
+                                >
+                                <sp-label
+                                    slot="label"
+                                    id="lInpaintingMaskWeight"
+                                    >1</sp-label
+                                >
+                            </sp-slider>
+                        </div>
 
-            <div id="slInpainting_fill">
-              <sp-radio-group id="Inpainting_fill_group" class="">
-                <sp-label slot="label">Mask Content:</sp-label>
-                <sp-radio class="rbMaskContent" checked value="0"
-                  >fill</sp-radio
-                >
-                <sp-radio class="rbMaskContent" value="1">original</sp-radio>
-                <sp-radio class="rbMaskContent" value="2"
-                  >latent noise</sp-radio
-                >
-                <sp-radio class="rbMaskContent" value="3"
-                  >latent nothing</sp-radio
-                >
-              </sp-radio-group>
-            </div>
+                        <div id="slInpainting_fill">
+                            <sp-radio-group id="Inpainting_fill_group" class="">
+                                <sp-label slot="label">Mask Content:</sp-label>
+                                <sp-radio
+                                    class="rbMaskContent"
+                                    checked
+                                    value="0"
+                                    >fill</sp-radio
+                                >
+                                <sp-radio class="rbMaskContent" value="1"
+                                    >original</sp-radio
+                                >
+                                <sp-radio class="rbMaskContent" value="2"
+                                    >latent noise</sp-radio
+                                >
+                                <sp-radio class="rbMaskContent" value="3"
+                                    >latent nothing</sp-radio
+                                >
+                            </sp-radio-group>
+                        </div>
 
-            <div style="display: flex">
-              <sp-checkbox class="checkbox" id="chInpaintFullRes"
-                >Inpaint at Full Res</sp-checkbox
-              >
-              <sp-checkbox class="checkbox" id="chRestoreFaces"
-                >Restore Faces</sp-checkbox
-              >
-              <sp-checkbox class="checkbox" id="chHiResFixs"
-                >Hi Res Fix</sp-checkbox
-              >
-            </div>
-            <div id="HiResDiv" style="display: none">
-              <div style="display: flex">
-                <div>
-                  <sp-label>Upscaler: </sp-label>
-                  <sp-picker size="m" label="Upscaler Options">
-                    <sp-menu id="hrModelsMenu" slot="options">
-                      <!-- <sp-menu-item> item </sp-menu-item> -->
-                    </sp-menu>
-                  </sp-picker>
-                </div>
-                <div>
-                  <sp-label>Hi Res Steps:</sp-label
-                  ><sp-textfield
-                    id="hrNumberOfSteps"
-                    type="number"
-                    placeholder="20"
-                    value="20"
-                    style="margin-top: 3px; width: auto"
-                  ></sp-textfield>
-                </div>
-              </div>
-              <div id="hi-res-sliders-container" style="display: flex">
-                <sp-slider
-                  show-value="false"
-                  id="hrWidth"
-                  min="1"
-                  max="32"
-                  value="8"
-                >
-                  <sp-label slot="label">Hi Res Output Width:</sp-label>
-                  <sp-label class="labelNumber" slot="label" id="hWidth"
-                    >512</sp-label
-                  >
-                </sp-slider>
-                <sp-slider
-                  show-value="false"
-                  id="hrHeight"
-                  min="1"
-                  max="32"
-                  value="8"
-                >
-                  <sp-label slot="label">Hi Res Output Height:</sp-label>
-                  <sp-label class="labelNumber" slot="label" id="hHeight"
-                    >512</sp-label
-                  >
-                </sp-slider>
-                <sp-slider
-                  show-value="false"
-                  id="hrDenoisingStrength"
-                  min="0"
-                  max="100"
-                  value="70"
-                >
-                  <sp-label slot="label">
-                    High Res Denoising Strength:</sp-label
-                  >
-                  <sp-label slot="label" id="hDenoisingStrength">0.58</sp-label>
-                </sp-slider>
-              </div>
-            </div>
-            <sp-slider
-              show-value="false"
-              id="slInpaintPadding"
-              min="0"
-              max="64"
-              value="0"
-            >
-              <sp-label slot="label" id="lNameInpaintPdding"
-                >Inpaint Padding:</sp-label
-              >
-              <sp-label class="labelNumber" slot="label" id="lInpaintPadding"
-                >0</sp-label
-              >
-            </sp-slider>
-            <!-- <sp-slider id="slInpainting_fill" min="0" max="3" value="1">
+                        <div style="display: flex">
+                            <sp-checkbox class="checkbox" id="chInpaintFullRes"
+                                >Inpaint at Full Res</sp-checkbox
+                            >
+                            <sp-checkbox class="checkbox" id="chRestoreFaces"
+                                >Restore Faces</sp-checkbox
+                            >
+                            <sp-checkbox class="checkbox" id="chHiResFixs"
+                                >Hi Res Fix</sp-checkbox
+                            >
+                        </div>
+                        <div id="HiResDiv" style="display: none">
+                            <div style="display: flex">
+                                <div>
+                                    <sp-label>Upscaler: </sp-label>
+                                    <sp-picker
+                                        size="m"
+                                        label="Upscaler Options"
+                                    >
+                                        <sp-menu
+                                            id="hrModelsMenu"
+                                            slot="options"
+                                        >
+                                            <!-- <sp-menu-item> item </sp-menu-item> -->
+                                        </sp-menu>
+                                    </sp-picker>
+                                </div>
+                                <div>
+                                    <sp-label>Hi Res Steps:</sp-label
+                                    ><sp-textfield
+                                        id="hrNumberOfSteps"
+                                        type="number"
+                                        placeholder="20"
+                                        value="20"
+                                        style="margin-top: 3px; width: auto"
+                                    ></sp-textfield>
+                                </div>
+                            </div>
+                            <div
+                                id="hi-res-sliders-container"
+                                style="display: flex"
+                            >
+                                <sp-slider
+                                    show-value="false"
+                                    id="hrWidth"
+                                    min="1"
+                                    max="32"
+                                    value="8"
+                                >
+                                    <sp-label slot="label"
+                                        >Hi Res Output Width:</sp-label
+                                    >
+                                    <sp-label
+                                        class="labelNumber"
+                                        slot="label"
+                                        id="hWidth"
+                                        >512</sp-label
+                                    >
+                                </sp-slider>
+                                <sp-slider
+                                    show-value="false"
+                                    id="hrHeight"
+                                    min="1"
+                                    max="32"
+                                    value="8"
+                                >
+                                    <sp-label slot="label"
+                                        >Hi Res Output Height:</sp-label
+                                    >
+                                    <sp-label
+                                        class="labelNumber"
+                                        slot="label"
+                                        id="hHeight"
+                                        >512</sp-label
+                                    >
+                                </sp-slider>
+                                <sp-slider
+                                    show-value="false"
+                                    id="hrDenoisingStrength"
+                                    min="0"
+                                    max="100"
+                                    value="70"
+                                >
+                                    <sp-label slot="label">
+                                        High Res Denoising Strength:</sp-label
+                                    >
+                                    <sp-label
+                                        slot="label"
+                                        id="hDenoisingStrength"
+                                        >0.58</sp-label
+                                    >
+                                </sp-slider>
+                            </div>
+                        </div>
+                        <sp-slider
+                            show-value="false"
+                            id="slInpaintPadding"
+                            min="0"
+                            max="64"
+                            value="0"
+                        >
+                            <sp-label slot="label" id="lNameInpaintPdding"
+                                >Inpaint Padding:</sp-label
+                            >
+                            <sp-label
+                                class="labelNumber"
+                                slot="label"
+                                id="lInpaintPadding"
+                                >0</sp-label
+                            >
+                        </sp-slider>
+                        <!-- <sp-slider id="slInpainting_fill" min="0" max="3" value="1">
         <sp-label slot="label">Inpainting fill:</sp-label>
       </sp-slider> -->
-          </div>
-          <div>
-            <!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
-            <div style="display: flex">
-              <sp-label>Seed:</sp-label
-              ><sp-textfield
-                id="tiSeed"
-                placeholder="Seed"
-                value="-1"
-              ></sp-textfield>
-              <button
-                class="btnSquare"
-                id="btnRandomSeed"
-                style="margin-right: 3px; margin-left: 3px"
-              >
-                Random
-              </button>
-              <button class="btnSquare" id="btnLastSeed">Last</button>
+                    </div>
+                    <div>
+                        <!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
+                        <div style="display: flex">
+                            <sp-label>Seed:</sp-label
+                            ><sp-textfield
+                                id="tiSeed"
+                                placeholder="Seed"
+                                value="-1"
+                            ></sp-textfield>
+                            <button
+                                class="btnSquare"
+                                id="btnRandomSeed"
+                                style="margin-right: 3px; margin-left: 3px"
+                            >
+                                Random
+                            </button>
+                            <button class="btnSquare" id="btnLastSeed">
+                                Last
+                            </button>
+                        </div>
+                        <button type="button" id="collapsible">
+                            Show Samplers
+                        </button>
+                        <sp-radio-group id="sampler_group" class="content">
+                            <sp-label slot="label">Select Sampler:</sp-label>
+                            <sp-radio class="rbSampler" checked value="Euler a"
+                                >Euler a</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="Euler"
+                                >Euler</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="LMS"
+                                >LMS</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="Heun"
+                                >Heun</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM2"
+                                >DPM2</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM2 a"
+                                >DPM2 a</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM++ 2S a"
+                                >DPM++ 2S a</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM++ 2M"
+                                >DPM++ 2M</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM++ SDE"
+                                >DPM++ SDE</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM fast"
+                                >DPM fast</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM adaptive"
+                                >DPM adaptive</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="LMS Karras"
+                                >LMS Karras</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM2 Karras"
+                                >DPM2 Karras</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM2 a Karras"
+                                >DPM2 a Karras</sp-radio
+                            >
+                            <sp-radio
+                                class="rbSampler"
+                                value="DPM++ 2S a Karras"
+                                >DPM++ 2S a Karras</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM++ 2M Karras"
+                                >DPM++ 2M Karras</sp-radio
+                            >
+                            <sp-radio class="rbSampler" value="DPM++ SDE Karras"
+                                >DPM++ SDE Karras</sp-radio
+                            >
+                        </sp-radio-group>
+                    </div>
+                </div>
             </div>
-            <button type="button" id="collapsible">Show Samplers</button>
-            <sp-radio-group id="sampler_group" class="content">
-              <sp-label slot="label">Select Sampler:</sp-label>
-              <sp-radio class="rbSampler" checked value="Euler a"
-                >Euler a</sp-radio
-              >
-              <sp-radio class="rbSampler" value="Euler">Euler</sp-radio>
-              <sp-radio class="rbSampler" value="LMS">LMS</sp-radio>
-              <sp-radio class="rbSampler" value="Heun">Heun</sp-radio>
-              <sp-radio class="rbSampler" value="DPM2">DPM2</sp-radio>
-              <sp-radio class="rbSampler" value="DPM2 a">DPM2 a</sp-radio>
-              <sp-radio class="rbSampler" value="DPM++ 2S a"
-                >DPM++ 2S a</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM++ 2M">DPM++ 2M</sp-radio>
-              <sp-radio class="rbSampler" value="DPM++ SDE">DPM++ SDE</sp-radio>
-              <sp-radio class="rbSampler" value="DPM fast">DPM fast</sp-radio>
-              <sp-radio class="rbSampler" value="DPM adaptive"
-                >DPM adaptive</sp-radio
-              >
-              <sp-radio class="rbSampler" value="LMS Karras"
-                >LMS Karras</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM2 Karras"
-                >DPM2 Karras</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM2 a Karras"
-                >DPM2 a Karras</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM++ 2S a Karras"
-                >DPM++ 2S a Karras</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM++ 2M Karras"
-                >DPM++ 2M Karras</sp-radio
-              >
-              <sp-radio class="rbSampler" value="DPM++ SDE Karras"
-                >DPM++ SDE Karras</sp-radio
-              >
-            </sp-radio-group>
-          </div>
         </div>
-      </div>
-    </div>
-  </body>
+    </body>
 </html>
diff --git a/index.js b/index.js
index 5487590..1f41319 100644
--- a/index.js
+++ b/index.js
@@ -2,136 +2,139 @@
 // 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()
-    if (isSelectionActive) {
-      const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
+    try {
+        const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
+        if (isSelectionActive) {
+            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
-      } else {
-        //selection has not changed
+            if (await hasSelectionChanged(current_selection, g_selection)) {
+                return true
+            } else {
+                //selection has not changed
+                return false
+            }
+        }
+    } catch (e) {
+        console.warn(e)
         return false
-      }
     }
-  } catch (e) {
-    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()
-  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()
+    //set the width and height, hrWidth, and hrHeight using selection info and selection mode
+    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()
 
-    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 [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)
+        html_manip.autoFillInHRWidth(hr_width)
+        html_manip.autoFillInHRHeight(hr_height)
+    } else if (selection_mode === 'precise') {
+        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)
+    }
 }
 const eventHandler = async (event, descriptor) => {
-  try {
-    console.log(event, descriptor)
+    try {
+        console.log(event, descriptor)
 
-    const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
-    if (isSelectionActive) {
-      const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
+        const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
+        if (isSelectionActive) {
+            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))
+            // 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))
 
-      // const new_selection = await psapi.getSelectionInfoExe()
+            // const new_selection = await psapi.getSelectionInfoExe()
 
-      if (await hasSelectionChanged(current_selection, g_selection)) {
-        // 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)
-      } 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()
-        if (g_generation_session.isSameMode(current_mode)) {
-          // g_ui.startSessionUI()
-          g_ui.generateMoreUI()
+            if (await hasSelectionChanged(current_selection, g_selection)) {
+                // 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)
+            } 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()
+                if (g_generation_session.isSameMode(current_mode)) {
+                    // g_ui.startSessionUI()
+                    g_ui.generateMoreUI()
+                }
+            }
         }
-      }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
-require("photoshop").action.addNotificationListener(
-  ["set", "move"],
-  eventHandler
+require('photoshop').action.addNotificationListener(
+    ['set', 'move'],
+    eventHandler
 )
 
 async function getUniqueDocumentId() {
-  try {
-    uniqueDocumentId = await psapi.readUniqueDocumentIdExe()
+    try {
+        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
+        // 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
 
-    // String with valid UUID separated by dash
-    // const str = 'a24a6ea4-ce75-4665-a070-57453082c256'
+        // String with valid UUID separated by dash
+        // const str = 'a24a6ea4-ce75-4665-a070-57453082c256'
 
-    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
+        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
+        }
+    } catch (e) {
+        console.warn('warning Document Id may not be valid', e)
     }
-  } catch (e) {
-    console.warn("warning Document Id may not be valid", e)
-  }
-  return uniqueDocumentId
+    return uniqueDocumentId
 }
 
 // document
@@ -141,42 +144,44 @@ async function getUniqueDocumentId() {
 //   })
 
 // attach event listeners for tabs
-Array.from(document.querySelectorAll(".sp-tab")).forEach((theTab) => {
-  theTab.onclick = () => {
-    try {
-      // 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")
-        } else {
-          aTab.classList.remove("selected")
+Array.from(document.querySelectorAll('.sp-tab')).forEach((theTab) => {
+    theTab.onclick = () => {
+        try {
+            // 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')
+                } else {
+                    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')
+                    } else {
+                        tabPage.classList.remove('visible-hack')
+                    }
+                }
+            )
+        } catch (e) {
+            console.warn(e)
         }
-      })
-      Array.from(document.querySelectorAll(".sp-tab-page")).forEach(
-        (tabPage) => {
-          if (
-            tabPage.getAttribute("id").startsWith(theTab.getAttribute("id"))
-          ) {
-            tabPage.classList.add("visible-hack")
-          } else {
-            tabPage.classList.remove("visible-hack")
-          }
-        }
-      )
-    } catch (e) {
-      console.warn(e)
     }
-  }
 })
 
-document.getElementById("sp-viewer-tab").addEventListener("click", () => {
-  moveElementToAnotherTab("batchNumberUi", "batchNumberViewerTabContainer")
+document.getElementById('sp-viewer-tab').addEventListener('click', () => {
+    moveElementToAnotherTab('batchNumberUi', 'batchNumberViewerTabContainer')
 })
 document
-  .getElementById("sp-stable-diffusion-ui-tab")
-  .addEventListener("click", () => {
-    moveElementToAnotherTab("batchNumberUi", "batchNumber-steps-container")
-  })
+    .getElementById('sp-stable-diffusion-ui-tab')
+    .addEventListener('click', () => {
+        moveElementToAnotherTab('batchNumberUi', 'batchNumber-steps-container')
+    })
 // entrypoints.setup({
 
 //   panels:{
@@ -195,37 +200,37 @@ document
 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)
-  //     // Obtain the index of the first selected character
-  var start = promptTextarea.selectionStart
-  console.log("start: ", start)
-  //     // Obtain the index of the last selected character
-  //     var finish = txtarea.selectionEnd;
-  //     console.log("finish: ",finish)
+    // JavaScript
+    //     // Obtain the object reference for the <textarea>
+    // const txtarea = document.getElementById("taPrompt");
+    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)
+    //     // Obtain the index of the last selected character
+    //     var finish = txtarea.selectionEnd;
+    //     console.log("finish: ",finish)
 
-  //     // Obtain the selected text
-  //     var sel = txtarea.value.substring(start, finish);
-  //     console.log("selected textarea: ", sel)
+    //     // Obtain the selected text
+    //     var sel = txtarea.value.substring(start, finish);
+    //     console.log("selected textarea: ", sel)
 
-  // Do something with the selected content
+    // Do something with the selected content
 }
 // setInterval(getSelectedText,2000)
 function getCommentedString() {
-  // const text = document.getElementById("taPrompt").value
-  // let text = `Visit /*W3Schools
-  // cute, girl, painterly
-  // *\\ any text
-  // and prompt`;
-  // let text = `cute cat /*by greg
+    // const text = document.getElementById("taPrompt").value
+    // let text = `Visit /*W3Schools
+    // cute, girl, painterly
+    // *\\ any text
+    // and prompt`;
+    // let text = `cute cat /*by greg
 
-  // and artgerm
+    // and artgerm
 
-  //  */ and famous artist`
-  let text = `Visit /*W3Schools 
+    //  */ and famous artist`
+    let text = `Visit /*W3Schools 
   cute, girl, painterly   
   */ any text
   and prompt
@@ -238,238 +243,252 @@ function getCommentedString() {
   and artgerm 
   
    */ and famous artist`
-  console.log("getCommentedString: text: ", text)
+    console.log('getCommentedString: text: ', text)
 
-  // let pattern = /(\/)(\*)(\s|\S)*\*\\/g;
-  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)
-    await executeAsModal(async () => {
-      let inner_new_layer = await app.activeDocument.activeLayers[0].duplicate()
-      console.log("inner_new_layer id: ", inner_new_layer.id)
-    })
+    try {
+        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)
+        })
 
-    console.log("new active layer id: ", app.activeDocument.activeLayers[0].id)
-  } catch (e) {
-    console.warn("duplication error:", e)
-  }
+        console.log(
+            'new active layer id: ',
+            app.activeDocument.activeLayers[0].id
+        )
+    } catch (e) {
+        console.warn('duplication error:', e)
+    }
 }
 
 function tempDisableElement(element, time) {
-  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 = 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)
 }
 
 async function refreshUI() {
-  try {
-    const b_proxy_server_status = await updateVersionUI()
-    if (b_proxy_server_status) {
-      html_manip.setProxyServerStatus("connected", "disconnected")
-    } else {
-      html_manip.setProxyServerStatus("disconnected", "connected")
-    }
+    try {
+        const b_proxy_server_status = await updateVersionUI()
+        if (b_proxy_server_status) {
+            html_manip.setProxyServerStatus('connected', 'disconnected')
+        } else {
+            html_manip.setProxyServerStatus('disconnected', 'connected')
+        }
 
-    const bSamplersStatus = await initSamplers()
-    if (bSamplersStatus) {
-      //means both automatic1111 and proxy server are online
-      html_manip.setAutomaticStatus("connected", "disconnected")
-      // html_manip.setProxyServerStatus('connected','disconnected')
-    } else {
-      html_manip.setAutomaticStatus("disconnected", "connected")
-    }
-    await refreshModels()
-    //get the latest options
-    await g_sd_options_obj.getOptions()
-    //get the selected model
-    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)
+        const bSamplersStatus = await initSamplers()
+        if (bSamplersStatus) {
+            //means both automatic1111 and proxy server are online
+            html_manip.setAutomaticStatus('connected', 'disconnected')
+            // html_manip.setProxyServerStatus('connected','disconnected')
+        } else {
+            html_manip.setAutomaticStatus('disconnected', 'connected')
+        }
+        await refreshModels()
+        //get the latest options
+        await g_sd_options_obj.getOptions()
+        //get the selected model
+        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)
 
-    //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)
-  } catch (e) {
-    console.warn(e)
-  }
+        //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)
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 async function refreshModels() {
-  try {
-    g_models = await sdapi.requestGetModels()
-    // const models_menu_element = document.getElementById('mModelsMenu')
-    // models_menu_element.value = ""
-    document.getElementById("mModelsMenu").innerHTML = ""
+    try {
+        g_models = await sdapi.requestGetModels()
+        // const models_menu_element = document.getElementById('mModelsMenu')
+        // models_menu_element.value = ""
+        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)
+        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)
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function updateVersionUI() {
-  let bStatus = false
-  try {
-    version = await sdapi.getVersionRequest()
-    document.getElementById("lVersionNumber").textContent = version
-    if (version !== "v0.0.0") {
-      bStatus = true
+    let bStatus = false
+    try {
+        version = await sdapi.getVersionRequest()
+        document.getElementById('lVersionNumber').textContent = version
+        if (version !== 'v0.0.0') {
+            bStatus = true
+        }
+    } catch (e) {
+        console.warn(e)
+        document.getElementById('lVersionNumber').textContent = 'v0.0.0'
+        bStatus = false
     }
-  } catch (e) {
-    console.warn(e)
-    document.getElementById("lVersionNumber").textContent = "v0.0.0"
-    bStatus = false
-  }
-  return bStatus
+    return bStatus
 }
 
 async function initSamplers() {
-  let bStatus = false
-  try {
-    let sampler_group = document.getElementById("sampler_group")
-    sampler_group.innerHTML = ""
+    let bStatus = false
+    try {
+        let sampler_group = document.getElementById('sampler_group')
+        sampler_group.innerHTML = ''
 
-    const samplers = await sdapi.requestGetSamplers()
-    for (sampler of samplers) {
-      console.log(sampler)
-      // sampler.name
-      // <sp-radio class="rbSampler" value="Euler">Euler</sp-radio>
-      const rbSampler = document.createElement("sp-radio")
+        const samplers = await sdapi.requestGetSamplers()
+        for (sampler of samplers) {
+            console.log(sampler)
+            // sampler.name
+            // <sp-radio class="rbSampler" value="Euler">Euler</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)
-      //add click event on radio button for Sampler radio button, so that when a button is clicked it change g_sd_sampler globally
+            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}`)
-      })
+            //we could delete the click() event
+            rbSampler.addEventListener('click', (evt) => {
+                g_sd_sampler = evt.target.value
+                console.log(`You clicked: ${g_sd_sampler}`)
+            })
+        }
+        document
+            .getElementsByClassName('rbSampler')[0]
+            .setAttribute('checked', '')
+        if (samplers.length > 0) {
+            bStatus = true
+        }
+    } catch (e) {
+        console.warn(e)
     }
-    document.getElementsByClassName("rbSampler")[0].setAttribute("checked", "")
-    if (samplers.length > 0) {
-      bStatus = true
-    }
-  } catch (e) {
-    console.warn(e)
-  }
-  return bStatus
+    return bStatus
 }
 
 function promptShortcutExample() {
-  let prompt_shortcut_example = {
-    game_like:
-      "Unreal Engine, Octane Render, arcane card game ui, hearthstone art style, epic fantasy style art",
-    large_building_1: "castle, huge building, large building",
-    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
+    let prompt_shortcut_example = {
+        game_like:
+            'Unreal Engine, Octane Render, arcane card game ui, hearthstone art style, epic fantasy style art',
+        large_building_1: 'castle, huge building, large building',
+        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
 }
 
 function autoFillInSettings(metadata_json) {
-  try {
-    metadata_json1 = {
-      prompt:
-        "cute cat, A full portrait of a beautiful post apocalyptic offworld arctic explorer, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration\nNegative prompt:  ((((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)))",
-      Steps: "20",
-      Sampler: "Euler a",
-      "CFG scale": "7.0",
-      Seed: "2300061620",
-      Size: "512x512",
-      "Model hash": "3e16efc8",
-      "Seed resize from": "-1x-1",
-      "Denoising strength": "0",
-      "Conditional mask weight": "1.0",
+    try {
+        metadata_json1 = {
+            prompt: 'cute cat, A full portrait of a beautiful post apocalyptic offworld arctic explorer, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration\nNegative prompt:  ((((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)))',
+            Steps: '20',
+            Sampler: 'Euler a',
+            'CFG scale': '7.0',
+            Seed: '2300061620',
+            Size: '512x512',
+            'Model hash': '3e16efc8',
+            '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 = ''
+            if (prompts.length > 1) {
+                negative_prompt = prompts[1].trim()
+            }
+            //propmt = prompt[0]
+
+            return [prompts[0], negative_prompt]
+        }
+        let [prompt, negative_prompt] = extractNegativePrompt(
+            metadata_json['prompt']
+        )
+        negative_prompt = metadata_json['Negative prompt'] || negative_prompt
+
+        html_manip.autoFillInPrompt(prompt)
+        html_manip.autoFillInNegativePrompt(negative_prompt)
+
+        document.getElementById('tiNumberOfSteps').value =
+            metadata_json['Steps']
+
+        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']
+        )
+
+        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'])
+        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)
+            html_manip.autoFillInSliderUi(
+                metadata_json['Denoising strength'],
+                'hrDenoisingStrength',
+                'hDenoisingStrength',
+                100
+            )
+        } else {
+            //
+            html_manip.setHiResFixs(false)
+        }
+
+        // document.getElementById('tiSeed').value = metadata_json["Seed"]
+    } catch (e) {
+        console.error(`autoFillInSettings: ${e}`)
     }
-
-    //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 = ""
-      if (prompts.length > 1) {
-        negative_prompt = prompts[1].trim()
-      }
-      //propmt = prompt[0]
-
-      return [prompts[0], negative_prompt]
-    }
-    let [prompt, negative_prompt] = extractNegativePrompt(
-      metadata_json["prompt"]
-    )
-    negative_prompt = metadata_json["Negative prompt"] || negative_prompt
-
-    html_manip.autoFillInPrompt(prompt)
-    html_manip.autoFillInNegativePrompt(negative_prompt)
-
-    document.getElementById("tiNumberOfSteps").value = metadata_json["Steps"]
-
-    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"])
-
-    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"])
-    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)
-      html_manip.autoFillInSliderUi(
-        metadata_json["Denoising strength"],
-        "hrDenoisingStrength",
-        "hDenoisingStrength",
-        100
-      )
-    } else {
-      //
-      html_manip.setHiResFixs(false)
-    }
-
-    // document.getElementById('tiSeed').value = metadata_json["Seed"]
-  } catch (e) {
-    console.error(`autoFillInSettings: ${e}`)
-  }
 }
 //steps to load init_image:
 //duplicate the active layer
@@ -482,24 +501,24 @@ function autoFillInSettings(metadata_json) {
 //
 
 //**********Start: global variables
-let prompt_dir_name = ""
+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 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
@@ -534,10 +553,10 @@ g_sd_options_obj.getOptions()
 
 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 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
@@ -546,19 +565,19 @@ let g_ui = new ui.UI()
 let g_ui_settings = new ui.UISettings()
 
 const requestState = {
-  Generate: "generate",
-  Interrupt: "interrupt",
+    Generate: 'generate',
+    Interrupt: 'interrupt',
 }
 
-let g_request_status = "" //
+let g_request_status = '' //
 const generationMode = {
-  Txt2Img: "txt2img",
-  Img2Img: "img2img",
-  Inpaint: "inpaint",
-  Outpaint: "outpaint",
+    Txt2Img: 'txt2img',
+    Img2Img: 'img2img',
+    Inpaint: 'inpaint',
+    Outpaint: 'outpaint',
 }
 
-g_generation_session.mode = generationMode["Txt2Img"]
+g_generation_session.mode = generationMode['Txt2Img']
 let g_viewer_manager = new viewer.ViewerManager()
 
 //********** End: global variables */
@@ -575,115 +594,119 @@ 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
-      // console.log(`You clicked: ${g_sd_mode}`)
-      await displayUpdate()
-      await postModeSelection() // do things after selection
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    rbModeElement.addEventListener('click', async (evt) => {
+        try {
+            g_sd_mode = evt.target.value
+            // console.log(`You clicked: ${g_sd_mode}`)
+            await displayUpdate()
+            await postModeSelection() // do things after selection
+        } catch (e) {
+            console.warn(e)
+        }
+    })
 }
 async function createTempInpaintMaskLayer() {
-  if (!g_b_mask_layer_exist) {
-    //make new layer "Mask -- Paint White to Mask -- temporary"
+    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
-    console.log(
-      "g_inpaint_mask_layer_history_id: ",
-      g_inpaint_mask_layer_history_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)
-  if (historyBrushTools.length === 0 && g_b_mask_layer_exist) {
-    await util_layer.deleteLayers([g_inpaint_mask_layer])
+    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)
+    if (historyBrushTools.length === 0 && g_b_mask_layer_exist) {
+        await util_layer.deleteLayers([g_inpaint_mask_layer])
 
-    g_b_mask_layer_exist = false
-  }
+        g_b_mask_layer_exist = false
+    }
 }
 async function postModeSelection() {
-  //
-  try {
-    if (g_sd_mode === generationMode["Inpaint"]) {
-      //check if the we already have created a mask layer
-      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()
+    //
+    try {
+        if (g_sd_mode === generationMode['Inpaint']) {
+            //check if the we already have created a mask layer
+            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()
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (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}`)
-  })
+    rbMaskContentElement.addEventListener('click', async (evt) => {
+        // g_inpainting_fill = evt.target.value
+        // console.log(`You clicked: ${g_inpainting_fill}`)
+    })
 }
 
-document.addEventListener("mouseenter", async (event) => {
-  try {
-    //only check if the generation mode has not changed( e.g a session.mode === img2img and the current selection is "img2img"  ).
-    // changing the mode will trigger it's own procedure, so doing it here again is redundant
-    if (
-      g_generation_session.isActive() &&
-      g_generation_session.mode === g_sd_mode
-    ) {
-      //if the generation session is active and the selected mode is still the same as the generation mode
+document.addEventListener('mouseenter', async (event) => {
+    try {
+        //only check if the generation mode has not changed( e.g a session.mode === img2img and the current selection is "img2img"  ).
+        // changing the mode will trigger it's own procedure, so doing it here again is redundant
+        if (
+            g_generation_session.isActive() &&
+            g_generation_session.mode === g_sd_mode
+        ) {
+            //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 &&
-        (await hasSelectionChanged(new_selection, g_selection))
-      ) {
-        // if there is an active selection and if the selection has changed
+            if (
+                new_selection &&
+                (await hasSelectionChanged(new_selection, g_selection))
+            ) {
+                // 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)
-        } else {
-          // move the selection while the session is inactive
+                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)
+                } else {
+                    // move the selection while the session is inactive
+                }
+            } else {
+                // sessionStartHtml(true)//generate more, green color
+                //if you didn't move the selection.
+                // g_ui.startSessionUI()
+                g_ui.generateMoreUI()
+            }
         }
-      } else {
-        // sessionStartHtml(true)//generate more, green color
-        //if you didn't move the selection.
-        // g_ui.startSessionUI()
-        g_ui.generateMoreUI()
-      }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 })
 ////add tips to element when mouse hover on an element
 // function getToolTipElement(){
@@ -738,129 +761,146 @@ document.addEventListener("mouseenter", async (event) => {
 
 // show the interface that need to be shown and hide the interface that need to be hidden
 async function displayUpdate() {
-  try {
-    if (g_sd_mode == "txt2img") {
-      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_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"
+    try {
+        if (g_sd_mode == 'txt2img') {
+            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_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'
 
-      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"
-      if (html_manip.getHiResFixs()) {
-        document.getElementById("HiResDiv").style.display = "block"
-      }
+            document.getElementById('chHiResFixs').style.display = 'flex'
+            if (html_manip.getHiResFixs()) {
+                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('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("image_viewer").style.display = 'block'
-      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
-      // 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
-    }
-    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"
-      setTimeout(() => {
-        try {
-          document.getElementById("tableInitImageContainer").style.display =
-            "table" // show the table after some time so it gets rendered.
-        } catch (e) {
-          console.warn(e)
+            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
         }
-      }, 100)
 
-      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
+        if (g_sd_mode == 'img2img') {
+            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("HiResDiv").style.display = "none"
-      document.getElementById("chInpaintFullRes").style.display = "inline-flex"
-      if (document.getElementById("chInpaintFullRes").checked) {
-        document.getElementById("slInpaintPadding").style.display = "block"
-      } else {
-        document.getElementById("slInpaintPadding").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'
-      // document.getElementById('btnInitInpaint').style.display = 'none'
-    } else {
-      //txt2img or img2img
-      // document.getElementById('btnInitOutpaint').style.display = 'none'
-      // document.getElementById('btnInitInpaint').style.display = 'none'
-    }
+            document.getElementById('init_image_mask_container').style.display =
+                '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
+        }
+        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'
+            setTimeout(() => {
+                try {
+                    document.getElementById(
+                        'tableInitImageContainer'
+                    ).style.display = 'table' // show the table after some time so it gets rendered.
+                } catch (e) {
+                    console.warn(e)
+                }
+            }, 100)
 
-    if (g_generation_session.isActive()) {
-      //Note: remove the "or" operation after refactoring the code
-      //if the session is active
+            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
 
-      if (g_generation_session.mode !== g_sd_mode) {
-        //if a generation session is active but we changed mode. the generate button will reflect that
-        //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}`
-        })
-
-        html_manip.setGenerateButtonsColor("generate", "generate-more")
-      } else {
-        //1) and the session is active
-        //2) is the same generation mode
-
-        if (!(await hasSessionSelectionChanged())) {
-          //3a) and the selection hasn't change
-
-          const generate_btns = Array.from(
-            document.getElementsByClassName("btnGenerateClass")
-          )
-          generate_btns.forEach((element) => {
-            element.textContent = "Generate More"
-          })
-
-          html_manip.setGenerateButtonsColor("generate-more", "generate")
+            document.getElementById('HiResDiv').style.display = 'none'
+            document.getElementById('chInpaintFullRes').style.display =
+                'inline-flex'
+            if (document.getElementById('chInpaintFullRes').checked) {
+                document.getElementById('slInpaintPadding').style.display =
+                    'block'
+            } else {
+                document.getElementById('slInpaintPadding').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'
+            // document.getElementById('btnInitInpaint').style.display = 'none'
         } else {
-          //3b) selection has change
+            //txt2img or img2img
+            // document.getElementById('btnInitOutpaint').style.display = 'none'
+            // document.getElementById('btnInitInpaint').style.display = 'none'
         }
-      }
-    } else {
-      //session is not active
-      g_ui.setGenerateBtnText(`Generate ${g_sd_mode}`)
-      html_manip.setGenerateButtonsColor("generate", "generate-more")
+
+        if (g_generation_session.isActive()) {
+            //Note: remove the "or" operation after refactoring the code
+            //if the session is active
+
+            if (g_generation_session.mode !== g_sd_mode) {
+                //if a generation session is active but we changed mode. the generate button will reflect that
+                //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}`
+                })
+
+                html_manip.setGenerateButtonsColor('generate', 'generate-more')
+            } else {
+                //1) and the session is active
+                //2) is the same generation mode
+
+                if (!(await hasSessionSelectionChanged())) {
+                    //3a) and the selection hasn't change
+
+                    const generate_btns = Array.from(
+                        document.getElementsByClassName('btnGenerateClass')
+                    )
+                    generate_btns.forEach((element) => {
+                        element.textContent = 'Generate More'
+                    })
+
+                    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')
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 // function showLayerNames () {
 //   const app = window.require('photoshop').app
@@ -875,108 +915,108 @@ 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;
-  //   doc.activeTool = toolName;
-  // }
-  // const util = require('util')
+    // if (activeTool !== toolName) {
+    //   toolName = activeTool;
+    //   doc.activeTool = toolName;
+    // }
+    // 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")
-  document.getElementById("layers").innerHTML = `<span>
+    // console.log(util.inspect(myObject, {showHidden: false, depth: null, colors: true}))
+    console.dir(app, { depth: null })
+    console.log('hello this is Abdullah')
+    document.getElementById('layers').innerHTML = `<span>
     selectTool was called, ${activeTool}
     </span>`
 
-  //rectanglemarquee
-  // await require('photoshop').core.executeAsModal(newNormalLayer);
+    //rectanglemarquee
+    // await require('photoshop').core.executeAsModal(newNormalLayer);
 }
 
 async function testServerPath() {
-  // const serverPath = "https://api.github.com/users/abdullah"
+    // const serverPath = "https://api.github.com/users/abdullah"
 
-  try {
-    // const serverPath = 'https://api.weather.gov/points/123.4,342.5'
-    // const serverPath = 'https://api.github.com/users/abdullah'
-    // 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 = "https://3330-37-106-100-102.eu.ngrok.io"
-    console.log("testServerPath function was called")
+    try {
+        // const serverPath = 'https://api.weather.gov/points/123.4,342.5'
+        // const serverPath = 'https://api.github.com/users/abdullah'
+        // 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 = "https://3330-37-106-100-102.eu.ngrok.io"
+        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}`
-      )
+        if (!response.ok) {
+            throw new Error(
+                `HTTP error fetching weather station; status: ${response.status}`
+            )
+        }
+        let stationJson = await response.json()
+        console.dir(stationJson)
+    } catch (err) {
+        console.error('testServerPath error: ' + err.message)
     }
-    let stationJson = await response.json()
-    console.dir(stationJson)
-  } catch (err) {
-    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
-  let imageFile = await fs.getFileForOpening({
-    types: storage.fileTypes.images,
-  })
+    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)
+    // Create ImageFill for this image
+    const ImageFill = require('scenegraph').ImageFill
+    let fill = new ImageFill(imageFile)
 
-  // Set fill of first selected item
-  selection.items[0].fill = fill
+    // Set fill of first selected item
+    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(
-    () => {
-      // batchPlay([command], {})
-      const result = batchPlay(
-        [
-          {
-            _obj: "paste",
-            antiAlias: {
-              _enum: "antiAliasType",
-              _value: "antiAliasNone",
-            },
-            as: {
-              _class: "pixel",
-            },
-            _options: {
-              dialogOptions: "dontDisplay",
-            },
-          },
-        ],
+    executeAsModal(
+        () => {
+            // batchPlay([command], {})
+            const result = batchPlay(
+                [
+                    {
+                        _obj: 'paste',
+                        antiAlias: {
+                            _enum: 'antiAliasType',
+                            _value: 'antiAliasNone',
+                        },
+                        as: {
+                            _class: 'pixel',
+                        },
+                        _options: {
+                            dialogOptions: 'dontDisplay',
+                        },
+                    },
+                ],
+                {
+                    synchronousExecution: true,
+                    modalBehavior: 'fail',
+                }
+            )
+        },
         {
-          synchronousExecution: true,
-          modalBehavior: "fail",
+            commandName: 'Create Label',
         }
-      )
-    },
-    {
-      commandName: "Create Label",
-    }
-  )
+    )
 }
 function sliderToResolution(sliderValue) {
-  return sliderValue * 64
+    return sliderValue * 64
 }
 
 // document.querySelector('#slHeight').addEventListener('input', evt => {
@@ -996,21 +1036,21 @@ function sliderToResolution(sliderValue) {
 //   document.querySelector('#lWidth').textContent = width
 // })
 
-document.querySelector("#hrHeight").addEventListener("input", (evt) => {
-  hHeight = sliderToResolution(evt.target.value)
-  document.querySelector("#hHeight").textContent = hHeight
+document.querySelector('#hrHeight').addEventListener('input', (evt) => {
+    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
+document.querySelector('#hrWidth').addEventListener('input', (evt) => {
+    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
+document.querySelector('#slInpaintPadding').addEventListener('input', (evt) => {
+    padding = evt.target.value * 4
+    document.querySelector('#lInpaintPadding').textContent = padding
 })
 
 // document
@@ -1040,30 +1080,30 @@ document.querySelector("#slInpaintPadding").addEventListener("input", (evt) => {
 // // document.getElementById('btnPopulate').addEventListener('click', showLayerNames)
 
 async function snapAndFillHandler() {
-  try {
-    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
-    if (isSelectionAreaValid) {
-      if (g_generation_session.isFirstGeneration) {
-        // clear the layers related to the last mask operation.
-        // g_last_snap_and_fill_layers = await psapi.cleanLayers(
-        //   g_last_snap_and_fill_layers
-        // )
-        // 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)
-        })
-        // console.log(
-        //   'outpaint.snapAndFillExe(random_session_id):, g_last_snap_and_fill_layers: ',
-        //   g_last_snap_and_fill_layers
-        // )
-      }
-    } else {
-      psapi.promptForMarqueeTool()
+    try {
+        const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
+        if (isSelectionAreaValid) {
+            if (g_generation_session.isFirstGeneration) {
+                // clear the layers related to the last mask operation.
+                // g_last_snap_and_fill_layers = await psapi.cleanLayers(
+                //   g_last_snap_and_fill_layers
+                // )
+                // 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)
+                })
+                // console.log(
+                //   'outpaint.snapAndFillExe(random_session_id):, g_last_snap_and_fill_layers: ',
+                //   g_last_snap_and_fill_layers
+                // )
+            }
+        } else {
+            psapi.promptForMarqueeTool()
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 // document
@@ -1074,34 +1114,34 @@ async function snapAndFillHandler() {
 //   })
 
 async function easyModeOutpaint() {
-  try {
-    if (g_generation_session.isFirstGeneration) {
-      // clear the layers related to the last mask operation.
-      // g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
+    try {
+        if (g_generation_session.isFirstGeneration) {
+            // clear the layers related to the last mask operation.
+            // g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
 
-      // 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)
+            // 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)
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function btnInitInpaintHandler() {
-  try {
-    if (g_generation_session.isFirstGeneration) {
-      // delete the layers of the previous mask operation
-      // 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)
+    try {
+        if (g_generation_session.isFirstGeneration) {
+            // delete the layers of the previous mask operation
+            // 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)
 
-      // console.log ("outpaint.inpaintFasterExe(random_session_id):, g_last_inpaint_layers: ",g_last_inpaint_layers)
+            // console.log ("outpaint.inpaintFasterExe(random_session_id):, g_last_inpaint_layers: ",g_last_inpaint_layers)
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 // document
 //   .getElementById('btnInitInpaint')
@@ -1110,266 +1150,266 @@ 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"))
-    second_class_btns.forEach(
-      (element) => (element.style.display = "inline-block")
+    const first_class_btns = Array.from(
+        document.getElementsByClassName(first_class)
     )
-    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")
+    const second_class_btns = Array.from(
+        document.getElementsByClassName(second_class)
     )
-    if (g_generation_session.isActive()) {
-      //show generate more
 
-      first_class_btns.forEach(
-        (element) => (element.textContent = "Generate More")
-      )
+    if (isVisible) {
+        //show interrup button
+        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)
     } else {
-      //show generate button
-      first_class_btns.forEach(
-        (element) => (element.textContent = `Generate ${g_sd_mode}`)
-      )
+        //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() {
-  //discard all generated images setting highlight to false
-  //then call discard() to garbage collect the mask related layers
-  try {
-    for (const [path, viewer_image_obj] of Object.entries(
-      g_viewer_manager.pathToViewerImage
-    )) {
-      try {
-        viewer_image_obj.active(false) //deactivate the layer
-        viewer_image_obj.setHighlight(false) // mark each layer as discarded
-      } catch (e) {
-        console.error(e)
-      }
+    //discard all generated images setting highlight to false
+    //then call discard() to garbage collect the mask related layers
+    try {
+        for (const [path, viewer_image_obj] of Object.entries(
+            g_viewer_manager.pathToViewerImage
+        )) {
+            try {
+                viewer_image_obj.active(false) //deactivate the layer
+                viewer_image_obj.setHighlight(false) // mark each layer as discarded
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        await discard() // clean viewer tab
+    } catch (e) {
+        console.warn(e)
     }
-    await discard() // clean viewer tab
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function acceptAll() {
-  //accept all generated images by highlighting them
-  //then call discard() to garbage collect the mask related layers
-  try {
-    for (const [path, viewer_image_obj] of Object.entries(
-      g_viewer_manager.pathToViewerImage
-    )) {
-      try {
-        if (
-          viewer_image_obj.isActive() &&
-          viewer_image_obj instanceof viewer.OutputImage
-        ) {
-          //check if the active viewer_image_obj is a type of OutputImage and move it to the top of the output group folder
-          //this is so when we accept all layers the canvas will look the same. otherwise the image could be cover by another generated image
-          if (viewer_image_obj.isLayerValid()) {
-            await g_generation_session.moveToTopOfOutputGroup(
-              viewer_image_obj.layer
-            )
-          }
+    //accept all generated images by highlighting them
+    //then call discard() to garbage collect the mask related layers
+    try {
+        for (const [path, viewer_image_obj] of Object.entries(
+            g_viewer_manager.pathToViewerImage
+        )) {
+            try {
+                if (
+                    viewer_image_obj.isActive() &&
+                    viewer_image_obj instanceof viewer.OutputImage
+                ) {
+                    //check if the active viewer_image_obj is a type of OutputImage and move it to the top of the output group folder
+                    //this is so when we accept all layers the canvas will look the same. otherwise the image could be cover by another generated image
+                    if (viewer_image_obj.isLayerValid()) {
+                        await g_generation_session.moveToTopOfOutputGroup(
+                            viewer_image_obj.layer
+                        )
+                    }
+                }
+                viewer_image_obj.setHighlight(true) // mark each layer as accepted
+            } catch (e) {
+                console.error(e)
+            }
         }
-        viewer_image_obj.setHighlight(true) // mark each layer as accepted
-      } catch (e) {
-        console.error(e)
-      }
+        await discard() // clean viewer tab
+    } catch (e) {
+        console.warn(e)
     }
-    await discard() // clean viewer tab
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function discardSelected() {
-  //discard all generated images setting highlight to false
-  //then call discard() to garbage collect the mask related layers
-  try {
-    for (const [path, viewer_image_obj] of Object.entries(
-      g_viewer_manager.pathToViewerImage
-    )) {
-      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
-        }
+    //discard all generated images setting highlight to false
+    //then call discard() to garbage collect the mask related layers
+    try {
+        for (const [path, viewer_image_obj] of Object.entries(
+            g_viewer_manager.pathToViewerImage
+        )) {
+            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.toggleHighlight() // if invert the highlights on all images
-      } catch (e) {
-        console.error(e)
-      }
+                viewer_image_obj.toggleHighlight() // if invert the highlights on all images
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        await discard() // delete the images that currently highlighted
+    } catch (e) {
+        console.warn(e)
     }
-    await discard() // delete the images that currently highlighted
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 const discard_selected_class_btns = Array.from(
-  document.getElementsByClassName("discardSelectedClass")
+    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()
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    element.addEventListener('click', async () => {
+        try {
+            await g_generation_session.endSession(
+                session.GarbageCollectionState['DiscardSelected']
+            ) //end session and accept only selected images
+            g_ui.onEndSessionUI()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
 )
 
 const accept_selected_class_btns = Array.from(
-  document.getElementsByClassName("acceptSelectedClass")
+    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()
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    element.addEventListener('click', async () => {
+        try {
+            await g_generation_session.endSession(
+                session.GarbageCollectionState['AcceptSelected']
+            ) //end session and accept only selected images
+            g_ui.onEndSessionUI()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
 )
 
 const accept_class_btns = Array.from(
-  document.getElementsByClassName("acceptClass")
+    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()
+    element.addEventListener('click', async () => {
+        try {
+            await g_generation_session.endSession(
+                session.GarbageCollectionState['Accept']
+            ) //end session and accept all images
+            g_ui.onEndSessionUI()
 
-      // await acceptAll()
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+            // await acceptAll()
+        } catch (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
-  } else {
-    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
+    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
+    } else {
+        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
 }
 
-document.getElementById("btnRandomSeed").addEventListener("click", async () => {
-  document.querySelector("#tiSeed").value = "-1"
+document.getElementById('btnRandomSeed').addEventListener('click', async () => {
+    document.querySelector('#tiSeed').value = '-1'
 })
-document.getElementById("btnLastSeed").addEventListener("click", async () => {
-  try {
-    console.log("click on Last seed")
-    let seed = "-1"
+document.getElementById('btnLastSeed').addEventListener('click', async () => {
+    try {
+        console.log('click on Last seed')
+        let seed = '-1'
 
-    console.log("g_metadatas.length: ", g_metadatas.length)
-    if (g_metadatas.length > 0) {
-      seed = g_metadatas[0].Seed
+        console.log('g_metadatas.length: ', g_metadatas.length)
+        if (g_metadatas.length > 0) {
+            seed = g_metadatas[0].Seed
+        }
+        console.log('seed:', seed)
+        document.querySelector('#tiSeed').value = seed
+    } catch (e) {
+        console.warn(e)
     }
-    console.log("seed:", seed)
-    document.querySelector("#tiSeed").value = seed
-  } catch (e) {
-    console.warn(e)
-  }
 })
 async function discard() {
-  try {
-    // console.log(
-    //   'click on btnCleanLayers,  g_last_outpaint_layers:',
-    //   g_last_outpaint_layers
-    // )
-    // console.log(
-    //   'click on btnCleanLayers,  g_last_inpaint_layers:',
-    //   g_last_inpaint_layers
-    // )
+    try {
+        // console.log(
+        //   'click on btnCleanLayers,  g_last_outpaint_layers:',
+        //   g_last_outpaint_layers
+        // )
+        // console.log(
+        //   'click on btnCleanLayers,  g_last_inpaint_layers:',
+        //   g_last_inpaint_layers
+        // )
 
-    // console.log(
-    //   'click on btnCleanLayers,  g_last_snap_and_fill_layers:',
-    //   g_last_snap_and_fill_layers
-    // )
+        // console.log(
+        //   'click on btnCleanLayers,  g_last_snap_and_fill_layers:',
+        //   g_last_snap_and_fill_layers
+        // )
 
-    // console.log('g_last_snap_and_fill_layers')
-    // g_last_snap_and_fill_layers = await psapi.cleanLayers(
-    //   g_last_snap_and_fill_layers
-    // )
+        // console.log('g_last_snap_and_fill_layers')
+        // g_last_snap_and_fill_layers = await psapi.cleanLayers(
+        //   g_last_snap_and_fill_layers
+        // )
 
-    // if (g_last_outpaint_layers.length > 0) {
-    //   g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
-    //   console.log('g_last_outpaint_layers has 1 layers')
-    // }
-    // if (g_last_inpaint_layers.length > 0) {
-    //   g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
-    //   g_b_mask_layer_exist = false
+        // if (g_last_outpaint_layers.length > 0) {
+        //   g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
+        //   console.log('g_last_outpaint_layers has 1 layers')
+        // }
+        // if (g_last_inpaint_layers.length > 0) {
+        //   g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
+        //   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 last_gen_layers = Object.keys(g_image_path_to_layer).map(
-    //   path => g_image_path_to_layer[path]
-    // )
+        // }
+        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)
-  } catch (e) {
-    console.warn(e)
-  }
+        // psapi.cleanLayers(last_gen_layers)
+        await deleteNoneSelected(g_viewer_manager.pathToViewerImage)
+    } catch (e) {
+        console.warn(e)
+    }
 }
-Array.from(document.getElementsByClassName("discardClass")).forEach(
-  (element) => {
-    element.addEventListener("click", async () => {
-      //end session here
-      await g_generation_session.endSession(
-        session.GarbageCollectionState["Discard"]
-      ) //end session and remove all images
-      g_ui.onEndSessionUI()
+Array.from(document.getElementsByClassName('discardClass')).forEach(
+    (element) => {
+        element.addEventListener('click', async () => {
+            //end session here
+            await g_generation_session.endSession(
+                session.GarbageCollectionState['Discard']
+            ) //end session and remove all images
+            g_ui.onEndSessionUI()
 
-      // await discard()
-    })
-  }
+            // await discard()
+        })
+    }
 )
 
 async function deleteMaskRelatedLayers() {
-  // console.log("click on btnCleanLayers,  g_last_outpaint_layers:",g_last_outpaint_layers)
-  // console.log("click on btnCleanLayers,  g_last_inpaint_layers:",g_last_inpaint_layers)
-  // console.log("click on btnCleanLayers,  g_last_snap_and_fill_layers:",g_last_snap_and_fill_layers)
-  // console.log("g_last_snap_and_fill_layers")
-  // g_last_snap_and_fill_layers = await psapi.cleanLayers(g_last_snap_and_fill_layers)
-  // if (g_last_outpaint_layers.length > 0){
-  //   g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
-  //   console.log("g_last_outpaint_layers has 1 layers")
-  // }
-  // if (g_last_inpaint_layers.length> 0 ){
-  //   g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
-  // }
+    // console.log("click on btnCleanLayers,  g_last_outpaint_layers:",g_last_outpaint_layers)
+    // console.log("click on btnCleanLayers,  g_last_inpaint_layers:",g_last_inpaint_layers)
+    // console.log("click on btnCleanLayers,  g_last_snap_and_fill_layers:",g_last_snap_and_fill_layers)
+    // console.log("g_last_snap_and_fill_layers")
+    // g_last_snap_and_fill_layers = await psapi.cleanLayers(g_last_snap_and_fill_layers)
+    // if (g_last_outpaint_layers.length > 0){
+    //   g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
+    //   console.log("g_last_outpaint_layers has 1 layers")
+    // }
+    // if (g_last_inpaint_layers.length> 0 ){
+    //   g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
+    // }
 }
 // document.getElementById('btnCleanLayers').addEventListener('click', async () => {
 //   await deleteMaskRelatedLayers()
@@ -1390,549 +1430,552 @@ async function deleteMaskRelatedLayers() {
 //   }
 // })
 
-document.getElementById("btnInterrupt").addEventListener("click", async () => {
-  try {
-    json = await sdapi.requestInterrupt()
+document.getElementById('btnInterrupt').addEventListener('click', async () => {
+    try {
+        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)
-  }
+        // 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)
+    }
 })
 
 //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)
+    setTimeout(async () => {
+        const layers = await app.activeDocument.activeLayers
+        console.log('storeActiveLayers: ', layers.length)
 
-    if (layers.length > 0) {
-      g_saved_active_layers = layers
-      await psapi.unselectActiveLayersExe()
-    }
-  }, 200)
+        if (layers.length > 0) {
+            g_saved_active_layers = layers
+            await psapi.unselectActiveLayersExe()
+        }
+    }, 200)
 
-  // if (g_is_active_layers_stored == false) {
-  //   g_saved_active_layers = await app.activeDocument.activeLayers
-  //   g_is_active_layers_stored = true
-  //   await psapi.unselectActiveLayersExe()
-  // } else {
-  // }
+    // if (g_is_active_layers_stored == false) {
+    //   g_saved_active_layers = await app.activeDocument.activeLayers
+    //   g_is_active_layers_stored = true
+    //   await psapi.unselectActiveLayersExe()
+    // } else {
+    // }
 }
 async function restoreActiveLayers() {
-  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 = []
-  }
-  // if (g_is_active_layers_stored == true) {
-  //   // g_saved_active_layers = await app.activeDocument.activeLayers
-  //   await psapi.selectLayersExe(g_saved_active_layers)
-  //   g_is_active_layers_stored = false
-  //   g_saved_active_layers = []
-  // }
+    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 = []
+    }
+    // if (g_is_active_layers_stored == true) {
+    //   // g_saved_active_layers = await app.activeDocument.activeLayers
+    //   await psapi.selectLayersExe(g_saved_active_layers)
+    //   g_is_active_layers_stored = false
+    //   g_saved_active_layers = []
+    // }
 }
 
 //store active selection only if they are not stored.
 async function storeActiveSelection() {
-  try {
-    setTimeout(async () => {
-      const layers = await app.activeDocument.activeLayers
-      const current_selection = await psapi.checkIfSelectionAreaIsActive()
-      console.log("storeActiveSelection: ", current_selection)
+    try {
+        setTimeout(async () => {
+            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()
-      }
-    }, 200)
-  } catch (e) {
-    console.warn(e)
-  }
+            if (current_selection) {
+                g_saved_active_selection = current_selection
+                await psapi.unSelectMarqueeExe()
+            }
+        }, 200)
+    } catch (e) {
+        console.warn(e)
+    }
 }
 async function restoreActiveSelection() {
-  try {
-    const current_selection = await psapi.checkIfSelectionAreaIsActive()
+    try {
+        const current_selection = await psapi.checkIfSelectionAreaIsActive()
 
-    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 = {}
+        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 = {}
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (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
+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("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
+    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)
+        if (new_sd_url[last_index] === '/' || new_sd_url[last_index] === '\\') {
+            new_sd_url = new_sd_url.slice(0, -1)
+        }
+
+        //submit the change
+        await sdapi.changeSdUrl(new_sd_url)
     }
-
-    //submit the change
-    await sdapi.changeSdUrl(new_sd_url)
-  }
 })
 
-document.querySelector("#taPrompt").addEventListener("focus", async () => {
-  if (!g_generation_session.isLoadingActive) {
-    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 psapi.unselectActiveLayersExe()
-  }
-})
-document.querySelector("#taPrompt").addEventListener("blur", async () => {
-  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()
-})
-
-document
-  .querySelector("#taNegativePrompt")
-  .addEventListener("focus", async () => {
+document.querySelector('#taPrompt').addEventListener('focus', async () => {
     if (!g_generation_session.isLoadingActive) {
-      console.log("taNegativePrompt focus")
-      // console.log('we are in prompt textarea')
-
-      await storeActiveLayers()
-      await storeActiveSelection()
-      // await psapi.unselectActiveLayersExe()
+        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 psapi.unselectActiveLayersExe()
     }
-  })
-document
-  .querySelector("#taNegativePrompt")
-  .addEventListener("blur", async () => {
-    console.log("taNegativePrompt blur")
+})
+document.querySelector('#taPrompt').addEventListener('blur', async () => {
+    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()
-  })
+})
+
+document
+    .querySelector('#taNegativePrompt')
+    .addEventListener('focus', async () => {
+        if (!g_generation_session.isLoadingActive) {
+            console.log('taNegativePrompt focus')
+            // console.log('we are in prompt textarea')
+
+            await storeActiveLayers()
+            await storeActiveSelection()
+            // await psapi.unselectActiveLayersExe()
+        }
+    })
+document
+    .querySelector('#taNegativePrompt')
+    .addEventListener('blur', async () => {
+        console.log('taNegativePrompt blur')
+        // console.log('we are out of prompt textarea')
+        // await psapi.unselectActiveLayersExe()
+        await restoreActiveLayers()
+        await restoreActiveSelection()
+    })
 
 function updateMetadata(new_metadata) {
-  const metadatas = []
-  try {
-    for (metadata of new_metadata) {
-      metadata_json = JSON.parse(metadata)
-      console.log("metadata_json:", metadata_json)
-      metadatas.push(metadata_json)
+    const metadatas = []
+    try {
+        for (metadata of new_metadata) {
+            metadata_json = JSON.parse(metadata)
+            console.log('metadata_json:', metadata_json)
+            metadatas.push(metadata_json)
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
-  return metadatas
+    return metadatas
 }
 
 async function getSettings() {
-  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()
-    // 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("#")
-    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 inpaint_full_res_padding =
-      document.querySelector("#slInpaintPadding").value
-
-    console.dir(numberOfImages)
-    const bUsePromptShortcut = document.getElementById(
-      "chUsePromptShortcut"
-    ).checked
-    let prompt_shortcut_ui_dict = {}
+    let payload = {}
     try {
-      let prompt_shortcut_string =
-        document.getElementById("taPromptShortcut").value
-      prompt_shortcut_ui_dict = JSON.parse(prompt_shortcut_string)
+        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("#")
+        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 inpaint_full_res_padding =
+            document.querySelector('#slInpaintPadding').value
+
+        console.dir(numberOfImages)
+        const bUsePromptShortcut = document.getElementById(
+            'chUsePromptShortcut'
+        ).checked
+        let prompt_shortcut_ui_dict = {}
+        try {
+            let 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 = {}
+        }
+
+        // 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 hScale = html_manip.getSliderSdValue('hrScale',1)
+        console.log('Check')
+
+        const uniqueDocumentId = await getUniqueDocumentId()
+        const h_denoising_strength = html_manip.getSliderSdValue(
+            'hrDenoisingStrength',
+            0.01
+        )
+        console.log('Check2')
+
+        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
+        if (mode == 'inpaint' || mode == 'outpaint') {
+            var g_use_mask_image = true
+            payload['inpaint_full_res'] =
+                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
+        } 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']
+        }
+
+        if (
+            g_sd_mode == 'img2img' ||
+            g_sd_mode == 'inpaint' ||
+            g_sd_mode == 'outpaint'
+        ) {
+            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
+        }
+
+        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['hr_scale'] =  hScale // Scale
+            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']
+        }
+
+        //work with the hord
+
+        // const script_args_json = {
+        //   model: "Anything Diffusion",
+        //   nsfw: false,
+        //   shared_laion: false,
+        //   seed_variation: 1,
+        //   post_processing_1: "None",
+        //   post_processing_2: "None",
+        //   post_processing_3: "None"
+        // }
+        // const script_args = Object.values(script_args_json)
+
+        const b_use_horde = script_horde.getUseHorde()
+        if (b_use_horde) {
+            payload['script_name'] = script_horde.script_name
+            payload['script_args'] = script_horde.getScriptArgs()
+        } else {
+            delete payload['script_name']
+            delete payload['script_args']
+        }
+
+        payload = {
+            ...payload,
+            prompt: prompt,
+            negative_prompt: negative_prompt,
+            steps: numberOfSteps,
+            // n_iter: numberOfImages,
+            sampler_index: sampler_name,
+            width: width,
+            height: height,
+            denoising_strength: denoising_strength,
+            batch_size: numberOfImages,
+            cfg_scale: cfg_scale,
+            seed: seed,
+            mask_blur: mask_blur,
+            use_sharp_mask: use_sharp_mask,
+            use_prompt_shortcut: bUsePromptShortcut,
+            prompt_shortcut_ui_dict: prompt_shortcut_ui_dict,
+            uniqueDocumentId: uniqueDocumentId,
+            mode: mode,
+            restore_faces: b_restore_faces,
+            // script_args: script_args,
+            // script_name:"Run on Stable Horde"
+        }
     } catch (e) {
-      console.warn(
-        `warning prompt_shortcut_ui_dict is not valid Json obj: ${e}`
-      )
-      prompt_shortcut_ui_dict = {}
+        console.error(e)
     }
-
-    // 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 hScale = html_manip.getSliderSdValue('hrScale',1)
-    console.log("Check")
-
-    const uniqueDocumentId = await getUniqueDocumentId()
-    const h_denoising_strength = html_manip.getSliderSdValue(
-      "hrDenoisingStrength",
-      0.01
-    )
-    console.log("Check2")
-
-    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
-    if (mode == "inpaint" || mode == "outpaint") {
-      var g_use_mask_image = true
-      payload["inpaint_full_res"] =
-        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
-    } 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"]
-    }
-
-    if (
-      g_sd_mode == "img2img" ||
-      g_sd_mode == "inpaint" ||
-      g_sd_mode == "outpaint"
-    ) {
-      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
-    }
-
-    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['hr_scale'] =  hScale // Scale
-      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"]
-    }
-
-    //work with the hord
-
-    // const script_args_json = {
-    //   model: "Anything Diffusion",
-    //   nsfw: false,
-    //   shared_laion: false,
-    //   seed_variation: 1,
-    //   post_processing_1: "None",
-    //   post_processing_2: "None",
-    //   post_processing_3: "None"
-    // }
-    // const script_args = Object.values(script_args_json)
-
-    const b_use_horde = script_horde.getUseHorde()
-    if (b_use_horde) {
-      payload["script_name"] = script_horde.script_name
-      payload["script_args"] = script_horde.getScriptArgs()
-    } else {
-      delete payload["script_name"]
-      delete payload["script_args"]
-    }
-
-    payload = {
-      ...payload,
-      prompt: prompt,
-      negative_prompt: negative_prompt,
-      steps: numberOfSteps,
-      // n_iter: numberOfImages,
-      sampler_index: sampler_name,
-      width: width,
-      height: height,
-      denoising_strength: denoising_strength,
-      batch_size: numberOfImages,
-      cfg_scale: cfg_scale,
-      seed: seed,
-      mask_blur: mask_blur,
-      use_sharp_mask: use_sharp_mask,
-      use_prompt_shortcut: bUsePromptShortcut,
-      prompt_shortcut_ui_dict: prompt_shortcut_ui_dict,
-      uniqueDocumentId: uniqueDocumentId,
-      mode: mode,
-      restore_faces: b_restore_faces,
-      // script_args: script_args,
-      // script_name:"Run on Stable Horde"
-    }
-  } catch (e) {
-    console.error(e)
-  }
-  return payload
+    return payload
 }
 
 async function generateTxt2Img(settings) {
-  let json = {}
-  try {
-    json = await sdapi.requestTxt2Img(settings)
-  } catch (e) {
-    console.warn(e)
-    json = {}
-  }
+    let json = {}
+    try {
+        json = await sdapi.requestTxt2Img(settings)
+    } catch (e) {
+        console.warn(e)
+        json = {}
+    }
 
-  return json
+    return json
 }
 
 async function hasSelectionChanged(new_selection, old_selection) {
-  if (
-    new_selection.left === old_selection.left &&
-    new_selection.bottom === old_selection.bottom &&
-    new_selection.right === old_selection.right &&
-    new_selection.top === old_selection.top
-  ) {
-    return false
-  } else {
-    return true
-  }
+    if (
+        new_selection.left === old_selection.left &&
+        new_selection.bottom === old_selection.bottom &&
+        new_selection.right === old_selection.right &&
+        new_selection.top === old_selection.top
+    ) {
+        return false
+    } else {
+        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
-    //make sure you have selection area active on the canvas
-    const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
-    if (!isSelectionAreaValid) {
-      await psapi.promptForMarqueeTool()
-      return null
-    }
-
-    const mode = html_manip.getMode()
-    // const settings = await getSettings()
-    console.log("easyModeGenerate mdoe: ", mode)
-    if (psapi.isSelectionValid(g_selection)) {
-      // check we have an old selection stored
-      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
-        try {
-          await g_generation_session.endSession(
-            session.GarbageCollectionState["Accept"]
-          ) //end session and accept all images
-          g_ui.onEndSessionUI()
-
-          // await acceptAll()
-        } catch (e) {
-          console.warn(e)
+    try {
+        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()
+        if (!isSelectionAreaValid) {
+            await psapi.promptForMarqueeTool()
+            return null
         }
-      }
-    } else {
-      // store selection value
-      g_selection = await psapi.getSelectionInfoExe()
+
+        const mode = html_manip.getMode()
+        // const settings = await getSettings()
+        console.log('easyModeGenerate mdoe: ', mode)
+        if (psapi.isSelectionValid(g_selection)) {
+            // check we have an old selection stored
+            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
+                try {
+                    await g_generation_session.endSession(
+                        session.GarbageCollectionState['Accept']
+                    ) //end session and accept all images
+                    g_ui.onEndSessionUI()
+
+                    // await acceptAll()
+                } catch (e) {
+                    console.warn(e)
+                }
+            }
+        } else {
+            // store selection value
+            g_selection = await psapi.getSelectionInfoExe()
+        }
+
+        if (g_generation_session.isActive()) {
+            //active session
+            //
+            if (g_generation_session.mode !== mode) {
+                //active session but it's a new mode
+
+                await g_generation_session.endSession(
+                    session.GarbageCollectionState['Accept']
+                )
+                g_ui.onEndSessionUI()
+                //start new session after you ended the old one
+                await g_generation_session.startSession()
+
+                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
+        }
+
+        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()
+        } else if (mode === 'inpaint') {
+            await btnInitInpaintHandler()
+        } else if (mode === 'outpaint') {
+            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()
+
+        const settings = await getSettings()
+        await generate(settings)
+    } catch (e) {
+        console.warn(e)
     }
-
-    if (g_generation_session.isActive()) {
-      //active session
-      //
-      if (g_generation_session.mode !== mode) {
-        //active session but it's a new mode
-
-        await g_generation_session.endSession(
-          session.GarbageCollectionState["Accept"]
-        )
-        g_ui.onEndSessionUI()
-        //start new session after you ended the old one
-        await g_generation_session.startSession()
-
-        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
-    }
-
-    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()
-    } else if (mode === "inpaint") {
-      await btnInitInpaintHandler()
-    } else if (mode === "outpaint") {
-      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()
-
-    const settings = await getSettings()
-    await generate(settings)
-  } catch (e) {
-    console.warn(e)
-  }
 }
 async function generate(settings) {
-  try {
-    //pre generation
-    // toggleGenerateInterruptButton(true)
+    try {
+        //pre generation
+        // toggleGenerateInterruptButton(true)
 
-    // 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_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
 
-    // g_generation_session.startSession()
-    g_generation_session.activate()
+        // g_generation_session.startSession()
+        g_generation_session.activate()
 
-    g_ui.onStartSessionUI()
-    // toggleTwoButtons(true,'btnGenerate','btnInterrupt')
-    toggleTwoButtonsByClass(true, "btnGenerateClass", "btnInterruptClass")
-    g_can_request_progress = true
-    //wait 2 seconds till you check for progress
-    setTimeout(async function () {
-      await progressRecursive()
-    }, 2000)
+        g_ui.onStartSessionUI()
+        // toggleTwoButtons(true,'btnGenerate','btnInterrupt')
+        toggleTwoButtonsByClass(true, 'btnGenerateClass', 'btnInterruptClass')
+        g_can_request_progress = true
+        //wait 2 seconds till you check for progress
+        setTimeout(async function () {
+            await progressRecursive()
+        }, 2000)
 
-    console.log(settings)
+        console.log(settings)
 
-    g_request_status = requestState["Generate"]
-    let json = {}
-    if (g_sd_mode == "txt2img") {
-      json = await generateTxt2Img(settings)
-    } else if (g_sd_mode == "img2img" || g_sd_mode == "inpaint") {
-      json = await sdapi.requestImg2Img(settings)
+        g_request_status = requestState['Generate']
+        let json = {}
+        if (g_sd_mode == 'txt2img') {
+            json = await generateTxt2Img(settings)
+        } else if (g_sd_mode == 'img2img' || g_sd_mode == 'inpaint') {
+            json = await sdapi.requestImg2Img(settings)
+        }
+
+        if (g_sd_mode == 'outpaint') {
+            // await easyModeOutpaint()
+            json = await sdapi.requestImg2Img(settings)
+
+            // await setTimeout(async ()=> {
+            //   json = await sdapi.requestImg2Img(settings)
+
+            // },5000)
+        }
+        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)
+            //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()
+
+                // //delete all mask related layers
+            }
+            return null
+        }
+
+        // check if json is empty {}, {} means the proxy server didn't return a valid data
+        if (Object.keys(json).length === 0) {
+            if (isFirstGeneration) {
+                await g_generation_session.endSession(
+                    session.GarbageCollectionState['Discard']
+                ) //end session and delete all images
+                g_ui.onEndSessionUI()
+
+                // //delete all mask related layers
+            }
+            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)
+
+        //finished generating, set the button back to generate
+
+        // toggleTwoButtons(false,'btnGenerate','btnInterrupt')
+        toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
+        g_can_request_progress = false
+
+        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
+        if (isFirstGeneration) {
+            //this is new generation session
+
+            if (b_use_silent_import) {
+                g_image_path_to_layer = await silentImagesToLayersExe(
+                    gImage_paths
+                )
+            } else {
+                g_image_path_to_layer = await ImagesToLayersExe(gImage_paths)
+            }
+
+            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
+            if (b_use_silent_import) {
+                last_images_paths = await silentImagesToLayersExe(gImage_paths)
+            } else {
+                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++
+        }
+        await psapi.reSelectMarqueeExe(g_selection)
+        //update the viewer
+        await loadViewerImages()
+    } catch (e) {
+        console.error(`btnGenerate.click(): `, e)
     }
-
-    if (g_sd_mode == "outpaint") {
-      // await easyModeOutpaint()
-      json = await sdapi.requestImg2Img(settings)
-
-      // await setTimeout(async ()=> {
-      //   json = await sdapi.requestImg2Img(settings)
-
-      // },5000)
-    }
-    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)
-      //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()
-
-        // //delete all mask related layers
-      }
-      return null
-    }
-
-    // check if json is empty {}, {} means the proxy server didn't return a valid data
-    if (Object.keys(json).length === 0) {
-      if (isFirstGeneration) {
-        await g_generation_session.endSession(
-          session.GarbageCollectionState["Discard"]
-        ) //end session and delete all images
-        g_ui.onEndSessionUI()
-
-        // //delete all mask related layers
-      }
-      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)
-
-    //finished generating, set the button back to generate
-
-    // toggleTwoButtons(false,'btnGenerate','btnInterrupt')
-    toggleTwoButtonsByClass(false, "btnGenerateClass", "btnInterruptClass")
-    g_can_request_progress = false
-
-    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
-    if (isFirstGeneration) {
-      //this is new generation session
-
-      if (b_use_silent_import) {
-        g_image_path_to_layer = await silentImagesToLayersExe(gImage_paths)
-      } else {
-        g_image_path_to_layer = await ImagesToLayersExe(gImage_paths)
-      }
-
-      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
-      if (b_use_silent_import) {
-        last_images_paths = await silentImagesToLayersExe(gImage_paths)
-      } else {
-        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++
-    }
-    await psapi.reSelectMarqueeExe(g_selection)
-    //update the viewer
-    await loadViewerImages()
-  } catch (e) {
-    console.error(`btnGenerate.click(): `, e)
-  }
 }
 
 // async function generateMore(settings){
@@ -1982,117 +2025,121 @@ async function generate(settings) {
 // }
 // }
 
-Array.from(document.getElementsByClassName("btnGenerateClass")).forEach(
-  (btn) => {
-    btn.addEventListener("click", async () => {
-      // const settings = await getSettings()
-      // generate(settings)
-      await easyModeGenerate()
-    })
-  }
+Array.from(document.getElementsByClassName('btnGenerateClass')).forEach(
+    (btn) => {
+        btn.addEventListener('click', async () => {
+            // const settings = await getSettings()
+            // generate(settings)
+            await easyModeGenerate()
+        })
+    }
 )
 
 document
-  .getElementById("btnRefreshModels")
-  .addEventListener("click", async (e) => {
-    await refreshUI()
-    tempDisableElement(e.target, 3000)
-  })
+    .getElementById('btnRefreshModels')
+    .addEventListener('click', async (e) => {
+        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]
-  if (model_index < g_models.length) {
-    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)
+document.querySelector('#mModelsMenu').addEventListener('change', (evt) => {
+    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]
+    }
+    // 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)
 })
 
 document
-  .getElementById("btnLayerToSelection")
-  .addEventListener("click", async () => {
-    try {
-      const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
-      if (isSelectionAreaValid) {
-        const validSelection = isSelectionAreaValid
-        await psapi.layerToSelection(validSelection)
-      } else {
-        await psapi.promptForMarqueeTool()
-      }
-    } catch (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)
-  })
-
-document
-  .getElementById("btnSetMaskViewer")
-  .addEventListener("click", async () => {
-    try {
-      await executeAsModal(async () => {
-        if (g_viewer_manager.mask_solid_background) {
-          g_viewer_manager.mask_solid_background.visible = true
+    .getElementById('btnLayerToSelection')
+    .addEventListener('click', async () => {
+        try {
+            const isSelectionAreaValid =
+                await psapi.checkIfSelectionAreaIsActive()
+            if (isSelectionAreaValid) {
+                const validSelection = isSelectionAreaValid
+                await psapi.layerToSelection(validSelection)
+            } else {
+                await psapi.promptForMarqueeTool()
+            }
+        } catch (e) {
+            console.warn(e)
         }
-      })
-      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()
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    })
 
-document.getElementById("bSetInitImage").addEventListener("click", async () => {
-  const layer = await app.activeDocument.activeLayers[0]
-  await psapi.setInitImage(layer, random_session_id)
+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)
+    })
+
+document
+    .getElementById('btnSetMaskViewer')
+    .addEventListener('click', async () => {
+        try {
+            await executeAsModal(async () => {
+                if (g_viewer_manager.mask_solid_background) {
+                    g_viewer_manager.mask_solid_background.visible = true
+                }
+            })
+            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()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+
+document.getElementById('bSetInitImage').addEventListener('click', async () => {
+    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)
-  })
+    .getElementById('bSetInitImageMask')
+    .addEventListener('click', async () => {
+        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")
 function updateProgressBarsHtml(new_value) {
-  document.querySelectorAll(".pProgressBars").forEach((el) => {
-    // id = el.getAttribute("id")
-    // console.log("progressbar id:", id)
-    el.setAttribute("value", new_value)
-  })
-  // document.querySelector('#pProgressBar').value
+    document.querySelectorAll('.pProgressBars').forEach((el) => {
+        // id = el.getAttribute("id")
+        // console.log("progressbar id:", id)
+        el.setAttribute('value', new_value)
+    })
+    // document.querySelector('#pProgressBar').value
 }
 async function progressRecursive() {
-  let json = await sdapi.requestProgress()
-  // document.querySelector('#pProgressBar').value = json.progress * 100
-  progress_value = json.progress * 100
-  updateProgressBarsHtml(progress_value)
-  if (json.progress > 0 && g_can_request_progress == true) {
-    setTimeout(async () => {
-      await progressRecursive()
-    }, 500)
-  }
+    let json = await sdapi.requestProgress()
+    // document.querySelector('#pProgressBar').value = json.progress * 100
+    progress_value = json.progress * 100
+    updateProgressBarsHtml(progress_value)
+    if (json.progress > 0 && g_can_request_progress == true) {
+        setTimeout(async () => {
+            await progressRecursive()
+        }, 500)
+    }
 }
 
 // document
@@ -2100,1033 +2147,1069 @@ 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()
-    // token = await fs.getEntryForPersistentToken(file);
-    // const entry = await fs.getEntryForPersistentToken(token);
-    // const session_token = await fs.createSessionToken(entry);
-    // // 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")
-        const result = await batchPlay(
-          [
-            {
-              _obj: "placeEvent",
-              ID: 95,
-              null: {
-                _path: img,
-                _kind: "local",
-              },
-              freeTransformCenterState: {
-                _enum: "quadCenterState",
-                _value: "QCSAverage",
-              },
-              offset: {
-                _obj: "offset",
-                horizontal: {
-                  _unit: "pixelsUnit",
-                  _value: 0,
-                },
-                vertical: {
-                  _unit: "pixelsUnit",
-                  _value: 0,
-                },
-              },
-              replaceLayer: {
-                _obj: "placeEvent",
-                from: {
-                  _ref: "layer",
-                  _id: 56,
-                },
-                to: {
-                  _ref: "layer",
-                  _id: 70,
-                },
-              },
-              _options: {
-                dialogOptions: "dontDisplay",
-              },
+    try {
+        // const file = await fs.getFileForOpening()
+        // token = await fs.getEntryForPersistentToken(file);
+        // const entry = await fs.getEntryForPersistentToken(token);
+        // const session_token = await fs.createSessionToken(entry);
+        // // 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'
+                )
+                const result = await batchPlay(
+                    [
+                        {
+                            _obj: 'placeEvent',
+                            ID: 95,
+                            null: {
+                                _path: img,
+                                _kind: 'local',
+                            },
+                            freeTransformCenterState: {
+                                _enum: 'quadCenterState',
+                                _value: 'QCSAverage',
+                            },
+                            offset: {
+                                _obj: 'offset',
+                                horizontal: {
+                                    _unit: 'pixelsUnit',
+                                    _value: 0,
+                                },
+                                vertical: {
+                                    _unit: 'pixelsUnit',
+                                    _value: 0,
+                                },
+                            },
+                            replaceLayer: {
+                                _obj: 'placeEvent',
+                                from: {
+                                    _ref: 'layer',
+                                    _id: 56,
+                                },
+                                to: {
+                                    _ref: 'layer',
+                                    _id: 70,
+                                },
+                            },
+                            _options: {
+                                dialogOptions: 'dontDisplay',
+                            },
+                        },
+                    ],
+                    {
+                        synchronousExecution: true,
+                        modalBehavior: 'execute',
+                    }
+                )
             },
-          ],
-          {
-            synchronousExecution: true,
-            modalBehavior: "execute",
-          }
+            {
+                commandName: 'Create Label',
+            }
         )
-      },
-      {
-        commandName: "Create Label",
-      }
-    )
-  } catch (e) {
-    console.log("imageToSmartObject() => error: ")
-    console.warn(e)
-  }
+    } catch (e) {
+        console.log('imageToSmartObject() => error: ')
+        console.warn(e)
+    }
 }
 
 // document.getElementById('btnNewLayer').addEventListener('click', imageToSmartObject )
 
 async function placeEmbedded(image_path) {
-  //silent importer
+    //silent importer
 
-  try {
-    console.log("placeEmbedded(): image_path: ", image_path)
+    try {
+        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}`
-    // image_path = "output/f027258e-71b8-430a-9396-0a19425f2b44/output- 1674323725.126322.png"
+        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)
-    // const file = await img_dir.createFile('output- 1674298902.0571606.png', {overwrite: true});
+        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
-    await executeAsModal(async () => {
-      const result = await batchPlay(
-        [
-          {
-            _obj: "placeEvent",
-            ID: 6,
-            null: {
-              _path: token,
-              _kind: "local",
-            },
-            freeTransformCenterState: {
-              _enum: "quadCenterState",
-              _value: "QCSAverage",
-            },
-            offset: {
-              _obj: "offset",
-              horizontal: {
-                _unit: "pixelsUnit",
-                _value: 0,
-              },
-              vertical: {
-                _unit: "pixelsUnit",
-                _value: 0,
-              },
-            },
-            _isCommand: true,
-            _options: {
-              dialogOptions: "dontDisplay",
-            },
-          },
-        ],
-        {
-          synchronousExecution: true,
-          modalBehavior: "execute",
-        }
-      )
-      console.log("placeEmbedd batchPlay result: ", 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(
+                [
+                    {
+                        _obj: 'placeEvent',
+                        ID: 6,
+                        null: {
+                            _path: token,
+                            _kind: 'local',
+                        },
+                        freeTransformCenterState: {
+                            _enum: 'quadCenterState',
+                            _value: 'QCSAverage',
+                        },
+                        offset: {
+                            _obj: 'offset',
+                            horizontal: {
+                                _unit: 'pixelsUnit',
+                                _value: 0,
+                            },
+                            vertical: {
+                                _unit: 'pixelsUnit',
+                                _value: 0,
+                            },
+                        },
+                        _isCommand: true,
+                        _options: {
+                            dialogOptions: 'dontDisplay',
+                        },
+                    },
+                ],
+                {
+                    synchronousExecution: true,
+                    modalBehavior: 'execute',
+                }
+            )
+            console.log('placeEmbedd batchPlay result: ', result)
 
-      place_event_result = result[0]
-    })
+            place_event_result = result[0]
+        })
 
-    return place_event_result
-  } catch (e) {
-    console.warn(e)
-  }
+        return place_event_result
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 // document.getElementById('btnImageFileToLayer').addEventListener('click', placeEmbedded)
 
 // open an image in the plugin folder as new document
 async function openImageAction() {
-  const storage = require("uxp").storage
-  const fs = storage.localFileSystem
-  try {
-    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 storage = require('uxp').storage
+    const fs = storage.localFileSystem
+    try {
+        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 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)
+        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)
 
-    await app.open(theTemplate)
-  } catch (e) {
-    console.warn("couldn't open image ", e)
-  }
+        await app.open(theTemplate)
+    } catch (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 result = await batchPlay(
-    [
-      {
-        _obj: "newPlacedLayer",
-        _isCommand: true,
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {}
-  )
+    const batchPlay = require('photoshop').action.batchPlay
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'newPlacedLayer',
+                _isCommand: true,
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
+        ],
+        {}
+    )
 }
 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
-
-  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
-    if (g_b_use_smart_object === false) {
-      await executeAsModal(async () => {
-        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 reselect(selectionInfo)
-  }
-  return image_path_to_layer
-}
-
-async function silentImagesToLayersExe(images_paths) {
-  try {
     g_generation_session.isLoadingActive = true
 
     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))
-
+    console.log('ImagesToLayersExe: images_paths: ', images_paths)
     for (image_path of images_paths) {
-      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()
-
-      const placeEventResult = await placeEmbedded(image_path) //silent import into the document
-
-      let layer = await app.activeDocument.layers.filter(
-        (l) => l.id === placeEventResult?.ID
-      )[0]
-      // await openImageExe() //local image to new document
-      // await convertToSmartObjectExe() //convert the current image to smart object
-      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)
-      while (!layer && timer_count <= 10000) {
-        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)
-        if (active_layer.id === placeEventResult?.ID) {
-          layer = active_layer
+        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
+            })
         }
-
-        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 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)
-      // 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
-      // await executeAsModal(async ()=>{
-      //   await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
-
-      // })
-
-      image_path_to_layer[image_path] = layer
-      // await reselect(selectionInfo)
+        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
-  } catch (e) {
-    console.warn(e)
-  }
-  g_generation_session.isLoadingActive = false
+}
+
+async function silentImagesToLayersExe(images_paths) {
+    try {
+        g_generation_session.isLoadingActive = true
+
+        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))
+
+        for (image_path of images_paths) {
+            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()
+
+            const placeEventResult = await placeEmbedded(image_path) //silent import into the document
+
+            let layer = await app.activeDocument.layers.filter(
+                (l) => l.id === placeEventResult?.ID
+            )[0]
+            // await openImageExe() //local image to new document
+            // await convertToSmartObjectExe() //convert the current image to smart object
+            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)
+            while (!layer && timer_count <= 10000) {
+                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)
+                if (active_layer.id === placeEventResult?.ID) {
+                    layer = active_layer
+                }
+
+                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 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)
+            // 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
+            // await executeAsModal(async ()=>{
+            //   await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
+
+            // })
+
+            image_path_to_layer[image_path] = layer
+            // await reselect(selectionInfo)
+        }
+        return image_path_to_layer
+    } catch (e) {
+        console.warn(e)
+    }
+    g_generation_session.isLoadingActive = false
 }
 
 // document.getElementById('btnLoadImages').addEventListener('click',ImagesToLayersExe)
 
 //stack layer to original document
 async function stackLayers() {
-  //workingDoc is the project you are using stable diffusion in
-  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
+    //workingDoc is the project you are using stable diffusion in
+    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
 
-  // 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++
+    // 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++
 
-    // loop through other open docs
-    for (const doc of docsToStack) {
-      // flatten
-      // doc.flatten();
+        // loop through other open docs
+        for (const doc of docsToStack) {
+            // flatten
+            // doc.flatten();
 
-      // rename layer with counter
-      doc.layers[0].name = `Layer ${docCounter}`
+            // rename layer with counter
+            doc.layers[0].name = `Layer ${docCounter}`
 
-      // increment counter
-      docCounter++
+            // increment counter
+            docCounter++
 
-      // duplicate layer to docZero
-      doc.layers[0].duplicate(workingDoc)
+            // duplicate layer to docZero
+            doc.layers[0].duplicate(workingDoc)
 
-      // close doc
-      doc.closeWithoutSaving()
-    }
-  })
+            // close doc
+            doc.closeWithoutSaving()
+        }
+    })
 }
-document.getElementById("collapsible").addEventListener("click", function () {
-  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"
-  } else {
-    content.style.display = "block"
-    this.textContent = "Hide Samplers"
-  }
+document.getElementById('collapsible').addEventListener('click', function () {
+    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'
+    } else {
+        content.style.display = 'block'
+        this.textContent = 'Hide Samplers'
+    }
 })
 
 function removeInitImageFromViewer() {}
 function removeMaskFromViewer() {}
 
 async function NewViewerImageClickHandler(img, viewer_obj_owner) {
-  try {
-    img.addEventListener("click", async (e) => {
-      if (g_isViewerMenuDisabled) {
-        return g_isViewerMenuDisabled
-      }
-
-      // e.target.classList.add("viewerImgSelected")
-      // viewer_obj_owner.isAccepted = true
-      // console.log("viewer_obj_owner: viewer_obj_owner.layer.name: ",viewer_obj_owner.layerName())
-      // e.target.classList.toggle("viewerImgSelected")
-      //  e.target.style.border="3px solid #6db579"
-      //turn off all layers
-      //select the layer this image represent and turn it on
-
-      await executeAsModal(async () => {
-        // const img = e.target
-        // const layer_id = parseInt(img.dataset.image_id)
-        // console.log("the layer id = ",layer_id)
-
-        // let selectedViewerImageObj
-        // Array.isArray(layer)
-
-        //turn off all layers linked the viewer tab
-
-        for (const [path, viewer_object] of Object.entries(
-          g_viewer_manager.pathToViewerImage
-        )) {
-          try {
-            if (viewer_object.getHighlight()) {
-              // viewer_object.state = viewer.ViewerObjState["Unlink"]
-            } else {
-              // viewer_object.state = viewer.ViewerObjState["Delete"]
+    try {
+        img.addEventListener('click', async (e) => {
+            if (g_isViewerMenuDisabled) {
+                return g_isViewerMenuDisabled
             }
-            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)
-          }
-        }
+            // e.target.classList.add("viewerImgSelected")
+            // viewer_obj_owner.isAccepted = true
+            // console.log("viewer_obj_owner: viewer_obj_owner.layer.name: ",viewer_obj_owner.layerName())
+            // e.target.classList.toggle("viewerImgSelected")
+            //  e.target.style.border="3px solid #6db579"
+            //turn off all layers
+            //select the layer this image represent and turn it on
 
-        // for(viewerImageObj of viewer_layers){
-        //     try{
-        //       //viewerImageObj.visible(false)
+            await executeAsModal(async () => {
+                // const img = e.target
+                // const layer_id = parseInt(img.dataset.image_id)
+                // console.log("the layer id = ",layer_id)
 
-        //       //make all layers of that entry invisible
-        //       viewerImageObj.visible(false)
+                // let selectedViewerImageObj
+                // Array.isArray(layer)
 
-        //       //if the layer id of the first layer in the group container
-        //       //viewerImageObj.isSameLayer(layer_id)
-        //       // if (viewerImageObj.isSameLayer(layer_id)){
-        //       //   selectedViewerImageObj = viewerImageObj
-        //       // }
-        //     } catch (e){
-        //       console.error("cannot hide a layer: ",e)
-        //     }
-        //   }
+                //turn off all layers linked the viewer tab
 
-        // 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)
-        // console.log("viewer_obj_owner.path: ",viewer_obj_owner.path)
-        // console.log("viewer_obj_owner.info(): ")
-        // viewer_obj_owner.info()
-        if (e.shiftKey) {
-          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)
-            }
-          } catch (e) {
-            console.warn(e)
-          }
+                for (const [path, viewer_object] of Object.entries(
+                    g_viewer_manager.pathToViewerImage
+                )) {
+                    try {
+                        if (viewer_object.getHighlight()) {
+                            // viewer_object.state = viewer.ViewerObjState["Unlink"]
+                        } else {
+                            // viewer_object.state = viewer.ViewerObjState["Delete"]
+                        }
+                        viewer_object.visible(false)
+                        viewer_object.active(false)
 
-          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)
+                        // 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)
+                    }
+                }
 
-          // await viewer_obj_owner.select(false)
-          await psapi.unselectActiveLayersExe()
-          // e.target.classList.remove("viewerImgSelected")
-        }
+                // for(viewerImageObj of viewer_layers){
+                //     try{
+                //       //viewerImageObj.visible(false)
 
-        if (viewer_obj_owner.isActive()) {
-          // will not store current viewer_obj if we click "alt" click if we hit alt click
+                //       //make all layers of that entry invisible
+                //       viewerImageObj.visible(false)
 
-          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)
-  }
+                //       //if the layer id of the first layer in the group container
+                //       //viewerImageObj.isSameLayer(layer_id)
+                //       // if (viewerImageObj.isSameLayer(layer_id)){
+                //       //   selectedViewerImageObj = viewerImageObj
+                //       // }
+                //     } catch (e){
+                //       console.error("cannot hide a layer: ",e)
+                //     }
+                //   }
+
+                // 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)
+                // console.log("viewer_obj_owner.path: ",viewer_obj_owner.path)
+                // console.log("viewer_obj_owner.info(): ")
+                // viewer_obj_owner.info()
+                if (e.shiftKey) {
+                    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
+                            )
+                        }
+                    } catch (e) {
+                        console.warn(e)
+                    }
+
+                    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)
+
+                    // await viewer_obj_owner.select(false)
+                    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 .
+                }
+            })
+        })
+    } catch (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)
-  // img.dataset.image_id = layer_id
-  // img.dataset.image_path = image_path // image_path is not the same as src
-  return img
+    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
 }
 
 function toggleLayerVisibility(layer, b_on) {
-  try {
-    layer.visible = b_on
-  } catch (e) {
-    console.warn(e)
-  }
+    try {
+        layer.visible = b_on
+    } catch (e) {
+        console.warn(e)
+    }
 }
 async function turnMaskVisible(
-  b_mask_group_on,
-  b_white_mask_on,
-  b_solid_black_mask_on
+    b_mask_group_on,
+    b_white_mask_on,
+    b_solid_black_mask_on
 ) {
-  //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)
-    })
-  } catch (e) {
-    console.warn(e)
-  }
+    //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)
+        })
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 async function loadViewerImages() {
-  try {
-    //get the images path
-    console.log("g_image_path_to_layer:", g_image_path_to_layer)
+    try {
+        //get the images path
+        console.log('g_image_path_to_layer:', g_image_path_to_layer)
 
-    const output_dir_relative = "./server/python_server/"
-    const init_image_container = document.getElementById(
-      "divInitImageViewerContainer"
-    )
-    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
-
-    // const viewer_layers = []
-    // Object.keys(g_image_path_to_layer).map(path =>  new viewer.OutputImage(g_image_path_to_layer[path],path))
-
-    // if(g_viewer_manager.g_init_image_related_layers.hasOwnProperty('init_image_group') )
-    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)
-      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 solid_background =
-            g_viewer_manager.initImageLayersJson[path].solid_background
-          const auto_delete =
-            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)
-
-          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}`
-      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 solid_background =
-          g_viewer_manager.maskLayersJson[path].solid_background
-        const mask_obj = g_viewer_manager.addMask(
-          group,
-          white_mark,
-          solid_background,
-          path
+        const output_dir_relative = './server/python_server/'
+        const init_image_container = document.getElementById(
+            'divInitImageViewerContainer'
+        )
+        const mask_container = document.getElementById(
+            'divInitMaskViewerContainer'
+        )
+        const output_image_container = document.getElementById(
+            'divViewerImagesContainer'
         )
 
-        const mask_img_html = createViewerImgHtml(
-          "./server/python_server/init_images/",
-          g_init_image_mask_name
-        )
+        // 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
 
-        mask_container.appendChild(mask_img_html)
-        mask_obj.setImgHtml(mask_img_html)
+        // const viewer_layers = []
+        // Object.keys(g_image_path_to_layer).map(path =>  new viewer.OutputImage(g_image_path_to_layer[path],path))
 
-        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
-      }
-    }
+        // if(g_viewer_manager.g_init_image_related_layers.hasOwnProperty('init_image_group') )
+        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)
+            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']
 
-    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
-      if (!g_viewer_manager.hasViewerImage(path)) {
-        //create viewer object if it doesn't exist
+                    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
+                    const auto_delete =
+                        g_viewer_manager.initImageLayersJson[path].autoDelete
+                    const initImage = g_viewer_manager.addInitImage(
+                        group,
+                        snapshot,
+                        solid_background,
+                        path,
+                        auto_delete
+                    )
 
-        // const viewer_obj =  new viewer.OutputImage(g_image_path_to_layer[image_path],image_path)
+                    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)
 
-        //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)
-        if (g_generation_session.mode !== generationMode["Txt2Img"]) {
-          //we don't need a button in txt2img mode
-          output_image_obj.addButtonHtml()
+                    await NewViewerImageClickHandler(init_img_html, initImage) // create click handler for each images
+                }
+            }
         }
-        output_image_container.appendChild(output_image_obj.img_html)
-        //add on click event handler to the html img
-        await NewViewerImageClickHandler(img, output_image_obj)
-      }
 
-      // i++
+        // 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}`
+            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 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)
+
+                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
+        for (const path of image_paths) {
+            // const path = image_path
+            //check if viewer obj already exist by using the path on hard drive
+            if (!g_viewer_manager.hasViewerImage(path)) {
+                //create viewer object if it doesn't exist
+
+                // const viewer_obj =  new viewer.OutputImage(g_image_path_to_layer[image_path],image_path)
+
+                //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)
+                if (g_generation_session.mode !== generationMode['Txt2Img']) {
+                    //we don't need a button in txt2img mode
+                    output_image_obj.addButtonHtml()
+                }
+                output_image_container.appendChild(output_image_obj.img_html)
+                //add on click event handler to the html img
+                await NewViewerImageClickHandler(img, output_image_obj)
+            }
+
+            // i++
+        }
+        if (lastOutputImage) {
+            //select the last generate/output image
+            lastOutputImage.img_html.click()
+        }
+    } catch (e) {
+        console.error(`loadViewer images: `, e)
     }
-    if (lastOutputImage) {
-      //select the last generate/output image
-      lastOutputImage.img_html.click()
-    }
-  } catch (e) {
-    console.error(`loadViewer images: `, e)
-  }
 }
 
 async function deleteNoneSelected(viewer_objects) {
-  try {
-    // visible layer
-    //delete all hidden layers
+    try {
+        // visible layer
+        //delete all hidden layers
 
-    await executeAsModal(async () => {
-      for (const [path, viewer_object] of Object.entries(viewer_objects)) {
-        try {
-          // if (viewer_object.getHighlight() || viewer_object.is_active){//keep it if it's highlighted
-          // const path = viewer_object.path
+        await executeAsModal(async () => {
+            for (const [path, viewer_object] of Object.entries(
+                viewer_objects
+            )) {
+                try {
+                    // 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
-          //   viewer_object.visible(true)//make them visiable on the canvas
-          // }else if(viewer_object.state === viewer.ViewerObjState['Delete']){// delete it if it isn't  highlighted
-          //   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
+                    //   viewer_object.visible(true)//make them visiable on the canvas
+                    // }else if(viewer_object.state === viewer.ViewerObjState['Delete']){// delete it if it isn't  highlighted
+                    //   await viewer_object.delete()//delete the layer from layers stack
 
-          // }
-          delete g_image_path_to_layer[path]
-        } catch (e) {
-          console.warn(e)
-        }
-      }
-      g_viewer_manager.pathToViewerImage = {}
-      g_viewer_manager.initImageLayersJson = {}
-      g_image_path_to_layer = {}
-    })
-  } catch (e) {
-    console.warn(e)
-  }
+                    // }
+                    delete g_image_path_to_layer[path]
+                } catch (e) {
+                    console.warn(e)
+                }
+            }
+            g_viewer_manager.pathToViewerImage = {}
+            g_viewer_manager.initImageLayersJson = {}
+            g_image_path_to_layer = {}
+        })
+    } catch (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)
 
 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 [image_paths, metadata_jsons] = await sdapi.loadHistory(
-        uniqueDocumentId
-      )
+    .getElementById('btnLoadHistory')
+    .addEventListener('click', async function () {
+        try {
+            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)
-      }
+            while (container.firstChild) {
+                container.removeChild(container.firstChild)
+            }
 
-      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)
+            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)
 
-        // 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)
-          // document.querySelector('#tiSeed').value = metadata_json.Seed
-          document.querySelector("#historySeedLabel").textContent =
-            metadata_json.Seed
-          autoFillInSettings(metadata_json)
+                // 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)
+                    // document.querySelector('#tiSeed').value = metadata_json.Seed
+                    document.querySelector('#historySeedLabel').textContent =
+                        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++
-      }
-    } catch (e) {
-      console.warn(`loadHistory warning: ${e}`)
-    }
-  })
+                    //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++
+            }
+        } catch (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 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)
-      while (container.firstChild) {
-        container.removeChild(container.firstChild)
-      }
+    .getElementById('btnImageSearch')
+    .addEventListener('click', async function () {
+        try {
+            // 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)
+            const keywords = document.getElementById('imageSearchField').value
+            const image_search_objs = await sdapi.imageSearch(keywords)
+            while (container.firstChild) {
+                container.removeChild(container.firstChild)
+            }
 
-      // let i = 0
-      for (let image_search_obj of image_search_objs) {
-        const img = document.createElement("img")
-        // img.src = image_search_obj['image']
+            // let i = 0
+            for (let image_search_obj of image_search_objs) {
+                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.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
-        container.appendChild(img)
-        img.addEventListener("click", async (e) => {
-          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}`)
-    }
-  })
+                img.className = 'image-search'
+                // img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
+                container.appendChild(img)
+                img.addEventListener('click', async (e) => {
+                    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}`)
+        }
+    })
 document
-  .getElementById("btnLoadPromptShortcut")
-  .addEventListener("click", async function () {
-    try {
-      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
-    } catch (e) {
-      console.warn(`loadPromptShortcut warning: ${e}`)
-    }
-  })
+    .getElementById('btnLoadPromptShortcut')
+    .addEventListener('click', async function () {
+        try {
+            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
+        } catch (e) {
+            console.warn(`loadPromptShortcut warning: ${e}`)
+        }
+    })
 
 document
-  .getElementById("btnUpdatePromptShortcut")
-  .addEventListener("click", async function () {
-    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()
-    } catch (e) {
-      console.warn(`loadPromptShortcut warning: ${e}`)
-    }
-  })
+    .getElementById('btnUpdatePromptShortcut')
+    .addEventListener('click', async function () {
+        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()
+        } catch (e) {
+            console.warn(`loadPromptShortcut warning: ${e}`)
+        }
+    })
 
 document
-  .getElementById("btnSavePromptShortcut")
-  .addEventListener("click", async function () {
-    try {
-      const r1 = await dialog_box.prompt(
-        "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")
-      } else {
-        /* Yes */
-        console.log("Save")
+    .getElementById('btnSavePromptShortcut')
+    .addEventListener('click', async function () {
+        try {
+            const r1 = await dialog_box.prompt(
+                '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')
+            } else {
+                /* Yes */
+                console.log('Save')
 
-        prompt_shortcut_string =
-          document.getElementById("taPromptShortcut").value
-        let prompt_shortcut = JSON.parse(prompt_shortcut_string)
+                prompt_shortcut_string =
+                    document.getElementById('taPromptShortcut').value
+                let prompt_shortcut = JSON.parse(prompt_shortcut_string)
 
-        prompt_shortcut = await sdapi.savePromptShortcut(prompt_shortcut)
-        // var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
-        console.log("prompt_shortcut was saved: ", prompt_shortcut)
-      }
-    } catch (e) {
-      console.warn(`savePromptShortcut warning: ${e}`)
-    }
-  })
+                prompt_shortcut = await sdapi.savePromptShortcut(
+                    prompt_shortcut
+                )
+                // var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
+                console.log('prompt_shortcut was saved: ', prompt_shortcut)
+            }
+        } catch (e) {
+            console.warn(`savePromptShortcut warning: ${e}`)
+        }
+    })
 
 // Hi res fix stuff
 
 var hr_models = [
-  "Latent",
-  "Latent (antialiased)",
-  "Latent (bicubic)",
-  "Latent (bicubic antialiased)",
-  "Latent (nearest)",
-  "Latent (nearest-exact)",
-  "None",
-  "Lanczos",
-  "Nearest",
-  "ESRGAN_4x",
-  "R-ESRGAN 4x+",
-  "R-ESRGAN 4x+ Anime6B",
-  "LDSR",
-  "SwinIR 4x",
+    'Latent',
+    'Latent (antialiased)',
+    'Latent (bicubic)',
+    'Latent (bicubic antialiased)',
+    'Latent (nearest)',
+    'Latent (nearest-exact)',
+    'None',
+    'Lanczos',
+    'Nearest',
+    'ESRGAN_4x',
+    'R-ESRGAN 4x+',
+    '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)
+    // 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)
 }
 
-var chHiResFixs = document.getElementById("chHiResFixs")
-var div = document.getElementById("HiResDiv")
-chHiResFixs.addEventListener("change", function () {
-  if (chHiResFixs.checked) {
-    div.style.display = "block"
-  } else {
-    div.style.display = "none"
-  }
+var chHiResFixs = document.getElementById('chHiResFixs')
+var div = document.getElementById('HiResDiv')
+chHiResFixs.addEventListener('change', function () {
+    if (chHiResFixs.checked) {
+        div.style.display = 'block'
+    } else {
+        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 = ""
+    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 = ''
 
-    for (const [key, value] of Object.entries(prompt_shortcut)) {
-      if (value.trim() === "") {
-        //skip empty spaces
-        continue
-      }
-      const menu_item_element = document.createElement("sp-menu-item")
+        for (const [key, value] of Object.entries(prompt_shortcut)) {
+            if (value.trim() === '') {
+                //skip empty spaces
+                continue
+            }
+            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)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 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])
-  })
+    .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])
+    })
 document
-  .getElementById("btnRefreshPromptShortcutMenu")
-  .addEventListener("click", () => {
-    refreshPromptMenue()
-  })
+    .getElementById('btnRefreshPromptShortcutMenu')
+    .addEventListener('click', () => {
+        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
 // a set button could be added to the ui to reduce the number of api calls in case of a slow connection
 document
-  .querySelector("#slInpaintingMaskWeight")
-  .addEventListener("input", async (evt) => {
-    const label_value = evt.target.value / 100
-    document.getElementById(
-      "lInpaintingMaskWeight"
-    ).innerHTML = `${label_value}`
-    // await sdapi.setInpaintMaskWeight(label_value)
-  })
+    .querySelector('#slInpaintingMaskWeight')
+    .addEventListener('input', async (evt) => {
+        const label_value = evt.target.value / 100
+        document.getElementById(
+            'lInpaintingMaskWeight'
+        ).innerHTML = `${label_value}`
+        // await sdapi.setInpaintMaskWeight(label_value)
+    })
 
 document
-  .querySelector("#slInpaintingMaskWeight")
-  .addEventListener("change", async (evt) => {
-    try {
-      const label_value = evt.target.value / 100
-      document.getElementById(
-        "lInpaintingMaskWeight"
-      ).innerHTML = `${label_value}`
-      await sdapi.setInpaintMaskWeight(label_value)
+    .querySelector('#slInpaintingMaskWeight')
+    .addEventListener('change', async (evt) => {
+        try {
+            const label_value = evt.target.value / 100
+            document.getElementById(
+                'lInpaintingMaskWeight'
+            ).innerHTML = `${label_value}`
+            await sdapi.setInpaintMaskWeight(label_value)
 
-      //get the inpaint mask weight from the webui sd
-      await g_sd_options_obj.getOptions()
-      const inpainting_mask_weight =
-        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)
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+            //get the inpaint mask weight from the webui sd
+            await g_sd_options_obj.getOptions()
+            const inpainting_mask_weight =
+                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)
+        } catch (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 file = await fs.getFileForSaving("image.png");
-    const folder = await storage.localFileSystem.getTemporaryFolder()
-    const file = await folder.createFile("image.png", { overwrite: true })
-    // const file = await fs.getTempFolder()
+    try {
+        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 file = await fs.getTempFolder()
 
-    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 file.write(img)
+        const currentDocument = app.activeDocument
+        const newDocument = await app.open(file)
+        if (currentDocument) {
+            await newDocument.activeLayers[0].duplicate(currentDocument)
+            await newDocument.closeWithoutSaving()
+        }
+
+        if (!file) {
+            return
+        }
+    } catch (e) {
+        console.warn(e)
     }
-
-    if (!file) {
-      return
-    }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function downloadItExe(link) {
-  await executeAsModal(async () => {
-    try {
-      await downloadIt(link)
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    await executeAsModal(async () => {
+        try {
+            await downloadIt(link)
+        } catch (e) {
+            console.warn(e)
+        }
+    })
 }
 
 document
-  .getElementById("btnSelectionArea")
-  .addEventListener("click", async () => {
-    try {
-      if (psapi.isSelectionValid(g_selection)) {
-        await psapi.reSelectMarqueeExe(g_selection)
-        await eventHandler()
-      }
-    } catch (e) {
-      console.warn(e)
-    }
-  })
+    .getElementById('btnSelectionArea')
+    .addEventListener('click', async () => {
+        try {
+            if (psapi.isSelectionValid(g_selection)) {
+                await psapi.reSelectMarqueeExe(g_selection)
+                await eventHandler()
+            }
+        } catch (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
+    // 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
 
-  // menu_item_element.addEventListener('select',()=>{
-  //   preset_func(g_ui_settings)
-  // })
-  return menu_item_element
+    // menu_item_element.addEventListener('select',()=>{
+    //   preset_func(g_ui_settings)
+    // })
+    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")
-  // dummy_preset_item.setAttribute('disabled')
-  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 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)
+    for ([key, value] of Object.entries(ui.loadedPresets)) {
+        const preset_menu_item = addPresetMenuItem(key, value)
+        document.getElementById('mPresetMenu').appendChild(preset_menu_item)
+    }
 }
 
 populatePresetMenu()
-document.getElementById("mPresetMenu").addEventListener("change", (evt) => {
-  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)
-  }
+document.getElementById('mPresetMenu').addEventListener('change', (evt) => {
+    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)
+    }
 })
diff --git a/outpaint.js b/outpaint.js
index cd5d952..04f5cfc 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,593 +39,616 @@ 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
-  await executeAsModal(async () => {
-    await psapi.moveToGroupCommand(group_id, layerIDs)
-  })
+    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)
+    })
 }
 
 async function createSnapshot() {
-  const { executeAsModal } = require("photoshop").core
-  //get all layers,
-  //duplicate the layers
-  //create a group
-  //move the duplicate layers to the group
-  let snapshotLayer, snapshotGroup
-  try {
-    const selectionInfo = await psapi.getSelectionInfoExe()
-    await psapi.unSelectMarqueeExe()
-
-    //get all layers
-    const allLayers = await app.activeDocument.layers
-
-    // const allLayerNames = allLayers.map(
-    //     layer => `${layer.name} (${layer.opacity} %)`
-    //   )
-    // for (layer of allLayerNames){
-    //     console.log(layer)
-    // }
+    const { executeAsModal } = require('photoshop').core
+    //get all layers,
     //duplicate the layers
-    let duplicatedLayers = []
+    //create a group
+    //move the duplicate layers to the group
+    let snapshotLayer, snapshotGroup
+    try {
+        const selectionInfo = await psapi.getSelectionInfoExe()
+        await psapi.unSelectMarqueeExe()
 
-    // const group_id = await createGroup()
-    const groupLayer = await psapi.createEmptyGroup()
+        //get all layers
+        const allLayers = await app.activeDocument.layers
 
-    console.log("createSnapshot(), group_id:", groupLayer.id)
-    // let bHasBackground = false
-    let indexOffset = 0
+        // const allLayerNames = allLayers.map(
+        //     layer => `${layer.name} (${layer.opacity} %)`
+        //   )
+        // for (layer of allLayerNames){
+        //     console.log(layer)
+        // }
+        //duplicate the layers
+        let duplicatedLayers = []
 
-    const result1 = await executeAsModal(async () => {
-      for (layer of allLayers) {
-        if (layer.id == 1) {
-          //skip the background layer
-          // bHasBackground = true
-          indexOffset = 1
-          continue
-        }
-        if (layer.visible) {
-          const copyLayer = await layer.duplicate()
-          duplicatedLayers.push(copyLayer)
-        }
-      }
+        // const group_id = await createGroup()
+        const groupLayer = await psapi.createEmptyGroup()
 
-      const layerIDs = duplicatedLayers.map((layer) => layer.id)
-      console.log("createSnapshot, layerIDs:", layerIDs)
+        console.log('createSnapshot(), group_id:', groupLayer.id)
+        // let bHasBackground = false
+        let indexOffset = 0
 
-      //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)
+        const result1 = await executeAsModal(async () => {
+            for (layer of allLayers) {
+                if (layer.id == 1) {
+                    //skip the background layer
+                    // bHasBackground = true
+                    indexOffset = 1
+                    continue
+                }
+                if (layer.visible) {
+                    const copyLayer = await layer.duplicate()
+                    duplicatedLayers.push(copyLayer)
+                }
+            }
 
-      await psapi.moveToGroupCommand(group_index - indexOffset, layerIDs)
+            const layerIDs = duplicatedLayers.map((layer) => layer.id)
+            console.log('createSnapshot, layerIDs:', 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)
+            //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)
 
-      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)
-    })
+            await psapi.moveToGroupCommand(group_index - indexOffset, layerIDs)
 
-    return [snapshotLayer, snapshotGroup]
-  } catch (e) {
-    console.warn("createSnapshot Error:", e)
-  }
+            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.selectLayerChannelCommand()
+            //   await psapi.createSolidLayer(0, 0, 0)
+        })
+
+        return [snapshotLayer, snapshotGroup]
+    } catch (e) {
+        console.warn('createSnapshot Error:', e)
+    }
 }
 
 function executeCommand(batchPlayCommandFunc) {
-  const { executeAsModal } = require("photoshop").core
-  try {
-    executeAsModal(async () => {
-      await batchPlayCommandFunc()
-    })
-  } catch (e) {
-    console.warn("executeCommand error:", e)
-  }
+    const { executeAsModal } = require('photoshop').core
+    try {
+        executeAsModal(async () => {
+            await batchPlayCommandFunc()
+        })
+    } catch (e) {
+        console.warn('executeCommand error:', e)
+    }
 }
 
 async function snapAndFillExe(session_id) {
-  //create a snapshot of canvas
-  //select opaque pixel and create black fill layer
-  //create a snapshot of mask
-  //set initial image
-  //set mask image
+    //create a snapshot of canvas
+    //select opaque pixel and create black fill layer
+    //create a snapshot of mask
+    //set initial image
+    //set mask image
 
-  try {
-    let snapAndFillLayers = []
-    await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe()
-      // await psapi.unSelectMarqueeExe()
+    try {
+        let snapAndFillLayers = []
+        await executeAsModal(async () => {
+            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"
+            //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'
 
-      // 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)
-      console.log("[snapshotLayer,snapshotGroup]:", [
-        snapshotLayer,
-        snapshotGroup,
-      ])
+            // 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)
+            console.log('[snapshotLayer,snapshotGroup]:', [
+                snapshotLayer,
+                snapshotGroup,
+            ])
 
-      //create a snapshot of mask
-      await psapi.reSelectMarqueeExe(selectionInfo)
-      // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
+            //create a snapshot of mask
+            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
+            // 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
+            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
 
-      for (layer of snapAndFillLayers) {
-        layer.visible = false
-      }
-      await psapi.reSelectMarqueeExe(selectionInfo)
-      const util_layer = require("./utility/layer")
-      await util_layer.collapseFolderExe([snapshotGroup], false)
+            for (layer of snapAndFillLayers) {
+                layer.visible = 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));
-      // }
-      // async function sleep(fn, ...args) {
-      //     await timeout(3000);
-      //     return fn(...args);
-      // }
-      // async function saveAndHide(){
+            //   function timeout(ms) {
+            //     return new Promise(resolve => setTimeout(resolve, ms));
+            // }
+            // async function sleep(fn, ...args) {
+            //     await timeout(3000);
+            //     return fn(...args);
+            // }
+            // async function saveAndHide(){
 
-      //   await psapi.setInitImage(snapshotGroup,session_id)
+            //   await psapi.setInitImage(snapshotGroup,session_id)
 
-      //   // await psapi.selectLayers([snapshotMaskGroup])
-      //   // await psapi.setInitImageMask(snapshotMaskGroup,session_id)
-      //   //set initial image
-      //   //set mask image
+            //   // await psapi.selectLayers([snapshotMaskGroup])
+            //   // await psapi.setInitImageMask(snapshotMaskGroup,session_id)
+            //   //set initial image
+            //   //set mask image
 
-      //   for (layer of snapAndFillLayers){
-      //               layer.visible = false
-      //             }
-      //           }
-      // sleep(saveAndHide)
-    })
-    console.log("snapAndFillLayers: ", snapAndFillLayers)
-    return snapAndFillLayers
-  } catch (e) {
-    console.error(`snapAndFill error: ${e}`)
-  }
-  return []
+            //   for (layer of snapAndFillLayers){
+            //               layer.visible = false
+            //             }
+            //           }
+            // sleep(saveAndHide)
+        })
+        console.log('snapAndFillLayers: ', snapAndFillLayers)
+        return snapAndFillLayers
+    } catch (e) {
+        console.error(`snapAndFill error: ${e}`)
+    }
+    return []
 }
 
 async function outpaintFasterExe(session_id) {
-  //create a snapshot of canvas
-  //select opaque pixel and create black fill layer
-  //create a snapshot of mask
-  //set initial image
-  //set mask image
+    //create a snapshot of canvas
+    //select opaque pixel and create black fill layer
+    //create a snapshot of mask
+    //set initial image
+    //set mask image
 
-  try {
-    let outpaintLayers = []
-    await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe()
-      // await psapi.unSelectMarqueeExe()
+    try {
+        let outpaintLayers = []
+        await executeAsModal(async () => {
+            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()
-      // 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)
-      console.log("[snapshotLayer,snapshotGroup]:", [
-        snapshotLayer,
-        snapshotGroup,
-      ])
+            //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()
+            // 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)
+            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()
+            //select opaque pixel and create black fill layer
+            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]
-      //create a snapshot of mask
-      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"
-      // const snapshotMaskGroup = await psapi.createEmptyGroup()
+            await psapi.createSolidLayer(0, 0, 0)
+            let solid_black_layer = app.activeDocument.activeLayers[0]
+            //create a snapshot of mask
+            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'
+            // 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 = `${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?
 
-      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)
-      //set initial image
-      //set mask image
-      outpaintLayers = [
-        snapshotMaskGroup,
-        snapshotMaskLayer,
-        snapshotLayer,
-        snapshotGroup,
-        whiteSolidLayer,
-      ]
-      // g_mask_related_layers['mask_group'] = snapshotMaskGroup
-      // g_mask_related_layers['white_mark'] = snapshotMaskLayer
-      // // g_mask_related_layers['solid_black'] = blackSolidLayer
-      g_viewer_manager.initializeMask(
-        snapshotMaskGroup,
-        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
+            await psapi.setInitImageMask(snapshotMaskGroup, session_id)
+            await psapi.reSelectMarqueeExe(selectionInfo)
+            //set initial image
+            //set mask image
+            outpaintLayers = [
+                snapshotMaskGroup,
+                snapshotMaskLayer,
+                snapshotLayer,
+                snapshotGroup,
+                whiteSolidLayer,
+            ]
+            // g_mask_related_layers['mask_group'] = snapshotMaskGroup
+            // g_mask_related_layers['white_mark'] = snapshotMaskLayer
+            // // g_mask_related_layers['solid_black'] = blackSolidLayer
+            g_viewer_manager.initializeMask(
+                snapshotMaskGroup,
+                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
 
-      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
-      for (layer of outpaintLayers) {
-        layer.visible = false
-      }
+            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
+            for (layer of outpaintLayers) {
+                layer.visible = false
+            }
 
-      //collapse the folders
-      const util_layer = require("./utility/layer")
-      await util_layer.collapseFolderExe(
-        [snapshotGroup, snapshotMaskGroup],
-        false
-      )
-    })
-    console.log("outpaintLayers 2: ", outpaintLayers)
-    return outpaintLayers
-  } catch (e) {
-    console.error(`outpaintFasterExe error: ${e}`)
-  }
-  return []
+            //collapse the folders
+            const util_layer = require('./utility/layer')
+            await util_layer.collapseFolderExe(
+                [snapshotGroup, snapshotMaskGroup],
+                false
+            )
+        })
+        console.log('outpaintLayers 2: ', outpaintLayers)
+        return outpaintLayers
+    } catch (e) {
+        console.error(`outpaintFasterExe error: ${e}`)
+    }
+    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(
-  //   async ()=>{
-  //   await outpaint.addClippingMaskToLayer(await app.activeDocument.activeLayers[0],await psapi.getSelectionInfoExe()
-  //   )})
+    ////test addClippingMaskToLayer
+    // await executeAsModal(
+    //   async ()=>{
+    //   await outpaint.addClippingMaskToLayer(await app.activeDocument.activeLayers[0],await psapi.getSelectionInfoExe()
+    //   )})
 }
 
 async function outpaintExe(session_id) {
-  //create a snapshot of canvas
-  //select opaque pixel and create black fill layer
-  //create a snapshot of mask
-  //set initial image
-  //set mask image
+    //create a snapshot of canvas
+    //select opaque pixel and create black fill layer
+    //create a snapshot of mask
+    //set initial image
+    //set mask image
 
-  try {
-    let outpaintLayers = []
-    await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe()
-      // await psapi.unSelectMarqueeExe()
+    try {
+        let outpaintLayers = []
+        await executeAsModal(async () => {
+            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()
-      // 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"
-      console.log("[snapshotLayer,snapshotGroup]:", [
-        snapshotLayer,
-        snapshotGroup,
-      ])
+            //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()
+            // 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"
+            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()
+            //select opaque pixel and create black fill layer
+            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]
-      //create a snapshot of mask
-      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"
-      // const snapshotMaskGroup = await psapi.createEmptyGroup()
+            await psapi.createSolidLayer(0, 0, 0)
+            let solid_black_layer = app.activeDocument.activeLayers[0]
+            //create a snapshot of mask
+            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'
+            // 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 = `${snapshotMaskGroup.name}_mask`
+            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_image_name = await psapi.setInitImage(
+                snapshotGroup,
+                session_id
+            )
+            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)
-      //set initial image
-      //set mask image
-      outpaintLayers = [
-        snapshotMaskGroup,
-        snapshotMaskLayer,
-        snapshotLayer,
-        snapshotGroup,
-        whiteSolidLayer,
-      ]
-      // g_mask_related_layers['mask_group'] = snapshotMaskGroup
-      // g_mask_related_layers['white_mark'] = snapshotMaskLayer
-      // // g_mask_related_layers['solid_black'] = blackSolidLayer
-      g_viewer_manager.initializeMask(
-        snapshotMaskGroup,
-        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
-      g_viewer_manager.initializeInitImage(
-        snapshotGroup,
-        snapshotLayer,
-        whiteSolidLayer,
-        init_path
-      ) //this will be called once a session and will add the first init image to th viewer manager
+            // 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)
+            //set initial image
+            //set mask image
+            outpaintLayers = [
+                snapshotMaskGroup,
+                snapshotMaskLayer,
+                snapshotLayer,
+                snapshotGroup,
+                whiteSolidLayer,
+            ]
+            // g_mask_related_layers['mask_group'] = snapshotMaskGroup
+            // g_mask_related_layers['white_mark'] = snapshotMaskLayer
+            // // g_mask_related_layers['solid_black'] = blackSolidLayer
+            g_viewer_manager.initializeMask(
+                snapshotMaskGroup,
+                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
+            g_viewer_manager.initializeInitImage(
+                snapshotGroup,
+                snapshotLayer,
+                whiteSolidLayer,
+                init_path
+            ) //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
-      }
+            for (layer of outpaintLayers) {
+                layer.visible = false
+            }
 
-      //collapse the folders
-      const util_layer = require("./utility/layer")
-      await util_layer.collapseFolderExe(
-        [snapshotGroup, snapshotMaskGroup],
-        false
-      )
-    })
-    console.log("outpaintLayers 2: ", outpaintLayers)
-    return outpaintLayers
-  } catch (e) {
-    console.error(`outpaintExe error: ${e}`)
-  }
-  return []
+            //collapse the folders
+            const util_layer = require('./utility/layer')
+            await util_layer.collapseFolderExe(
+                [snapshotGroup, snapshotMaskGroup],
+                false
+            )
+        })
+        console.log('outpaintLayers 2: ', outpaintLayers)
+        return outpaintLayers
+    } catch (e) {
+        console.error(`outpaintExe error: ${e}`)
+    }
+    return []
 }
 
 async function inpaintFasterExe(session_id) {
-  //
-  //create a snapshot of canvas
-  //select opaque pixel and create black fill layer
-  //create a snapshot of mask
-  //set initial image
-  //set mask image
-  try {
-    let inpaintLayers = []
-    await executeAsModal(async () => {
-      const selectionInfo = await psapi.getSelectionInfoExe()
+    //
+    //create a snapshot of canvas
+    //select opaque pixel and create black fill layer
+    //create a snapshot of mask
+    //set initial image
+    //set mask image
+    try {
+        let inpaintLayers = []
+        await executeAsModal(async () => {
+            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)
+            //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)
 
-      white_mark_layer.visible = false
-      white_mark_layer.name = "Mask -- Paint White to Mask -- temporary"
-      // white_mark_layer.visible = true
+            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
+            //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.mergeVisibleExe()
-      await psapi.snapshot_layerExe()
+            // 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.mergeVisibleExe()
+            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()
-      // maskGroup.name = `${maskGroup.name}_mask`
+            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"
-      // snapshotLayer.moveAbove(blackSolidLayer)
-      white_mark_layer.moveAbove(blackSolidLayer)
-      white_mark_layer.visible = true
-      await psapi.reSelectMarqueeExe(selectionInfo)
+            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)
 
-      console.log("[snapshotLayer,maskGroup]:", [snapshotLayer, maskGroup])
-      // //select opaque pixel and create black fill layer
-      // await psapi.selectLayers([snapshotLayer])
-      // await psapi.selectLayerChannelCommand()
-      // const snapshotMaskGroup = await psapi.createEmptyGroup()
+            console.log('[snapshotLayer,maskGroup]:', [
+                snapshotLayer,
+                maskGroup,
+            ])
+            // //select opaque pixel and create black fill layer
+            // 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]
-      // //create a snapshot of mask
-      // await psapi.reSelectMarqueeExe(selectionInfo)
-      // // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
-      // await psapi.snapshot_layer()
-      // const snapshotMaskLayer = await app.activeDocument.activeLayers[0]
-      // // const snapshotMaskGroup = await psapi.createEmptyGroup()
+            // await psapi.createSolidLayer(0, 0, 0)
+            // let solid_black_layer  = app.activeDocument.activeLayers[0]
+            // //create a snapshot of mask
+            // await psapi.reSelectMarqueeExe(selectionInfo)
+            // // let [snapshotMaskLayer,snapshotMaskGroup] = await createSnapshot()
+            // await psapi.snapshot_layer()
+            // const snapshotMaskLayer = await app.activeDocument.activeLayers[0]
+            // // const snapshotMaskGroup = await psapi.createEmptyGroup()
 
-      // snapshotMaskGroup.name = `${snapshotMaskGroup.name}_mask`
-      // snapshotMaskLayer.moveBelow(solid_black_layer)
-      // await snapshotMaskGroup.moveAbove(snapshotGroup)
-      // solid_black_layer.delete()
+            // snapshotMaskGroup.name = `${snapshotMaskGroup.name}_mask`
+            // snapshotMaskLayer.moveBelow(solid_black_layer)
+            // 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([snapshotGroup])
 
-      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}`
+            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}`
 
-      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.selectLayers([snapshotMaskGroup])
-      // await psapi.setInitImageMask(snapshotMaskGroup)
-      // //set initial image
-      // //set mask image
+            await psapi.reSelectMarqueeExe(selectionInfo)
+            // await psapi.selectLayers([snapshotMaskGroup])
+            // await psapi.setInitImageMask(snapshotMaskGroup)
+            // //set initial image
+            // //set mask image
 
-      await psapi.selectLayers([maskGroup])
-      inpaintLayers = [
-        maskGroup,
-        white_mark_layer,
-        blackSolidLayer,
-        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
-      g_viewer_manager.initializeMask(
-        maskGroup,
-        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
-      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
-      for (layer of inpaintLayers) {
-        layer.visible = false
-      }
-      const util_layer = require("./utility/layer")
+            await psapi.selectLayers([maskGroup])
+            inpaintLayers = [
+                maskGroup,
+                white_mark_layer,
+                blackSolidLayer,
+                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
+            g_viewer_manager.initializeMask(
+                maskGroup,
+                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
+            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
+            for (layer of inpaintLayers) {
+                layer.visible = false
+            }
+            const util_layer = require('./utility/layer')
 
-      await util_layer.collapseFolderExe([snapshotGroup, maskGroup], false)
-    })
-    return inpaintLayers
-  } catch (e) {
-    console.warn("inpaintFasterExe error:", e)
-  }
-  return []
+            await util_layer.collapseFolderExe(
+                [snapshotGroup, maskGroup],
+                false
+            )
+        })
+        return inpaintLayers
+    } catch (e) {
+        console.warn('inpaintFasterExe error:', e)
+    }
+    return []
 }
 module.exports = {
-  createSnapshot,
+    createSnapshot,
 
-  moveLayersToGroup,
-  executeCommand,
-  outpaintExe,
-  // outpaintFasterExe,
-  inpaintFasterExe,
-  snapAndFillExe,
-  addClippingMaskToLayer,
+    moveLayersToGroup,
+    executeCommand,
+    outpaintExe,
+    // outpaintFasterExe,
+    inpaintFasterExe,
+    snapAndFillExe,
+    addClippingMaskToLayer,
 }
diff --git a/package-lock.json b/package-lock.json
index c9327f7..05629c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,1016 +1,1016 @@
 {
-  "name": "uxp-template-default-starter",
-  "version": "1.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "uxp-template-default-starter",
-      "version": "1.0.0",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "fastify": "^4.10.2"
-      },
-      "devDependencies": {
-        "prettier": "2.8.3"
-      }
+    "name": "uxp-template-default-starter",
+    "version": "1.0.0",
+    "lockfileVersion": 2,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "uxp-template-default-starter",
+            "version": "1.0.0",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "fastify": "^4.10.2"
+            },
+            "devDependencies": {
+                "prettier": "2.8.3"
+            }
+        },
+        "node_modules/@fastify/ajv-compiler": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-3.4.0.tgz",
+            "integrity": "sha512-69JnK7Cot+ktn7LD5TikP3b7psBPX55tYpQa8WSumt8r117PCa2zwHnImfBtRWYExreJlI48hr0WZaVrTBGj7w==",
+            "dependencies": {
+                "ajv": "^8.11.0",
+                "ajv-formats": "^2.1.1",
+                "fast-uri": "^2.0.0"
+            }
+        },
+        "node_modules/@fastify/deepmerge": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-1.3.0.tgz",
+            "integrity": "sha512-J8TOSBq3SoZbDhM9+R/u77hP93gz/rajSA+K2kGyijPpORPWUXHUpTaleoj+92As0S9uPRP7Oi8IqMf0u+ro6A=="
+        },
+        "node_modules/@fastify/error": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@fastify/error/-/error-3.1.0.tgz",
+            "integrity": "sha512-jmk3Q822+xi8jVzGsux3mWd+9O4rzVUGCqR2+JlF9LkCeeUmRdxPd2Je6S7IGMk5VTtB0xyB3crRQqklUyQ6dQ=="
+        },
+        "node_modules/@fastify/fast-json-stringify-compiler": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.1.0.tgz",
+            "integrity": "sha512-cTKBV2J9+u6VaKDhX7HepSfPSzw+F+TSd+k0wzifj4rG+4E5PjSFJCk19P8R6tr/72cuzgGd+mbB3jFT6lvAgw==",
+            "dependencies": {
+                "fast-json-stringify": "^5.0.0"
+            }
+        },
+        "node_modules/abort-controller": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+            "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+            "dependencies": {
+                "event-target-shim": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=6.5"
+            }
+        },
+        "node_modules/abstract-logging": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
+            "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA=="
+        },
+        "node_modules/ajv": {
+            "version": "8.11.2",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
+            "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2",
+                "uri-js": "^4.2.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/ajv-formats": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+            "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+            "dependencies": {
+                "ajv": "^8.0.0"
+            },
+            "peerDependencies": {
+                "ajv": "^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "ajv": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/archy": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+            "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw=="
+        },
+        "node_modules/atomic-sleep": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
+            "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/avvio": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/avvio/-/avvio-8.2.0.tgz",
+            "integrity": "sha512-bbCQdg7bpEv6kGH41RO/3B2/GMMmJSo2iBK+X8AWN9mujtfUipMDfIjsgHCfpnKqoGEQrrmCDKSa5OQ19+fDmg==",
+            "dependencies": {
+                "archy": "^1.0.0",
+                "debug": "^4.0.0",
+                "fastq": "^1.6.1"
+            }
+        },
+        "node_modules/base64-js": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
+        "node_modules/buffer": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "dependencies": {
+                "base64-js": "^1.3.1",
+                "ieee754": "^1.2.1"
+            }
+        },
+        "node_modules/content-type": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+            "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/cookie": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+            "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dependencies": {
+                "ms": "2.1.2"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/event-target-shim": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+            "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/events": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+            "engines": {
+                "node": ">=0.8.x"
+            }
+        },
+        "node_modules/fast-decode-uri-component": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
+            "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
+        "node_modules/fast-json-stringify": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.5.0.tgz",
+            "integrity": "sha512-rmw2Z8/mLkND8zI+3KTYIkNPEoF5v6GqDP/o+g7H3vjdWjBwuKpgAYFHIzL6ORRB+iqDjjtJnLIW9Mzxn5szOA==",
+            "dependencies": {
+                "@fastify/deepmerge": "^1.0.0",
+                "ajv": "^8.10.0",
+                "ajv-formats": "^2.1.1",
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^2.1.0",
+                "rfdc": "^1.2.0"
+            }
+        },
+        "node_modules/fast-querystring": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.0.0.tgz",
+            "integrity": "sha512-3LQi62IhQoDlmt4ULCYmh17vRO2EtS7hTSsG4WwoKWgV7GLMKBOecEh+aiavASnLx8I2y89OD33AGLo0ccRhzA==",
+            "dependencies": {
+                "fast-decode-uri-component": "^1.0.1"
+            }
+        },
+        "node_modules/fast-redact": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.1.2.tgz",
+            "integrity": "sha512-+0em+Iya9fKGfEQGcd62Yv6onjBmmhV1uh86XVfOU8VwAe6kaFdQCWI9s0/Nnugx5Vd9tdbZ7e6gE2tR9dzXdw==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/fast-uri": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-2.2.0.tgz",
+            "integrity": "sha512-cIusKBIt/R/oI6z/1nyfe2FvGKVTohVRfvkOhvx0nCEW+xf5NoCXjAHcWp93uOUBchzYcsvPlrapAdX1uW+YGg=="
+        },
+        "node_modules/fastify": {
+            "version": "4.10.2",
+            "resolved": "https://registry.npmjs.org/fastify/-/fastify-4.10.2.tgz",
+            "integrity": "sha512-0T+4zI6N3S8ex0LCZi3H4FasJR4AzWw834fUkPWvV8r6GBJkLmAOfFxH8f5V29Plef24IK0QSQD/tz1Nx+1UOA==",
+            "dependencies": {
+                "@fastify/ajv-compiler": "^3.3.1",
+                "@fastify/error": "^3.0.0",
+                "@fastify/fast-json-stringify-compiler": "^4.1.0",
+                "abstract-logging": "^2.0.1",
+                "avvio": "^8.2.0",
+                "content-type": "^1.0.4",
+                "find-my-way": "^7.3.0",
+                "light-my-request": "^5.6.1",
+                "pino": "^8.5.0",
+                "process-warning": "^2.0.0",
+                "proxy-addr": "^2.0.7",
+                "rfdc": "^1.3.0",
+                "secure-json-parse": "^2.5.0",
+                "semver": "^7.3.7",
+                "tiny-lru": "^10.0.0"
+            }
+        },
+        "node_modules/fastq": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+            "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
+            "dependencies": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "node_modules/find-my-way": {
+            "version": "7.3.1",
+            "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-7.3.1.tgz",
+            "integrity": "sha512-kGvM08SOkqvheLcuQ8GW9t/H901Qb9rZEbcNWbXopzy4jDRoaJpJoObPSKf4MnQLZ20ZTp7rL5MpF6rf+pqmyg==",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-querystring": "^1.0.0",
+                "safe-regex2": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/forwarded": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+            "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
+        "node_modules/ipaddr.js": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+            "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "node_modules/light-my-request": {
+            "version": "5.8.0",
+            "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-5.8.0.tgz",
+            "integrity": "sha512-4BtD5C+VmyTpzlDPCZbsatZMJVgUIciSOwYhJDCbLffPZ35KoDkDj4zubLeHDEb35b4kkPeEv5imbh+RJxK/Pg==",
+            "dependencies": {
+                "cookie": "^0.5.0",
+                "process-warning": "^2.0.0",
+                "set-cookie-parser": "^2.4.1"
+            }
+        },
+        "node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "node_modules/on-exit-leak-free": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.0.tgz",
+            "integrity": "sha512-VuCaZZAjReZ3vUwgOB8LxAosIurDiAW0s13rI1YwmaP++jvcxP77AWoQvenZebpCA2m8WC1/EosPYPMjnRAp/w=="
+        },
+        "node_modules/pino": {
+            "version": "8.7.0",
+            "resolved": "https://registry.npmjs.org/pino/-/pino-8.7.0.tgz",
+            "integrity": "sha512-l9sA5uPxmZzwydhMWUcm1gI0YxNnYl8MfSr2h8cwLvOAzQLBLewzF247h/vqHe3/tt6fgtXeG9wdjjoetdI/vA==",
+            "dependencies": {
+                "atomic-sleep": "^1.0.0",
+                "fast-redact": "^3.1.1",
+                "on-exit-leak-free": "^2.1.0",
+                "pino-abstract-transport": "v1.0.0",
+                "pino-std-serializers": "^6.0.0",
+                "process-warning": "^2.0.0",
+                "quick-format-unescaped": "^4.0.3",
+                "real-require": "^0.2.0",
+                "safe-stable-stringify": "^2.3.1",
+                "sonic-boom": "^3.1.0",
+                "thread-stream": "^2.0.0"
+            },
+            "bin": {
+                "pino": "bin.js"
+            }
+        },
+        "node_modules/pino-abstract-transport": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
+            "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
+            "dependencies": {
+                "readable-stream": "^4.0.0",
+                "split2": "^4.0.0"
+            }
+        },
+        "node_modules/pino-std-serializers": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.0.0.tgz",
+            "integrity": "sha512-mMMOwSKrmyl+Y12Ri2xhH1lbzQxwwpuru9VjyJpgFIH4asSj88F2csdMwN6+M5g1Ll4rmsYghHLQJw81tgZ7LQ=="
+        },
+        "node_modules/prettier": {
+            "version": "2.8.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+            "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin-prettier.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
+        "node_modules/process-warning": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.1.0.tgz",
+            "integrity": "sha512-9C20RLxrZU/rFnxWncDkuF6O999NdIf3E1ws4B0ZeY3sRVPzWBMsYDE2lxjxhiXxg464cQTgKUGm8/i6y2YGXg=="
+        },
+        "node_modules/proxy-addr": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+            "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+            "dependencies": {
+                "forwarded": "0.2.0",
+                "ipaddr.js": "1.9.1"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/punycode": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/quick-format-unescaped": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
+            "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
+        },
+        "node_modules/readable-stream": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.2.0.tgz",
+            "integrity": "sha512-gJrBHsaI3lgBoGMW/jHZsQ/o/TIWiu5ENCJG1BB7fuCKzpFM8GaS2UoBVt9NO+oI+3FcrBNbUkl3ilDe09aY4A==",
+            "dependencies": {
+                "abort-controller": "^3.0.0",
+                "buffer": "^6.0.3",
+                "events": "^3.3.0",
+                "process": "^0.11.10"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            }
+        },
+        "node_modules/real-require": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
+            "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
+            "engines": {
+                "node": ">= 12.13.0"
+            }
+        },
+        "node_modules/require-from-string": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+            "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/ret": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/ret/-/ret-0.2.2.tgz",
+            "integrity": "sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/reusify": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+            "engines": {
+                "iojs": ">=1.0.0",
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/rfdc": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+            "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
+        },
+        "node_modules/safe-regex2": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-2.0.0.tgz",
+            "integrity": "sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==",
+            "dependencies": {
+                "ret": "~0.2.0"
+            }
+        },
+        "node_modules/safe-stable-stringify": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
+            "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA==",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/secure-json-parse": {
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.6.0.tgz",
+            "integrity": "sha512-B9osKohb6L+EZ6Kve3wHKfsAClzOC/iISA2vSuCe5Jx5NAKiwitfxx8ZKYapHXr0sYRj7UZInT7pLb3rp2Yx6A=="
+        },
+        "node_modules/semver": {
+            "version": "7.3.8",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/set-cookie-parser": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
+        },
+        "node_modules/sonic-boom": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.2.1.tgz",
+            "integrity": "sha512-iITeTHxy3B9FGu8aVdiDXUVAcHMF9Ss0cCsAOo2HfCrmVGT3/DT5oYaeu0M/YKZDlKTvChEyPq0zI9Hf33EX6A==",
+            "dependencies": {
+                "atomic-sleep": "^1.0.0"
+            }
+        },
+        "node_modules/split2": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/split2/-/split2-4.1.0.tgz",
+            "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==",
+            "engines": {
+                "node": ">= 10.x"
+            }
+        },
+        "node_modules/thread-stream": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.2.0.tgz",
+            "integrity": "sha512-rUkv4/fnb4rqy/gGy7VuqK6wE1+1DOCOWy4RMeaV69ZHMP11tQKZvZSip1yTgrKCMZzEMcCL/bKfHvSfDHx+iQ==",
+            "dependencies": {
+                "real-require": "^0.2.0"
+            }
+        },
+        "node_modules/tiny-lru": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-10.0.1.tgz",
+            "integrity": "sha512-Vst+6kEsWvb17Zpz14sRJV/f8bUWKhqm6Dc+v08iShmIJ/WxqWytHzCTd6m88pS33rE2zpX34TRmOpAJPloNCA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
     },
-    "node_modules/@fastify/ajv-compiler": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-3.4.0.tgz",
-      "integrity": "sha512-69JnK7Cot+ktn7LD5TikP3b7psBPX55tYpQa8WSumt8r117PCa2zwHnImfBtRWYExreJlI48hr0WZaVrTBGj7w==",
-      "dependencies": {
-        "ajv": "^8.11.0",
-        "ajv-formats": "^2.1.1",
-        "fast-uri": "^2.0.0"
-      }
-    },
-    "node_modules/@fastify/deepmerge": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-1.3.0.tgz",
-      "integrity": "sha512-J8TOSBq3SoZbDhM9+R/u77hP93gz/rajSA+K2kGyijPpORPWUXHUpTaleoj+92As0S9uPRP7Oi8IqMf0u+ro6A=="
-    },
-    "node_modules/@fastify/error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/error/-/error-3.1.0.tgz",
-      "integrity": "sha512-jmk3Q822+xi8jVzGsux3mWd+9O4rzVUGCqR2+JlF9LkCeeUmRdxPd2Je6S7IGMk5VTtB0xyB3crRQqklUyQ6dQ=="
-    },
-    "node_modules/@fastify/fast-json-stringify-compiler": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.1.0.tgz",
-      "integrity": "sha512-cTKBV2J9+u6VaKDhX7HepSfPSzw+F+TSd+k0wzifj4rG+4E5PjSFJCk19P8R6tr/72cuzgGd+mbB3jFT6lvAgw==",
-      "dependencies": {
-        "fast-json-stringify": "^5.0.0"
-      }
-    },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
-    "node_modules/abstract-logging": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
-      "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA=="
-    },
-    "node_modules/ajv": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
-      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
+    "dependencies": {
+        "@fastify/ajv-compiler": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-3.4.0.tgz",
+            "integrity": "sha512-69JnK7Cot+ktn7LD5TikP3b7psBPX55tYpQa8WSumt8r117PCa2zwHnImfBtRWYExreJlI48hr0WZaVrTBGj7w==",
+            "requires": {
+                "ajv": "^8.11.0",
+                "ajv-formats": "^2.1.1",
+                "fast-uri": "^2.0.0"
+            }
+        },
+        "@fastify/deepmerge": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-1.3.0.tgz",
+            "integrity": "sha512-J8TOSBq3SoZbDhM9+R/u77hP93gz/rajSA+K2kGyijPpORPWUXHUpTaleoj+92As0S9uPRP7Oi8IqMf0u+ro6A=="
+        },
+        "@fastify/error": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@fastify/error/-/error-3.1.0.tgz",
+            "integrity": "sha512-jmk3Q822+xi8jVzGsux3mWd+9O4rzVUGCqR2+JlF9LkCeeUmRdxPd2Je6S7IGMk5VTtB0xyB3crRQqklUyQ6dQ=="
+        },
+        "@fastify/fast-json-stringify-compiler": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.1.0.tgz",
+            "integrity": "sha512-cTKBV2J9+u6VaKDhX7HepSfPSzw+F+TSd+k0wzifj4rG+4E5PjSFJCk19P8R6tr/72cuzgGd+mbB3jFT6lvAgw==",
+            "requires": {
+                "fast-json-stringify": "^5.0.0"
+            }
+        },
+        "abort-controller": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+            "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+            "requires": {
+                "event-target-shim": "^5.0.0"
+            }
+        },
+        "abstract-logging": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
+            "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA=="
+        },
         "ajv": {
-          "optional": true
+            "version": "8.11.2",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
+            "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+            "requires": {
+                "fast-deep-equal": "^3.1.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2",
+                "uri-js": "^4.2.2"
+            }
+        },
+        "ajv-formats": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+            "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+            "requires": {
+                "ajv": "^8.0.0"
+            }
+        },
+        "archy": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+            "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw=="
+        },
+        "atomic-sleep": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
+            "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ=="
+        },
+        "avvio": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/avvio/-/avvio-8.2.0.tgz",
+            "integrity": "sha512-bbCQdg7bpEv6kGH41RO/3B2/GMMmJSo2iBK+X8AWN9mujtfUipMDfIjsgHCfpnKqoGEQrrmCDKSa5OQ19+fDmg==",
+            "requires": {
+                "archy": "^1.0.0",
+                "debug": "^4.0.0",
+                "fastq": "^1.6.1"
+            }
+        },
+        "base64-js": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+        },
+        "buffer": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+            "requires": {
+                "base64-js": "^1.3.1",
+                "ieee754": "^1.2.1"
+            }
+        },
+        "content-type": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+            "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+        },
+        "cookie": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+            "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+        },
+        "debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "requires": {
+                "ms": "2.1.2"
+            }
+        },
+        "event-target-shim": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+            "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+        },
+        "events": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+            "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+        },
+        "fast-decode-uri-component": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
+            "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="
+        },
+        "fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
+        "fast-json-stringify": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.5.0.tgz",
+            "integrity": "sha512-rmw2Z8/mLkND8zI+3KTYIkNPEoF5v6GqDP/o+g7H3vjdWjBwuKpgAYFHIzL6ORRB+iqDjjtJnLIW9Mzxn5szOA==",
+            "requires": {
+                "@fastify/deepmerge": "^1.0.0",
+                "ajv": "^8.10.0",
+                "ajv-formats": "^2.1.1",
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^2.1.0",
+                "rfdc": "^1.2.0"
+            }
+        },
+        "fast-querystring": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.0.0.tgz",
+            "integrity": "sha512-3LQi62IhQoDlmt4ULCYmh17vRO2EtS7hTSsG4WwoKWgV7GLMKBOecEh+aiavASnLx8I2y89OD33AGLo0ccRhzA==",
+            "requires": {
+                "fast-decode-uri-component": "^1.0.1"
+            }
+        },
+        "fast-redact": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.1.2.tgz",
+            "integrity": "sha512-+0em+Iya9fKGfEQGcd62Yv6onjBmmhV1uh86XVfOU8VwAe6kaFdQCWI9s0/Nnugx5Vd9tdbZ7e6gE2tR9dzXdw=="
+        },
+        "fast-uri": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-2.2.0.tgz",
+            "integrity": "sha512-cIusKBIt/R/oI6z/1nyfe2FvGKVTohVRfvkOhvx0nCEW+xf5NoCXjAHcWp93uOUBchzYcsvPlrapAdX1uW+YGg=="
+        },
+        "fastify": {
+            "version": "4.10.2",
+            "resolved": "https://registry.npmjs.org/fastify/-/fastify-4.10.2.tgz",
+            "integrity": "sha512-0T+4zI6N3S8ex0LCZi3H4FasJR4AzWw834fUkPWvV8r6GBJkLmAOfFxH8f5V29Plef24IK0QSQD/tz1Nx+1UOA==",
+            "requires": {
+                "@fastify/ajv-compiler": "^3.3.1",
+                "@fastify/error": "^3.0.0",
+                "@fastify/fast-json-stringify-compiler": "^4.1.0",
+                "abstract-logging": "^2.0.1",
+                "avvio": "^8.2.0",
+                "content-type": "^1.0.4",
+                "find-my-way": "^7.3.0",
+                "light-my-request": "^5.6.1",
+                "pino": "^8.5.0",
+                "process-warning": "^2.0.0",
+                "proxy-addr": "^2.0.7",
+                "rfdc": "^1.3.0",
+                "secure-json-parse": "^2.5.0",
+                "semver": "^7.3.7",
+                "tiny-lru": "^10.0.0"
+            }
+        },
+        "fastq": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+            "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
+            "requires": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "find-my-way": {
+            "version": "7.3.1",
+            "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-7.3.1.tgz",
+            "integrity": "sha512-kGvM08SOkqvheLcuQ8GW9t/H901Qb9rZEbcNWbXopzy4jDRoaJpJoObPSKf4MnQLZ20ZTp7rL5MpF6rf+pqmyg==",
+            "requires": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-querystring": "^1.0.0",
+                "safe-regex2": "^2.0.0"
+            }
+        },
+        "forwarded": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+            "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+        },
+        "ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+        },
+        "ipaddr.js": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+            "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+        },
+        "json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "light-my-request": {
+            "version": "5.8.0",
+            "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-5.8.0.tgz",
+            "integrity": "sha512-4BtD5C+VmyTpzlDPCZbsatZMJVgUIciSOwYhJDCbLffPZ35KoDkDj4zubLeHDEb35b4kkPeEv5imbh+RJxK/Pg==",
+            "requires": {
+                "cookie": "^0.5.0",
+                "process-warning": "^2.0.0",
+                "set-cookie-parser": "^2.4.1"
+            }
+        },
+        "lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "requires": {
+                "yallist": "^4.0.0"
+            }
+        },
+        "ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "on-exit-leak-free": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.0.tgz",
+            "integrity": "sha512-VuCaZZAjReZ3vUwgOB8LxAosIurDiAW0s13rI1YwmaP++jvcxP77AWoQvenZebpCA2m8WC1/EosPYPMjnRAp/w=="
+        },
+        "pino": {
+            "version": "8.7.0",
+            "resolved": "https://registry.npmjs.org/pino/-/pino-8.7.0.tgz",
+            "integrity": "sha512-l9sA5uPxmZzwydhMWUcm1gI0YxNnYl8MfSr2h8cwLvOAzQLBLewzF247h/vqHe3/tt6fgtXeG9wdjjoetdI/vA==",
+            "requires": {
+                "atomic-sleep": "^1.0.0",
+                "fast-redact": "^3.1.1",
+                "on-exit-leak-free": "^2.1.0",
+                "pino-abstract-transport": "v1.0.0",
+                "pino-std-serializers": "^6.0.0",
+                "process-warning": "^2.0.0",
+                "quick-format-unescaped": "^4.0.3",
+                "real-require": "^0.2.0",
+                "safe-stable-stringify": "^2.3.1",
+                "sonic-boom": "^3.1.0",
+                "thread-stream": "^2.0.0"
+            }
+        },
+        "pino-abstract-transport": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
+            "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
+            "requires": {
+                "readable-stream": "^4.0.0",
+                "split2": "^4.0.0"
+            }
+        },
+        "pino-std-serializers": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.0.0.tgz",
+            "integrity": "sha512-mMMOwSKrmyl+Y12Ri2xhH1lbzQxwwpuru9VjyJpgFIH4asSj88F2csdMwN6+M5g1Ll4rmsYghHLQJw81tgZ7LQ=="
+        },
+        "prettier": {
+            "version": "2.8.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+            "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
+            "dev": true
+        },
+        "process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+        },
+        "process-warning": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.1.0.tgz",
+            "integrity": "sha512-9C20RLxrZU/rFnxWncDkuF6O999NdIf3E1ws4B0ZeY3sRVPzWBMsYDE2lxjxhiXxg464cQTgKUGm8/i6y2YGXg=="
+        },
+        "proxy-addr": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+            "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+            "requires": {
+                "forwarded": "0.2.0",
+                "ipaddr.js": "1.9.1"
+            }
+        },
+        "punycode": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+        },
+        "quick-format-unescaped": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
+            "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
+        },
+        "readable-stream": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.2.0.tgz",
+            "integrity": "sha512-gJrBHsaI3lgBoGMW/jHZsQ/o/TIWiu5ENCJG1BB7fuCKzpFM8GaS2UoBVt9NO+oI+3FcrBNbUkl3ilDe09aY4A==",
+            "requires": {
+                "abort-controller": "^3.0.0",
+                "buffer": "^6.0.3",
+                "events": "^3.3.0",
+                "process": "^0.11.10"
+            }
+        },
+        "real-require": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
+            "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg=="
+        },
+        "require-from-string": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+            "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
+        },
+        "ret": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/ret/-/ret-0.2.2.tgz",
+            "integrity": "sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ=="
+        },
+        "reusify": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
+        },
+        "rfdc": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+            "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
+        },
+        "safe-regex2": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-2.0.0.tgz",
+            "integrity": "sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==",
+            "requires": {
+                "ret": "~0.2.0"
+            }
+        },
+        "safe-stable-stringify": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
+            "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA=="
+        },
+        "secure-json-parse": {
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.6.0.tgz",
+            "integrity": "sha512-B9osKohb6L+EZ6Kve3wHKfsAClzOC/iISA2vSuCe5Jx5NAKiwitfxx8ZKYapHXr0sYRj7UZInT7pLb3rp2Yx6A=="
+        },
+        "semver": {
+            "version": "7.3.8",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "requires": {
+                "lru-cache": "^6.0.0"
+            }
+        },
+        "set-cookie-parser": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
+        },
+        "sonic-boom": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.2.1.tgz",
+            "integrity": "sha512-iITeTHxy3B9FGu8aVdiDXUVAcHMF9Ss0cCsAOo2HfCrmVGT3/DT5oYaeu0M/YKZDlKTvChEyPq0zI9Hf33EX6A==",
+            "requires": {
+                "atomic-sleep": "^1.0.0"
+            }
+        },
+        "split2": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/split2/-/split2-4.1.0.tgz",
+            "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ=="
+        },
+        "thread-stream": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.2.0.tgz",
+            "integrity": "sha512-rUkv4/fnb4rqy/gGy7VuqK6wE1+1DOCOWy4RMeaV69ZHMP11tQKZvZSip1yTgrKCMZzEMcCL/bKfHvSfDHx+iQ==",
+            "requires": {
+                "real-require": "^0.2.0"
+            }
+        },
+        "tiny-lru": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-10.0.1.tgz",
+            "integrity": "sha512-Vst+6kEsWvb17Zpz14sRJV/f8bUWKhqm6Dc+v08iShmIJ/WxqWytHzCTd6m88pS33rE2zpX34TRmOpAJPloNCA=="
+        },
+        "uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "requires": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
-      }
-    },
-    "node_modules/archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw=="
-    },
-    "node_modules/atomic-sleep": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
-      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/avvio": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/avvio/-/avvio-8.2.0.tgz",
-      "integrity": "sha512-bbCQdg7bpEv6kGH41RO/3B2/GMMmJSo2iBK+X8AWN9mujtfUipMDfIjsgHCfpnKqoGEQrrmCDKSa5OQ19+fDmg==",
-      "dependencies": {
-        "archy": "^1.0.0",
-        "debug": "^4.0.0",
-        "fastq": "^1.6.1"
-      }
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
-    "node_modules/fast-decode-uri-component": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
-      "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-    },
-    "node_modules/fast-json-stringify": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.5.0.tgz",
-      "integrity": "sha512-rmw2Z8/mLkND8zI+3KTYIkNPEoF5v6GqDP/o+g7H3vjdWjBwuKpgAYFHIzL6ORRB+iqDjjtJnLIW9Mzxn5szOA==",
-      "dependencies": {
-        "@fastify/deepmerge": "^1.0.0",
-        "ajv": "^8.10.0",
-        "ajv-formats": "^2.1.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^2.1.0",
-        "rfdc": "^1.2.0"
-      }
-    },
-    "node_modules/fast-querystring": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.0.0.tgz",
-      "integrity": "sha512-3LQi62IhQoDlmt4ULCYmh17vRO2EtS7hTSsG4WwoKWgV7GLMKBOecEh+aiavASnLx8I2y89OD33AGLo0ccRhzA==",
-      "dependencies": {
-        "fast-decode-uri-component": "^1.0.1"
-      }
-    },
-    "node_modules/fast-redact": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.1.2.tgz",
-      "integrity": "sha512-+0em+Iya9fKGfEQGcd62Yv6onjBmmhV1uh86XVfOU8VwAe6kaFdQCWI9s0/Nnugx5Vd9tdbZ7e6gE2tR9dzXdw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/fast-uri": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-2.2.0.tgz",
-      "integrity": "sha512-cIusKBIt/R/oI6z/1nyfe2FvGKVTohVRfvkOhvx0nCEW+xf5NoCXjAHcWp93uOUBchzYcsvPlrapAdX1uW+YGg=="
-    },
-    "node_modules/fastify": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/fastify/-/fastify-4.10.2.tgz",
-      "integrity": "sha512-0T+4zI6N3S8ex0LCZi3H4FasJR4AzWw834fUkPWvV8r6GBJkLmAOfFxH8f5V29Plef24IK0QSQD/tz1Nx+1UOA==",
-      "dependencies": {
-        "@fastify/ajv-compiler": "^3.3.1",
-        "@fastify/error": "^3.0.0",
-        "@fastify/fast-json-stringify-compiler": "^4.1.0",
-        "abstract-logging": "^2.0.1",
-        "avvio": "^8.2.0",
-        "content-type": "^1.0.4",
-        "find-my-way": "^7.3.0",
-        "light-my-request": "^5.6.1",
-        "pino": "^8.5.0",
-        "process-warning": "^2.0.0",
-        "proxy-addr": "^2.0.7",
-        "rfdc": "^1.3.0",
-        "secure-json-parse": "^2.5.0",
-        "semver": "^7.3.7",
-        "tiny-lru": "^10.0.0"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
-      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/find-my-way": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-7.3.1.tgz",
-      "integrity": "sha512-kGvM08SOkqvheLcuQ8GW9t/H901Qb9rZEbcNWbXopzy4jDRoaJpJoObPSKf4MnQLZ20ZTp7rL5MpF6rf+pqmyg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-querystring": "^1.0.0",
-        "safe-regex2": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/light-my-request": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-5.8.0.tgz",
-      "integrity": "sha512-4BtD5C+VmyTpzlDPCZbsatZMJVgUIciSOwYhJDCbLffPZ35KoDkDj4zubLeHDEb35b4kkPeEv5imbh+RJxK/Pg==",
-      "dependencies": {
-        "cookie": "^0.5.0",
-        "process-warning": "^2.0.0",
-        "set-cookie-parser": "^2.4.1"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/on-exit-leak-free": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.0.tgz",
-      "integrity": "sha512-VuCaZZAjReZ3vUwgOB8LxAosIurDiAW0s13rI1YwmaP++jvcxP77AWoQvenZebpCA2m8WC1/EosPYPMjnRAp/w=="
-    },
-    "node_modules/pino": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-8.7.0.tgz",
-      "integrity": "sha512-l9sA5uPxmZzwydhMWUcm1gI0YxNnYl8MfSr2h8cwLvOAzQLBLewzF247h/vqHe3/tt6fgtXeG9wdjjoetdI/vA==",
-      "dependencies": {
-        "atomic-sleep": "^1.0.0",
-        "fast-redact": "^3.1.1",
-        "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "v1.0.0",
-        "pino-std-serializers": "^6.0.0",
-        "process-warning": "^2.0.0",
-        "quick-format-unescaped": "^4.0.3",
-        "real-require": "^0.2.0",
-        "safe-stable-stringify": "^2.3.1",
-        "sonic-boom": "^3.1.0",
-        "thread-stream": "^2.0.0"
-      },
-      "bin": {
-        "pino": "bin.js"
-      }
-    },
-    "node_modules/pino-abstract-transport": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
-      "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
-      "dependencies": {
-        "readable-stream": "^4.0.0",
-        "split2": "^4.0.0"
-      }
-    },
-    "node_modules/pino-std-serializers": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.0.0.tgz",
-      "integrity": "sha512-mMMOwSKrmyl+Y12Ri2xhH1lbzQxwwpuru9VjyJpgFIH4asSj88F2csdMwN6+M5g1Ll4rmsYghHLQJw81tgZ7LQ=="
-    },
-    "node_modules/prettier": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
-      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/process-warning": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.1.0.tgz",
-      "integrity": "sha512-9C20RLxrZU/rFnxWncDkuF6O999NdIf3E1ws4B0ZeY3sRVPzWBMsYDE2lxjxhiXxg464cQTgKUGm8/i6y2YGXg=="
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/quick-format-unescaped": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
-      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
-    },
-    "node_modules/readable-stream": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.2.0.tgz",
-      "integrity": "sha512-gJrBHsaI3lgBoGMW/jHZsQ/o/TIWiu5ENCJG1BB7fuCKzpFM8GaS2UoBVt9NO+oI+3FcrBNbUkl3ilDe09aY4A==",
-      "dependencies": {
-        "abort-controller": "^3.0.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "process": "^0.11.10"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/real-require": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
-      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ret": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.2.2.tgz",
-      "integrity": "sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rfdc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
-      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
-    },
-    "node_modules/safe-regex2": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-2.0.0.tgz",
-      "integrity": "sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==",
-      "dependencies": {
-        "ret": "~0.2.0"
-      }
-    },
-    "node_modules/safe-stable-stringify": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
-      "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/secure-json-parse": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.6.0.tgz",
-      "integrity": "sha512-B9osKohb6L+EZ6Kve3wHKfsAClzOC/iISA2vSuCe5Jx5NAKiwitfxx8ZKYapHXr0sYRj7UZInT7pLb3rp2Yx6A=="
-    },
-    "node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/set-cookie-parser": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
-      "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
-    },
-    "node_modules/sonic-boom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.2.1.tgz",
-      "integrity": "sha512-iITeTHxy3B9FGu8aVdiDXUVAcHMF9Ss0cCsAOo2HfCrmVGT3/DT5oYaeu0M/YKZDlKTvChEyPq0zI9Hf33EX6A==",
-      "dependencies": {
-        "atomic-sleep": "^1.0.0"
-      }
-    },
-    "node_modules/split2": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.1.0.tgz",
-      "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
-    "node_modules/thread-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.2.0.tgz",
-      "integrity": "sha512-rUkv4/fnb4rqy/gGy7VuqK6wE1+1DOCOWy4RMeaV69ZHMP11tQKZvZSip1yTgrKCMZzEMcCL/bKfHvSfDHx+iQ==",
-      "dependencies": {
-        "real-require": "^0.2.0"
-      }
-    },
-    "node_modules/tiny-lru": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-10.0.1.tgz",
-      "integrity": "sha512-Vst+6kEsWvb17Zpz14sRJV/f8bUWKhqm6Dc+v08iShmIJ/WxqWytHzCTd6m88pS33rE2zpX34TRmOpAJPloNCA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     }
-  },
-  "dependencies": {
-    "@fastify/ajv-compiler": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-3.4.0.tgz",
-      "integrity": "sha512-69JnK7Cot+ktn7LD5TikP3b7psBPX55tYpQa8WSumt8r117PCa2zwHnImfBtRWYExreJlI48hr0WZaVrTBGj7w==",
-      "requires": {
-        "ajv": "^8.11.0",
-        "ajv-formats": "^2.1.1",
-        "fast-uri": "^2.0.0"
-      }
-    },
-    "@fastify/deepmerge": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-1.3.0.tgz",
-      "integrity": "sha512-J8TOSBq3SoZbDhM9+R/u77hP93gz/rajSA+K2kGyijPpORPWUXHUpTaleoj+92As0S9uPRP7Oi8IqMf0u+ro6A=="
-    },
-    "@fastify/error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/error/-/error-3.1.0.tgz",
-      "integrity": "sha512-jmk3Q822+xi8jVzGsux3mWd+9O4rzVUGCqR2+JlF9LkCeeUmRdxPd2Je6S7IGMk5VTtB0xyB3crRQqklUyQ6dQ=="
-    },
-    "@fastify/fast-json-stringify-compiler": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.1.0.tgz",
-      "integrity": "sha512-cTKBV2J9+u6VaKDhX7HepSfPSzw+F+TSd+k0wzifj4rG+4E5PjSFJCk19P8R6tr/72cuzgGd+mbB3jFT6lvAgw==",
-      "requires": {
-        "fast-json-stringify": "^5.0.0"
-      }
-    },
-    "abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "requires": {
-        "event-target-shim": "^5.0.0"
-      }
-    },
-    "abstract-logging": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
-      "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA=="
-    },
-    "ajv": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
-      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "requires": {
-        "ajv": "^8.0.0"
-      }
-    },
-    "archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw=="
-    },
-    "atomic-sleep": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
-      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ=="
-    },
-    "avvio": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/avvio/-/avvio-8.2.0.tgz",
-      "integrity": "sha512-bbCQdg7bpEv6kGH41RO/3B2/GMMmJSo2iBK+X8AWN9mujtfUipMDfIjsgHCfpnKqoGEQrrmCDKSa5OQ19+fDmg==",
-      "requires": {
-        "archy": "^1.0.0",
-        "debug": "^4.0.0",
-        "fastq": "^1.6.1"
-      }
-    },
-    "base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
-    },
-    "buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "requires": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
-    },
-    "debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "requires": {
-        "ms": "2.1.2"
-      }
-    },
-    "event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-    },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
-    },
-    "fast-decode-uri-component": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
-      "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="
-    },
-    "fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-    },
-    "fast-json-stringify": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.5.0.tgz",
-      "integrity": "sha512-rmw2Z8/mLkND8zI+3KTYIkNPEoF5v6GqDP/o+g7H3vjdWjBwuKpgAYFHIzL6ORRB+iqDjjtJnLIW9Mzxn5szOA==",
-      "requires": {
-        "@fastify/deepmerge": "^1.0.0",
-        "ajv": "^8.10.0",
-        "ajv-formats": "^2.1.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^2.1.0",
-        "rfdc": "^1.2.0"
-      }
-    },
-    "fast-querystring": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.0.0.tgz",
-      "integrity": "sha512-3LQi62IhQoDlmt4ULCYmh17vRO2EtS7hTSsG4WwoKWgV7GLMKBOecEh+aiavASnLx8I2y89OD33AGLo0ccRhzA==",
-      "requires": {
-        "fast-decode-uri-component": "^1.0.1"
-      }
-    },
-    "fast-redact": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.1.2.tgz",
-      "integrity": "sha512-+0em+Iya9fKGfEQGcd62Yv6onjBmmhV1uh86XVfOU8VwAe6kaFdQCWI9s0/Nnugx5Vd9tdbZ7e6gE2tR9dzXdw=="
-    },
-    "fast-uri": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-2.2.0.tgz",
-      "integrity": "sha512-cIusKBIt/R/oI6z/1nyfe2FvGKVTohVRfvkOhvx0nCEW+xf5NoCXjAHcWp93uOUBchzYcsvPlrapAdX1uW+YGg=="
-    },
-    "fastify": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/fastify/-/fastify-4.10.2.tgz",
-      "integrity": "sha512-0T+4zI6N3S8ex0LCZi3H4FasJR4AzWw834fUkPWvV8r6GBJkLmAOfFxH8f5V29Plef24IK0QSQD/tz1Nx+1UOA==",
-      "requires": {
-        "@fastify/ajv-compiler": "^3.3.1",
-        "@fastify/error": "^3.0.0",
-        "@fastify/fast-json-stringify-compiler": "^4.1.0",
-        "abstract-logging": "^2.0.1",
-        "avvio": "^8.2.0",
-        "content-type": "^1.0.4",
-        "find-my-way": "^7.3.0",
-        "light-my-request": "^5.6.1",
-        "pino": "^8.5.0",
-        "process-warning": "^2.0.0",
-        "proxy-addr": "^2.0.7",
-        "rfdc": "^1.3.0",
-        "secure-json-parse": "^2.5.0",
-        "semver": "^7.3.7",
-        "tiny-lru": "^10.0.0"
-      }
-    },
-    "fastq": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
-      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "requires": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "find-my-way": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-7.3.1.tgz",
-      "integrity": "sha512-kGvM08SOkqvheLcuQ8GW9t/H901Qb9rZEbcNWbXopzy4jDRoaJpJoObPSKf4MnQLZ20ZTp7rL5MpF6rf+pqmyg==",
-      "requires": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-querystring": "^1.0.0",
-        "safe-regex2": "^2.0.0"
-      }
-    },
-    "forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
-    },
-    "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
-    },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
-    },
-    "json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "light-my-request": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-5.8.0.tgz",
-      "integrity": "sha512-4BtD5C+VmyTpzlDPCZbsatZMJVgUIciSOwYhJDCbLffPZ35KoDkDj4zubLeHDEb35b4kkPeEv5imbh+RJxK/Pg==",
-      "requires": {
-        "cookie": "^0.5.0",
-        "process-warning": "^2.0.0",
-        "set-cookie-parser": "^2.4.1"
-      }
-    },
-    "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "on-exit-leak-free": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.0.tgz",
-      "integrity": "sha512-VuCaZZAjReZ3vUwgOB8LxAosIurDiAW0s13rI1YwmaP++jvcxP77AWoQvenZebpCA2m8WC1/EosPYPMjnRAp/w=="
-    },
-    "pino": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/pino/-/pino-8.7.0.tgz",
-      "integrity": "sha512-l9sA5uPxmZzwydhMWUcm1gI0YxNnYl8MfSr2h8cwLvOAzQLBLewzF247h/vqHe3/tt6fgtXeG9wdjjoetdI/vA==",
-      "requires": {
-        "atomic-sleep": "^1.0.0",
-        "fast-redact": "^3.1.1",
-        "on-exit-leak-free": "^2.1.0",
-        "pino-abstract-transport": "v1.0.0",
-        "pino-std-serializers": "^6.0.0",
-        "process-warning": "^2.0.0",
-        "quick-format-unescaped": "^4.0.3",
-        "real-require": "^0.2.0",
-        "safe-stable-stringify": "^2.3.1",
-        "sonic-boom": "^3.1.0",
-        "thread-stream": "^2.0.0"
-      }
-    },
-    "pino-abstract-transport": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz",
-      "integrity": "sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==",
-      "requires": {
-        "readable-stream": "^4.0.0",
-        "split2": "^4.0.0"
-      }
-    },
-    "pino-std-serializers": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.0.0.tgz",
-      "integrity": "sha512-mMMOwSKrmyl+Y12Ri2xhH1lbzQxwwpuru9VjyJpgFIH4asSj88F2csdMwN6+M5g1Ll4rmsYghHLQJw81tgZ7LQ=="
-    },
-    "prettier": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
-      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
-      "dev": true
-    },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
-    },
-    "process-warning": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.1.0.tgz",
-      "integrity": "sha512-9C20RLxrZU/rFnxWncDkuF6O999NdIf3E1ws4B0ZeY3sRVPzWBMsYDE2lxjxhiXxg464cQTgKUGm8/i6y2YGXg=="
-    },
-    "proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "requires": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      }
-    },
-    "punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-    },
-    "quick-format-unescaped": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
-      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
-    },
-    "readable-stream": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.2.0.tgz",
-      "integrity": "sha512-gJrBHsaI3lgBoGMW/jHZsQ/o/TIWiu5ENCJG1BB7fuCKzpFM8GaS2UoBVt9NO+oI+3FcrBNbUkl3ilDe09aY4A==",
-      "requires": {
-        "abort-controller": "^3.0.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "process": "^0.11.10"
-      }
-    },
-    "real-require": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
-      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg=="
-    },
-    "require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
-    },
-    "ret": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.2.2.tgz",
-      "integrity": "sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ=="
-    },
-    "reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
-    },
-    "rfdc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
-      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
-    },
-    "safe-regex2": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-2.0.0.tgz",
-      "integrity": "sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==",
-      "requires": {
-        "ret": "~0.2.0"
-      }
-    },
-    "safe-stable-stringify": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz",
-      "integrity": "sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA=="
-    },
-    "secure-json-parse": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.6.0.tgz",
-      "integrity": "sha512-B9osKohb6L+EZ6Kve3wHKfsAClzOC/iISA2vSuCe5Jx5NAKiwitfxx8ZKYapHXr0sYRj7UZInT7pLb3rp2Yx6A=="
-    },
-    "semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
-      "requires": {
-        "lru-cache": "^6.0.0"
-      }
-    },
-    "set-cookie-parser": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
-      "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
-    },
-    "sonic-boom": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.2.1.tgz",
-      "integrity": "sha512-iITeTHxy3B9FGu8aVdiDXUVAcHMF9Ss0cCsAOo2HfCrmVGT3/DT5oYaeu0M/YKZDlKTvChEyPq0zI9Hf33EX6A==",
-      "requires": {
-        "atomic-sleep": "^1.0.0"
-      }
-    },
-    "split2": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.1.0.tgz",
-      "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ=="
-    },
-    "thread-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.2.0.tgz",
-      "integrity": "sha512-rUkv4/fnb4rqy/gGy7VuqK6wE1+1DOCOWy4RMeaV69ZHMP11tQKZvZSip1yTgrKCMZzEMcCL/bKfHvSfDHx+iQ==",
-      "requires": {
-        "real-require": "^0.2.0"
-      }
-    },
-    "tiny-lru": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-10.0.1.tgz",
-      "integrity": "sha512-Vst+6kEsWvb17Zpz14sRJV/f8bUWKhqm6Dc+v08iShmIJ/WxqWytHzCTd6m88pS33rE2zpX34TRmOpAJPloNCA=="
-    },
-    "uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    }
-  }
 }
diff --git a/package.json b/package.json
index b48c2b3..e383977 100644
--- a/package.json
+++ b/package.json
@@ -1,29 +1,29 @@
 {
-  "name": "uxp-template-default-starter",
-  "version": "1.0.0",
-  "description": "Default template for creating Adobe UXP based photoshop plugin.",
-  "author": "Adobe Inc",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "fastify": "^4.10.2"
-  },
-  "main": "index.js",
-  "directories": {
-    "test": "test"
-  },
-  "devDependencies": {
-    "prettier": "2.8.3"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git"
-  },
-  "keywords": [],
-  "bugs": {
-    "url": "https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin/issues"
-  },
-  "homepage": "https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin#readme"
+    "name": "uxp-template-default-starter",
+    "version": "1.0.0",
+    "description": "Default template for creating Adobe UXP based photoshop plugin.",
+    "author": "Adobe Inc",
+    "license": "Apache-2.0",
+    "dependencies": {
+        "fastify": "^4.10.2"
+    },
+    "main": "index.js",
+    "directories": {
+        "test": "test"
+    },
+    "devDependencies": {
+        "prettier": "2.8.3"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git"
+    },
+    "keywords": [],
+    "bugs": {
+        "url": "https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin/issues"
+    },
+    "homepage": "https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin#readme"
 }
diff --git a/psapi.js b/psapi.js
index 3c5c727..fe5635f 100644
--- a/psapi.js
+++ b/psapi.js
@@ -1,757 +1,767 @@
-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 storage = require('uxp').storage
 const fs = storage.localFileSystem
 
 async function createSolidLayer(r, g, b) {
-  await executeAsModal(async () => {
-    const result = await batchPlay(
-      [
-        {
-          _obj: "make",
-          _target: [
+    await executeAsModal(async () => {
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'make',
+                    _target: [
+                        {
+                            _ref: 'contentLayer',
+                        },
+                    ],
+                    using: {
+                        _obj: 'contentLayer',
+                        type: {
+                            _obj: 'solidColorLayer',
+                            color: {
+                                _obj: 'RGBColor',
+                                red: r,
+                                grain: g,
+                                blue: b,
+                            },
+                        },
+                    },
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
             {
-              _ref: "contentLayer",
-            },
-          ],
-          using: {
-            _obj: "contentLayer",
-            type: {
-              _obj: "solidColorLayer",
-              color: {
-                _obj: "RGBColor",
-                red: r,
-                grain: g,
-                blue: b,
-              },
-            },
-          },
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-  })
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+    })
 }
 
 async function makeGroupCommand() {
-  const result = await batchPlay(
-    [
-      {
-        _obj: "make",
-        _target: [
-          {
-            _ref: "layerSection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'make',
+                _target: [
+                    {
+                        _ref: 'layerSection',
+                    },
+                ],
+                layerSectionStart: 405,
+                layerSectionEnd: 406,
+                name: 'Group 16',
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        layerSectionStart: 405,
-        layerSectionEnd: 406,
-        name: "Group 16",
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  console.log("makeGroupCommand: ", result)
+    console.log('makeGroupCommand: ', result)
 
-  return result
+    return result
 }
-async function createEmptyGroup(name = "New Group") {
-  let groupLayer
-  await executeAsModal(async () => {
-    await makeGroupCommand()
-    groupLayer = app.activeDocument.activeLayers[0]
-    groupLayer.name = name
-  })
-  console.log("groupLayer:", groupLayer)
-  return groupLayer
+async function createEmptyGroup(name = 'New Group') {
+    let groupLayer
+    await executeAsModal(async () => {
+        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(
-    [
-      {
-        _obj: "move",
-        _target: [
-          {
-            _ref: "layer",
-            _enum: "ordinal",
-            _value: "targetEnum",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'move',
+                _target: [
+                    {
+                        _ref: 'layer',
+                        _enum: 'ordinal',
+                        _value: 'targetEnum',
+                    },
+                ],
+                to: {
+                    _ref: 'layer',
+                    _index: to_index,
+                },
+                adjustment: false,
+                version: 5,
+                layerID: layerIDs,
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _ref: "layer",
-          _index: to_index,
-        },
-        adjustment: false,
-        version: 5,
-        layerID: layerIDs,
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 }
 function MoveToGroupExe(toIndex, layerIDs) {
-  try {
-    executeAsModal(async () => {
-      await moveToGroupCommand(toIndex, layerIDs)
-    })
-  } catch (e) {
-    console.warn("executeCommand error:", e)
-  }
+    try {
+        executeAsModal(async () => {
+            await moveToGroupCommand(toIndex, layerIDs)
+        })
+    } catch (e) {
+        console.warn('executeCommand error:', e)
+    }
 }
 
 async function getIndexCommand(layer_id) {
-  const idx = batchPlay(
-    [
-      {
-        _obj: "get",
-        _target: [
-          {
-            _property: "itemIndex",
-          },
-          {
-            _ref: "layer",
-            // _name: 'myGroup'
-            _id: layer_id,
-          },
+    const idx = batchPlay(
+        [
+            {
+                _obj: 'get',
+                _target: [
+                    {
+                        _property: 'itemIndex',
+                    },
+                    {
+                        _ref: 'layer',
+                        // _name: 'myGroup'
+                        _id: layer_id,
+                    },
+                ],
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    { synchronousExecution: true }
-  )[0]["itemIndex"]
-  console.log("index:", idx)
-  return idx
+        { synchronousExecution: true }
+    )[0]['itemIndex']
+    console.log('index:', idx)
+    return idx
 }
 
 async function getLayerIndex(layer_id) {
-  const { executeAsModal } = require("photoshop").core
-  try {
-    let index
-    await executeAsModal(async () => {
-      index = await getIndexCommand(layer_id)
-      console.log("getIndex: ", index)
-    })
-    return index
-  } catch (e) {
-    console.warn("getIndex error:", e)
-  }
+    const { executeAsModal } = require('photoshop').core
+    try {
+        let index
+        await executeAsModal(async () => {
+            index = await getIndexCommand(layer_id)
+            console.log('getIndex: ', index)
+        })
+        return index
+    } catch (e) {
+        console.warn('getIndex error:', e)
+    }
 }
 
 async function unselectActiveLayers() {
-  const layers = await app.activeDocument.activeLayers
-  for (layer of layers) {
-    layer.selected = false
-  }
+    const layers = await app.activeDocument.activeLayers
+    for (layer of layers) {
+        layer.selected = false
+    }
 }
 async function unselectActiveLayersExe() {
-  await executeAsModal(async () => {
-    await unselectActiveLayers()
-  })
+    await executeAsModal(async () => {
+        await unselectActiveLayers()
+    })
 }
 async function selectLayers(layers) {
-  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
-      }
-    } catch (e) {
-      console.warn(e)
+    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
+            }
+        } catch (e) {
+            console.warn(e)
+        }
     }
-  }
 }
 
 async function selectLayersExe(layers) {
-  await executeAsModal(async () => {
-    await selectLayers(layers)
-  })
+    await executeAsModal(async () => {
+        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(
-    [
-      {
-        _obj: "make",
-        new: {
-          _class: "channel",
-        },
-        at: {
-          _ref: "channel",
-          _enum: "channel",
-          _value: "mask",
-        },
-        using: {
-          _enum: "userMaskEnabled",
-          _value: "revealSelection",
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'make',
+                new: {
+                    _class: 'channel',
+                },
+                at: {
+                    _ref: 'channel',
+                    _enum: 'channel',
+                    _value: 'mask',
+                },
+                using: {
+                    _enum: 'userMaskEnabled',
+                    _value: 'revealSelection',
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
+        ],
+        {
+            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(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _enum: 'ordinal',
+                    _value: 'none',
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _enum: "ordinal",
-          _value: "none",
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  return result
+    return result
 }
 async function unSelectMarqueeExe() {
-  await executeAsModal(unSelectMarqueeCommand)
+    await executeAsModal(unSelectMarqueeCommand)
 }
 ////selection:
 async function selectMarqueeRectangularToolExe() {
-  async function selectMarqueeRectangularToolCommand() {
-    const result = await batchPlay(
-      [
-        {
-          _obj: "select",
-          _target: [
+    async function selectMarqueeRectangularToolCommand() {
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'select',
+                    _target: [
+                        {
+                            _ref: 'marqueeRectTool',
+                        },
+                    ],
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
             {
-              _ref: "marqueeRectTool",
-            },
-          ],
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-    return result
-  }
-  await executeAsModal(async () => {
-    await selectMarqueeRectangularToolCommand()
-  })
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+        return result
+    }
+    await executeAsModal(async () => {
+        await selectMarqueeRectangularToolCommand()
+    })
 }
 
 async function promptForMarqueeTool() {
-  ;(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")
-    } else {
-      /* Yes */
-      console.log("Rectangular Marquee")
-      selectMarqueeRectangularToolExe()
-    }
-  })()
+    ;(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')
+        } else {
+            /* Yes */
+            console.log('Rectangular Marquee')
+            selectMarqueeRectangularToolExe()
+        }
+    })()
 }
 
 async function selectLayerChannelCommand() {
-  //   const result = await batchPlay(
-  //     [
-  //       {
-  //         _obj: 'set',
-  //         _target: [
-  //           {
-  //             _ref: 'channel',
-  //             _property: 'selection'
-  //           }
-  //         ],
-  //         to: {
-  //           _ref: [
-  //             {
-  //               _ref: 'channel',
-  //               _enum: 'channel',
-  //               _value: 'transparencyEnum'
-  //             },
-  //             {
-  //               _ref: 'layer',
-  //               _name: 'Group 5'
-  //             }
-  //           ]
-  //         },
-  //         _options: {
-  //           dialogOptions: 'dontDisplay'
-  //         }
-  //       }
-  //     ],
-  //     {
-  //       synchronousExecution: false,
-  //       modalBehavior: 'execute'
-  //     }
-  //   )
-  const batchPlay = require("photoshop").action.batchPlay
+    //   const result = await batchPlay(
+    //     [
+    //       {
+    //         _obj: 'set',
+    //         _target: [
+    //           {
+    //             _ref: 'channel',
+    //             _property: 'selection'
+    //           }
+    //         ],
+    //         to: {
+    //           _ref: [
+    //             {
+    //               _ref: 'channel',
+    //               _enum: 'channel',
+    //               _value: 'transparencyEnum'
+    //             },
+    //             {
+    //               _ref: 'layer',
+    //               _name: 'Group 5'
+    //             }
+    //           ]
+    //         },
+    //         _options: {
+    //           dialogOptions: 'dontDisplay'
+    //         }
+    //       }
+    //     ],
+    //     {
+    //       synchronousExecution: false,
+    //       modalBehavior: 'execute'
+    //     }
+    //   )
+    const batchPlay = require('photoshop').action.batchPlay
 
-  const result = await batchPlay(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _ref: 'channel',
+                    _enum: 'channel',
+                    _value: 'transparencyEnum',
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _ref: "channel",
-          _enum: "channel",
-          _value: "transparencyEnum",
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 }
 
 async function getSelectionInfoCommand() {
-  const result = await batchPlay(
-    [
-      {
-        _obj: "get",
-        _target: [
-          {
-            _property: "selection",
-          },
-          {
-            _ref: "document",
-            _id: app.activeDocument._id,
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'get',
+                _target: [
+                    {
+                        _property: 'selection',
+                    },
+                    {
+                        _ref: 'document',
+                        _id: app.activeDocument._id,
+                    },
+                ],
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  return result
+    return result
 }
 
 function isSelectionValid(selection) {
-  if (
-    selection && // check if the selection is defined
-    selection.hasOwnProperty("left") &&
-    selection.hasOwnProperty("right") &&
-    selection.hasOwnProperty("top") &&
-    selection.hasOwnProperty("bottom")
-  ) {
-    return true
-  }
+    if (
+        selection && // check if the selection is defined
+        selection.hasOwnProperty('left') &&
+        selection.hasOwnProperty('right') &&
+        selection.hasOwnProperty('top') &&
+        selection.hasOwnProperty('bottom')
+    ) {
+        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
+    try {
+        const selection = (await executeAsModal(getSelectionInfoCommand))[0]
+            .selection
 
-    if (isSelectionValid(selection)) {
-      let selection_info = {
-        left: selection.left._value,
-        right: selection.right._value,
-        bottom: selection.bottom._value,
-        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
+        if (isSelectionValid(selection)) {
+            let selection_info = {
+                left: selection.left._value,
+                right: selection.right._value,
+                bottom: selection.bottom._value,
+                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
+        }
+    } catch (e) {
+        console.warn('selection info error', e)
     }
-  } catch (e) {
-    console.warn("selection info error", e)
-  }
 }
 
 async function reSelectMarqueeCommand(selectionInfo) {
-  const result = await batchPlay(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _obj: 'rectangle',
+                    top: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.top,
+                    },
+                    left: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.left,
+                    },
+                    bottom: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.bottom,
+                    },
+                    right: {
+                        _unit: 'pixelsUnit',
+                        _value: selectionInfo.right,
+                    },
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _obj: "rectangle",
-          top: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.top,
-          },
-          left: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.left,
-          },
-          bottom: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.bottom,
-          },
-          right: {
-            _unit: "pixelsUnit",
-            _value: selectionInfo.right,
-          },
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 }
 async function reSelectMarqueeExe(selectionInfo) {
-  await executeAsModal(async () => {
-    await reSelectMarqueeCommand(selectionInfo)
-  })
+    await executeAsModal(async () => {
+        await reSelectMarqueeCommand(selectionInfo)
+    })
 }
 
 async function snapshot_layer() {
-  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)
-  let command = [
-    // Select All Layers current layer
-    {
-      _obj: "selectAllLayers",
-      _target: [{ _enum: "ordinal", _ref: "layer", _value: "targetEnum" }],
-    },
-    // Duplicate current layer
-    // {"ID":[459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513],"_obj":"duplicate","_target":[{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"}],"version":5},
-    {
-      ID: ids,
-      _obj: "duplicate",
-      _target: [{ _enum: "ordinal", _ref: "layer", _value: "targetEnum" }],
-      // version: 5
-    },
+    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)
+    let command = [
+        // Select All Layers current layer
+        {
+            _obj: 'selectAllLayers',
+            _target: [
+                { _enum: 'ordinal', _ref: 'layer', _value: 'targetEnum' },
+            ],
+        },
+        // Duplicate current layer
+        // {"ID":[459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513],"_obj":"duplicate","_target":[{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"}],"version":5},
+        {
+            ID: ids,
+            _obj: 'duplicate',
+            _target: [
+                { _enum: 'ordinal', _ref: 'layer', _value: 'targetEnum' },
+            ],
+            // version: 5
+        },
 
-    // Merge Layers
-    { _obj: "mergeLayersNew" },
-    // Make
-    {
-      _obj: "make",
-      at: { _enum: "channel", _ref: "channel", _value: "mask" },
-      new: { _class: "channel" },
-      using: { _enum: "userMaskEnabled", _value: "revealSelection" },
-    },
-    // Set Selection
-    {
-      _obj: "set",
-      _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
+        // Merge Layers
+        { _obj: 'mergeLayersNew' },
+        // Make
+        {
+            _obj: 'make',
+            at: { _enum: 'channel', _ref: 'channel', _value: 'mask' },
+            new: { _class: 'channel' },
+            using: { _enum: 'userMaskEnabled', _value: 'revealSelection' },
+        },
+        // Set Selection
+        {
+            _obj: 'set',
+            _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
 }
 
 async function snapshot_layerExe() {
-  try {
-    await executeAsModal(
-      async () => {
-        await snapshot_layer()
-      },
-      {
-        commandName: "Action Commands",
-      }
-    )
-  } catch (e) {
-    console.error(e)
-  }
+    try {
+        await executeAsModal(
+            async () => {
+                await snapshot_layer()
+            },
+            {
+                commandName: 'Action Commands',
+            }
+        )
+    } catch (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
+    // let newCommand =[
+    //   // snapshotLayer
 
-  //   // makeGroupCommand
+    //   // makeGroupCommand
 
-  //   // Make fill layer
-  //   {"_obj":"make","_target":[{"_ref":"contentLayer"}],"using":{"_obj":"contentLayer","type":{"_obj":"solidColorLayer","color":{"_obj":"RGBColor","blue":255.0,"grain":255.0,"red":255.0}}}},
+    //   // Make fill layer
+    //   {"_obj":"make","_target":[{"_ref":"contentLayer"}],"using":{"_obj":"contentLayer","type":{"_obj":"solidColorLayer","color":{"_obj":"RGBColor","blue":255.0,"grain":255.0,"red":255.0}}}},
 
-  // ]
+    // ]
 
-  let command = [
-    // Make fill layer
-    {
-      _obj: "make",
-      _target: [{ _ref: "contentLayer" }],
-      using: {
-        _obj: "contentLayer",
-        type: {
-          _obj: "solidColorLayer",
-          color: { _obj: "RGBColor", blue: 255.0, grain: 255.0, red: 255.0 },
+    let command = [
+        // Make fill layer
+        {
+            _obj: 'make',
+            _target: [{ _ref: 'contentLayer' }],
+            using: {
+                _obj: 'contentLayer',
+                type: {
+                    _obj: 'solidColorLayer',
+                    color: {
+                        _obj: 'RGBColor',
+                        blue: 255.0,
+                        grain: 255.0,
+                        red: 255.0,
+                    },
+                },
+            },
         },
-      },
-    },
-    // Move current layer
-    // {"_obj":"move","_target":[{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"}],"adjustment":false,"layerID":[17],"to":{"_index":7,"_ref":"layer"},"version":5},
-    // Select layer “Layer 4 copy”
-    // {"_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)
-  // await app.activeDocument.activeLayers[0].moveAbove()
-  // const layerIDs = []
-  // const to_index = await getIndexCommand(groupLayer.id)
-  // await moveToGroupCommand(to_index, layerIDs)
+        // Move current layer
+        // {"_obj":"move","_target":[{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"}],"adjustment":false,"layerID":[17],"to":{"_index":7,"_ref":"layer"},"version":5},
+        // Select layer “Layer 4 copy”
+        // {"_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)
+    // await app.activeDocument.activeLayers[0].moveAbove()
+    // const layerIDs = []
+    // const to_index = await getIndexCommand(groupLayer.id)
+    // await moveToGroupCommand(to_index, layerIDs)
 }
 
 async function fillAndGroupExe() {
-  await require("photoshop").core.executeAsModal(fillAndGroup, {
-    commandName: "Action Commands",
-  })
+    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”}
+    try {
+        // const result = await batchPlay { _obj: “exportSelectionAsFileTypePressed”}
 
-    // const destFolder = (await storage.localFileSystem.getDataFolder()).nativePath;
-    const storage = require("uxp").storage
-    const fs = storage.localFileSystem
+        // const destFolder = (await storage.localFileSystem.getDataFolder()).nativePath;
+        const storage = require('uxp').storage
+        const fs = storage.localFileSystem
 
-    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
-    //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 exportCommand = {
-      _obj: "exportSelectionAsFileTypePressed",
-      // _target: { _ref: 'layer', _enum: 'ordinal', _value: 'targetEnum' },
-      _target: {
-        _ref: "layer",
-        _enum: "ordinal",
-        _value: "targetEnum",
-        _id: id,
-      },
+        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
+        //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 exportCommand = {
+            _obj: 'exportSelectionAsFileTypePressed',
+            // _target: { _ref: 'layer', _enum: 'ordinal', _value: 'targetEnum' },
+            _target: {
+                _ref: 'layer',
+                _enum: 'ordinal',
+                _value: 'targetEnum',
+                _id: id,
+            },
 
-      fileType: "png",
-      quality: 32,
-      metadata: 0,
-      destFolder: init_images_dir.nativePath,
-      sRGB: true,
-      openWindow: false,
-      _options: { dialogOptions: "dontDisplay" },
+            fileType: 'png',
+            quality: 32,
+            metadata: 0,
+            destFolder: init_images_dir.nativePath,
+            sRGB: true,
+            openWindow: false,
+            _options: { dialogOptions: 'dontDisplay' },
+        }
+        const result = await batchPlay([exportCommand], {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        })
+
+        return result
+    } catch (e) {
+        console.error(`exportPngCommand error:, ${e}`)
     }
-    const result = await batchPlay([exportCommand], {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    })
-
-    return result
-  } catch (e) {
-    console.error(`exportPngCommand error:, ${e}`)
-  }
 }
 
 async function exportPng(session_id) {
-  console.log("exportPng() -> session_id:", session_id)
-  try {
-    const old_name = await app.activeDocument.activeLayers[0].name
-    await executeAsModal(async () => {
-      await exportPngCommand(session_id)
-    })
-    setTimeout(async () => {
-      console.log("setTimeout() -> old_name: ", old_name)
-      await executeAsModal(async () => {
-        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.log('exportPng() -> session_id:', session_id)
+    try {
+        const old_name = await app.activeDocument.activeLayers[0].name
+        await executeAsModal(async () => {
+            await exportPngCommand(session_id)
+        })
+        setTimeout(async () => {
+            console.log('setTimeout() -> old_name: ', old_name)
+            await executeAsModal(async () => {
+                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}`)
+    }
 }
 
 // await runModalFunction();
 async function setInitImage(layer, session_id) {
-  try {
-    const html_manip = require("./utility/html_manip")
-    // const layer = await app.activeDocument.activeLayers[0]
-    const old_name = layer.name
-    const sdapi = require("./sdapi")
-    // await exportPng(session_id)
-    // image_name = await app.activeDocument.activeLayers[0].name
+    try {
+        const html_manip = require('./utility/html_manip')
+        // const layer = await app.activeDocument.activeLayers[0]
+        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`
+        //convert layer name to a file name
+        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)
+        //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)
 
-    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
-  } catch (e) {
-    console.error(`psapi.js setInitImage error:, ${e}`)
-  }
+        return image_name
+    } catch (e) {
+        console.error(`psapi.js setInitImage error:, ${e}`)
+    }
 }
 async function setInitImageMask(layer, session_id) {
-  try {
-    const html_manip = require("./utility/html_manip")
+    try {
+        const html_manip = require('./utility/html_manip')
 
-    // const layer = await app.activeDocument.activeLayers[0]
-    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
-    // g_init_mask_layer = layer
-    // g_mask_related_layers = {}
-    console.log(image_name)
+        // const layer = await app.activeDocument.activeLayers[0]
+        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
+        // g_init_mask_layer = layer
+        // g_mask_related_layers = {}
+        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
-  } catch (e) {
-    console.error(`psapi.js setInitImageMask error: `, e)
-  }
+        //create viewer init image obj
+        return image_name
+    } catch (e) {
+        console.error(`psapi.js setInitImageMask error: `, e)
+    }
 }
 
 // remove the generated mask related layers from the canvas and "layers" panel
@@ -774,23 +784,23 @@ async function setInitImageMask(layer, session_id) {
 // }
 
 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)
-  for (layer of layers) {
-    try {
-      if (layer) {
-        await executeAsModal(async () => {
-          await layer.delete()
-        })
-      }
-    } catch (e) {
-      console.warn("warning attempting to a delete layer: ", e)
-      continue
+    // 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)
+    for (layer of layers) {
+        try {
+            if (layer) {
+                await executeAsModal(async () => {
+                    await layer.delete()
+                })
+            }
+        } catch (e) {
+            console.warn('warning attempting to a delete layer: ', e)
+            continue
+        }
     }
-  }
-  return []
+    return []
 }
 
 // async function cleanLayersOutpaint(layers){
@@ -823,438 +833,438 @@ 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(
-      [
-        {
-          _obj: "make",
-          new: {
-            _class: "channel",
-          },
-          at: {
-            _ref: "channel",
-            _enum: "channel",
-            _value: "mask",
-          },
-          using: {
-            _enum: "userMaskEnabled",
-            _value: "revealSelection",
-          },
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-  }
+    async function createClippingMaskCommand() {
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'make',
+                    new: {
+                        _class: 'channel',
+                    },
+                    at: {
+                        _ref: 'channel',
+                        _enum: 'channel',
+                        _value: 'mask',
+                    },
+                    using: {
+                        _enum: 'userMaskEnabled',
+                        _value: 'revealSelection',
+                    },
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
+            {
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+    }
 
-  await executeAsModal(async () => {
-    await createClippingMaskCommand()
-  })
+    await executeAsModal(async () => {
+        await createClippingMaskCommand()
+    })
 }
 
 async function checkIfSelectionAreaIsActive() {
-  try {
-    let isSelectionAreaValid = await getSelectionInfoExe()
-    return isSelectionAreaValid
-  } catch (e) {
-    console.warn(e)
-  }
+    try {
+        let isSelectionAreaValid = await getSelectionInfoExe()
+        return isSelectionAreaValid
+    } catch (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
+    async function saveUniqueDocumentIdCommand() {
+        const batchPlay = require('photoshop').action.batchPlay
 
-    const result = await batchPlay(
-      [
-        {
-          _obj: "set",
-          _target: [
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'set',
+                    _target: [
+                        {
+                            _ref: 'property',
+                            _property: 'fileInfo',
+                        },
+                        {
+                            _ref: 'document',
+                            _enum: 'ordinal',
+                            _value: 'targetEnum',
+                        },
+                    ],
+                    to: {
+                        _obj: 'fileInfo',
+                        caption: new_id,
+                        keywords: [new_id],
+                    },
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
             {
-              _ref: "property",
-              _property: "fileInfo",
-            },
-            {
-              _ref: "document",
-              _enum: "ordinal",
-              _value: "targetEnum",
-            },
-          ],
-          to: {
-            _obj: "fileInfo",
-            caption: new_id,
-            keywords: [new_id],
-          },
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-  }
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+    }
 
-  await executeAsModal(async () => {
-    await saveUniqueDocumentIdCommand()
-  })
+    await executeAsModal(async () => {
+        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
+    async function readUniqueDocumentIdCommand() {
+        const batchPlay = require('photoshop').action.batchPlay
 
-    const result = await batchPlay(
-      [
-        {
-          _obj: "get",
-          _target: [
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'get',
+                    _target: [
+                        {
+                            _ref: 'property',
+                            _property: 'fileInfo',
+                        },
+                        {
+                            _ref: 'document',
+                            _enum: 'ordinal',
+                            _value: 'targetEnum',
+                        },
+                    ],
+                    // to: {
+                    //   _obj: 'fileInfo',
+                    //   caption: new_id,
+                    //   keywords: [new_id]
+                    // },
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
             {
-              _ref: "property",
-              _property: "fileInfo",
-            },
-            {
-              _ref: "document",
-              _enum: "ordinal",
-              _value: "targetEnum",
-            },
-          ],
-          // to: {
-          //   _obj: 'fileInfo',
-          //   caption: new_id,
-          //   keywords: [new_id]
-          // },
-          _options: {
-            dialogOptions: "dontDisplay",
-          },
-        },
-      ],
-      {
-        synchronousExecution: true,
-        modalBehavior: "execute",
-      }
-    )
-    console.log("readUniqueDocumentIdCommand: result ", result)
-    return result
-  }
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+        console.log('readUniqueDocumentIdCommand: result ', result)
+        return result
+    }
 
-  let uniqueDocumentId = ""
-  try {
-    await executeAsModal(async () => {
-      uniqueDocumentId = (await readUniqueDocumentIdCommand())[0].fileInfo
-        .caption
-      if (typeof uniqueDocumentId === "string") {
-        uniqueDocumentId = uniqueDocumentId.trim()
-      }
-    })
-  } catch (e) {
-    console.warn("readUniqueDocumentIdExe: ", e)
-    uniqueDocumentId = ""
-  }
+    let uniqueDocumentId = ''
+    try {
+        await executeAsModal(async () => {
+            uniqueDocumentId = (await readUniqueDocumentIdCommand())[0].fileInfo
+                .caption
+            if (typeof uniqueDocumentId === 'string') {
+                uniqueDocumentId = uniqueDocumentId.trim()
+            }
+        })
+    } catch (e) {
+        console.warn('readUniqueDocumentIdExe: ', e)
+        uniqueDocumentId = ''
+    }
 
-  return uniqueDocumentId
+    return uniqueDocumentId
 }
 
 const readPng = async (image_name) => {
-  // image_name = 'test.png'
-  try {
-    await executeAsModal(
-      async (control) => {
-        // const tempFolder = await fs.getTemporaryFolder() ;
-        const pluginFolder = await fs.getPluginFolder()
+    // image_name = 'test.png'
+    try {
+        await executeAsModal(
+            async (control) => {
+                // const tempFolder = await fs.getTemporaryFolder() ;
+                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'
+                )
+                // 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
+                await currentDocument.saveAs.png(
+                    file,
+                    // {
+                    //   compression: 6,
+                    // },
+                    null,
+                    true
+                )
+
+                // const arrayBuffer = await file.read({format: formats.binary}) ;
+                // console.log(arrayBuffer, 'arrayBuffer') ;
+            },
+
+            { commandName: 'readPng' }
         )
-        // 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
-        await currentDocument.saveAs.png(
-          file,
-          // {
-          //   compression: 6,
-          // },
-          null,
-          true
-        )
-
-        // const arrayBuffer = await file.read({format: formats.binary}) ;
-        // console.log(arrayBuffer, 'arrayBuffer') ;
-      },
-
-      { commandName: "readPng" }
-    )
-  } catch (e) {
-    console.warn(e)
-  }
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 async function selectCanvasCommand() {
-  // const result = await batchPlay(
-  // [
-  //    {
-  //       _obj: "historyStateChanged",
-  //       documentID: 1044,
-  //       ID: 1058,
-  //       name: "Select Canvas",
-  //       hasEnglish: true,
-  //       itemIndex: 7,
-  //       commandID: 1017,
-  //       _options: {
-  //          dialogOptions: "dontDisplay"
-  //       }
-  //    }
-  // ],{
-  //    synchronousExecution: true,
-  //    modalBehavior: "execute"
-  // });
+    // const result = await batchPlay(
+    // [
+    //    {
+    //       _obj: "historyStateChanged",
+    //       documentID: 1044,
+    //       ID: 1058,
+    //       name: "Select Canvas",
+    //       hasEnglish: true,
+    //       itemIndex: 7,
+    //       commandID: 1017,
+    //       _options: {
+    //          dialogOptions: "dontDisplay"
+    //       }
+    //    }
+    // ],{
+    //    synchronousExecution: true,
+    //    modalBehavior: "execute"
+    // });
 
-  const result = await batchPlay(
-    [
-      {
-        _obj: "set",
-        _target: [
-          {
-            _ref: "channel",
-            _property: "selection",
-          },
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'set',
+                _target: [
+                    {
+                        _ref: 'channel',
+                        _property: 'selection',
+                    },
+                ],
+                to: {
+                    _enum: 'ordinal',
+                    _value: 'allEnum',
+                },
+                _options: {
+                    dialogOptions: 'dontDisplay',
+                },
+            },
         ],
-        to: {
-          _enum: "ordinal",
-          _value: "allEnum",
-        },
-        _options: {
-          dialogOptions: "dontDisplay",
-        },
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  return result
+    return result
 }
 async function selectCanvasExe() {
-  await executeAsModal(
-    async () => {
-      await selectCanvasCommand()
-    },
-    { commandName: "selectCanvasExe" }
-  )
+    await executeAsModal(
+        async () => {
+            await selectCanvasCommand()
+        },
+        { commandName: 'selectCanvasExe' }
+    )
 }
 async function newExportPng(layer, image_name, width, height) {
-  //store layers we want to export in variables
-  // let layerToExports =
-  // create new document
-  // duplicate the layers to the new documnet
-  //select the layer channel selectLayerChannelCommand
-  //document.crop
-  //export using readPng()
+    //store layers we want to export in variables
+    // let layerToExports =
+    // create new document
+    // duplicate the layers to the new documnet
+    //select the layer channel selectLayerChannelCommand
+    //document.crop
+    //export using readPng()
 
-  try {
-    //get the active layers
-    // const layersToExport = app.activeDocument.activeLayers
+    try {
+        //get the active layers
+        // const layersToExport = app.activeDocument.activeLayers
 
-    //create new document
-    // let exportDoc = await executeAsModal(app.documents.add)
-    let exportDoc
-    const makeDoc = async () => {
-      let exportDoc = await app.documents.add({
-        width: width,
-        height: height,
-        resolution: 300,
-        mode: "RGBColorMode",
-        fill: "transparent",
-      })
+        //create new document
+        // let exportDoc = await executeAsModal(app.documents.add)
+        let exportDoc
+        const makeDoc = async () => {
+            let exportDoc = await app.documents.add({
+                width: width,
+                height: height,
+                resolution: 300,
+                mode: 'RGBColorMode',
+                fill: 'transparent',
+            })
+        }
+        await executeAsModal(
+            async () => {
+                // await app.documents.add()
+                await makeDoc()
+                exportDoc = app.activeDocument
+
+                console.log('exportDoc.id: ', exportDoc.id)
+                // for (layer of layersToExport) {
+
+                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)
+                // const selection_info = await getSelectionInfoExe()
+                // await exportDoc.crop(selection_info)
+                // export_image_name = `${layer.name}.png`
+                await readPng(image_name)
+                await exportDoc.closeWithoutSaving()
+            },
+            { commandName: 'NewExportPng' }
+        )
+        // }
+    } catch (e) {
+        console.error(`newExportPng error: ,${e}`)
     }
-    await executeAsModal(
-      async () => {
-        // await app.documents.add()
-        await makeDoc()
-        exportDoc = app.activeDocument
-
-        console.log("exportDoc.id: ", exportDoc.id)
-        // for (layer of layersToExport) {
-
-        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)
-        // const selection_info = await getSelectionInfoExe()
-        // await exportDoc.crop(selection_info)
-        // export_image_name = `${layer.name}.png`
-        await readPng(image_name)
-        await exportDoc.closeWithoutSaving()
-      },
-      { commandName: "NewExportPng" }
-    )
-    // }
-  } catch (e) {
-    console.error(`newExportPng error: ,${e}`)
-  }
 }
 async function mergeVisibleCommand() {
-  const result = await batchPlay(
-    [
-      {
-        _obj: "mergeVisible",
-        duplicate: true,
-        _isCommand: true,
-        // "_options": {
-        //   // "dialogOptions": "dontDisplay"
-        // }
-      },
-    ],
-    {
-      synchronousExecution: true,
-      modalBehavior: "execute",
-    }
-  )
+    const result = await batchPlay(
+        [
+            {
+                _obj: 'mergeVisible',
+                duplicate: true,
+                _isCommand: true,
+                // "_options": {
+                //   // "dialogOptions": "dontDisplay"
+                // }
+            },
+        ],
+        {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        }
+    )
 
-  return result
+    return result
 }
 
 async function mergeVisibleExe() {
-  await executeAsModal(async () => {
-    await mergeVisibleCommand()
-  })
+    await executeAsModal(async () => {
+        await mergeVisibleCommand()
+    })
 }
 
 async function layerToSelection(selection_info) {
-  //store active layer for later
+    //store active layer for later
 
-  try {
-    //Store selection info
-    //unSelect
-    //move layer
-    //scale layer
-    //Select from selection info
-    // let selection_info = await getSelectionInfo()
+    try {
+        //Store selection info
+        //unSelect
+        //move layer
+        //scale layer
+        //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
-      return {
-        height: height,
-        width: width,
-        left: bounds.left,
-        right: bounds.right,
-        top: bounds.top,
-        bottom: bounds.bottom,
-      }
-    }
-    //scale layer
-    async function scaleLayer(layer, selection_info) {
-      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)
-    }
-
-    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)
-    }
-    // const activeLayer = await getActiveLayer()
-
-    //store all active layers
-    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
+        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
+            return {
+                height: height,
+                width: width,
+                left: bounds.left,
+                right: bounds.right,
+                top: bounds.top,
+                bottom: bounds.bottom,
+            }
         }
-      },
-      { commandName: "moveLayerExe" }
-    )
+        //scale layer
+        async function scaleLayer(layer, selection_info) {
+            console.log('scaleLayer got called')
+            // const activeLayer = getActiveLayer()
+            // const activeLayer = await app.activeDocument.activeLayers[0]
 
-    // await reselect(selection_info)
-  } catch (e) {
-    console.warn(e)
-  }
+            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)
+        }
+        // const activeLayer = await getActiveLayer()
+
+        //store all active layers
+        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
+                }
+            },
+            { commandName: 'moveLayerExe' }
+        )
+
+        // await reselect(selection_info)
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 module.exports = {
-  createSolidLayer,
-  createEmptyGroup,
-  getLayerIndex,
-  collapseGroup,
-  moveToGroupCommand,
-  MoveToGroupExe,
-  selectLayers,
-  selectLayersExe,
-  unselectActiveLayers,
-  unselectActiveLayersExe,
-  createMaskExe,
-  getSelectionInfoExe,
-  unSelectMarqueeCommand,
-  unSelectMarqueeExe,
-  reSelectMarqueeExe,
-  selectLayerChannelCommand,
-  snapshot_layer,
-  snapshot_layerExe,
-  fillAndGroupExe,
-  fastSnapshot,
-  setInitImage,
-  setInitImageMask,
-  exportPng,
-  layerToFileName,
-  layerNameToFileName,
-  // cleanLayersOutpaint,
-  // cleanLayersInpaint,
-  // cleanSnapAndFill,
-  cleanLayers,
-  createClippingMaskExe,
-  checkIfSelectionAreaIsActive,
-  selectMarqueeRectangularToolExe,
-  promptForMarqueeTool,
-  saveUniqueDocumentIdExe,
-  readUniqueDocumentIdExe,
-  newExportPng,
-  mergeVisibleExe,
-  selectCanvasExe,
-  layerToSelection,
-  isSelectionValid,
+    createSolidLayer,
+    createEmptyGroup,
+    getLayerIndex,
+    collapseGroup,
+    moveToGroupCommand,
+    MoveToGroupExe,
+    selectLayers,
+    selectLayersExe,
+    unselectActiveLayers,
+    unselectActiveLayersExe,
+    createMaskExe,
+    getSelectionInfoExe,
+    unSelectMarqueeCommand,
+    unSelectMarqueeExe,
+    reSelectMarqueeExe,
+    selectLayerChannelCommand,
+    snapshot_layer,
+    snapshot_layerExe,
+    fillAndGroupExe,
+    fastSnapshot,
+    setInitImage,
+    setInitImageMask,
+    exportPng,
+    layerToFileName,
+    layerNameToFileName,
+    // cleanLayersOutpaint,
+    // cleanLayersInpaint,
+    // cleanSnapAndFill,
+    cleanLayers,
+    createClippingMaskExe,
+    checkIfSelectionAreaIsActive,
+    selectMarqueeRectangularToolExe,
+    promptForMarqueeTool,
+    saveUniqueDocumentIdExe,
+    readUniqueDocumentIdExe,
+    newExportPng,
+    mergeVisibleExe,
+    selectCanvasExe,
+    layerToSelection,
+    isSelectionValid,
 }
diff --git a/sdapi.js b/sdapi.js
index 3f88a00..36c61a1 100644
--- a/sdapi.js
+++ b/sdapi.js
@@ -1,234 +1,234 @@
 //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 :")
-  const payload = {
-    init_image_name: init_image_name,
-  }
+    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)
-  let request = await fetch(full_url, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(payload),
-    // "body": 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: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        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)
+    // console.log(img.src)
 
-  // let img_blob =  await (await fetch(img.src)).blob()
-  // console.log("img_blob:")
-  // console.dir(img_blob)
+    // let img_blob =  await (await fetch(img.src)).blob()
+    // console.log("img_blob:")
+    // console.dir(img_blob)
 }
 
 async function requestTxt2Img(payload) {
-  try {
-    console.log("requestTxt2Img(): about to send a fetch request")
+    try {
+        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",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-      // "body": payload
-    })
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            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
-  } catch (e) {
-    console.warn(e)
-    return {}
-  }
+        return json
+    } catch (e) {
+        console.warn(e)
+        return {}
+    }
 }
 
 async function requestImg2Img(payload) {
-  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)
-    let request = await fetch(full_url, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-      // "body": payload
-    })
+    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)
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            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
-  } catch (e) {
-    console.warn(e)
-    return {}
-  }
+        return json
+    } catch (e) {
+        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)
-
-  return json
-}
-
-async function requestGetModels() {
-  console.log("requestGetModels: ")
-  let json = []
-  try {
-    const full_url = "http://127.0.0.1:8000/sdapi/v1/sd-models"
+    const full_url =
+        'http://127.0.0.1:8000/sdapi/v1/progress?skip_current_image=false'
     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)
-  }
-  return json
-}
-
-async function 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)
-
-  return json
-}
-
-async function requestSwapModel(model_title) {
-  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"
-  payload = {
-    sd_model_checkpoint: model_title,
-  }
-  let request = await fetch(full_url, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(payload),
-    // "body": payload
-  })
-
-  let json = await request.json()
-
-  console.log("models json:")
-  console.dir(json)
-
-  return json
-}
-
-async function requestInterrupt(model_title) {
-  try {
-    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"
-    // payload = {
-    //   sd_model_checkpoint: model_title
-    // }
-    payload = ""
-    let request = await fetch(full_url, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      // body: JSON.stringify(payload)
-      // "body": payload
-    })
-
-    console.log("interrupt request:", request)
     let json = await request.json()
-
-    console.log("interrupt json:")
+    console.log('progress json:')
     console.dir(json)
 
     return json
-  } catch (e) {
-    console.warn(e)
-  }
+}
+
+async function requestGetModels() {
+    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)
+    } catch (e) {
+        console.warn(`issues requesting from ${full_url}`, e)
+    }
+    return json
+}
+
+async function 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)
+
+    return json
+}
+
+async function requestSwapModel(model_title) {
+    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'
+    payload = {
+        sd_model_checkpoint: model_title,
+    }
+    let request = await fetch(full_url, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        // "body": payload
+    })
+
+    let json = await request.json()
+
+    console.log('models json:')
+    console.dir(json)
+
+    return json
+}
+
+async function requestInterrupt(model_title) {
+    try {
+        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'
+        // payload = {
+        //   sd_model_checkpoint: model_title
+        // }
+        payload = ''
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            // body: JSON.stringify(payload)
+            // "body": payload
+        })
+
+        console.log('interrupt request:', request)
+        let json = await request.json()
+
+        console.log('interrupt json:')
+        console.dir(json)
+
+        return json
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 async function getVersionRequest() {
-  // version = "v0.0.0"
-  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"]
+    // version = "v0.0.0"
+    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']
 
-    return version
-  } catch (e) {
-    console.warn(e)
-    version = "v0.0.0"
+        return version
+    } catch (e) {
+        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)
-  try {
-    payload = {
-      sd_url: new_sd_url,
+    // version = "v0.0.0"
+    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)
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        // let json = await request.json()
+        // console.log('changeSdUrl:',json)
+        console.log('changeSdUrl: request: ', request)
+    } catch (e) {
+        console.warn(e)
     }
-
-    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: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-
-    // let json = await request.json()
-    // console.log('changeSdUrl:',json)
-    console.log("changeSdUrl: request: ", request)
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 // function printTheJSONInPrettyFormat(json) {
@@ -238,177 +238,177 @@ async function changeSdUrl(new_sd_url) {
 //   // return
 // }
 async function loadHistory(uniqueDocumentId) {
-  let json = {}
-  try {
-    payload = {
-      uniqueDocumentId: uniqueDocumentId,
+    let json = {}
+    try {
+        payload = {
+            uniqueDocumentId: uniqueDocumentId,
+        }
+
+        const full_url = 'http://127.0.0.1:8000/history/load'
+
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        json = await request.json()
+        console.log('loadHistory:', json)
+        // console.log('loadPromptShortcut: request: ',request)
+    } catch (e) {
+        console.warn(e)
     }
 
-    const full_url = "http://127.0.0.1:8000/history/load"
-
-    let request = await fetch(full_url, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-
-    json = await request.json()
-    console.log("loadHistory:", json)
-    // console.log('loadPromptShortcut: request: ',request)
-  } catch (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 = {}
-  try {
-    payload = {}
+    // console.log('loadPromptShortcut:')
+    let json = {}
+    try {
+        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",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
 
-    json = await request.json()
-    console.log("loadPromptShortcut:", json)
-    // console.log('loadPromptShortcut: request: ',request)
-  } catch (e) {
-    console.warn(e)
-  }
+        json = await request.json()
+        console.log('loadPromptShortcut:', json)
+        // console.log('loadPromptShortcut: request: ',request)
+    } catch (e) {
+        console.warn(e)
+    }
 
-  return json["prompt_shortcut"]
+    return json['prompt_shortcut']
 }
 
 async function savePromptShortcut(prompt_shortcut) {
-  // console.log('loadPromptShortcut:')
-  let json = {}
-  try {
-    payload = { prompt_shortcut: prompt_shortcut }
+    // console.log('loadPromptShortcut:')
+    let json = {}
+    try {
+        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",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
 
-    json = await request.json()
-    console.log("savePromptShortcut:", json)
-    // console.log('loadPromptShortcut: request: ',request)
-  } catch (e) {
-    console.warn(e)
-  }
+        json = await request.json()
+        console.log('savePromptShortcut:', json)
+        // console.log('loadPromptShortcut: request: ',request)
+    } catch (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"
-  try {
-    payload = {
-      inpainting_mask_weight: value,
+    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: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+    } catch (e) {
+        console.warn(e)
     }
-    await fetch(full_url, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-  } catch (e) {
-    console.warn(e)
-  }
 }
 
 async function requestGetConfig() {
-  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)
-  } catch (e) {
-    console.warn(`issues requesting from ${full_url}`, e)
-  }
-  return json
+    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)
+    } catch (e) {
+        console.warn(`issues requesting from ${full_url}`, e)
+    }
+    return json
 }
 async function requestGetOptions() {
-  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)
-  } catch (e) {
-    console.warn(`issues requesting from ${full_url}`, e)
-  }
-  return json
+    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)
+    } catch (e) {
+        console.warn(`issues requesting from ${full_url}`, e)
+    }
+    return json
 }
 
 async function imageSearch(keywords) {
-  let json = {}
-  try {
-    payload = {
-      keywords: keywords,
+    let json = {}
+    try {
+        payload = {
+            keywords: keywords,
+        }
+
+        const full_url = 'http://127.0.0.1:8000/search/image/'
+
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        json = await request.json()
+        console.log('imageSearch:', json)
+
+        return json['images']
+    } catch (e) {
+        console.warn(e)
     }
-
-    const full_url = "http://127.0.0.1:8000/search/image/"
-
-    let request = await fetch(full_url, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-
-    json = await request.json()
-    console.log("imageSearch:", json)
-
-    return json["images"]
-  } catch (e) {
-    console.warn(e)
-  }
-  return []
+    return []
 }
 
 module.exports = {
-  requestTxt2Img,
-  requestImg2Img,
-  getInitImage,
-  requestProgress,
-  requestGetModels,
-  requestSwapModel,
-  requestInterrupt,
-  requestGetSamplers,
-  getVersionRequest,
-  changeSdUrl,
-  loadPromptShortcut,
-  savePromptShortcut,
-  loadHistory,
-  setInpaintMaskWeight,
-  requestGetConfig,
-  requestGetOptions,
-  imageSearch,
+    requestTxt2Img,
+    requestImg2Img,
+    getInitImage,
+    requestProgress,
+    requestGetModels,
+    requestSwapModel,
+    requestInterrupt,
+    requestGetSamplers,
+    getVersionRequest,
+    changeSdUrl,
+    loadPromptShortcut,
+    savePromptShortcut,
+    loadHistory,
+    setInpaintMaskWeight,
+    requestGetConfig,
+    requestGetOptions,
+    imageSearch,
 }
diff --git a/selection.js b/selection.js
index cf761d7..4f3db4d 100644
--- a/selection.js
+++ b/selection.js
@@ -1,56 +1,56 @@
 function finalWidthHeight(
-  selectionWidth,
-  selectionHeight,
-  minWidth,
-  minHeight
+    selectionWidth,
+    selectionHeight,
+    minWidth,
+    minHeight
 ) {
-  // const minWidth = 512
-  // const minHeight = 512
+    // const minWidth = 512
+    // const minHeight = 512
 
-  // const selectionWidth = 256
-  // const selectionHeight = 1000
+    // 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
+    if (selectionWidth <= selectionHeight) {
+        //do operation on the smaller dimension
+        const scaleRatio = selectionWidth / minWidth
 
-    finalWidth = minWidth
-    finalHeight = selectionHeight / scaleRatio
-  } else {
-    const scaleRatio = selectionHeight / minHeight
+        finalWidth = minWidth
+        finalHeight = selectionHeight / scaleRatio
+    } else {
+        const scaleRatio = selectionHeight / minHeight
 
-    finalHeight = minHeight
-    finalWidth = selectionWidth / scaleRatio
-  }
-  return [finalWidth, finalHeight]
+        finalHeight = minHeight
+        finalWidth = selectionWidth / scaleRatio
+    }
+    return [finalWidth, finalHeight]
 }
 
 async function selectionToFinalWidthHeight() {
-  const { getSelectionInfoExe } = require("./psapi")
-  try {
-    const selectionInfo = await getSelectionInfoExe()
-    const [finalWidth, finalHeight] = finalWidthHeight(
-      selectionInfo.width,
-      selectionInfo.height,
-      512,
-      512
-    )
+    const { getSelectionInfoExe } = require('./psapi')
+    try {
+        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)
-  }
+        return [
+            parseInt(finalWidth),
+            parseInt(finalHeight),
+            selectionInfo.width,
+            selectionInfo.height,
+        ]
+    } catch (e) {
+        console.warn('you need a rectangular selection', e)
+    }
 }
 
 module.exports = {
-  finalWidthHeight,
-  selectionToFinalWidthHeight,
+    finalWidthHeight,
+    selectionToFinalWidthHeight,
 }
diff --git a/utility/html_manip.js b/utility/html_manip.js
index 66b7541..8309185 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,317 +14,320 @@ 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//////////
 
 ////// Start Width//////////
 
-document.getElementById("slWidth").addEventListener("input", (evt) => {
-  const width = evt.target.value * 64
-  document.getElementById("lWidth").textContent = width
+document.getElementById('slWidth').addEventListener('input', (evt) => {
+    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}`
-  //update the label
-  document.getElementById("lWidth").innerHTML = `${width_value}`
+    document.getElementById('slWidth').value = `${width_value / 64}`
+    //update the label
+    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
+document.getElementById('slHeight').addEventListener('input', (evt) => {
+    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}`
-  //update the label
-  document.getElementById("lHeight").innerHTML = `${height_value}`
+    document.getElementById('slHeight').value = `${height_value / 64}`
+    //update the label
+    document.getElementById('lHeight').innerHTML = `${height_value}`
 }
 
 function autoFillInHRHeight(height_value) {
-  document.getElementById("hrHeight").value = `${height_value / 64}`
-  //update the label
-  document.getElementById("hHeight").innerHTML = `${height_value}`
+    document.getElementById('hrHeight').value = `${height_value / 64}`
+    //update the label
+    document.getElementById('hHeight').innerHTML = `${height_value}`
 }
 
 function autoFillInHRWidth(height_value) {
-  document.getElementById("hrWidth").value = `${height_value / 64}`
-  //update the label
-  document.getElementById("hWidth").innerHTML = `${height_value}`
+    document.getElementById('hrWidth').value = `${height_value / 64}`
+    //update the label
+    document.getElementById('hWidth').innerHTML = `${height_value}`
 }
 
 ////// End Height//////////
 
 ////// Start Denoising Strength//////////
 document
-  .querySelector("#slDenoisingStrength")
-  .addEventListener("input", (evt) => {
-    const label_value = evt.target.value / 100
-    // console.log("label_value: ", label_value)
-    document.getElementById("lDenoisingStrength").innerHTML = `${label_value}`
-  })
+    .querySelector('#slDenoisingStrength')
+    .addEventListener('input', (evt) => {
+        const label_value = evt.target.value / 100
+        // console.log("label_value: ", 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
 function autoFillInDenoisingStrength(denoising_strength_value) {
-  //sd denoising strength value range from [0,1] slider range from [0, 100]
-  //update the slider
-  document.getElementById("slDenoisingStrength").value = `${
-    denoising_strength_value * 100
-  }`
-  //update the label
-  document.getElementById(
-    "lDenoisingStrength"
-  ).innerHTML = `${denoising_strength_value}`
+    //sd denoising strength value range from [0,1] slider range from [0, 100]
+    //update the slider
+    document.getElementById('slDenoisingStrength').value = `${
+        denoising_strength_value * 100
+    }`
+    //update the label
+    document.getElementById(
+        'lDenoisingStrength'
+    ).innerHTML = `${denoising_strength_value}`
 }
 
 ////// End Denoising Strength//////////
 
 ////// Start Hi Res Fix//////////
 
-document.getElementById("chInpaintFullRes").addEventListener("click", (ev) => {
-  const inpaint_padding_slider = document.getElementById("slInpaintPadding")
+document.getElementById('chInpaintFullRes').addEventListener('click', (ev) => {
+    const inpaint_padding_slider = document.getElementById('slInpaintPadding')
 
-  if (ev.target.checked) {
-    inpaint_padding_slider.style.display = "block"
-  } else {
-    inpaint_padding_slider.style.display = "none"
-  }
+    if (ev.target.checked) {
+        inpaint_padding_slider.style.display = 'block'
+    } else {
+        inpaint_padding_slider.style.display = 'none'
+    }
 })
-document.getElementById("chHiResFixs").addEventListener("click", (ev) => {
-  const container = document.getElementById("hi-res-sliders-container")
+document.getElementById('chHiResFixs').addEventListener('click', (ev) => {
+    const container = document.getElementById('hi-res-sliders-container')
 
-  if (ev.target.checked) {
-    container.style.display = "flex"
-  } else {
-    container.style.display = "none"
-  }
+    if (ev.target.checked) {
+        container.style.display = 'flex'
+    } else {
+        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)
-  })
+    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)
+    })
 }
 
 //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}`
-  //update the label
-  document.getElementById(label_id).innerHTML = `${sd_value}`
+    //update the slider
+    document.getElementById(slider_id).value = `${sd_value * multiplier}`
+    //update the label
+    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)
-  //update the firstphase height slider and label
-  autoFillInSliderUi(firstphase_height, "hrHeight", "hHeight", 1.0 / 64)
+    //update the firstphase width slider and label
+    autoFillInSliderUi(firstphase_width, 'hrWidth', 'hWidth', 1.0 / 64)
+    //update the firstphase height slider and label
+    autoFillInSliderUi(firstphase_height, 'hrHeight', 'hHeight', 1.0 / 64)
 }
 ////// End Hi Res Fix//////////
 
 ////// Start Inpaint Mask Weight//////////
 function autoFillInInpaintMaskWeight(sd_value) {
-  //update the inpaint mask weight
-  autoFillInSliderUi(
-    sd_value,
-    "slInpaintingMaskWeight",
-    "lInpaintingMaskWeight",
-    100
-  )
+    //update the inpaint mask weight
+    autoFillInSliderUi(
+        sd_value,
+        'slInpaintingMaskWeight',
+        'lInpaintingMaskWeight',
+        100
+    )
 }
 ////// End Inpaint Mask Weight//////////
 
 ////// Start Samplers//////////
 function unCheckAllSamplers() {
-  document
-    .getElementsByClassName("rbSampler")
+    document
+        .getElementsByClassName('rbSampler')
 
-    .forEach((e) => e.removeAttribute("checked"))
+        .forEach((e) => e.removeAttribute('checked'))
 }
 
 function getSamplerElementByName(sampler_name) {
-  try {
-    //assume the sampler_name is valid
-    //return the first
-    //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
-  } catch (e) {
-    console.warn(`Sampler '${sampler_name}' not found ${e}`)
-  }
+    try {
+        //assume the sampler_name is valid
+        //return the first
+        //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
+    } catch (e) {
+        console.warn(`Sampler '${sampler_name}' not found ${e}`)
+    }
 }
 
 function getCheckedSamplerName() {
-  //we assume that the samplers exist and loaded in html
-  //return the name of the first checked sampler
-  return [...document.getElementsByClassName("rbSampler")].filter(
-    (e) => e.checked == true
-  )[0].value
+    //we assume that the samplers exist and loaded in html
+    //return the name of the first checked sampler
+    return [...document.getElementsByClassName('rbSampler')].filter(
+        (e) => e.checked == true
+    )[0].value
 }
 function getMode() {
-  return [...document.getElementsByClassName("rbMode")].filter(
-    (e) => e.checked == true
-  )[0].value
+    return [...document.getElementsByClassName('rbMode')].filter(
+        (e) => e.checked == true
+    )[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)
+    // unCheckAllSamplers()
+    checkSampler(sampler_name)
 }
 ////// End Samplers//////////
 
 ////// Start Models//////////
 
 function getModelElementByHash(model_hash) {
-  try {
-    //assume the model_hash is valid
-    //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
-  } catch (e) {
-    console.warn(`Model '${model_hash}' not found ${e}`)
-  }
+    try {
+        //assume the model_hash is valid
+        //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
+    } catch (e) {
+        console.warn(`Model '${model_hash}' not found ${e}`)
+    }
 }
 function getModelHashByTitle(model_title) {
-  //return find the model hash by it's title
-  try {
-    return [...document.getElementsByClassName("mModelMenuItem")].filter(
-      (e) => e.dataset.model_title == model_title
-    )[0].dataset.model_hash
-  } catch (e) {
-    console.warn(e)
-  }
+    //return find the model hash by it's title
+    try {
+        return [...document.getElementsByClassName('mModelMenuItem')].filter(
+            (e) => e.dataset.model_title == model_title
+        )[0].dataset.model_hash
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 function getSelectedModelHash() {
-  //return the hash of the first selected model menu item
-  try {
-    return [...document.getElementsByClassName("mModelMenuItem")].filter(
-      (e) => e.selected == true
-    )[0].dataset.model_hash
-  } catch (e) {
-    console.warn(e)
-  }
+    //return the hash of the first selected model menu item
+    try {
+        return [...document.getElementsByClassName('mModelMenuItem')].filter(
+            (e) => e.selected == true
+        )[0].dataset.model_hash
+    } catch (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.
-  const model_title = model_element.dataset.model_title
-  return model_title
+    // unCheckAllSamplers()
+    model_element = getModelElementByHash(model_hash)
+    selectModelUi(model_hash)
+    // model_element.
+    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()
-  buttons.forEach((button) => {
-    button.classList.add(addClassName)
-    button.classList.remove(removeClassName)
-  })
+    const buttons = getGenerateButtonsElements()
+    buttons.forEach((button) => {
+        button.classList.add(addClassName)
+        button.classList.remove(removeClassName)
+    })
 }
 
 ////// End Generate Buttons //////////
@@ -332,260 +335,262 @@ 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 //////////
 
 ////// Start Reset Settings Button //////////
 
 const defaultSettings = {
-  model: null,
-  prompt_shortcut: null,
-  positive_prompt: "",
-  negative_prompt: "",
-  selection_mode: null,
-  batch_number: 1,
-  steps: 20,
-  width: 512,
-  height: 512,
-  firstphase_width: 512,
-  firstphase_height: 512,
-  cfg: 7,
-  denoising_strength: 0.7,
-  hi_res_denoising_strength: 0.7,
-  mask_blur: 8,
-  inpaint_at_full_res: false,
-  hi_res_fix: false,
-  inpaint_padding: 0,
-  seed: -1,
-  samplers: null,
-  mask_content: null,
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: '',
+    negative_prompt: '',
+    selection_mode: null,
+    batch_number: 1,
+    steps: 20,
+    width: 512,
+    height: 512,
+    firstphase_width: 512,
+    firstphase_height: 512,
+    cfg: 7,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: 0.7,
+    mask_blur: 8,
+    inpaint_at_full_res: false,
+    hi_res_fix: false,
+    inpaint_padding: 0,
+    seed: -1,
+    samplers: null,
+    mask_content: null,
 }
 
-document.getElementById("btnResetSettings").addEventListener("click", () => {
-  autoFillDefaultSettings(defaultSettings)
+document.getElementById('btnResetSettings').addEventListener('click', () => {
+    autoFillDefaultSettings(defaultSettings)
 })
-document.getElementById("btnSnapshot").addEventListener("click", async () => {
-  await psapi.snapshot_layerExe()
+document.getElementById('btnSnapshot').addEventListener('click', async () => {
+    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"])
-    autoFillInHiResFixs(
-      settings["firstphase_width"],
-      settings["firstphase_height"]
-    )
-    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("chInpaintFullRes").checked =
-      settings["inpaint_at_full_res"]
-    setHiResFixs(settings["hi_res_fix"])
-    document.getElementById("tiSeed").value = String(settings["seed"])
-  } catch (e) {
-    console.warn(e)
-  }
+    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'])
+        autoFillInHiResFixs(
+            settings['firstphase_width'],
+            settings['firstphase_height']
+        )
+        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('chInpaintFullRes').checked =
+            settings['inpaint_at_full_res']
+        setHiResFixs(settings['hi_res_fix'])
+        document.getElementById('tiSeed').value = String(settings['seed'])
+    } catch (e) {
+        console.warn(e)
+    }
 }
 ////// End Reset Settings Button //////////
 
 function getMaskBlur() {
-  const isDisabled = document
-    .getElementById("slMaskBlur")
-    .hasAttribute("disabled")
-  let mask_blur = 0
-  if (isDisabled) {
-    mask_blur = 0
-  } else {
-    mask_blur = document.getElementById("slMaskBlur").value
-  }
-  return mask_blur
+    const isDisabled = document
+        .getElementById('slMaskBlur')
+        .hasAttribute('disabled')
+    let mask_blur = 0
+    if (isDisabled) {
+        mask_blur = 0
+    } else {
+        mask_blur = document.getElementById('slMaskBlur').value
+    }
+    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
-  if (isChecked) {
-    document.getElementById("slMaskBlur").setAttribute("disabled")
-  } else {
-    document.getElementById("slMaskBlur").removeAttribute("disabled")
-  }
+document.getElementById('chUseSharpMask').addEventListener('change', (ev) => {
+    const isChecked = ev.target.checked
+    if (isChecked) {
+        document.getElementById('slMaskBlur').setAttribute('disabled')
+    } else {
+        document.getElementById('slMaskBlur').removeAttribute('disabled')
+    }
 })
 
-document.getElementById("chUseSmartObject").addEventListener("change", (ev) => {
-  const isChecked = ev.target.checked
-  if (isChecked) {
-    g_b_use_smart_object = true
-  } else {
-    g_b_use_smart_object = false
-  }
+document.getElementById('chUseSmartObject').addEventListener('change', (ev) => {
+    const isChecked = ev.target.checked
+    if (isChecked) {
+        g_b_use_smart_object = true
+    } else {
+        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
+    //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
 }
 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
+    //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
 }
 
 ////start selection mode/////
 function getSelectionMode() {
-  return [...document.getElementsByClassName("rbSelectionMode")].filter(
-    (e) => e.checked == true
-  )[0].value
+    return [...document.getElementsByClassName('rbSelectionMode')].filter(
+        (e) => e.checked == true
+    )[0].value
 }
 function getMaskContent() {
-  return [...document.getElementsByClassName("rbMaskContent")].filter(
-    (e) => e.checked == true
-  )[0].value
+    return [...document.getElementsByClassName('rbMaskContent')].filter(
+        (e) => e.checked == true
+    )[0].value
 }
 function setMaskContent(value) {
-  try {
-    //assume the sampler_name is valid
-    //return the first
-    //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
-  } catch (e) {
-    console.warn(e)
-  }
+    try {
+        //assume the sampler_name is valid
+        //return the first
+        //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
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 function addHistoryButtonsHtml(img_html) {
-  // Create new container element
-  const container = document.createElement("div")
+    // Create new container element
+    const container = document.createElement('div')
 
-  container.className = "viewer-image-container"
+    container.className = 'viewer-image-container'
 
-  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 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')
 
-  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.innerHTML = "Button";
+    // Create button element
+    // const button = document.createElement('sp-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)
-  })
+    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)
+    })
 
-  // Append elements to container
-  container.appendChild(img_html)
-  container.appendChild(button)
+    // Append elements to container
+    container.appendChild(img_html)
+    container.appendChild(button)
 
-  return container
+    return container
 }
 
 ///end selection mode////
 module.exports = {
-  getPrompt,
-  autoFillInPrompt,
-  getNegativePrompt,
-  autoFillInNegativePrompt,
-  getDenoisingStrength,
-  autoFillInDenoisingStrength,
-  getWidth,
-  autoFillInWidth,
-  getHeight,
-  autoFillInHeight,
-  getSliderSdValue,
-  autoFillInHiResFixs,
-  getHiResFixs,
-  setHiResFixs,
-  autoFillInSliderUi,
-  getCheckedSamplerName,
-  autoFillInSampler,
-  autoFillInModel,
-  getMode,
-  setInitImageSrc,
-  setInitImageMaskSrc,
-  setGenerateButtonsColor,
-  setAutomaticStatus,
-  setProxyServerStatus,
-  defaultSettings,
-  autoFillDefaultSettings,
-  autoFillSettings,
-  getMaskBlur,
-  getUseSharpMask,
-  autoFillInHRHeight,
-  autoFillInHRWidth,
-  getPromptShortcut,
-  setPromptShortcut,
-  getModelHashByTitle,
-  getSelectionMode,
-  autoFillInInpaintMaskWeight,
-  autoFillInSteps,
-  getSteps,
-  getBatchNumber,
-  autoFillInBatchNumber,
-  getHrWidth,
-  getHrHeight,
-  setCFG,
-  getCFG,
-  getMaskContent,
-  setMaskContent,
-  addHistoryButtonsHtml,
+    getPrompt,
+    autoFillInPrompt,
+    getNegativePrompt,
+    autoFillInNegativePrompt,
+    getDenoisingStrength,
+    autoFillInDenoisingStrength,
+    getWidth,
+    autoFillInWidth,
+    getHeight,
+    autoFillInHeight,
+    getSliderSdValue,
+    autoFillInHiResFixs,
+    getHiResFixs,
+    setHiResFixs,
+    autoFillInSliderUi,
+    getCheckedSamplerName,
+    autoFillInSampler,
+    autoFillInModel,
+    getMode,
+    setInitImageSrc,
+    setInitImageMaskSrc,
+    setGenerateButtonsColor,
+    setAutomaticStatus,
+    setProxyServerStatus,
+    defaultSettings,
+    autoFillDefaultSettings,
+    autoFillSettings,
+    getMaskBlur,
+    getUseSharpMask,
+    autoFillInHRHeight,
+    autoFillInHRWidth,
+    getPromptShortcut,
+    setPromptShortcut,
+    getModelHashByTitle,
+    getSelectionMode,
+    autoFillInInpaintMaskWeight,
+    autoFillInSteps,
+    getSteps,
+    getBatchNumber,
+    autoFillInBatchNumber,
+    getHrWidth,
+    getHrHeight,
+    setCFG,
+    getCFG,
+    getMaskContent,
+    setMaskContent,
+    addHistoryButtonsHtml,
 }
diff --git a/utility/layer.js b/utility/layer.js
index c34bb95..f7b4b46 100644
--- a/utility/layer.js
+++ b/utility/layer.js
@@ -1,110 +1,110 @@
-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 executeAsModal(async () => {
+        await createNewLayerCommand(layerName)
+    })
+    const new_layer = await app.activeDocument.activeLayers[0]
+    return new_layer
 }
 
 async function createNewLayerCommand(layerName) {
-  return await app.activeDocument.createLayer({
-    name: layerName,
-    opacity: 100,
-    mode: "normal",
-  })
+    return await app.activeDocument.createLayer({
+        name: layerName,
+        opacity: 100,
+        mode: 'normal',
+    })
 }
 
 async function deleteLayers(layers) {
-  try {
-    await cleanLayers(layers)
-  } catch (e) {
-    console.warn(e)
-  }
+    try {
+        await cleanLayers(layers)
+    } catch (e) {
+        console.warn(e)
+    }
 }
 
 async function getIndexCommand() {
-  const command = {
-    _obj: "get",
-    _target: [
-      {
-        _property: "itemIndex",
-      },
-      {
-        _ref: "layer",
-        _enum: "ordinal",
-        _value: "targetEnum",
-      },
-    ],
-  }
-  const result = await batchPlay([command], {
-    synchronousExecution: true,
-    modalBehavior: "execute",
-  })
+    const command = {
+        _obj: 'get',
+        _target: [
+            {
+                _property: 'itemIndex',
+            },
+            {
+                _ref: 'layer',
+                _enum: 'ordinal',
+                _value: 'targetEnum',
+            },
+        ],
+    }
+    const result = await batchPlay([command], {
+        synchronousExecution: true,
+        modalBehavior: 'execute',
+    })
 
-  return result
+    return result
 }
 
 async function getIndexExe() {
-  let index
-  await executeAsModal(async () => {
-    index = await getIndexCommand()
-  })
+    let index
+    await executeAsModal(async () => {
+        index = await getIndexCommand()
+    })
 
-  return index
+    return index
 }
-const photoshop = require("photoshop")
+const photoshop = require('photoshop')
 
 const collapseFolderCommand = async (expand = false, recursive = false) => {
-  let result
-  try {
-    result = await batchPlay(
-      [
-        {
-          _obj: "set",
-          _target: {
-            _ref: [
-              { _property: "layerSectionExpanded" },
-              {
-                _ref: "layer",
-                _enum: "ordinal",
-                _value: "targetEnum",
-              },
+    let result
+    try {
+        result = await batchPlay(
+            [
+                {
+                    _obj: 'set',
+                    _target: {
+                        _ref: [
+                            { _property: 'layerSectionExpanded' },
+                            {
+                                _ref: 'layer',
+                                _enum: 'ordinal',
+                                _value: 'targetEnum',
+                            },
+                        ],
+                    },
+                    to: expand,
+                    recursive,
+                    _options: { dialogOptions: 'dontDisplay' },
+                },
             ],
-          },
-          to: expand,
-          recursive,
-          _options: { dialogOptions: "dontDisplay" },
-        },
-      ],
-      { synchronousExecution: true }
-    )
-  } catch (e) {
-    console.error(e.message)
-  }
-  return result
+            { synchronousExecution: true }
+        )
+    } catch (e) {
+        console.error(e.message)
+    }
+    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
-      })
-    } catch (e) {
-      console.warn(e)
+    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
+            })
+        } catch (e) {
+            console.warn(e)
+        }
     }
-  }
 }
 
 module.exports = {
-  createNewLayerExe,
-  deleteLayers,
-  getIndexExe,
-  collapseFolderExe,
+    createNewLayerExe,
+    deleteLayers,
+    getIndexExe,
+    collapseFolderExe,
 }
diff --git a/utility/presets/preset.js b/utility/presets/preset.js
index ae18b77..1879ffb 100644
--- a/utility/presets/preset.js
+++ b/utility/presets/preset.js
@@ -1,109 +1,109 @@
 let settings = {
-  model: null,
-  prompt_shortcut: null,
-  positive_prompt: null,
-  negative_prompt: null,
-  selection_mode: null,
-  batch_number: null,
-  steps: null,
-  width: null,
-  height: null,
-  firstphase_width: null,
-  firstphase_height: null,
-  cfg: null,
-  denoising_strength: null,
-  hi_res_denoising_strength: null,
-  mask_blur: null,
-  inpaint_at_full_res: null,
-  hi_res_fix: null,
-  inpaint_padding: null,
-  seed: null,
-  samplers: null,
-  mask_content: null,
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    selection_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: null,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: null,
 }
 
 let LatentNoiseSettings = {
-  model: null,
-  prompt_shortcut: null,
-  positive_prompt: null,
-  negative_prompt: null,
-  generation_mode: null,
-  batch_number: null,
-  steps: null,
-  width: null,
-  height: null,
-  firstphase_width: null,
-  firstphase_height: null,
-  cfg: null,
-  denoising_strength: 0.92,
-  hi_res_denoising_strength: null,
-  mask_blur: null,
-  inpaint_at_full_res: null,
-  hi_res_fix: null,
-  inpaint_padding: null,
-  seed: null,
-  samplers: null,
-  mask_content: "2",
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.92,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '2',
 }
 
 let FillSettings = {
-  model: null,
-  prompt_shortcut: null,
-  positive_prompt: null,
-  negative_prompt: null,
-  generation_mode: null,
-  batch_number: null,
-  steps: null,
-  width: null,
-  height: null,
-  firstphase_width: null,
-  firstphase_height: null,
-  cfg: null,
-  denoising_strength: 0.7,
-  hi_res_denoising_strength: null,
-  mask_blur: null,
-  inpaint_at_full_res: null,
-  hi_res_fix: null,
-  inpaint_padding: null,
-  seed: null,
-  samplers: null,
-  mask_content: "0",
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '0',
 }
 let OriginalSettings = {
-  model: null,
-  prompt_shortcut: null,
-  positive_prompt: null,
-  negative_prompt: null,
-  generation_mode: null,
-  batch_number: null,
-  steps: null,
-  width: null,
-  height: null,
-  firstphase_width: null,
-  firstphase_height: null,
-  cfg: null,
-  denoising_strength: 0.7,
-  hi_res_denoising_strength: null,
-  mask_blur: null,
-  inpaint_at_full_res: null,
-  hi_res_fix: null,
-  inpaint_padding: null,
-  seed: null,
-  samplers: null,
-  mask_content: "1",
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '1',
 }
 
 function nullAllSettings() {}
 
 class Preset {
-  constructor() {}
+    constructor() {}
 
-  loadPresetFromJson(preset_path) {}
-  savePresetToJson(preset_path, settings) {}
+    loadPresetFromJson(preset_path) {}
+    savePresetToJson(preset_path, settings) {}
 }
 
 module.exports = {
-  LatentNoiseSettings,
-  FillSettings,
-  OriginalSettings,
+    LatentNoiseSettings,
+    FillSettings,
+    OriginalSettings,
 }
diff --git a/utility/sd_scripts/horde.js b/utility/sd_scripts/horde.js
index 9142c64..6e3f320 100644
--- a/utility/sd_scripts/horde.js
+++ b/utility/sd_scripts/horde.js
@@ -1,103 +1,105 @@
 async function requestModelsHorde() {
-  //get the models list from url
-  // https://stablehorde.net/api/v2/status/models
+    //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
+    // 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
 
-  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()
-    // const models_menu_element = document.getElementById('mModelsMenu')
-    // models_menu_element.value = ""
-    //(optional): sort the models
+    try {
+        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
-    })
-    // 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)
-    for (let model of g_models_horde) {
-      console.log(model.name, model.count)
-      const model_html_tile = `${model.name}: ${model.count}`
-      const model_item_element = addHordeModelMenuItem(
-        model_html_tile,
-        model.name
-      )
+        g_models_horde.sort(function (a, b) {
+            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)
+        for (let model of g_models_horde) {
+            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)
+            document
+                .getElementById('mModelsMenuHorde')
+                .appendChild(model_item_element)
+        }
+    } catch (e) {
+        console.warn(e)
     }
-  } catch (e) {
-    console.warn(e)
-  }
 }
 function getModelHorde() {
-  return [...document.getElementsByClassName("mModelMenuItemHorde")].filter(
-    (e) => e.selected == true
-  )[0].dataset.name
+    return [...document.getElementsByClassName('mModelMenuItemHorde')].filter(
+        (e) => e.selected == true
+    )[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)
-  const script_args_json = {
-    model: model,
-    nsfw: b_nsfw,
-    shared_laion: b_shared_laion,
-    seed_variation: seed_variation,
-    post_processing_1: "None",
-    post_processing_2: "None",
-    post_processing_3: "None",
-  }
-  const script_args = Object.values(script_args_json)
-  return script_args
+    let seed_variation = document.getElementById('slSeedVariation').value
+    seed_variation = parseInt(seed_variation)
+    const script_args_json = {
+        model: model,
+        nsfw: b_nsfw,
+        shared_laion: b_shared_laion,
+        seed_variation: seed_variation,
+        post_processing_1: 'None',
+        post_processing_2: 'None',
+        post_processing_3: 'None',
+    }
+    const script_args = Object.values(script_args_json)
+    return script_args
 }
 
 document
-  .getElementById("btnRefreshModelsHorde")
-  .addEventListener("click", async () => {
-    await refreshModelsHorde()
-  })
+    .getElementById('btnRefreshModelsHorde')
+    .addEventListener('click', async () => {
+        await refreshModelsHorde()
+    })
 
-const script_name = "Run on Stable Horde"
+const script_name = 'Run on Stable Horde'
 
 refreshModelsHorde() //refresh the model when importing the script
 
 module.exports = {
-  requestModelsHorde,
-  refreshModelsHorde,
-  getModelHorde,
-  getUseHorde,
-  getScriptArgs,
-  script_name,
+    requestModelsHorde,
+    refreshModelsHorde,
+    getModelHorde,
+    getUseHorde,
+    getScriptArgs,
+    script_name,
 }
diff --git a/utility/sdapi/config.js b/utility/sdapi/config.js
index 22c5167..fed3971 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
-  }
-
-  async getConfig() {
-    try {
-      this.config = await sdapi.requestGetConfig()
-      return this.config
-    } catch (e) {
-      console.warn(e)
+    constructor() {
+        this.config //store sd options
     }
-  }
-  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)
-      for (let comp of this.config.components) {
-        if (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
-          }
+
+    async getConfig() {
+        try {
+            this.config = await sdapi.requestGetConfig()
+            return this.config
+        } catch (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)
+            for (let comp of this.config.components) {
+                if (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('upscaler_comp: ', upscaler_comp)
+            const upscalers = upscaler_comp.props.choices
+
+            return upscalers
+        } catch (e) {
+            console.warn(e)
         }
-      }
-      console.log("upscaler_comp: ", upscaler_comp)
-      const upscalers = upscaler_comp.props.choices
-
-      return upscalers
-    } catch (e) {
-      console.warn(e)
     }
-  }
 }
 
 module.exports = {
-  SdConfig,
+    SdConfig,
 }
diff --git a/utility/sdapi/options.js b/utility/sdapi/options.js
index a412417..1399664 100644
--- a/utility/sdapi/options.js
+++ b/utility/sdapi/options.js
@@ -1,39 +1,39 @@
-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
-  }
-
-  async getOptions() {
-    try {
-      // if (this.status) {
-      //   return this.options
-      // } else {
-      //   this.options = await sdapi.requestGetOptions()
-      //   if (this.options) {
-      //     this.status = true
-      //   }
-      // }
-      this.options = await sdapi.requestGetOptions()
-      return this.options
-    } catch (e) {
-      console.warn(e)
+    constructor() {
+        // this.status = false // true if we have a valid copy of sd options, false otherwise
+        this.options //store sd options
+    }
+
+    async getOptions() {
+        try {
+            // if (this.status) {
+            //   return this.options
+            // } else {
+            //   this.options = await sdapi.requestGetOptions()
+            //   if (this.options) {
+            //     this.status = true
+            //   }
+            // }
+            this.options = await sdapi.requestGetOptions()
+            return this.options
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    getCurrentModel() {
+        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
     }
-  }
-  getCurrentModel() {
-    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 sd_options = new SdOptions()
 // sd_options.option?.sd_model_checkpoint
 
 module.exports = {
-  SdOptions,
+    SdOptions,
 }
diff --git a/utility/session.js b/utility/session.js
index 7c97c4a..24df85b 100644
--- a/utility/session.js
+++ b/utility/session.js
@@ -1,148 +1,153 @@
-const { cleanLayers } = require("../psapi")
+const { cleanLayers } = require('../psapi')
 
 const SessionState = {
-  Active: "active",
-  Inactive: "inactive",
+    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
+    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
-  }
-  isActive() {
-    return this.state === SessionState["Active"]
-  }
-  isInactive() {
-    return this.state === SessionState["Inactive"]
-  }
-  activate() {
-    this.state = SessionState["Active"]
-  }
-  deactivate() {
-    this.state = SessionState["Inactive"]
-  }
-  name() {
-    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
-
-    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)
-    } catch (e) {
-      console.warn(e)
+    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
     }
-  }
-  async endSession(garbage_collection_state) {
-    try {
-      this.state = SessionState["Inactive"] // end the session by deactivate it
-
-      this.deactivate()
-
-      if (garbage_collection_state === GarbageCollectionState["Accept"]) {
-        await acceptAll()
-      } else if (
-        garbage_collection_state === GarbageCollectionState["Discard"]
-      ) {
-        //this should be 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
-      } else if (
-        garbage_collection_state === GarbageCollectionState["AcceptSelected"]
-      ) {
-        //this should be discardAllExcept(selectedLayers)
-        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
-      // const is_visible = await this.outputGroup.visible
-      await util_layer.collapseFolderExe([this.outputGroup], false) // close the folder group
-      // this.outputGroup.visible = is_visible
-
-      if (
-        this.mode === generationMode["Inpaint"] &&
-        g_sd_mode === generationMode["Inpaint"]
-      ) {
-        //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()
-      }
-    } catch (e) {
-      console.warn(e)
+    isActive() {
+        return this.state === SessionState['Active']
     }
-  }
-  async closePreviousOutputGroup() {
-    try {
-      //close the previous output folder
+    isInactive() {
+        return this.state === SessionState['Inactive']
+    }
+    activate() {
+        this.state = SessionState['Active']
+    }
+    deactivate() {
+        this.state = SessionState['Inactive']
+    }
+    name() {
+        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
 
-      if (this.prevOutputGroup) {
-        // const is_visible = await this.prevOutputGroup.visible
-        await util_layer.collapseFolderExe([this.prevOutputGroup], false) // close the folder group
-        // and reselect the current output folder for clarity
-        await psapi.selectLayersExe([this.outputGroup])
-        // this.prevOutputGroup.visible = is_visible
-      }
-    } catch (e) {
-      console.warn(e)
+        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)
+        } catch (e) {
+            console.warn(e)
+        }
     }
-  }
-  isSameMode(selected_mode) {
-    if (this.mode === selected_mode) {
-      return true
+    async endSession(garbage_collection_state) {
+        try {
+            this.state = SessionState['Inactive'] // end the session by deactivate it
+
+            this.deactivate()
+
+            if (garbage_collection_state === GarbageCollectionState['Accept']) {
+                await acceptAll()
+            } else if (
+                garbage_collection_state === GarbageCollectionState['Discard']
+            ) {
+                //this should be 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
+            } else if (
+                garbage_collection_state ===
+                GarbageCollectionState['AcceptSelected']
+            ) {
+                //this should be discardAllExcept(selectedLayers)
+                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
+            // const is_visible = await this.outputGroup.visible
+            await util_layer.collapseFolderExe([this.outputGroup], false) // close the folder group
+            // this.outputGroup.visible = is_visible
+
+            if (
+                this.mode === generationMode['Inpaint'] &&
+                g_sd_mode === generationMode['Inpaint']
+            ) {
+                //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()
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    async closePreviousOutputGroup() {
+        try {
+            //close the previous output folder
+
+            if (this.prevOutputGroup) {
+                // const is_visible = await this.prevOutputGroup.visible
+                await util_layer.collapseFolderExe(
+                    [this.prevOutputGroup],
+                    false
+                ) // close the folder group
+                // and reselect the current output folder for clarity
+                await psapi.selectLayersExe([this.outputGroup])
+                // this.prevOutputGroup.visible = is_visible
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    isSameMode(selected_mode) {
+        if (this.mode === selected_mode) {
+            return true
+        }
+        return false
+    }
+    loadLastSession() {
+        //load the last session from the server
+    }
+    saveCurrentSession() {
+        //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
+        await executeAsModal(async () => {
+            await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
+        })
     }
-    return false
-  }
-  loadLastSession() {
-    //load the last session from the server
-  }
-  saveCurrentSession() {
-    //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
-    await executeAsModal(async () => {
-      await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
-    })
-  }
 }
 
 module.exports = {
-  GenerationSession,
-  GarbageCollectionState,
-  SessionState,
+    GenerationSession,
+    GarbageCollectionState,
+    SessionState,
 }
diff --git a/utility/tips.js b/utility/tips.js
index 83efd69..0e7d5c6 100644
--- a/utility/tips.js
+++ b/utility/tips.js
@@ -1,40 +1,40 @@
 //tips that will display when you hover over a html element
 const tips_json = {
-  snapshot: "",
-  txt2img: "use this mode to generate images from text only",
-  img2img: "use this mode to generate variation of an image",
-  inpaint:
-    "use this mode to generate variation of a small area of an image, while keeping the rest of the image intact",
-  outpaint:
-    "use this mode to (1) fill any missing area of an image,(2) expand an image",
-  generate: "create",
-  discardAll: "Delete all generated images from the canvas",
-  acceptAll: "Keep all generated images on the canvas",
-  acceptSelected: "Keep only the highlighted images",
-  discardSelected: "Delete only the highlighted images",
-  modelMenu: "select a model",
-  refresh: "Refresh the plugin, only fixes minor issues.",
-  prompt_shortcut: "use {keyword} form the prompts library",
-  inpaint: "use when you need to modify an already existing part of an image",
-  img2img: "use this mode when you want to generate variation of an image",
-  txt2img: "use this mode to generate images based on text only",
-  batchNumber:
-    "the number of images to generate at once.The larger the number more VRAM stable diffusion will use.",
-  steps: "how long should stable diffusion take to generate an image",
-  selection_mode_ratio:
-    "will auto fill the width and height slider to the same ratio as the selection area",
-  selection_mode_precise:
-    "auto fill width and height slider to the size as the selection area",
-  selection_mode_ignore:
-    "you will have to fill the width and height slider manually",
-  cfg_scale: "larger value will put more emphasis on the prompt",
-  preset_menu:
-    "auto fill the plugin with smart settings, to speed up your working process.",
-  width: "the generated image width",
-  height: "the generated image height",
-  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: "",
+    snapshot: '',
+    txt2img: 'use this mode to generate images from text only',
+    img2img: 'use this mode to generate variation of an image',
+    inpaint:
+        'use this mode to generate variation of a small area of an image, while keeping the rest of the image intact',
+    outpaint:
+        'use this mode to (1) fill any missing area of an image,(2) expand an image',
+    generate: 'create',
+    discardAll: 'Delete all generated images from the canvas',
+    acceptAll: 'Keep all generated images on the canvas',
+    acceptSelected: 'Keep only the highlighted images',
+    discardSelected: 'Delete only the highlighted images',
+    modelMenu: 'select a model',
+    refresh: 'Refresh the plugin, only fixes minor issues.',
+    prompt_shortcut: 'use {keyword} form the prompts library',
+    inpaint: 'use when you need to modify an already existing part of an image',
+    img2img: 'use this mode when you want to generate variation of an image',
+    txt2img: 'use this mode to generate images based on text only',
+    batchNumber:
+        'the number of images to generate at once.The larger the number more VRAM stable diffusion will use.',
+    steps: 'how long should stable diffusion take to generate an image',
+    selection_mode_ratio:
+        'will auto fill the width and height slider to the same ratio as the selection area',
+    selection_mode_precise:
+        'auto fill width and height slider to the size as the selection area',
+    selection_mode_ignore:
+        'you will have to fill the width and height slider manually',
+    cfg_scale: 'larger value will put more emphasis on the prompt',
+    preset_menu:
+        'auto fill the plugin with smart settings, to speed up your working process.',
+    width: 'the generated image width',
+    height: 'the generated image height',
+    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 }
diff --git a/utility/ui.js b/utility/ui.js
index 42a0b23..263e8a7 100644
--- a/utility/ui.js
+++ b/utility/ui.js
@@ -1,103 +1,105 @@
-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() {}
+    constructor() {}
 
-  onStartSessionUI() {
-    // will toggle the buttons needed when a generation session start
+    onStartSessionUI() {
+        // will toggle the buttons needed when a generation session start
 
-    const accept_class_btns = Array.from(
-      document.getElementsByClassName("acceptClass")
-    )
+        const accept_class_btns = Array.from(
+            document.getElementsByClassName('acceptClass')
+        )
 
-    const discard_class_btns = Array.from(
-      document.getElementsByClassName("discardClass")
-    )
+        const discard_class_btns = Array.from(
+            document.getElementsByClassName('discardClass')
+        )
 
-    const discard_selected_class_btns = Array.from(
-      document.getElementsByClassName("discardSelectedClass")
-    )
+        const discard_selected_class_btns = Array.from(
+            document.getElementsByClassName('discardSelectedClass')
+        )
 
-    const accept_selected_class_btns = Array.from(
-      document.getElementsByClassName("acceptSelectedClass")
-    )
+        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")
-    )
+        //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()
-  }
-  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")
-  }
-  generateMoreUI() {
-    const generate_btns = Array.from(
-      document.getElementsByClassName("btnGenerateClass")
-    )
-    generate_btns.forEach((element) => {
-      element.textContent = `Generate More`
-    })
-    html_manip.setGenerateButtonsColor("generate-more", "generate")
-  }
+        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')
+    }
+    generateMoreUI() {
+        const generate_btns = Array.from(
+            document.getElementsByClassName('btnGenerateClass')
+        )
+        generate_btns.forEach((element) => {
+            element.textContent = `Generate More`
+        })
+        html_manip.setGenerateButtonsColor('generate-more', 'generate')
+    }
 
-  onEndSessionUI() {
-    const accept_class_btns = Array.from(
-      document.getElementsByClassName("acceptClass")
-    )
+    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 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")
-    )
+        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"))
-    discard_selected_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")
-    )
+        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
-    })
-  }
+    setGenerateBtnText(textContent) {
+        const generate_btns = Array.from(
+            document.getElementsByClassName('btnGenerateClass')
+        )
+        generate_btns.forEach((element) => {
+            element.textContent = textContent
+        })
+    }
 }
 
 // const defaultSettings = {
@@ -125,126 +127,131 @@ class UI {
 //   }
 
 class UIElement {
-  constructor() {
-    this.name
-    this.html_elem
-    this.sd_value
-  }
-  setValue() {}
-  getValue() {}
+    constructor() {
+        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
-  constructor() {
-    // this.width = new ui.UIElement()
-    // this.width.getValue = html_manip.getWidth
-    // this.width.setValue = html_manip.autoFillInWidth
-    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.denoising_strength = createUIElement(
-      html_manip.getDenoisingStrength,
-      html_manip.autoFillInDenoisingStrength
-    )
+    // get and set the settings of the ui. the stable diffusion settings not the human friendly settings
+    constructor() {
+        // this.width = new ui.UIElement()
+        // this.width.getValue = html_manip.getWidth
+        // this.width.setValue = html_manip.autoFillInWidth
+        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.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,
-      // positive_prompt: "",
-      // negative_prompt: "",
-      // selection_mode: null,
-      batch_number: this.batch_number,
-      steps: this.steps,
-      width: this.width,
-      height: this.height,
-      firstphase_width: this.firstphase_width,
-      firstphase_height: this.firstphase_height,
-      cfg: this.cfg,
-      denoising_strength: this.denoising_strength,
-      // hi_res_denoising_strength:0.7,
-      // mask_blur: 8,
-      // inpaint_at_full_res: false,
-      // hi_res_fix:false,
-      // inpaint_padding:0,
-      // seed:-1,
-      // samplers: null,
-      mask_content: this.mask_content,
+        this.mask_content = createUIElement(
+            html_manip.getMaskContent,
+            html_manip.setMaskContent
+        )
+        this.uiElements = {
+            // model: null,
+            // prompt_shortcut: null,
+            // positive_prompt: "",
+            // negative_prompt: "",
+            // selection_mode: null,
+            batch_number: this.batch_number,
+            steps: this.steps,
+            width: this.width,
+            height: this.height,
+            firstphase_width: this.firstphase_width,
+            firstphase_height: this.firstphase_height,
+            cfg: this.cfg,
+            denoising_strength: this.denoising_strength,
+            // hi_res_denoising_strength:0.7,
+            // mask_blur: 8,
+            // inpaint_at_full_res: false,
+            // hi_res_fix:false,
+            // inpaint_padding:0,
+            // 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)
-        //set the value
-        this.uiElements[name].setValue(value)
-      }
+    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
+                )
+                //set the value
+                this.uiElements[name].setValue(value)
+            }
+        }
     }
-  }
 }
 // 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,
+    fill: loadFillSettings,
+    original: loadOriginalSettings,
+    'latent noise': loadLatentNoiseSettings,
 }
 
 module.exports = {
-  UI,
-  UIElement,
-  UISettings,
-  loadLatentNoiseSettings,
-  loadFillSettings,
+    UI,
+    UIElement,
+    UISettings,
+    loadLatentNoiseSettings,
+    loadFillSettings,
 
-  loadedPresets,
+    loadedPresets,
 }
diff --git a/viewer.js b/viewer.js
index 86fcbe9..ee0884c 100644
--- a/viewer.js
+++ b/viewer.js
@@ -19,577 +19,585 @@
 // 	* viewe()
 // 	* isLayerValid()
 
-const psapi = require("./psapi")
+const psapi = require('./psapi')
 
 const ViewerObjState = {
-  Delete: "delete",
-  Unlink: "unlink",
+    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"]
+    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']
 
-    // 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
-  }
-  info() {
-    console.log("state: ", this.state)
-  }
-  visible(visibleOn) {}
-  select() {}
-  isActive() {
-    return this.is_active
-  }
-  active(isActive) {
-    if (isActive) {
-      //unlink it if it's active
-      // this.state = ViewerObjState['Unlink']
-
-      this.img_html.classList.add("viewerImgActive")
-    } else {
-      if (this.getHighlight() === false) {
-        // if it's not active and it's not highlighted
-        // this.state = ViewerObjState['Delete']
-      } else {
-        // this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
-      }
-      this.img_html.classList.remove("viewerImgActive")
+        // 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.is_active = isActive
-  }
-  setAutoDelete(auto_delete) {
-    this.autoDelete = auto_delete
-  }
-  isLayerValid() {}
-  isSameLayer(layer_id) {}
-  setHighlight(is_highlighted) {
-    if (this.can_highlight) {
-      this.is_highlighted = is_highlighted
-      if (this.is_highlighted) {
-        // this.state = ViewerObjState['Unlink']
-        this.img_html.classList.add("viewerImgSelected")
-      } else {
-        this.img_html.classList.remove("viewerImgSelected")
-        // this.state = ViewerObjState["Delete"]
-      }
+    info() {
+        console.log('state: ', this.state)
     }
-  }
-  getHighlight() {
-    return this.is_highlighted
-  }
-  toggleHighlight() {
-    const toggle_value = !this.getHighlight()
-    this.setHighlight(toggle_value)
-    // this.is_highlighted = !this.is_highlighted
-    // this.img_html.classList.toggle("viewerImgSelected")
-  }
-  setImgHtml() {}
-
-  async delete() {
-    try {
-      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
-      //3) it output layer that been used as init layer // !can_highlight && !this.autoDelete
-
-      // do 1) and 2) here . test for 3) in InitImage
-
-      //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"]
-      } else {
-        //
-        this.state = ViewerObjState["Delete"]
-      }
-
-      if (this.autoDelete) {
-        //remove if it's first automated layer
-        this.state = ViewerObjState["Delete"]
-      }
-
-      // else {
-      //   //discard only if it's
-      //   if (this.autoDelete){
-      //     this.state = ViewerObjState['Delete']
-      //   }
-      // }
-    } catch (e) {
-      console.warn(e)
+    visible(visibleOn) {}
+    select() {}
+    isActive() {
+        return this.is_active
     }
-  }
+    active(isActive) {
+        if (isActive) {
+            //unlink it if it's active
+            // this.state = ViewerObjState['Unlink']
 
-  unlink() {
-    //keep the layer but unlink it from the ui
-    try {
-      this.img_html.remove() //delete the img html element
-    } catch (e) {
-      console.warn(e)
+            this.img_html.classList.add('viewerImgActive')
+        } else {
+            if (this.getHighlight() === false) {
+                // if it's not active and it's not highlighted
+                // this.state = ViewerObjState['Delete']
+            } else {
+                // this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
+            }
+            this.img_html.classList.remove('viewerImgActive')
+        }
+        this.is_active = isActive
     }
-  }
+    setAutoDelete(auto_delete) {
+        this.autoDelete = auto_delete
+    }
+    isLayerValid() {}
+    isSameLayer(layer_id) {}
+    setHighlight(is_highlighted) {
+        if (this.can_highlight) {
+            this.is_highlighted = is_highlighted
+            if (this.is_highlighted) {
+                // this.state = ViewerObjState['Unlink']
+                this.img_html.classList.add('viewerImgSelected')
+            } else {
+                this.img_html.classList.remove('viewerImgSelected')
+                // this.state = ViewerObjState["Delete"]
+            }
+        }
+    }
+    getHighlight() {
+        return this.is_highlighted
+    }
+    toggleHighlight() {
+        const toggle_value = !this.getHighlight()
+        this.setHighlight(toggle_value)
+        // this.is_highlighted = !this.is_highlighted
+        // this.img_html.classList.toggle("viewerImgSelected")
+    }
+    setImgHtml() {}
 
-  addButtonHtml() {
-    // Create new container element
-    const container = document.createElement("div")
+    async delete() {
+        try {
+            this.img_html.remove() //delete the img html element
 
-    container.className = "viewer-image-container"
+            //1) it's output layer // can_highlight && this.getHighlight()
+            //2) it init or mask relate layers // this.autoDelete
+            //3) it output layer that been used as init layer // !can_highlight && !this.autoDelete
 
-    const elem = document.getElementById("svg_sp_btn")
+            // do 1) and 2) here . test for 3) in InitImage
 
-    // Create a copy of it
-    const clone = elem.cloneNode(true)
-    const button = clone
-    button.style.display = null
-    button.setAttribute(
-      "title",
-      "use this image to generate more variance like it"
-    )
+            //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']
+            } else {
+                //
+                this.state = ViewerObjState['Delete']
+            }
 
-    // Create button element
-    // const button = document.createElement('sp-button');
-    button.className = "viewer-image-button"
-    // button.innerHTML = "Button";
+            if (this.autoDelete) {
+                //remove if it's first automated layer
+                this.state = ViewerObjState['Delete']
+            }
 
-    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)
-    })
+            // else {
+            //   //discard only if it's
+            //   if (this.autoDelete){
+            //     this.state = ViewerObjState['Delete']
+            //   }
+            // }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
 
-    // Append elements to container
-    container.appendChild(this.img_html)
-    container.appendChild(button)
+    unlink() {
+        //keep the layer but unlink it from the ui
+        try {
+            this.img_html.remove() //delete the img html element
+        } catch (e) {
+            console.warn(e)
+        }
+    }
 
-    this.img_html = container
-  }
+    addButtonHtml() {
+        // Create new container element
+        const container = document.createElement('div')
+
+        container.className = 'viewer-image-container'
+
+        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.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.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)
+        })
+
+        // Append elements to container
+        container.appendChild(this.img_html)
+        container.appendChild(button)
+
+        this.img_html = container
+    }
 }
 
 class OutputImage extends ViewerImage {
-  constructor(layer, path) {
-    super()
-    this.layer = layer
-    this.path = path
-    this.img_html = null
-  }
-  visible(visibleOn) {
-    try {
-      super.visible(visibleOn)
-      if (this.isLayerValid()) {
-        this.layer.visible = visibleOn
-      }
-    } catch (e) {
-      console.warn(e)
+    constructor(layer, path) {
+        super()
+        this.layer = layer
+        this.path = path
+        this.img_html = null
     }
-  }
-  async select() {
-    super.select()
-    if (this.isLayerValid()) {
-      await psapi.selectLayersExe([this.layer])
-      //   console.log(`${this.layer.id} got selected`);
+    visible(visibleOn) {
+        try {
+            super.visible(visibleOn)
+            if (this.isLayerValid()) {
+                this.layer.visible = visibleOn
+            }
+        } catch (e) {
+            console.warn(e)
+        }
     }
-  }
-  isLayerValid() {
-    super.isLayerValid()
-    //check if layer is defined or not
-    //true if the layer is defined
-    //false otherwise
-    let isValid = false
-    if (typeof this.layer !== "undefined" && this.layer) {
-      isValid = true
+    async select() {
+        super.select()
+        if (this.isLayerValid()) {
+            await psapi.selectLayersExe([this.layer])
+            //   console.log(`${this.layer.id} got selected`);
+        }
+    }
+    isLayerValid() {
+        super.isLayerValid()
+        //check if layer is defined or not
+        //true if the layer is defined
+        //false otherwise
+        let isValid = false
+        if (typeof this.layer !== 'undefined' && this.layer) {
+            isValid = true
+        }
+        return isValid
+    }
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        const is_same = this.layer.id == layer_id
+        return is_same
     }
-    return isValid
-  }
-  isSameLayer(layer_id) {
-    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
-  }
-  async delete() {
-    try {
-      await super.delete()
-      // this.img_html.remove()//delete the img html element
-      if (this.state === ViewerObjState["Delete"]) {
-        await psapi.cleanLayers([this.layer])
-      }
-    } catch (e) {
-      console.warn(e)
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
     }
-  }
-  info() {
-    super.info()
-  }
-  // unlink(){
-  //   //keep the layer but unlink it from the ui
-  //   try{
+    async delete() {
+        try {
+            await super.delete()
+            // this.img_html.remove()//delete the img html element
+            if (this.state === ViewerObjState['Delete']) {
+                await psapi.cleanLayers([this.layer])
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    info() {
+        super.info()
+    }
+    // unlink(){
+    //   //keep the layer but unlink it from the ui
+    //   try{
 
-  //     super.unlink()
-  //     this.img_html.remove()//delete the img html element
+    //     super.unlink()
+    //     this.img_html.remove()//delete the img html element
 
-  //   }catch(e){
-  //     console.warn(e)
-  //   }
-  // }
+    //   }catch(e){
+    //     console.warn(e)
+    //   }
+    // }
 }
 
 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
+    constructor(init_group, init_snapshot, solid_layer, path) {
+        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']
-    // }
-  }
-  visible(visibleOn) {
-    try {
-      super.visible(visibleOn)
-      //   const isValid = this.isLayerValid()
-      let visibleValues = []
-      if (visibleOn) {
-        visibleValues = [true, true, true]
-      } else {
-        visibleValues = [false, false, false]
-      }
+        // if (this.autoDelete === false){
+        //   this.state = ViewerObjState['Unlink']
+        // }
+    }
+    visible(visibleOn) {
+        try {
+            super.visible(visibleOn)
+            //   const isValid = this.isLayerValid()
+            let visibleValues = []
+            if (visibleOn) {
+                visibleValues = [true, true, true]
+            } else {
+                visibleValues = [false, false, false]
+            }
 
-      if (this.isLayerValid(this.init_group)) {
-        this.init_group.visible = visibleValues[0]
-      }
-      if (this.isLayerValid(this.init_snapshot)) {
-        this.init_snapshot.visible = visibleValues[1]
-      }
+            if (this.isLayerValid(this.init_group)) {
+                this.init_group.visible = visibleValues[0]
+            }
+            if (this.isLayerValid(this.init_snapshot)) {
+                this.init_snapshot.visible = visibleValues[1]
+            }
 
-      if (this.isLayerValid(this.solid_layer)) {
-        this.solid_layer.visible = visibleValues[2]
-      }
+            if (this.isLayerValid(this.solid_layer)) {
+                this.solid_layer.visible = visibleValues[2]
+            }
 
-      if (!this.autoDelete) {
-        //means it's not the first init image
+            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
+                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
+                }
+            }
+        } catch (e) {
+            console.warn(e)
         }
-      }
-    } catch (e) {
-      console.warn(e)
-    }
-  }
-
-  async select() {
-    super.select()
-
-    const selectLayers = []
-    if (this.isLayerValid(this.init_group)) {
-      selectLayers.push(this.init_group)
-    }
-    // if (this.isLayerValid(this.init_snapshot)) {
-
-    //   selectLayers.push(this.init_snapshot)
-    // }
-    // if (this.isLayerValid(this.solid_layer)) {
-    //   selectLayers.push(this.solid_layer)
-    // }
-
-    await psapi.selectLayersExe(selectLayers)
-    //   console.log(`${this.layer.id} got selected`);
-  }
-
-  isLayerValid(layer) {
-    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
-    if (typeof layer !== "undefined" && layer) {
-      isValid = true
     }
 
-    return isValid
-  }
-  isSameLayer(layer_id) {
-    super.isSameLayer(layer_id)
-    let is_same = false
-    if (this.isLayerValid(this.init_group)) {
-      is_same = this.init_group.id == layer_id
+    async select() {
+        super.select()
+
+        const selectLayers = []
+        if (this.isLayerValid(this.init_group)) {
+            selectLayers.push(this.init_group)
+        }
+        // if (this.isLayerValid(this.init_snapshot)) {
+
+        //   selectLayers.push(this.init_snapshot)
+        // }
+        // if (this.isLayerValid(this.solid_layer)) {
+        //   selectLayers.push(this.solid_layer)
+        // }
+
+        await psapi.selectLayersExe(selectLayers)
+        //   console.log(`${this.layer.id} got selected`);
     }
-    return is_same
-  }
-  setImgHtml(img_html) {
-    super.setImgHtml()
-    this.img_html = img_html
-  }
-  async delete() {
-    try {
-      await super.delete()
 
-      // this.img_html.remove()//delete the img html element
+    isLayerValid(layer) {
+        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
+        if (typeof layer !== 'undefined' && layer) {
+            isValid = true
+        }
 
-      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"]
-      }
-
-      if (this.state === ViewerObjState["Delete"]) {
-        await psapi.cleanLayers([
-          this.init_group,
-          this.init_snapshot,
-          this.solid_layer,
-        ])
-      }
-    } catch (e) {
-      console.warn(e)
+        return isValid
+    }
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        let is_same = false
+        if (this.isLayerValid(this.init_group)) {
+            is_same = this.init_group.id == layer_id
+        }
+        return is_same
+    }
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
+    }
+    async delete() {
+        try {
+            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']
+            }
+
+            if (this.state === ViewerObjState['Delete']) {
+                await psapi.cleanLayers([
+                    this.init_group,
+                    this.init_snapshot,
+                    this.solid_layer,
+                ])
+            }
+        } catch (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
+    constructor(mask_group, white_mark, solid_black, path) {
+        super()
+        this.mask_group = mask_group
+        this.white_mark = white_mark
+        this.solid_black = solid_black
 
-    this.path = path
-    this.can_highlight = false
-  }
-  visible(visibleOn) {
-    try {
-      super.visible(visibleOn)
-      //   const isValid = this.isLayerValid()
-      let visibleValues = []
-      if (visibleOn) {
-        visibleValues = [true, true, false]
-      } else {
-        visibleValues = [false, false, false]
-      }
-
-      if (this.isLayerValid(this.mask_group)) {
-        this.mask_group.visible = visibleValues[0]
-      }
-      if (this.isLayerValid(this.white_mark)) {
-        this.white_mark.visible = visibleValues[1]
-      }
-      if (this.isLayerValid(this.solid_black)) {
-        this.solid_black.visible = visibleValues[2]
-      }
-    } catch (e) {
-      console.warn(e)
+        this.path = path
+        this.can_highlight = false
     }
-  }
+    visible(visibleOn) {
+        try {
+            super.visible(visibleOn)
+            //   const isValid = this.isLayerValid()
+            let visibleValues = []
+            if (visibleOn) {
+                visibleValues = [true, true, false]
+            } else {
+                visibleValues = [false, false, false]
+            }
 
-  async select() {
-    super.select()
-
-    const selectLayers = []
-    // if (this.isLayerValid(this.mask_group)) {
-
-    //   selectLayers.push(this.mask_group)
-    // }
-    if (this.isLayerValid(this.white_mark)) {
-      selectLayers.push(this.white_mark)
-    }
-    // if (this.isLayerValid(this.solid_layer)) {
-    //   selectLayers.push(this.solid_layer)
-    // }
-
-    await psapi.selectLayersExe(selectLayers)
-    //   console.log(`${this.layer.id} got selected`);
-  }
-
-  isLayerValid(layer) {
-    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
-    if (typeof layer !== "undefined" && layer) {
-      isValid = true
+            if (this.isLayerValid(this.mask_group)) {
+                this.mask_group.visible = visibleValues[0]
+            }
+            if (this.isLayerValid(this.white_mark)) {
+                this.white_mark.visible = visibleValues[1]
+            }
+            if (this.isLayerValid(this.solid_black)) {
+                this.solid_black.visible = visibleValues[2]
+            }
+        } catch (e) {
+            console.warn(e)
+        }
     }
 
-    return isValid
-  }
-  isSameLayer(layer_id) {
-    super.isSameLayer(layer_id)
-    let is_same = false
-    if (this.isLayerValid(this.mask_group)) {
-      is_same = this.mask_group.id == layer_id
+    async select() {
+        super.select()
+
+        const selectLayers = []
+        // if (this.isLayerValid(this.mask_group)) {
+
+        //   selectLayers.push(this.mask_group)
+        // }
+        if (this.isLayerValid(this.white_mark)) {
+            selectLayers.push(this.white_mark)
+        }
+        // if (this.isLayerValid(this.solid_layer)) {
+        //   selectLayers.push(this.solid_layer)
+        // }
+
+        await psapi.selectLayersExe(selectLayers)
+        //   console.log(`${this.layer.id} got selected`);
     }
-    return is_same
-  }
-  setImgHtml(img_html) {
-    super.setImgHtml()
-    this.img_html = img_html
-  }
-  async delete() {
-    try {
-      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)
+
+    isLayerValid(layer) {
+        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
+        if (typeof layer !== 'undefined' && layer) {
+            isValid = true
+        }
+
+        return isValid
+    }
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        let is_same = false
+        if (this.isLayerValid(this.mask_group)) {
+            is_same = this.mask_group.id == layer_id
+        }
+        return is_same
+    }
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
+    }
+    async delete() {
+        try {
+            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)
+        }
     }
-  }
 }
 
 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
-  }
+    //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
+    }
 }
 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
-  }
+    //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
+    }
 }
 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}
+    //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.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
+        //Note:move initGroup, to GenerationSession
+        this.initGroup
+        this.init_solid_background
+        this.maskGroup
+        this.mask_solid_background
 
-    //last_selected_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)
-  }
-  initializeMask(group, white_mark, solid_background, path) {
-    this.maskGroup = group
-    this.mask_solid_background = solid_background
-    this.addMaskLayers(white_mark, path, true)
-  }
-  addMaskLayers(white_mark, path, auto_delete) {
-    try {
-      if (!this.maskLayersJson.hasOwnProperty(path)) {
-        //it's a new mask, mostly for the first time storing the mask
+        //last_selected_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)
+    }
+    initializeMask(group, white_mark, solid_background, path) {
+        this.maskGroup = group
+        this.mask_solid_background = solid_background
+        this.addMaskLayers(white_mark, path, true)
+    }
+    addMaskLayers(white_mark, path, auto_delete) {
+        try {
+            if (!this.maskLayersJson.hasOwnProperty(path)) {
+                //it's a new mask, mostly for the first time storing the mask
 
-        const mask_layers = new maskLayers(
-          this.maskGroup,
-          white_mark,
-          this.mask_solid_background,
-          auto_delete
+                const mask_layers = new maskLayers(
+                    this.maskGroup,
+                    white_mark,
+                    this.mask_solid_background,
+                    auto_delete
+                )
+                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)
+                // this.maskLayersJson[path].img_html.src = new_path
+                this.pathToViewerImage[path].img_html.src = new_path
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    updateMaskLayer() {}
+    addInitImageLayers(snapshot, path, auto_delete) {
+        try {
+            if (!this.initImageLayersJson.hasOwnProperty(path)) {
+                //if this is a new init image
+                //store it all of layers in a container object
+                const init_image_layers = new initImageLayers(
+                    this.initGroup,
+                    snapshot,
+                    this.init_solid_background,
+                    auto_delete
+                )
+                this.initImageLayersJson[path] = init_image_layers
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    hasViewerImage(path) {
+        if (this.pathToViewerImage.hasOwnProperty(path)) {
+            return true
+        }
+        return false
+    }
+    addOutputImage(layer, path) {
+        const outputImage = new OutputImage(layer, path)
+
+        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
+    }
+    addMask(group, white_mark, solid_background, path) {
+        const mask = new InitMaskImage(
+            group,
+            white_mark,
+            solid_background,
+            path
         )
-        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)
-        // this.maskLayersJson[path].img_html.src = new_path
-        this.pathToViewerImage[path].img_html.src = new_path
-      }
-    } catch (e) {
-      console.warn(e)
+        this.initMaskImage = mask
+        this.pathToViewerImage[path] = mask
+        return mask
     }
-  }
-  updateMaskLayer() {}
-  addInitImageLayers(snapshot, path, auto_delete) {
-    try {
-      if (!this.initImageLayersJson.hasOwnProperty(path)) {
-        //if this is a new init image
-        //store it all of layers in a container object
-        const init_image_layers = new initImageLayers(
-          this.initGroup,
-          snapshot,
-          this.init_solid_background,
-          auto_delete
-        )
-        this.initImageLayersJson[path] = init_image_layers
-      }
-    } catch (e) {
-      console.warn(e)
-    }
-  }
-
-  hasViewerImage(path) {
-    if (this.pathToViewerImage.hasOwnProperty(path)) {
-      return true
-    }
-    return false
-  }
-  addOutputImage(layer, path) {
-    const outputImage = new OutputImage(layer, path)
-
-    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
-  }
-  addMask(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
-  }
-  deleteAll() {}
-  keepAll() {}
-  keepSelected() {}
-  deleteSelected() {}
-  deleteInitImages() {}
-  deleteMask() {}
+    deleteAll() {}
+    keepAll() {}
+    keepSelected() {}
+    deleteSelected() {}
+    deleteInitImages() {}
+    deleteMask() {}
 }
 
 module.exports = {
-  OutputImage,
-  InitImage,
-  InitMaskImage,
-  ViewerObjState,
-  ViewerManager,
+    OutputImage,
+    InitImage,
+    InitMaskImage,
+    ViewerObjState,
+    ViewerManager,
 }