methods to visualize both the mask and the mask after expansion

index.js

@@ -1897,6 +1897,7 @@ async function getSettings() {
                     iterations
                 )
                 if (mask) {
+                    g_generation_session.base64maskExpansionImage = mask
                     payload['mask'] = mask
                 }
             }

utility/session.js

@@ -31,6 +31,7 @@ class GenerationSession {
         this.base64OutputImages = {} //image_id/path => base64_image
         this.base64initImages = {} //init_image_path => base64
         this.base64maskImage = []
+        this.base64maskExpansionImage
         this.activeBase64InitImage
         this.activeBase64MaskImage
         this.image_paths_to_layers = {}

utility/tab/sd.js

@@ -60,8 +60,32 @@ async function updateClickEventHandler(current_version) {
     }
 }
 
+function viewMaskExpansion() {
+    if (g_generation_session.base64maskExpansionImage) {
+        const mask_src = general.base64ToBase64Url(
+            g_generation_session.base64maskExpansionImage
+        )
+        html_manip.setInitImageMaskSrc(mask_src)
+    } else {
+        console.log(
+            'the mask has not been expanded, g_generation_session.base64maskExpansionImage is empty'
+        )
+    }
+}
+function viewDrawnMask() {
+    //this is the generated mask or user drawn mask, but it's not the mask after expansion
+    if (g_generation_session.activeBase64MaskImage) {
+        const mask_src = general.base64ToBase64Url(
+            g_generation_session.activeBase64MaskImage
+        )
+        html_manip.setInitImageMaskSrc(mask_src)
+    } else {
+        console.log('no mask is available')
+    }
+}
+
 document.getElementById('btnUpdate').addEventListener('click', async () => {
     await updateClickEventHandler(g_version)
 })
 
-module.exports = { updateClickEventHandler }
+module.exports = { updateClickEventHandler, viewMaskExpansion, viewDrawnMask }