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

6
.prettierignore
View File

@ -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

1
index.html
View File

@ -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"

59
index.js
View File

@ -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);
const error = new Error();
const stackTrace = error.stack;
_warn(data, ...optional_param)
const error = new Error()
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(e);
_warn('error while logging: ')
_warn(e)
}
}
console.error = (data, ...optional_param) => {
try {
_error(data, ...optional_param);
const error = new Error();
const stackTrace = error.stack;
_error(data, ...optional_param)
const error = new Error()
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(e);
}
_error('error while logging: ')
_error(e)
}
}
}
// const ultimate_sd_upscaler_script_test = require('./ultimate_sd_upscaler/dist/main')

27
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 Enum = require('./enum')
const { control_net } = require('./typescripts/dist/bundle')
const {
mapPluginSettingsToControlNet,
getEnableControlNet,
getModuleDetail,
} = control_net
const { mapPluginSettingsToControlNet, 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
|| control_net_settings['controlnet_units'][index]['model'] === 'none'
].model_free) ||
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(
base64_mask[mask_index],
index
)
control_net.setControlMaskSrc(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(
base64_mask[mask_index],
index
)
control_net.setControlMaskSrc(base64_mask[mask_index], index)
g_generation_session.controlNetMask[index] = base64_mask[mask_index]
mask_index++
}

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

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

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

@ -1,5 +1,5 @@
declare module 'uxp' {
// Add type declarations for the uxp module here
export const storage: any;
export const versions: any;
export const storage: 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 { observer } from 'mobx-react'
import {
SliderType,
SpMenu,
SpSliderWithLabel,
} from '../util/elements'
import { SliderType, SpMenu, SpSliderWithLabel } from '../util/elements'
// import * as sdapi from '../../sdapi_py_re'
import { api } from '../util/oldSystem'
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_yolov8s-seg.pt',
'None'
'None',
]
export let ui_config = {
ad_model: {

167
typescripts/controlnet/ControlNetTab.tsx
View File

@ -1,56 +1,81 @@
import { observer } from 'mobx-react';
import React from 'react';
import ControlNetUnit from './ControlNetUnit';
import { store as ControlNetStore } from './main';
import { DefaultControlNetUnitData } from './store';
import { Enum, controlnet_preset, note, preset, selection } from '../util/oldSystem';
import {SpMenuComponent} from '../util/elements';
import { observer } from 'mobx-react'
import React from 'react'
import ControlNetUnit from './ControlNetUnit'
import { store as ControlNetStore } from './main'
import { DefaultControlNetUnitData } from './store'
import {
Enum,
controlnet_preset,
note,
preset,
selection,
} from '../util/oldSystem'
import { SpMenuComponent } from '../util/elements'
let g_controlnet_presets: any;
declare const g_generation_session: any;
let g_controlnet_presets: 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.input_image = presetData.input_image || DefaultControlNetUnitData.input_image
dataitem.enabled =
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.resize_mode = presetData.resize_mode || DefaultControlNetUnitData.resize_mode
dataitem.lowvram = presetData.lowvram || DefaultControlNetUnitData.lowvram
dataitem.processor_res = presetData.processor_res || 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.weight =
presetData.weight || DefaultControlNetUnitData.weight
dataitem.resize_mode =
presetData.resize_mode || DefaultControlNetUnitData.resize_mode
dataitem.lowvram =
presetData.lowvram || DefaultControlNetUnitData.lowvram
dataitem.processor_res =
presetData.processor_res ||
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.pixel_perfect = presetData.pixel_perfect || DefaultControlNetUnitData.pixel_perfect
dataitem.control_mode =
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 => {
if (preset_name == "Select CtrlNet Preset")
return <sp-menu-item key={preset_name} className="mControlNetPresetMenuItem" selected>{preset_name}</sp-menu-item>
const presetMenuChildren = presets_names.map((preset_name) => {
if (preset_name == 'Select CtrlNet Preset')
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"
>Disable ControlNet Tab</sp-checkbox>
<sp-checkbox id="chDisableControlNetTab">
Disable ControlNet Tab
</sp-checkbox>
</div>
<div>
{
Array(this.props.appState.maxControlNet * 2).fill(0).map((v, index) => {
{Array(this.props.appState.maxControlNet * 2)
.fill(0)
.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>
}
else {
return <ControlNetUnit appState={this.props.appState} key={(index - 1) / 2} index={(index - 1) / 2} />
}
})
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>
)
} else {
return (
<ControlNetUnit
appState={this.props.appState}
key={(index - 1) / 2}
index={(index - 1) / 2}
/>
)
}
})}
</div>
</div>
);
)
}
}
export default ControlNetTab;
export default ControlNetTab

471
typescripts/controlnet/ControlNetUnit.tsx
View File

@ -1,107 +1,168 @@
import { observer } from 'mobx-react';
import React from 'react';
import { MoveToCanvasSvg,ActionButtonSVG, SpCheckBox, SpMenu, SpSlider, Thumbnail, PenSvg, PreviewSvg } 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;
import { observer } from 'mobx-react'
import React from 'react'
import {
MoveToCanvasSvg,
ActionButtonSVG,
SpCheckBox,
SpMenu,
SpSlider,
Thumbnail,
PenSvg,
PreviewSvg,
} 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];
storeData.enabled = !storeData.enabled;
const storeData =
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];
storeData.lowvram = !storeData.lowvram;
const storeData =
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];
storeData.guessmode = !storeData.guessmode;
const storeData =
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];
console.log('onPixelPerfectChange', storeData.pixel_perfect);
storeData.pixel_perfect = !storeData.pixel_perfect;
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
console.log('onPixelPerfectChange', storeData.pixel_perfect)
storeData.pixel_perfect = !storeData.pixel_perfect
}
onWeightMove(event: any) {
event.preventDefault()
if (event.target.tagName != 'SP-SLIDER') return;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
storeData.weight = +mapRange(event.target.value, 0, 200, 0, 2, 0.01).toFixed(2);
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
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;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
storeData.guidance_start = +mapRange(event.target.value, 0, 10, 0, 1, 0.1).toFixed(1);
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
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;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
storeData.guidance_end = +mapRange(event.target.value, 0, 10, 0, 1, 0.1).toFixed(1);
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
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 }) {
const storeData = this.props.appState.controlNetUnitData[this.props.index];
onPreprocsesorChange(
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 }) {
const storeData = this.props.appState.controlNetUnitData[this.props.index];
onModelChange(
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;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
let sliderConfig = resolutionConfig.sliders[0];
storeData.processor_res = +(event.target.value * (sliderConfig.step || 1));
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
let resolutionConfig =
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;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
let sliderConfig = resolutionConfig.sliders[1];
storeData.threshold_a = +(event.target.value * (sliderConfig.step || 1));
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
let resolutionConfig =
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;
const storeData = this.props.appState.controlNetUnitData[this.props.index];
let resolutionConfig = this.props.appState.preprocessorDetail[storeData.module] || {};
let sliderConfig = resolutionConfig.sliders[2];
storeData.threshold_b = +(event.target.value * (sliderConfig.step || 1));
if (event.target.tagName != 'SP-SLIDER') return
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
let resolutionConfig =
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];
if (
g_generation_session.control_net_selection_info &&
storeData.mask
) {
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
if (g_generation_session.control_net_selection_info && 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]
g_generation_session.controlNetImage[this.props.index] = preview_result_base64
const 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 _module = storeData.module || 'none';
const storeData =
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
const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
g_generation_session.control_net_preview_selection_info =
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 pd = this.props.appState.preprocessorDetail[storeData.module] || {};
const ppSlider = pd.sliders || [];
const storeData =
this.props.appState.controlNetUnitData[this.props.index]
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"
>Control Net Settings Slot {this.props.index}</sp-label>
<sp-label slot="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 onClick={this.toCanvas.bind(this)} ><MoveToCanvasSvg/></ActionButtonSVG>
<ActionButtonSVG onClick={this.previewAnnotatorFromCanvas.bind(this)} ><PreviewSvg/></ActionButtonSVG>
<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
@ -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 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' }}>
<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 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>
>
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)}
max={ppSlider[0].max / (ppSlider[0].step || 1)}
value={storeData.processor_res / (ppSlider[0].step || 1)}
min={
ppSlider[0].min /
(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">{storeData.processor_res.toFixed(2)}</sp-label>
</SpSlider>}
{ppSlider && ppSlider[1] && <SpSlider
<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)}
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
<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)}
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>}
<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" }}>
<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')}
label_item="Select Module"
selected_index={this.props.appState.supportedPreprocessors.indexOf(
storeData.module || 'none'
)}
style={{ width: '100%', display: 'flex' }}
/>
{!pd.model_free &&
(<SpMenu
{!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
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>
)
}
}

47
typescripts/controlnet/entry.ts
View File

@ -1,16 +1,20 @@
import { Enum, api } from "../util/oldSystem";
import { store, versionCompare } from "./main"
import { Enum, api } from '../util/oldSystem'
import { store, versionCompare } from './main'
declare const g_sd_config_obj: any;
declare let g_sd_url: string;
declare const g_sd_config_obj: any
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
else
return store.controlNetUnitData[index || 0].enabled
return (
store.controlNetUnitData.filter((item) => item.enabled).length > 0
)
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].pixel_perfect = true;
controlnet_units[index].control_mode =
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,
}

11
typescripts/controlnet/main.tsx
View File

@ -1,16 +1,13 @@
import ReactDOM from 'react-dom/client'
import React from 'react';
import ControlNetTab from './ControlNetTab';
import React from 'react'
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 {
store,
versionCompare
}
export { store, versionCompare }

72
typescripts/controlnet/store.ts
View File

@ -1,14 +1,14 @@
import { observable, reaction } from "mobx";
import { observable, reaction } from 'mobx'
export const DefaultControlNetUnitData = {
enabled: false,
input_image: '',
mask: '',
module: "",
model: "",
module: '',
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,
input_image: string,
mask: string,
enabled: boolean
input_image: string
mask: string
module: string,
model: string,
weight: number,
resize_mode: "Just Resize" | "Crop and Resize" | "Resize and Fill",
lowvram: boolean,
processor_res: number,
threshold_a: number,
threshold_b: number,
module: string
model: string
weight: number
resize_mode: 'Just Resize' | 'Crop and Resize' | 'Resize and Fill'
lowvram: boolean
processor_res: number
threshold_a: number
threshold_b: number
guidance_start: number,
guidance_end: number,
guessmode: boolean,
guidance_start: number
guidance_end: number
guessmode: boolean
control_mode: "Balanced" | "My prompt is more important" | "ControlNet is more important",
pixel_perfect: boolean,
control_mode:
| 'Balanced'
| 'My prompt is more important'
| 'ControlNet is more important'
pixel_perfect: boolean
}
interface ControlNetMobxStore {
maxControlNet: number,
controlnetApiVersion: number,
maxControlNet: number
controlnetApiVersion: number
supportedModels: string[],
supportedPreprocessors: string[],
preprocessorDetail: {[key: string]: any},
supportedModels: string[]
supportedPreprocessors: string[]
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 => {
ControlNetStore.controlNetUnitData = Array(maxControlNet).fill(0).map((v, index) => {
return ControlNetStore.controlNetUnitData[index] || DefaultControlNetUnitData;
(maxControlNet) => {
ControlNetStore.controlNetUnitData = Array(maxControlNet)
.fill(0)
.map((v, index) => {
return (
ControlNetStore.controlNetUnitData[index] ||
DefaultControlNetUnitData
)
})
}
)

28
typescripts/controlnet/util.tsx
View File

@ -1,10 +1,18 @@
export function mapRange(x: number, in_min: number, in_max: number, out_min: number, out_max: number, step: number) {
return Math.round(
(
((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
) / step
export function mapRange(
x: number,
in_min: number,
in_max: number,
out_min: number,
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
}

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

6
typescripts/ultimate_sd_upscaler/ultimate_sd_upscaler.tsx
View File

@ -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){
console.warn("ultimate sd upscaler getUpscalers(): ",e)
} catch (e) {
console.warn('ultimate sd upscaler getUpscalers(): ', e)
}
}

135
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/client'
// import { versions } from 'uxp'
export { ReactComponent as MoveToCanvasSvg } from '../../icon/move_to_canvas.svg';
export { ReactComponent as PenSvg } from '../../icon/pen.svg';
export { ReactComponent as PreviewSvg } from '../../icon/preview.svg';
export { ReactComponent as MoveToCanvasSvg } from '../../icon/move_to_canvas.svg'
export { ReactComponent as PenSvg } from '../../icon/pen.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 => {
this.elem?.addEventListener(evkey, newEvent[evkey]);
})
Object.keys(newEvent).forEach((evkey) => {
this.elem?.addEventListener(evkey, newEvent[evkey])
})
}
componentWillUnmount(): void {
Object.keys(this.curEvents).forEach(evkey => {
this.elem?.removeEventListener(evkey, this.curEvents[evkey]);
});
Object.keys(this.curEvents).forEach((evkey) => {
this.elem?.removeEventListener(evkey, this.curEvents[evkey])
})
}
splitProps(props: any): [any, any] {
const attr: any = {};
const event: any = {};
const attr: 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'>
{this.props.children}
</div>
return (
<div className="viewer-image-container">{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>
)
}
}

6
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[]) {
const formattedOutput = format(data, ...optional_param);
const formattedOutput = format(data, ...optional_param)
return formattedOutput
}

4
typescripts/util/oldSystem.tsx
View File

@ -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,
}

4
utility/presets/preset.js
View File

@ -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
}

7
webpack.config.js
View File

@ -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: [