diff --git a/index.js b/index.js
index 58077d1..69a8d88 100644
--- a/index.js
+++ b/index.js
@@ -713,12 +713,14 @@ let g_old_slider_height = 512
 let g_sd_config_obj
 let g_hi_res_upscaler_models
 let g_controlnet_max_models
+    // let g_controlnet_preprocessors
 ;(async function () {
     let temp_config = new sd_config.SdConfig()
     await temp_config.getConfig()
     g_hi_res_upscaler_models = temp_config.getUpscalerModels()
-    g_sd_config_obj = temp_config
     g_controlnet_max_models = temp_config.getControlNetMaxModelsNum()
+    // g_controlnet_preprocessors = temp_config.getControlNetPreprocessors()
+    g_sd_config_obj = temp_config
 
     for (let model of g_hi_res_upscaler_models) {
         //update the hi res upscaler models menu
diff --git a/utility/html_manip.js b/utility/html_manip.js
index 5929409..7ba7ed8 100644
--- a/utility/html_manip.js
+++ b/utility/html_manip.js
@@ -404,12 +404,16 @@ function selectModelUi(model_hash) {
 }
 
 function autoFillInModel(model_hash) {
-    // unCheckAllSamplers()
-    model_element = getModelElementByHash(model_hash)
-    selectModelUi(model_hash)
-    // model_element.
-    const model_title = model_element.dataset.model_title
-    return model_title
+    try {
+        // unCheckAllSamplers()
+        model_element = getModelElementByHash(model_hash)
+        selectModelUi(model_hash)
+        // model_element.
+        const model_title = model_element.dataset.model_title
+        return model_title
+    } catch (e) {
+        console.warn(e)
+    }
 }
 ////// End Models//////////
 
@@ -424,13 +428,15 @@ function setInitImageSrc(image_src) {
     ini_image_element.src = image_src
 }
 function setControlImageSrc(image_src, element_index = 0) {
-    const control_net_image_element =
-        document.getElementById('control_net_image'+'_'+element_index)
+    const control_net_image_element = document.getElementById(
+        'control_net_image' + '_' + element_index
+    )
     control_net_image_element.src = image_src
 }
 function setControlMaskSrc(image_src, element_index = 0) {
-    const control_net_image_element =
-        document.getElementById('control_net_mask'+'_'+element_index)
+    const control_net_image_element = document.getElementById(
+        'control_net_mask' + '_' + element_index
+    )
     control_net_image_element.src = image_src
 }
 
diff --git a/utility/sdapi/config.js b/utility/sdapi/config.js
index 799d4a6..7b235ee 100644
--- a/utility/sdapi/config.js
+++ b/utility/sdapi/config.js
@@ -42,7 +42,10 @@ class SdConfig {
                 if (comp?.props?.elem_id) {
                     const elem_id = comp?.props?.elem_id
                     if (elem_id === 'setting_control_net_max_models_num') {
-                        console.log('setting_control_net_max_models_num: ', comp?.props?.value)
+                        console.log(
+                            'setting_control_net_max_models_num: ',
+                            comp?.props?.value
+                        )
                         max_models_num = comp?.props?.value
                         break
                     }
@@ -50,7 +53,25 @@ class SdConfig {
             }
             console.log('max_models_num: ', max_models_num)
             return max_models_num
+        } catch (e) {
+            console.warn(e)
+            return 1 // default max number is one
+        }
+    }
 
+    getControlNetPreprocessors() {
+        try {
+            let max_models_num
+            let choices
+            for (let comp of this.config.components) {
+                const label = comp?.props?.label
+                if (label === 'Preprocessor') {
+                    choices = comp?.props?.choices
+                    break
+                }
+            }
+            console.log('Preprocessor list: ', choices)
+            return choices
         } catch (e) {
             console.warn(e)
         }
diff --git a/utility/tab/control_net.js b/utility/tab/control_net.js
index 99af36c..38a9b09 100644
--- a/utility/tab/control_net.js
+++ b/utility/tab/control_net.js
@@ -25,28 +25,33 @@ async function requestControlNetModuleList() {
     // const control_net_json = await api.requestGet(
     //     `${g_sd_url}/controlnet/model_list`
     // )
-    const module_list = [
-        // 'none',
-        'canny',
-        'depth',
-        'depth_leres',
-        'hed',
-        'mlsd',
-        'normal_map',
-        'openpose',
-        // "openpose_hand",
-        'pidinet',
-        'scribble',
-        'fake_scribble',
-        'segmentation',
-    ]
-
+    // const module_list = [
+    //     // 'none',
+    //     'canny',
+    //     'depth',
+    //     'depth_leres',
+    //     'hed',
+    //     'mlsd',
+    //     'normal_map',
+    //     'openpose',
+    //     // "openpose_hand",
+    //     'pidinet',
+    //     'scribble',
+    //     'fake_scribble',
+    //     'segmentation',
+    // ]
+    const module_list = g_sd_config_obj.getControlNetPreprocessors()
+    // const module_list = g_controlnet_preprocessors
     return module_list
 }
 async function populateModelMenu() {
     try {
         const models = await requestControlNetModelList()
-        for (let index = 0; index < g_controlnet_max_supported_models; index++) {
+        for (
+            let index = 0;
+            index < g_controlnet_max_supported_models;
+            index++
+        ) {
             html_manip.populateMenu(
                 'mModelsMenuControlNet_' + index,
                 'mModelsMenuItemControlNet_' + index,
@@ -64,8 +69,11 @@ async function populateModelMenu() {
 async function populatePreprocessorMenu() {
     try {
         const modules = await requestControlNetModuleList()
-        for (let index = 0; index < g_controlnet_max_supported_models; index++) {
-
+        for (
+            let index = 0;
+            index < g_controlnet_max_supported_models;
+            index++
+        ) {
             html_manip.populateMenu(
                 'mModuleMenuControlNet_' + index,
                 'mModuleMenuItemControlNet_' + index,
@@ -80,17 +88,20 @@ async function populatePreprocessorMenu() {
     }
 }
 async function initializeControlNetTab(controlnet_max_models) {
-    if(controlnet_max_models > g_controlnet_max_supported_models)
-        controlnet_max_models = g_controlnet_max_supported_models
-    
-    for (let index = 0; index < controlnet_max_models; index++) {
-        await populateModelMenu(index)
-        await populatePreprocessorMenu(index)
-        document.getElementById('controlnet_settings_' + index).style.display = "block";
+    try {
+        if (controlnet_max_models > g_controlnet_max_supported_models)
+            controlnet_max_models = g_controlnet_max_supported_models
+
+        for (let index = 0; index < controlnet_max_models; index++) {
+            await populateModelMenu(index)
+            await populatePreprocessorMenu(index)
+            document.getElementById(
+                'controlnet_settings_' + index
+            ).style.display = 'block'
+        }
+    } catch (e) {
+        console.warn(e)
     }
-
-
-    
 }
 // controlnet settings getters
 function getControlNetWeightGuidanceStrength(controlnet_index = 0) {
@@ -102,17 +113,23 @@ function getControlNetWeightGuidanceStrength(controlnet_index = 0) {
 }
 
 function getControlNetWeight(controlnet_index = 0) {
-    const slider_value = document.getElementById('slControlNetWeight_' + controlnet_index).value
+    const slider_value = document.getElementById(
+        'slControlNetWeight_' + controlnet_index
+    ).value
 
     const sd_value = general.mapRange(slider_value, 0, 100, 0, 2) // convert slider value to SD ready value
     return sd_value
 }
 function getUseLowVram(controlnet_index = 0) {
-    const b_result = document.getElementById('chlowVram_' + controlnet_index).checked
+    const b_result = document.getElementById(
+        'chlowVram_' + controlnet_index
+    ).checked
     return b_result
 }
 function getEnableControlNet(controlnet_index = 0) {
-    const is_enable = document.getElementById('chEnableControlNet_' + controlnet_index).checked
+    const is_enable = document.getElementById(
+        'chEnableControlNet_' + controlnet_index
+    ).checked
     return is_enable
 }
 
@@ -130,7 +147,9 @@ function getSelectedModel(controlnet_index = 0) {
     return model_name
 }
 function getUseGuessMode(controlnet_index = 0) {
-    const is_guess_mode = document.getElementById('chGuessMode_' + controlnet_index).checked
+    const is_guess_mode = document.getElementById(
+        'chGuessMode_' + controlnet_index
+    ).checked
     return is_guess_mode
 }
 
@@ -139,20 +158,18 @@ function getControlNetMaxModelsNumber() {
 }
 
 function mapPluginSettingsToControlNet(plugin_settings) {
-    const ps = plugin_settings; // for shortness
-    let controlnet_units = [];
+    const ps = plugin_settings // for shortness
+    let controlnet_units = []
 
     for (let index = 0; index < g_controlnet_max_supported_models; index++) {
-        if(!getEnableControlNet(index))
-            break;
-        controlnet_units[index] =
-        {
+        if (!getEnableControlNet(index)) break
+        controlnet_units[index] = {
             input_image: g_generation_session.controlNetImage[index],
-            mask: "",
+            mask: '',
             module: getSelectedModule(index),
             model: getSelectedModel(index),
             weight: getControlNetWeight(index),
-            resize_mode: "Scale to Fit (Inner Fit)",
+            resize_mode: 'Scale to Fit (Inner Fit)',
             lowvram: getUseLowVram(index),
             processor_res: 512,
             threshold_a: 64,
@@ -164,30 +181,26 @@ function mapPluginSettingsToControlNet(plugin_settings) {
         }
     }
 
-  
     if (
-      plugin_settings["mode"] ===
-        Enum.generationModeEnum["Img2Img"] ||
-      plugin_settings["mode"] ===
-        Enum.generationModeEnum["Inpaint"] ||
-      plugin_settings["mode"] ===
-        Enum.generationModeEnum["Outpaint"]
+        plugin_settings['mode'] === Enum.generationModeEnum['Img2Img'] ||
+        plugin_settings['mode'] === Enum.generationModeEnum['Inpaint'] ||
+        plugin_settings['mode'] === Enum.generationModeEnum['Outpaint']
     ) {
-      const b_use_guess_mode = getUseGuessMode();
-      controlnet_units[0]["guessmode"] = b_use_guess_mode;
+        const b_use_guess_mode = getUseGuessMode()
+        controlnet_units[0]['guessmode'] = b_use_guess_mode
     }
-  
-    const controlnet_payload = {
-      ...ps,
-      controlnet_units,
-      subseed: -1,
-      override_settings: {},
-      override_settings_restore_afterwards: true,
-    };
-  
-    return controlnet_payload;
-  }  
 
+    const controlnet_payload = {
+        ...ps,
+        controlnet_units,
+        subseed: -1,
+        override_settings: {},
+        override_settings_restore_afterwards: true,
+    }
+
+    return controlnet_payload
+}
+function refreshControlNetTab() {}
 
 for (let index = 0; index < g_controlnet_max_supported_models; index++) {
     //event listeners
@@ -196,8 +209,9 @@ for (let index = 0; index < g_controlnet_max_supported_models; index++) {
         .addEventListener('input', (evt) => {
             // debugger
             const sd_value = general.mapRange(evt.target.value, 0, 100, 0, 1) // convert slider value to SD ready value
-            document.getElementById('lControlNetGuidanceStrength_' + index).textContent =
-                Number(sd_value).toFixed(2)
+            document.getElementById(
+                'lControlNetGuidanceStrength_' + index
+            ).textContent = Number(sd_value).toFixed(2)
         })
 
     document
@@ -211,7 +225,8 @@ for (let index = 0; index < g_controlnet_max_supported_models; index++) {
     document
         .getElementById('bSetControlImage_' + index)
         .addEventListener('click', async () => {
-            const selectionInfo = await selection.Selection.getSelectionInfoExe()
+            const selectionInfo =
+                await selection.Selection.getSelectionInfoExe()
             if (selectionInfo) {
                 await g_generation_session.setControlNetImage(index)
             } else {
@@ -219,30 +234,32 @@ for (let index = 0; index < g_controlnet_max_supported_models; index++) {
             }
         })
 
-    document.getElementById('bControlMask_' + index).addEventListener('click', async () => {
-        // const selectionInfo = await selection.Selection.getSelectionInfoExe()
+    document
+        .getElementById('bControlMask_' + index)
+        .addEventListener('click', async () => {
+            // const selectionInfo = await selection.Selection.getSelectionInfoExe()
 
-        if (
-            g_generation_session.control_net_selection_info &&
-            g_generation_session.controlNetMask[index]
-        ) {
-            const selection_info = g_generation_session.control_net_selection_info
-            const layer = await io.IO.base64ToLayer(
-                g_generation_session.controlNetMask[index],
-                'ControlNet Mask.png',
-                selection_info.left,
-                selection_info.top,
-                selection_info.width,
-                selection_info.height
-            )
-        } else {
-            // await note.Notification.inactiveSelectionArea()
-            app.showAlert('Mask Image is not available')
-        }
-    })
+            if (
+                g_generation_session.control_net_selection_info &&
+                g_generation_session.controlNetMask[index]
+            ) {
+                const selection_info =
+                    g_generation_session.control_net_selection_info
+                const layer = await io.IO.base64ToLayer(
+                    g_generation_session.controlNetMask[index],
+                    'ControlNet Mask.png',
+                    selection_info.left,
+                    selection_info.top,
+                    selection_info.width,
+                    selection_info.height
+                )
+            } else {
+                // await note.Notification.inactiveSelectionArea()
+                app.showAlert('Mask Image is not available')
+            }
+        })
 }
 
-
 module.exports = {
     requestControlNetModelList,
     populateModelMenu,