1580158
/
Auto-Photoshop-StableDiffusion-Plugin
mirror of https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

formate project files with prettier

refactor_session
Abdullah Alfaraj 2023-06-10 12:16:50 +03:00
parent 3726305db6
commit 7e98fe0add
24 changed files with 884 additions and 589 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierignore
View File

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

1
index.html
View File

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

73
index.js
View File

@ -1,4 +1,3 @@
// import {helloHelper} from 'helper.js' // import {helloHelper} from 'helper.js'
// helloHelper2 = require('./helper.js') // helloHelper2 = require('./helper.js')
// for organizational proposes // for organizational proposes
@ -53,8 +52,13 @@ const lexica_tab = require('./utility/tab/lexica_tab')
const share_tab = require('./utility/tab/share_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 = require('./ultimate_sd_upscaler/dist/ultimate_sd_upscaler')
// const ultimate_sd_upscaler_script = require('./ultimate_sd_upscaler/dist/ultimate_sd_upscaler.bundle') // 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 io = require('./utility/io')
const _log = console.log const _log = console.log
@ -71,63 +75,52 @@ if (should_log) {
console.log(`error: ${e}`) console.log(`error: ${e}`)
}) })
console.log = (data, ...optional_param) => { console.log = (data, ...optional_param) => {
try { try {
_log(data, ...optional_param) _log(data, ...optional_param)
// const error = new Error({ data, ...optional_param }); // const error = new Error({ data, ...optional_param });
const formattedOutput = logger.formateLog(data,...optional_param) const formattedOutput = logger.formateLog(data, ...optional_param)
io.IOLog.saveLogToFile({log:formattedOutput }, 'log.txt') io.IOLog.saveLogToFile({ log: formattedOutput }, 'log.txt')
} catch (e) {
} catch (e) {
_warn('error while logging: ') _warn('error while logging: ')
_warn(e) _warn(e)
} }
} }
console.warn = (data, ...optional_param) => { console.warn = (data, ...optional_param) => {
try { 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) 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) { } catch (e) {
_warn('error while logging: '); _warn('error while logging: ')
_warn(e); _warn(e)
} }
} }
console.error = (data, ...optional_param) => { console.error = (data, ...optional_param) => {
try { 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) 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) { } 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') // const ultimate_sd_upscaler_script_test = require('./ultimate_sd_upscaler/dist/main')
// const { // const {
@ -4817,4 +4810,4 @@ Array.from(document.querySelectorAll('.rbSubTab')).forEach((rb) => {
// this.shadowRoot.innerHTML = '<h1>Hello World!</h1>' // this.shadowRoot.innerHTML = '<h1>Hello World!</h1>'
// } // }
// } // }
// customElements.define('custom-element', CustomElement) // customElements.define('custom-element', CustomElement)

37
sdapi_py_re.js
View File

@ -4,11 +4,8 @@ const { getExtensionType } = require('./utility/html_manip')
const py_re = require('./utility/sdapi/python_replacement') const py_re = require('./utility/sdapi/python_replacement')
const Enum = require('./enum') const Enum = require('./enum')
const { control_net } = require('./typescripts/dist/bundle') const { control_net } = require('./typescripts/dist/bundle')
const { const { mapPluginSettingsToControlNet, getEnableControlNet, getModuleDetail } =
mapPluginSettingsToControlNet, control_net
getEnableControlNet,
getModuleDetail,
} = control_net
const api = require('./utility/api') 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 //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
@ -483,13 +480,13 @@ async function requestControlNetTxt2Img(plugin_settings) {
app.showAlert('you need to select a valid ControlNet Module') app.showAlert('you need to select a valid ControlNet Module')
throw 'you need to select a valid ControlNet Module' throw 'you need to select a valid ControlNet Module'
} }
if ( if (
!control_net_settings['controlnet_units'][index]['model'] && (!control_net_settings['controlnet_units'][index]['model'] &&
!getModuleDetail()[ !getModuleDetail()[
control_net_settings['controlnet_units'][index]['module'] 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') app.showAlert('you need to select a valid ControlNet Model')
throw '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 mask_index >= numberOfAnnotations
) )
continue 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] g_generation_session.controlNetMask[index] = base64_mask[mask_index]
mask_index++ mask_index++
} }
@ -569,10 +563,10 @@ async function requestControlNetImg2Img(plugin_settings) {
throw 'you need to select a valid ControlNet Module' throw 'you need to select a valid ControlNet Module'
} }
if ( if (
!control_net_settings['controlnet_units'][index]['model'] && (!control_net_settings['controlnet_units'][index]['model'] &&
!getModuleDetail()[ !getModuleDetail()[
control_net_settings['controlnet_units'][index]['module'] 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') app.showAlert('you need to select a valid ControlNet Model')
@ -618,10 +612,7 @@ async function requestControlNetImg2Img(plugin_settings) {
mask_index >= numberOfAnnotations mask_index >= numberOfAnnotations
) )
continue 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] g_generation_session.controlNetMask[index] = base64_mask[mask_index]
mask_index++ mask_index++
} }

10
typescripts/@types/custom.d.ts vendored
View File

@ -1,6 +1,8 @@
declare module '*.svg' { 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
} }

5
typescripts/@types/sdapi_py_re.d.ts vendored
View File

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

6
typescripts/@types/uxp.d.ts vendored
View File

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

6
typescripts/after_detailer/after_detailer.tsx
View File

@ -4,11 +4,7 @@ import ReactDOM from 'react-dom/client'
// import { action, makeAutoObservable, reaction, toJS } from 'mobx' // import { action, makeAutoObservable, reaction, toJS } from 'mobx'
import { observer } from 'mobx-react' 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 * as sdapi from '../../sdapi_py_re'
import { api } from '../util/oldSystem' import { api } from '../util/oldSystem'
import { AStore } from '../main/astore' import { AStore } from '../main/astore'

2
typescripts/after_detailer/config.ts
View File

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

2
typescripts/after_detailer/style/after_detailer.css
View File

@ -25,4 +25,4 @@
.triangle { .triangle {
background-color: transparent; background-color: transparent;
} }

189
typescripts/controlnet/ControlNetTab.tsx
View File

@ -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 @observer
class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }>{ class ControlNetTab extends React.Component<{
appState: typeof ControlNetStore
}> {
state = { state = {
maxControlNet: 0, maxControlNet: 0,
presetMenuChildren: [] presetMenuChildren: [],
} }
// private presetMenuChildren: JSX.Element[] = [] // private presetMenuChildren: JSX.Element[] = []
onPresetMenuChange(evt: any) { onPresetMenuChange(evt: any) {
const preset_index = evt.target.selectedIndex const preset_index = evt.target.selectedIndex
const preset_name = evt.target.options[preset_index].textContent const preset_name = evt.target.options[preset_index].textContent
ControlNetStore.controlNetUnitData.forEach((dataitem, index) => { ControlNetStore.controlNetUnitData.forEach((dataitem, index) => {
const presetData = g_controlnet_presets[preset_name][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.mask = presetData.mask || DefaultControlNetUnitData.mask
dataitem.module = presetData.module || DefaultControlNetUnitData.module dataitem.module =
presetData.module || DefaultControlNetUnitData.module
dataitem.model = presetData.model || DefaultControlNetUnitData.model 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 // function to update presetMenuChildren
updatePresetMenuChildren(newChildren:any) { updatePresetMenuChildren(newChildren: any) {
this.setState({ presetMenuChildren: newChildren }); this.setState({ presetMenuChildren: newChildren })
} }
async updatePresetMenuEvent() { async updatePresetMenuEvent() {
const custom_presets = await preset.getAllCustomPresetsSettings( const custom_presets = await preset.getAllCustomPresetsSettings(
Enum.PresetTypeEnum['ControlNetPreset'] Enum.PresetTypeEnum['ControlNetPreset']
) )
@ -63,11 +88,26 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
const presets_names = Object.keys(g_controlnet_presets) const presets_names = Object.keys(g_controlnet_presets)
// debugger; // 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 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) this.updatePresetMenuChildren(presetMenuChildren)
} }
@ -75,7 +115,8 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
async onSetAllControlImage() { async onSetAllControlImage() {
const selectionInfo = await selection.Selection.getSelectionInfoExe() const selectionInfo = await selection.Selection.getSelectionInfoExe()
if (selectionInfo) { if (selectionInfo) {
const base64_image = await g_generation_session.setControlNetImageHelper() const base64_image =
await g_generation_session.setControlNetImageHelper()
ControlNetStore.controlNetUnitData.forEach(async (data) => { ControlNetStore.controlNetUnitData.forEach(async (data) => {
data.input_image = base64_image data.input_image = base64_image
@ -101,22 +142,23 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
id="mControlNetPresetMenu" id="mControlNetPresetMenu"
value="Select CtrlNet Preset" value="Select CtrlNet Preset"
onChange={this.onPresetMenuChange.bind(this)} 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> </SpMenuComponent>
</sp-picker> </sp-picker>
<div></div> <div></div>
{ {this.props.appState.maxControlNet == 0 && (
this.props.appState.maxControlNet == 0 && ( <sp-label
<sp-label id="controlnetMissingError"
id="controlnetMissingError" style={{ color: '#ff595e', whiteSpace: 'normal' }}
style={{ color: '#ff595e', whiteSpace: 'normal' }} >
> The Controlnet Extension is missing from Automatic1111.
The Controlnet Extension is missing from Automatic1111. Please install it to use it through the plugin.
Please install it to use it through the plugin. </sp-label>
</sp-label>) )}
}
<div <div
id="control_net_image_container" id="control_net_image_container"
className="imgContainer controlNetImaageContainer" className="imgContainer controlNetImaageContainer"
@ -130,26 +172,45 @@ class ControlNetTab extends React.Component<{ appState: typeof ControlNetStore }
Set All CtrlNet Images Set All CtrlNet Images
</button> </button>
</div> </div>
<sp-checkbox id="chDisableControlNetTab" <sp-checkbox id="chDisableControlNetTab">
>Disable ControlNet Tab</sp-checkbox> Disable ControlNet Tab
</sp-checkbox>
</div> </div>
<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) { 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>
</div> </div>
); )
} }
} }
export default ControlNetTab
export default ControlNetTab;

755
typescripts/controlnet/ControlNetUnit.tsx
View File

@ -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 @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) { onEnableChange(event: any) {
event.preventDefault() 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) { onLowVRamChange(event: any) {
event.preventDefault() 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) { onGuessModeChange(event: any) {
event.preventDefault() 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) { onPixelPerfectChange(event: any) {
event.preventDefault() 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) { onWeightMove(event: any) {
event.preventDefault() 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) { onGuidanceStartMove(event: any) {
event.preventDefault() 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) { onGuidanceEndMove(event: any) {
event.preventDefault() 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 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 storeData.model = item
} }
onResolutionMove(event: any) { onResolutionMove(event: any) {
event.preventDefault() 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) { onThresholdAMove(event: any) {
event.preventDefault() 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) { onThresholdBMove(event: any) {
event.preventDefault() 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() { async onSetImageButtonClick() {
const selectionInfo = await selection.Selection.getSelectionInfoExe() const selectionInfo = await selection.Selection.getSelectionInfoExe()
if (selectionInfo) { 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 { } else {
await note.Notification.inactiveSelectionArea() await note.Notification.inactiveSelectionArea()
} }
} }
async onMaskButtonClick() { 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 = const selection_info =
g_generation_session.control_net_selection_info g_generation_session.control_net_selection_info
const layer = await io.IO.base64ToLayer( const layer = await io.IO.base64ToLayer(
@ -119,11 +180,11 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
} }
async requestControlNetDetectMap( async requestControlNetDetectMap(
controlnet_init_image:string, controlnet_init_image: string,
_module:string, _module: string,
processor_res:number, processor_res: number,
threshold_a:number, threshold_a: number,
threshold_b:number threshold_b: number
) { ) {
try { try {
const payload = { const payload = {
@ -134,9 +195,9 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
controlnet_threshold_b: threshold_b, controlnet_threshold_b: threshold_b,
} }
const full_url = `${g_sd_url}/controlnet/detect` const full_url = `${g_sd_url}/controlnet/detect`
const response_data = await api.requestPost(full_url, payload) const response_data = await api.requestPost(full_url, payload)
// update the mask preview with the new detectMap // update the mask preview with the new detectMap
if (response_data['images'].length === 0) { if (response_data['images'].length === 0) {
app.showAlert(response_data['info']) app.showAlert(response_data['info'])
@ -146,19 +207,18 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
console.warn('requestControlNetDetectMap(): ', _module, e) console.warn('requestControlNetDetectMap(): ', _module, e)
} }
} }
async previewAnnotator() { async previewAnnotator() {
const index = this.props.index const index = this.props.index
try { try {
const storeData = this.props.appState.controlNetUnitData[index]; const storeData = this.props.appState.controlNetUnitData[index]
const controlnet_init_image = storeData.input_image const controlnet_init_image = storeData.input_image
const _module = storeData.module || 'none'; const _module = storeData.module || 'none'
const processor_res = storeData.processor_res const processor_res = storeData.processor_res
const threshold_a = storeData.threshold_a const threshold_a = storeData.threshold_a
const threshold_b = storeData.threshold_b const threshold_b = storeData.threshold_b
if (!controlnet_init_image) { if (!controlnet_init_image) {
const error = 'ControlNet initial image is empty' const error = 'ControlNet initial image is empty'
@ -170,7 +230,7 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
app.showAlert(error) app.showAlert(error)
throw error throw error
} }
const detect_map = await this.requestControlNetDetectMap( const detect_map = await this.requestControlNetDetectMap(
controlnet_init_image, controlnet_init_image,
_module, _module,
@ -178,19 +238,18 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
threshold_a, threshold_a,
threshold_b threshold_b
) )
const rgb_detect_map_url = const rgb_detect_map_url =
await io.convertBlackAndWhiteImageToRGBChannels3(detect_map) await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
const rgb_detect_map = general.base64UrlToBase64(rgb_detect_map_url) const rgb_detect_map = general.base64UrlToBase64(rgb_detect_map_url)
g_generation_session.controlNetMask[index] = rgb_detect_map g_generation_session.controlNetMask[index] = rgb_detect_map
storeData.mask = rgb_detect_map storeData.mask = rgb_detect_map
} catch (e) { } catch (e) {
console.warn('PreviewAnnotator click(): index: ', index, e) console.warn('PreviewAnnotator click(): index: ', index, e)
} }
} }
async toCanvas() { async toCanvas() {
if ( if (
g_generation_session.control_net_preview_selection_info && g_generation_session.control_net_preview_selection_info &&
g_generation_session.controlNetMask[this.props.index] g_generation_session.controlNetMask[this.props.index]
@ -211,8 +270,10 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
} }
} }
async toControlNetInitImage() { 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_selection_info =
g_generation_session.control_net_preview_selection_info g_generation_session.control_net_preview_selection_info
@ -224,36 +285,40 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
// g_generation_session.controlNetMask[index] = rgb_detect_map // g_generation_session.controlNetMask[index] = rgb_detect_map
// html_manip.setControlImageSrc(rgb_detect_map_url, this.props.index) // 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 storeData.input_image = storeData.mask
} }
async previewAnnotatorFromCanvas() { async previewAnnotatorFromCanvas() {
try { 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 width = html_manip.getWidth()
const height = html_manip.getHeight() const height = html_manip.getHeight()
const selectionInfo = await psapi.getSelectionInfoExe() 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
width, const base64 =
height, await io.IO.getSelectionFromCanvasAsBase64Interface_New(
selectionInfo, width,
true height,
) selectionInfo,
true
)
if (!_module || _module === 'none') { if (!_module || _module === 'none') {
const error = 'select a valid controlnet module (preprocessor)' const error = 'select a valid controlnet module (preprocessor)'
app.showAlert(error) app.showAlert(error)
throw error throw error
} }
const processor_res = storeData.processor_res const processor_res = storeData.processor_res
const threshold_a = storeData.threshold_a const threshold_a = storeData.threshold_a
const threshold_b = storeData.threshold_b const threshold_b = storeData.threshold_b
const detect_map = await this.requestControlNetDetectMap( const detect_map = await this.requestControlNetDetectMap(
base64, base64,
_module, _module,
@ -261,203 +326,341 @@ export default class ControlNetUnit extends React.Component<{ index: number, app
threshold_a, threshold_a,
threshold_b threshold_b
) )
const rgb_detect_map_url = const rgb_detect_map_url =
await io.convertBlackAndWhiteImageToRGBChannels3(detect_map) await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
g_generation_session.controlNetMask[this.props.index] = detect_map g_generation_session.controlNetMask[this.props.index] = detect_map
storeData.mask = general.base64UrlToBase64(rgb_detect_map_url) storeData.mask = general.base64UrlToBase64(rgb_detect_map_url)
} catch (e) { } catch (e) {
console.warn('PreviewAnnotator click(): index: ', this.props.index, e) console.warn(
'PreviewAnnotator click(): index: ',
this.props.index,
e
)
} }
} }
render() { 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 className="flexContainer"> <div id={`controlnet_settings_${this.props.index}`}>
<sp-label slot="label" <div className="flexContainer">
>Control Net Settings Slot {this.props.index}</sp-label> <sp-label slot="label">
</div> Control Net Settings Slot {this.props.index}
<div style={{ display: "flex" }}> </sp-label>
<div </div>
id={`control_net_image_container_${this.props.index}`} <div style={{ display: 'flex' }}>
className="imgContainer controlNetImaageContainer" <div
> id={`control_net_image_container_${this.props.index}`}
<div> className="imgContainer controlNetImaageContainer"
<img >
id={`control_net_image_${this.props.index}`} <div>
className="column-item-image" <img
src={storeData.input_image ? 'data:image/png;base64,' + storeData.input_image : "https://source.unsplash.com/random"} id={`control_net_image_${this.props.index}`}
width="300px" className="column-item-image"
height="100px" src={
/> storeData.input_image
? 'data:image/png;base64,' +
storeData.input_image
: 'https://source.unsplash.com/random'
}
width="300px"
height="100px"
/>
</div>
<div className="imgButton">
<button
className="column-item button-style btnSquare"
id={`bSetControlImage_${this.props.index}`}
onClick={this.onSetImageButtonClick.bind(this)}
title="Set CtrlNet Img"
>
Set CtrlNet Img
</button>
</div>
</div> </div>
<div className="imgButton"> <div
<button id={`control_net_mask_container_${this.props.index}`}
className="column-item button-style btnSquare" className="imgContainer controlNetImaageContainer"
id={`bSetControlImage_${this.props.index}`} >
onClick={this.onSetImageButtonClick.bind(this)} <div>
title="Set CtrlNet Img" <Thumbnail>
> <img
Set CtrlNet Img id={`control_net_mask_${this.props.index}`}
</button> className="column-item-image"
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
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
</button>
</div>
</div> </div>
</div> </div>
<div
id={`control_net_mask_container_${this.props.index}`} <SpCheckBox
className="imgContainer controlNetImaageContainer" 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
}
> >
<div> Enable
<Thumbnail> </SpCheckBox>
<img <SpCheckBox
id={`control_net_mask_${this.props.index}`} style={{ marginRight: '10px' }}
className="column-item-image" onChange={this.onLowVRamChange.bind(this)}
src={storeData.mask ? 'data:image/png;base64,' + storeData.mask : "https://source.unsplash.com/random"} checked={storeData.lowvram}
width="300px" id={`chlowVram_${this.props.index}`}
height="100px" >
/> Low VRAM
<ActionButtonSVG onClick={this.toControlNetInitImage.bind(this)} ><PenSvg/></ActionButtonSVG> </SpCheckBox>
<ActionButtonSVG onClick={this.toCanvas.bind(this)} ><MoveToCanvasSvg/></ActionButtonSVG> <SpCheckBox
<ActionButtonSVG onClick={this.previewAnnotatorFromCanvas.bind(this)} ><PreviewSvg/></ActionButtonSVG> style={{
</Thumbnail> display:
this.props.appState.controlnetApiVersion > 1
</div> ? 'none'
<div className="imgButton btnClass"> : void 0,
<button marginRight: '10px',
className="column-item button-style btnSquare" }}
id={`bControlMask_${this.props.index}`} onChange={this.onGuessModeChange.bind(this)}
onClick={this.previewAnnotator.bind(this)} checked={storeData.guessmode}
id={`chGuessMode_${this.props.index}`}
title="Preview Annotator" >
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 checked value="0">
Balanced
</sp-radio>
<sp-radio title="My prompt is more important" value="1">
Prompt
</sp-radio>
<sp-radio
title="ControlNet is more important"
value="2"
> >
Preview Annotator ControlNet
</button> </sp-radio>
</div> </sp-radio-group>
</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 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
checked
value="0"
>Balanced</sp-radio>
<sp-radio
title="My prompt is more important"
value="1"
>Prompt</sp-radio>
<sp-radio
title="ControlNet is more important"
value="2"
>ControlNet</sp-radio>
</sp-radio-group>
}
<div>
<div> <div>
<SpSlider <div>
show-value="false" <SpSlider
id={`slControlNetWeight_${this.props.index}`} show-value="false"
min="0" id={`slControlNetWeight_${this.props.index}`}
max="200" min="0"
value="100" max="200"
onInput={this.onWeightMove.bind(this)} value="100"
title="2 will keep the composition; 0 will allow composition to change" onInput={this.onWeightMove.bind(this)}
> 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">Weight:</sp-label>
</SpSlider> <sp-label
<SpSlider slot="label"
show-value="false" id={`lControlNetWeight_${this.props.index}`}
id={`slControlNetGuidanceStrengthStart_${this.props.index}`} >
min="0" {storeData.weight}
max="10" </sp-label>
value="0" </SpSlider>
onInput={this.onGuidanceStartMove.bind(this)} <SpSlider
> show-value="false"
<sp-label slot="label">Guidance strength start:</sp-label> id={`slControlNetGuidanceStrengthStart_${this.props.index}`}
<sp-label min="0"
slot="label" max="10"
id={`lControlNetGuidanceStrengthStart_${this.props.index}`} value="0"
>{storeData.guidance_start}</sp-label> onInput={this.onGuidanceStartMove.bind(this)}
</SpSlider> >
<SpSlider <sp-label slot="label">
show-value="false" Guidance strength start:
id={`slControlNetGuidanceStrengthEnd_${this.props.index}`} </sp-label>
min="0" <sp-label
max="10" slot="label"
value="100" id={`lControlNetGuidanceStrengthStart_${this.props.index}`}
onInput={this.onGuidanceEndMove.bind(this)} >
> {storeData.guidance_start}
<sp-label slot="label">Guidance strength end:</sp-label> </sp-label>
<sp-label </SpSlider>
slot="label" <SpSlider
id={`lControlNetGuidanceStrengthEnd_${this.props.index}`} show-value="false"
>{storeData.guidance_end}</sp-label> id={`slControlNetGuidanceStrengthEnd_${this.props.index}`}
</SpSlider> min="0"
{ppSlider && ppSlider[0] && !storeData.pixel_perfect && <SpSlider max="10"
show-value="false" value="100"
min={ppSlider[0].min / (ppSlider[0].step || 1)} onInput={this.onGuidanceEndMove.bind(this)}
max={ppSlider[0].max / (ppSlider[0].step || 1)} >
value={storeData.processor_res / (ppSlider[0].step || 1)} <sp-label slot="label">
onInput={this.onResolutionMove.bind(this)} Guidance strength end:
> </sp-label>
<sp-label slot="label">{ppSlider[0].name}:</sp-label> <sp-label
<sp-label slot="label">{storeData.processor_res.toFixed(2)}</sp-label> slot="label"
</SpSlider>} id={`lControlNetGuidanceStrengthEnd_${this.props.index}`}
{ppSlider && ppSlider[1] && <SpSlider >
show-value="false" {storeData.guidance_end}
min={ppSlider[1].min / (ppSlider[1].step || 1)} </sp-label>
max={ppSlider[1].max / (ppSlider[1].step || 1)} </SpSlider>
value={storeData.threshold_a / (ppSlider[1].step || 1)} {ppSlider &&
onInput={this.onThresholdAMove.bind(this)} ppSlider[0] &&
> !storeData.pixel_perfect && (
<sp-label slot="label">{ppSlider[1].name}:</sp-label> <SpSlider
<sp-label slot="label">{storeData.threshold_a.toFixed(2)}</sp-label> show-value="false"
</SpSlider>} min={
{ppSlider && ppSlider[2] && <SpSlider ppSlider[0].min /
show-value="false" (ppSlider[0].step || 1)
min={ppSlider[2].min / (ppSlider[2].step || 1)} }
max={ppSlider[2].max / (ppSlider[2].step || 1)} max={
value={storeData.threshold_b / (ppSlider[2].step || 1)} ppSlider[0].max /
onInput={this.onThresholdBMove.bind(this)} (ppSlider[0].step || 1)
> }
<sp-label slot="label">{ppSlider[2].name}:</sp-label> value={
<sp-label slot="label">{storeData.threshold_b.toFixed(2)}</sp-label> storeData.processor_res /
</SpSlider>} (ppSlider[0].step || 1)
}
onInput={this.onResolutionMove.bind(this)}
>
<sp-label slot="label">
{ppSlider[0].name}:
</sp-label>
<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)
}
onInput={this.onThresholdAMove.bind(this)}
>
<sp-label slot="label">
{ppSlider[1].name}:
</sp-label>
<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)
}
onInput={this.onThresholdBMove.bind(this)}
>
<sp-label slot="label">
{ppSlider[2].name}:
</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' }}
>
<SpMenu
onChange={this.onPreprocsesorChange.bind(this)}
id={`mModulesMenuControlNet_${this.props.index}`}
items={this.props.appState.supportedPreprocessors}
label_item="Select Module"
selected_index={this.props.appState.supportedPreprocessors.indexOf(
storeData.module || 'none'
)}
style={{ width: '100%', display: 'flex' }}
/>
{!pd.model_free && (
<SpMenu
onChange={this.onModelChange.bind(this)}
id={`mModelsMenuControlNet_${this.props.index}`}
items={['none'].concat(
this.props.appState.supportedModels
)}
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>
</div> </div>
<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'
selected_index={this.props.appState.supportedPreprocessors.indexOf(storeData.module || 'none')}
style={{width:'100%',display:'flex'}}
/>
{!pd.model_free &&
(<SpMenu
onChange={this.onModelChange.bind(this)}
id={`mModelsMenuControlNet_${this.props.index}`}
items={['none'].concat(this.props.appState.supportedModels)}
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>
} }
} }

49
typescripts/controlnet/entry.ts
View File

@ -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() { 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 return control_net_json
} }
async function requestControlNetModelList(): Promise<any> { 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 const model_list = control_net_json?.model_list
return model_list return model_list
@ -36,15 +40,14 @@ async function initializeControlNetTab(controlnet_max_models: number) {
try { try {
const models = await requestControlNetModelList() const models = await requestControlNetModelList()
store.supportedModels = models || []; store.supportedModels = models || []
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }
try { try {
const pps = await requestControlNetPreprocessors() const pps = await requestControlNetPreprocessors()
store.supportedPreprocessors = pps ? pps.module_list : []; store.supportedPreprocessors = pps ? pps.module_list : []
store.preprocessorDetail = pps ? pps.module_detail : {} store.preprocessorDetail = pps ? pps.module_detail : {}
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }
@ -52,9 +55,10 @@ async function initializeControlNetTab(controlnet_max_models: number) {
function getEnableControlNet(index: number) { function getEnableControlNet(index: number) {
if (typeof index == 'undefined') 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) { function mapPluginSettingsToControlNet(plugin_settings: any) {
const ps = plugin_settings // for shortness const ps = plugin_settings // for shortness
@ -79,8 +83,9 @@ function mapPluginSettingsToControlNet(plugin_settings: any) {
guessmode: false, guessmode: false,
} }
if (store.controlnetApiVersion > 1) { 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['Inpaint'] ||
plugin_settings['mode'] === Enum.generationModeEnum['Outpaint'] 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 controlnet_units[0]['guessmode'] = b_use_guess_mode
} }
@ -105,23 +110,23 @@ function mapPluginSettingsToControlNet(plugin_settings: any) {
args: controlnet_units, args: controlnet_units,
}, },
}, },
} }
return controlnet_payload return controlnet_payload
} }
function getControlNetMaxModelsNumber() { function getControlNetMaxModelsNumber() {
return store.maxControlNet; return store.maxControlNet
} }
function getUnitsData() { function getUnitsData() {
return store.controlNetUnitData return store.controlNetUnitData
} }
function setControlMaskSrc(base64: string, index: number) { function setControlMaskSrc(base64: string, index: number) {
store.controlNetUnitData[index].mask = base64; store.controlNetUnitData[index].mask = base64
} }
function isControlNetModeEnable() { function isControlNetModeEnable() {
//@ts-ignore //@ts-ignore
let is_tab_enabled = !document.getElementById('chDisableControlNetTab').checked let is_tab_enabled = !document.getElementById('chDisableControlNetTab')
.checked
let numOfEnabled = 0 let numOfEnabled = 0
if (is_tab_enabled) { if (is_tab_enabled) {
@ -138,7 +143,7 @@ function isControlNetModeEnable() {
return is_mode_enabled return is_mode_enabled
} }
function getModuleDetail() { function getModuleDetail() {
return store.preprocessorDetail; return store.preprocessorDetail
} }
export { export {
requestControlNetModelList, requestControlNetModelList,
@ -150,5 +155,5 @@ export {
getUnitsData, getUnitsData,
setControlMaskSrc, setControlMaskSrc,
isControlNetModeEnable, isControlNetModeEnable,
getModuleDetail getModuleDetail,
} }

13
typescripts/controlnet/main.tsx
View File

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

76
typescripts/controlnet/store.ts
View File

@ -1,14 +1,14 @@
import { observable, reaction } from "mobx"; import { observable, reaction } from 'mobx'
export const DefaultControlNetUnitData = { export const DefaultControlNetUnitData = {
enabled: false, enabled: false,
input_image: '', input_image: '',
mask: '', mask: '',
module: "", module: '',
model: "", model: '',
weight: 1.0, weight: 1.0,
resize_mode: "Scale to Fit (Inner Fit)", resize_mode: 'Scale to Fit (Inner Fit)',
lowvram: true, lowvram: true,
processor_res: 512, processor_res: 512,
threshold_a: 0, threshold_a: 0,
@ -18,38 +18,41 @@ export const DefaultControlNetUnitData = {
guidance_end: 1, guidance_end: 1,
guessmode: false, guessmode: false,
control_mode: "Balanced", control_mode: 'Balanced',
pixel_perfect: true, pixel_perfect: true,
} }
export interface controlNetUnitData { 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 { 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[] controlNetUnitData: controlNetUnitData[]
} }
@ -62,12 +65,12 @@ var ControlNetStore = observable<ControlNetMobxStore>({
supportedPreprocessors: [], supportedPreprocessors: [],
preprocessorDetail: {}, preprocessorDetail: {},
controlNetUnitData: [] controlNetUnitData: [],
}); })
reaction( reaction(
() => { () => {
return ControlNetStore.controlNetUnitData.map(data => data.module) return ControlNetStore.controlNetUnitData.map((data) => data.module)
}, },
(module_, index) => { (module_, index) => {
ControlNetStore.controlNetUnitData.forEach((data, index) => { ControlNetStore.controlNetUnitData.forEach((data, index) => {
@ -81,11 +84,16 @@ reaction(
) )
reaction( reaction(
() => ControlNetStore.maxControlNet, () => 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
)
})
} }
) )
export default ControlNetStore export default ControlNetStore

34
typescripts/controlnet/util.tsx
View File

@ -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 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) { 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++) { for (let i = 0; i < Math.max(vTo.length, vFrom.length); i++) {
const vFromI = +(vFrom[i] || 0) const vFromI = +(vFrom[i] || 0)
const vToI = +(vTo[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) { if (vFromI > vToI) {
return -1 return -1
} else if (vFromI < vToI) { } else if (vFromI < vToI) {
return 1; return 1
} }
} }
return 0; return 0
} }

13
typescripts/entry.ts
View File

@ -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 scripts from './ultimate_sd_upscaler/scripts'
export * as main from './main/main' export * as main from './main/main'
export * as logger from './util/logger' export * as logger from './util/logger'

2
typescripts/main/astore.ts
View File

@ -24,4 +24,4 @@ export class AStore {
toJsFunc() { toJsFunc() {
return toJS(this) return toJS(this)
} }
} }

16
typescripts/ultimate_sd_upscaler/ultimate_sd_upscaler.tsx
View File

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

145
typescripts/util/elements.tsx
View File

@ -2,11 +2,9 @@ import React, { CSSProperties, ReactEventHandler, useState } from 'react'
// import ReactDOM from 'react-dom' // import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
// import { versions } from 'uxp' // 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 { declare global {
namespace JSX { namespace JSX {
@ -266,11 +264,9 @@ export class SpMenu extends React.Component<{
} }
} }
class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> { 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 { componentDidMount(): void {
this.updateEventListener() this.updateEventListener()
@ -281,35 +277,34 @@ class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> {
// } // }
updateEventListener() { 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) const [, newEvent] = this.splitProps(this.props)
Object.keys(this.curEvents).forEach(evkey => { Object.keys(this.curEvents).forEach((evkey) => {
if (this.curEvents[evkey] != newEvent[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 { 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] { splitProps(props: any): [any, any] {
const attr: any = {}; const attr: any = {}
const event: any = {}; const event: any = {}
Object.keys(props).forEach((propKey: string) => { Object.keys(props).forEach((propKey: string) => {
if (propKey.startsWith('on')) { if (propKey.startsWith('on')) {
const key = propKey[2].toLocaleLowerCase() + propKey.slice(3) const key = propKey[2].toLocaleLowerCase() + propKey.slice(3)
event[key] = props[propKey]; event[key] = props[propKey]
} else { } else {
attr[propKey] = props[propKey]; attr[propKey] = props[propKey]
} }
}) })
return [attr, event] return [attr, event]
@ -318,81 +313,131 @@ class PhotoshopElem extends React.Component<{ [key: string]: any }, {}> {
export class SpPicker extends PhotoshopElem { export class SpPicker extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpMenuComponent extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpMenuItem extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpLabel extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpCheckBox extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) const [attr] = this.splitProps(this.props)
if (!attr['checked']) delete attr['checked'] 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 { export class SpSlider extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpRadioGroup extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpRadio extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 { export class SpDivider extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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 }> {
export class Thumbnail extends React.Component<{children:React.ReactNode}> { render() {
return (
render() { <div className="viewer-image-container">{this.props.children}</div>
return <div className='viewer-image-container'> )
{this.props.children}
</div>
} }
} }
export class ActionButtonSVG extends PhotoshopElem { export class ActionButtonSVG extends PhotoshopElem {
render() { render() {
const [attr] = this.splitProps(this.props) 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}>
<div slot="icon" style={{fill: 'currentColor'}}>
{this.props.children}
</div>
</sp-action-button>}}
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>
)
}
}

10
typescripts/util/logger.ts
View File

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

6
typescripts/util/oldSystem.tsx
View File

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

4
utility/presets/preset.js
View File

@ -160,9 +160,9 @@ function getPresetSettings(preset_type) {
if (preset_type === Enum.PresetTypeEnum['SDPreset']) { if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
preset_settings = g_ui_settings_object.getSettings() preset_settings = g_ui_settings_object.getSettings()
} else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) { } 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() preset_settings = getUnitsData()
} }
return preset_settings return preset_settings
} }

11
webpack.config.js
View File

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