From a8823cfe27761997f48daaabf31f83f0af78ad4f Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:10:12 +0300
Subject: [PATCH 1/9] formatting

---
 index.js | 73 +++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/index.js b/index.js
index bae03b7..c2a5d49 100644
--- a/index.js
+++ b/index.js
@@ -38,6 +38,7 @@ const io = require('./utility/io')
 const dummy = require('./utility/dummy')
 const general = require('./utility/general')
 const thumbnail = require('./thumbnail')
+const note = require('./utility/notification')
 let g_horde_generator = new horde_native.hordeGenerator()
 
 //REFACTOR: move to session.js
@@ -3629,7 +3630,7 @@ async function deleteNoneSelected(viewer_objects) {
             g_viewer_manager.initImageLayersJson = {}
             g_viewer_manager.outputImages = []
             //
-            
+
             g_generation_session.image_paths_to_layers = {}
         })
     } catch (e) {
@@ -3669,10 +3670,25 @@ document
                 )
                 console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
 
-                const img_container = thumbnail.Thumbnail.wrapImgInContainer(img,'viewer-image-container')
-                thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn', 'place the image on the canvas', moveHistoryImageToLayer, img)
-                thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn_datadownload', 'download history data to current settings', getHistoryMetadata, img)
-                container.appendChild(img_container)                
+                const img_container = thumbnail.Thumbnail.wrapImgInContainer(
+                    img,
+                    'viewer-image-container'
+                )
+                thumbnail.Thumbnail.addSPButtonToContainer(
+                    img_container,
+                    'svg_sp_btn',
+                    'place the image on the canvas',
+                    moveHistoryImageToLayer,
+                    img
+                )
+                thumbnail.Thumbnail.addSPButtonToContainer(
+                    img_container,
+                    'svg_sp_btn_datadownload',
+                    'download history data to current settings',
+                    getHistoryMetadata,
+                    img
+                )
+                container.appendChild(img_container)
                 i++
             }
         } catch (e) {
@@ -3680,35 +3696,32 @@ document
         }
     })
 
-    function getHistoryMetadata(img){
-        // debugger
-        //auto fill the ui with metadata
-        const metadata_json = JSON.parse(
-            img.dataset.metadata_json_string
-        )
-        console.log('metadata_json: ', metadata_json)
-        // document.querySelector('#tiSeed').value = metadata_json.Seed
+function getHistoryMetadata(img) {
+    // debugger
+    //auto fill the ui with metadata
+    const metadata_json = JSON.parse(img.dataset.metadata_json_string)
+    console.log('metadata_json: ', metadata_json)
+    // document.querySelector('#tiSeed').value = metadata_json.Seed
 
-        //extract auto_metadata into the preset metadata
-        function convertAutoMetadataToPresset(metadata_json) {
-            metadata_json['seed'] =
-                metadata_json?.auto_metadata?.Seed
-        }
-        convertAutoMetadataToPresset(metadata_json)
-        document.querySelector('#historySeedLabel').textContent =
-            metadata_json?.seed
-        // autoFillInSettings(metadata_json)
-        g_ui_settings.autoFillInSettings(metadata_json)
+    //extract auto_metadata into the preset metadata
+    function convertAutoMetadataToPresset(metadata_json) {
+        metadata_json['seed'] = metadata_json?.auto_metadata?.Seed
     }
+    convertAutoMetadataToPresset(metadata_json)
+    document.querySelector('#historySeedLabel').textContent =
+        metadata_json?.seed
+    // autoFillInSettings(metadata_json)
+    g_ui_settings.autoFillInSettings(metadata_json)
+}
 
-    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"
+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)
-    }
+    // load the image from "data:image/png;base64," base64_str
+    const base64_image = img.src.replace('data:image/png;base64,', '')
+    await base64ToFile(base64_image)
+}
 
 document
     .getElementById('btnImageSearch')

From 5d16bfefcaa78a6f300fceca8f62a36fe46bd940 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:20:37 +0300
Subject: [PATCH 2/9] deprecate createSolidLayer instead use the descriptor
 method

---
 psapi.js         |  1 +
 utility/layer.js | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/psapi.js b/psapi.js
index 7945cae..4830c2b 100644
--- a/psapi.js
+++ b/psapi.js
@@ -9,6 +9,7 @@ const storage = require('uxp').storage
 const fs = storage.localFileSystem
 
 async function createSolidLayer(r, g, b) {
+    console.warn('this function is deprecated')
     await executeAsModal(async () => {
         const result = await batchPlay(
             [
diff --git a/utility/layer.js b/utility/layer.js
index b48cf72..8df7dfd 100644
--- a/utility/layer.js
+++ b/utility/layer.js
@@ -240,7 +240,29 @@ const makeBackgroundLayerDesc = () => ({
     // },
 })
 
-async function createBackgroundLayer() {
+const createSolidLayerDesc = (r, g, b) => ({
+    _obj: 'make',
+    _target: [
+        {
+            _ref: 'contentLayer',
+        },
+    ],
+    using: {
+        _obj: 'contentLayer',
+        type: {
+            _obj: 'solidColorLayer',
+            color: {
+                _obj: 'RGBColor',
+                red: r,
+                grain: g,
+                blue: b,
+            },
+        },
+    },
+    _options: {
+        dialogOptions: 'dontDisplay',
+    },
+})
     try {
         const has_background = await hasBackgroundLayer()
         if (has_background) {

From c097ba85e147ddf6c99b2bd7e2fd9058c9e4b0b0 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:21:14 +0300
Subject: [PATCH 3/9] add an option to choose the background layer color

---
 utility/layer.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/utility/layer.js b/utility/layer.js
index 8df7dfd..90f2755 100644
--- a/utility/layer.js
+++ b/utility/layer.js
@@ -263,6 +263,7 @@ const createSolidLayerDesc = (r, g, b) => ({
         dialogOptions: 'dontDisplay',
     },
 })
+async function createBackgroundLayer(r = 255, g = 255, b = 255) {
     try {
         const has_background = await hasBackgroundLayer()
         if (has_background) {
@@ -270,12 +271,15 @@ const createSolidLayerDesc = (r, g, b) => ({
             return null
         }
         await executeAsModal(async () => {
-            await createNewLayerCommand('background') //create layer
+            // await createNewLayerCommand('background') //create layer
             //make the layer into background
-            const result = await batchPlay([makeBackgroundLayerDesc()], {
-                synchronousExecution: true,
-                modalBehavior: 'execute',
-            })
+            const result = await batchPlay(
+                [createSolidLayerDesc(r, g, b), makeBackgroundLayerDesc()],
+                {
+                    synchronousExecution: true,
+                    modalBehavior: 'execute',
+                }
+            )
         })
     } catch (e) {
         console.warn(e)
@@ -294,4 +298,6 @@ module.exports = {
     Layer,
     hasBackgroundLayer,
     createBackgroundLayer,
+    createSolidLayerDesc,
+    makeBackgroundLayerDesc,
 }

From 4d081dbf5087e841ae62c7037e77eb8bbc51afc8 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:23:48 +0300
Subject: [PATCH 4/9] add a notification utility class for display error
 messages to the user

---
 utility/notification.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 utility/notification.js

diff --git a/utility/notification.js b/utility/notification.js
new file mode 100644
index 0000000..dd4133c
--- /dev/null
+++ b/utility/notification.js
@@ -0,0 +1,9 @@
+const dialog_box = require('../dialog_box')
+const { createBackgroundLayer } = require('./layer')
+class Notification {
+    static {}
+}
+
+module.exports = {
+    Notification,
+}

From 8be47f74fd224f4715e183ec99f990eb8547846f Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:25:11 +0300
Subject: [PATCH 5/9] error messages for when webui is offline and when webui
 api flag is missing

---
 utility/notification.js | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/utility/notification.js b/utility/notification.js
index dd4133c..20fece0 100644
--- a/utility/notification.js
+++ b/utility/notification.js
@@ -2,6 +2,46 @@ const dialog_box = require('../dialog_box')
 const { createBackgroundLayer } = require('./layer')
 class Notification {
     static {}
+    static async webuiIsOffline() {
+        const r1 = await dialog_box.prompt(
+            "Automatic1111 is Offline, make sure it's running in the background",
+            '',
+            ['Cancel', 'How To', 'OK']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'OK') {
+                console.log('ok')
+            } else if (r1 === 'How To') {
+                console.log('How to')
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async webuiAPIMissing() {
+        const r1 = await dialog_box.prompt(
+            "Automatic1111 is running, but you've forgotten to add --api flag, so the plugin can communicate with it",
+            '',
+            ['Cancel', 'How To', 'OK']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'OK') {
+                console.log('ok')
+            } else if (r1 === 'How To') {
+                console.log('How to')
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
 }
 
 module.exports = {

From ecd34a83d4ba16f49a76e2a5aaf52563f3da8ffb Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 11:25:33 +0300
Subject: [PATCH 6/9] error message for when background layer is missing

---
 utility/notification.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/utility/notification.js b/utility/notification.js
index 20fece0..e42ae7f 100644
--- a/utility/notification.js
+++ b/utility/notification.js
@@ -42,6 +42,25 @@ class Notification {
             console.warn(e)
         }
     }
+    static async backgroundLayerIsMissing() {
+        const r1 = await dialog_box.prompt(
+            'You need a white background layer present in your document',
+            '',
+            ['Cancel', 'Create']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'Create') {
+                await createBackgroundLayer()
+                console.log('create background layer')
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
 }
 
 module.exports = {

From 12562abf9f20cc86485bb0b544e735bae8200ff1 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 14:52:28 +0300
Subject: [PATCH 7/9] create a sub tab menu that link viewer, history, and
 image search tabs

---
 index.html | 349 +++++++++++++++++++++++++++++++++--------------------
 index.js   |  29 ++++-
 2 files changed, 247 insertions(+), 131 deletions(-)

diff --git a/index.html b/index.html
index 0f6659f..8f7afbc 100644
--- a/index.html
+++ b/index.html
@@ -117,7 +117,7 @@
             flex-wrap: wrap;
         }
 
-        .thumbnail-image-button{
+        .thumbnail-image-button {
             display: none;
             /* background-color:  #495b79; */
             color: white;
@@ -134,24 +134,24 @@
         }
 
         .thumbnail-image-button:nth-child(2) {
-            border-color:green;
-            bottom:0;
-            left:0;    
+            border-color: green;
+            bottom: 0;
+            left: 0;
         }
         .thumbnail-image-button:nth-child(3) {
-            border-color:pink;
-            bottom:0;
-            right:0;
+            border-color: pink;
+            bottom: 0;
+            right: 0;
         }
         .thumbnail-image-button:nth-child(4) {
-            border-color:yellow;
-            top:0;
-            left:0;
+            border-color: yellow;
+            top: 0;
+            left: 0;
         }
         .thumbnail-image-button:nth-child(5) {
-            border-color:red;
-            top:0;
-            right:0;
+            border-color: red;
+            top: 0;
+            right: 0;
         }
 
         .column-item {
@@ -582,9 +582,17 @@
                 <div class="sp-tab" id="sp-viewer-tab">
                     <sp-label>Viewer</sp-label>
                 </div>
-                <div class="sp-tab" id="sp-history-tab">
+                <div class="sp-tab" id="sp-history-tab" style="display: none">
                     <sp-label>History</sp-label>
                 </div>
+                <div
+                    class="sp-tab"
+                    id="sp-image_search-tab"
+                    style="display: none"
+                >
+                    <sp-label>Image Search</sp-label>
+                </div>
+
                 <div class="sp-tab" id="sp-prompts-library-tab">
                     <sp-label>Prompts library</sp-label>
                 </div>
@@ -615,126 +623,191 @@
             </div>
 
             <div class="sp-tab-page" id="sp-viewer-tab-page">
-                <div class="flexContainer">
-                    <sp-label slot="label"
-                        >View your generated images on the canvas</sp-label
-                    >
+                <div class="subTabOptionsContainer">
+                    <sp-radio-group id="rgSubTab">
+                        <sp-radio
+                            title=""
+                            class="rbSubTab"
+                            id="rbHistoryTab"
+                            checked
+                            value="viewer"
+                            data-tab-name="sp-viewer-tab"
+                            >Viewer</sp-radio
+                        >
+                        <sp-radio
+                            title=""
+                            class="rbSubTab"
+                            id="rbHistoryTab"
+                            value="history"
+                            data-tab-name="sp-history-tab"
+                            >History</sp-radio
+                        >
+                        <sp-radio
+                            title=""
+                            class="rbSubTab"
+                            id="rbImageSearch"
+                            data-tab-name="sp-image_search-tab"
+                            value="image_search"
+                            >Image Search</sp-radio
+                        >
+                    </sp-radio-group>
                 </div>
-                <div></div>
-                <div>
-                    <button class="btnSquare" id="btnSetMaskViewer">
-                        Set Mask
-                    </button>
-                    <button class="btnSquare" id="btnSetInitImageViewer">
-                        Set Init Image
-                    </button>
-                    <button class="btnSquare btnGenerateClass" id="btnGenerate">
-                        Generate txt2img
-                    </button>
-                    <button
-                        class="btnSquare btnInterruptClass"
-                        id="btnInterruptViewer"
-                        style="display: none"
-                    >
-                        Interrupt
-                    </button>
-                    <button class="btnSquare" id="btnSelectionArea">
-                        Selection Area
-                    </button>
-                    <div
-                        style="
-                            display: flex;
-                            justify-content: flex-start;
-                            padding-top: 3px;
-                        "
-                    >
-                        <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
+                <div id="viewerSubTab">
+                    <div class="flexContainer">
+                        <sp-label slot="label"
+                            >View your generated images on the canvas</sp-label
+                        >
+                    </div>
+                    <div></div>
+                    <div>
+                        <button class="btnSquare" id="btnSetMaskViewer">
+                            Set Mask
+                        </button>
+                        <button class="btnSquare" id="btnSetInitImageViewer">
+                            Set Init Image
+                        </button>
+                        <button
+                            class="btnSquare btnGenerateClass"
+                            id="btnGenerate"
+                        >
+                            Generate txt2img
+                        </button>
+                        <button
+                            class="btnSquare btnInterruptClass"
+                            id="btnInterruptViewer"
+                            style="display: none"
+                        >
+                            Interrupt
+                        </button>
+                        <button class="btnSquare" id="btnSelectionArea">
+                            Selection Area
+                        </button>
+                        <div
+                            style="
+                                display: flex;
+                                justify-content: flex-start;
+                                padding-top: 3px;
+                            "
+                        >
+                            <!-- <button class="btnSquare acceptClass acceptAllImgBtn"  style="display:none;">Accept All</button>
             <button class="btnSquare discardClass discardAllImgBtn"  style="display:none;">Discard All</button>
             <button class="btnSquare acceptSelectedClass acceptSelectedImgBtn"  style="display:none;">Accept Selected</button>
             <button class="btnSquare discardSelectedClass discardSelectedImgBtn"  style="display:none;">Discard Selected</button> -->
-                        <button
-                            title="Keep all generated images on the canvas"
-                            class="btnSquare acceptClass acceptAllImgBtn"
-                            style="display: none; 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> -->
+                            <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>
-                        <sp-progressbar
-                            class="pProgressBars"
-                            id="pViewerProgressBar"
-                            max="100"
-                            value="0"
-                            style="margin-left: 10px; width: 100px"
-                        >
-                            <sp-label slot="label">Progress...</sp-label>
-                        </sp-progressbar>
-                    </div>
 
-                    <!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
+                        <div style="display: inline-flex">
+                            <div id="batchNumberViewerTabContainer">
+                                <!-- we will append here batch number field here   -->
+                                <!-- <sp-label>Images:</sp-label> -->
+                                <!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
+                value="1"></sp-textfield> -->
+                            </div>
+                            <sp-progressbar
+                                class="pProgressBars"
+                                id="pViewerProgressBar"
+                                max="100"
+                                value="0"
+                                style="margin-left: 10px; width: 100px"
+                            >
+                                <sp-label slot="label">Progress...</sp-label>
+                            </sp-progressbar>
+                        </div>
+
+                        <!-- <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="viewer-image"
+                            id="progressImage"
+                            src="https://source.unsplash.com/random"
+                            style="width: auto; height: auto"
+                        />
+                    </div>
+                    <hr class="line-divider" />
+                    <div class="" id="divInitImageViewerContainer">
+                        <!-- <img  class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                    </div>
+                    <hr class="line-divider" />
+                    <div class="" id="divInitMaskViewerContainer">
+                        <!-- <img  class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                    </div>
+                    <hr class="line-divider" />
+                    <div class="viewer-container" id="divViewerImagesContainer">
+                        <!-- <img  class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
+                    </div>
                 </div>
-                <div 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>
+            <div class="sp-tab-page" id="sp-history-tab-page">
+                <div class="subTabOptionsContainer"></div>
+
+                <div class="flexContainer">
+                    <sp-label slot="label"
+                        >history of all the images you generated</sp-label
                     >
+                    <div id="historySeedLabelContainer">
+                        <sp-label slot="label">Seed:</sp-label
+                        ><sp-label slot="label" id="historySeedLabel"
+                            >00000000000</sp-label
+                        >
+                    </div>
                 </div>
-                <div class="" id="divProgressImageViewerContainer">
+                <div></div>
+                <div>
+                    <button class="btnSquare" id="btnLoadHistory">
+                        Load Previous Generations
+                    </button>
+                </div>
+                <div class="viewer-container" id="divHistoryImagesContainer">
                     <img
-                        class="viewer-image"
-                        id="progressImage"
+                        class="history-image"
+                        id="history_image_test"
+                        data-metadata_json_string='{"a":1}'
                         src="https://source.unsplash.com/random"
-                        style="width: auto; height: auto"
                     />
                 </div>
-                <hr class="line-divider" />
-                <div class="" id="divInitImageViewerContainer">
-                    <!-- <img  class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-                </div>
-                <hr class="line-divider" />
-                <div class="" id="divInitMaskViewerContainer">
-                    <!-- <img  class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-                </div>
-                <hr class="line-divider" />
-                <div class="viewer-container" id="divViewerImagesContainer">
-                    <!-- <img  class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
-                </div>
             </div>
+            <div class="sp-tab-page" id="sp-image_search-tab-page">
+                <div class="subTabOptionsContainer"></div>
 
-            <div class="sp-tab-page" id="sp-history-tab-page">
                 <div class="flexContainer">
                     <sp-label slot="label"
                         >history of all the images you generated</sp-label
@@ -759,11 +832,11 @@
                     <button class="btnSquare" id="btnImageSearch">
                         Image Search
                     </button>
-                    <button class="btnSquare" id="btnLoadHistory">
-                        Load Previous Generations
-                    </button>
                 </div>
-                <div class="viewer-container" id="divHistoryImagesContainer">
+                <div
+                    class="viewer-container"
+                    id="divImageSearchImagesContainer"
+                >
                     <img
                         class="history-image"
                         id="history_image_test"
@@ -772,7 +845,6 @@
                     />
                 </div>
             </div>
-
             <div class="sp-tab-page" id="sp-prompts-library-tab-page">
                 <sp-label slot="label"
                     >Prompt Shortcut: a single word that represent a
@@ -1318,15 +1390,32 @@
                             </div>
                             Edit Text
                         </sp-action-button>
-                        <sp-action-button id="svg_sp_btn_datadownload" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
+                        <sp-action-button
+                            id="svg_sp_btn_datadownload"
+                            style="
+                                padding: 0;
+                                max-width: 32px;
+                                max-height: 32px;
+                                display: none;
+                            "
+                        >
                             <div slot="icon" style="fill: currentColor">
-                                <svg viewBox="0 0 18 18" style="width: 18px; height: 18px;">
+                                <svg
+                                    viewBox="0 0 18 18"
+                                    style="width: 18px; height: 18px"
+                                >
                                     <path
-                                        d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z" />
-                                    <path d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z" />
+                                        d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z"
+                                    />
                                     <path
-                                        d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z" />
-                                    <path d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z" />
+                                        d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z"
+                                    />
+                                    <path
+                                        d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z"
+                                    />
+                                    <path
+                                        d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z"
+                                    />
                                 </svg>
                             </div>
                         </sp-action-button>
diff --git a/index.js b/index.js
index c2a5d49..f93ddbc 100644
--- a/index.js
+++ b/index.js
@@ -3729,7 +3729,7 @@ document
         try {
             // const output_dir_relative = "./server/python_server/"
             const container = document.getElementById(
-                'divHistoryImagesContainer'
+                'divImageSearchImagesContainer'
             )
             // const uniqueDocumentId = await getUniqueDocumentId()
             // const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
@@ -4186,3 +4186,30 @@ document
             thumbnail_size_slider.min
         )
     })
+
+Array.from(document.querySelectorAll('.rbSubTab')).forEach((rb) => {
+    // debugger
+    const tab_button_name = rb.dataset['tab-name']
+    const tab_page_name = `${tab_button_name}-page`
+
+    try {
+        document
+            .getElementById(tab_button_name)
+            .addEventListener('click', () => {
+                document.getElementById(tab_button_name)
+                const option_container = document
+                    .getElementById(tab_page_name)
+                    .querySelector('.subTabOptionsContainer')
+                const radio_group = document.getElementById('rgSubTab')
+                rb.checked = true
+                option_container.appendChild(radio_group)
+            })
+
+        rb.onclick = () => {
+            // debugger
+            document.getElementById(tab_button_name).click()
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+})

From 143044c9cd977cbbcabdb494c161aa6689b1b982 Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 20:28:57 +0300
Subject: [PATCH 8/9] get the ratio between the width and height sliders and
 the selectionInfo

---
 selection.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/selection.js b/selection.js
index 02d2c69..936b7de 100644
--- a/selection.js
+++ b/selection.js
@@ -1,4 +1,5 @@
 const psapi = require('./psapi')
+const html_manip = require('./utility/html_manip')
 function finalWidthHeight(
     selectionWidth,
     selectionHeight,
@@ -77,7 +78,28 @@ class Selection {
     }
     static reselectArea(selection_info) {}
     static isSameSelection(selection_info_1, selection_info_2) {}
+    static async getImageToSelectionDifference() {
+        const selectionInfo = await psapi.getSelectionInfoExe()
 
+        const width = html_manip.getWidth()
+        const height = html_manip.getHeight()
+        const scale_info_str = `${parseInt(width)}x${parseInt(
+            height
+        )} => ${parseInt(selectionInfo.width)}x${parseInt(
+            selectionInfo.height
+        )} `
+        let ratio =
+            (width * height) / (selectionInfo.width * selectionInfo.height)
+
+        // const arrow = percentage >= 1 ? '↑' : '↓'
+        // percentage = percentage >= 1 ? percentage : 1 / percentage
+
+        // const percentage_str = `${arrow}X${percentage.toFixed(2)}`
+
+        // console.log('scale_info_str: ', scale_info_str)
+        // console.log('percentage_str: ', percentage_str)
+        return ratio
+    }
     static {}
 }
 module.exports = {

From 4996b72a593e5e380f7f13b8ef4fddc96edb000c Mon Sep 17 00:00:00 2001
From: Abdullah Alfaraj <abdullah.a.f2014@gmail.com>
Date: Mon, 20 Feb 2023 20:29:56 +0300
Subject: [PATCH 9/9] display the res difference with width and height label

---
 index.html            | 14 ++++++++++++++
 index.js              | 22 ++++++++++++++++++++++
 utility/html_manip.js | 40 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8f7afbc..161c6f8 100644
--- a/index.html
+++ b/index.html
@@ -568,6 +568,12 @@
         .line-divider {
             background-color: #3e3e3e;
         }
+        .res-increase {
+            color: #6db579;
+        }
+        .res-decrease {
+            color: #ff595e;
+        }
     </style>
 
     <body>
@@ -1666,7 +1672,15 @@
                                     id="lHeight"
                                     >512</sp-label
                                 >
+
+                                <sp-label
+                                    class="res-increase"
+                                    id="res-difference"
+                                    slot="label"
+                                ></sp-label>
                             </sp-slider>
+                            <!-- <sp-label slot="label"
+                                >512x512 => 1024x1024</sp-label >-->
                         </div>
                         <!-- <div id='hi-res-sliders-container' style="display:none;">
           <sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
diff --git a/index.js b/index.js
index f93ddbc..1fc8d32 100644
--- a/index.js
+++ b/index.js
@@ -4213,3 +4213,25 @@ Array.from(document.querySelectorAll('.rbSubTab')).forEach((rb) => {
         console.warn(e)
     }
 })
+
+async function updateResDifferenceLabel() {
+    const ratio = await selection.Selection.getImageToSelectionDifference()
+    const arrow = ratio >= 1 ? '↑' : '↓'
+    let final_ratio = ratio // this ratio will always be >= 1
+    if (ratio >= 1) {
+        // percentage = percentage >= 1 ? percentage : 1 / percentage
+
+        // const percentage_str = `${arrow}X${percentage.toFixed(2)}`
+
+        // console.log('scale_info_str: ', scale_info_str)
+        // console.log('percentage_str: ', percentage_str)
+        document
+            .getElementById('res-difference')
+            .classList.remove('res-decrease')
+    } else {
+        final_ratio = 1 / ratio
+        document.getElementById('res-difference').classList.add('res-decrease')
+    }
+    const ratio_str = `${arrow}x${final_ratio.toFixed(2)}`
+    document.getElementById('res-difference').innerText = ratio_str
+}
diff --git a/utility/html_manip.js b/utility/html_manip.js
index cbfb67a..351ce7b 100644
--- a/utility/html_manip.js
+++ b/utility/html_manip.js
@@ -30,15 +30,19 @@ document.getElementById('slWidth').addEventListener('input', (evt) => {
     const width = evt.target.value * 64
 
     document.getElementById('lWidth').textContent = parseInt(width)
+    // widthSliderOnChangeEventHandler(evt)
+    updateResDifferenceLabel()
 })
 
 document.getElementById('slHeight').addEventListener('input', (evt) => {
     const height = evt.target.value * 64
 
     document.getElementById('lHeight').textContent = parseInt(height)
+    // heightSliderOnChangeEventHandler(evt)
+    updateResDifferenceLabel()
 })
 
-document.getElementById('slWidth').addEventListener('change', (evt) => {
+function widthSliderOnChangeEventHandler(evt) {
     let new_width = evt.target.value * 64
     const b_link = getLinkWidthHeightState()
     let final_width = new_width
@@ -60,8 +64,35 @@ document.getElementById('slWidth').addEventListener('change', (evt) => {
 
     g_old_slider_width = final_width // update the old value, so we can use it later
     document.getElementById('lWidth').textContent = parseInt(final_width)
+}
+document.getElementById('slWidth').addEventListener('change', (evt) => {
+    widthSliderOnChangeEventHandler(evt)
 })
-document.getElementById('slHeight').addEventListener('change', (evt) => {
+// document.getElementById('slWidth').addEventListener('change', (evt) => {
+//     let new_width = evt.target.value * 64
+//     const b_link = getLinkWidthHeightState()
+//     let final_width = new_width
+//     let final_height
+//     if (b_link) {
+//         const current_height = html_manip.getHeight()
+//         ;[final_width, final_height] = general.scaleToRatio(
+//             new_width,
+//             g_old_slider_width,
+//             _,
+//             current_height,
+//             parseInt(evt.target.max * 64),
+//             parseInt(evt.target.min * 64)
+//         )
+
+//         evt.target.value = parseInt(final_width / 64)
+//         html_manip.autoFillInHeight(final_height)
+//     }
+
+//     g_old_slider_width = final_width // update the old value, so we can use it later
+//     document.getElementById('lWidth').textContent = parseInt(final_width)
+// })
+
+function heightSliderOnChangeEventHandler(evt) {
     let new_height = evt.target.value * 64
 
     let final_width
@@ -83,6 +114,9 @@ document.getElementById('slHeight').addEventListener('change', (evt) => {
     }
     g_old_slider_height = final_height // update the old value, so we can use it later
     document.getElementById('lHeight').textContent = parseInt(final_height)
+}
+document.getElementById('slHeight').addEventListener('change', (evt) => {
+    heightSliderOnChangeEventHandler(evt)
 })
 
 function getWidth() {
@@ -111,6 +145,7 @@ function autoFillInWidth(width_value) {
     document.getElementById('slWidth').value = `${width_value / 64}`
     //update the label
     document.getElementById('lWidth').innerHTML = `${parseInt(width_value)}`
+    updateResDifferenceLabel()
 }
 ////// End Width//////////
 
@@ -130,6 +165,7 @@ function autoFillInHeight(height_value) {
     height_slider.value = `${height_value / 64}`
     //update the label
     document.getElementById('lHeight').innerHTML = `${parseInt(height_value)}`
+    updateResDifferenceLabel()
 }
 
 function autoFillInHRHeight(height_value) {