diff --git a/index.html b/index.html
index 2b74a69..fc9581b 100644
--- a/index.html
+++ b/index.html
@@ -869,116 +869,9 @@
                     </sp-radio-group>
                 </div>
                 <div id="viewerSubTab">
-                    <div class="flexContainer">
-                        <sp-label slot="label"
-                            >View your generated images on the canvas</sp-label
-                        >
-                    </div>
+                    <div class="flexContainer"></div>
                     <div></div>
-                    <div>
-                        <button
-                            class="btnSquare"
-                            id="btnSetMaskViewer"
-                            style="display: none"
-                        >
-                            Set Mask
-                        </button>
-                        <button
-                            class="btnSquare"
-                            id="btnSetInitImageViewer"
-                            style="display: none"
-                        >
-                            Set Init Image
-                        </button>
-                        <button
-                            class="btnSquare btnGenerateClass"
-                            id="btnGenerate"
-                            style="display: none"
-                        >
-                            Generate txt2img
-                        </button>
-                        <button
-                            class="btnSquare btnInterruptClass"
-                            id="btnInterruptViewer"
-                            style="display: none"
-                        >
-                            Interrupt
-                        </button>
-                        <div
-                            style="
-                                display: flex;
-                                justify-content: flex-start;
-                                padding-top: 3px;
-                            "
-                        >
-                            <button
-                                title="Keep all generated images on the canvas"
-                                class="btnSquare acceptClass acceptAllImgBtn"
-                                style="display: none; margin-right: 3px"
-                            ></button>
-                            <button
-                                title="Delete all generated images from the canvas"
-                                class="btnSquare discardClass discardAllImgBtn"
-                                style="display: none; margin-right: 3px"
-                            ></button>
-                            <button
-                                title="Keep only the highlighted images"
-                                class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
-                                style="display: none; margin-right: 3px"
-                            ></button>
-                            <button
-                                title="Delete only the highlighted images"
-                                class="btnSquare discardSelectedClass discardSelectedImgBtn"
-                                style="display: none; margin-right: 3px"
-                            ></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"
-                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" class="lProgressLabel"
-                                    >Progress...</sp-label
-                                >
-                            </sp-progressbar>
-                            <input
-                                title="Toggle the visibility of the Preview Image on the canvas"
-                                type="checkbox"
-                                name="optionCheckbox"
-                                class="chLiveProgressImageClass"
-                            />
-                        </div>
-
-                        <!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
-                    </div>
-                    <div style="display: flex">
-                        <sp-slider
-                            show-value="true"
-                            id="slThumbnailSize"
-                            min="1"
-                            max="10"
-                            value="5"
-                            style="width: 100%"
-                        >
-                            <sp-label slot="label">Thumbnail Size:</sp-label>
-                        </sp-slider>
-                        <sp-checkbox
-                            class="checkbox"
-                            id="chSquareThumbnail"
-                            style="margin-left: 20px"
-                            >Square 1:1</sp-checkbox
-                        >
-                    </div>
                     <div class="" id="divProgressImageViewerContainer">
                         <!-- <img
                             class=""
diff --git a/index.js b/index.js
index 9fe8f60..807e852 100644
--- a/index.js
+++ b/index.js
@@ -20,7 +20,7 @@ const sd_tab = require('./utility/tab/sd')
 const sdapi = require('./sdapi_py_re')
 
 // const exportHelper = require('./export_png')
-const outpaint = require('./outpaint')
+
 const psapi = require('./psapi')
 const app = window.require('photoshop').app
 const constants = require('photoshop').constants
@@ -30,7 +30,7 @@ const dialog_box = require('./dialog_box')
 // const {entrypoints} = require('uxp')
 const html_manip = require('./utility/html_manip')
 // const export_png = require('./export_png')
-const viewerJs = require('./viewer')
+
 const selection = require('./selection')
 const layer_util = require('./utility/layer')
 const sd_options = require('./utility/sdapi/options')
@@ -278,12 +278,6 @@ async function getUniqueDocumentId() {
     }
 }
 
-// document
-//   .getElementById('btnLinkCurrentDocument')
-//   .addEventListener('click', async () => {
-//     await getUniqueDocumentId()
-//   })
-
 // attach event listeners for tabs
 //REFACTOR: move to html_manip.js (?) - if there is no business logic here and it's only for UI.
 Array.from(document.querySelectorAll('.sp-tab')).forEach((theTab) => {
@@ -787,7 +781,6 @@ const backendTypeEnum = {
 }
 
 g_generation_session.mode = generationMode['Txt2Img']
-let g_viewer_manager = new viewerJs.ViewerManager()
 
 //********** End: global variables */
 
@@ -990,24 +983,9 @@ document.addEventListener('mouseenter', async (event) => {
                 // if there is an active selection and if the selection has changed
 
                 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
-                }
             } else {
                 // sessionStartHtml(true)//generate more, green color
                 //if you didn't move the selection.
-                // g_ui.startSessionUI()
-                g_ui.generateMoreUI()
             }
         }
     } catch (e) {
@@ -1184,8 +1162,6 @@ async function displayUpdate() {
                         getCurrentGenerationModeByValue(g_sd_mode)
                     element.textContent = `Generate ${selected_mode}`
                 })
-
-                html_manip.setGenerateButtonsColor('generate', 'generate-more')
             } else {
                 //1) and the session is active
                 //2) is the same generation mode
@@ -1205,20 +1181,12 @@ async function displayUpdate() {
                     generate_btns.forEach((element) => {
                         element.textContent = `Generate More ${generation_name}`
                     })
-
-                    html_manip.setGenerateButtonsColor(
-                        'generate-more',
-                        'generate'
-                    )
                 } else {
                     //3b) selection has change
                 }
             }
         } else {
             //session is not active
-            const selected_mode = getCurrentGenerationModeByValue(g_sd_mode)
-            g_ui.setGenerateBtnText(`Generate ${selected_mode}`)
-            html_manip.setGenerateButtonsColor('generate', 'generate-more')
         }
     } catch (e) {
         console.warn(e)
@@ -1332,291 +1300,6 @@ document.querySelector('#slInpaintPadding').addEventListener('input', (evt) => {
     document.querySelector('#lInpaintPadding').textContent = padding
 })
 
-// document
-//   .querySelector('#slDenoisingStrength')
-//   .addEventListener('input', evt => {
-//     const denoising_string_value = evt.target.value / 100.0
-//     g_denoising_strength = denoising_string_value
-//     // document.querySelector('#lDenoisingStrength').value= Number(denoising_string_value)
-//     document.querySelector('#lDenoisingStrength').textContent =
-//       denoising_string_value
-//     document.getElementById(
-//       'lDenoisingStrength'
-//     ).innerHTML = `${denoising_string_value}`
-//     // console.log(`New denoising_string_value: ${document.querySelector('#tiDenoisingStrength').value}`)
-//   })
-// document
-//   .querySelector('#hrDenoisingStrength')
-//   .addEventListener('input', evt => {
-//     const denoising_string_value = evt.target.value / 100.0
-//     h_denoising_strength = denoising_string_value
-
-//     document.getElementById(
-//       'hDenoisingStrength'
-//     ).innerHTML = `${denoising_string_value}`
-//     // console.log(`New denoising_string_value: ${document.querySelector('#tiDenoisingStrength').value}`)
-//   })
-// // document.getElementById('btnPopulate').addEventListener('click', showLayerNames)
-//REFACTOR: move to psapi.js
-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)
-                    },
-                    { commandName: 'Snap And Fill' }
-                )
-                // 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)
-    }
-}
-
-// document
-//   .getElementById('btnSnapAndFill')
-//   .addEventListener('click', async () => {
-
-//   await snapAndFillHandler()
-//   })
-//REFACTOR: move to generation.js
-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)
-
-            // 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)
-    }
-}
-//REFACTOR: move to generation.js
-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)
-
-            // console.log ("outpaint.inpaintFasterExe(random_session_id):, g_last_inpaint_layers: ",g_last_inpaint_layers)
-        }
-    } catch (e) {
-        console.warn(e)
-    }
-}
-// document
-//   .getElementById('btnInitInpaint')
-//   .addEventListener('click', async () => {
-//  await btnInitInpaintHandler()
-//   })
-//REFACTOR: move to ui.js
-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')
-        )
-        // console.log('first_class_btns: ', first_class_btns)
-    } else {
-        //show generate or generate more button
-        first_class_btns.forEach(
-            (element) => (element.style.display = 'inline-block')
-        )
-        if (g_generation_session.isActive()) {
-            //show generate more
-            // const selected_mode = getCurrentGenerationModeByValue(g_sd_mode)
-            const generation_mode = g_generation_session.mode
-            const generation_name =
-                getCurrentGenerationModeByValue(generation_mode)
-            first_class_btns.forEach(
-                (element) =>
-                    (element.textContent = `Generate More ${generation_name}`)
-            )
-        } else {
-            //show generate button
-            first_class_btns.forEach(
-                (element) =>
-                    (element.textContent = `Generate ${getCurrentGenerationModeByValue(
-                        g_sd_mode
-                    )}`)
-            )
-        }
-        second_class_btns.forEach((element) => (element.style.display = 'none'))
-    }
-    return isVisible
-}
-//REFACTOR: move to session.js
-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)
-            }
-        }
-        await discard() // clean viewer tab
-        await layer_util.deleteLayers([g_generation_session.outputGroup]) //delete the group folder since it's empty
-    } catch (e) {
-        console.warn(e)
-    }
-}
-//REFACTOR: move to session.js
-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 viewerJs.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 (
-                        layer_util.Layer.doesLayerExist(viewer_image_obj.layer)
-                    ) {
-                        await g_generation_session.moveToTopOfOutputGroup(
-                            viewer_image_obj.layer
-                        )
-                    }
-                }
-                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)
-    }
-}
-//REFACTOR: move to session.js
-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
-                }
-
-                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)
-    }
-}
-//REFACTOR: move to events.js
-const discard_selected_class_btns = Array.from(
-    document.getElementsByClassName('discardSelectedClass')
-)
-//REFACTOR: move to events.js
-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)
-        }
-    })
-)
-
-//REFACTOR: move to events.js
-const accept_selected_class_btns = Array.from(
-    document.getElementsByClassName('acceptSelectedClass')
-)
-//REFACTOR: move to events.js
-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)
-        }
-    })
-)
-//REFACTOR: move to events.js
-const accept_class_btns = Array.from(
-    document.getElementsByClassName('acceptClass')
-)
-//REFACTOR: move to events.js
-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()
-
-            // await acceptAll()
-        } catch (e) {
-            console.warn(e)
-        }
-    })
-)
-//REFACTOR: move to ui.js
-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
-}
 //REFACTOR: move to events.js
 document.getElementById('btnRandomSeed').addEventListener('click', async () => {
     document.querySelector('#tiSeed').value = '-1'
@@ -1637,121 +1320,7 @@ document.getElementById('btnLastSeed').addEventListener('click', async () => {
         console.warn(e)
     }
 })
-//REFACTOR: move to session.js
-async function discard() {
-    try {
-        await executeAsModal(async () => {
-            await psapi.selectLayersExe([g_generation_session.outputGroup]) //must select the layer to change allLocked
-            g_generation_session.outputGroup.allLocked = false //unlock the session folder on session end
-        })
 
-        // 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)
-        //   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)
-
-        // psapi.cleanLayers(last_gen_layers)
-        await deleteNoneSelected(g_viewer_manager.pathToViewerImage)
-    } catch (e) {
-        console.warn(e)
-    }
-}
-//REFACTOR: move to events.js
-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()
-        })
-    }
-)
-//REFACTOR: move to events.js
-// Array.from(document.getElementsByClassName('btnInterruptClass')).forEach(
-//     (element) => {
-//         element.addEventListener('click', async () => {
-//             try {
-//                 if (
-//                     g_generation_session.request_status ===
-//                     Enum.RequestStateEnum['Finished']
-//                 ) {
-//                     toggleTwoButtonsByClass(
-//                         false,
-//                         'btnGenerateClass',
-//                         'btnInterruptClass'
-//                     )
-//                     g_can_request_progress = false
-
-//                     return null // cann't inturrept a finished generation
-//                 }
-//                 g_generation_session.request_status =
-//                     Enum.RequestStateEnum['Interrupted']
-
-//                 g_batch_count_interrupt_status = true // interrupt batch count generations
-//                 const backend_type = html_manip.getBackendType()
-
-//                 if (backend_type === backendTypeEnum['HordeNative']) {
-//                     //interrupt the horde
-
-//                     await g_horde_generator.interrupt()
-//                 } else {
-//                     //interrupt auto1111
-
-//                     json = await sdapi.requestInterrupt()
-//                 }
-
-//                 toggleTwoButtonsByClass(
-//                     false,
-//                     'btnGenerateClass',
-//                     'btnInterruptClass'
-//                 )
-//                 g_can_request_progress = false
-
-//                 // 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)
-//             }
-//         })
-//     }
-// )
 //REFACTOR: move to psapi.js
 //store active layers only if they are not stored.
 async function storeActiveLayers() {
@@ -1894,67 +1463,7 @@ async function getExtraSettings() {
     }
     return payload
 }
-//REFACTOR: move to generation.js
-async function generateImg2Img(settings) {
-    let json = {}
-    try {
-        const backend_type = html_manip.getBackendType()
-        if (backend_type === backendTypeEnum['HordeNative']) {
-            json = await g_horde_generator.generate()
-            // json = await g_horde_generator.toGenerationFormat(images_info)
-            // json = { images_info: images_info }
-        } else if (
-            backend_type === backendTypeEnum['Auto1111'] ||
-            backend_type === backendTypeEnum['Auto1111HordeExtension']
-        ) {
-            //checks on index 0 as if not enabled ingores the rest
-            const b_enable_control_net = control_net.isControlNetModeEnable()
 
-            if (b_enable_control_net) {
-                //use control net
-                json = await sdapi.requestControlNetImg2Img(settings)
-            } else {
-                json = await sdapi.requestImg2Img(settings)
-            }
-        }
-    } catch (e) {
-        console.warn(e)
-        json = {}
-    }
-
-    return json
-}
-//REFACTOR: move to generation.js
-async function generateTxt2Img(settings) {
-    let json = {}
-    try {
-        const backend_type = html_manip.getBackendType()
-        if (backend_type === backendTypeEnum['HordeNative']) {
-            json = await g_horde_generator.generate()
-            // json = await g_horde_generator.toGenerationFormat(images_info)
-            // json = { images_info: images_info }
-        } else if (
-            backend_type === backendTypeEnum['Auto1111'] ||
-            backend_type === backendTypeEnum['Auto1111HordeExtension']
-        ) {
-            // const b_enable_control_net = control_net.getEnableControlNet()
-            const b_enable_control_net = control_net.isControlNetModeEnable()
-
-            if (b_enable_control_net) {
-                //use control net
-
-                json = await sdapi.requestControlNetTxt2Img(settings)
-            } else {
-                json = await sdapi.requestTxt2Img(settings)
-            }
-        }
-    } catch (e) {
-        console.warn(e)
-        json = {}
-    }
-
-    return json
-}
 //REFACTOR: move to selection.js
 async function hasSelectionChanged(new_selection, old_selection) {
     if (
@@ -1968,497 +1477,6 @@ async function hasSelectionChanged(new_selection, old_selection) {
         return true
     }
 }
-//REFACTOR: move to generation.js
-async function easyModeGenerate(mode) {
-    try {
-        //save laso selection
-        if (g_is_laso_inapint_mode) {
-            await selection.makeMaskChannelExe('mask')
-        }
-    } catch (e) {
-        console.warn(e)
-    }
-
-    try {
-        if (
-            g_generation_session.request_status !==
-            Enum.RequestStateEnum['Finished']
-        ) {
-            app.showAlert(
-                'A generation is still active in the background. \nPlease check your Automatic1111 command line.'
-            )
-            return null
-        }
-
-        g_generation_session.request_status =
-            Enum.RequestStateEnum['Generating']
-        await executeAsModal(async (context) => {
-            const document_type = await findDocumentType()
-
-            const history_id = await context.hostControl.suspendHistory({
-                documentID: app.activeDocument.id, //TODO: change this to the session document id
-                name: 'Correct Background',
-            })
-            //store selection
-            //store active layer
-            const selectionInfo = await psapi.getSelectionInfoExe()
-            await psapi.unSelectMarqueeExe()
-            const active_layers = app.activeDocument.activeLayers
-
-            //1)check if the documnet has a background layer
-
-            await correctDocumentType(document_type)
-
-            //retore selection
-            //restore active layer
-            await psapi.reSelectMarqueeExe(selectionInfo)
-            await psapi.selectLayersExe(active_layers)
-            await context.hostControl.resumeHistory(history_id)
-        })
-
-        // if (
-        //     (await layer_util.hasBackgroundLayer()) === false && //doesn't have backround layer
-        //     (await note.Notification.backgroundLayerIsMissing()) === false //and the user cancled the creation of background layer
-        // ) {
-        //     // const is_canceld  =
-        //     //     await note.Notification.backgroundLayerIsMissing() //
-
-        //     return false
-        // }
-        const backend_type = html_manip.getBackendType()
-        if (
-            backend_type === backendTypeEnum['Auto1111'] ||
-            backend_type === backendTypeEnum['Auto1111HordeExtension']
-        ) {
-            g_automatic_status = await checkAutoStatus()
-            await displayNotification(g_automatic_status)
-            if (
-                g_automatic_status === Enum.AutomaticStatusEnum['Offline'] ||
-                g_automatic_status === Enum.AutomaticStatusEnum['RunningNoApi']
-            ) {
-                g_generation_session.request_status =
-                    Enum.RequestStateEnum['Finished']
-                return false
-            }
-        }
-
-        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 && // no selection area
-            (await note.Notification.inactiveSelectionArea(
-                g_generation_session.isActive()
-            )) === false // means did not activate the session selection area if it's available
-        ) {
-            g_generation_session.request_status =
-                Enum.RequestStateEnum['Finished']
-            return null
-        }
-
-        console.log('easyModeGenerate mdoe: ', mode)
-        if (psapi.isSelectionValid(g_generation_session.selectionInfo)) {
-            // check we have an old selection stored
-            const new_selection = await psapi.getSelectionInfoExe()
-            if (
-                await hasSelectionChanged(
-                    new_selection,
-                    g_generation_session.selectionInfo
-                )
-            ) {
-                // check the new selection is difference than the old
-                // end current session
-                g_generation_session.selectionInfo = 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_generation_session.selectionInfo =
-                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
-        let init_image
-        let mask
-        if (mode === 'txt2img') {
-            //Note: keep it for clearity/ readibility
-        } else if (mode === 'img2img' || mode === 'upscale') {
-            // await snapAndFillHandler()
-            init_image = await io.getImg2ImgInitImage()
-            g_generation_session.activeBase64InitImage = init_image
-        } else if (mode === 'inpaint') {
-            // await btnInitInpaintHandler()
-
-            if (g_is_laso_inapint_mode) {
-                await selection.channelToSelectionExe('mask')
-                const [init_image_base64, mask_base64] =
-                    await selection.inpaintLassoInitImageAndMask()
-                init_image = init_image_base64
-                mask = mask_base64
-                g_generation_session.activeBase64InitImage = init_image
-                g_generation_session.activeBase64MaskImage = mask
-            } else {
-                //normal inpaint
-                try {
-                    await executeAsModal(async () => {
-                        g_inpaint_mask_layer.opacity = 100
-                    })
-                } catch (e) {
-                    console.warn(e)
-                }
-                const obj = await io.getInpaintInitImageAndMask()
-
-                init_image = obj.init_image
-                g_generation_session.activeBase64InitImage = init_image
-                mask = obj.mask
-                g_generation_session.activeBase64MaskImage = mask
-            }
-        } else if (mode === 'outpaint') {
-            // await easyModeOutpaint()
-            const obj = await io.getOutpaintInitImageAndMask()
-            init_image = obj.init_image
-            g_generation_session.activeBase64InitImage = init_image
-            mask = obj.mask
-            g_generation_session.activeBase64MaskImage = mask
-        }
-
-        //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 =
-            mode === 'upscale' ? await getExtraSettings() : await getSettings()
-
-        if (mode === 'img2img') {
-            // const init_image = await io.getImg2ImgInitImage()
-            settings['init_images'] = [init_image]
-        } else if (mode === 'inpaint') {
-            // const { init_image, mask } = await io.getInpaintInitImageAndMask()
-            settings['init_images'] = [init_image]
-            // settings['mask'] = mask
-        } else if (mode === 'outpaint') {
-            settings['init_images'] = [init_image]
-            // settings['mask'] = mask
-        }
-        g_generation_session.last_settings = settings
-
-        async function updateViewerStore(store, images) {
-            try {
-                if (typeof images === 'undefined' || !images) {
-                    return null
-                }
-                store.data.images = images
-                const thumbnail_list = []
-                for (const base64 of images) {
-                    const thumbnail = await io.createThumbnail(base64, 300)
-                    thumbnail_list.push(thumbnail)
-                }
-
-                store.data.thumbnails = thumbnail_list
-            } catch (e) {
-                console.warn(e)
-                console.warn('images: ', images)
-            }
-        }
-
-        await updateViewerStore(viewer.init_store, settings?.init_images)
-        await updateViewerStore(viewer.mask_store, [settings?.mask])
-
-        // g_generation_session.is_control_net = control_net.getEnableControlNet()
-        g_generation_session.is_control_net =
-            control_net.isControlNetModeEnable()
-
-        await generate(settings, mode)
-
-        // await g_generation_session.deleteProgressLayer() // delete the old progress layer
-        await g_generation_session.deleteProgressImage()
-    } catch (e) {
-        await g_generation_session.deleteProgressImage()
-        console.warn(e)
-        g_generation_session.request_status = Enum.RequestStateEnum['Finished']
-    }
-    toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
-    g_can_request_progress = false
-
-    g_generation_session.request_status = Enum.RequestStateEnum['Finished']
-
-    if (g_generation_session.sudo_timer_id) {
-        //disable the sudo timer at the end of the generation
-        g_generation_session.sudo_timer_id = clearInterval(
-            g_generation_session.sudo_timer_id
-        )
-    }
-}
-
-//REFACTOR: move to generation.js
-async function generate(settings, mode) {
-    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
-
-        // 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
-
-        if (
-            html_manip.getBackendType() !== backendTypeEnum['HordeNative'] // anything other than horde native
-        ) {
-            setTimeout(async function () {
-                // change this to setInterval()
-                await progressRecursive()
-            }, 2000)
-        }
-
-        if (
-            html_manip.getBackendType() === backendTypeEnum['Auto1111'] &&
-            g_generation_session.is_control_net
-        ) {
-            g_generation_session.sudo_timer_id = general.sudoTimer()
-        }
-
-        console.log(settings)
-
-        g_generation_session.request_status =
-            Enum.RequestStateEnum['Generating']
-        let json = {}
-        if (mode == 'txt2img') {
-            json = await generateTxt2Img(settings)
-        } else if (
-            mode == 'img2img' ||
-            mode == 'inpaint' ||
-            mode == 'outpaint'
-        ) {
-            // json = await sdapi.requestImg2Img(settings)
-
-            json = await generateImg2Img(settings)
-        } else if (mode == 'upscale') {
-            json = await sdapi.requestExtraSingleImage(settings)
-        }
-
-        // if (g_sd_mode == 'outpaint') {
-        //     // await easyModeOutpaint()
-        //     json = await sdapi.requestImg2Img(settings)
-
-        //     // await setTimeout(async ()=> {
-        //     //   json = await sdapi.requestImg2Img(settings)
-
-        //     // },5000)
-        // }
-        if (
-            g_generation_session.request_status ===
-            Enum.RequestStateEnum['Interrupted']
-        ) {
-            //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.
-            html_manip.updateProgressBarsHtml(0)
-            console.log(
-                'before delete g_generation_session.progress_layer: ',
-                g_generation_session.progress_layer
-            )
-            await g_generation_session.deleteProgressImage()
-            console.log(
-                'after delete g_generation_session.progress_layer: ',
-                g_generation_session.progress_layer
-            )
-            //check whether request was "generate" or "generate more"
-            //if it's generate discard the session
-            if (isFirstGeneration) {
-                await loadViewerImages()
-                await g_generation_session.endSession(
-                    session.GarbageCollectionState['Discard']
-                ) //end session and delete all images
-                g_ui.onEndSessionUI()
-
-                // //delete all mask related layers
-            }
-            g_generation_session.request_status =
-                Enum.RequestStateEnum['Finished']
-            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
-            }
-            g_generation_session.request_status =
-                Enum.RequestStateEnum['Finished']
-            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.images_info.auto_metadata)
-        g_last_seed = json.images_info[0]?.auto_metadata?.Seed
-        //finished generating, set the button back to generate
-
-        // toggleTwoButtons(false,'btnGenerate','btnInterrupt')
-        toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
-        g_can_request_progress = false
-        html_manip.updateProgressBarsHtml(0)
-
-        const images_info = json?.images_info
-        // gImage_paths = images_info.images_paths
-        //open the generated images from disk and load them onto the canvas
-        // const b_use_silent_import =
-        //     document.getElementById('chUseSilentMode').checked
-
-        if (isFirstGeneration) {
-            //this is new generation session
-
-            // g_generation_session.image_paths_to_layers =
-            //     await silentImagesToLayersExe(images_info)
-
-            g_generation_session.base64OutputImages = {} //delete all previouse images, Note move this to session end ()
-            for (const image_info of images_info) {
-                const path = image_info['path']
-                const base64_image = image_info['base64']
-                g_generation_session.base64OutputImages[path] = base64_image
-                const [document_name, image_name] = path.split('/')
-                await io.saveFileInSubFolder(
-                    base64_image,
-                    document_name,
-                    image_name
-                ) //save the output image
-                const json_file_name = `${image_name.split('.')[0]}.json`
-                settings['auto_metadata'] = image_info?.auto_metadata
-                await io.saveJsonFileInSubFolder(
-                    settings,
-                    document_name,
-                    json_file_name
-                ) //save the settings
-            }
-
-            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 = await silentImagesToLayersExe(images_info)
-
-            for (const image_info of images_info) {
-                const path = image_info['path']
-                const base64_image = image_info['base64']
-                g_generation_session.base64OutputImages[path] = base64_image
-                const [document_name, image_name] = path.split('/')
-                await io.saveFileInSubFolder(
-                    base64_image,
-                    document_name,
-                    image_name
-                )
-                const json_file_name = `${image_name.split('.')[0]}.json`
-                settings['auto_metadata'] = image_info?.auto_metadata
-                await io.saveJsonFileInSubFolder(
-                    settings,
-                    document_name,
-                    json_file_name
-                ) //save the settings
-            }
-
-            // g_generation_session.image_paths_to_layers = {
-            //     ...g_generation_session.image_paths_to_layers,
-            //     ...last_images_paths,
-            // }
-            g_number_generation_per_session++
-        }
-        await psapi.reSelectMarqueeExe(g_generation_session.selectionInfo)
-        //update the viewer
-        const base64_list = Object.entries(
-            g_generation_session.base64OutputImages
-        ).map((obj) => obj[1] ?? '')
-
-        const thumbnail_list = []
-        for (const base64 of base64_list) {
-            const thumbnail = await io.createThumbnail(base64, 300)
-            thumbnail_list.push(thumbnail)
-        }
-
-        viewer.store.updateProperty('thumbnails', thumbnail_list)
-        viewer.store.updateProperty('images', base64_list)
-        //load react viewer
-        //*) extract thumbnails
-        //*) extract images
-        //*) on thumbnail click
-        //*) delete previous layer if it exist
-        //*) load image to canvas
-        //*)
-
-        //
-        await loadViewerImages()
-
-        //esnures that progress bars are set to 0 (as last progress request call might have returned less than 100%)
-        updateProgressBarsHtml(0)
-    } catch (e) {
-        console.error(`btnGenerate.click(): `, e)
-        g_generation_session.request_status = Enum.RequestStateEnum['Finished']
-    }
-    g_generation_session.request_status = Enum.RequestStateEnum['Finished']
-}
-//REFACTOR: move to events.js
-Array.from(document.getElementsByClassName('btnGenerateClass')).forEach(
-    (btn) => {
-        btn.addEventListener('click', async (evt) => {
-            tempDisableElement(evt.target, 5000)
-            const numberOfBatchCount = parseInt(
-                document.querySelector('#tiNumberOfBatchCount').value
-            )
-            for (let i = 0; i < numberOfBatchCount; i++) {
-                if (g_batch_count_interrupt_status === true) {
-                    break
-                }
-                g_current_batch_index = i
-                await easyModeGenerate(g_sd_mode)
-            }
-            g_batch_count_interrupt_status = false // reset for next generation
-            g_current_batch_index = 0 // reset curent_batch_number
-        })
-    }
-) //REFACTOR: move to events.js
 
 document
     .getElementById('btnRefreshModels')
@@ -2498,58 +1516,6 @@ document.querySelectorAll('.btnLayerToSelection').forEach((el) => {
     })
 })
 
-//REFACTOR: move to events.js
-document
-    .getElementById('btnSetInitImageViewer')
-    .addEventListener('click', async () => {
-        //set init image event listener, use when session is active
-        const layer = await app.activeDocument.activeLayers[0]
-        const image_info = await psapi.silentSetInitImage(
-            layer,
-            random_session_id
-        )
-        const image_name = image_info['name']
-        const path = `./server/python_server/init_images/${image_name}`
-        g_viewer_manager.addInitImageLayers(layer, path, false)
-        await g_viewer_manager.loadInitImageViewerObject(path)
-        // await loadInitImageViewerObject(
-        //     group,
-        //     snapshot,
-        //     solid_background,
-        //     path,
-        //     auto_delete,
-        //     base64_image
-        // )
-    })
-//REFACTOR: move to psapi.js
-async function setMaskViewer() {
-    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 mask_info = await psapi.silentSetInitImageMask(
-            layer,
-            random_session_id
-        )
-        const image_name = mask_info['name']
-        const path = `./server/python_server/init_images/${image_name}`
-        g_viewer_manager.addMaskLayers(layer, path, false, mask_info['base64']) //can be autodeleted?
-        await psapi.unselectActiveLayersExe()
-    } catch (e) {
-        console.warn(e)
-    }
-}
-//REFACTOR: move to events.js
-document
-    .getElementById('btnSetMaskViewer')
-    .addEventListener('click', async () => {
-        await setMaskViewer()
-    })
-
 //REFACTOR: move to psapi.js
 function moveElementToAnotherTab(elementId, newParentId) {
     const element = document.getElementById(elementId)
@@ -3425,269 +2391,6 @@ async function turnMaskVisible(
         console.warn(e)
     }
 }
-//REFACTOR: move to viewer.js
-async function loadInitImageViewerObject(
-    group,
-    snapshot,
-    solid_background,
-    path,
-    auto_delete,
-    base64_image
-) {
-    const initImage = g_viewer_manager.addInitImage(
-        group,
-        snapshot,
-        solid_background,
-        path,
-        auto_delete
-    )
-
-    const init_img_html = createViewerImgHtml(
-        './server/python_server/init_images/',
-        path,
-        base64_image
-    )
-    initImage.createThumbnailNew(init_img_html)
-    g_viewer_manager.init_image_container.appendChild(
-        initImage.thumbnail_container
-    )
-    initImage.setImgHtml(init_img_html)
-
-    init_img_html.addEventListener('click', async (e) => {
-        await viewerThumbnailclickHandler(e, initImage)
-    })
-}
-//REFACTOR: move to viewer.js
-async function loadViewerImages() {
-    try {
-        //get the images path
-        console.log(
-            'g_generation_session.image_paths_to_layers:',
-            g_generation_session.image_paths_to_layers
-        )
-
-        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_generation_session.image_paths_to_layers)
-        // console.log('image_paths: ', image_paths)
-        let i = 0
-
-        // const viewer_layers = []
-
-        // 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 paths = Object.keys(g_viewer_manager.initImageLayersJson)
-            for (const path of paths) {
-                if (!g_viewer_manager.hasViewerImage(path)) {
-                    // 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 base64_image =
-                    //     g_generation_session.base64initImages[path]
-                    // await loadInitImageViewerObject(
-                    //     group,
-                    //     snapshot,
-                    //     solid_background,
-                    //     path,
-                    //     auto_delete,
-                    //     base64_image
-                    // )
-                    await g_viewer_manager.loadInitImageViewerObject(path)
-
-                    // 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 mask_img_html = createViewerImgHtml(
-                    './server/python_server/init_images/',
-                    g_init_image_mask_name,
-                    g_generation_session.base64maskImage[path]
-                )
-
-                mask_obj.createThumbnailNew(mask_img_html)
-                mask_container.appendChild(mask_obj.thumbnail_container)
-                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
-
-                mask_img_html.addEventListener('click', async (e) => {
-                    await viewerThumbnailclickHandler(e, mask_obj)
-                })
-
-                // 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
-
-                //create an html image element and attach it container, and link it to the viewer obj
-
-                const layer = g_generation_session.image_paths_to_layers[path]
-                const img = createViewerImgHtml(
-                    output_dir_relative,
-                    path,
-                    g_generation_session.base64OutputImages[path]
-                )
-                const output_image_obj = g_viewer_manager.addOutputImage(
-                    layer,
-                    path
-                )
-                lastOutputImage = output_image_obj
-                const b_button_visible =
-                    g_generation_session.mode !== generationMode['Txt2Img']
-                        ? true
-                        : false
-
-                output_image_obj.createThumbnailNew(img, b_button_visible)
-                // 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.thumbnail_container
-                )
-                //add on click event handler to the html img
-                // await NewViewerImageClickHandler(img, output_image_obj)
-                img.addEventListener('click', async (e) => {
-                    await viewerThumbnailclickHandler(e, output_image_obj)
-                })
-            }
-
-            // i++
-        }
-
-        const thumbnail_size_slider = document.getElementById('slThumbnailSize')
-        scaleThumbnailsEvenHandler(
-            thumbnail_size_slider.value,
-            thumbnail_size_slider.max,
-            thumbnail_size_slider.min
-        )
-        if (lastOutputImage) {
-            //select the last generate/output image
-            // lastOutputImage.img_html.click()
-            await executeAsModal(async () => {
-                await lastOutputImage.click(Enum.clickTypeEnum['Click'])
-            })
-        }
-    } catch (e) {
-        console.error(`loadViewer images: `, e)
-    }
-}
-//REFACTOR: move to session.js
-async function deleteNoneSelected(viewer_objects) {
-    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
-
-                    viewer_object.visible(true) //make them visiable on the canvas
-
-                    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_generation_session.image_paths_to_layers[path]
-                } catch (e) {
-                    console.warn(e)
-                }
-            }
-
-            //Refactor: move to viewerManager.onSessionEnd()
-            g_viewer_manager.pathToViewerImage = {}
-            g_viewer_manager.initImageLayersJson = {}
-            g_viewer_manager.outputImages = []
-
-            g_generation_session.image_paths_to_layers = {}
-        })
-    } catch (e) {
-        console.warn(e)
-    }
-}
-
-// document.getElementById('btnLoadViewer').addEventListener('click', loadViewerImages)
-
-//REFACTOR: move to document.js
-// async function moveHistoryImageToLayer(img) {
-//     let image_path = img.dataset.path
-//     const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
-
-//     // load the image from "data:image/png;base64," base64_str
-//     const base64_image = img.src.replace('data:image/png;base64,', '')
-//     // await base64ToFile(base64_image)
-//     const metadata_json = JSON.parse(img.dataset.metadata_json_string)
-//     const to_x = metadata_json['selection_info']?.left
-//     const to_y = metadata_json['selection_info']?.top
-//     const width = metadata_json['selection_info']?.width
-//     const height = metadata_json['selection_info']?.height
-//     await io.IO.base64ToLayer(
-//         base64_image,
-//         'History Image',
-//         to_x,
-//         to_y,
-//         width,
-//         height
-//     )
-// }
 
 //REFACTOR: move to document.js
 async function loadPromptShortcut() {
@@ -3970,51 +2673,14 @@ function getDimensions(image) {
         // }
     })
 }
-//REFACTOR: move to ui.js
-function scaleThumbnailsEvenHandler(scale_index, max_index, min_index) {
-    const slider_max = max_index
-    const slider_min = min_index
-    const scaler_value = general.mapRange(scale_index, 0, slider_max, 0, 2)
-    g_viewer_manager.thumbnail_scaler = scaler_value
 
-    try {
-        g_viewer_manager.scaleThumbnails(
-            0,
-            0,
-            0,
-            0,
-            g_viewer_manager.thumbnail_scaler
-        )
-    } catch (e) {
-        console.warn(e)
-    }
-}
-//REFACTOR: move to events.js
-document.getElementById('slThumbnailSize').addEventListener('input', (evt) => {
-    scaleThumbnailsEvenHandler(evt.target.value, evt.target.max, evt.target.min)
-})
 //REFACTOR: move to events.js
 document.getElementById('linkWidthHeight').addEventListener('click', (evt) => {
     evt.target.classList.toggle('blackChain')
     const b_state = !evt.target.classList.contains('blackChain') //if doesn't has blackChain means => it's white => b_state == true
     html_manip.setLinkWidthHeightState(b_state)
 })
-//REFACTOR: move to events.js
-document
-    .getElementById('chSquareThumbnail')
-    .addEventListener('click', (evt) => {
-        if (evt.target.checked) {
-            g_viewer_manager.isSquareThumbnail = true
-        } else {
-            g_viewer_manager.isSquareThumbnail = false
-        }
-        const thumbnail_size_slider = document.getElementById('slThumbnailSize')
-        scaleThumbnailsEvenHandler(
-            thumbnail_size_slider.value,
-            thumbnail_size_slider.max,
-            thumbnail_size_slider.min
-        )
-    })
+
 //REFACTOR: move to events.js
 
 function switchMenu(rb) {
@@ -4206,12 +2872,3 @@ document.getElementById('scrollToPrompt').addEventListener('click', () => {
 //         .querySelector('#sp-stable-diffusion-ui-tab-page .reactViewerContainer')
 //         .scrollIntoView()
 // })
-
-// class CustomElement extends HTMLElement {
-//     constructor() {
-//         super()
-//         this.attachShadow({ mode: 'open' })
-//         this.shadowRoot.innerHTML = '<h1>Hello World!</h1>'
-//     }
-// }
-// customElements.define('custom-element', CustomElement)
diff --git a/outpaint.js b/outpaint.js
deleted file mode 100644
index 80cc986..0000000
--- a/outpaint.js
+++ /dev/null
@@ -1,515 +0,0 @@
-const app = window.require('photoshop').app
-
-const batchPlay = require('photoshop').action.batchPlay
-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)
-    })
-}
-
-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)
-        // }
-        //duplicate the layers
-        let duplicatedLayers = []
-
-        // const group_id = await createGroup()
-        const groupLayer = await psapi.createEmptyGroup()
-
-        console.log('createSnapshot(), group_id:', groupLayer.id)
-        // let bHasBackground = false
-        let indexOffset = 0
-
-        const result1 = await executeAsModal(async () => {
-            for (layer of allLayers) {
-                if (layer.id == 1) {
-                    //skip the background layer
-                    // bHasBackground = true
-                    indexOffset = 1
-                    continue
-                }
-                if (layer.visible) {
-                    const copyLayer = await layer.duplicate()
-                    duplicatedLayers.push(copyLayer)
-                }
-            }
-
-            const layerIDs = duplicatedLayers.map((layer) => layer.id)
-            console.log('createSnapshot, layerIDs:', layerIDs)
-
-            //select the layer since layerIDs don't seem to have an affect on moveToGroupCommand(), don't know why!!!!
-            psapi.selectLayers(duplicatedLayers)
-            let group_index = await psapi.getLayerIndex(groupLayer.id)
-
-            await psapi.moveToGroupCommand(group_index - indexOffset, layerIDs)
-
-            await psapi.collapseGroup(duplicatedLayers[0])
-            snapshotLayer = app.activeDocument.activeLayers[0]
-            await psapi.createSolidLayer(255, 255, 255)
-            const whiteSolidLayer = app.activeDocument.activeLayers[0]
-            await snapshotLayer.moveAbove(whiteSolidLayer)
-            snapshotGroup = await psapi.createEmptyGroup()
-            let snapshot_group_index = await psapi.getLayerIndex(
-                snapshotGroup.id
-            )
-
-            await psapi.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)
-    }
-}
-
-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
-
-    try {
-        let snapAndFillLayers = []
-        await executeAsModal(async (context) => {
-            const history_id = await context.hostControl.suspendHistory({
-                documentID: app.activeDocument.id, //TODO: change this to the session document id
-                name: 'Img2Img layers',
-            })
-            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'
-
-            // 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()
-
-            await psapi.selectLayers([snapshotGroup])
-            await psapi.reSelectMarqueeExe(selectionInfo)
-            await psapi.createClippingMaskExe()
-
-            await psapi.selectLayers([snapshotGroup])
-
-            snapAndFillLayers = [snapshotLayer, snapshotGroup, whiteSolidLayer]
-
-            // g_init_image_related_layers['init_image_group'] = snapshotGroup
-            // g_init_image_related_layers['init_image_layer'] = snapshotLayer
-            // g_init_image_related_layers['solid_white'] = whiteSolidLayer
-
-            const image_info = await psapi.silentSetInitImage(
-                snapshotGroup,
-                session_id
-            )
-            const image_name = image_info['name']
-            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
-
-            for (layer of snapAndFillLayers) {
-                layer.visible = false
-            }
-            await psapi.reSelectMarqueeExe(selectionInfo)
-            const layer_util = require('./utility/layer')
-            await layer_util.collapseFolderExe([snapshotGroup], false)
-            await context.hostControl.resumeHistory(history_id)
-        })
-        console.log('snapAndFillLayers: ', snapAndFillLayers)
-        return snapAndFillLayers
-    } catch (e) {
-        console.error(`snapAndFill 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
-
-    ////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
-
-    try {
-        let outpaintLayers = []
-        await executeAsModal(async (context) => {
-            const history_id = await context.hostControl.suspendHistory({
-                documentID: app.activeDocument.id, //TODO: change this to the session document id
-                name: 'Outpaint Mask Related layers',
-            })
-            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,
-            ])
-
-            //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()
-
-            // 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)
-
-            const mask_info = await psapi.silentSetInitImageMask(
-                snapshotMaskGroup,
-                session_id
-            )
-            snapshotMaskGroup.visible = false
-
-            const image_info = await psapi.silentSetInitImage(
-                snapshotGroup,
-                session_id
-            )
-            snapshotGroup.visible = false
-
-            const init_image_name = image_info['name']
-            const init_path = `./server/python_server/init_images/${init_image_name}`
-
-            await psapi.reSelectMarqueeExe(selectionInfo)
-
-            await addClippingMaskToLayer(snapshotMaskGroup, selectionInfo)
-
-            await psapi.reSelectMarqueeExe(selectionInfo)
-
-            const mask_name = mask_info['name']
-            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,
-                mask_info['base64']
-            )
-            // 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
-            }
-
-            //collapse the folders
-            const layer_util = require('./utility/layer')
-            await layer_util.collapseFolderExe(
-                [snapshotGroup, snapshotMaskGroup],
-                false
-            )
-            await context.hostControl.resumeHistory(history_id)
-        })
-        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 (context) => {
-            const history_id = await context.hostControl.suspendHistory({
-                documentID: app.activeDocument.id,
-                name: 'Inpaint Mask Related layers',
-            })
-            const original_white_mark_layer = await app.activeDocument
-                .activeLayers[0]
-            original_white_mark_layer.visible = false
-
-            const selectionInfo = await psapi.getSelectionInfoExe()
-
-            //duplicate the current active layer and use it as the white mark layer
-            const white_mark_layer =
-                await app.activeDocument.activeLayers[0].duplicate()
-            white_mark_layer.visible = true
-            const mask_layer_opacity = await white_mark_layer.opacity
-            white_mark_layer.opacity = 100 //make sure the opacity is full
-            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
-
-            //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()
-
-            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)
-
-            const maskGroup = await psapi.createEmptyGroup()
-            // maskGroup.name = `${maskGroup.name}_mask`
-
-            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)
-
-            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()
-
-            // 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([snapshotGroup])
-
-            await psapi.selectLayers([maskGroup])
-
-            const mask_info = await psapi.silentSetInitImageMask(
-                maskGroup,
-                session_id
-            )
-            maskGroup.visible = false
-            //hide the mask so you can take screenshot of the init image
-            const mask_name = mask_info['name']
-            const mask_path = `./server/python_server/init_images/${mask_name}`
-
-            await psapi.reSelectMarqueeExe(selectionInfo)
-            await psapi.selectLayers([snapshotGroup])
-
-            const image_info = await psapi.silentSetInitImage(
-                snapshotGroup,
-                session_id
-            )
-            const image_name = image_info['name']
-            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.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,
-                mask_info['bases64']
-            )
-            // 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 layer_util = require('./utility/layer')
-
-            await layer_util.collapseFolderExe(
-                [snapshotGroup, maskGroup],
-                false
-            )
-            white_mark_layer.opacity = mask_layer_opacity // restore the opacity
-            // original_white_mark_layer.visible = true// leave it off so we can toggle using the viewer manager
-            await context.hostControl.resumeHistory(history_id)
-        })
-        return inpaintLayers
-    } catch (e) {
-        console.warn('inpaintFasterExe error:', e)
-    }
-    return []
-}
-module.exports = {
-    createSnapshot,
-
-    moveLayersToGroup,
-    executeCommand,
-    outpaintExe,
-    // outpaintFasterExe,
-    inpaintFasterExe,
-    snapAndFillExe,
-    addClippingMaskToLayer,
-}
diff --git a/psapi.js b/psapi.js
index 9138e41..151ca17 100644
--- a/psapi.js
+++ b/psapi.js
@@ -931,7 +931,7 @@ async function silentSetInitImageMask(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 {
diff --git a/typescripts/locale/locale-for-old-html.ts b/typescripts/locale/locale-for-old-html.ts
index dfcb23a..4343bde 100644
--- a/typescripts/locale/locale-for-old-html.ts
+++ b/typescripts/locale/locale-for-old-html.ts
@@ -24,13 +24,13 @@ const elemSelectorForLocale = {
     '#rbLexica': 'Lexica',
     '#viewerSubTab .flexContainer sp-label':
         'View your generated images on the canvas',
-    '#btnSetMaskViewer': 'Set Mask',
-    '#btnSetInitImageViewer': 'Set Init Image',
+    // '#btnSetMaskViewer': 'Set Mask',
+    // '#btnSetInitImageViewer': 'Set Init Image',
     '#btnInterruptViewer': 'Interrupt',
     // '#btnSelectionArea': 'Selection Area',
 
     // extra tab
-    '#slThumbnailSize sp-label': 'Thumbnail Size',
+    // '#slThumbnailSize sp-label': 'Thumbnail Size',
     '#chSquareThumbnail': 'Square 1:1',
     '#btnGenerateUpscale': 'Generate upscale',
     '#btnInterruptUpscale': 'Interrupt',
diff --git a/utility/html_manip.js b/utility/html_manip.js
index 9fc7ae0..900e418 100644
--- a/utility/html_manip.js
+++ b/utility/html_manip.js
@@ -585,18 +585,6 @@ function setInitImageMaskSrc(image_src) {
 
 ////// Start Generate Buttons //////////
 
-function getGenerateButtonsElements() {
-    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)
-    })
-}
-
 ////// End Generate Buttons //////////
 
 ////// Start Servers Status //////////
@@ -1105,7 +1093,7 @@ module.exports = {
     getMode,
     setInitImageSrc,
     setInitImageMaskSrc,
-    setGenerateButtonsColor,
+
     setAutomaticStatus,
     setProxyServerStatus,
     defaultSettings,
diff --git a/utility/sdapi/horde_native.js b/utility/sdapi/horde_native.js
index 1179b03..d5ff949 100644
--- a/utility/sdapi/horde_native.js
+++ b/utility/sdapi/horde_native.js
@@ -312,9 +312,7 @@ class hordeGenerator {
             console.warn(e)
         }
     }
-    async postGeneration() {
-        toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
-    }
+
     async processHordeResult() {
         //*) get the result from the horde server
         //*) save them locally to output directory
diff --git a/utility/session.js b/utility/session.js
index 19c07d5..5d4a89f 100644
--- a/utility/session.js
+++ b/utility/session.js
@@ -2,7 +2,7 @@ const { cleanLayers } = require('../psapi')
 const psapi = require('../psapi')
 const io = require('./io')
 const Enum = require('../enum')
-const { ViewerManager } = require('../viewer')
+
 const { base64ToBase64Url } = require('./general')
 const html_manip = require('./html_manip')
 const layer_util = require('./layer')
@@ -59,95 +59,7 @@ class GenerationSession {
     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)
-            await executeAsModal(async () => {
-                outputGroup.allLocked = true //lock the session folder so that it can't move
-            })
-            this.outputGroup = outputGroup
-            await psapi.selectLayersExe(activeLayers)
-        } catch (e) {
-            console.warn(e)
-        }
-    }
-
-    async endSession(garbage_collection_state) {
-        try {
-            if (!this.isActive()) {
-                //return if the session is not active
-                return null
-            }
-            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_generation_session.selectionInfo = {}
-
-            this.isFirstGeneration = true // only before the first generation is requested should this be true
-            // const is_visible = await this.outputGroup.visible
-            g_viewer_manager.last_selected_viewer_obj = null // TODO: move this in viewerManager endSession()
-            g_viewer_manager.onSessionEnd()
-            await layer_util.collapseFolderExe([this.outputGroup], false) // close the folder group
-            await executeAsModal(async () => {
-                this.outputGroup.allLocked = false //unlock the session folder on session end
-            })
-            // 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 layer_util.deleteLayers([g_inpaint_mask_layer])
-                await createTempInpaintMaskLayer()
-            }
-            //delete controlNet image, Note: don't delete control net, let the user disable controlNet if doesn't want to use it
-            // this.controlNetImage = null
-            // html_manip.setControlImageSrc('https://source.unsplash.com/random')
-        } catch (e) {
-            console.warn(e)
-        }
-    }
-    // initializeInitImage(group, snapshot, solid_background, path) {
-    //     this.initGroup = group
-    //     this.init_solid_background = solid_background
-    //     this.InitSnapshot = snapshot
-    // }
     deleteInitImageLayers() {}
     async closePreviousOutputGroup() {
         try {
diff --git a/utility/ui.js b/utility/ui.js
index 8bfc4ab..9091533 100644
--- a/utility/ui.js
+++ b/utility/ui.js
@@ -7,130 +7,8 @@ const { executeAsModal } = require('photoshop').core
 
 class UI {
     constructor() {}
-
-    onStartSessionUI() {
-        // will toggle the buttons needed when a generation session start
-
-        const accept_class_btns = Array.from(
-            document.getElementsByClassName('acceptClass')
-        )
-
-        const discard_class_btns = Array.from(
-            document.getElementsByClassName('discardClass')
-        )
-
-        const discard_selected_class_btns = Array.from(
-            document.getElementsByClassName('discardSelectedClass')
-        )
-
-        const accept_selected_class_btns = Array.from(
-            document.getElementsByClassName('acceptSelectedClass')
-        )
-
-        //show the accept and discard buttons when a new session is active
-        accept_class_btns.forEach(
-            (element) => (element.style.display = 'inline-block')
-        )
-        discard_class_btns.forEach(
-            (element) => (element.style.display = 'inline-block')
-        )
-        discard_selected_class_btns.forEach(
-            (element) => (element.style.display = 'inline-block')
-        )
-        accept_selected_class_btns.forEach(
-            (element) => (element.style.display = 'inline-block')
-        )
-
-        this.generateMoreUI()
-    }
-    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')
-        )
-        const generation_mode = g_generation_session.mode
-        const generation_name = getCurrentGenerationModeByValue(generation_mode)
-        generate_btns.forEach((element) => {
-            element.textContent = `Generate More ${generation_name}`
-        })
-        html_manip.setGenerateButtonsColor('generate-more', 'generate')
-    }
-
-    onEndSessionUI() {
-        const accept_class_btns = Array.from(
-            document.getElementsByClassName('acceptClass')
-        )
-
-        const discard_class_btns = Array.from(
-            document.getElementsByClassName('discardClass')
-        )
-        const discard_selected_class_btns = Array.from(
-            document.getElementsByClassName('discardSelectedClass')
-        )
-
-        const accept_selected_class_btns = Array.from(
-            //Node: change customClass to acceptSelectedClass
-            document.getElementsByClassName('acceptSelectedClass')
-        )
-
-        accept_class_btns.forEach((element) => (element.style.display = 'none'))
-        discard_class_btns.forEach(
-            (element) => (element.style.display = 'none')
-        )
-        discard_selected_class_btns.forEach(
-            (element) => (element.style.display = 'none')
-        )
-
-        accept_selected_class_btns.forEach(
-            (element) => (element.style.display = 'none')
-        )
-
-        this.generateModeUI(g_sd_mode)
-    }
-
-    setGenerateBtnText(textContent) {
-        const generate_btns = Array.from(
-            document.getElementsByClassName('btnGenerateClass')
-        )
-        generate_btns.forEach((element) => {
-            element.textContent = textContent
-        })
-    }
 }
 
-// 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
-//   }
-
 class UIElement {
     constructor() {
         this.name
diff --git a/viewer.js b/viewer.js
deleted file mode 100644
index c11d343..0000000
--- a/viewer.js
+++ /dev/null
@@ -1,860 +0,0 @@
-// output image class: one image to one layer
-// 	* path:
-// 	* image layer
-// 	* viewer()
-// 	* select()
-
-// * init image class: has three layers
-// 	* path :
-// 	* init image group layer
-// 	* init image layer
-// 	* background layer
-
-// * mask class:
-// 	* path
-// 	* mask group
-// 	* white mask
-// 	* balck layer
-// 	* select()
-// 	* viewe()
-const general = require('./utility/general')
-const Enum = require('./enum')
-const psapi = require('./psapi')
-const layer_util = require('./utility/layer')
-const thumbnail = require('./thumbnail')
-const ViewerObjState = {
-    Delete: 'delete',
-    Unlink: 'unlink',
-}
-
-class ViewerImage {
-    constructor() {
-        this.img_html = null //
-        this.thumbnail_container = null
-        this.is_highlighted = false
-        this.can_highlight = true
-        this.is_active = false // active is a temporary highlight , the yellow/orang highlight
-        this.state = ViewerObjState['Unlink']
-
-        // true will delete the layers from the layer stacks when the session ends,
-        // false mean use this.state to determine whither you delete the layer or not
-        this.autoDelete = false
-        this.viewerManager = null // store link to the viewer manager of this document
-        this.viewerObjectType
-        this.objectId
-    }
-    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')
-        }
-        this.is_active = isActive
-    }
-    setAutoDelete(auto_delete) {
-        this.autoDelete = auto_delete
-    }
-
-    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() {}
-
-    async delete() {
-        try {
-            if (this.img_html) {
-                this.img_html.remove() //delete the img html element
-            }
-            if (this.thumbnail_container) {
-                this.thumbnail_container.remove()
-            }
-
-            //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)
-        }
-    }
-
-    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)
-        }
-    }
-
-    createThumbnailNew(img, _) {
-        this.img_html = img
-        this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
-            img,
-            'viewer-image-container'
-        )
-        thumbnail.Thumbnail.addSPButtonToContainer(
-            this.thumbnail_container,
-            'svg_sp_btn',
-            'Use this as an initial image',
-
-            this.useOutputImageAsInitImage,
-            img
-        )
-    }
-    useOutputImageAsInitImage = async () => {
-        //set init image event listener, use when settion is active
-        // const layer = await app.activeDocument.activeLayers[0]
-        try {
-            // console.log('this.img_html:', this.img_html)
-            // await executeAsModal(() => {
-            //     this.visible(true)
-            // })
-            // await this.select(true) //select() does take arguments
-            // this.active(true)
-            await executeAsModal(async () => {
-                await this.click(Enum.clickTypeEnum['Click'])
-            })
-
-            const layer = layer_util.Layer.doesLayerExist(this.layer)
-                ? this.layer
-                : await app.activeDocument.activeLayers[0]
-
-            // const layer = this.layer
-            const image_info = await psapi.silentSetInitImage(
-                layer,
-                random_session_id
-            )
-            const image_name = image_info['name']
-            const path = `./server/python_server/init_images/${image_name}`
-            g_viewer_manager.addInitImageLayers(layer, path, false)
-            await g_viewer_manager.loadInitImageViewerObject(path)
-        } catch (e) {
-            console.warn(e)
-        }
-    }
-    createThumbnail(img, b_button_visible = true) {
-        this.img_html = img
-        // Create new container element
-        this.thumbnail_container = document.createElement('div')
-
-        this.thumbnail_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";
-        if (!b_button_visible) {
-            button.style.display = 'none'
-        }
-        button.addEventListener('click', async () => {
-            await useOutputImageAsInitImage()
-        })
-
-        // Append elements to container
-        this.thumbnail_container.appendChild(this.img_html)
-        this.thumbnail_container.appendChild(button)
-
-        // this.img_html = container
-    }
-}
-
-class OutputImage extends ViewerImage {
-    constructor(layer, path, viewer_manager) {
-        super()
-        this.layer = layer
-        this.path = path
-        this.img_html = null
-        this.viewerManager = viewer_manager
-        this.viewerObjectType = Enum.ViewerObjectTypeEnum['OutputImage']
-        this.objectId = path // the path is unique, so we will use it as an id
-    }
-    async click(click_type) {
-        console.log('click_type: ', click_type)
-        // if (this.isActive() && click_type === Enum.clickTypeEnum['Click']) {
-        //     //convert consecutive clicks to AltClick
-        //     click_type = Enum.clickTypeEnum['SecondClick']
-        //     console.log('converted click_type: ', click_type)
-        // }
-
-        if (click_type === Enum.clickTypeEnum['Click']) {
-            //select layer
-            //turn the layer visible
-            //set the layer to active
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.active(true)
-        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.setHighlight(true)
-            this.active(true)
-            // if (this.viewerManager.last_selected_viewer_obj) {
-            //     //if the last selected layer is valid then converted last selected layer into highlight layer
-            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
-            // }
-        } else if (click_type === Enum.clickTypeEnum['AltClick']) {
-            // this.viewerManager.last_selected_viewer_obj = null
-            this.setHighlight(false)
-            this.visible(false)
-            this.active(false)
-
-            await psapi.unselectActiveLayersExe() //Note:can we move to ViewerManager.click()
-        } else if (click_type === Enum.clickTypeEnum['SecondClick']) {
-            //select layer
-            //turn the layer visible
-            //set the layer to active
-            this.visible(false)
-            await this.select(false) //select() does take arguments
-            this.active(false)
-        }
-        this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-    }
-    visible(visibleOn) {
-        //turn the visibility for the layer
-        try {
-            super.visible(visibleOn)
-            if (layer_util.Layer.doesLayerExist(this.layer)) {
-                this.layer.visible = visibleOn
-            }
-        } catch (e) {
-            console.warn(e)
-        }
-    }
-    async select() {
-        //select the layer
-        super.select()
-        if (layer_util.Layer.doesLayerExist(this.layer)) {
-            await psapi.selectLayersExe([this.layer])
-            //   console.log(`${this.layer.id} got selected`);
-        }
-    }
-
-    isSameLayer(layer_id) {
-        super.isSameLayer(layer_id)
-        const is_same = this.layer.id == layer_id
-        return is_same
-    }
-    isSameObject(object) {
-        if (
-            layer_util.Layer.doesLayerExist(this.layer) &&
-            layer_util.Layer.doesLayerExist(object.layer)
-        ) {
-            return this.layer.id === object.layer.id
-        }
-        return false
-    }
-
-    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)
-        }
-    }
-    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
-
-    //   }catch(e){
-    //     console.warn(e)
-    //   }
-    // }
-}
-
-class InitImage extends ViewerImage {
-    constructor(init_group, init_snapshot, solid_layer, path, viewer_manager) {
-        super()
-        this.init_group = init_group
-        this.init_snapshot = init_snapshot
-        this.solid_layer = solid_layer
-
-        this.path = path
-        this.can_highlight = false
-        this.viewerManager = viewer_manager
-        this.viewerObjectType = Enum.ViewerObjectTypeEnum['InitImage']
-        this.objectId = path // the path is unique, so we will use it as an id
-        // if (this.autoDelete === false){
-        //   this.state = ViewerObjState['Unlink']
-        // }
-    }
-    async click(click_type) {
-        if (click_type === Enum.clickTypeEnum['Click']) {
-            //select layer
-            //turn the layer visible
-            //set the layer to active
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.active(true)
-            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
-            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.active(true)
-            // if (this.viewerManager.last_selected_viewer_obj) {
-            //     //if the last selected layer is valid then converted last selected layer into highlight layer
-            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
-            // }
-            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
-            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-        }
-        // else if (click_type === Enum.clickTypeEnum['AltClick']) {
-        //     // this.viewerManager.last_selected_viewer_obj = null
-        //     this.setHighlight(false)
-        //     this.visible(false)
-        //     this.active(false)
-
-        //     await psapi.unselectActiveLayersExe() //Note:can we move to ViewerManager.click()
-        // }
-        // this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-    }
-    visible(visibleOn) {
-        try {
-            super.visible(visibleOn)
-
-            let visibleValues = []
-            if (visibleOn) {
-                visibleValues = [true, true, true]
-            } else {
-                visibleValues = [false, false, false]
-            }
-
-            if (layer_util.Layer.doesLayerExist(this.init_group)) {
-                this.init_group.visible = visibleValues[0]
-            }
-            if (layer_util.Layer.doesLayerExist(this.init_snapshot)) {
-                this.init_snapshot.visible = visibleValues[1]
-            }
-
-            if (layer_util.Layer.doesLayerExist(this.solid_layer)) {
-                this.solid_layer.visible = visibleValues[2]
-            }
-
-            if (!this.autoDelete) {
-                //means it's not the first init image
-
-                if (layer_util.Layer.doesLayerExist(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)
-        }
-    }
-
-    async select() {
-        super.select()
-
-        const selectLayers = []
-        if (layer_util.Layer.doesLayerExist(this.init_group)) {
-            selectLayers.push(this.init_group)
-        }
-
-        await psapi.selectLayersExe(selectLayers)
-        //   console.log(`${this.layer.id} got selected`);
-    }
-
-    isSameLayer(layer_id) {
-        super.isSameLayer(layer_id)
-        let is_same = false
-        if (layer_util.Layer.doesLayerExist(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, viewer_manager) {
-        super()
-        this.mask_group = mask_group
-        this.white_mark = white_mark
-        this.solid_black = solid_black
-
-        this.path = path
-        this.can_highlight = false
-        this.viewerManager = viewer_manager
-        this.viewerObjectType = Enum.ViewerObjectTypeEnum['MaskImage']
-        this.objectId = path // the path is unique, so we will use it as an id
-    }
-    async click(click_type) {
-        if (click_type === Enum.clickTypeEnum['Click']) {
-            //select layer
-            //turn the layer visible
-            //set the layer to active
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.active(true)
-            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
-            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
-            this.visible(true)
-            await this.select(true) //select() does take arguments
-            this.active(true)
-            // if (this.viewerManager.last_selected_viewer_obj) {
-            //     //if the last selected layer is valid then converted last selected layer into highlight layer
-            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
-            // }
-            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
-            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
-        }
-    }
-    visible(visibleOn) {
-        try {
-            super.visible(visibleOn)
-
-            let visibleValues = []
-            if (visibleOn) {
-                visibleValues = [true, true, false]
-            } else {
-                visibleValues = [false, false, false]
-            }
-
-            if (layer_util.Layer.doesLayerExist(this.mask_group)) {
-                this.mask_group.visible = visibleValues[0]
-            }
-            if (layer_util.Layer.doesLayerExist(this.white_mark)) {
-                this.white_mark.visible = visibleValues[1]
-            }
-            if (layer_util.Layer.doesLayerExist(this.solid_black)) {
-                this.solid_black.visible = visibleValues[2]
-            }
-        } catch (e) {
-            console.warn(e)
-        }
-    }
-
-    async select() {
-        super.select()
-
-        const selectLayers = []
-
-        if (layer_util.Layer.doesLayerExist(this.white_mark)) {
-            selectLayers.push(this.white_mark)
-        }
-
-        await psapi.selectLayersExe(selectLayers)
-        //   console.log(`${this.layer.id} got selected`);
-    }
-
-    isSameLayer(layer_id) {
-        super.isSameLayer(layer_id)
-        let is_same = false
-        if (layer_util.Layer.doesLayerExist(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)
-        }
-    }
-    createThumbnailNew(img, _) {
-        this.img_html = img
-        this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
-            img,
-            'viewer-image-container'
-        )
-        thumbnail.Thumbnail.addSPButtonToContainer(
-            this.thumbnail_container,
-            'svg_sp_btn',
-            'update the mask',
-            setMaskViewer,
-            img
-        )
-    }
-}
-
-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
-    }
-}
-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
-    }
-}
-class ViewerManager {
-    //viewer manager will reset after the end of the session
-    //it will store
-    constructor() {
-        this.outputImages = []
-        this.initImages = []
-        this.initMaskImage
-        this.pathToViewerImage = {} // quick way to check if an link image path on disk to ViewerImage object.
-        this.initImageLayersJson = {} //{path: initImageLayers}
-
-        this.selectedOutputImages = {} //store the selected output images {path: outputImage}
-
-        this.mask_layer
-        this.maskLayersJson = {} //{path: MaskLayers}
-
-        //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
-        this.thumbnail_scaler = 1
-        this.isSquareThumbnail = false
-        this.init_image_container = document.getElementById(
-            'divInitImageViewerContainer'
-        )
-    }
-
-    replaceLastSelection(click_type, clicked_object) {
-        if (
-            this.last_selected_viewer_obj && // is valid last selected object
-            this.last_selected_viewer_obj.objectId !== clicked_object.objectId // not the same object
-
-            // clicked_object instanceof OutputImage &&
-            // !clicked_object.isSameObject(this.last_selected_viewer_obj)
-        ) {
-            //if the current selection and the last selection are different
-
-            this.last_selected_viewer_obj.visible(false)
-            this.last_selected_viewer_obj.active(false)
-        }
-        if (click_type === Enum.clickTypeEnum['Click']) {
-            this.last_selected_viewer_obj = clicked_object
-        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
-            if (this.last_selected_viewer_obj) {
-                //if the last selected layer is valid then converted last selected layer into highlight layer
-                this.last_selected_viewer_obj.setHighlight(true)
-            }
-            this.last_selected_viewer_obj = clicked_object
-        } else if (click_type === Enum.clickTypeEnum['AltClick']) {
-            this.last_selected_viewer_obj = null
-        } else if (click_type === Enum.clickTypeEnum['SecondClick']) {
-            this.last_selected_viewer_obj = null
-        }
-    }
-    initializeInitImage(group, snapshot, solid_background, path) {
-        console.warn('this method is deprecated, use the session.js method ')
-        this.initGroup = group
-        this.init_solid_background = solid_background
-        this.addInitImageLayers(snapshot, path, true)
-    }
-    initializeMask(group, white_mark, solid_background, path, base64) {
-        this.maskGroup = group
-        this.mask_solid_background = solid_background
-        this.addMaskLayers(white_mark, path, true, base64)
-    }
-    addMaskLayers(white_mark, path, auto_delete, base64) {
-        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
-                )
-                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
-                this.pathToViewerImage[path].img_html.src = base64ToSrc(base64)
-            }
-        } 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)
-
-        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,
-            this
-        )
-        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
-        )
-
-        this.initMaskImage = mask
-        this.pathToViewerImage[path] = mask
-        return mask
-    }
-
-    scaleThumbnails(
-        original_width,
-        original_height,
-        min_width,
-        min_height,
-        scaler
-    ) {
-        //calculate the new width and height
-
-        const image_width = this.isSquareThumbnail
-            ? 100
-            : g_generation_session.last_settings.width
-        const image_height = this.isSquareThumbnail
-            ? 100
-            : g_generation_session.last_settings.height
-
-        const [new_width, new_height] = general.scaleToClosestKeepRatio(
-            image_width,
-            image_height,
-            100,
-            100
-        )
-        const [scaled_width, scaled_height] = [
-            new_width * scaler,
-            new_height * scaler,
-        ]
-
-        for (let outputImage of this.outputImages) {
-            //get the image and it's container
-            const img = outputImage.img_html
-            const img_container = img.parentElement
-
-            img_container.style.width = scaled_width
-            img_container.style.height = scaled_height
-            img.style.width = scaled_width
-            img.style.height = scaled_height
-            //scale them to the new dimensions
-        }
-    }
-    onSessionEnd() {
-        this.outputImages = []
-        this.initImages = []
-        this.initMaskImage = null
-
-        this.pathToViewerImage = {} // quick way to check if an link image path on disk to ViewerImage object.
-        this.initImageLayersJson = {} //{path: initImageLayers}
-
-        this.selectedOutputImages = {} //store the selected output images {path: outputImage}
-
-        this.mask_layer = null
-        this.maskLayersJson = {} //{path: MaskLayers}
-
-        //Note:move initGroup, to GenerationSession
-        this.initGroup = null
-        this.init_solid_background = null
-        this.maskGroup = null
-        this.mask_solid_background = null
-
-        //last_selected_obj
-        this.last_selected_viewer_obj = null
-        // this.thumbnail_scaler = 1
-        // this.isSquareThumbnail = false
-    }
-
-    async loadInitImageViewerObject(path) {
-        if (!g_viewer_manager.hasViewerImage(path)) {
-            const group = this.initImageLayersJson[path].group
-            const snapshot = this.initImageLayersJson[path].snapshot
-            const solid_background =
-                this.initImageLayersJson[path].solid_background
-            const auto_delete = this.initImageLayersJson[path].autoDelete
-            const base64_image = g_generation_session.base64initImages[path]
-            await loadInitImageViewerObject(
-                group,
-                snapshot,
-                solid_background,
-                path,
-                auto_delete,
-                base64_image
-            )
-        }
-    }
-    deleteAll() {}
-    keepAll() {}
-    keepSelected() {}
-    deleteSelected() {}
-    deleteInitImages() {}
-    deleteMask() {}
-}
-
-module.exports = {
-    OutputImage,
-    InitImage,
-    InitMaskImage,
-    ViewerObjState,
-    ViewerManager,
-}