add optimization option for different pc specs.

index.html

@@ -810,12 +810,12 @@
                         >
                     </div>
                     <div class="" id="divProgressImageViewerContainer">
-                        <img
+                        <!-- <img
                             class=""
                             id="progressImage"
                             src="https://source.unsplash.com/random"
                             style="width: 100px; height: 100px; max-width: 100%"
-                        />
+                        /> -->
                     </div>
                     <!-- <hr class="line-divider" /> -->
                     <sp-divider></sp-divider>
@@ -1702,13 +1702,13 @@
                                 title="Use to create Stable Diffusion tab Preset"
                                 class="rbPresetType"
                                 value="sd_preset"
+                                checked
                                 >SD Preset</sp-radio
                             >
                             <sp-radio
                                 title="Use to create a ControlNet preset"
                                 class="rbPresetType"
                                 value="controlnet_preset"
-                                checked
                                 >ControlNet Preset</sp-radio
                             >
                         </sp-radio-group>
@@ -1816,9 +1816,24 @@
                 <sp-checkbox checked id="chUseOriginalPrompt"
                     >Restore Original Prompt</sp-checkbox
                 >
-                <sp-checkbox checked id="chUseSilentMode"
+
+                <sp-checkbox checked id="chUseSilentMode" style="display: none"
                     >Use Silent Mode</sp-checkbox
                 >
+                <sp-radio-group>
+                    <sp-label slot="label"
+                        >Your PC Speed(optimization):</sp-label
+                    >
+                    <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
+                    <sp-radio title="" class="rbPCSpeed" value="slow"
+                        >Slow PC</sp-radio
+                    >
+                    <sp-radio title="" class="rbPCSpeed" value="fast" checked
+                        >Fast PC</sp-radio
+                    >
+
+                    <!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
+                </sp-radio-group>
                 <!-- <a href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing" target="_blank">Don't have GPU, use Colab</a> -->
                 <sp-link
                     href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing"

utility/html_manip.js

@@ -917,10 +917,22 @@ function getUseNsfw() {
     const b_nsfw = document.getElementById('chUseNSFW').checked
     return b_nsfw
 }
-function getUseSilentMode() {
+function getUseSilentMode_Old() {
     const b_use_silent_mode = document.getElementById('chUseSilentMode').checked
     return b_use_silent_mode
 }
+function getUseSilentMode() {
+    let b_use_silent_mode = true //fast machine
+    const pc_speed = getSelectedRadioButtonElement('rbPCSpeed').value
+    if (pc_speed === 'slow') {
+        b_use_silent_mode = false // use noisy mode
+    } else if (pc_speed === 'fast') {
+        b_use_silent_mode = true // use silent mode
+    }
+    // const b_use_silent_mode = document.getElementById('chUseSilentMode').checked
+    return b_use_silent_mode
+}
+
 module.exports = {
     getPrompt,
     autoFillInPrompt,

utility/presets/preset.js

@@ -383,9 +383,15 @@ document
     })
 
 async function initializePresetTab() {
-    await populatePresetMenu()
+    try {
-    const selected_rb = getSelectedRadioButtonElement('rbPresetType')
+        await populatePresetMenu()
-    selected_rb.click()
+
+        const selected_rb =
+            html_manip.getSelectedRadioButtonElement('rbPresetType')
+        selected_rb.click() // to trigger the click event which will update the setting preset menu according to the preset type
+    } catch (e) {
+        console.error(e)
+    }
 }
 initializePresetTab()
 module.exports = {

utility/session.js

@@ -191,8 +191,8 @@ class GenerationSession {
     deleteProgressImageHtml() {
         try {
             // await layer_util.deleteLayers([this.progress_layer]) // delete the old progress layer
-            document.getElementById('progressImage').style.width = '0px'
+            // document.getElementById('progressImage').style.width = '0px'
-            document.getElementById('progressImage').style.height = '0px'
+            // document.getElementById('progressImage').style.height = '0px'
 
             document.getElementById(
                 'divProgressImageViewerContainer'