formate project files with prettier

.prettierignore

@@ -1,3 +1,9 @@
 server/python_server/output/*
 *.md
 manifest.json
+jimp/**
+server_env/**
+.github\workflows\wiki-sync-action.yml
+**/dist
+.github\workflows\wiki-sync-action.yml
+tsconfig.json

index.html

@@ -991,7 +991,6 @@
                 <!-- </div> -->
             </div>
             <div class="sp-tab-page" id="sp-control_net-tab-page">
-
                 <div
                     id="controlnet_settings_template"
                     data-index="0"

index.js

@@ -1,4 +1,3 @@
-
 // import {helloHelper} from 'helper.js'
 // helloHelper2 = require('./helper.js')
 // for organizational proposes
@@ -53,8 +52,13 @@ const lexica_tab = require('./utility/tab/lexica_tab')
 const share_tab = require('./utility/tab/share_tab')
 // const ultimate_sd_upscaler = require('./ultimate_sd_upscaler/dist/ultimate_sd_upscaler')
 // const ultimate_sd_upscaler_script = require('./ultimate_sd_upscaler/dist/ultimate_sd_upscaler.bundle')
-const { scripts, main, after_detailer_script, control_net, logger } = require('./typescripts/dist/bundle')
+const {
-
+    scripts,
+    main,
+    after_detailer_script,
+    control_net,
+    logger,
+} = require('./typescripts/dist/bundle')
 
 const io = require('./utility/io')
 const _log = console.log
@@ -71,7 +75,6 @@ if (should_log) {
         console.log(`error: ${e}`)
     })
 
-
     console.log = (data, ...optional_param) => {
         try {
             _log(data, ...optional_param)
@@ -79,54 +82,44 @@ if (should_log) {
             // const error = new Error({ data, ...optional_param });
             const formattedOutput = logger.formateLog(data, ...optional_param)
             io.IOLog.saveLogToFile({ log: formattedOutput }, 'log.txt')
-            
         } catch (e) {
             _warn('error while logging: ')
             _warn(e)
         }
-        
     }
 
     console.warn = (data, ...optional_param) => {
         try {
-            _warn(data, ...optional_param);
+            _warn(data, ...optional_param)
-            const error = new Error();
+            const error = new Error()
-            const stackTrace = error.stack;
+            const stackTrace = error.stack
             const formattedOutput = logger.formateLog(data, ...optional_param)
-            io.IOLog.saveLogToFile({ warning: formattedOutput,stackTrace }, 'log.txt');
+            io.IOLog.saveLogToFile(
+                { warning: formattedOutput, stackTrace },
+                'log.txt'
+            )
         } catch (e) {
-            _warn('error while logging: ');
+            _warn('error while logging: ')
-            _warn(e);
+            _warn(e)
         }
     }
 
-    
     console.error = (data, ...optional_param) => {
         try {
-            _error(data, ...optional_param);
+            _error(data, ...optional_param)
-            const error = new Error();
+            const error = new Error()
-            const stackTrace = error.stack;
+            const stackTrace = error.stack
             const formattedOutput = logger.formateLog(data, ...optional_param)
-            io.IOLog.saveLogToFile({ error: formattedOutput,stackTrace }, 'log.txt');
+            io.IOLog.saveLogToFile(
+                { error: formattedOutput, stackTrace },
+                'log.txt'
+            )
         } catch (e) {
-            _error('error while logging: ');
+            _error('error while logging: ')
-            _error(e);
+            _error(e)
-        }
+        }
-        
     }
 }
-
-
-
-
-
-
-
-
-
-
-
-
 
 // const ultimate_sd_upscaler_script_test = require('./ultimate_sd_upscaler/dist/main')
 

sdapi_py_re.js

@@ -4,11 +4,8 @@ const { getExtensionType } = require('./utility/html_manip')
 const py_re = require('./utility/sdapi/python_replacement')
 const Enum = require('./enum')
 const { control_net } = require('./typescripts/dist/bundle')
-const {
+const { mapPluginSettingsToControlNet, getEnableControlNet, getModuleDetail } =
-    mapPluginSettingsToControlNet,
+    control_net
-    getEnableControlNet,
-    getModuleDetail,
-} = control_net
 
 const api = require('./utility/api')
 //javascript plugin can't read images from local directory so we send a request to local server to read the image file and send it back to plugin as image string base64
@@ -485,11 +482,11 @@ async function requestControlNetTxt2Img(plugin_settings) {
         }
 
         if (
-            !control_net_settings['controlnet_units'][index]['model']  &&
+            (!control_net_settings['controlnet_units'][index]['model'] &&
                 !getModuleDetail()[
                     control_net_settings['controlnet_units'][index]['module']
-            ].model_free 
+                ].model_free) ||
-            || control_net_settings['controlnet_units'][index]['model'] === 'none'
+            control_net_settings['controlnet_units'][index]['model'] === 'none'
         ) {
             app.showAlert('you need to select a valid ControlNet Model')
             throw 'you need to select a valid ControlNet Model'
@@ -525,10 +522,7 @@ async function requestControlNetTxt2Img(plugin_settings) {
             mask_index >= numberOfAnnotations
         )
             continue
-        control_net.setControlMaskSrc(
+        control_net.setControlMaskSrc(base64_mask[mask_index], index)
-            base64_mask[mask_index],
-            index
-        )
         g_generation_session.controlNetMask[index] = base64_mask[mask_index]
         mask_index++
     }
@@ -569,10 +563,10 @@ async function requestControlNetImg2Img(plugin_settings) {
             throw 'you need to select a valid ControlNet Module'
         }
         if (
-            !control_net_settings['controlnet_units'][index]['model'] &&
+            (!control_net_settings['controlnet_units'][index]['model'] &&
                 !getModuleDetail()[
                     control_net_settings['controlnet_units'][index]['module']
-            ].model_free || 
+                ].model_free) ||
             control_net_settings['controlnet_units'][index]['model'] === 'none'
         ) {
             app.showAlert('you need to select a valid ControlNet Model')
@@ -618,10 +612,7 @@ async function requestControlNetImg2Img(plugin_settings) {
             mask_index >= numberOfAnnotations
         )
             continue
-        control_net.setControlMaskSrc(
+        control_net.setControlMaskSrc(base64_mask[mask_index], index)
-            base64_mask[mask_index],
-            index
-        )
         g_generation_session.controlNetMask[index] = base64_mask[mask_index]
         mask_index++
     }

typescripts/@types/custom.d.ts

@@ -1,6 +1,8 @@
 declare module '*.svg' {
-    import React = require('react');
+    import React = require('react')
-    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    export const ReactComponent: React.FunctionComponent<
-    const src: string;
+        React.SVGProps<SVGSVGElement>
-    export default src;
+    >
+    const src: string
+    export default src
 }

typescripts/@types/sdapi_py_re.d.ts

@@ -1,5 +1,4 @@
-
 declare module 'sdapi_py_re' {
-  const exports: any;
+    const exports: any
-  export = exports;
+    export = exports
 }

typescripts/@types/uxp.d.ts

@@ -1,5 +1,5 @@
 declare module 'uxp' {
     // Add type declarations for the uxp module here
-  export const storage: any;
+    export const storage: any
-  export const versions: any;
+    export const versions: any
 }

typescripts/after_detailer/after_detailer.tsx

@@ -4,11 +4,7 @@ import ReactDOM from 'react-dom/client'
 // import { action, makeAutoObservable, reaction, toJS } from 'mobx'
 import { observer } from 'mobx-react'
 
-import {
+import { SliderType, SpMenu, SpSliderWithLabel } from '../util/elements'
-    SliderType,
-    SpMenu,
-    SpSliderWithLabel,
-} from '../util/elements'
 // import * as sdapi from '../../sdapi_py_re'
 import { api } from '../util/oldSystem'
 import { AStore } from '../main/astore'

typescripts/after_detailer/config.ts

@@ -9,7 +9,7 @@ export const model_list = [
     'person_yolov8n-seg.pt',
 
     'person_yolov8s-seg.pt',
-    'None'
+    'None',
 ]
 export let ui_config = {
     ad_model: {

typescripts/controlnet/ControlNetTab.tsx

@@ -1,56 +1,81 @@
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react'
-import React from 'react';
+import React from 'react'
-import ControlNetUnit from './ControlNetUnit';
+import ControlNetUnit from './ControlNetUnit'
-import { store as ControlNetStore } from './main';
+import { store as ControlNetStore } from './main'
-import { DefaultControlNetUnitData } from './store';
+import { DefaultControlNetUnitData } from './store'
-import { Enum, controlnet_preset, note, preset, selection } from '../util/oldSystem';
+import {
-import {SpMenuComponent} from '../util/elements';
+    Enum,
+    controlnet_preset,
+    note,
+    preset,
+    selection,
+} from '../util/oldSystem'
+import { SpMenuComponent } from '../util/elements'
 
-let g_controlnet_presets: any;
+let g_controlnet_presets: any
-declare const g_generation_session: any;
+declare const g_generation_session: any
 
 @observer
-class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }>{
+class ControlNetTab extends React.Component<{
+    appState: typeof ControlNetStore
+}> {
     state = {
         maxControlNet: 0,
-        presetMenuChildren: []
+        presetMenuChildren: [],
     }
 
     // private presetMenuChildren: JSX.Element[] = []
 
     onPresetMenuChange(evt: any) {
-        
         const preset_index = evt.target.selectedIndex
         const preset_name = evt.target.options[preset_index].textContent
         ControlNetStore.controlNetUnitData.forEach((dataitem, index) => {
             const presetData = g_controlnet_presets[preset_name][index] || {}
 
-            dataitem.enabled = presetData.enabled || DefaultControlNetUnitData.enabled
+            dataitem.enabled =
-            dataitem.input_image = presetData.input_image || DefaultControlNetUnitData.input_image
+                presetData.enabled || DefaultControlNetUnitData.enabled
+            dataitem.input_image =
+                presetData.input_image || DefaultControlNetUnitData.input_image
             dataitem.mask = presetData.mask || DefaultControlNetUnitData.mask
 
-            dataitem.module = presetData.module || DefaultControlNetUnitData.module
+            dataitem.module =
+                presetData.module || DefaultControlNetUnitData.module
             dataitem.model = presetData.model || DefaultControlNetUnitData.model
-            dataitem.weight = presetData.weight || DefaultControlNetUnitData.weight
+            dataitem.weight =
-            dataitem.resize_mode = presetData.resize_mode || DefaultControlNetUnitData.resize_mode
+                presetData.weight || DefaultControlNetUnitData.weight
-            dataitem.lowvram = presetData.lowvram || DefaultControlNetUnitData.lowvram
+            dataitem.resize_mode =
-            dataitem.processor_res = presetData.processor_res || DefaultControlNetUnitData.processor_res
+                presetData.resize_mode || DefaultControlNetUnitData.resize_mode
-            dataitem.threshold_a = presetData.threshold_a || DefaultControlNetUnitData.threshold_a
+            dataitem.lowvram =
-            dataitem.threshold_b = presetData.threshold_b || DefaultControlNetUnitData.threshold_b
+                presetData.lowvram || DefaultControlNetUnitData.lowvram
-            dataitem.guidance_start = presetData.guidance_start || DefaultControlNetUnitData.guidance_start
+            dataitem.processor_res =
-            dataitem.guidance_end = presetData.guidance_end || DefaultControlNetUnitData.guidance_end
+                presetData.processor_res ||
-            dataitem.guessmode = presetData.guessmode || DefaultControlNetUnitData.guessmode
+                DefaultControlNetUnitData.processor_res
+            dataitem.threshold_a =
+                presetData.threshold_a || DefaultControlNetUnitData.threshold_a
+            dataitem.threshold_b =
+                presetData.threshold_b || DefaultControlNetUnitData.threshold_b
+            dataitem.guidance_start =
+                presetData.guidance_start ||
+                DefaultControlNetUnitData.guidance_start
+            dataitem.guidance_end =
+                presetData.guidance_end ||
+                DefaultControlNetUnitData.guidance_end
+            dataitem.guessmode =
+                presetData.guessmode || DefaultControlNetUnitData.guessmode
 
-            dataitem.control_mode = presetData.control_mode || DefaultControlNetUnitData.control_mode
+            dataitem.control_mode =
-            dataitem.pixel_perfect = presetData.pixel_perfect || DefaultControlNetUnitData.pixel_perfect
+                presetData.control_mode ||
+                DefaultControlNetUnitData.control_mode
+            dataitem.pixel_perfect =
+                presetData.pixel_perfect ||
+                DefaultControlNetUnitData.pixel_perfect
         })
     }
     // function to update presetMenuChildren
     updatePresetMenuChildren(newChildren: any) {
-    this.setState({ presetMenuChildren: newChildren });
+        this.setState({ presetMenuChildren: newChildren })
     }
     async updatePresetMenuEvent() {
-        
         const custom_presets = await preset.getAllCustomPresetsSettings(
             Enum.PresetTypeEnum['ControlNetPreset']
         )
@@ -63,11 +88,26 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
         const presets_names = Object.keys(g_controlnet_presets)
 
         // debugger;
-        const presetMenuChildren = presets_names.map(preset_name => {
+        const presetMenuChildren = presets_names.map((preset_name) => {
-            if (preset_name == "Select CtrlNet Preset")
+            if (preset_name == 'Select CtrlNet Preset')
-                return <sp-menu-item key={preset_name} className="mControlNetPresetMenuItem" selected>{preset_name}</sp-menu-item>
+                return (
+                    <sp-menu-item
+                        key={preset_name}
+                        className="mControlNetPresetMenuItem"
+                        selected
+                    >
+                        {preset_name}
+                    </sp-menu-item>
+                )
             else
-                return <sp-menu-item key={preset_name} className="mControlNetPresetMenuItem">{preset_name}</sp-menu-item>
+                return (
+                    <sp-menu-item
+                        key={preset_name}
+                        className="mControlNetPresetMenuItem"
+                    >
+                        {preset_name}
+                    </sp-menu-item>
+                )
         })
         this.updatePresetMenuChildren(presetMenuChildren)
     }
@@ -75,7 +115,8 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
     async onSetAllControlImage() {
         const selectionInfo = await selection.Selection.getSelectionInfoExe()
         if (selectionInfo) {
-            const base64_image = await g_generation_session.setControlNetImageHelper()
+            const base64_image =
+                await g_generation_session.setControlNetImageHelper()
 
             ControlNetStore.controlNetUnitData.forEach(async (data) => {
                 data.input_image = base64_image
@@ -101,22 +142,23 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
                         id="mControlNetPresetMenu"
                         value="Select CtrlNet Preset"
                         onChange={this.onPresetMenuChange.bind(this)}
-                        onUpdatePresetMenuEvent={this.updatePresetMenuEvent.bind(this)}
+                        onUpdatePresetMenuEvent={this.updatePresetMenuEvent.bind(
+                            this
+                        )}
                     >
-                        {this.state.presetMenuChildren.map(child => child)}
+                        {this.state.presetMenuChildren.map((child) => child)}
                     </SpMenuComponent>
                 </sp-picker>
                 <div></div>
-                {
+                {this.props.appState.maxControlNet == 0 && (
-                    this.props.appState.maxControlNet == 0 && (
                     <sp-label
                         id="controlnetMissingError"
                         style={{ color: '#ff595e', whiteSpace: 'normal' }}
                     >
                         The Controlnet Extension is missing from Automatic1111.
                         Please install it to use it through the plugin.
-                        </sp-label>)
+                    </sp-label>
-                }
+                )}
                 <div
                     id="control_net_image_container"
                     className="imgContainer controlNetImaageContainer"
@@ -130,26 +172,45 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
                             Set All CtrlNet Images
                         </button>
                     </div>
-                    <sp-checkbox id="chDisableControlNetTab"
+                    <sp-checkbox id="chDisableControlNetTab">
-                    >Disable ControlNet Tab</sp-checkbox>
+                        Disable ControlNet Tab
+                    </sp-checkbox>
                 </div>
                 <div>
-                    
+                    {Array(this.props.appState.maxControlNet * 2)
-                    {
+                        .fill(0)
-                    Array(this.props.appState.maxControlNet * 2).fill(0).map((v, index) => {
+                        .map((v, index) => {
                             if (index % 2 == 0) {
-                            return <div key={`divider${index}`}><sp-divider class="line-divider" size="large"></sp-divider><sp-divider class="line-divider" size="large"></sp-divider><sp-divider class="line-divider" size="large"></sp-divider></div>
+                                return (
-                        }
+                                    <div key={`divider${index}`}>
-                        else {
+                                        <sp-divider
-                            return <ControlNetUnit appState={this.props.appState} key={(index - 1) / 2} index={(index - 1) / 2} />
+                                            class="line-divider"
-                        }
+                                            size="large"
-                    })
+                                        ></sp-divider>
+                                        <sp-divider
+                                            class="line-divider"
+                                            size="large"
+                                        ></sp-divider>
+                                        <sp-divider
+                                            class="line-divider"
+                                            size="large"
+                                        ></sp-divider>
+                                    </div>
+                                )
+                            } else {
+                                return (
+                                    <ControlNetUnit
+                                        appState={this.props.appState}
+                                        key={(index - 1) / 2}
+                                        index={(index - 1) / 2}
+                                    />
+                                )
                             }
+                        })}
                 </div>
             </div>
-        );
+        )
     }
 }
 
-
+export default ControlNetTab
-export default ControlNetTab;

typescripts/controlnet/ControlNetUnit.tsx

@@ -1,107 +1,168 @@
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react'
-import React from 'react';
+import React from 'react'
-import { MoveToCanvasSvg,ActionButtonSVG, SpCheckBox, SpMenu, SpSlider, Thumbnail, PenSvg, PreviewSvg } from '../util/elements';
+import {
-import ControlNetStore from './store';
+    MoveToCanvasSvg,
-import { mapRange, versionCompare } from './util';
+    ActionButtonSVG,
-import { note, selection, html_manip, psapi,api, general } from '../util/oldSystem';
+    SpCheckBox,
-
+    SpMenu,
-
+    SpSlider,
-declare const g_generation_session: any;
+    Thumbnail,
-declare const io: any;
+    PenSvg,
-declare const app: any;
+    PreviewSvg,
-declare let g_sd_url: string;
+} from '../util/elements'
+import ControlNetStore from './store'
+import { mapRange, versionCompare } from './util'
+import {
+    note,
+    selection,
+    html_manip,
+    psapi,
+    api,
+    general,
+} from '../util/oldSystem'
 
+declare const g_generation_session: any
+declare const io: any
+declare const app: any
+declare let g_sd_url: string
 
 @observer
-export default class ControlNetUnit extends React.Component<{ index: number, appState: typeof ControlNetStore }, {}> {
+export default class ControlNetUnit extends React.Component<
-
+    { index: number; appState: typeof ControlNetStore },
+    {}
+> {
     onEnableChange(event: any) {
         event.preventDefault()
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.enabled = !storeData.enabled;
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.enabled = !storeData.enabled
     }
     onLowVRamChange(event: any) {
         event.preventDefault()
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.lowvram = !storeData.lowvram;
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.lowvram = !storeData.lowvram
     }
     onGuessModeChange(event: any) {
         event.preventDefault()
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.guessmode = !storeData.guessmode;
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.guessmode = !storeData.guessmode
     }
     onPixelPerfectChange(event: any) {
         event.preventDefault()
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        console.log('onPixelPerfectChange', storeData.pixel_perfect);
+            this.props.appState.controlNetUnitData[this.props.index]
-        storeData.pixel_perfect = !storeData.pixel_perfect;
+        console.log('onPixelPerfectChange', storeData.pixel_perfect)
+        storeData.pixel_perfect = !storeData.pixel_perfect
     }
     onWeightMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.weight = +mapRange(event.target.value, 0, 200, 0, 2, 0.01).toFixed(2);
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.weight = +mapRange(
+            event.target.value,
+            0,
+            200,
+            0,
+            2,
+            0.01
+        ).toFixed(2)
     }
     onGuidanceStartMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.guidance_start = +mapRange(event.target.value, 0, 10, 0, 1, 0.1).toFixed(1);
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.guidance_start = +mapRange(
+            event.target.value,
+            0,
+            10,
+            0,
+            1,
+            0.1
+        ).toFixed(1)
     }
     onGuidanceEndMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        storeData.guidance_end = +mapRange(event.target.value, 0, 10, 0, 1, 0.1).toFixed(1);
+            this.props.appState.controlNetUnitData[this.props.index]
+        storeData.guidance_end = +mapRange(
+            event.target.value,
+            0,
+            10,
+            0,
+            1,
+            0.1
+        ).toFixed(1)
     }
-    onPreprocsesorChange(event: any, { index, item }: { index: number, item: string }) {
+    onPreprocsesorChange(
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        event: any,
+        { index, item }: { index: number; item: string }
+    ) {
+        const storeData =
+            this.props.appState.controlNetUnitData[this.props.index]
         storeData.module = item
     }
-    onModelChange(event: any, { index, item }: { index: number, item: string }) {
+    onModelChange(
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        event: any,
+        { index, item }: { index: number; item: string }
+    ) {
+        const storeData =
+            this.props.appState.controlNetUnitData[this.props.index]
         storeData.model = item
     }
     onResolutionMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
+            this.props.appState.controlNetUnitData[this.props.index]
-        let sliderConfig = resolutionConfig.sliders[0];
+        let resolutionConfig =
-        storeData.processor_res = +(event.target.value * (sliderConfig.step || 1));
+            this.props.appState.preprocessorDetail[storeData.module] || {}
+        let sliderConfig = resolutionConfig.sliders[0]
+        storeData.processor_res = +(
+            event.target.value * (sliderConfig.step || 1)
+        )
     }
     onThresholdAMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
+            this.props.appState.controlNetUnitData[this.props.index]
-        let sliderConfig = resolutionConfig.sliders[1];
+        let resolutionConfig =
-        storeData.threshold_a = +(event.target.value * (sliderConfig.step || 1));
+            this.props.appState.preprocessorDetail[storeData.module] || {}
+        let sliderConfig = resolutionConfig.sliders[1]
+        storeData.threshold_a = +(event.target.value * (sliderConfig.step || 1))
     }
     onThresholdBMove(event: any) {
         event.preventDefault()
-        if (event.target.tagName != 'SP-SLIDER') return;
+        if (event.target.tagName != 'SP-SLIDER') return
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
+            this.props.appState.controlNetUnitData[this.props.index]
-        let sliderConfig = resolutionConfig.sliders[2];
+        let resolutionConfig =
-        storeData.threshold_b = +(event.target.value * (sliderConfig.step || 1));
+            this.props.appState.preprocessorDetail[storeData.module] || {}
+        let sliderConfig = resolutionConfig.sliders[2]
+        storeData.threshold_b = +(event.target.value * (sliderConfig.step || 1))
     }
     async onSetImageButtonClick() {
         const selectionInfo = await selection.Selection.getSelectionInfoExe()
         if (selectionInfo) {
-            const base64_image = await g_generation_session.setControlNetImageHelper()
+            const base64_image =
+                await g_generation_session.setControlNetImageHelper()
 
-            this.props.appState.controlNetUnitData[this.props.index].input_image = base64_image
+            this.props.appState.controlNetUnitData[
+                this.props.index
+            ].input_image = base64_image
         } else {
             await note.Notification.inactiveSelectionArea()
         }
     }
     async onMaskButtonClick() {
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        if (
+            this.props.appState.controlNetUnitData[this.props.index]
-            g_generation_session.control_net_selection_info &&
+        if (g_generation_session.control_net_selection_info && storeData.mask) {
-            storeData.mask
-        ) {
             const selection_info =
                 g_generation_session.control_net_selection_info
             const layer = await io.IO.base64ToLayer(
@@ -147,15 +208,14 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
         }
     }
 
-
     async previewAnnotator() {
         const index = this.props.index
         try {
-            const storeData = this.props.appState.controlNetUnitData[index];
+            const storeData = this.props.appState.controlNetUnitData[index]
 
             const controlnet_init_image = storeData.input_image
 
-                const _module = storeData.module || 'none';
+            const _module = storeData.module || 'none'
             const processor_res = storeData.processor_res
             const threshold_a = storeData.threshold_a
             const threshold_b = storeData.threshold_b
@@ -185,7 +245,6 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
             g_generation_session.controlNetMask[index] = rgb_detect_map
 
             storeData.mask = rgb_detect_map
-            
         } catch (e) {
             console.warn('PreviewAnnotator click(): index: ', index, e)
         }
@@ -211,8 +270,10 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
         }
     }
     async toControlNetInitImage() {
-        const preview_result_base64 = g_generation_session.controlNetMask[this.props.index]
+        const preview_result_base64 =
-        g_generation_session.controlNetImage[this.props.index] = preview_result_base64
+            g_generation_session.controlNetMask[this.props.index]
+        g_generation_session.controlNetImage[this.props.index] =
+            preview_result_base64
         g_generation_session.control_net_selection_info =
             g_generation_session.control_net_preview_selection_info
 
@@ -224,20 +285,24 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
         // g_generation_session.controlNetMask[index] = rgb_detect_map
 
         // html_manip.setControlImageSrc(rgb_detect_map_url, this.props.index)
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
+            this.props.appState.controlNetUnitData[this.props.index]
 
         storeData.input_image = storeData.mask
     }
     async previewAnnotatorFromCanvas() {
         try {
-            const storeData = this.props.appState.controlNetUnitData[this.props.index];
+            const storeData =
-            const _module = storeData.module || 'none';
+                this.props.appState.controlNetUnitData[this.props.index]
+            const _module = storeData.module || 'none'
 
             const width = html_manip.getWidth()
             const height = html_manip.getHeight()
             const selectionInfo = await psapi.getSelectionInfoExe()
-            g_generation_session.control_net_preview_selection_info = selectionInfo
+            g_generation_session.control_net_preview_selection_info =
-            const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
+                selectionInfo
+            const base64 =
+                await io.IO.getSelectionFromCanvasAsBase64Interface_New(
                     width,
                     height,
                     selectionInfo,
@@ -268,22 +333,30 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
 
             storeData.mask = general.base64UrlToBase64(rgb_detect_map_url)
         } catch (e) {
-            console.warn('PreviewAnnotator click(): index: ', this.props.index, e)
+            console.warn(
+                'PreviewAnnotator click(): index: ',
+                this.props.index,
+                e
+            )
         }
     }
     render() {
-        const storeData = this.props.appState.controlNetUnitData[this.props.index];
+        const storeData =
-        const pd = this.props.appState.preprocessorDetail[storeData.module] || {};
+            this.props.appState.controlNetUnitData[this.props.index]
-        const ppSlider = pd.sliders || [];
+        const pd =
+            this.props.appState.preprocessorDetail[storeData.module] || {}
+        const ppSlider = pd.sliders || []
 
-        console.log("pixel_perfect:" + storeData.pixel_perfect);
+        console.log('pixel_perfect:' + storeData.pixel_perfect)
 
-        return <div id={`controlnet_settings_${this.props.index}`}>
+        return (
+            <div id={`controlnet_settings_${this.props.index}`}>
                 <div className="flexContainer">
-                <sp-label slot="label"
+                    <sp-label slot="label">
-                >Control Net Settings Slot {this.props.index}</sp-label>
+                        Control Net Settings Slot {this.props.index}
+                    </sp-label>
                 </div>
-            <div style={{ display: "flex" }}>
+                <div style={{ display: 'flex' }}>
                     <div
                         id={`control_net_image_container_${this.props.index}`}
                         className="imgContainer controlNetImaageContainer"
@@ -292,7 +365,12 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                             <img
                                 id={`control_net_image_${this.props.index}`}
                                 className="column-item-image"
-                            src={storeData.input_image ? 'data:image/png;base64,' + storeData.input_image : "https://source.unsplash.com/random"}
+                                src={
+                                    storeData.input_image
+                                        ? 'data:image/png;base64,' +
+                                          storeData.input_image
+                                        : 'https://source.unsplash.com/random'
+                                }
                                 width="300px"
                                 height="100px"
                             />
@@ -317,22 +395,41 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                                 <img
                                     id={`control_net_mask_${this.props.index}`}
                                     className="column-item-image"
-                            src={storeData.mask ? 'data:image/png;base64,' + storeData.mask : "https://source.unsplash.com/random"}
+                                    src={
+                                        storeData.mask
+                                            ? 'data:image/png;base64,' +
+                                              storeData.mask
+                                            : 'https://source.unsplash.com/random'
+                                    }
                                     width="300px"
                                     height="100px"
                                 />
-            <ActionButtonSVG onClick={this.toControlNetInitImage.bind(this)} ><PenSvg/></ActionButtonSVG>
+                                <ActionButtonSVG
-            <ActionButtonSVG onClick={this.toCanvas.bind(this)} ><MoveToCanvasSvg/></ActionButtonSVG>
+                                    onClick={this.toControlNetInitImage.bind(
-            <ActionButtonSVG onClick={this.previewAnnotatorFromCanvas.bind(this)} ><PreviewSvg/></ActionButtonSVG>
+                                        this
+                                    )}
+                                >
+                                    <PenSvg />
+                                </ActionButtonSVG>
+                                <ActionButtonSVG
+                                    onClick={this.toCanvas.bind(this)}
+                                >
+                                    <MoveToCanvasSvg />
+                                </ActionButtonSVG>
+                                <ActionButtonSVG
+                                    onClick={this.previewAnnotatorFromCanvas.bind(
+                                        this
+                                    )}
+                                >
+                                    <PreviewSvg />
+                                </ActionButtonSVG>
                             </Thumbnail>
-                       
                         </div>
                         <div className="imgButton btnClass">
                             <button
                                 className="column-item button-style btnSquare"
                                 id={`bControlMask_${this.props.index}`}
                                 onClick={this.previewAnnotator.bind(this)}
-                            
                                 title="Preview Annotator"
                             >
                                 Preview Annotator
@@ -341,28 +438,74 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                     </div>
                 </div>
 
-            <SpCheckBox style={{marginRight: "10px"}} onChange={this.onEnableChange.bind(this)} checked={storeData.enabled} id={`chEnableControlNet_${this.props.index}`} value={this.props.appState.controlNetUnitData[this.props.index].enabled}>Enable</SpCheckBox>
+                <SpCheckBox
-            <SpCheckBox style={{marginRight: "10px"}} onChange={this.onLowVRamChange.bind(this)} checked={storeData.lowvram} id={`chlowVram_${this.props.index}`}>Low VRAM</SpCheckBox>
+                    style={{ marginRight: '10px' }}
-            <SpCheckBox style={{display: this.props.appState.controlnetApiVersion > 1 ? 'none' : void 0, marginRight: "10px"}} onChange={this.onGuessModeChange.bind(this)} checked={storeData.guessmode} id={`chGuessMode_${this.props.index}`}>Guess Mode</SpCheckBox>
+                    onChange={this.onEnableChange.bind(this)}
-            <SpCheckBox style={{display: this.props.appState.controlnetApiVersion > 1 ? void 0 : 'none', marginRight: "10px"}} onChange={this.onPixelPerfectChange.bind(this)} checked={storeData.pixel_perfect} id={`chPixelPerfect_${this.props.index}`}>Pixel Perfect</SpCheckBox>
+                    checked={storeData.enabled}
-            {
+                    id={`chEnableControlNet_${this.props.index}`}
-                this.props.appState.controlnetApiVersion > 1 &&
+                    value={
-                <sp-radio-group id={`rgControlNetMode_${this.props.index}`} style={{ display: 'flex' }}>
+                        this.props.appState.controlNetUnitData[this.props.index]
+                            .enabled
+                    }
+                >
+                    Enable
+                </SpCheckBox>
+                <SpCheckBox
+                    style={{ marginRight: '10px' }}
+                    onChange={this.onLowVRamChange.bind(this)}
+                    checked={storeData.lowvram}
+                    id={`chlowVram_${this.props.index}`}
+                >
+                    Low VRAM
+                </SpCheckBox>
+                <SpCheckBox
+                    style={{
+                        display:
+                            this.props.appState.controlnetApiVersion > 1
+                                ? 'none'
+                                : void 0,
+                        marginRight: '10px',
+                    }}
+                    onChange={this.onGuessModeChange.bind(this)}
+                    checked={storeData.guessmode}
+                    id={`chGuessMode_${this.props.index}`}
+                >
+                    Guess Mode
+                </SpCheckBox>
+                <SpCheckBox
+                    style={{
+                        display:
+                            this.props.appState.controlnetApiVersion > 1
+                                ? void 0
+                                : 'none',
+                        marginRight: '10px',
+                    }}
+                    onChange={this.onPixelPerfectChange.bind(this)}
+                    checked={storeData.pixel_perfect}
+                    id={`chPixelPerfect_${this.props.index}`}
+                >
+                    Pixel Perfect
+                </SpCheckBox>
+                {this.props.appState.controlnetApiVersion > 1 && (
+                    <sp-radio-group
+                        id={`rgControlNetMode_${this.props.index}`}
+                        style={{ display: 'flex' }}
+                    >
                         <sp-label slot="label">Control Mode:</sp-label>
-                    <sp-radio
+                        <sp-radio checked value="0">
-                        checked
+                            Balanced
-                        value="0"
+                        </sp-radio>
-                    >Balanced</sp-radio>
+                        <sp-radio title="My prompt is more important" value="1">
-                    <sp-radio
+                            Prompt
-                        title="My prompt is more important"
+                        </sp-radio>
-                        value="1"
-                    >Prompt</sp-radio>
                         <sp-radio
                             title="ControlNet is more important"
                             value="2"
-                    >ControlNet</sp-radio>
+                        >
+                            ControlNet
+                        </sp-radio>
                     </sp-radio-group>
-            }
+                )}
 
                 <div>
                     <div>
@@ -376,7 +519,12 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                             title="2 will keep the composition; 0 will allow composition to change"
                         >
                             <sp-label slot="label">Weight:</sp-label>
-                        <sp-label slot="label" id={`lControlNetWeight_${this.props.index}`}>{storeData.weight}</sp-label>
+                            <sp-label
+                                slot="label"
+                                id={`lControlNetWeight_${this.props.index}`}
+                            >
+                                {storeData.weight}
+                            </sp-label>
                         </SpSlider>
                         <SpSlider
                             show-value="false"
@@ -386,11 +534,15 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                             value="0"
                             onInput={this.onGuidanceStartMove.bind(this)}
                         >
-                        <sp-label slot="label">Guidance strength start:</sp-label>
+                            <sp-label slot="label">
+                                Guidance strength start:
+                            </sp-label>
                             <sp-label
                                 slot="label"
                                 id={`lControlNetGuidanceStrengthStart_${this.props.index}`}
-                        >{storeData.guidance_start}</sp-label>
+                            >
+                                {storeData.guidance_start}
+                            </sp-label>
                         </SpSlider>
                         <SpSlider
                             show-value="false"
@@ -400,64 +552,115 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
                             value="100"
                             onInput={this.onGuidanceEndMove.bind(this)}
                         >
-                        <sp-label slot="label">Guidance strength end:</sp-label>
+                            <sp-label slot="label">
+                                Guidance strength end:
+                            </sp-label>
                             <sp-label
                                 slot="label"
                                 id={`lControlNetGuidanceStrengthEnd_${this.props.index}`}
-                        >{storeData.guidance_end}</sp-label>
+                            >
+                                {storeData.guidance_end}
+                            </sp-label>
                         </SpSlider>
-                    {ppSlider && ppSlider[0] && !storeData.pixel_perfect && <SpSlider
+                        {ppSlider &&
+                            ppSlider[0] &&
+                            !storeData.pixel_perfect && (
+                                <SpSlider
                                     show-value="false"
-                        min={ppSlider[0].min / (ppSlider[0].step || 1)}
+                                    min={
-                        max={ppSlider[0].max / (ppSlider[0].step || 1)}
+                                        ppSlider[0].min /
-                        value={storeData.processor_res / (ppSlider[0].step || 1)}
+                                        (ppSlider[0].step || 1)
+                                    }
+                                    max={
+                                        ppSlider[0].max /
+                                        (ppSlider[0].step || 1)
+                                    }
+                                    value={
+                                        storeData.processor_res /
+                                        (ppSlider[0].step || 1)
+                                    }
                                     onInput={this.onResolutionMove.bind(this)}
                                 >
-                        <sp-label slot="label">{ppSlider[0].name}:</sp-label>
+                                    <sp-label slot="label">
-                        <sp-label slot="label">{storeData.processor_res.toFixed(2)}</sp-label>
+                                        {ppSlider[0].name}:
-                    </SpSlider>}
+                                    </sp-label>
-                    {ppSlider && ppSlider[1] && <SpSlider
+                                    <sp-label slot="label">
+                                        {storeData.processor_res.toFixed(2)}
+                                    </sp-label>
+                                </SpSlider>
+                            )}
+                        {ppSlider && ppSlider[1] && (
+                            <SpSlider
                                 show-value="false"
                                 min={ppSlider[1].min / (ppSlider[1].step || 1)}
                                 max={ppSlider[1].max / (ppSlider[1].step || 1)}
-                        value={storeData.threshold_a / (ppSlider[1].step || 1)}
+                                value={
+                                    storeData.threshold_a /
+                                    (ppSlider[1].step || 1)
+                                }
                                 onInput={this.onThresholdAMove.bind(this)}
                             >
-                        <sp-label slot="label">{ppSlider[1].name}:</sp-label>
+                                <sp-label slot="label">
-                        <sp-label slot="label">{storeData.threshold_a.toFixed(2)}</sp-label>
+                                    {ppSlider[1].name}:
-                    </SpSlider>}
+                                </sp-label>
-                    {ppSlider && ppSlider[2] && <SpSlider
+                                <sp-label slot="label">
+                                    {storeData.threshold_a.toFixed(2)}
+                                </sp-label>
+                            </SpSlider>
+                        )}
+                        {ppSlider && ppSlider[2] && (
+                            <SpSlider
                                 show-value="false"
                                 min={ppSlider[2].min / (ppSlider[2].step || 1)}
                                 max={ppSlider[2].max / (ppSlider[2].step || 1)}
-                        value={storeData.threshold_b / (ppSlider[2].step || 1)}
+                                value={
+                                    storeData.threshold_b /
+                                    (ppSlider[2].step || 1)
+                                }
                                 onInput={this.onThresholdBMove.bind(this)}
                             >
-                        <sp-label slot="label">{ppSlider[2].name}:</sp-label>
+                                <sp-label slot="label">
-                        <sp-label slot="label">{storeData.threshold_b.toFixed(2)}</sp-label>
+                                    {ppSlider[2].name}:
-                    </SpSlider>}
+                                </sp-label>
+                                <sp-label slot="label">
+                                    {storeData.threshold_b.toFixed(2)}
+                                </sp-label>
+                            </SpSlider>
+                        )}
                     </div>
                 </div>
-            <div id={`menu-bar-control_net_${this.props.index}`} style={{ display: "flex" }}>
+                <div
+                    id={`menu-bar-control_net_${this.props.index}`}
+                    style={{ display: 'flex' }}
+                >
                     <SpMenu
                         onChange={this.onPreprocsesorChange.bind(this)}
                         id={`mModulesMenuControlNet_${this.props.index}`}
                         items={this.props.appState.supportedPreprocessors}
-                    label_item='Select Module'
+                        label_item="Select Module"
-                    selected_index={this.props.appState.supportedPreprocessors.indexOf(storeData.module || 'none')}
+                        selected_index={this.props.appState.supportedPreprocessors.indexOf(
+                            storeData.module || 'none'
+                        )}
                         style={{ width: '100%', display: 'flex' }}
                     />
-                {!pd.model_free && 
+                    {!pd.model_free && (
-                (<SpMenu
+                        <SpMenu
                             onChange={this.onModelChange.bind(this)}
                             id={`mModelsMenuControlNet_${this.props.index}`}
-                    items={['none'].concat(this.props.appState.supportedModels)}
+                            items={['none'].concat(
-                    label_item='Select Model'
+                                this.props.appState.supportedModels
-                    selected_index={this.props.appState.supportedModels.indexOf(storeData.model || 'none')+1}// 'none' item will offset the index by 1
+                            )}
+                            label_item="Select Model"
+                            selected_index={
+                                this.props.appState.supportedModels.indexOf(
+                                    storeData.model || 'none'
+                                ) + 1
+                            } // 'none' item will offset the index by 1
                             style={{ width: '100%', display: 'flex' }}
-                />)
+                        />
-                }
+                    )}
                 </div>
             </div>
+        )
     }
 }

typescripts/controlnet/entry.ts

@@ -1,16 +1,20 @@
-import { Enum, api } from "../util/oldSystem";
+import { Enum, api } from '../util/oldSystem'
-import { store, versionCompare } from "./main"
+import { store, versionCompare } from './main'
 
-declare const g_sd_config_obj: any;
+declare const g_sd_config_obj: any
-declare let g_sd_url: string;
+declare let g_sd_url: string
 
 async function requestControlNetPreprocessors() {
-    const control_net_json = await api.requestGet(`${g_sd_url}/controlnet/module_list?alias_name=1`)
+    const control_net_json = await api.requestGet(
+        `${g_sd_url}/controlnet/module_list?alias_name=1`
+    )
 
     return control_net_json
 }
 async function requestControlNetModelList(): Promise<any> {
-    const control_net_json = await api.requestGet(`${g_sd_url}/controlnet/model_list`)
+    const control_net_json = await api.requestGet(
+        `${g_sd_url}/controlnet/model_list`
+    )
 
     const model_list = control_net_json?.model_list
     return model_list
@@ -36,15 +40,14 @@ async function initializeControlNetTab(controlnet_max_models: number) {
 
     try {
         const models = await requestControlNetModelList()
-        store.supportedModels = models || [];
+        store.supportedModels = models || []
     } catch (e) {
         console.warn(e)
     }
     try {
         const pps = await requestControlNetPreprocessors()
-        store.supportedPreprocessors = pps ? pps.module_list : [];
+        store.supportedPreprocessors = pps ? pps.module_list : []
         store.preprocessorDetail = pps ? pps.module_detail : {}
-
     } catch (e) {
         console.warn(e)
     }
@@ -52,9 +55,10 @@ async function initializeControlNetTab(controlnet_max_models: number) {
 
 function getEnableControlNet(index: number) {
     if (typeof index == 'undefined')
-        return store.controlNetUnitData.filter(item => item.enabled).length > 0
+        return (
-    else
+            store.controlNetUnitData.filter((item) => item.enabled).length > 0
-        return store.controlNetUnitData[index || 0].enabled
+        )
+    else return store.controlNetUnitData[index || 0].enabled
 }
 function mapPluginSettingsToControlNet(plugin_settings: any) {
     const ps = plugin_settings // for shortness
@@ -79,8 +83,9 @@ function mapPluginSettingsToControlNet(plugin_settings: any) {
             guessmode: false,
         }
         if (store.controlnetApiVersion > 1) {
-            controlnet_units[index].control_mode = store.controlNetUnitData[index].control_mode;
+            controlnet_units[index].control_mode =
-            controlnet_units[index].pixel_perfect = true;
+                store.controlNetUnitData[index].control_mode
+            controlnet_units[index].pixel_perfect = true
         }
     }
 
@@ -89,7 +94,7 @@ function mapPluginSettingsToControlNet(plugin_settings: any) {
         plugin_settings['mode'] === Enum.generationModeEnum['Inpaint'] ||
         plugin_settings['mode'] === Enum.generationModeEnum['Outpaint']
     ) {
-        const b_use_guess_mode = store.controlNetUnitData[0].guessmode;
+        const b_use_guess_mode = store.controlNetUnitData[0].guessmode
         controlnet_units[0]['guessmode'] = b_use_guess_mode
     }
 
@@ -105,23 +110,23 @@ function mapPluginSettingsToControlNet(plugin_settings: any) {
                 args: controlnet_units,
             },
         },
-    
     }
 
     return controlnet_payload
 }
 function getControlNetMaxModelsNumber() {
-    return store.maxControlNet;
+    return store.maxControlNet
 }
 function getUnitsData() {
     return store.controlNetUnitData
 }
 function setControlMaskSrc(base64: string, index: number) {
-    store.controlNetUnitData[index].mask = base64;
+    store.controlNetUnitData[index].mask = base64
 }
 function isControlNetModeEnable() {
     //@ts-ignore
-    let is_tab_enabled = !document.getElementById('chDisableControlNetTab').checked
+    let is_tab_enabled = !document.getElementById('chDisableControlNetTab')
+        .checked
 
     let numOfEnabled = 0
     if (is_tab_enabled) {
@@ -138,7 +143,7 @@ function isControlNetModeEnable() {
     return is_mode_enabled
 }
 function getModuleDetail() {
-    return store.preprocessorDetail;
+    return store.preprocessorDetail
 }
 export {
     requestControlNetModelList,
@@ -150,5 +155,5 @@ export {
     getUnitsData,
     setControlMaskSrc,
     isControlNetModeEnable,
-    getModuleDetail
+    getModuleDetail,
 }

typescripts/controlnet/main.tsx

@@ -1,16 +1,13 @@
 import ReactDOM from 'react-dom/client'
-import React from 'react';
+import React from 'react'
-import ControlNetTab from './ControlNetTab';
+import ControlNetTab from './ControlNetTab'
 import store from './store'
 import { versionCompare } from './util'
 
-const elem = document.getElementById('sp-control_net-tab-page');
+const elem = document.getElementById('sp-control_net-tab-page')
 if (elem) {
     const root = ReactDOM.createRoot(elem)
     root.render(<ControlNetTab appState={store} />)
 }
 
-export {
+export { store, versionCompare }
-    store,
-    versionCompare
-}

typescripts/controlnet/store.ts

@@ -1,14 +1,14 @@
-import { observable, reaction } from "mobx";
+import { observable, reaction } from 'mobx'
 
 export const DefaultControlNetUnitData = {
     enabled: false,
     input_image: '',
     mask: '',
 
-    module: "",
+    module: '',
-    model: "",
+    model: '',
     weight: 1.0,
-    resize_mode: "Scale to Fit (Inner Fit)",
+    resize_mode: 'Scale to Fit (Inner Fit)',
     lowvram: true,
     processor_res: 512,
     threshold_a: 0,
@@ -18,38 +18,41 @@ export const DefaultControlNetUnitData = {
     guidance_end: 1,
     guessmode: false,
 
-    control_mode: "Balanced",
+    control_mode: 'Balanced',
     pixel_perfect: true,
 }
 
 export interface controlNetUnitData {
-    enabled: boolean,
+    enabled: boolean
-    input_image: string,
+    input_image: string
-    mask: string,
+    mask: string
 
-    module: string,
+    module: string
-    model: string,
+    model: string
-    weight: number,
+    weight: number
-    resize_mode: "Just Resize" | "Crop and Resize" | "Resize and Fill",
+    resize_mode: 'Just Resize' | 'Crop and Resize' | 'Resize and Fill'
-    lowvram: boolean,
+    lowvram: boolean
-    processor_res: number,
+    processor_res: number
-    threshold_a: number,
+    threshold_a: number
-    threshold_b: number,
+    threshold_b: number
 
-    guidance_start: number,
+    guidance_start: number
-    guidance_end: number,
+    guidance_end: number
-    guessmode: boolean,
+    guessmode: boolean
 
-    control_mode: "Balanced" | "My prompt is more important" | "ControlNet is more important",
+    control_mode:
-    pixel_perfect: boolean,
+        | 'Balanced'
+        | 'My prompt is more important'
+        | 'ControlNet is more important'
+    pixel_perfect: boolean
 }
 interface ControlNetMobxStore {
-    maxControlNet: number,
+    maxControlNet: number
-    controlnetApiVersion: number,
+    controlnetApiVersion: number
 
-    supportedModels: string[],
+    supportedModels: string[]
-    supportedPreprocessors: string[],
+    supportedPreprocessors: string[]
-    preprocessorDetail: {[key: string]: any},
+    preprocessorDetail: { [key: string]: any }
 
     controlNetUnitData: controlNetUnitData[]
 }
@@ -62,12 +65,12 @@ var ControlNetStore = observable<ControlNetMobxStore>({
     supportedPreprocessors: [],
     preprocessorDetail: {},
 
-    controlNetUnitData: []
+    controlNetUnitData: [],
-});
+})
 
 reaction(
     () => {
-        return ControlNetStore.controlNetUnitData.map(data => data.module)
+        return ControlNetStore.controlNetUnitData.map((data) => data.module)
     },
     (module_, index) => {
         ControlNetStore.controlNetUnitData.forEach((data, index) => {
@@ -81,9 +84,14 @@ reaction(
 )
 reaction(
     () => ControlNetStore.maxControlNet,
-    maxControlNet => {
+    (maxControlNet) => {
-        ControlNetStore.controlNetUnitData = Array(maxControlNet).fill(0).map((v, index) => {
+        ControlNetStore.controlNetUnitData = Array(maxControlNet)
-            return ControlNetStore.controlNetUnitData[index] || DefaultControlNetUnitData;
+            .fill(0)
+            .map((v, index) => {
+                return (
+                    ControlNetStore.controlNetUnitData[index] ||
+                    DefaultControlNetUnitData
+                )
             })
     }
 )

typescripts/controlnet/util.tsx

@@ -1,10 +1,18 @@
-
+export function mapRange(
-export function mapRange(x: number, in_min: number, in_max: number, out_min: number, out_max: number, step: number) {
+    x: number,
-    return Math.round(
+    in_min: number,
-        (
+    in_max: number,
-            ((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+    out_min: number,
-        ) / step
+    out_max: number,
+    step: number
+) {
+    return (
+        Math.round(
+            (((x - in_min) * (out_max - out_min)) / (in_max - in_min) +
+                out_min) /
+                step
         ) * step
+    )
 }
 
 export function versionCompare(to: string, from: string) {
@@ -14,13 +22,15 @@ export function versionCompare(to: string, from: string) {
     for (let i = 0; i < Math.max(vTo.length, vFrom.length); i++) {
         const vFromI = +(vFrom[i] || 0)
         const vToI = +(vTo[i] || 0)
-        if (isNaN(vFromI) || isNaN(vToI)) { throw new Error(`invalid version ${vTo} or ${vFrom} `) }
+        if (isNaN(vFromI) || isNaN(vToI)) {
+            throw new Error(`invalid version ${vTo} or ${vFrom} `)
+        }
 
         if (vFromI > vToI) {
             return -1
         } else if (vFromI < vToI) {
-            return 1;
+            return 1
         }
     }
-    return 0;
+    return 0
 }

typescripts/entry.ts

@@ -4,16 +4,3 @@ export * as ultimate_sd_upscaler from './ultimate_sd_upscaler/ultimate_sd_upscal
 export * as scripts from './ultimate_sd_upscaler/scripts'
 export * as main from './main/main'
 export * as logger from './util/logger'
-
-
-
-
-
-
-
-
-
-
-
-
-

typescripts/ultimate_sd_upscaler/ultimate_sd_upscaler.tsx

@@ -160,16 +160,14 @@ export class UltimateSDUpscalerForm extends React.Component<{
 
     async getUpscalers() {
         try {
-
             const sd_upscalers_json = await requestGetUpscalers()
             const sd_upscalers = sd_upscalers_json.map(
                 (upscaler: any) => upscaler.name
             )
             this.setState({ sd_upscalers: sd_upscalers })
             return sd_upscalers
-            }
+        } catch (e) {
-            catch(e){
+            console.warn('ultimate sd upscaler getUpscalers(): ', e)
-                console.warn("ultimate sd upscaler getUpscalers(): ",e)
         }
     }
 

typescripts/util/elements.tsx

@@ -2,11 +2,9 @@ import React, { CSSProperties, ReactEventHandler, useState } from 'react'
 // import ReactDOM from 'react-dom'
 import ReactDOM from 'react-dom/client'
 // import { versions } from 'uxp'
-export { ReactComponent as MoveToCanvasSvg } from '../../icon/move_to_canvas.svg';
+export { ReactComponent as MoveToCanvasSvg } from '../../icon/move_to_canvas.svg'
-export { ReactComponent as PenSvg } from '../../icon/pen.svg';
+export { ReactComponent as PenSvg } from '../../icon/pen.svg'
-export { ReactComponent as PreviewSvg } from '../../icon/preview.svg';
+export { ReactComponent as PreviewSvg } from '../../icon/preview.svg'
-
-
 
 declare global {
     namespace JSX {
@@ -266,11 +264,9 @@ export class SpMenu extends React.Component<{
     }
 }
 class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> {
-    protected elem: Element | null = null;
+    protected elem: Element | null = null
 
-    protected curEvents: { [key: string]: (evt: Event) => any } = {
+    protected curEvents: { [key: string]: (evt: Event) => any } = {}
-
-    }
 
     componentDidMount(): void {
         this.updateEventListener()
@@ -281,35 +277,34 @@ class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> {
     // }
 
     updateEventListener() {
-        if (!this.elem) throw new Error('elem is not rendered with ref');
+        if (!this.elem) throw new Error('elem is not rendered with ref')
 
         const [, newEvent] = this.splitProps(this.props)
 
-        Object.keys(this.curEvents).forEach(evkey => {
+        Object.keys(this.curEvents).forEach((evkey) => {
             if (this.curEvents[evkey] != newEvent[evkey]) {
-                this.elem?.removeEventListener(evkey, this.curEvents[evkey]);
+                this.elem?.removeEventListener(evkey, this.curEvents[evkey])
             }
-        });
+        })
-        Object.keys(newEvent).forEach(evkey => {
+        Object.keys(newEvent).forEach((evkey) => {
-            this.elem?.addEventListener(evkey, newEvent[evkey]);
+            this.elem?.addEventListener(evkey, newEvent[evkey])
         })
     }
 
     componentWillUnmount(): void {
-        Object.keys(this.curEvents).forEach(evkey => {
+        Object.keys(this.curEvents).forEach((evkey) => {
-            this.elem?.removeEventListener(evkey, this.curEvents[evkey]);
+            this.elem?.removeEventListener(evkey, this.curEvents[evkey])
-        });
+        })
     }
     splitProps(props: any): [any, any] {
-        const attr: any = {};
+        const attr: any = {}
-        const event: any = {};
+        const event: any = {}
         Object.keys(props).forEach((propKey: string) => {
             if (propKey.startsWith('on')) {
                 const key = propKey[2].toLocaleLowerCase() + propKey.slice(3)
-                event[key] = props[propKey];
+                event[key] = props[propKey]
-
             } else {
-                attr[propKey] = props[propKey];
+                attr[propKey] = props[propKey]
             }
         })
         return [attr, event]
@@ -318,81 +313,131 @@ class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> {
 export class SpPicker extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-picker ref={(elem: Element) => this.elem = elem} {...attr}></sp-picker>
+        return (
+            <sp-picker
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-picker>
+        )
     }
 }
 export class SpMenuComponent extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-menu ref={(elem: Element) => this.elem = elem} {...attr}></sp-menu>
+        return (
+            <sp-menu
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-menu>
+        )
     }
 }
 export class SpMenuItem extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-menu-item ref={(elem: Element) => this.elem = elem} {...attr}></sp-menu-item>
+        return (
+            <sp-menu-item
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-menu-item>
+        )
     }
 }
 export class SpLabel extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-label ref={(elem: Element) => this.elem = elem} {...attr}></sp-label>
+        return (
+            <sp-label
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-label>
+        )
     }
 }
 export class SpCheckBox extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
         if (!attr['checked']) delete attr['checked']
-        return <sp-checkbox ref={(elem: Element) => this.elem = elem} {...attr}></sp-checkbox>
+        return (
+            <sp-checkbox
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-checkbox>
+        )
     }
 }
 export class SpSlider extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-slider ref={(elem: Element) => this.elem = elem} {...attr}></sp-slider>
+        return (
+            <sp-slider
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-slider>
+        )
     }
 }
 export class SpRadioGroup extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-radio-group ref={(elem: Element) => this.elem = elem} {...attr}></sp-radio-group>
+        return (
+            <sp-radio-group
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-radio-group>
+        )
     }
 }
 export class SpRadio extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-radio ref={(elem: Element) => this.elem = elem} {...attr}></sp-radio>
+        return (
+            <sp-radio
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-radio>
+        )
     }
 }
 export class SpDivider extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
-        return <sp-divider ref={(elem: Element) => this.elem = elem} {...attr}></sp-divider>
+        return (
+            <sp-divider
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            ></sp-divider>
+        )
     }
 }
 
-
 export class Thumbnail extends React.Component<{ children: React.ReactNode }> {
-       
     render() {
-        return <div className='viewer-image-container'>
+        return (
-            
+            <div className="viewer-image-container">{this.props.children}</div>
-            {this.props.children}
+        )
-        </div>
     }
 }
 
-
-
 export class ActionButtonSVG extends PhotoshopElem {
     render() {
         const [attr] = this.splitProps(this.props)
 
-        return <sp-action-button style={{padding: 0, maxWidth: "32px",maxHeight: "32px"  /* display: none; */}}   class="thumbnail-image-button" ref={(elem: Element) => this.elem = elem} {...attr}>
+        return (
-
+            <sp-action-button
+                style={{
+                    padding: 0,
+                    maxWidth: '32px',
+                    maxHeight: '32px' /* display: none; */,
+                }}
+                class="thumbnail-image-button"
+                ref={(elem: Element) => (this.elem = elem)}
+                {...attr}
+            >
                 <div slot="icon" style={{ fill: 'currentColor' }}>
                     {this.props.children}
                 </div>
-                        </sp-action-button>}}
+            </sp-action-button>
-
+        )
-
+    }
+}

typescripts/util/logger.ts

@@ -1,7 +1,5 @@
-
+import { format } from 'util'
-import {format}  from 'util';
 export function formateLog(data: any, ...optional_param: any[]) {
-
+    const formattedOutput = format(data, ...optional_param)
-    const formattedOutput = format(data, ...optional_param);
     return formattedOutput
 }

typescripts/util/oldSystem.tsx

@@ -1,5 +1,5 @@
 //@ts-ignore
-const req = window['require'];
+const req = window['require']
 
 // because we use window['require'], so the base path of this require function is the root path of plugin.
 const selection = req('./selection')
@@ -26,5 +26,5 @@ export {
     html_manip,
     psapi,
     general,
-    io
+    io,
 }

utility/presets/preset.js

@@ -160,9 +160,9 @@ function getPresetSettings(preset_type) {
     if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
         preset_settings = g_ui_settings_object.getSettings()
     } else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) {
-        const { getUnitsData } = require('../../typescripts/dist/bundle').control_net // only import ControlNetUnit to avoid circular dependency
+        const { getUnitsData } =
+            require('../../typescripts/dist/bundle').control_net // only import ControlNetUnit to avoid circular dependency
         preset_settings = getUnitsData()
-
     }
     return preset_settings
 }

webpack.config.js

@@ -1,4 +1,3 @@
-
 const path = require('path')
 // const CleanWebpackPlugin = require('clean-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
@@ -25,9 +24,8 @@ module.exports = {
         extensions: ['.tsx', '.ts', '.js', '.jsx'],
 
         fallback: {
-                "util": require.resolve("util/")
+            util: require.resolve('util/'),
-            }
+        },
-     
     },
     module: {
         rules: [
@@ -64,7 +62,6 @@ module.exports = {
                 test: /\.svg$/,
                 use: ['@svgr/webpack', 'url-loader'],
             },
-            
         ],
     },
     plugins: [