a34e80e8b4b20b9452d240a5dfb1810a082bf12e800fb36d96f61768dfebfe44

Auto-Photoshop-StableDiffusion-Plugin/thumbnail.js

@@ -0,0 +1,40 @@
+class Thumbnail {
+    static wrapImgInContainer(img, container_style_class) {
+        const container = document.createElement('div')
+        container.className = container_style_class
+        container.appendChild(img)
+        return container
+    }
+
+    static addSPButtonToContainer(
+        container,
+        button_id,
+        title,
+        callbackFunction,
+        param1
+    ) {
+        const elem = document.getElementById(button_id)
+        const clone = elem.cloneNode(true)
+        const button = clone
+        button.style.display = null
+        button.removeAttribute('id')
+        button.setAttribute('title', title)
+
+        // Create button element
+        button.className = 'thumbnail-image-button'
+        if (callbackFunction.constructor.name === 'AsyncFunction') {
+            button.addEventListener(
+                'click',
+                async () => await callbackFunction(param1)
+            )
+        } else {
+            button.addEventListener('click', () => callbackFunction(param1))
+        }
+
+        container.appendChild(button)
+    }
+}
+
+module.exports = {
+    Thumbnail,
+}

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/.gitignore

@@ -0,0 +1 @@
+# dist/*.bundle.js

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/src/config.ts

@@ -0,0 +1,134 @@
+export let ui_config = {
+    tile_width: {
+        minimum: 0,
+        maximum: 2048,
+        step: 64,
+        label: 'Tile width',
+        value: 512,
+    },
+    tile_height: {
+        minimum: 0,
+        maximum: 2048,
+        step: 64,
+        label: 'Tile height',
+        value: 0,
+    },
+    mask_blur: {
+        minimum: 0,
+        maximum: 64,
+        step: 1,
+        label: 'Mask blur',
+        value: 8,
+    },
+    padding: { minimum: 0, maximum: 128, step: 1, label: 'Padding', value: 32 },
+
+    seams_fix_denoise: {
+        label: 'Denoise',
+        minimum: 0,
+        maximum: 1,
+        step: 0.01,
+        value: 0.35,
+        visible: false,
+        interactive: true,
+    },
+
+    seams_fix_width: {
+        label: 'Width',
+        minimum: 0,
+        maximum: 128,
+        step: 1,
+        value: 64,
+        visible: false,
+        interactive: true,
+    },
+    seams_fix_mask_blur: {
+        label: 'Mask blur',
+        minimum: 0,
+        maximum: 64,
+        step: 1,
+        value: 4,
+        visible: false,
+        interactive: true,
+    },
+    seams_fix_padding: {
+        label: 'Padding',
+        minimum: 0,
+        maximum: 128,
+        step: 1,
+        value: 16,
+        visible: false,
+        interactive: true,
+    },
+    redraw_mode: {
+        label: 'Type',
+        choices: ['Linear', 'Chess', 'None'],
+        type: 'index',
+        value: 0,
+    },
+    save_upscaled_image: {
+        label: 'Upscaled',
+        value: true,
+    },
+    save_seams_fix_image: {
+        label: 'Seams fix',
+        value: false,
+    },
+
+    seams_fix_type: {
+        label: 'Type',
+        choices: [
+            'None',
+            'Band pass',
+            'Half tile offset pass',
+            'Half tile offset pass + intersections',
+        ],
+        type: 'index',
+        value: 3,
+    },
+
+    target_size_type: {
+        label: 'Target size type',
+        choices: [
+            'From img2img2 settings',
+            'Custom size',
+            'Scale from image size',
+        ],
+        type: 'index',
+        value: 2,
+    },
+
+    custom_width: {
+        label: 'Custom width',
+        minimum: 64,
+        maximum: 8192,
+        step: 64,
+        value: 2048,
+        visible: false,
+        interactive: true,
+    },
+    custom_height: {
+        label: 'Custom height',
+        minimum: 64,
+        maximum: 8192,
+        step: 64,
+        value: 2048,
+        visible: false,
+        interactive: true,
+    },
+    custom_scale: {
+        label: 'Scale',
+        minimum: 1,
+        maximum: 16,
+        step: 0.01,
+        value: 2,
+        visible: false,
+        interactive: true,
+    },
+
+    upscaler_index: {
+        label: 'Upscaler',
+        choices: [],
+        type: 'index',
+        value: 0,
+    },
+}

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/src/elements.tsx

@@ -0,0 +1,255 @@
+import React, { ReactEventHandler, useState } from 'react'
+// import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
+import { versions } from 'uxp'
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sp-picker': any
+            'sp-menu': any
+            'sp-menu-item': any
+            'sp-label': any
+            'sp-checkbox': any
+            'sp-slider': any
+            'sp-radio-group': any
+            'sp-radio': any
+            'sp-divider': any
+            'sp-detail': any
+        }
+    }
+}
+function mapRange(
+    x: number,
+    in_min: number,
+    in_max: number,
+    out_min: number,
+    out_max: number
+) {
+    const mappedValue =
+        ((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+    return mappedValue
+}
+export enum SliderType {
+    Integer = 'integer',
+    Float = 'float',
+}
+export class SpSliderWithLabel extends React.Component<{
+    onSliderChange?: any
+    id?: string
+    'show-value'?: boolean
+    steps?: number
+    in_min?: number
+    in_max?: number
+    out_min: number
+    out_max: number
+    // value?: number
+    title?: string
+    label?: string
+    output_value?: number // can be use to represent sd value
+    // slider_value?: number // it's slider value can be from 1 to 100
+    slider_type?: SliderType
+}> {
+    // const [sliderValue,setSliderValue] = useState<number>(0)
+    state = { output_value: this.props.output_value || 0, slider_value: 0 }
+    steps: number
+    in_min: number
+    in_max: number
+    out_min: number
+    out_max: number
+    slider_type: SliderType
+    constructor(props: any) {
+        super(props)
+        this.steps = this.props.steps || 1
+        // this.out_min = this.props.out_min || this.in_min
+        this.out_min = this.props.out_min
+        this.out_max = this.props.out_max
+
+        // const temp_out_max = this.props.out_max || this.props.in_max || 99
+        this.in_min = this.props.in_min || 0
+        this.in_max = Math.round((this.out_max - this.out_min) / this.steps)
+        this.slider_type = this.props.slider_type || SliderType.Integer
+    }
+
+    componentDidMount(): void {
+        const slider_value = this.outputValueToStep(this.state.output_value)
+        this.setState({ slider_value: slider_value })
+    }
+    stepToOutputValue(slider_step: number) {
+        let to_value = mapRange(
+            slider_step,
+            this.in_min,
+            this.in_max,
+            this.out_min,
+            this.out_max
+        )
+        if (this.slider_type === SliderType.Integer)
+            to_value = Math.round(to_value)
+
+        return to_value
+    }
+    outputValueToStep(output_value: number) {
+        let slider_step = mapRange(
+            output_value,
+            this.out_min,
+            this.out_max,
+            this.in_min,
+            this.in_max
+        )
+        // if (this.slider_type === SliderType.Integer)
+        slider_step = Math.round(slider_step)
+        return slider_step
+    }
+    setSliderValue(newValue: any) {
+        let to_value = mapRange(
+            newValue,
+            this.in_min,
+            this.in_max,
+            this.out_min,
+            this.out_max
+        )
+
+        if (this.slider_type === SliderType.Integer)
+            to_value = Math.round(to_value)
+
+        this.setState({ output_value: to_value })
+    }
+
+    onSliderValueChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
+        const newValue: string = event.target.value
+        console.log('onSliderValueChangeHandler value: ', newValue)
+        this.setState({ output_value: newValue })
+
+        console.log({
+            in_min: this.in_min,
+            in_max: this.in_max,
+            out_min: this.out_min,
+            out_max: this.out_max,
+        })
+
+        let output_value = this.stepToOutputValue(parseInt(newValue))
+        this.setState({ output_value: output_value })
+        if (this.props.onSliderChange && this.props.id) {
+            this.props.onSliderChange(this.props.id, output_value)
+        }
+    }
+
+    handleNum2Change = (event: React.ChangeEvent<HTMLInputElement>) => {}
+
+    render() {
+        return (
+            // <div>
+            //     <
+            //     <sp-detail>VERSIONS</sp-detail>
+            //     <div>{versions.plugin}</div>
+            // </div>
+            <div>
+                <sp-slider
+                    show-value="false"
+                    // id="slControlNetWeight_0"
+                    class="slControlNetWeight_"
+                    min={this.in_min}
+                    max={this.in_max}
+                    value={this.state.slider_value}
+                    title="2 will keep the composition; 0 will allow composition to change"
+                    onInput={this.onSliderValueChangeHandler.bind(this)}
+                >
+                    <sp-label slot="label">{this.props.label}:</sp-label>
+                    <sp-label
+                        slot="label"
+                        // id="lControlNetWeight_0"
+                        class="lControlNetWeight_"
+                    >
+                        {this.state.output_value}
+                    </sp-label>
+                </sp-slider>
+            </div>
+        )
+    }
+}
+
+export class SpMenu extends React.Component<{
+    id?: string
+
+    title?: string
+    style?: string
+    items?: string[]
+    disabled?: boolean[]
+    label_item?: string
+    onChange?: any
+    selected_index?: number
+}> {
+    state = {
+        selectedItem: this.props.items ? this.props.items[0] : undefined,
+    }
+
+    componentDidUpdate(prevProps: any) {
+        // console.log('prevProps.items: ', prevProps.items)
+        // console.log('this.props.items: ', this.props.items)
+        // if (prevProps.items !== this.props.items) {
+        //     const spMenu = this.spMenuRef.current
+        //     if (spMenu) {
+        //         spMenu.innerHTML = ''
+        //     }
+        // }
+    }
+    handleItemClick = (item: string, index: number) => {
+        console.log('clicked item: ', item)
+        console.log('clicked index: ', index)
+        this.setState({ selectedItem: item })
+        if (this.props.onChange && this.props.id) {
+            this.props.onChange(this.props.id, { index: index, item: item })
+        }
+    }
+    handleMakeSelection = (item: string) => {
+        console.log('handleMakeSelection: item ', item)
+        this.setState({ selectedItem: item })
+    }
+
+    render() {
+        return (
+            <div>
+                <sp-picker
+                    title={this.props.title}
+                    size="m"
+                    style={{ width: '199px', marginRight: '5px' }}
+                >
+                    <sp-menu id={this.props.id} slot="options">
+                        {this.props.label_item && (
+                            <sp-menu-item
+                                disabled="disabled"
+                                key={-1}
+                                data-index={-1}
+                                selected
+                            >
+                                {this.props.label_item}
+                            </sp-menu-item>
+                        )}
+                        {this.props.items?.map((item, index: number) => (
+                            <sp-menu-item
+                                key={item}
+                                data-index={index}
+                                selected={
+                                    this.props.selected_index !== undefined &&
+                                    this.props.selected_index !== null &&
+                                    this.props.selected_index === index
+                                        ? 'selected'
+                                        : undefined
+                                }
+                                disabled={
+                                    this.props.disabled?.[index]
+                                        ? 'disabled'
+                                        : undefined
+                                }
+                                onClick={() => {
+                                    this.handleItemClick(item, index)
+                                }}
+                            >
+                                {item}
+                            </sp-menu-item>
+                        ))}
+                    </sp-menu>
+                </sp-picker>
+            </div>
+        )
+    }
+}

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/src/scripts.tsx

@@ -0,0 +1,165 @@
+import React, { ReactEventHandler, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+
+import { action, makeAutoObservable, reaction, toJS } from 'mobx'
+import { Provider, inject, observer } from 'mobx-react'
+
+import { SpMenu } from './elements'
+import * as ultimate_sd_upscale_script from './ultimate_sd_upscaler'
+import { ScriptMode } from './ultimate_sd_upscaler'
+export function toJsFunc(store: any) {
+    return toJS(store)
+}
+
+class ScriptStore {
+    scripts_list
+    disabled: boolean[]
+    selected_script_name
+    is_selected_script_available: boolean
+    selected_store: any
+    is_active: boolean
+    selected_args_name: string[]
+    mode: ScriptMode
+    scripts: any = {
+        None: { store: null, args_names: [], mode: [] },
+        'Ultimate SD upscale': {
+            store: ultimate_sd_upscale_script.ultimate_sd_upscaler_store,
+            args_names: ultimate_sd_upscale_script.script_args_ordered,
+            mode: ultimate_sd_upscale_script.script_mode,
+        },
+    }
+
+    constructor() {
+        this.scripts_list = ['None', ultimate_sd_upscale_script.script_name]
+        this.disabled = [false, true]
+        this.selected_script_name = 'None'
+        this.is_selected_script_available = true
+        this.selected_store = null
+        this.is_active = true
+        this.selected_args_name = []
+        this.mode = ScriptMode.Txt2Img
+        makeAutoObservable(this)
+    }
+    setSelectedScript(name: string) {
+        this.selected_script_name = name
+        this.selected_store = this.scripts[name].store
+        this.selected_args_name = this.scripts[name].args_names
+        this.is_selected_script_available = true
+    }
+    setIsActive(new_value: boolean) {
+        this.is_active = new_value
+    }
+    updateProperty(id: any, value: any) {}
+
+    orderedValues() {
+        const values: any = []
+        if (!this.selected_store) return values
+
+        for (const key of this.selected_args_name) {
+            // console.log(key, this.data[key])
+            values.push((this.selected_store.data as any)[key])
+        }
+        return values
+    }
+    setDisabled(newDisabled: boolean[]) {
+        console.log('this.disabled:', this.disabled)
+        console.log('newDisabled:', newDisabled)
+
+        this.disabled = newDisabled
+    }
+    setMode(newMode: ScriptMode) {
+        this.mode = newMode
+
+        // let index = 0
+        // Object.keys(this.scripts).forEach((key, index) => {
+        //     const script = this.scripts[key]
+        //     this.disabled[index] = script.mode.includes(newMode) ? false : true
+
+        //     // console.log(key, script)
+        // })
+        const names = Object.keys(this.scripts)
+        let index = 0
+        for (let name of names) {
+            const script = this.scripts[name]
+            this.disabled[index] = script.mode.includes(newMode) ? false : true
+            index += 1
+        }
+
+        this.disabled[0] = false // None is always enabled
+        const selected_index = this.scripts_list.indexOf(
+            this.selected_script_name
+        )
+        this.is_selected_script_available = !this.disabled?.[selected_index]
+        this.setDisabled([...this.disabled])
+    }
+}
+
+export const script_store = new ScriptStore()
+@observer
+class ScriptComponent extends React.Component<{}> {
+    render(): React.ReactNode {
+        // const script_message = index !== -1 ? script_store.disabled[index] : undefined;
+        const script_message =
+            script_store.is_selected_script_available ? undefined : (
+                <span style={{ color: '#ff595e' }}>
+                    {'the script is not available in the current Mode'}
+                </span>
+            )
+
+        return (
+            <>
+                <SpMenu
+                    title="Scripts"
+                    items={script_store.scripts_list}
+                    disabled={script_store.disabled}
+                    // style="width: 199px; margin-right: 5px"
+                    label_item="Select A Script"
+                    id={'script_list'}
+                    onChange={(id: any, value: any) => {
+                        script_store.setSelectedScript(value.item)
+                    }}
+                />
+                <div>
+                    {script_message}
+
+                    {/* {script_store.disabled.map((value, index) => (
+                        <li key={index}> {value ? 'true' : 'false'}</li>
+                    ))} */}
+                </div>
+                <sp-checkbox
+                    checked={script_store.is_active ? true : undefined}
+                    onClick={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        script_store.setIsActive(event.target.checked)
+                    }}
+                >
+                    {'Activate'}
+                </sp-checkbox>
+                <>
+                    {script_store.selected_script_name === 'None' && <></>}
+                    {script_store.selected_script_name ===
+                        ultimate_sd_upscale_script.script_name && (
+                        <ultimate_sd_upscale_script.UltimateSDUpscalerForm
+                            store={
+                                // ultimate_sd_upscale_script.ultimate_sd_upscaler_store
+                                script_store.scripts[
+                                    script_store.selected_script_name
+                                ].store
+                            }
+                        />
+                    )}
+                    {/* ... other conditions for other components */}
+                </>
+            </>
+        )
+    }
+}
+const domNode = document.getElementById('scriptsContainer')!
+const root = ReactDOM.createRoot(domNode)
+
+root.render(
+    <React.StrictMode>
+        <ScriptComponent></ScriptComponent>
+
+        {/* <SliderValuesDisplay /> */}
+    </React.StrictMode>
+)

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx

@@ -0,0 +1,292 @@
+import React, { ReactEventHandler } from 'react'
+import ReactDOM from 'react-dom/client'
+
+import { action, makeAutoObservable, reaction, toJS } from 'mobx'
+import { Provider, inject, observer } from 'mobx-react'
+
+import { SliderType, SpMenu, SpSliderWithLabel } from './elements'
+
+import * as sdapi from '../../sdapi_py_re'
+
+import { ui_config } from './config'
+
+export let script_name: string = 'Ultimate SD upscale'
+export enum ScriptMode {
+    Txt2Img = 'txt2img',
+    Img2Img = 'img2img',
+    Inpaint = 'inpaint',
+    Outpaint = 'outpaint',
+}
+
+export let script_mode = [
+    ScriptMode.Img2Img,
+    ScriptMode.Inpaint,
+    ScriptMode.Outpaint,
+]
+interface UltimateSDUpscalerData {
+    _: string
+    tile_width: number
+    tile_height: number
+    mask_blur: number
+    padding: number
+    seams_fix_width: number
+    seams_fix_denoise: number
+    seams_fix_padding: number
+    upscaler_index: number
+    save_upscaled_image: boolean
+    redraw_mode: number
+    save_seams_fix_image: boolean
+    seams_fix_mask_blur: number
+    seams_fix_type: number
+    target_size_type: number
+    custom_width: number
+    custom_height: number
+    custom_scale: number
+}
+export const script_args_ordered = [
+    '_',
+    'tile_width',
+    'tile_height',
+    'mask_blur',
+    'padding',
+    'seams_fix_width',
+    'seams_fix_denoise',
+    'seams_fix_padding',
+    'upscaler_index',
+    'save_upscaled_image',
+    'redraw_mode',
+    'save_seams_fix_image',
+    'seams_fix_mask_blur',
+    'seams_fix_type',
+    'target_size_type',
+    'custom_width',
+    'custom_height',
+    'custom_scale',
+]
+
+class UltimateSDUpscalerStore {
+    data: UltimateSDUpscalerData
+    // test_value: number = 10
+    // test_value_2: number = 2
+    test_value: number
+    test_value_2: number
+    is_active: boolean
+    constructor(data: UltimateSDUpscalerData) {
+        this.data = data
+        this.test_value = 10
+        this.test_value_2 = 2
+        this.is_active = false
+        makeAutoObservable(this)
+
+        // reaction(
+        //     () => [this.test_value],
+        //     () => {
+        //         this.test_value_2 = this.test_value * 2
+        //         console.log('reaction to test_value change:', this.test_value)
+        //         console.log('this.test_value_2:', this.test_value_2)
+        //     }
+        // )
+    }
+    setIsActive(b_value: boolean) {
+        this.is_active = b_value
+    }
+    setTestValue(new_value: number) {
+        this.test_value = new_value
+        console.log('setTestValue: new_value ', new_value)
+        console.log('setTestValue: this.test_value: ', this.test_value)
+    }
+
+    updateProperty(key: keyof UltimateSDUpscalerData, value: any) {
+        ;(this.data as any)[key] = value
+    }
+
+    toJsFunc() {
+        return toJS(this)
+    }
+}
+
+const configValues = Object.entries(ui_config).reduce(
+    (acc, [key, value]) => ({ ...acc, [key]: value.value }),
+    {}
+)
+const default_values: any = {
+    _: '',
+    ...configValues,
+}
+export const ultimate_sd_upscaler_store = new UltimateSDUpscalerStore(
+    default_values
+)
+
+@observer
+export class UltimateSDUpscalerForm extends React.Component<{
+    store: UltimateSDUpscalerStore
+}> {
+    // slider1Ref = React.createRef<SpSliderWithLabel>()
+    // slider2Ref = React.createRef<SpSliderWithLabel>()
+    state = {
+        items: ['Item 1', 'Item 2', 'Item 3'],
+        sd_upscalers: [],
+    }
+    componentDidMount(): void {
+        this.getUpscalers()
+    }
+    handleUpdateItems = () => {
+        this.setState({
+            items: ['New Item 1', 'New Item 2', 'New Item 3'],
+        })
+    }
+    handleSlider1ValueChange = (newValue: any) => {
+        // this.props.store.setTestValue(newValue)
+        this.props.store.test_value = newValue
+
+        // this.props.store.
+        console.log('store.test_value: ', this.props.store.test_value)
+        console.log('newValue: ', newValue)
+    }
+
+    handleSlider2ValueChange = (newValue: any) => {
+        // scriptFormStore.setSlider2Value(newValue)
+    }
+    handleSliderChange = (key: any, newValue: any) => {
+        this.props.store.updateProperty(key, newValue)
+    }
+    handleMenuChange = (key: any, new_index_value_pair: any) => {
+        let config = ui_config[key as keyof typeof ui_config] as any
+        if ('type' in config) {
+            let value =
+                config.type === 'index'
+                    ? new_index_value_pair['index']
+                    : new_index_value_pair['item']
+            this.props.store.updateProperty(key, value)
+        }
+    }
+
+    async getUpscalers() {
+        const sd_upscalers_json = await sdapi.requestGetUpscalers()
+        const sd_upscalers = sd_upscalers_json.map(
+            (upscaler: any) => upscaler.name
+        )
+        this.setState({ sd_upscalers: sd_upscalers })
+        return sd_upscalers
+    }
+
+    render() {
+        const ids = [
+            'tile_width',
+            'tile_height',
+            'mask_blur',
+            'padding',
+        ] as const
+        // let config = ui_config[ids as keyof typeof ui_config] as any
+        const group_1_sliders = ids.map((id) => (
+            <SpSliderWithLabel
+                key={id}
+                id={id}
+                show-value={false}
+                steps={ui_config[id].step}
+                out_min={ui_config[id].minimum}
+                out_max={ui_config[id].maximum}
+                output_value={this.props.store.data[id]}
+                title={ui_config[id].label}
+                label={ui_config[id].label}
+                onSliderChange={this.handleSliderChange}
+            />
+        ))
+        const seamfix_ids = [
+            'seams_fix_denoise',
+            'seams_fix_width',
+            'seams_fix_mask_blur',
+            'seams_fix_padding',
+        ] as const
+        const seamfix_sliders = seamfix_ids.map((id) => (
+            <SpSliderWithLabel
+                key={id}
+                id={id}
+                show-value={false}
+                steps={ui_config[id].step}
+                out_min={ui_config[id].minimum}
+                out_max={ui_config[id].maximum}
+                output_value={this.props.store.data[id]}
+                title={ui_config[id].label}
+                label={ui_config[id].label}
+                onSliderChange={this.handleSliderChange}
+                slider_type={
+                    Number.isInteger(ui_config[id].step)
+                        ? SliderType.Integer
+                        : SliderType.Float
+                }
+            />
+        ))
+        return (
+            <div>
+                <SpMenu
+                    title="Stable Diffusion Upscalers"
+                    items={this.state.sd_upscalers}
+                    label_item="Select Upscaler"
+                    id={'upscaler_index'}
+                    onChange={this.handleMenuChange}
+                    selected_index={this.props.store.data.upscaler_index}
+                />
+                <SpMenu
+                    title={ui_config.target_size_type.label}
+                    id={'target_size_type'}
+                    items={ui_config.target_size_type.choices}
+                    label_item={'Select ' + ui_config.target_size_type.label}
+                    onChange={this.handleMenuChange}
+                    selected_index={this.props.store.data.target_size_type}
+                />
+                <SpSliderWithLabel
+                    label={ui_config.custom_scale.label}
+                    output_value={this.props.store.data.custom_scale}
+                    id={'custom_scale'}
+                    out_min={ui_config.custom_scale.minimum}
+                    out_max={ui_config.custom_scale.maximum}
+                    onSliderChange={this.handleSliderChange}
+                    steps={0.01}
+                    slider_type={SliderType.Float}
+                />
+
+                <sp-checkbox
+                    checked={
+                        this.props.store.data.save_upscaled_image
+                            ? true
+                            : undefined
+                    }
+                    onClick={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        this.props.store.updateProperty(
+                            'save_upscaled_image',
+                            event.target.checked
+                        )
+                    }}
+                >
+                    {ui_config.save_upscaled_image.label}
+                </sp-checkbox>
+                <sp-checkbox
+                    checked={
+                        this.props.store.data.save_seams_fix_image
+                            ? true
+                            : undefined
+                    }
+                    onClick={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        this.props.store.updateProperty(
+                            'save_seams_fix_image',
+                            event.target.checked
+                        )
+                    }}
+                >
+                    {ui_config.save_seams_fix_image.label}
+                </sp-checkbox>
+                {group_1_sliders}
+                <SpMenu
+                    title={'Seams Fix Type'}
+                    id={'seams_fix_type'}
+                    items={ui_config.seams_fix_type.choices}
+                    label_item="Select Seams Fix Type"
+                    onChange={this.handleMenuChange}
+                    selected_index={this.props.store.data.seams_fix_type}
+                />
+                {seamfix_sliders}
+            </div>
+        )
+    }
+}

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/tsconfig.json

@@ -0,0 +1,109 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react",                                /* Specify what JSX code is generated. */
+    "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    "typeRoots": ["./types", "../node_modules/@types"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/types/sdapi_py_re.d.ts

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

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/types/uxp.d.ts

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

Auto-Photoshop-StableDiffusion-Plugin/ultimate_sd_upscaler/webpack.config.js

@@ -0,0 +1,65 @@
+const path = require('path')
+// const CleanWebpackPlugin = require('clean-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+
+module.exports = {
+    entry: {
+        ultimate_sd_upscaler: './src/ultimate_sd_upscaler.tsx',
+        scripts: './src/scripts.tsx',
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].bundle.js',
+        libraryTarget: 'commonjs2',
+    },
+    // mode: 'development',
+    mode: 'production',
+    devtool: 'inline-source-map', // won't work on XD due to lack of eval
+    externals: {
+        uxp: 'commonjs2 uxp',
+        photoshop: 'commonjs2 photoshop',
+        os: 'commonjs2 os',
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.jsx'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/,
+                options: {
+                    configFile: 'tsconfig.json',
+                },
+            },
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                    plugins: [
+                        '@babel/transform-react-jsx',
+                        '@babel/proposal-object-rest-spread',
+                        '@babel/plugin-syntax-class-properties',
+                    ],
+                },
+            },
+            {
+                test: /\.png$/,
+                exclude: /node_modules/,
+                loader: 'file-loader',
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
+    },
+    plugins: [
+        //new CleanWebpackPlugin(),
+        // new CopyPlugin(['plugin'], {
+        //     copyUnmodified: true,
+        // }),
+    ],
+}

Auto-Photoshop-StableDiffusion-Plugin/update_plugin.bat

@@ -0,0 +1 @@
+git pull

Auto-Photoshop-StableDiffusion-Plugin/update_plugin.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+git pull

Auto-Photoshop-StableDiffusion-Plugin/utility/api.js

@@ -0,0 +1,80 @@
+async function requestGet(url) {
+    let json = null
+
+    const full_url = url
+    try {
+        let request = await fetch(full_url)
+        if (request.status === 404) {
+            return null
+        }
+
+        json = await request.json()
+
+        console.log('json: ', json)
+    } catch (e) {
+        console.warn(`issues requesting from ${full_url}`, e)
+    }
+    return json
+}
+async function requestPost(url, payload) {
+    let json = null
+
+    const full_url = url
+    try {
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        if (request.status === 404) {
+            return null
+        }
+
+        json = await request.json()
+
+        console.log('json: ', json)
+    } catch (e) {
+        console.warn(`issues requesting from ${full_url}`, e)
+    }
+    return json
+}
+async function requestFormDataPost(url, payload) {
+    try {
+        var myHeaders = new Headers()
+        myHeaders.append('Cookie', 'PHPSESSID=n70fa2vmvm6tfmktf4jmstmd1i')
+
+        var formdata = new FormData()
+
+        for ([key, value] of Object.entries(payload)) {
+            formdata.append(key, value)
+        }
+        // formdata.append(
+        //     'source',
+        //     'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+        // )
+        // formdata.append('key', '6d207e02198a847aa98d0a2a901485a5')
+
+        var requestOptions = {
+            method: 'POST',
+            headers: myHeaders,
+            body: formdata,
+            redirect: 'follow',
+        }
+
+        const response = await fetch(url, requestOptions)
+        const result_json = response.json()
+        return result_json
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+module.exports = {
+    requestGet,
+    requestPost,
+    requestFormDataPost,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/event.js

@@ -0,0 +1,13 @@
+const updatePresetMenuEvent = new CustomEvent('updatePresetMenuEvent', {
+    detail: {},
+    bubbles: true,
+    cancelable: true,
+    composed: false,
+})
+function triggerEvent(query_selector, event) {
+    document.querySelector(query_selector).dispatchEvent(event)
+}
+module.exports = {
+    updatePresetMenuEvent,
+    triggerEvent,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/general.js

@@ -0,0 +1,160 @@
+const { requestGet } = require('./api')
+
+function newOutputImageName(format = 'png') {
+    const random_id = Math.floor(Math.random() * 100000000000 + 1) // Date.now() doesn't have enough resolution to avoid duplicate
+    const image_name = `output- ${Date.now()}-${random_id}.${format}`
+    console.log('generated image name:', image_name)
+    return image_name
+}
+
+function makeImagePath(format = 'png') {
+    const image_name = newOutputImageName(format)
+    const image_path = `${uniqueDocumentId}/${image_name}`
+    return image_path
+}
+function convertImageNameToPng(image_name) {
+    const image_png_name = image_name.split('.')[0] + '.png'
+    return image_png_name
+}
+function fixNativePath(native_path) {
+    const fixed_native_path = native_path.replaceAll('\\', '/')
+
+    return fixed_native_path
+}
+function base64ToBase64Url(base64_image) {
+    return 'data:image/png;base64,' + base64_image
+}
+function base64UrlToBase64(base64_url) {
+    const base64_image = base64_url.replace('data:image/png;base64,', '')
+    return base64_image
+}
+const timer = (ms) => new Promise((res) => setTimeout(res, ms)) //Todo: move this line to it's own utilit function
+
+function scaleToClosestKeepRatio(
+    original_width,
+    original_height,
+    min_width,
+    min_height
+) {
+    const { finalWidthHeight } = require('../selection')
+    //better naming than finalWidthHeight()
+    //scale an image to the closest dimension while keeping the ratio intact
+    const [final_width, final_height] = finalWidthHeight(
+        original_width,
+        original_height,
+        min_width,
+        min_height
+    )
+    return [final_width, final_height]
+}
+
+function mapRange(x, in_min, in_max, out_min, out_max) {
+    return ((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+}
+function scaleToRatio(
+    new_value_1,
+    old_value_1,
+    new_value_2, //get ignored
+    old_value_2,
+    max_value,
+    min_value
+) {
+    const ratio = new_value_1 / old_value_1 // 1000/500 = 2
+    let final_new_value_2 = old_value_2 * ratio // 500 * 2 = 1000
+    let final_new_value_1 = new_value_1
+    if (final_new_value_2 > max_value) {
+        ;[_, final_new_value_1] = scaleToRatio(
+            max_value,
+            old_value_2,
+            new_value_1, //get ignored
+            old_value_1,
+            max_value,
+            min_value
+        )
+        final_new_value_2 = max_value
+    } else if (final_new_value_2 < min_value) {
+        ;[_, final_new_value_1] = scaleToRatio(
+            min_value,
+            old_value_2,
+            new_value_1, //get ignored
+            old_value_1,
+            max_value,
+            min_value
+        )
+        final_new_value_2 = min_value
+    }
+
+    return [final_new_value_1, final_new_value_2]
+}
+
+function compareVersions(version_1, version_2) {
+    //remove the first character v
+    version_1 = version_1.slice(1)
+    const increments_1 = version_1.split('.').map((sn) => parseInt(sn))
+
+    version_2 = version_2.slice(1)
+    const increments_2 = version_2.split('.').map((sn) => parseInt(sn))
+
+    let b_older = false // true if version_1 is < than version_2, false if version_1 >= older
+    for (let i = 0; i < increments_1.length; ++i) {
+        if (increments_1[i] < increments_2[i]) {
+            b_older = true
+            break
+        }
+    }
+    return b_older
+}
+async function requestOnlineData() {
+    const { requestGet } = require('./api')
+    const online_data = await requestGet(g_online_data_url)
+    return online_data
+}
+function nearestMultiple(input, multiple) {
+    //use the following formula for finding the upper value instead of the lower.
+    //( ( x - 1 ) | ( m - 1 ) ) + 1
+    const nearest_multiple = input - (input % multiple)
+    return nearest_multiple
+}
+
+function sudoTimer(progress_text = 'Loading ControlNet...') {
+    //sudo timer that will count to 100 and update the progress bar.
+    //use it for controlNet since block api progress call
+    let current_time = 0
+    let max_time = 100
+    var timerId = setInterval(countdown, 1000)
+
+    function countdown() {
+        if (current_time > max_time) {
+            clearTimeout(timerId)
+            // doSomething()
+            // html_manip.updateProgressBarsHtml(0)
+        } else {
+            html_manip.updateProgressBarsHtml(current_time, progress_text)
+            console.log(current_time + ' seconds remaining')
+            current_time++
+        }
+    }
+    return timerId
+}
+function countNewLines(string) {
+    const count = (string.match(/\n/g) || []).length
+    // console.log(count)
+    return count
+}
+module.exports = {
+    newOutputImageName,
+    makeImagePath,
+    convertImageNameToPng,
+    fixNativePath,
+    base64ToBase64Url,
+    base64UrlToBase64,
+    timer,
+    scaleToClosestKeepRatio,
+    scaleToRatio,
+    mapRange,
+    compareVersions,
+    requestOnlineData,
+    nearestMultiple,
+    sudoTimer,
+    countNewLines,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/html_manip.js

@@ -0,0 +1,1177 @@
+////// Start Prompt//////////
+
+function getPrompt() {
+    const prompt = document.getElementById('taPrompt').value
+    return prompt
+}
+
+function autoFillInPrompt(prompt_value) {
+    document.getElementById('taPrompt').value = prompt_value
+}
+
+////// End Prompt//////////
+
+////// Start Negative Prompt//////////
+
+function getNegativePrompt() {
+    const negative_prompt = document.getElementById('taNegativePrompt').value
+    return negative_prompt
+}
+
+function autoFillInNegativePrompt(negative_prompt_value) {
+    document.getElementById('taNegativePrompt').value = negative_prompt_value
+}
+
+////// End Negative Prompt//////////
+
+////// Start Width//////////
+
+document.getElementById('slWidth').addEventListener('input', (evt) => {
+    const width = evt.target.value * 64
+
+    document.getElementById('lWidth').textContent = parseInt(width)
+    // widthSliderOnChangeEventHandler(evt)
+    updateResDifferenceLabel()
+})
+
+document.getElementById('slHeight').addEventListener('input', (evt) => {
+    const height = evt.target.value * 64
+
+    document.getElementById('lHeight').textContent = parseInt(height)
+    // heightSliderOnChangeEventHandler(evt)
+    updateResDifferenceLabel()
+})
+
+function widthSliderOnChangeEventHandler(evt) {
+    let new_width = evt.target.value * 64
+    const b_link = getLinkWidthHeightState()
+    let final_width = new_width
+    let final_height
+    if (b_link) {
+        const current_height = html_manip.getHeight()
+        ;[final_width, final_height] = general.scaleToRatio(
+            new_width,
+            g_old_slider_width,
+            _,
+            current_height,
+            parseInt(evt.target.max * 64),
+            parseInt(evt.target.min * 64)
+        )
+
+        evt.target.value = parseInt(final_width / 64)
+        html_manip.autoFillInHeight(final_height)
+    }
+
+    g_old_slider_width = final_width // update the old value, so we can use it later
+    document.getElementById('lWidth').textContent = parseInt(final_width)
+}
+document.getElementById('slWidth').addEventListener('change', (evt) => {
+    widthSliderOnChangeEventHandler(evt)
+})
+// document.getElementById('slWidth').addEventListener('change', (evt) => {
+//     let new_width = evt.target.value * 64
+//     const b_link = getLinkWidthHeightState()
+//     let final_width = new_width
+//     let final_height
+//     if (b_link) {
+//         const current_height = html_manip.getHeight()
+//         ;[final_width, final_height] = general.scaleToRatio(
+//             new_width,
+//             g_old_slider_width,
+//             _,
+//             current_height,
+//             parseInt(evt.target.max * 64),
+//             parseInt(evt.target.min * 64)
+//         )
+
+//         evt.target.value = parseInt(final_width / 64)
+//         html_manip.autoFillInHeight(final_height)
+//     }
+
+//     g_old_slider_width = final_width // update the old value, so we can use it later
+//     document.getElementById('lWidth').textContent = parseInt(final_width)
+// })
+
+function heightSliderOnChangeEventHandler(evt) {
+    let new_height = evt.target.value * 64
+
+    let final_width
+    let final_height = new_height
+    const b_link = getLinkWidthHeightState()
+    if (b_link) {
+        const current_width = html_manip.getWidth()
+        ;[final_height, final_width] = general.scaleToRatio(
+            new_height,
+            g_old_slider_height,
+            _,
+            current_width,
+            parseInt(evt.target.max * 64),
+            parseInt(evt.target.min * 64)
+        )
+
+        evt.target.value = parseInt(final_height / 64)
+        html_manip.autoFillInWidth(final_width)
+    }
+    g_old_slider_height = final_height // update the old value, so we can use it later
+    document.getElementById('lHeight').textContent = parseInt(final_height)
+}
+document.getElementById('slHeight').addEventListener('change', (evt) => {
+    heightSliderOnChangeEventHandler(evt)
+})
+
+function getWidth() {
+    slider_width = document.getElementById('slWidth').value
+    const width = slider_width * 64
+    return width
+}
+
+function getHrWidth() {
+    slider_width = document.getElementById('hrWidth').value
+    const width = slider_width * 64
+    return width
+}
+
+function getHrHeight() {
+    slider_width = document.getElementById('hrHeight').value
+    const width = slider_width * 64
+    return width
+}
+function autoFillInWidth(width_value) {
+    const width_slider = document.getElementById('slHeight')
+
+    // g_old_slider_width = width_slider.value * 64 //store the old value
+    g_old_slider_width = width_value
+
+    document.getElementById('slWidth').value = `${width_value / 64}`
+    //update the label
+    document.getElementById('lWidth').innerHTML = `${parseInt(width_value)}`
+    updateResDifferenceLabel()
+}
+////// End Width//////////
+
+////// Start Height//////////
+
+function getHeight() {
+    slider_value = document.getElementById('slHeight').value
+    const height = slider_value * 64
+    return height
+}
+
+function autoFillInHeight(height_value) {
+    const height_slider = document.getElementById('slHeight')
+    // g_old_slider_height = height_slider.value * 64
+    g_old_slider_height = height_value //store the current value as old value. counterintuitive!. only use old value when the user directly manipulate the slider
+
+    height_slider.value = `${height_value / 64}`
+    //update the label
+    document.getElementById('lHeight').innerHTML = `${parseInt(height_value)}`
+    updateResDifferenceLabel()
+}
+
+function autoFillInHRHeight(height_value) {
+    document.getElementById('hrHeight').value = `${height_value / 64}`
+    //update the label
+    document.getElementById('hHeight').innerHTML = `${height_value}`
+}
+
+function autoFillInHRWidth(height_value) {
+    document.getElementById('hrWidth').value = `${height_value / 64}`
+    //update the label
+    document.getElementById('hWidth').innerHTML = `${height_value}`
+}
+
+////// End Height//////////
+
+////// Start Denoising Strength//////////
+document
+    .querySelector('#slDenoisingStrength')
+    .addEventListener('input', (evt) => {
+        const label_value = evt.target.value / 100
+        // console.log("label_value: ", label_value)
+        document.getElementById(
+            'lDenoisingStrength'
+        ).innerHTML = `${label_value}`
+    })
+
+//get the value that is relevant to stable diffusion
+function getDenoisingStrength() {
+    const slider_value = document.getElementById('slDenoisingStrength').value
+    const denoising_strength_value = slider_value / 100.0
+    return denoising_strength_value
+}
+
+// display the value the user need to see in all elements related to denoising strength attribute
+function autoFillInDenoisingStrength(denoising_strength_value) {
+    //sd denoising strength value range from [0,1] slider range from [0, 100]
+    //update the slider
+    document.getElementById('slDenoisingStrength').value = `${
+        denoising_strength_value * 100
+    }`
+    //update the label
+    document.getElementById(
+        'lDenoisingStrength'
+    ).innerHTML = `${denoising_strength_value}`
+}
+
+////// End Denoising Strength//////////
+
+////// Start Hi Res Fix//////////
+
+document.getElementById('chInpaintFullRes').addEventListener('click', (ev) => {
+    const inpaint_padding_slider = document.getElementById('slInpaintPadding')
+
+    if (ev.target.checked) {
+        inpaint_padding_slider.style.display = 'block'
+    } else {
+        inpaint_padding_slider.style.display = 'none'
+    }
+})
+document.getElementById('chHiResFixs').addEventListener('click', (ev) => {
+    const container = document.getElementById('hi-res-sliders-container')
+
+    if (ev.target.checked) {
+        container.style.display = 'flex'
+    } else {
+        container.style.display = 'none'
+    }
+})
+//get the value that is relevant to stable diffusion
+function getHiResFixs() {
+    const isChecked = document.getElementById('chHiResFixs').checked
+    return isChecked
+}
+
+function setHiResFixs(isChecked) {
+    document.getElementById('chHiResFixs').checked = isChecked
+}
+
+function sliderAddEventListener(
+    slider_id,
+    label_id,
+    multiplier,
+    fractionDigits = 2
+) {
+    document.getElementById(slider_id).addEventListener('input', (evt) => {
+        const sd_value = evt.target.value * multiplier // convert slider value to SD ready value
+        document.getElementById(label_id).textContent =
+            Number(sd_value).toFixed(fractionDigits)
+    })
+}
+function sliderAddEventListener_new(
+    slider_id,
+    label_id,
+    slider_start,
+    slider_end,
+    sd_start,
+    sd_end
+) {
+    document.getElementById(slider_id).addEventListener('input', (evt) => {
+        const sd_value = general.mapRange(
+            evt.target.value,
+            slider_start,
+            slider_end,
+            sd_start,
+            sd_end
+        ) // convert slider value to SD ready value
+
+        document.getElementById(label_id).textContent =
+            Number(sd_value).toFixed(2)
+    })
+}
+
+//get the stable diffusion ready value from the slider with  "slider_id"
+//REFACTOR: delete, getSliderSdValue_Old is deprecated, instead use getSliderSdValue
+function getSliderSdValue_Old(slider_id, multiplier) {
+    // console.warn(
+    //     'getSliderSdValue_Old is deprecated, instead use getSliderSdValue'
+    // )
+    const slider_value = document.getElementById(slider_id).value
+    const sd_value = slider_value * multiplier
+    return sd_value
+}
+//REFACTOR: delete, autoFillInSliderUi is deprecated, instead use setSliderSdValue
+function autoFillInSliderUi(sd_value, slider_id, label_id, multiplier) {
+    // console.warn(
+    //     'autoFillInSliderUi is deprecated, instead use setSliderSdValue'
+    // )
+    //update the slider
+    document.getElementById(slider_id).value = `${sd_value * multiplier}`
+    //update the label
+    document.getElementById(label_id).innerHTML = `${sd_value}`
+}
+
+function getSliderSdValue(
+    slider_id,
+    slider_start,
+    slider_end,
+    sd_start,
+    sd_end
+) {
+    const slider_value = document.getElementById(slider_id).value
+    // const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
+    const sd_value = general.mapRange(
+        slider_value,
+        slider_start,
+        slider_end,
+        sd_start,
+        sd_end
+    ) // convert slider value to SD ready value
+
+    return sd_value
+}
+function setSliderSdValue(
+    slider_id,
+    label_id,
+    sd_value,
+    slider_start,
+    slider_end,
+    sd_start,
+    sd_end
+) {
+    const slider_value = general.mapRange(
+        sd_value,
+        sd_start,
+        sd_end,
+        slider_start,
+        slider_end
+    ) // convert slider value to SD ready value
+    document.getElementById(slider_id).value = slider_value.toString()
+    document.getElementById(label_id).innerHTML = sd_value.toString()
+}
+function getSliderSdValueByElement(
+    slider_element,
+    slider_start,
+    slider_end,
+    sd_start,
+    sd_end
+) {
+    const slider_value = slider_element.value
+    // const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
+    const sd_value = general.mapRange(
+        slider_value,
+        slider_start,
+        slider_end,
+        sd_start,
+        sd_end
+    ) // convert slider value to SD ready value
+
+    return sd_value
+}
+function setSliderSdValueByElements(
+    slider_element,
+    label_element,
+    sd_value,
+    slider_start,
+    slider_end,
+    sd_start,
+    sd_end
+) {
+    const slider_value = general.mapRange(
+        sd_value,
+        sd_start,
+        sd_end,
+        slider_start,
+        slider_end
+    ) // convert slider value to SD ready value
+    slider_element.value = slider_value.toString()
+    label_element.innerHTML = sd_value.toString()
+}
+
+//hrWidth is from [1 to 32] * 64 => [64 to 2048]
+sliderAddEventListener('hrWidth', 'hWidth', 64)
+sliderAddEventListener('hrHeight', 'hHeight', 64)
+
+//convert hrDenoisingStrength  from  [1, 100] * 0.01 => [0.01 to 1]
+sliderAddEventListener('hrDenoisingStrength', 'hDenoisingStrength', 0.01)
+
+function autoFillInHiResFixs(firstphase_width, firstphase_height) {
+    //update the firstphase width slider and label
+    autoFillInSliderUi(firstphase_width, 'hrWidth', 'hWidth', 1.0 / 64)
+    //update the firstphase height slider and label
+    autoFillInSliderUi(firstphase_height, 'hrHeight', 'hHeight', 1.0 / 64)
+}
+////// End Hi Res Fix//////////
+
+////// Start Inpaint Mask Weight//////////
+function autoFillInInpaintMaskWeight(sd_value) {
+    //update the inpaint mask weight
+    autoFillInSliderUi(
+        sd_value,
+        'slInpaintingMaskWeight',
+        'lInpaintingMaskWeight',
+        100
+    )
+}
+////// End Inpaint Mask Weight//////////
+
+////// Start Samplers//////////
+function unCheckAllSamplers() {
+    document
+        .getElementsByClassName('rbSampler')
+
+        .forEach((e) => e.removeAttribute('checked'))
+}
+
+function getSelectedRadioButtonElement(rbClass) {
+    try {
+        const rb_element = [...document.getElementsByClassName(rbClass)].filter(
+            (e) => e.checked == true
+        )[0]
+        return rb_element
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function getSamplerElementByName(sampler_name) {
+    try {
+        //assume the sampler_name is valid
+        //return the first
+        //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
+        const sampler_element = [
+            ...document.getElementsByClassName('rbSampler'),
+        ].filter((e) => e.value == sampler_name)[0]
+        return sampler_element
+    } catch (e) {
+        console.warn(`Sampler '${sampler_name}' not found ${e}`)
+    }
+}
+
+function getCheckedSamplerName() {
+    //we assume that the samplers exist and loaded in html
+    //return the name of the first checked sampler
+    try {
+        return [...document.getElementsByClassName('rbSampler')].filter(
+            (elm) => elm.checked == true
+        )[0].value
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function getMode() {
+    return [...document.getElementsByClassName('rbMode')].filter(
+        (e) => e.checked == true
+    )[0].value
+}
+
+function getBackendType() {
+    return [...document.getElementsByClassName('rbBackendType')].filter(
+        (e) => e.checked == true
+    )[0].value
+}
+
+function getHordeApiKey() {
+    let key = document.getElementById('tiHordeApiKey').value
+    const valid_key = key ? key : '0000000000'
+    return valid_key
+}
+
+function setHordeApiKey(key) {
+    document.getElementById('tiHordeApiKey').value = key
+}
+function checkSampler(sampler_name) {
+    sampler_element = getSamplerElementByName(sampler_name)
+    sampler_element.checked = true
+}
+function autoFillInSampler(sampler_name) {
+    // unCheckAllSamplers()
+    checkSampler(sampler_name)
+}
+////// End Samplers//////////
+
+////// Start Models//////////
+
+function getModelElementByHash(model_hash) {
+    try {
+        //assume the model_hash is valid
+        //return the first model menu item element with model_hash
+        const model_element = [
+            ...document.getElementsByClassName('mModelMenuItem'),
+        ].filter((e) => e.dataset.model_hash == model_hash)[0]
+        return model_element
+    } catch (e) {
+        console.warn(`Model '${model_hash}' not found ${e}`)
+    }
+}
+function getModelHashByTitle(model_title) {
+    //return find the model hash by it's title
+    try {
+        return [...document.getElementsByClassName('mModelMenuItem')].filter(
+            (e) => e.dataset.model_title == model_title
+        )[0].dataset.model_hash
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function getSelectedModelHash() {
+    //return the hash of the first selected model menu item
+    try {
+        return [...document.getElementsByClassName('mModelMenuItem')].filter(
+            (e) => e.selected == true
+        )[0].dataset.model_hash
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function selectModelUi(model_hash) {
+    model_element = getModelElementByHash(model_hash)
+    model_element.selected = true
+}
+
+function autoFillInModel(model_hash) {
+    try {
+        // unCheckAllSamplers()
+        model_element = getModelElementByHash(model_hash)
+        selectModelUi(model_hash)
+        // model_element.
+        const model_title = model_element.dataset.model_title
+        return model_title
+    } catch (e) {
+        console.warn(e)
+    }
+}
+////// End Models//////////
+
+////// Start Init Image && Init Image Mask//////////
+
+function getInitImageElement() {
+    const ini_image_element = document.getElementById('init_image')
+    return ini_image_element
+}
+function setInitImageSrc(image_src) {
+    const ini_image_element = getInitImageElement()
+    ini_image_element.src = image_src
+}
+function setControlImageSrc(image_src, element_index = 0) {
+    const control_net_image_element = document.querySelector(
+        `#controlnet_settings_${element_index} .control_net_image_`
+    )
+    // const control_net_image_element = document.getElementById(
+    //     'control_net_image' + '_' + element_index
+    // )
+    control_net_image_element.src = image_src
+}
+function setControlMaskSrc(image_src, element_index = 0) {
+    const control_net_image_element = document.querySelector(
+        `#controlnet_settings_${element_index} .control_net_mask_`
+    )
+    // const control_net_image_element = document.getElementById(
+    //     'control_net_mask' + '_' + element_index
+    // )
+    control_net_image_element.src = image_src
+}
+
+function setProgressImageSrc(image_src) {
+    // const progress_image_element = document.getElementById('progressImage')
+
+    const progress_image_element = document.getElementById(
+        'divProgressImageViewerContainer'
+    )
+    // progress_image_element.src = image_src
+
+    progress_image_element.style.backgroundSize = 'contain'
+    progress_image_element.style.height = '500px'
+
+    progress_image_element.style.backgroundImage = `url('${image_src}')`
+}
+
+function getInitImageMaskElement() {
+    const ini_image_mask_element = document.getElementById('init_image_mask')
+    return ini_image_mask_element
+}
+function setInitImageMaskSrc(image_src) {
+    const ini_image_mask_element = getInitImageMaskElement()
+    ini_image_mask_element.src = image_src
+}
+////// End Init Image && Init Image Mask//////////
+
+////// Start Generate Buttons //////////
+
+function getGenerateButtonsElements() {
+    generate_buttons = [...document.getElementsByClassName('btnGenerateClass')]
+    return generate_buttons
+}
+function setGenerateButtonsColor(addClassName, removeClassName) {
+    const buttons = getGenerateButtonsElements()
+    buttons.forEach((button) => {
+        button.classList.add(addClassName)
+        button.classList.remove(removeClassName)
+    })
+}
+
+////// End Generate Buttons //////////
+
+////// Start Servers Status //////////
+
+function setAutomaticStatus(newStatusClass, oldStatusClass) {
+    document.getElementById('automaticStatus').classList.add(newStatusClass)
+    document.getElementById('automaticStatus').classList.remove(oldStatusClass)
+}
+function setProxyServerStatus(newStatusClass, oldStatusClass) {
+    document.getElementById('proxyServerStatus').classList.add(newStatusClass)
+    document
+        .getElementById('proxyServerStatus')
+        .classList.remove(oldStatusClass)
+}
+////// End Servers Status //////////
+
+////// Start Extras //////////
+
+sliderAddEventListener('slUpscaleSize', 'lUpscaleSize', 0.1, 1)
+
+function getUpscaleSize() {
+    slider_width = document.getElementById('slUpscaleSize').value
+    const size = slider_width / 10
+    return size
+}
+
+sliderAddEventListener('slUpscaler2Visibility', 'lUpscaler2Visibility', 0.1, 1)
+
+function getUpscaler2Visibility() {
+    slider_width = document.getElementById('slUpscaler2Visibility').value
+    const size = slider_width / 10
+    return size
+}
+
+sliderAddEventListener('slGFPGANVisibility', 'lGFPGANVisibility', 0.1, 1)
+
+function getGFPGANVisibility() {
+    slider_width = document.getElementById('slGFPGANVisibility').value
+    const size = slider_width / 10
+    return size
+}
+
+sliderAddEventListener(
+    'slCodeFormerVisibility',
+    'lCodeFormerVisibility',
+    0.1,
+    1
+)
+
+function getCodeFormerVisibility() {
+    slider_width = document.getElementById('slCodeFormerVisibility').value
+    const size = slider_width / 10
+    return size
+}
+
+sliderAddEventListener('slCodeFormerWeight', 'lCodeFormerWeight', 0.1, 1)
+
+function getCodeFormerWeight() {
+    slider_width = document.getElementById('slCodeFormerWeight').value
+    const size = slider_width / 10
+    return size
+}
+
+////// End Extras //////////
+
+////// Start Reset Settings Button //////////
+
+const defaultSettings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: '',
+    negative_prompt: '',
+    selection_mode: null,
+    batch_number: 1,
+    steps: 20,
+    width: 512,
+    height: 512,
+    firstphase_width: 512,
+    firstphase_height: 512,
+    cfg: 7,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: 0.7,
+    mask_blur: 8,
+    inpaint_at_full_res: false,
+    hi_res_fix: false,
+    inpaint_padding: 0,
+    seed: -1,
+    samplers: null,
+    mask_content: null,
+}
+
+const snapshot_btns = Array.from(
+    document.getElementsByClassName('snapshotButton')
+)
+snapshot_btns.forEach((element) =>
+    element.addEventListener('click', async () => {
+        try {
+            await psapi.snapshot_layerExe()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+)
+
+const reset_btns = Array.from(document.getElementsByClassName('resetButton'))
+reset_btns.forEach((element) =>
+    element.addEventListener('click', async () => {
+        try {
+            autoFillDefaultSettings(defaultSettings)
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+)
+
+function getBatchNumber() {
+    // return document.getElementById('tiNumberOfImages').value
+    return document.getElementById('tiNumberOfBatchSize').value
+}
+function autoFillInBatchNumber(batch_number) {
+    // document.getElementById('tiNumberOfImages').value = String(batch_number)
+    document.getElementById('tiNumberOfBatchSize').value = String(batch_number)
+}
+
+function getSteps() {
+    return document.getElementById('tiNumberOfSteps').value
+}
+function autoFillInSteps(steps) {
+    document.getElementById('tiNumberOfSteps').value = String(steps)
+}
+function autoFillDefaultSettings(default_settings) {
+    autoFillSettings(default_settings)
+}
+
+function setCFG(cfg_value) {
+    document.getElementById('slCfgScale').value = cfg_value
+}
+function getCFG() {
+    return document.getElementById('slCfgScale').value
+}
+
+function autoFillSettings(settings) {
+    try {
+        //reset all UI settings except model selection and sampler selection
+        autoFillInPrompt(settings['positive_prompt'])
+        autoFillInNegativePrompt(settings['negative_prompt'])
+        autoFillInBatchNumber(settings['batch_number'])
+        autoFillInSteps(settings['steps'])
+        autoFillInWidth(settings['width'])
+        autoFillInHeight(settings['height'])
+        autoFillInHiResFixs(
+            settings['firstphase_width'],
+            settings['firstphase_height']
+        )
+        document.getElementById('slCfgScale').value = settings['cfg']
+        autoFillInDenoisingStrength(settings['denoising_strength'])
+        autoFillInSliderUi(
+            settings['hi_res_denoising_strength'],
+            'hrDenoisingStrength',
+            'hDenoisingStrength',
+            100
+        )
+        document.getElementById('slMaskBlur').value = settings['mask_blur']
+        document.getElementById('chInpaintFullRes').checked =
+            settings['inpaint_at_full_res']
+        setHiResFixs(settings['hi_res_fix'])
+        document.getElementById('tiSeed').value = String(settings['seed'])
+    } catch (e) {
+        console.warn(e)
+    }
+}
+////// End Reset Settings Button //////////
+
+function getMaskBlur() {
+    const isDisabled = document
+        .getElementById('slMaskBlur')
+        .hasAttribute('disabled')
+    let mask_blur = 0
+    if (isDisabled) {
+        mask_blur = 0
+    } else {
+        mask_blur = document.getElementById('slMaskBlur').value
+    }
+    return mask_blur
+}
+function setMaskBlur(mask_blur) {
+    document.getElementById('slMaskBlur').value = mask_blur
+}
+
+function getPromptShortcut() {
+    //read json string
+    //converted into json object
+    const prompt_shortcut_string =
+        document.getElementById('taPromptShortcut').value
+    const prompt_shortcut = JSON.parse(prompt_shortcut_string)
+    return prompt_shortcut
+}
+function setPromptShortcut(prompt_shortcut) {
+    //prompt_shortcut is json object
+    //convert it into pretty json string and save it in the prompt shortcut textarea
+    var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 7)
+    document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
+}
+
+////start selection mode/////
+function getSelectionMode() {
+    return [...document.getElementsByClassName('rbSelectionMode')].filter(
+        (e) => e.checked == true
+    )[0].value
+}
+function getMaskContent() {
+    return [...document.getElementsByClassName('rbMaskContent')].filter(
+        (e) => e.checked == true
+    )[0].value
+}
+function setMaskContent(value) {
+    try {
+        //assume the sampler_name is valid
+        //return the first
+        //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
+        const mask_content_element = [
+            ...document.getElementsByClassName('rbMaskContent'),
+        ].filter((e) => e.value == value)[0]
+        mask_content_element.checked = true
+        return mask_content_element
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function addHistoryButtonsHtml(img_html) {
+    // Create new container element
+    const container = document.createElement('div')
+
+    container.className = 'viewer-image-container'
+
+    const elem = document.getElementById('svg_sp_btn')
+    // Create a copy of it
+    const clone = elem.cloneNode(true)
+    const button = clone
+    button.style.display = null
+    button.removeAttribute('id')
+
+    button.setAttribute('title', 'place the image on the canvas')
+
+    // Create button element
+    // const button = document.createElement('sp-button');
+    button.className = 'viewer-image-button'
+    // button.innerHTML = "Button";
+
+    button.addEventListener('click', async () => {
+        //set init image event listener, use when settion is active
+        let image_path = img_html.dataset.path
+        const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
+
+        // load the image from "data:image/png;base64," base64_str
+        const base64_image = img_html.src.replace('data:image/png;base64,', '')
+        await base64ToFile(base64_image)
+    })
+
+    // Append elements to container
+    container.appendChild(img_html)
+    container.appendChild(button)
+
+    return container
+}
+function getSeed() {
+    const seed = document.getElementById('tiSeed').value
+    return seed
+}
+function setSeed(new_seed) {
+    document.getElementById('tiSeed').value = new_seed
+}
+
+function getMaskExpansion() {
+    const mask_expansion = document.getElementById('slMaskExpansion').value
+    return mask_expansion
+}
+
+function setMaskExpansion(mask_expansion) {
+    document.getElementById('slMaskExpansion').value = mask_expansion
+}
+
+function updateProgressBarsHtml(new_value, progress_text = 'Progress...') {
+    document.querySelectorAll('.pProgressBars').forEach((bar_elm) => {
+        // id = el.getAttribute("id")
+        // console.log("progressbar id:", id)
+        try {
+            bar_elm.setAttribute('value', new_value)
+            document
+                .querySelectorAll('.lProgressLabel')
+                .forEach((lable_elm) => {
+                    lable_elm.innerHTML = progress_text
+                    // else el.innerHTML = 'No work in progress'
+                })
+        } catch (e) {
+            console.warn(e) //value is not valid
+        }
+    })
+
+    // document.querySelector('#pProgressBar').value
+}
+///end selection mode////
+function getLinkWidthHeightState() {
+    const state_str = document.getElementById('linkWidthHeight').dataset.b_link // sometime it's true and other time it's "true"
+    const b_state = state_str.toString() === 'true' ? true : false
+    return b_state
+}
+function setLinkWidthHeightState(state) {
+    document.getElementById('linkWidthHeight').dataset.b_link = state
+}
+function isSquareThumbnail() {
+    return document.getElementById('chSquareThumbnail').checked
+}
+
+async function populateMenu(
+    html_menu_id,
+    menu_item_class,
+    items,
+    createMenuItemHtml,
+    b_keep_old_selection = false,
+    label = ''
+) {
+    // function createMenuItemHtml(item, item_html_element) {
+    //     // menu_item_element.innerHTML = item.title
+    //     // menu_item_element.dataset.model_hash = model.hash
+    //     // menu_item_element.dataset.model_title = model.title
+    // }
+
+    try {
+        const html_menu_element = document.getElementById(html_menu_id)
+        html_menu_element.innerHTML = '' // empty the menu
+        if (label) {
+            const label_item = document.createElement('sp-menu-item')
+            label_item.selected = true
+            label_item.disabled = true
+            label_item.innerText = label
+            html_menu_element.appendChild(label_item)
+        }
+        for (let item of items) {
+            const menu_item_element = document.createElement('sp-menu-item')
+            menu_item_element.className = menu_item_class
+            createMenuItemHtml(item, menu_item_element)
+            html_menu_element.appendChild(menu_item_element)
+        }
+    } catch (e) {
+        b_result = false
+        console.warn(e)
+    }
+    return b_result
+}
+async function populateMenuByElement(
+    html_menu_element,
+    menu_item_class,
+    items,
+    createMenuItemHtml,
+    b_keep_old_selection = false,
+    label = ''
+) {
+    // function createMenuItemHtml(item, item_html_element) {
+    //     // menu_item_element.innerHTML = item.title
+    //     // menu_item_element.dataset.model_hash = model.hash
+    //     // menu_item_element.dataset.model_title = model.title
+    // }
+
+    try {
+        html_menu_element.innerHTML = '' // empty the menu
+        if (label) {
+            const label_item = document.createElement('sp-menu-item')
+            label_item.selected = true
+            label_item.disabled = true
+            label_item.innerText = label
+            html_menu_element.appendChild(label_item)
+        }
+        for (let item of items) {
+            const menu_item_element = document.createElement('sp-menu-item')
+            menu_item_element.className = menu_item_class
+            createMenuItemHtml(item, menu_item_element)
+            html_menu_element.appendChild(menu_item_element)
+        }
+    } catch (e) {
+        b_result = false
+        console.warn(e)
+    }
+    return b_result
+}
+function getSelectedMenuItem(menu_id) {
+    try {
+        const menu_element = document.getElementById(menu_id)
+        return menu_element.selectedOptions[0]
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function getSelectedMenuItemByElement(menu_element) {
+    try {
+        // const menu_element = document.getElementById(menu_id)
+        return menu_element.selectedOptions[0]
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function selectMenuItem(menu_id, item) {
+    try {
+        const menu_element = document.getElementById(menu_id)
+        const option = Array.from(menu_element.options).filter(
+            (element) => element.value === item
+        )[0]
+        option.selected = true
+    } catch (e) {
+        unselectMenuItem(menu_id)
+        console.warn(e)
+    }
+}
+function selectMenuItemByElement(menu_element, item) {
+    try {
+        const option = Array.from(menu_element.options).filter(
+            (element) => element.value === item
+        )[0]
+        // debugger
+        option.selected = true
+        // option.dispatchEvent(new Event('click'))
+        // option.click()
+    } catch (e) {
+        unselectMenuItemByElement(menu_element)
+        console.warn(e)
+    }
+}
+function getSelectedMenuItemTextContent(menu_id) {
+    try {
+        const selected_item = getSelectedMenuItem(menu_id)
+        if (selected_item.disabled === true) return '' // ignore the label item
+
+        const text_content = selected_item.textContent
+        return text_content
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function getSelectedMenuItemTextContentByElement(menu_element) {
+    try {
+        const selected_item = getSelectedMenuItemByElement(menu_element)
+        if (selected_item.disabled === true) return ''
+        const text_content = selected_item.textContent
+        return text_content
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function unselectMenuItem(menu_id) {
+    try {
+        document.getElementById(menu_id).selectedIndex = null
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function unselectMenuItemByElement(menu_element) {
+    try {
+        menu_element.selectedIndex = null
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function getUseNsfw() {
+    //this method is shared between horde native and horde script
+    const b_nsfw = document.getElementById('chUseNSFW').checked
+    return b_nsfw
+}
+function getUseSilentMode_Old() {
+    const b_use_silent_mode = document.getElementById('chUseSilentMode').checked
+    return b_use_silent_mode
+}
+function getUseSilentMode() {
+    let b_use_silent_mode = true //fast machine
+    const pc_speed = getSelectedRadioButtonElement('rbPCSpeed').value
+    if (pc_speed === 'slow') {
+        b_use_silent_mode = false // use noisy mode
+    } else if (pc_speed === 'fast') {
+        b_use_silent_mode = true // use silent mode
+    }
+    // const b_use_silent_mode = document.getElementById('chUseSilentMode').checked
+    return b_use_silent_mode
+}
+
+module.exports = {
+    getPrompt,
+    autoFillInPrompt,
+    getNegativePrompt,
+    autoFillInNegativePrompt,
+    getDenoisingStrength,
+    autoFillInDenoisingStrength,
+    getWidth,
+    autoFillInWidth,
+    getHeight,
+    autoFillInHeight,
+    getSliderSdValue,
+    setSliderSdValue,
+    autoFillInHiResFixs,
+    getHiResFixs,
+    setHiResFixs,
+    autoFillInSliderUi,
+    getCheckedSamplerName,
+    autoFillInSampler,
+    autoFillInModel,
+    getMode,
+    setInitImageSrc,
+    setInitImageMaskSrc,
+    setGenerateButtonsColor,
+    setAutomaticStatus,
+    setProxyServerStatus,
+    defaultSettings,
+    autoFillDefaultSettings,
+    autoFillSettings,
+    getMaskBlur,
+    setMaskBlur,
+
+    autoFillInHRHeight,
+    autoFillInHRWidth,
+    getPromptShortcut,
+    setPromptShortcut,
+    getModelHashByTitle,
+    getSelectionMode,
+    autoFillInInpaintMaskWeight,
+    autoFillInSteps,
+    getSteps,
+    getBatchNumber,
+    autoFillInBatchNumber,
+    getHrWidth,
+    getHrHeight,
+    setCFG,
+    getCFG,
+    getMaskContent,
+    setMaskContent,
+    addHistoryButtonsHtml,
+
+    getSeed,
+    setSeed,
+    getMaskExpansion,
+    setMaskExpansion,
+    getUpscaleSize,
+    getUpscaler2Visibility,
+    getCodeFormerVisibility,
+    getGFPGANVisibility,
+    getCodeFormerWeight,
+    updateProgressBarsHtml,
+    getBackendType,
+    getHordeApiKey,
+    setProgressImageSrc,
+    getLinkWidthHeightState,
+    setLinkWidthHeightState,
+    isSquareThumbnail,
+    setControlImageSrc,
+    setControlMaskSrc,
+
+    setHordeApiKey,
+    populateMenu,
+    getSelectedMenuItem,
+    getSelectedMenuItemTextContent,
+    getUseNsfw,
+    getUseSilentMode,
+    unselectMenuItem,
+    selectMenuItem,
+    getSliderSdValue_Old,
+    getSelectedRadioButtonElement,
+    getInitImageMaskElement,
+    sliderAddEventListener_new,
+    getSliderSdValueByElement,
+    setSliderSdValueByElements,
+    populateMenuByElement,
+    selectMenuItemByElement,
+    unselectMenuItemByElement,
+    getSelectedMenuItemByElement,
+    getSelectedMenuItemTextContentByElement,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/io.js

@@ -0,0 +1,836 @@
+const psapi = require('../psapi')
+// const sdapi = require('../sdapi_py_re')
+const layer_util = require('../utility/layer')
+const general = require('./general')
+const Jimp = require('../jimp/browser/lib/jimp.min')
+
+const { executeAsModal } = require('photoshop').core
+const batchPlay = require('photoshop').action.batchPlay
+const formats = require('uxp').storage.formats
+const storage = require('uxp').storage
+const fs = storage.localFileSystem
+
+async function isBlackAndWhiteImage(base64EncodedImage) {
+    try {
+        // Load your base64 encoded image
+        const image = await Jimp.read(Buffer.from(base64EncodedImage, 'base64'))
+        console.log(
+            'isBlackAndWhiteImage(): image.bitmap.width, image.bitmap.height: ',
+            image.bitmap.width,
+            image.bitmap.height
+        )
+        // Check if your image only has one channel
+        return (
+            image.bitmap.width === image.bitmap.height &&
+            image.bitmap.width === 1
+        )
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function convertBlackAndWhiteImageToRGBChannels(base64EncodedImage) {
+    // Load your base64 encoded image
+    const image = await Jimp.read(Buffer.from(base64EncodedImage, 'base64'))
+
+    // Convert your black and white image to RGB channels
+    image.color([
+        { apply: 'red', params: [255] },
+        { apply: 'green', params: [255] },
+        { apply: 'blue', params: [255] },
+    ])
+
+    // Get your base64 encoded black and white image with RGB channels
+    const base64EncodedImageWithRGBChannels = await image.getBase64Async(
+        Jimp.MIME_JPEG
+    )
+
+    return base64EncodedImageWithRGBChannels
+}
+async function convertBlackAndWhiteImageToRGBChannels2(base64EncodedImage) {
+    try {
+        // Load your base64 encoded image
+        const image = await Jimp.read(Buffer.from(base64EncodedImage, 'base64'))
+
+        // Convert your black and white image to RGB channels
+        image.color([{ apply: 'mix', params: ['#ffffff', 100] }])
+
+        // Get your base64 encoded black and white image with RGB channels
+        const base64EncodedImageWithRGBChannels = await image.getBase64Async(
+            Jimp.MIME_JPEG
+        )
+
+        return base64EncodedImageWithRGBChannels
+    } catch (e) {
+        console.warn(e)
+    }
+}
+async function convertBlackAndWhiteImageToRGBChannels3(base64EncodedImage) {
+    try {
+        // Load your base64 encoded image
+        const image = await Jimp.read(Buffer.from(base64EncodedImage, 'base64'))
+
+        // Convert your black and white image to RGB channels
+        // image.color([{ apply: 'mix', params: ['#ffffff', 100] }])
+
+        // Get your base64 encoded black and white image with RGB channels
+        const base64EncodedImageWithRGBChannels = await image.getBase64Async(
+            Jimp.MIME_PNG
+        )
+
+        return base64EncodedImageWithRGBChannels
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function snapShotLayer() {
+    //snapshot layer with no mask
+    let command = [
+        // Select All Layers current layer
+        {
+            _obj: 'selectAllLayers',
+            _target: [
+                { _enum: 'ordinal', _ref: 'layer', _value: 'targetEnum' },
+            ],
+        },
+        // Duplicate current layer
+        // {"ID":[459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513],"_obj":"duplicate","_target":[{"_enum":"ordinal","_ref":"layer","_value":"targetEnum"}],"version":5},
+        {
+            // ID: ids,
+            _obj: 'duplicate',
+            _target: [
+                { _enum: 'ordinal', _ref: 'layer', _value: 'targetEnum' },
+            ],
+            // version: 5
+        },
+
+        // Merge Layers
+        { _obj: 'mergeLayersNew' },
+        // Make
+        {
+            _obj: 'make',
+            at: { _enum: 'channel', _ref: 'channel', _value: 'mask' },
+            new: { _class: 'channel' },
+            using: { _enum: 'userMaskEnabled', _value: 'revealSelection' },
+        },
+        // Set Selection
+        {
+            _obj: 'set',
+            _target: [{ _property: 'selection', _ref: 'channel' }],
+            to: { _enum: 'ordinal', _ref: 'channel', _value: 'targetEnum' },
+        },
+        //make a group
+        {
+            _obj: 'make',
+            _target: [
+                {
+                    _ref: 'layerSection',
+                },
+            ],
+            from: {
+                _ref: 'layer',
+                _enum: 'ordinal',
+                _value: 'targetEnum',
+            },
+            layerSectionStart: 512,
+            layerSectionEnd: 513,
+            name: 'Group 2',
+            _options: {
+                dialogOptions: 'dontDisplay',
+            },
+        },
+        {
+            _obj: 'mergeLayersNew',
+            _options: {
+                dialogOptions: 'dontDisplay',
+            },
+        },
+    ]
+
+    const result = await batchPlay(command, {
+        synchronousExecution: true,
+        modalBehavior: 'execute',
+    })
+
+    return result
+}
+
+async function snapShotLayerExe() {
+    await executeAsModal(async () => {
+        //create a fill layer above the background layer, so that it's present in the snapshot
+        try {
+            const selectionInfo = await psapi.getSelectionInfoExe()
+
+            // const backgroundLayer = await app.activeDocument.backgroundLayer
+
+            await psapi.createSolidLayer(255, 255, 255)
+            const solid_layer = await app.activeDocument.activeLayers[0]
+            // await psapi.unSelectMarqueeExe()//unselect the
+
+            // await solid_layer.moveAbove(backgroundLayer)
+            // await snapShotLayer() //create a layer with only the opaque pixels
+            // await psapi.reSelectMarqueeExe(selectionInfo)
+            // await solid_layer.delete()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+    await executeAsModal(async () => {
+        //create a fill layer above the background layer, so that it's present in the snapshot
+        try {
+            const solid_layer = await app.activeDocument.activeLayers[0]
+            const backgroundLayer = await app.activeDocument.backgroundLayer
+            await solid_layer.moveAbove(backgroundLayer)
+            await psapi.unselectActiveLayersExe()
+            await snapShotLayer() //create a layer with only the opaque pixels
+            // await psapi.reSelectMarqueeExe(selectionInfo)
+            // await psapi.unSelectMarqueeExe()//unselect the
+            await solid_layer.delete()
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+}
+
+class IO {
+    // constructor() {}
+    static async exportWebp(layer, export_width, export_height) {
+        await executeAsModal(async () => {
+            //we assume we have a valid layer rectangular image/layer, no transparency
+            const doc_entry = await getCurrentDocFolder() //get the main document folder before we switch doc
+            const layer_info = await layer_util.Layer.getLayerInfo(layer)
+            //*) create a new document
+            const new_doc = await IOHelper.createDocumentExe(
+                export_width,
+                export_height
+            )
+            const new_layer = await layer_util.Layer.duplicateToDoc(
+                layer,
+                new_doc
+            )
+            //*) resize the layer to the same dimension as the document
+
+            await layer_util.Layer.scaleTo(
+                new_layer,
+                new_doc.width,
+                new_doc.height
+            ) //
+            await layer_util.Layer.moveTo(new_layer, 0, 0) //move to the top left corner
+            //
+            await IOHelper.saveAsWebpExe(doc_entry) //save current document as .webp file, save it into doc_entry folder
+            await new_doc.closeWithoutSaving()
+        })
+    }
+    static async exportPng() {}
+    static async exportDoc() {}
+    static async exportLayer() {}
+
+    static async base64PngToPngFile(
+        base64_png,
+        folder,
+        image_name = 'temp_base64Png.png'
+    ) {
+        const arrayBuffer = _base64ToArrayBuffer(base64_png)
+
+        // const folder = await storage.localFileSystem.getTemporaryFolder()
+
+        const file = await folder.createFile(image_name, { overwrite: true })
+
+        await file.write(arrayBuffer, { format: storage.formats.binary })
+        return file
+    }
+    static async openImageFileAsDocument(file_entry) {
+        const new_doc = await app.open(file_entry)
+        return new_doc
+    }
+    static async base64PngToBase64Webp(base64_png) {
+        let base64_webp
+        try {
+            await executeAsModal(async () => {
+                try {
+                    const main_doc_entry = await getCurrentDocFolder()
+                    //save the base64_png to .png file
+                    const temp_folder = await fs.getTemporaryFolder()
+                    const png_file = await this.base64PngToPngFile(
+                        base64_png,
+                        temp_folder
+                    )
+
+                    //load the .png file as a layer in new document
+                    const new_doc = await this.openImageFileAsDocument(png_file)
+                    //save document as .webp
+                    const [_, webp_file] = await IOHelper.saveAsWebpExe(
+                        main_doc_entry
+                    ) //save current document as .webp file, save it into doc_entry folder
+                    await new_doc.closeWithoutSaving()
+                    //load/read the .webp file as an arraybuffer
+                    const ArrayBufferWebp = await webp_file.read({
+                        format: formats.binary,
+                    })
+
+                    //convert the arraybuffer to base64Webp string
+
+                    base64_webp = _arrayBufferToBase64(ArrayBufferWebp)
+                } catch (e) {
+                    console.warn(e)
+                }
+            })
+            return base64_webp
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async base64WebpFromFile(file_entry) {
+        //file_entry most be .webp
+        let webp_base64
+        try {
+            await executeAsModal(async () => {
+                const arrayBuffer = await file_entry.read({
+                    format: formats.binary,
+                })
+                console.log('webp arrayBuffer:', arrayBuffer)
+
+                const base64_image = _arrayBufferToBase64(arrayBuffer) //convert the buffer to base64
+                console.log('base64_image:', base64_image)
+                webp_base64 = base64_image
+            })
+            return [webp_base64, webp_arrayBuffer]
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    static async base64ToLayer(
+        base64_png,
+        image_name = 'base64_to_layer.png',
+        to_x = 0,
+        to_y = 0,
+        width = 512,
+        height = 512,
+        format = 'png'
+    ) {
+        let layer
+        if (format === 'png') {
+            layer = await IOBase64ToLayer.base64PngToLayer(
+                base64_png,
+                image_name
+            )
+
+            psapi.setVisibleExe(layer, true)
+            await layer_util.Layer.scaleTo(layer, width, height) //
+            await layer_util.Layer.moveTo(layer, to_x, to_y) //move to the top left corner
+            psapi.setVisibleExe(layer, true)
+        }
+        return layer
+    }
+
+    static async getSelectionFromCanvasAsBase64Silent(
+        selectionInfo,
+        b_resize = false,
+        resize_width = 0,
+        resize_height = 0
+    ) {
+        //it will save the document then crop it so that only the selection area are left.
+        //return arrayBuffer or base64Png?
+        try {
+            let file
+            const folder = await fs.getTemporaryFolder()
+            await executeAsModal(
+                async () => {
+                    const canvas_image_name = 'canvas_image.png'
+                    file = await folder.createFile(canvas_image_name, {
+                        overwrite: true,
+                    })
+
+                    const currentDocument = app.activeDocument
+                    await currentDocument.saveAs.png(file, null, true)
+                    //save file end
+
+                    //read the saved image.png
+                },
+
+                { commandName: 'readPng' }
+            )
+
+            const arrayBuffer = await file.read({
+                format: formats.binary,
+            })
+
+            // const selectionInfo = g_generation_session.selectionInfo
+            // const selectionInfo = await psapi.getSelectionInfoExe()
+            const cropped_base64_url = await IOHelper.cropPng(
+                arrayBuffer,
+                selectionInfo,
+                true,
+                resize_width,
+                resize_height
+            )
+            const cropped_base64 = general.base64UrlToBase64(cropped_base64_url)
+
+            // html_manip.setInitImageSrc(cropped_base64_url)
+            return cropped_base64
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async getSelectionFromCanvasAsBase64NonSilent(
+        layer,
+        image_name,
+        width,
+        height
+    ) {
+        try {
+            const image_buffer = await psapi.newExportPng(
+                layer,
+                image_name,
+                width,
+                height
+            )
+
+            const base64_image = _arrayBufferToBase64(image_buffer) //convert the buffer to base64
+            //send the base64 to the server to save the file in the desired directory
+            // await sdapi.requestSavePng(base64_image, image_name)
+            // await saveFileInSubFolder(base64_image, document_name, image_name)
+            // debugger
+            const { requestSavePng } = require('../sdapi_py_re')
+            await requestSavePng(base64_image, image_name)
+            return base64_image
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async getSelectionFromCanvasAsBase64Interface(
+        width,
+        height,
+        layer,
+        selectionInfo,
+        resize = true,
+        use_silent_mode = true,
+        image_name = 'temp.png'
+    ) {
+        let base64_image
+        if (use_silent_mode) {
+            base64_image = await this.getSelectionFromCanvasAsBase64Silent(
+                selectionInfo,
+                resize,
+                width,
+                height
+            )
+        } else {
+            base64_image = await this.getSelectionFromCanvasAsBase64NonSilent(
+                layer,
+                image_name,
+                width,
+                height
+            )
+        }
+        return base64_image
+    }
+    static async getSelectionFromCanvasAsBase64Interface_New(
+        width,
+        height,
+        selectionInfo,
+        resize = true,
+        image_name = 'temp.png'
+    ) {
+        //use this version, it has less parameters
+        const use_silent_mode = html_manip.getUseSilentMode()
+        let layer = null
+        if (!use_silent_mode) {
+            await psapi.snapshot_layerExe()
+            const snapshotLayer = await app.activeDocument.activeLayers[0]
+            layer = snapshotLayer
+        }
+        let base64_image
+        if (use_silent_mode) {
+            base64_image = await this.getSelectionFromCanvasAsBase64Silent(
+                selectionInfo,
+                resize,
+                width,
+                height
+            )
+        } else {
+            base64_image = await this.getSelectionFromCanvasAsBase64NonSilent(
+                layer,
+                image_name,
+                width,
+                height
+            )
+        }
+        await layer_util.deleteLayers([layer]) //delete the snapshot layer if it exists
+        return base64_image
+    }
+
+    static async urlToLayer(image_url, image_file_name = 'image_from_url.png') {
+        try {
+            await psapi.unselectActiveLayersExe()
+            const temp_entry = await fs.getTemporaryFolder()
+            await downloadItExe(image_url, temp_entry, image_file_name)
+        } catch (e) {
+            console.warn('urlToLayer()', image_url, image_file_name, e)
+        }
+    }
+}
+
+class IOHelper {
+    static async saveAsWebp(doc_entry) {
+        //doc_entry must be in dataFolder or tempFolder
+        //save document as webp
+        const document_id = app.activeDocument.id
+
+        // doc_entry = await getCurrentDocFolder()
+        const file_entry = await doc_entry.createFile('temp.webp', {
+            overwrite: true,
+        })
+
+        const token = await fs.createSessionToken(file_entry)
+        const result = await batchPlay(
+            [
+                {
+                    _obj: 'save',
+                    as: {
+                        _obj: 'WebPFormat',
+                        compression: {
+                            _enum: 'WebPCompression',
+                            _value: 'compressionLossless',
+                        },
+                        includeXMPData: false,
+                        includeEXIFData: false,
+                        includePsExtras: false,
+                    },
+                    in: {
+                        _path: token,
+                        _kind: 'local',
+                    },
+                    documentID: 59,
+                    copy: true,
+                    lowerCase: true,
+                    saveStage: {
+                        _enum: 'saveStageType',
+                        _value: 'saveBegin',
+                    },
+                    _options: {
+                        dialogOptions: 'dontDisplay',
+                    },
+                },
+            ],
+            {
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            }
+        )
+
+        return [result, file_entry]
+    }
+
+    static async saveAsWebpExe(doc_entry) {
+        let result
+        let file_entry
+        await executeAsModal(async () => {
+            ;[result, file_entry] = await this.saveAsWebp(doc_entry)
+        })
+        return [result, file_entry]
+    }
+    static async createDocumentExe(width, height) {
+        let new_doc
+        try {
+            await executeAsModal(async () => {
+                new_doc = await app.documents.add({
+                    width: width,
+                    height: height,
+                    resolution: await app.activeDocument.resolution,
+                    mode: 'RGBColorMode',
+                    fill: 'transparent',
+                })
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+        return new_doc
+    }
+    static async cropPng(
+        arrayBuffer,
+        selectionInfo,
+        b_resize = false,
+        resize_width = 0,
+        resize_height = 0
+    ) {
+        //crop png from array buffer
+        //have the option to resize the after cropping
+
+        const crop_x = selectionInfo.left
+        const crop_y = selectionInfo.top
+        const crop_w = selectionInfo.width
+        const crop_h = selectionInfo.height
+        const base64_url_result = await Jimp.read(arrayBuffer)
+            .then(async (img) => {
+                let cropped_img = await img.crop(crop_x, crop_y, crop_w, crop_h)
+
+                let resized_img
+                if (b_resize) {
+                    resized_img = await cropped_img.resize(
+                        resize_width,
+                        resize_height
+                    )
+                } else {
+                    resized_img = cropped_img
+                }
+
+                const base64_url = await resized_img.getBase64Async(
+                    Jimp.MIME_PNG
+                )
+
+                // console.log('jimp: base64_url: ', base64_url)
+                // document.getElementById("image").setAttribute("src", data);
+
+                return base64_url
+            })
+            .catch((error) => {
+                console.error(error)
+            })
+        return base64_url_result
+    }
+}
+
+class IOBase64ToLayer {
+    static {}
+    static async base64PngToLayer(base64_png, image_name) {
+        //unselect all layers so that the imported layer get place at the top of the document
+        await psapi.unselectActiveLayersExe()
+
+        const imported_layer = await base64ToFile(base64_png, image_name) //silent import into the document
+
+        return imported_layer
+    }
+}
+class IOFolder {
+    static {}
+    static async createSettingsFolder() {
+        //create a folder named "Settings" in the DataFolder
+        let settings_entry
+        await executeAsModal(async () => {
+            settings_entry = await this.createFolderSafe('Settings')
+        })
+        return settings_entry
+    }
+    static async findOrCreateFolderExe(folder_name) {
+        //create a folder named "Settings" in the DataFolder
+        let folder_entry
+        await executeAsModal(async () => {
+            folder_entry = await this.createFolderSafe(folder_name)
+        })
+        return folder_entry
+    }
+
+    static async doesFolderExist(folder_name) {
+        //check if folder exist. return true if it does. false if it doesn't.
+        const data_folder = await fs.getDataFolder()
+        let b_exist = false
+        let folder
+        try {
+            folder = await data_folder.getEntry(folder_name)
+            b_exist = true
+        } catch (e) {
+            // console.warn(e)
+            b_exist = false
+        }
+        return b_exist
+    }
+
+    static async createFolderSafe(folder_name) {
+        //will always return a folder. it will create the folder if it doesn't exist.
+        try {
+            // const uuid = await getUniqueDocumentId()
+            const data_folder = await fs.getDataFolder()
+
+            let folder_entry
+            try {
+                folder_entry = await data_folder.getEntry(folder_name)
+            } catch (e) {
+                console.warn(e)
+                //create document folder
+                folder_entry = await data_folder.createFolder(folder_name)
+            }
+
+            return folder_entry
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    static async getDocumentFolderNativePath() {
+        try {
+            const uuid = await getUniqueDocumentId()
+
+            let doc_folder = await this.getDocFolder(uuid)
+            const path = general.fixNativePath(doc_folder.nativePath)
+            return path
+        } catch (e) {
+            console.warn(e)
+        }
+        return ''
+    }
+
+    static async getDocFolder(doc_uuid) {
+        //will create folder if does not exist. always return a folder entry
+        const doc_entry = await getDocFolder(doc_uuid)
+        return doc_entry
+    }
+    static async getSettingsFolder() {
+        //will create folder if does not exist. always return a folder entry
+        const settings_entry = await this.createSettingsFolder()
+        return settings_entry
+    }
+    static async getPresetFolder() {
+        //will create folder if does not exist. always return a folder entry
+        const preset_entry = await this.findOrCreateFolderExe('Preset')
+        return preset_entry
+    }
+    static async getCustomPresetFolder(
+        custom_preset_folder_name = 'custom_preset'
+    ) {
+        //will create folder if does not exist. always return a folder entry
+        const preset_entry = await this.findOrCreateFolderExe(
+            custom_preset_folder_name
+        )
+        return preset_entry
+    }
+    static async createFolderIfDoesNotExist(folder_name) {
+        try {
+            await executeAsModal(async () => {
+                try {
+                    const folder = await fs.getDataFolder()
+                    const sub_folder = await folder.createFolder(folder_name)
+                } catch (e) {
+                    console.warn(e)
+                }
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+
+class IOLog {
+    static {}
+    static async saveLogToFile(json, file_name) {
+        try {
+            const plugin_folder = await fs.getDataFolder()
+            const file = await plugin_folder.createFile(file_name, {
+                type: storage.types.file,
+                overwrite: true,
+            })
+
+            const JSONInPrettyFormat = JSON.stringify(json, undefined, 4)
+            await file.write(JSONInPrettyFormat, {
+                format: storage.formats.utf8,
+                append: true,
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+class IOJson {
+    static {}
+    static async saveJsonToFile(json, folder_entry, file_name) {
+        try {
+            const file = await folder_entry.createFile(file_name, {
+                type: storage.types.file,
+                overwrite: true,
+            })
+
+            const JSONInPrettyFormat = JSON.stringify(json, undefined, 4)
+            await file.write(JSONInPrettyFormat, {
+                format: storage.formats.utf8,
+                append: false,
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    static async saveJsonToFileExe(json, folder_entry, file_name) {
+        await executeAsModal(async () => {
+            await this.saveJsonToFile(json, folder_entry, file_name)
+        })
+    }
+    static async loadJsonFromFile(folder_entry, file_name) {
+        const json_file_name = file_name
+
+        try {
+            const json_entry = await folder_entry.getEntry(json_file_name)
+            if (json_entry) {
+                const json = JSON.parse(
+                    await json_entry.read({
+                        format: storage.formats.utf8,
+                    })
+                )
+                return json
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    static async saveSettingsToFile(settings_json, settings_file_name) {
+        await executeAsModal(async () => {
+            // debugger
+            const folder_entry = await IOFolder.getSettingsFolder('Settings')
+            await this.saveJsonToFile(
+                settings_json,
+                folder_entry,
+                settings_file_name
+            )
+        })
+    }
+    static async loadSettingsFromFile(settings_file_name) {
+        const folder_entry = await IOFolder.getSettingsFolder('Settings')
+        const settings_json = await this.loadJsonFromFile(
+            folder_entry,
+            settings_file_name
+        )
+        return settings_json
+    }
+    static async saveHordeSettingsToFile(settings_json) {
+        const settings_file_name = 'horde_settings.json'
+        await this.saveSettingsToFile(settings_json, settings_file_name)
+    }
+    static async loadHordeSettingsFromFile() {
+        const settings_file_name = 'horde_settings.json'
+        const settings_json = await this.loadSettingsFromFile(
+            settings_file_name
+        )
+        return settings_json
+    }
+
+    static async getJsonEntries(doc_entry) {
+        let entries = await doc_entry.getEntries()
+        const json_entries = entries.filter(
+            (e) => e.isFile && e.name.toLowerCase().includes('.json') // must be a file and has the of the type .json
+        )
+        console.log('json_entries: ', json_entries)
+        // .forEach((e) => console.log(e.name))
+        return json_entries
+    }
+    static async deleteFile(doc_entry, file_name) {
+        try {
+            const file_entry = await doc_entry.getEntry(file_name)
+            file_entry.delete()
+        } catch (e) {}
+    }
+}
+
+module.exports = {
+    IO,
+    snapShotLayerExe,
+    IOHelper,
+    IOJson,
+    IOFolder,
+    IOLog,
+    convertBlackAndWhiteImageToRGBChannels,
+    convertBlackAndWhiteImageToRGBChannels2,
+    convertBlackAndWhiteImageToRGBChannels3,
+    isBlackAndWhiteImage,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/layer.js

@@ -0,0 +1,357 @@
+const { batchPlay } = require('photoshop').action
+const { executeAsModal } = require('photoshop').core
+const {
+    cleanLayers,
+    getLayerIndex,
+    selectLayers,
+    unSelectMarqueeCommand,
+    unSelectMarqueeExe,
+    getSelectionInfoExe,
+    reSelectMarqueeExe,
+} = require('../psapi')
+
+const psapi = require('../psapi')
+
+async function createNewLayerExe(layerName, opacity = 100) {
+    await executeAsModal(async () => {
+        await createNewLayerCommand(layerName, opacity)
+    })
+    const new_layer = await app.activeDocument.activeLayers[0]
+    return new_layer
+}
+
+async function createNewLayerCommand(layerName, opacity = 100) {
+    return await app.activeDocument.createLayer({
+        name: layerName,
+        opacity: opacity,
+        mode: 'normal',
+    })
+}
+
+async function deleteLayers(layers) {
+    try {
+        await cleanLayers(layers)
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function getIndexCommand() {
+    const command = {
+        _obj: 'get',
+        _target: [
+            {
+                _property: 'itemIndex',
+            },
+            {
+                _ref: 'layer',
+                _enum: 'ordinal',
+                _value: 'targetEnum',
+            },
+        ],
+    }
+    const result = await batchPlay([command], {
+        synchronousExecution: true,
+        modalBehavior: 'execute',
+    })
+
+    return result
+}
+
+async function getIndexExe() {
+    let index
+    await executeAsModal(async () => {
+        index = await getIndexCommand()
+    })
+
+    return index
+}
+const photoshop = require('photoshop')
+
+const collapseFolderCommand = async (expand = false, recursive = false) => {
+    let result
+    try {
+        result = await batchPlay(
+            [
+                {
+                    _obj: 'set',
+                    _target: {
+                        _ref: [
+                            { _property: 'layerSectionExpanded' },
+                            {
+                                _ref: 'layer',
+                                _enum: 'ordinal',
+                                _value: 'targetEnum',
+                            },
+                        ],
+                    },
+                    to: expand,
+                    recursive,
+                    _options: { dialogOptions: 'dontDisplay' },
+                },
+            ],
+            { synchronousExecution: true }
+        )
+    } catch (e) {
+        console.error(e.message)
+    }
+    return result
+}
+async function collapseFolderExe(layers, expand = false, recursive = false) {
+    for (let layer of layers) {
+        try {
+            await executeAsModal(async () => {
+                const is_visible = await layer.visible // don't change the visiblity of the layer when collapsing
+                await selectLayers([layer])
+                await collapseFolderCommand(expand, recursive)
+                layer.visible = is_visible
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+
+class Layer {
+    static doesLayerExist(layer) {
+        let b_exist = false
+        try {
+            if (typeof layer !== 'undefined' && layer && layer.name) {
+                //it will throw an error if the layer has been deleted
+                b_exist = true
+                // return true
+            }
+            // b_exist = true
+        } catch (e) {
+            b_exist = false
+            // console.warn(e)
+        }
+        return b_exist
+    }
+    static async getLayerInfo(layer) {
+        const bounds = layer.bounds
+        const height = bounds.bottom - bounds.top
+        const width = bounds.right - bounds.left
+        const layer_info = {
+            height: height,
+            width: width,
+            left: bounds.left,
+            right: bounds.right,
+            top: bounds.top,
+            bottom: bounds.bottom,
+        }
+        console.log('layer_info:', layer_info)
+        return layer_info
+    }
+    static async scaleTo(layer, new_width, new_height) {
+        await executeAsModal(async () => {
+            try {
+                const selection_info = await psapi.getSelectionInfoExe()
+                await psapi.unSelectMarqueeExe()
+
+                console.log('scaleLayer got called')
+                // const activeLayer = getActiveLayer()
+                // const activeLayer = await app.activeDocument.activeLayers[0]
+
+                const layer_info = await this.getLayerInfo(layer)
+                const scale_x_ratio = (new_width / layer_info.width) * 100
+                const scale_y_ratio = (new_height / layer_info.height) * 100
+                console.log('scale_x_y_ratio:', scale_x_ratio, scale_y_ratio)
+                await layer.scale(scale_x_ratio, scale_y_ratio)
+                await psapi.reSelectMarqueeExe(selection_info)
+            } catch (e) {
+                console.warn(e)
+            }
+        })
+    }
+
+    static async moveTo(layer, to_x, to_y) {
+        try {
+            await executeAsModal(async () => {
+                try {
+                    //translate doesn't work with selection active. so store the selection and then unselect. move the layer, then reselect the selection info
+                    const selection_info = await psapi.getSelectionInfoExe()
+                    await psapi.unSelectMarqueeExe()
+
+                    const layer_info = await this.getLayerInfo(layer)
+                    const top_dist = layer_info.top - to_y
+                    const left_dist = layer_info.left - to_x
+                    console.log('-left_dist, -top_dist', -left_dist, -top_dist)
+                    await layer.translate(-left_dist, -top_dist)
+
+                    await psapi.reSelectMarqueeExe(selection_info)
+                } catch (e) {
+                    console.warn(e)
+                }
+            })
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static resizeTo() {}
+    static fitSelection() {}
+    static async duplicateToDoc(layer, to_doc) {
+        const dupLayer = await layer.duplicate(to_doc)
+        // await selectLayers([dupLayer])
+        return dupLayer
+    }
+
+    static async duplicateLayerExe(layer) {
+        let layer_copy
+        try {
+            await executeAsModal(async () => {
+                layer_copy = await layer.duplicate()
+            })
+        } catch (e) {
+            console.warn('duplication error:', e)
+        }
+        return layer_copy
+    }
+
+    static {}
+}
+
+const hasBackgroundLayerDesc = () => ({
+    _obj: 'get',
+    _target: [
+        { _property: 'hasBackgroundLayer' },
+        {
+            _ref: 'document',
+            _enum: 'ordinal',
+            _value: 'targetEnum',
+        },
+    ],
+})
+async function hasBackgroundLayer() {
+    // check if a document has a background layer
+    try {
+        const result = await batchPlay([hasBackgroundLayerDesc()], {
+            synchronousExecution: true,
+            modalBehavior: 'execute',
+        })
+        const b_hasBackgroundLayer = result[0]?.hasBackgroundLayer
+        return b_hasBackgroundLayer
+    } catch (e) {
+        console.warn(e)
+    }
+}
+const makeBackgroundLayerDesc = () => ({
+    _obj: 'make',
+    _target: [
+        {
+            _ref: 'backgroundLayer',
+        },
+    ],
+    using: {
+        _ref: 'layer',
+        _enum: 'ordinal',
+        _value: 'targetEnum',
+    },
+    _options: { failOnMissingProperty: false, failOnMissingElement: false },
+    // _options: {
+    //     dialogOptions: 'dontDisplay',
+    // },
+})
+
+const createSolidLayerDesc = (r, g, b) => ({
+    _obj: 'make',
+    _target: [
+        {
+            _ref: 'contentLayer',
+        },
+    ],
+    using: {
+        _obj: 'contentLayer',
+        type: {
+            _obj: 'solidColorLayer',
+            color: {
+                _obj: 'RGBColor',
+                red: r,
+                grain: g,
+                blue: b,
+            },
+        },
+    },
+    _options: {
+        dialogOptions: 'dontDisplay',
+    },
+})
+
+const toggleBackgroundLayerDesc = () => ({
+    _obj: 'show',
+    null: [
+        {
+            _ref: 'layer',
+            _property: 'background',
+        },
+    ],
+    toggleOptionsPalette: true,
+    _options: {
+        dialogOptions: 'dontDisplay',
+    },
+})
+
+async function toggleBackgroundLayerExe() {
+    try {
+        await executeAsModal(async () => {
+            const result = await batchPlay([toggleBackgroundLayerDesc()], {
+                synchronousExecution: true,
+                modalBehavior: 'execute',
+            })
+            console.log('toggleBackgroundLayerExe result: ', result)
+        })
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function createBackgroundLayer(r = 255, g = 255, b = 255) {
+    try {
+        const has_background = await hasBackgroundLayer()
+        if (has_background) {
+            //no need to create a background layer
+            return null
+        }
+
+        //reselect the selection area if it exist
+
+        await executeAsModal(async () => {
+            //store the selection area and then unselected
+            const selectionInfo = await psapi.getSelectionInfoExe()
+            await psapi.unSelectMarqueeExe()
+            const active_layers = app.activeDocument.activeLayers
+
+            // await createNewLayerCommand('background') //create layer
+            //make the layer into background
+            const result = await batchPlay(
+                [createSolidLayerDesc(r, g, b), makeBackgroundLayerDesc()],
+                {
+                    synchronousExecution: true,
+                    modalBehavior: 'execute',
+                }
+            )
+
+            await psapi.reSelectMarqueeExe(selectionInfo)
+            await psapi.selectLayersExe(active_layers)
+        })
+    } catch (e) {
+        console.warn(e)
+    }
+}
+async function fixImageBackgroundLayer() {
+    //convert the background layer to a normal layer
+    //create a new layer
+    //convert the new layer to background
+}
+module.exports = {
+    createNewLayerExe,
+    deleteLayers,
+    getIndexExe,
+    collapseFolderExe,
+    Layer,
+    hasBackgroundLayer,
+    createBackgroundLayer,
+    createSolidLayerDesc,
+    makeBackgroundLayerDesc,
+    toggleBackgroundLayerExe,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/notification.js

@@ -0,0 +1,102 @@
+const dialog_box = require('../dialog_box')
+const psapi = require('../psapi')
+const { createBackgroundLayer } = require('./layer')
+class Notification {
+    static {}
+    static async webuiIsOffline() {
+        const r1 = await dialog_box.prompt(
+            'Automatic1111 is Offline',
+            "make sure Automatic1111 is running in the background, or select the 'native horde' option from the horde tab",
+            ['Cancel', 'OK']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'OK') {
+                console.log('ok')
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async webuiAPIMissing() {
+        const r1 = await dialog_box.prompt(
+            "The Plugin can't communicate with Automatic1111",
+            'Automatic1111 is running, but you forgot to add --api flag to the webui command flags',
+            ['Cancel', 'OK']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'OK') {
+                console.log('ok')
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async backgroundLayerIsMissing() {
+        const r1 = await dialog_box.prompt(
+            'You need a white background layer present in your document',
+            '',
+            ['Cancel', 'Create']
+        )
+
+        try {
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+                return false
+            } else if (r1 === 'Create') {
+                //store the selection area and then unselected
+                const selectionInfo = await psapi.getSelectionInfoExe()
+                await psapi.unSelectMarqueeExe()
+                const active_layers = app.activeDocument.activeLayers
+
+                //create a background layer with no selection active
+                await createBackgroundLayer()
+                console.log('create background layer')
+                //reselect the selection area if it exist
+
+                await psapi.reSelectMarqueeExe(selectionInfo)
+                await psapi.selectLayersExe(active_layers)
+                return true
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+        return false
+    }
+    static async inactiveSelectionArea(is_active_session) {
+        let buttons = ['Cancel', 'Rectangular Marquee']
+        if (is_active_session) {
+            buttons.push('Continue Session')
+        }
+        const r1 = await dialog_box.prompt(
+            'Please Select a Rectangular Area',
+            'You Forgot to select a Rectangular Area',
+            buttons
+        )
+        if (r1 === 'Cancel') {
+            /* cancelled or No */
+            console.log('cancel')
+            return false
+        } else if (r1 === 'Rectangular Marquee') {
+            console.log('Rectangular Marquee')
+            psapi.selectMarqueeRectangularToolExe()
+            return false // should this be false?! what does true and false means in this context?! Yes: it should be false since boolean value represent wither we have an active selection area or not
+        } else if (r1 === 'Continue Session') {
+            await activateSessionSelectionArea()
+            return true
+        }
+        return false
+    }
+}
+
+module.exports = {
+    Notification,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/online_data.json

@@ -0,0 +1,4 @@
+{
+    "new_version": "v1.2.4",
+    "update_message": "Your version is outdated.Please visit our Github page and download the one click installer / .ccx file.\nRun the .ccx file and it will automatically update the current version of your plug in. No data will be lost."
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/presets/controlnet_preset.js

@@ -0,0 +1,198 @@
+const MaintainPositionSettings = {
+    0: {
+        module: 'openpose',
+        model: 'control_sd15_openpose [fef5e48e]',
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.3,
+        guessmode: null,
+    },
+    1: {
+        module: 'depth',
+        model: 'control_sd15_depth [fef5e48e]',
+        weight: 0.8,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.6,
+        guessmode: null,
+    },
+}
+
+const Pose_Depth_Canny_HandFix = {
+    0: {
+        module: 'openpose',
+        model: 'control_sd15_openpose [fef5e48e]',
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+    1: {
+        module: 'depth',
+        model: 'control_sd15_depth [fef5e48e]',
+        weight: 1.3,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0.3,
+        guidance_end: 1,
+        guessmode: null,
+    },
+    2: {
+        module: 'canny',
+        model: 'control_sd15_canny [fef5e48e]',
+        weight: 1.3,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0.3,
+        guidance_end: 1,
+        guessmode: null,
+    },
+}
+
+MaintainComposition_Character = {
+    0: {
+        module: 'openpose',
+        model: 'control_sd15_openpose [fef5e48e]',
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.5,
+        guessmode: null,
+    },
+    1: {
+        module: 'canny',
+        model: 'control_sd15_canny [fef5e48e]',
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.8,
+        guessmode: null,
+    },
+    2: {
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+}
+
+const LogoCreation = {
+    0: {
+        module: 'canny',
+        model: 'control_sd15_canny [fef5e48e]',
+        weight: 1.3,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.9,
+        guessmode: null,
+    },
+    1: {
+        module: 'scribble',
+        model: 'control_sd15_scribble [fef5e48e]',
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+    2: {
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+}
+
+const Backgrounds = {
+    0: {
+        module: 'mlsd',
+        model: 'control_sd15_mlsd [fef5e48e]',
+        weight: 1.3,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 0.7,
+        guessmode: null,
+    },
+    1: {
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+    2: {
+        weight: 1,
+        resize_mode: null,
+        lowvram: null,
+        processor_res: null,
+        threshold_a: null,
+        threshold_b: null,
+        guidance_start: 0,
+        guidance_end: 1,
+        guessmode: null,
+    },
+}
+const ControlNetNativePresets = {
+    'Maintain Position': MaintainPositionSettings,
+    'Hand Fix': Pose_Depth_Canny_HandFix,
+    'Maintain Composition (Character)': MaintainComposition_Character,
+    'Logo Creation': LogoCreation,
+    Backgrounds: Backgrounds,
+}
+module.exports = {
+    ControlNetNativePresets,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/presets/preset.js

@@ -0,0 +1,408 @@
+const io = require('../io')
+const html_manip = require('../html_manip')
+const Enum = require('../../enum')
+const event = require('../event')
+
+// const control_net = require('../../utility/tab/control_net')
+let settings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    selection_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: null,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: null,
+}
+
+let LatentNoiseSettings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.92,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '2',
+}
+
+let FillSettings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '0',
+}
+let OriginalSettings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: null,
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: null,
+    denoising_strength: 0.7,
+    hi_res_denoising_strength: null,
+    mask_blur: null,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '1',
+}
+let HealBrushSettings = {
+    model: null,
+    prompt_shortcut: null,
+    positive_prompt: null,
+    negative_prompt: null,
+    generation_mode: null,
+    batch_number: null,
+    steps: '25',
+    width: null,
+    height: null,
+    firstphase_width: null,
+    firstphase_height: null,
+    cfg: '9',
+    denoising_strength: 0.92,
+    hi_res_denoising_strength: null,
+    mask_blur: 1,
+    inpaint_at_full_res: null,
+    hi_res_fix: null,
+    inpaint_padding: null,
+    seed: null,
+    samplers: null,
+    mask_content: '2',
+    mask_expansion: 2,
+}
+
+function nullAllSettings() {}
+
+class Preset {
+    constructor() {}
+
+    loadPresetFromJson(preset_path) {}
+    savePresetToJson(preset_path, settings) {}
+}
+
+function getPresetSettingsHtml() {
+    const value_str = document.getElementById('taPresetSettings').value
+    const value_json = JSON.parse(value_str)
+    return value_json
+}
+function setPresetSettingsHtml(preset_settings) {
+    const JSONInPrettyFormat = JSON.stringify(preset_settings, undefined, 7)
+    preset_settings_element = document.getElementById('taPresetSettings')
+    preset_settings_element.value = JSONInPrettyFormat
+
+    const new_lines_count = general.countNewLines(JSONInPrettyFormat)
+    new_lines_count
+    preset_settings_element.style.height =
+        Math.min(new_lines_count * 12 + 100, 800).toString() + 'px'
+}
+
+function getPresetName() {
+    const preset_name = document.getElementById('tiPresetName').value
+    return preset_name
+}
+function setPresetName(preset_name) {
+    document.getElementById('tiPresetName').value = preset_name
+}
+
+function getPresetSettings(preset_type) {
+    let preset_settings
+    if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
+        preset_settings = g_ui_settings_object.getSettings()
+    } else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) {
+        const { ControlNetUnit } = require('../../utility/tab/control_net') // only import ControlNetUnit to avoid circular dependency
+        // preset_settings = control_net.ControlNetUnit.getUnits()
+
+        preset_settings = ControlNetUnit.getUnits()
+    }
+    return preset_settings
+}
+
+function getPresetType() {
+    const presetType = document.getElementById('rgPresetType').selected
+
+    return presetType
+}
+
+document.getElementById('btnNewPreset').addEventListener('click', () => {
+    // const g_ui_settings_object = getUISettingsObject()
+    // debugger
+    const preset_type = getPresetType()
+    const preset_settings = getPresetSettings(preset_type)
+
+    // const settings = g_ui_settings_object.getSettings()
+
+    setPresetSettingsHtml(preset_settings)
+
+    const preset_name = getPresetName()
+    setPresetNameLabel(preset_name)
+})
+
+function getPresetNameLabel() {
+    //use presetNameLabel as the final name for a preset
+    const preset_name = document.getElementById('lPresetName').textContent
+    return preset_name
+}
+function setPresetNameLabel(preset_name) {
+    document.getElementById('lPresetName').textContent = preset_name.trim()
+}
+
+async function populatePresetMenu() {
+    // presets = ['preset_1', 'preset_2', 'preset_3']
+    const preset_type = getPresetType()
+    const presets = await getAllCustomPresetsSettings(preset_type)
+    const presets_names = Object.keys(presets)
+    html_manip.populateMenu(
+        'mSettingTabPresetMenu',
+        'mPresetMenuItemClass',
+        presets_names,
+        (item, item_html_element) => {
+            item_html_element.innerHTML = item
+        }
+    )
+}
+async function deletePreset() {
+    try {
+        const preset_name = html_manip.getSelectedMenuItemTextContent(
+            'mSettingTabPresetMenu'
+        )
+        const preset_file_name = preset_name + '.json'
+
+        const preset_type = getPresetType()
+        const preset_folder_name = mapPresetTypeToPresetFolder(preset_type)
+        const custom_preset_entry = await io.IOFolder.getCustomPresetFolder(
+            preset_folder_name
+        )
+
+        await io.IOJson.deleteFile(custom_preset_entry, preset_file_name)
+        html_manip.unselectMenuItem('mSettingTabPresetMenu') // unselect the custom preset menu
+        setPresetSettingsHtml({}) //reset preset settings text area
+        setPresetName('')
+        setPresetNameLabel('')
+        await populatePresetMenu() // update the custom preset Menu
+        triggerUpdatePresetMenu(preset_type)
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function getCustomPresetEntries(preset_folder_name) {
+    const custom_preset_entry = await io.IOFolder.getCustomPresetFolder(
+        preset_folder_name
+    )
+
+    const custom_preset_entries = await io.IOJson.getJsonEntries(
+        custom_preset_entry
+    )
+
+    return custom_preset_entries
+}
+
+async function loadPresetSettingsFromFile(preset_file_name, preset_type) {
+    // const preset_type = getPresetType()
+
+    const preset_folder_name = mapPresetTypeToPresetFolder(preset_type)
+    const custom_preset_entry = await io.IOFolder.getCustomPresetFolder(
+        preset_folder_name
+    )
+    let preset_settings = {}
+    try {
+        preset_settings = await io.IOJson.loadJsonFromFile(
+            custom_preset_entry,
+            preset_file_name
+        )
+    } catch (e) {
+        console.warn(e)
+    }
+    return preset_settings
+}
+async function getAllCustomPresetsSettings(preset_type) {
+    const preset_folder_name = mapPresetTypeToPresetFolder(preset_type)
+    const custom_preset_entries = await getCustomPresetEntries(
+        preset_folder_name
+    )
+    let custom_presets = {}
+    for (const entry of custom_preset_entries) {
+        const preset_name = entry.name.split('.json')[0]
+        let preset_settings = await loadPresetSettingsFromFile(
+            entry.name,
+            preset_type
+        )
+
+        custom_presets[preset_name] = preset_settings
+    }
+    return custom_presets
+}
+
+function mapPresetTypeToPresetFolder(preset_type) {
+    let preset_folder
+
+    if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
+        preset_folder = 'custom_preset'
+    } else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) {
+        preset_folder = 'controlnet_preset'
+    }
+    return preset_folder
+}
+
+function triggerUpdatePresetMenu(preset_type) {
+    let menu_id
+    if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
+        menu_id = '#mPresetMenu'
+    } else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) {
+        menu_id = '#mControlNetPresetMenu'
+    }
+    event.triggerEvent(menu_id, event.updatePresetMenuEvent)
+}
+Array.from(document.getElementsByClassName('rbPresetType')).forEach((rb) => {
+    rb.addEventListener('click', async () => {
+        const preset_type = rb.value
+        await populatePresetMenu()
+    })
+})
+
+document.getElementById('btnSavePreset').addEventListener('click', async () => {
+    //save preset settings from textarea to json file
+    //reload the preset menu
+    const preset_type = getPresetType()
+    const custom_preset_folder_name = mapPresetTypeToPresetFolder(preset_type)
+    const custom_preset_entry = await io.IOFolder.getCustomPresetFolder(
+        custom_preset_folder_name
+    )
+    const preset_settings = getPresetSettingsHtml()
+    const preset_name = getPresetNameLabel()
+
+    //check if the file exist and prompt the user to override it or cancel
+    await io.IOJson.saveJsonToFileExe(
+        preset_settings,
+        custom_preset_entry,
+        preset_name + '.json'
+    )
+    await populatePresetMenu()
+    triggerUpdatePresetMenu(preset_type)
+    html_manip.selectMenuItem('mSettingTabPresetMenu', preset_name)
+})
+document
+    .getElementById('btnDeletePreset')
+    .addEventListener('click', async () => {
+        await deletePreset()
+    })
+
+document.getElementById('tiPresetName').addEventListener('input', () => {
+    //save preset settings from textarea to json file
+    //reload the preset menu
+    const preset_name = getPresetName()
+    setPresetNameLabel(preset_name)
+    //check if the file exist and prompt the user to override it or cancel
+})
+document
+    .getElementById('mSettingTabPresetMenu')
+    .addEventListener('input', () => {
+        //Note: is this correct?! why use Input and change events together
+        //save preset settings from textarea to json file
+        //reload the preset menu
+        const preset_name = getPresetName()
+        setPresetNameLabel(preset_name)
+        //check if the file exist and prompt the user to override it or cancel
+    })
+
+document
+    .getElementById('mSettingTabPresetMenu')
+    .addEventListener('change', async (evt) => {
+        try {
+            const preset_index = evt.target.selectedIndex
+            const preset_name = evt.target.options[preset_index].textContent
+            const preset_type = getPresetType()
+            setPresetName(preset_name)
+            setPresetNameLabel(preset_name)
+
+            const preset_settings = await loadPresetSettingsFromFile(
+                preset_name + '.json',
+                preset_type
+            )
+            setPresetSettingsHtml(preset_settings)
+        } catch (e) {}
+    })
+
+document
+    .getElementById('mPresetMenu')
+    .addEventListener('updatePresetMenuEvent', async (event) => {
+        // console.log("I'm listening on a custom event")
+        const { populatePresetMenu } = require('../ui')
+        await populatePresetMenu()
+    })
+
+async function initializePresetTab() {
+    try {
+        await populatePresetMenu()
+
+        const selected_rb =
+            html_manip.getSelectedRadioButtonElement('rbPresetType')
+        selected_rb.click() // to trigger the click event which will update the setting preset menu according to the preset type
+    } catch (e) {
+        console.error(e)
+    }
+}
+initializePresetTab()
+module.exports = {
+    LatentNoiseSettings,
+    FillSettings,
+    OriginalSettings,
+    HealBrushSettings,
+    populatePresetMenu,
+    getCustomPresetEntries,
+    loadPresetSettingsFromFile,
+    getAllCustomPresetsSettings,
+    initializePresetTab,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sampler.js

@@ -0,0 +1,117 @@
+samplers = [
+    {
+        name: 'Euler a',
+        aliases: ['k_euler_a', 'k_euler_ancestral'],
+        options: {},
+    },
+    {
+        name: 'Euler',
+        aliases: ['k_euler'],
+        options: {},
+    },
+    {
+        name: 'LMS',
+        aliases: ['k_lms'],
+        options: {},
+    },
+    {
+        name: 'Heun',
+        aliases: ['k_heun'],
+        options: {},
+    },
+    {
+        name: 'DPM2',
+        aliases: ['k_dpm_2'],
+        options: {
+            discard_next_to_last_sigma: 'True',
+        },
+    },
+    {
+        name: 'DPM2 a',
+        aliases: ['k_dpm_2_a'],
+        options: {
+            discard_next_to_last_sigma: 'True',
+        },
+    },
+    {
+        name: 'DPM++ 2S a',
+        aliases: ['k_dpmpp_2s_a'],
+        options: {},
+    },
+    {
+        name: 'DPM++ 2M',
+        aliases: ['k_dpmpp_2m'],
+        options: {},
+    },
+    {
+        name: 'DPM++ SDE',
+        aliases: ['k_dpmpp_sde'],
+        options: {},
+    },
+    {
+        name: 'DPM fast',
+        aliases: ['k_dpm_fast'],
+        options: {},
+    },
+    {
+        name: 'DPM adaptive',
+        aliases: ['k_dpm_ad'],
+        options: {},
+    },
+    {
+        name: 'LMS Karras',
+        aliases: ['k_lms_ka'],
+        options: {
+            scheduler: 'karras',
+        },
+    },
+    {
+        name: 'DPM2 Karras',
+        aliases: ['k_dpm_2_ka'],
+        options: {
+            scheduler: 'karras',
+            discard_next_to_last_sigma: 'True',
+        },
+    },
+    {
+        name: 'DPM2 a Karras',
+        aliases: ['k_dpm_2_a_ka'],
+        options: {
+            scheduler: 'karras',
+            discard_next_to_last_sigma: 'True',
+        },
+    },
+    {
+        name: 'DPM++ 2S a Karras',
+        aliases: ['k_dpmpp_2s_a_ka'],
+        options: {
+            scheduler: 'karras',
+        },
+    },
+    {
+        name: 'DPM++ 2M Karras',
+        aliases: ['k_dpmpp_2m_ka'],
+        options: {
+            scheduler: 'karras',
+        },
+    },
+    {
+        name: 'DPM++ SDE Karras',
+        aliases: ['k_dpmpp_sde_ka'],
+        options: {
+            scheduler: 'karras',
+        },
+    },
+    {
+        name: 'DDIM',
+        aliases: [],
+        options: {},
+    },
+    {
+        name: 'PLMS',
+        aliases: [],
+        options: {},
+    },
+]
+
+module.exports = { samplers }

Auto-Photoshop-StableDiffusion-Plugin/utility/sd_scripts/horde.js

@@ -0,0 +1,107 @@
+async function requestModelsHorde() {
+    //get the models list from url
+    // https://stablehorde.net/api/v2/status/models
+
+    console.log('requestModelsHorde: ')
+
+    const full_url = 'https://stablehorde.net/api/v2/status/models'
+    let request = await fetch(full_url)
+    let json = await request.json()
+    console.log('hordes models json:')
+    console.dir(json)
+
+    return json
+}
+
+function addHordeModelMenuItem(model_title, model_name) {
+    // console.log(model_title,model_name)
+    const menu_item_element = document.createElement('sp-menu-item')
+    menu_item_element.className = 'mModelMenuItemHorde'
+    menu_item_element.innerHTML = model_title
+
+    menu_item_element.dataset.name = model_name
+    return menu_item_element
+}
+
+async function refreshModelsHorde() {
+    try {
+        let g_models_horde = await requestModelsHorde()
+        // const models_menu_element = document.getElementById('mModelsMenu')
+        // models_menu_element.value = ""
+        //(optional): sort the models
+
+        g_models_horde.sort(function (a, b) {
+            return b.count - a.count
+        })
+        // g_models_horde = g_models_horde.sort( compareModelCounts );
+        document.getElementById('mModelsMenuHorde').innerHTML = ''
+        let model_item_random = addHordeModelMenuItem('Random', 'Random')
+        // model_item_random.selected = true
+        document
+            .getElementById('mModelsMenuHorde')
+            .appendChild(model_item_random)
+        for (let model of g_models_horde) {
+            // console.log(model.name, model.count) //Log
+            const model_html_tile = `${model.name}: ${model.count}`
+            const model_item_element = addHordeModelMenuItem(
+                model_html_tile,
+                model.name
+            )
+            if (model.name === 'stable_diffusion') {
+                // TODO: refactor this code outside the for loop
+                // maybe call it in an init function
+                //selection the stable diffusion model by default
+                model_item_element.selected = true
+            }
+            document
+                .getElementById('mModelsMenuHorde')
+                .appendChild(model_item_element)
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function getModelHorde() {
+    return [...document.getElementsByClassName('mModelMenuItemHorde')].filter(
+        (e) => e.selected == true
+    )[0].dataset.name
+}
+
+function getScriptArgs() {
+    const model = getModelHorde()
+    const b_nsfw = document.getElementById('chUseNSFW').checked
+    const b_shared_laion = document.getElementById('chUseSharedLaion').checked
+
+    let seed_variation = document.getElementById('slSeedVariation').value
+    seed_variation = parseInt(seed_variation)
+    const script_args_json = {
+        model: model,
+        nsfw: b_nsfw,
+        shared_laion: b_shared_laion,
+        seed_variation: seed_variation,
+        post_processing_1: 'None',
+        post_processing_2: 'None',
+        post_processing_3: 'None',
+    }
+    const script_args = Object.values(script_args_json)
+    return script_args
+}
+
+document
+    .getElementById('btnRefreshModelsHorde')
+    .addEventListener('click', async () => {
+        await refreshModelsHorde()
+    })
+
+const script_name = 'Run on Stable Horde'
+
+refreshModelsHorde() //refresh the model when importing the script
+
+module.exports = {
+    requestModelsHorde,
+    refreshModelsHorde,
+    getModelHorde,
+
+    getScriptArgs,
+    script_name,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/config.js

@@ -0,0 +1,83 @@
+class SdConfig {
+    constructor() {
+        this.config //store sd options
+    }
+
+    async getConfig() {
+        try {
+            this.config = await sdapi.requestGetConfig()
+            return this.config
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    getUpscalerModels() {
+        try {
+            // const upscaler_comp = this.config.components.filter(comp =>comp.props.elem_id === "txt2img_hr_upscaler")[0]
+            let upscaler_comp
+            // console.log('this.config: ', this.config)
+            for (let comp of this.config.components) {
+                if (comp?.props?.elem_id) {
+                    const elem_id = comp?.props?.elem_id
+                    if (elem_id === 'txt2img_hr_upscaler') {
+                        console.log('elem_id: ', elem_id)
+                        upscaler_comp = comp
+                        break
+                    }
+                }
+            }
+            console.log('upscaler_comp: ', upscaler_comp)
+            const upscalers = upscaler_comp.props.choices
+
+            return upscalers
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    getControlNetMaxModelsNum() {
+        try {
+            let max_models_num = 0
+            for (let comp of this.config.components) {
+                if (comp?.props?.elem_id) {
+                    const elem_id = comp?.props?.elem_id
+                    if (elem_id === 'setting_control_net_max_models_num') {
+                        console.log(
+                            'setting_control_net_max_models_num: ',
+                            comp?.props?.value
+                        )
+                        max_models_num = comp?.props?.value
+                        break
+                    }
+                }
+            }
+            console.log('max_models_num: ', max_models_num)
+            return max_models_num
+        } catch (e) {
+            console.warn(e)
+            return 1 // default max number is one
+        }
+    }
+
+    getControlNetPreprocessors() {
+        try {
+            let max_models_num
+            let choices
+            for (let comp of this.config.components) {
+                const label = comp?.props?.label
+                if (label === 'Preprocessor') {
+                    choices = comp?.props?.choices
+                    break
+                }
+            }
+            console.log('Preprocessor list: ', choices)
+            return choices
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+
+module.exports = {
+    SdConfig,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/horde_native.js

@@ -0,0 +1,731 @@
+const general = require('../general')
+const psapi = require('../../psapi')
+const html_manip = require('../html_manip')
+const layer_util = require('../layer')
+const dummy = require('../dummy')
+const io = require('../io')
+class HordeSettings {
+    static {}
+    static async saveSettings() {
+        try {
+            const settings = await getSettings()
+
+            let native_horde_settings = await mapPluginSettingsToHorde(settings)
+            const horde_api_key = html_manip.getHordeApiKey()
+            native_horde_settings['api_key'] = html_manip.getHordeApiKey()
+            await io.IOJson.saveHordeSettingsToFile(native_horde_settings)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    static async loadSettings() {
+        try {
+            let native_horde_settings =
+                await io.IOJson.loadHordeSettingsFromFile()
+            html_manip.setHordeApiKey(native_horde_settings['api_key'])
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+class hordeGenerator {
+    //horde generation process:
+    //*) get the settings
+    //*) get send request
+    //*) wait for response
+    //*) load the image to the canvas
+    //*) move and scale image to the selection
+    //*) save the image to history/data folder
+    //*) load the image data into the plugin / viewer tab
+    //*)
+
+    //other options:
+    //*)interrupt the generation process
+    //*)cancel the generation process on error
+
+    constructor() {
+        this.horde_settings
+        this.plugin_settings
+        this.currentGenerationResult = null
+        this.requestStatus = null
+        this.isProcessHordeResultCalled = false
+        this.maxWaitTime = 0
+        this.waiting = 0
+        this.isCanceled = false
+        this.horde_id = null
+        this.last_horde_id = null
+    }
+
+    async getSettings() {
+        try {
+            const workers = await getWorkers()
+
+            const workers_ids = getWorkerID(workers)
+            const settings = await getSettings()
+            this.plugin_settings = settings
+            let payload = await mapPluginSettingsToHorde(settings)
+            // payload['workers'] = workers_ids
+            payload['workers'] = []
+
+            this.horde_settings = payload
+            return this.horde_settings
+        } catch (e) {
+            console.warn('getSettings: ', e)
+        }
+    }
+
+    /**
+     * @returns {json}{payload, dir_name, images_info, metadata}
+     */
+    async generateRequest(settings) {
+        try {
+            this.horde_id = null //reset request_id
+            this.requestStatus = await requestHorde(settings)
+            if (this.requestStatus?.message) {
+                await app.showAlert(this.requestStatus?.message)
+            }
+            this.horde_id = this.requestStatus.id
+            console.log(
+                'generateRequest this.requestStatus: ',
+                this.requestStatus
+            )
+
+            const images_info = await this.startCheckingProgress()
+            const result = await this.toGenerationFormat(images_info)
+            console.warn('generateRequest() images_info: ', images_info)
+            console.warn('generateRequest() result: ', result)
+
+            html_manip.updateProgressBarsHtml(0) // reset progress bar
+            return result
+        } catch (e) {
+            this.horde_id = null
+            console.warn(e)
+        }
+    }
+    async generate() {
+        //*) get the settings
+        this.horde_settings = await this.getSettings()
+        //*) send generateRequest() and trigger the progress bar update
+        this.isCanceled = false
+        const result = await this.generateRequest(this.horde_settings)
+
+        return result
+        //*) store the generation result in the currentGenerationResult
+
+        //*) return the generation currentGenerationResult
+    }
+
+    isValidGeneration() {
+        if (this.currentGenerationResult) {
+            return true // if true if valid, false otherwise
+        } else {
+            return false
+        }
+    }
+    preGenerate() {}
+    // async layerToBase64WebpToFile
+    //convert layer to .webp file
+    //read the .webp file as buffer data base64 .webp
+    async layerToBase64Webp(layer, document_name, image_name) {
+        const width = html_manip.getWidth()
+        const height = html_manip.getHeight()
+        const image_buffer = await psapi.newExportPng(
+            layer,
+            image_name,
+            width,
+            height
+        )
+
+        const base64_image = _arrayBufferToBase64(image_buffer) //convert the buffer to base64
+        //send the base64 to the server to save the file in the desired directory
+        // await sdapi.requestSavePng(base64_image, image_name)
+        await saveFileInSubFolder(base64_image, document_name, image_name)
+        return base64_image
+    }
+
+    async layerToBase64ToFile(layer, document_name, image_name) {
+        const width = html_manip.getWidth()
+        const height = html_manip.getHeight()
+        const image_buffer = await psapi.newExportPng(
+            layer,
+            image_name,
+            width,
+            height
+        )
+
+        const base64_image = _arrayBufferToBase64(image_buffer) //convert the buffer to base64
+        //send the base64 to the server to save the file in the desired directory
+        // await sdapi.requestSavePng(base64_image, image_name)
+        await saveFileInSubFolder(base64_image, document_name, image_name)
+        return base64_image
+    }
+
+    async toGenerationFormat(images_info) {
+        //convert the output of native horde generation to the values that generate() can use
+        try {
+            //images_info[0] = {path:path,base64:base64png}
+            // let last_images_paths = await silentImagesToLayersExe(images_info)
+            let last_images_paths = {}
+            for (const image_info of images_info) {
+                const path = image_info['path']
+                // const base64_image = image_info['base64']
+                const layer = image_info['layer']
+                const [document_name, image_name] = path.split('/')
+
+                // await saveFileInSubFolder(base64_image, document_name, image_name)
+                image_info['base64'] = await this.layerToBase64ToFile(
+                    layer,
+                    document_name,
+                    image_name
+                )
+
+                // delete the layer made by the webp image.
+                await layer_util.deleteLayers([layer])
+                // await layer.delete()
+
+                // const json_file_name = `${image_name.split('.')[0]}.json`
+                this.plugin_settings['auto_metadata'] =
+                    image_info?.auto_metadata
+
+                // g_generation_session.base64OutputImages[path] =
+                //     image_info['base64']
+                // await saveJsonFileInSubFolder(
+                //     this.plugin_settings,
+                //     document_name,
+                //     json_file_name
+                // ) //save the settings
+                // last_images_paths[path] = image_info['layer']
+                // images_info.push({
+                //     base64: i,
+                //     path: image_path,
+                //     auto_metadata: auto_metadata_json,
+                // })
+                // // console.log("metadata_json: ", metadata_json)
+            }
+
+            // if (g_generation_session.isFirstGeneration) {
+            //     //store them in the generation session for viewer manager to use
+            //     g_generation_session.image_paths_to_layers = last_images_paths
+            // } else {
+            //     g_generation_session.image_paths_to_layers = {
+            //         ...g_generation_session.image_paths_to_layers,
+            //         ...last_images_paths,
+            //     }
+            //     // g_number_generation_per_session++
+
+            // }
+            const dir_name = 'temp_dir_name'
+            return {
+                // payload: payload,
+                dir_name: dir_name,
+                images_info: images_info,
+                metadata: this.plugin_settings,
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    async toSession(images_info) {
+        try {
+            //images_info[0] = {path:path,base64:base64png}
+            // let last_images_paths = await silentImagesToLayersExe(images_info)
+            let last_images_paths = {}
+            for (const image_info of images_info) {
+                const path = image_info['path']
+                // const base64_image = image_info['base64']
+                const layer = image_info['layer']
+                const [document_name, image_name] = path.split('/')
+
+                // await saveFileInSubFolder(base64_image, document_name, image_name)
+                image_info['base64'] = await this.layerToBase64ToFile(
+                    layer,
+                    document_name,
+                    image_name
+                )
+                const json_file_name = `${image_name.split('.')[0]}.json`
+                this.plugin_settings['auto_metadata'] =
+                    image_info?.auto_metadata
+
+                g_generation_session.base64OutputImages[path] =
+                    image_info['base64']
+                await saveJsonFileInSubFolder(
+                    this.plugin_settings,
+                    document_name,
+                    json_file_name
+                ) //save the settings
+                last_images_paths[path] = image_info['layer']
+            }
+
+            if (g_generation_session.isFirstGeneration) {
+                //store them in the generation session for viewer manager to use
+                g_generation_session.image_paths_to_layers = last_images_paths
+            } else {
+                g_generation_session.image_paths_to_layers = {
+                    ...g_generation_session.image_paths_to_layers,
+                    ...last_images_paths,
+                }
+                // g_number_generation_per_session++
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    async interruptRequest(horde_id) {
+        try {
+            console.log('interruptRquest():')
+
+            const full_url = `https://stablehorde.net/api/v2/generate/status/${horde_id}`
+
+            console.log(full_url)
+
+            let response = await fetch(full_url, {
+                method: 'DELETE',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    // 'Client-Agent': '4c79ab19-8e6c-4054-83b3-773b7ce71ece',
+                    'Client-Agent': 'unknown:0:unknown',
+                },
+            })
+
+            let result = await response.json()
+            console.log('interruptReqquest result:', result)
+
+            return result
+        } catch (e) {
+            console.warn(e)
+            return
+        }
+    }
+    async interrupt() {
+        try {
+            html_manip.updateProgressBarsHtml(0)
+            // g_generation_session.request_status = Enum.requestStatus['']
+            this.last_horde_id = this.horde_id
+            this.horde_id = null //horde_id could be used startCheckingprogress() so we need to nullify it as soon as possible. TODO: refactor this dependency.
+            this.isCanceled = true
+            // this.interval_id = clearTimeout(this.interval_id)
+            await this.interruptRequest(this.last_horde_id)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    async postGeneration() {
+        toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
+    }
+    async processHordeResult() {
+        //*) get the result from the horde server
+        //*) save them locally to output directory
+        //*) import them into the canvas
+        //*) resize and move the layers to fit the selection
+        //*) return the results to be stored and processed by the g_generation_session
+        try {
+            if (this.isProcessHordeResultCalled) {
+                return
+            }
+            this.isProcessHordeResultCalled = true
+            console.log('horde request is done')
+            // g_b_request_result = true
+            const temp_id = this.horde_id //this.horde_id will reset
+            // cancelRequestClientSide()
+            g_horde_generation_result = await requestHordeStatus(temp_id)
+
+            const generations = g_horde_generation_result.generations
+            const writeable_entry = await getCurrentDocFolder()
+            const images_info = [] //{path:image_path,base64:}
+            for (const image_horde_container of generations) {
+                try {
+                    const url = image_horde_container.img
+                    const image_file_name = general.newOutputImageName('webp')
+
+                    const image_layer = await downloadItExe(
+                        url,
+                        writeable_entry,
+                        image_file_name
+                    ) //download the image from url, it works even with .webp format
+                    const image_png_file_name =
+                        general.convertImageNameToPng(image_file_name)
+
+                    const uuid = await getUniqueDocumentId()
+                    const image_path = `${uuid}/${image_png_file_name}` //this is the png path
+                    images_info.push({
+                        path: image_path,
+                        base64: dummy.getDummyBase64(), //TODO:change this to the base64_png
+                        layer: image_layer,
+                    })
+                    await psapi.layerToSelection(
+                        g_generation_session.selectionInfo
+                    ) //TODO: create a safe layerToSelection function
+                } catch (e) {
+                    console.warn(e)
+                }
+            }
+            this.isProcessHordeResultCalled = false //reset for next generation
+            return images_info
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    updateHordeProgressBar(check_horde_status) {
+        //update the progress bar proceduer
+        console.log('this.maxWaitTime: ', this.maxWaitTime)
+        console.log(
+            "check_horde_status['wait_time']: ",
+            check_horde_status['wait_time']
+        )
+        console.log(
+            "check_horde_status['waiting']: ",
+            check_horde_status['waiting']
+        )
+
+        this.maxWaitTime = Math.max(
+            check_horde_status['wait_time'],
+            this.maxWaitTime
+        ) // return the max time value, so we could use to calculate the complection percentage
+        const delta_time = this.maxWaitTime - check_horde_status['wait_time']
+
+        if (isNaN(this.maxWaitTime) || parseInt(this.maxWaitTime) === 0) {
+            this.maxWaitTime = 0 // reset to zero
+        } else {
+            console.log('delta_time:', delta_time)
+            console.log('this.maxWaitTime:', this.maxWaitTime)
+
+            const completion_percentage = (delta_time / this.maxWaitTime) * 100
+            console.log('completion_percentage:', completion_percentage)
+
+            html_manip.updateProgressBarsHtml(completion_percentage)
+        }
+    }
+    async startCheckingProgress() {
+        console.log('startCheckingProgress is called')
+        return await new Promise((resolve, reject) => {
+            if (this.horde_id && !this.isCanceled) {
+                this.interval_id = setTimeout(async () => {
+                    try {
+                        console.warn(
+                            'startCheckingProgress(): horde_id and isCanceled',
+                            this.horde_id,
+                            this.isCanceled
+                        )
+                        //check the request status
+                        const check_json = await requestHordeCheck(
+                            this.horde_id
+                        )
+
+                        this.updateHordeProgressBar(check_json)
+
+                        if (check_json['done']) {
+                            // this.interval_id = clearTimeout(this.interval_id)
+
+                            const images_info = await this.processHordeResult()
+                            if (this.horde_id) {
+                                this.last_horde_id = this.horde_id
+                                this.horde_id = null
+                            }
+                            return resolve(images_info)
+                        } else {
+                            //the request is not done and the user hasn't canceled it
+                            console.warn(
+                                'startCheckingProgress(): reqursive startCheckingProgress call',
+                                this.horde_id,
+                                this.isCanceled
+                            )
+                            const horde_result =
+                                await this.startCheckingProgress() // start another check
+                            return resolve(horde_result) // return the result of the new check
+                        }
+                    } catch (e) {
+                        console.warn(e)
+                        const result = await this.startCheckingProgress()
+                        return resolve(result)
+                    }
+                }, 3000)
+            } else {
+                console.warn(
+                    'startCheckingProgress: else block',
+                    this.horde_id,
+                    this.isCanceled
+                )
+                return resolve()
+            }
+        })
+    }
+}
+const webui_to_horde_samplers = {
+    'Euler a': 'k_euler_a',
+    Euler: 'k_euler',
+    LMS: 'k_lms',
+    Heun: 'k_heun',
+    DPM2: 'k_dpm_2',
+    'DPM2 a': 'k_dpm_2_a',
+    'DPM++ 2S a': 'k_dpmpp_2s_a',
+    'DPM++ 2M': 'k_dpmpp_2m',
+    'DPM++ SDE': 'k_dpmpp_sde',
+    'DPM fast': 'k_dpm_fast',
+    'DPM adaptive': 'k_dpm_adaptive',
+    'LMS Karras': 'k_lms',
+    'DPM2 Karras': 'k_dpm_2',
+    'DPM2 a Karras': 'k_dpm_2_a',
+    'DPM++ 2S a Karras': 'k_dpmpp_2s_a',
+    'DPM++ 2M Karras': 'k_dpmpp_2m',
+    'DPM++ SDE Karras': 'k_dpmpp_sde',
+    DDIM: 'ddim',
+    PLMS: 'plms',
+}
+
+//get workers
+//select a worker
+//send a request => requestHorde(horde_settings)
+//check for progress => requestHordeCheck(request_id)
+//when progress is full, request the result => requestHordeStatus(request_id)
+
+async function mapPluginSettingsToHorde(plugin_settings) {
+    const { getModelHorde } = require('../sd_scripts/horde')
+    const ps = plugin_settings // for shortness
+    const sampler = webui_to_horde_samplers[ps['sampler_index']]
+    const model = getModelHorde()
+    let horde_prompt
+    if (ps['negative_prompt'].length > 0) {
+        horde_prompt = `${ps['prompt']} ### ${ps['negative_prompt']}`
+    } else {
+        horde_prompt = ps['prompt'] //no negative prompt
+    }
+    const extra_payload = {}
+    if (ps['mode'] === 'img2img') {
+        // payload['source_image'] = ps['init_images']
+        // let current_doc_entry =await getCurrentDocFolder()
+        // let webp_file = await current_doc_entry.getEntry('temp.webp')
+        // let base64_webp =    await io.IO.base64WebpFromFile(webp_file)
+        // payload['source_image'] = io.IO.base64WebpFromFile()
+        // console.log('base64_webp:', base64_webp)
+
+        // const dummy_str = getDummyWebpBase64()
+        // if (base64_webp === dummy_str) {
+        //     console.warn('the same base64')
+        // } else {
+        //     console.warn('different base64')
+        // }
+        // payload['source_image'] = dummy_str
+
+        // payload['source_image'] = base64.b64encode(buffer.getvalue()).decode() //does it need to be webp?
+
+        const init_image_base64_webp = await io.IO.base64PngToBase64Webp(
+            ps['init_images'][0]
+        )
+        extra_payload['source_image'] = init_image_base64_webp
+        extra_payload['source_processing'] = 'img2img'
+    } else if (ps['mode'] === 'inpaint' || ps['mode'] === 'outpaint') {
+        const init_image_base64_webp = await io.IO.base64PngToBase64Webp(
+            ps['init_images'][0]
+        )
+        const mask_base64_webp = await io.IO.base64PngToBase64Webp(ps['mask'])
+        extra_payload['source_processing'] = 'inpainting'
+        extra_payload['source_image'] = init_image_base64_webp
+        extra_payload['source_mask'] = mask_base64_webp
+        // payload["source_mask"] = base64.b64encode(buffer.getvalue()).decode()//does it need to be webp?
+    }
+
+    let seed = ps['seed']
+    if (parseInt(ps['seed']) === -1) {
+        const random_seed = Math.floor(Math.random() * 100000000000 + 1) // Date.now() doesn't have enough resolution to avoid duplicate
+        seed = random_seed.toString()
+    }
+    const width = general.nearestMultiple(ps['width'], 64)
+    const height = general.nearestMultiple(ps['height'], 64)
+    const nsfw = html_manip.getUseNsfw()
+    let horde_payload = {
+        prompt: horde_prompt,
+        params: {
+            sampler_name: sampler,
+            toggles: [1, 4],
+            cfg_scale: ps['cfg_scale'],
+            denoising_strength: ps['denoising_strength'],
+            seed: seed,
+            height: height,
+            width: width,
+            seed_variation: 1,
+            post_processing: ['GFPGAN'],
+            karras: false,
+            tiling: false,
+            steps: parseInt(ps['steps']),
+            n: 1,
+        },
+        nsfw: nsfw,
+        trusted_workers: true,
+        censor_nsfw: false,
+        // workers: ['4c79ab19-8e6c-4054-83b3-773b7ce71ece'],
+        // workers: workers_ids,
+        // models: ['stable_diffusion'],
+        models: [model],
+        // source_image: 'string',
+        // source_processing: 'img2img',
+        // source_mask: 'string',
+        ...extra_payload,
+        r2: true,
+        shared: false,
+    }
+    return horde_payload
+}
+
+function getWorkerID(workers_json) {
+    let workers_ids = []
+    for (worker of workers_json) {
+        workers_ids.push(worker?.id)
+    }
+    console.log('workers_ids:', workers_ids)
+
+    return workers_ids
+}
+async function getWorkers() {
+    const full_url = 'https://stablehorde.net/api/v2/workers'
+    // const full_url = 'https://stablehorde.net/api/v2/generate/sync'
+    console.log(full_url)
+
+    let request = await fetch(full_url, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json',
+        },
+    })
+
+    let workers = await request.json()
+    // const workers_ids = getWorkerID(workers)
+    console.log('requestHorde workers:', workers)
+    return workers
+}
+async function requestHorde(payload) {
+    // const workers = await getWorkers()
+
+    // const workers_ids = getWorkerID(workers)
+    // const settings = await getSettings()
+    // payload = mapPluginSettingsToHorde(settings)
+    // payload['workers'] = workers_ids
+    // payload = {
+    //     prompt: 'string',
+    //     params: {
+    //         sampler_name: 'k_lms',
+    //         toggles: [1, 4],
+    //         cfg_scale: 5,
+    //         denoising_strength: 0.75,
+    //         // seed: 'string',
+    //         height: 512,
+    //         width: 512,
+    //         seed_variation: 1,
+    //         post_processing: ['GFPGAN'],
+    //         karras: false,
+    //         tiling: false,
+    //         steps: 5,
+    //         n: 1,
+    //     },
+    //     nsfw: false,
+    //     trusted_workers: true,
+    //     censor_nsfw: false,
+    //     // workers: ['4c79ab19-8e6c-4054-83b3-773b7ce71ece'],
+    //     workers: workers_ids,
+    //     models: ['stable_diffusion'],
+    //     // source_image: 'string',
+    //     // source_processing: 'img2img',
+    //     // source_mask: 'string',
+    //     r2: true,
+    //     shared: false,
+    // }
+    try {
+        console.log('requestHorde():')
+
+        const full_url = 'https://stablehorde.net/api/v2/generate/async'
+        // const full_url = 'https://stablehorde.net/api/v2/generate/sync'
+        console.log(full_url)
+
+        const horde_api_key = html_manip.getHordeApiKey()
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                apikey: horde_api_key,
+
+                'Client-Agent': 'unknown:0:unknown',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        let json = await request.json()
+        console.log('requestHorde json:', json)
+
+        return json
+    } catch (e) {
+        console.warn(e)
+        return {}
+    }
+}
+async function requestHordeCheck(id) {
+    try {
+        console.log('requestHordeCheck():')
+        const base_url = 'https://stablehorde.net/api/v2/generate/check'
+
+        const full_url = `${base_url}/${id}`
+        // const full_url = 'https://stablehorde.net/api/v2/generate/sync'
+        console.log(full_url)
+        const payload = {}
+        let request = await fetch(full_url, {
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                // 'Client-Agent': '4c79ab19-8e6c-4054-83b3-773b7ce71ece',
+                'Client-Agent': 'unknown:0:unknown',
+            },
+        })
+
+        let json = await request.json()
+        console.log('requestHordeCheck json:', json)
+
+        return json
+    } catch (e) {
+        console.warn(e)
+        return {}
+    }
+}
+
+async function requestHordeStatus(id) {
+    try {
+        console.log('requestHordeStatus():')
+        const base_url = 'https://stablehorde.net/api/v2/generate/status'
+
+        const full_url = `${base_url}/${id}`
+        // const full_url = 'https://stablehorde.net/api/v2/generate/sync'
+        console.log(full_url)
+        const payload = {}
+        let request = await fetch(full_url, {
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                // 'Client-Agent': '4c79ab19-8e6c-4054-83b3-773b7ce71ece',
+                'Client-Agent': 'unknown:0:unknown',
+            },
+        })
+
+        let json = await request.json()
+        console.log('requestHordeStatus json:', json)
+
+        return json
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+let g_horde_generation_result
+let g_b_request_result = false
+function cancelRequestClientSide() {
+    this.interval_id = clearTimeout(this.interval_id)
+    // g_id = null
+    g_b_request_result = false
+}
+
+module.exports = {
+    hordeGenerator,
+    HordeSettings,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/metadata_to_json.js

@@ -0,0 +1,76 @@
+// import serverHelper
+// # metadata_str = 'cute cat\nSteps: 20, Sampler: Euler a, CFG scale: 7.0, Seed: 2253354038, Size: 512x512, Model hash: 3e16efc8, Seed resize from: -1x-1, Denoising strength: 0, Conditional mask weight: 1.0'
+// def convertMetadataToJson(metadata_str):
+//     print(metadata_str)
+//     last_new_line_index = metadata_str.rindex('\n')
+//     prompt = metadata_str[:last_new_line_index]
+//     other_settings = metadata_str[last_new_line_index+1:]
+
+//     print("prompt:", prompt)
+//     print("other_settings:", other_settings)
+//     sub_settings = other_settings.split(",")
+//     print("sub_settings: ",sub_settings)
+
+//     settings_dict = {}
+//     settings_dict['prompt'] = prompt
+
+//     for setting in sub_settings:
+//         [key,value]= setting.split(":")
+//         key =  key.lstrip(' ')
+//         value =  value.lstrip(' ')
+//         settings_dict[key] = value
+//     import json
+//     settings_json = json.dumps(settings_dict)
+//     print("settings_dict: ",settings_dict)
+//     print("settings_json ",settings_json)
+//     return settings_json
+
+// // function getMetadataFromPng(image_path){
+
+// //     //  image_path = "./output/5c42fd2a-6708-45e2-b282-2e9f3894368e/output- 1672476035.4888158.png"
+// //     // image_path = "C:/Users/abdul/Desktop/auto-photoshop/Auto-Photoshop-StableDiffusion-Plugin/server/python_server/output/5c42fd2a-6708-45e2-b282-2e9f3894368e/output- 1672476035.4888158.png"
+// //     im = Image.open(image_path)
+// //     # im.load()  # Needed only for .png EXIF data (see citation above)
+// //     # print(im.info['parameters'])
+// //     metadata_string = im.info['parameters']
+// //     metadata_json_string = convertMetadataToJson(metadata_string)
+// //     metadata_dict = json.loads(metadata_json_string)
+// //     print("metadata_dict: ", metadata_dict)
+// //     # print(im.info['meta_to_read'])
+// //     return metadata_dict
+
+// }
+// def createMetadataJsonFileIfNotExist(image_path):
+
+//     # image_name = os.path.splitext(image_path)
+//     image_name = Path(image_path).stem
+//     # parent_dir_path = Path(image_path)
+//     # parent_dir_path = image_path.split(image_name)[0]
+//     # os.path.join()
+//     head = os.path.split(image_path)[0]
+//     json_file_tail = f'{image_name}.json'
+//     json_full_path = os.path.join(head,json_file_tail)
+//     print("image_name: ",image_name)
+//     print("json_full_path: ",json_full_path)
+//     isExist = os.path.exists(json_full_path)
+//     if(isExist):
+//         #read metadata from json
+//         metadata_dict = serverHelper.readJson(json_full_path)
+
+//     else:
+//         #read metadata from image
+//         #save the metadata to a json file
+//         metadata_dict = getMetadataFromPng(image_path)
+//         serverHelper.writeJson(json_full_path,metadata_dict)
+//     return metadata_dict
+
+// if __name__ == "__main__":
+//     image_path = "C:/Users/abdul/Desktop/auto-photoshop/Auto-Photoshop-StableDiffusion-Plugin/server/python_server/output/5c42fd2a-6708-45e2-b282-2e9f3894368e/output- 1672476035.4888158.png"
+//     # getMetadataFromPng(image_path)
+//     createMetadataJsonFileIfNotExist(image_path)
+
+// module.exports = {
+//     convertMetadataToJson,
+//     getMetadataFromPng,
+//     createMetadataJsonFileIfNotExist,
+// }

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/options.js

@@ -0,0 +1,37 @@
+class SdOptions {
+    constructor() {
+        // this.status = false // true if we have a valid copy of sd options, false otherwise
+        this.options //store sd options
+    }
+
+    async getOptions() {
+        try {
+            // if (this.status) {
+            //   return this.options
+            // } else {
+            //   this.options = await sdapi.requestGetOptions()
+            //   if (this.options) {
+            //     this.status = true
+            //   }
+            // }
+            this.options = await sdapi.requestGetOptions()
+            return this.options
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    getCurrentModel() {
+        const current_model = this.options?.sd_model_checkpoint
+        return current_model
+    }
+    getInpaintingMaskWeight() {
+        const inpainting_mask_weight = this.options?.inpainting_mask_weight
+        return inpainting_mask_weight
+    }
+}
+// const sd_options = new SdOptions()
+// sd_options.option?.sd_model_checkpoint
+
+module.exports = {
+    SdOptions,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/prompt_shortcut.js

@@ -0,0 +1,42 @@
+function find_words_inside_braces(string) {
+    const re = /\{(.*?)\}/g
+    let keywords = string.match(re)
+    // console.log('keywords: ', keywords)
+    if (!keywords) {
+        //avoid null keywords
+        keywords = []
+    }
+    return keywords
+}
+
+function replaceShortcut(text, prompt_shortcut_json) {
+    const original_keywords = find_words_inside_braces(text)
+    const strip_keywords = original_keywords.map((s) => {
+        let content = s.slice(1, -1) //remove '{' and  '}'
+        content = content.trim() //remove any space in the beginning  and end of content
+        return content
+    })
+
+    // original_substrings = list(map(lambda s: '{'+s+'}',raw_keywords))
+
+    // print("strip_keywords: ", strip_keywords)
+    // print("original_substrings: ",original_substrings)
+    // # print ("text:",text)
+
+    let i = 0
+    for (const word of strip_keywords) {
+        // # word = word.strip()
+        //     print("word: ",word)
+        if (word.length > 0 && prompt_shortcut_json.hasOwnProperty(word)) {
+            const prompt = prompt_shortcut_json[word]
+            console.log('prompt: ', prompt)
+            text = text.replace(original_keywords[i], prompt)
+        }
+    }
+    console.log('final text: ', text)
+    return text
+}
+module.exports = {
+    find_words_inside_braces,
+    replaceShortcut,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/sdapi/python_replacement.js

@@ -0,0 +1,594 @@
+//how to get environment variable in javascript
+const settings_tab = require('../tab/settings')
+const { getPromptShortcut } = require('../html_manip')
+const general = require('../general')
+// function newOutputImageName(format = 'png') {
+//     const random_id = Math.floor(Math.random() * 100000000000 + 1) // Date.now() doesn't have enough resolution to avoid duplicate
+//     const image_name = `output- ${Date.now()}-${random_id}.${format}`
+//     console.log('generated image name:', image_name)
+//     return image_name
+// }
+
+function convertMetadataToJson(metadata_str) {
+    try {
+        console.log('metadata_str:', metadata_str)
+        const last_new_line_index = metadata_str.lastIndexOf('\n')
+
+        const prompt = metadata_str.slice(0, last_new_line_index)
+        const other_settings = metadata_str.slice(last_new_line_index + 1, -1)
+
+        console.log('prompt:', prompt)
+        console.log('other_settings:', other_settings)
+        const sub_settings = other_settings.split(',')
+        console.log('sub_settings: ', sub_settings)
+
+        const settings_json = {}
+        settings_json['prompt'] = prompt
+
+        for (const setting of sub_settings) {
+            let [key, value] = setting.split(':').map((s) => s.trimLeft())
+            // key =  key.lstrip(' ')
+            // value =  value.lstrip(' ')
+            settings_json[key] = value
+            // import json
+            // settings_json = json.dumps(settings_dict)
+            // print("settings_dict: ",settings_dict)
+            // print("settings_json ",settings_json)
+        }
+
+        return settings_json
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function getAuto1111Metadata(base64_image) {
+    try {
+        console.log('getAuto1111Metadata: ')
+
+        const full_url = `${g_sd_url}/sdapi/v1/png-info`
+
+        const payload = {
+            image: 'data:image/png;base64,' + base64_image,
+        }
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        })
+
+        let json = await request.json()
+        console.log("json['info']:", json['info'])
+
+        console.log('getAuto1111Metadata json:', json)
+
+        return json['info']
+    } catch (e) {
+        console.warn(e)
+    }
+}
+async function convertToStandardResponse(settings, images, uuid) {
+    try {
+        //standardized the response between modes and backends
+        const uniqueDocumentId = uuid // maybe use the generation_session uuid
+
+        const image_paths = []
+
+        const metadata = []
+        const images_info = []
+
+        for (i of images) {
+            let auto_metadata_json = {}
+            try {
+                const auto_metadata_str = await getAuto1111Metadata(i)
+                auto_metadata_json = convertMetadataToJson(auto_metadata_str)
+                console.warn(
+                    'auto_metadata_json.Seed:',
+                    auto_metadata_json?.Seed
+                )
+            } catch (e) {
+                console.warn(e)
+                auto_metadata_json = {} // set the metadata to empty if there an error while getting the metadata
+            }
+
+            const image_name = general.newOutputImageName()
+            const image_path = `${uniqueDocumentId}/${image_name}`
+
+            images_info.push({
+                base64: i,
+                path: image_path,
+                auto_metadata: auto_metadata_json,
+            })
+            // console.log("metadata_json: ", metadata_json)
+        }
+        const dir_name = 'temp_dir_name'
+        return {
+            payload: settings,
+            dir_name: dir_name,
+            images_info: images_info,
+            metadata: metadata,
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function replacePromptsWithShortcuts(
+    prompt,
+    negative_prompt,
+    prompt_shortcut_dic
+) {
+    //     const prompt_shortcut_dict = prompt_shortcut.load()
+    //     prompt_shortcut_dict.update(payload["prompt_shortcut_ui_dict"])
+    new_prompt = prompt_shortcut.replaceShortcut(prompt, prompt_shortcut_dic)
+    // # edit negative prompt, replaceShortcut(negative_prompt)
+    new_negative_prompt = prompt_shortcut.replaceShortcut(
+        negative_prompt,
+        prompt_shortcut_dic
+    )
+    return [new_prompt, new_negative_prompt]
+}
+async function txt2ImgRequest(payload) {
+    console.log('payload:', payload)
+
+    if (payload['use_prompt_shortcut']) {
+        const [new_prompt, new_negative_prompt] = replacePromptsWithShortcuts(
+            payload['prompt'],
+            payload['negative_prompt'],
+            payload['prompt_shortcut_ui_dict']
+        )
+        payload['prompt'] = new_prompt
+        payload['negative_prompt'] = new_negative_prompt
+    }
+
+    const endpoint = 'sdapi/v1/txt2img'
+    try {
+        console.log('txt2ImgRequest(): about to send a fetch request')
+
+        const full_url = `${g_sd_url}/${endpoint}`
+        console.log(full_url)
+
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+            // "body": payload
+        })
+
+        let r = await request.json()
+        console.log('txt2ImgRequest json:', r)
+
+        const uniqueDocumentId = payload['uniqueDocumentId']
+        // dir_fullpath,dirName = serverHelper.getUniqueDocumentDirPathName(uniqueDocumentId)
+        // serverHelper.createFolder(dir_fullpath)
+        const image_paths = []
+
+        const metadata = []
+        const images_info = []
+
+        for (i of r['images']) {
+            let auto_metadata_json = {}
+            try {
+                const auto_metadata_str = await getAuto1111Metadata(i)
+                auto_metadata_json = convertMetadataToJson(auto_metadata_str)
+                console.warn(
+                    'auto_metadata_json.Seed:',
+                    auto_metadata_json?.Seed
+                )
+            } catch (e) {
+                console.warn(e)
+                auto_metadata_json = {} // set the metadata to empty if there an error while getting the metadata
+            }
+
+            // response2 = await client.post(url=f'{sd_url}/sdapi/v1/png-info', json=png_payload)
+            // pnginfo = PngImagePlugin.PngInfo()
+            // pnginfo.add_text("parameters", response2.json().get("info"))
+
+            const image_name = general.newOutputImageName()
+            const image_path = `${uniqueDocumentId}/${image_name}`
+
+            // image_path = f'output/{dirName}/{image_name}'
+            // image_paths.append(image_path)
+            // image.save(f'./{image_path}', pnginfo=pnginfo)
+
+            // metadata_info = response2.json().get("info")
+            // metadata_json = metadata_to_json.convertMetadataToJson(metadata_info)
+            // metadata.append(metadata_json)
+
+            images_info.push({
+                base64: i,
+                path: image_path,
+                auto_metadata: auto_metadata_json,
+            })
+            // console.log("metadata_json: ", metadata_json)
+        }
+        const dir_name = 'temp_dir_name'
+        return {
+            payload: payload,
+            dir_name: dir_name,
+            images_info: images_info,
+            metadata: metadata,
+        }
+    } catch (e) {
+        console.warn(e)
+        return {}
+    }
+
+    // const request_path = '/sdapi/v1/txt2img'
+}
+function getExtensionUrl() {
+    const extension_type = settings_tab.getExtensionType()
+    let extension_url
+    if (extension_type === 'auto1111_extension') {
+        extension_url = `${g_sd_url}/sdapi/auto-photoshop-sd`
+    } else if (extension_type === 'proxy_server') {
+        extension_url = 'http://127.0.0.1:8000'
+    } else {
+        //none
+        extension_url = ''
+    }
+    return extension_url
+}
+
+async function openUrlRequest(url) {
+    try {
+        const payload = {
+            url: url,
+        }
+        // const full_url = 'http://127.0.0.1:8000/mask/expansion/'
+        const extension_url = getExtensionUrl()
+        const full_url = `${extension_url}/open/url/`
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+            // "body": payload
+        })
+
+        let r = await request.json()
+
+        console.log('openUrlRequest json:', r)
+        return r['url']
+    } catch (e) {
+        console.warn(e)
+    }
+}
+async function maskExpansionRequest(original_mask, mask_expansion_value) {
+    // const endpoint = 'sdapi/v1/img2img'
+    // const full_url = `${g_sd_url}/${endpoint}`
+
+    try {
+        const payload = {
+            mask: original_mask,
+            mask_expansion: mask_expansion_value,
+        }
+        // const full_url = 'http://127.0.0.1:8000/mask/expansion/'
+        const extension_url = getExtensionUrl()
+        const full_url = `${extension_url}/mask/expansion/`
+        let request = await fetch(full_url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+            // "body": payload
+        })
+
+        let r = await request.json()
+
+        console.log('maskExpansionRequest json:', r)
+        return r['mask']
+    } catch (e) {
+        console.warn(e)
+    }
+}
+async function img2ImgRequest(sd_url, payload) {
+    console.log('payload:', payload)
+
+    if (payload['use_prompt_shortcut']) {
+        const [new_prompt, new_negative_prompt] = replacePromptsWithShortcuts(
+            payload['prompt'],
+            payload['negative_prompt'],
+            payload['prompt_shortcut_ui_dict']
+        )
+        payload['prompt'] = new_prompt
+        payload['negative_prompt'] = new_negative_prompt
+    }
+    // init_img_dir = "./init_images"
+    // init_img_name = payload['init_image_name']
+    // init_img = Image.open(f"{init_img_dir}/{init_img_name}")
+    // init_img_str = img_2_b64(init_img)
+    // payload['init_images'] = [init_img_str]
+
+    // init_img_mask_name = payload.get('init_image_mask_name',"")
+
+    // #only if image exist then try to open it
+
+    // if(len(init_img_mask_name) > 0):
+    // init_img_mask = Image.open(f"{init_img_dir}/{init_img_mask_name}")
+
+    // if (payload['use_sharp_mask'] === false && payload['mask']) {
+    //     //only if mask is available and sharp_mask is off
+    //     // use blurry and expanded mask
+    //     const iterations = payload['mask_expansion']
+    //     const mask = await maskExpansionRequest(payload['mask'], iterations)
+    //     if (mask) {
+    //         payload['mask'] = mask
+    //     }
+    // }
+
+    // print(type(init_img_str))
+    // #request the images to be generated
+
+    const endpoint = 'sdapi/v1/img2img'
+
+    const full_url = `${sd_url}/${endpoint}`
+    let request = await fetch(full_url, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        // "body": payload
+    })
+
+    let r = await request.json()
+
+    console.log('img2ImgRequest json:', r)
+
+    const uniqueDocumentId = payload['uniqueDocumentId']
+    // dir_fullpath,dirName = serverHelper.getUniqueDocumentDirPathName(uniqueDocumentId)
+    // serverHelper.createFolder(dir_fullpath)
+    const image_paths = []
+    const metadata = []
+    const images_info = []
+
+    for (i of r['images']) {
+        // image = Image.open(io.BytesIO(base64.b64decode(i.split(",",1)[0])))
+        let auto_metadata_json = {}
+        try {
+            const auto_metadata_str = await getAuto1111Metadata(i)
+            auto_metadata_json = convertMetadataToJson(auto_metadata_str)
+        } catch (e) {
+            console.warn(e)
+            auto_metadata_json = {} // set the metadata to empty if there an error while getting the metadata
+        }
+        // response2 = await client.post(url=f'{sd_url}/sdapi/v1/png-info', json=png_payload, timeout=None)
+        // pnginfo = PngImagePlugin.PngInfo()
+        // pnginfo.add_text("parameters", response2.json().get("info"))
+        // image_name = f'output- {time.time()}.png'
+        // image_path = f'output/{dirName}/{image_name}'
+        // image_paths.append(image_path)
+        // image.save(f'./{image_path}', pnginfo=pnginfo)
+
+        // metadata_info = response2.json().get("info")
+        // metadata_json = metadata_to_json.convertMetadataToJson(metadata_info)
+        // metadata.append(metadata_json)
+        const image_name = general.newOutputImageName()
+        const image_path = `${uniqueDocumentId}/${image_name}`
+
+        images_info.push({
+            base64: i,
+            path: image_path,
+            auto_metadata: auto_metadata_json,
+        })
+        // print("metadata_json: ", metadata_json)
+    }
+    const dir_name = 'temp_dir_name'
+    // return [dirName, images_info, metadata]
+    return {
+        payload: payload,
+        dir_name: dir_name,
+        images_info: images_info,
+        metadata: metadata,
+    }
+}
+
+async function getOutputImagesEntries(doc_entry) {
+    let entries = await doc_entry.getEntries()
+    const output_images_entries = entries.filter(
+        (e) => e.isFile && e.name.toLowerCase().includes('.png') // must be a file and has the of the type .png
+    )
+    console.log('output_images_entries: ', output_images_entries)
+    // .forEach((e) => console.log(e.name))
+    return output_images_entries
+}
+
+async function getMetaDataForOutputEntry(doc_entry, output_entry) {
+    const json_file_name = `${output_entry.name.split('.')[0]}.json`
+
+    try {
+        const json_entry = await doc_entry.getEntry(json_file_name)
+        if (json_entry) {
+            // await json_entry.read()
+
+            const json = JSON.parse(
+                await json_entry.read({
+                    format: storage.formats.utf8,
+                })
+            )
+            return json
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+    return {}
+}
+async function loadHistory(payload) {
+    //  {'image_paths','metadata_setting'}
+    const history = {}
+
+    // const uniqueDocumentId = payload['uniqueDocumentId']
+    // const uniqueDocumentId = await getUniqueDocumentId()
+
+    const uuid = await getUniqueDocumentId()
+    const doc_entry = await getDocFolder(uuid)
+    const output_images_entries = await getOutputImagesEntries(doc_entry)
+    history['image_paths'] = []
+    history['metadata_jsons'] = []
+    history['base64_images'] = []
+    for (const output_entry of output_images_entries) {
+        history['image_paths'].push(output_entry.name)
+        const metadata_json = await getMetaDataForOutputEntry(
+            doc_entry,
+            output_entry
+        )
+        history['metadata_jsons'].push(metadata_json)
+
+        const arrayBuffer = await output_entry.read({ format: formats.binary })
+        const base64_image = _arrayBufferToBase64(arrayBuffer) //convert the buffer to base64
+
+        // const base64 =
+        history['base64_images'].push(base64_image)
+    }
+
+    //     image_paths = glob.glob(f'./output/{uniqueDocumentId}/*.png')
+    //     settings_paths = glob.glob(f'./output/{uniqueDocumentId}/*.json')#note: why is we are not using settings_paths?
+    //     print("loadHistory: image_paths:", image_paths)
+
+    //     history['image_paths'] = image_paths
+    //     history['metadata_jsons'] = []
+    //     history['base64_images'] = []
+    //     for image_path in image_paths:
+    //         print("image_path: ", image_path)
+    //         metadata_dict = metadata_to_json.createMetadataJsonFileIfNotExist(image_path)
+    //         history['metadata_jsons'].append(metadata_dict)
+
+    //         img = Image.open(image_path)
+    //         base64_image = img_2_b64(img)
+    //         history['base64_images'].append(base64_image)
+
+    // except:
+
+    //     print(f'{request}')
+
+    // #reverse the order so that newer generated images path will be shown first
+
+    // history['image_paths'].reverse()
+    // history['metadata_jsons'].reverse()
+    // history['base64_images'].reverse()
+    return {
+        image_paths: history['image_paths'],
+        metadata_jsons: history['metadata_jsons'],
+        base64_images: history['base64_images'],
+    }
+}
+
+async function savePromptShortcut(json, file_name) {
+    console.warn(
+        "savePromptShortcut() is deprecated, use it's IO class instead "
+    )
+    try {
+        const json_file_name = file_name
+
+        const folder = await storage.localFileSystem.getDataFolder()
+
+        const file = await folder.createFile(json_file_name, {
+            type: storage.types.file,
+            overwrite: true,
+        })
+
+        const JSONInPrettyFormat = JSON.stringify(json, undefined, 4)
+        await file.write(JSONInPrettyFormat, {
+            format: storage.formats.utf8,
+            append: false,
+        })
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function loadPromptShortcut(file_name) {
+    const json_file_name = file_name
+
+    const folder = await storage.localFileSystem.getDataFolder()
+
+    try {
+        const json_entry = await folder.getEntry(json_file_name)
+        if (json_entry) {
+            // await json_entry.read()
+
+            const json = JSON.parse(
+                await json_entry.read({
+                    format: storage.formats.utf8,
+                })
+            )
+            return json
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function extraSingleImageRequest(sd_url, payload) {
+    console.log('extraSingleImageRequest payload:', payload)
+
+    const endpoint = 'sdapi/v1/extra-single-image'
+
+    const full_url = `${sd_url}/${endpoint}`
+    let request = await fetch(full_url, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        // "body": payload
+    })
+
+    let r = await request.json()
+
+    const images_info = []
+
+    const image = r['image']
+
+    let auto_metadata_json = {}
+
+    const uniqueDocumentId = payload['uniqueDocumentId']
+    const image_name = general.newOutputImageName()
+    const image_path = `${uniqueDocumentId}/${image_name}`
+
+    images_info.push({
+        base64: image,
+        path: image_path,
+        auto_metadata: auto_metadata_json,
+    })
+
+    console.log('extraSingleImageRequest response json:', r)
+
+    const dir_name = 'temp_dir_name'
+    const metadata = []
+
+    return {
+        payload: payload,
+        dir_name: dir_name,
+        images_info: images_info,
+        metadata: metadata,
+    }
+}
+
+module.exports = {
+    txt2ImgRequest,
+    img2ImgRequest,
+    loadHistory,
+    maskExpansionRequest,
+    getExtensionUrl,
+    savePromptShortcut,
+    loadPromptShortcut,
+
+    convertMetadataToJson,
+    openUrlRequest,
+    replacePromptsWithShortcuts,
+    extraSingleImageRequest,
+    convertToStandardResponse,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/session.js

@@ -0,0 +1,270 @@
+const { cleanLayers } = require('../psapi')
+const psapi = require('../psapi')
+const io = require('./io')
+const Enum = require('../enum')
+const { ViewerManager } = require('../viewer')
+const { base64ToBase64Url } = require('./general')
+const html_manip = require('./html_manip')
+const layer_util = require('./layer')
+const SessionState = {
+    Active: 'active',
+    Inactive: 'inactive',
+}
+const GarbageCollectionState = {
+    Accept: 'accept', // accept all generated images
+    Discard: 'discard', //discard all generated images
+    DiscardSelected: 'discard_selected',
+    AcceptSelected: 'accept_selected', //accept_selected only chosen images
+}
+
+class GenerationSession {
+    constructor() {
+        //this should be unique session id and it also should act as the total number of sessions been created in the project
+        this.id = 0
+        this.state = SessionState['Inactive']
+        this.mode = 'txt2img'
+        this.selectionInfo = null
+        this.isFirstGeneration = true // only before the first generation is requested should this be true
+        this.outputGroup
+        this.prevOutputGroup
+        this.isLoadingActive = false
+        this.base64OutputImages = {} //image_id/path => base64_image
+        this.base64initImages = {} //init_image_path => base64
+        this.base64maskImage = []
+        this.base64maskExpansionImage
+        this.activeBase64InitImage
+        this.activeBase64MaskImage
+        this.image_paths_to_layers = {}
+        this.progress_layer
+        this.last_settings //the last settings been used for generation
+        this.controlNetImage = [] // base64 images (one for each control net)
+        this.controlNetMask = [] // base64 images (one for each control net)
+        this.request_status = Enum.RequestStateEnum['Finished'] //finish or ideal state
+        this.is_control_net = false
+        this.control_net_selection_info
+        this.control_net_preview_selection_info
+    }
+    isActive() {
+        return this.state === SessionState['Active']
+    }
+    isInactive() {
+        return this.state === SessionState['Inactive']
+    }
+    activate() {
+        this.state = SessionState['Active']
+    }
+    deactivate() {
+        this.state = SessionState['Inactive']
+    }
+    name() {
+        return `session - ${this.id}`
+    }
+    async startSession() {
+        this.id += 1 //increment the session id for each session we start
+        this.activate()
+        this.isFirstGeneration = true // only before the first generation is requested should this be true
+
+        console.log('current session id: ', this.id)
+        try {
+            const session_name = this.name()
+            const activeLayers = await app.activeDocument.activeLayers
+            await psapi.unselectActiveLayersExe() // unselect all layer so the create group is place at the top of the document
+            this.prevOutputGroup = this.outputGroup
+            const outputGroup = await psapi.createEmptyGroup(session_name)
+            await executeAsModal(async () => {
+                outputGroup.allLocked = true //lock the session folder so that it can't move
+            })
+            this.outputGroup = outputGroup
+            await psapi.selectLayersExe(activeLayers)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    async endSession(garbage_collection_state) {
+        try {
+            if (!this.isActive()) {
+                //return if the session is not active
+                return null
+            }
+            this.state = SessionState['Inactive'] // end the session by deactivate it
+
+            this.deactivate()
+
+            if (garbage_collection_state === GarbageCollectionState['Accept']) {
+                await acceptAll()
+            } else if (
+                garbage_collection_state === GarbageCollectionState['Discard']
+            ) {
+                //this should be discardAll()
+
+                await discardAll()
+            } else if (
+                garbage_collection_state ===
+                GarbageCollectionState['DiscardSelected']
+            ) {
+                //this should be discardAllExcept(selectedLayers)
+                await discardSelected() //this will discard what is not been highlighted
+            } else if (
+                garbage_collection_state ===
+                GarbageCollectionState['AcceptSelected']
+            ) {
+                //this should be discardAllExcept(selectedLayers)
+                await discard() //this will discard what is not been highlighted
+            }
+
+            //delete the old selection area
+            // g_generation_session.selectionInfo = {}
+
+            this.isFirstGeneration = true // only before the first generation is requested should this be true
+            // const is_visible = await this.outputGroup.visible
+            g_viewer_manager.last_selected_viewer_obj = null // TODO: move this in viewerManager endSession()
+            g_viewer_manager.onSessionEnd()
+            await layer_util.collapseFolderExe([this.outputGroup], false) // close the folder group
+            await executeAsModal(async () => {
+                this.outputGroup.allLocked = false //unlock the session folder on session end
+            })
+            // this.outputGroup.visible = is_visible
+
+            if (
+                this.mode === generationMode['Inpaint'] &&
+                g_sd_mode === generationMode['Inpaint']
+            ) {
+                //create "Mask -- Paint White to Mask -- temporary" layer if current session was inpiant and the selected session is inpaint
+                // the current inpaint session ended on inpaint
+                g_b_mask_layer_exist = false
+                await layer_util.deleteLayers([g_inpaint_mask_layer])
+                await createTempInpaintMaskLayer()
+            }
+            //delete controlNet image, Note: don't delete control net, let the user disable controlNet if doesn't want to use it
+            // this.controlNetImage = null
+            // html_manip.setControlImageSrc('https://source.unsplash.com/random')
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    // initializeInitImage(group, snapshot, solid_background, path) {
+    //     this.initGroup = group
+    //     this.init_solid_background = solid_background
+    //     this.InitSnapshot = snapshot
+    // }
+    deleteInitImageLayers() {}
+    async closePreviousOutputGroup() {
+        try {
+            //close the previous output folder
+
+            if (this.prevOutputGroup) {
+                // const is_visible = await this.prevOutputGroup.visible
+                await layer_util.collapseFolderExe(
+                    [this.prevOutputGroup],
+                    false
+                ) // close the folder group
+                // and reselect the current output folder for clarity
+                await psapi.selectLayersExe([this.outputGroup])
+                // this.prevOutputGroup.visible = is_visible
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    isSameMode(selected_mode) {
+        if (this.mode === selected_mode) {
+            return true
+        }
+        return false
+    }
+    loadLastSession() {
+        //load the last session from the server
+    }
+    saveCurrentSession() {
+        //all session info will be saved in a json file in the project folder
+    }
+    async moveToTopOfOutputGroup(layer) {
+        const output_group_id = await this.outputGroup.id
+        let group_index = await psapi.getLayerIndex(output_group_id)
+        const indexOffset = 1 //1 for background, 0 if no background exist
+        await executeAsModal(async () => {
+            await psapi.selectLayersExe([layer]) //the move command is selection selection sensitive
+            await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
+        })
+    }
+
+    async deleteProgressLayer() {
+        try {
+            await layer_util.deleteLayers([this.progress_layer]) // delete the old progress layer
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    deleteProgressImageHtml() {
+        try {
+            // await layer_util.deleteLayers([this.progress_layer]) // delete the old progress layer
+            // document.getElementById('progressImage').style.width = '0px'
+            // document.getElementById('progressImage').style.height = '0px'
+
+            document.getElementById(
+                'divProgressImageViewerContainer'
+            ).style.height = '0px'
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    async deleteProgressImage() {
+        this.deleteProgressImageHtml()
+        await this.deleteProgressLayer()
+    }
+    async setControlNetImageHelper() {
+        const width = html_manip.getWidth()
+        const height = html_manip.getHeight()
+
+        //get the selection from the canvas as base64 png, make sure to resize to the width and height slider
+        const selectionInfo = await psapi.getSelectionInfoExe()
+        this.control_net_selection_info = selectionInfo
+        this.control_net_preview_selection_info = selectionInfo
+        // const base64_image = await io.IO.getSelectionFromCanvasAsBase64Silent(
+        //     selectionInfo,
+        //     true,
+        //     width,
+        //     height
+        // )
+
+        const use_silent_mode = html_manip.getUseSilentMode()
+        let layer = null
+        if (!use_silent_mode) {
+            await psapi.snapshot_layerExe()
+            const snapshotLayer = await app.activeDocument.activeLayers[0]
+            layer = snapshotLayer
+        }
+        const base64_image =
+            await io.IO.getSelectionFromCanvasAsBase64Interface(
+                width,
+                height,
+                layer,
+                selectionInfo,
+                true,
+                use_silent_mode
+            )
+
+        await layer_util.deleteLayers([layer]) //delete the snapshot layer if it exists
+        return base64_image
+    }
+    async setControlNetImage(control_net_index = 0, base64_image) {
+        //check if the selection area is active
+        //convert layer to base64
+        //the width and height of the exported image
+        // const base64_image = this.setControlNetImageHelper()
+        this.controlNetImage[control_net_index] = base64_image
+        html_manip.setControlImageSrc(
+            base64ToBase64Url(base64_image),
+            control_net_index
+        )
+        // console.log('base64_img:', base64_image)
+        // await io.IO.base64ToLayer(base64_image)
+    }
+}
+
+module.exports = {
+    GenerationSession,
+    GarbageCollectionState,
+    SessionState,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/control_net.js

@@ -0,0 +1,1144 @@
+const api = require('../api')
+const html_manip = require('../html_manip')
+const selection = require('../../selection')
+const note = require('../notification')
+const controlnet_preset = require('../presets/controlnet_preset')
+const preset = require('../presets/preset')
+const Enum = require('../../enum')
+const event = require('../event')
+
+// const g_controlnet_max_supported_models = 3
+let g_controlnet_presets
+let g_module_detail
+
+class ControlNetUnit {
+    static {}
+
+    static resetUnit(index) {
+        const controlnet_unit_default = {
+            module: null,
+            model: null,
+            weight: 1.0,
+            resize_mode: null,
+            lowvram: null,
+            processor_res: null,
+            threshold_a: null,
+            threshold_b: null,
+
+            guidance_start: 0,
+            guidance_end: 1,
+            guessmode: null,
+        }
+        this.setUnit(index, controlnet_unit_default)
+    }
+
+    static resetUnits() {
+        for (let i = 0; i < g_controlnet_max_models; ++i) {
+            this.resetUnit(i)
+        }
+    }
+    static getUnit(index) {
+        const controlnet_unit = {
+            module: this.getModule(index),
+            model: this.getModel(index),
+            weight: this.getWeight(index),
+            resize_mode: null,
+            lowvram: null,
+            processor_res: null,
+            threshold_a: null,
+            threshold_b: null,
+
+            guidance_start: this.getGuidanceStrengthStart(index),
+            guidance_end: this.getGuidanceStrengthEnd(index),
+            guessmode: null,
+        }
+        return controlnet_unit
+    }
+    static setUnit(index, unit_settings) {
+        const controlnet_unit_setters = {
+            module: this.setModule,
+            model: this.setModel,
+            weight: this.setWeight,
+            resize_mode: null,
+            lowvram: null,
+            processor_res: null,
+            threshold_a: null,
+            threshold_b: null,
+
+            guidance_start: this.setGuidanceStrengthStart,
+            guidance_end: this.setGuidanceStrengthEnd,
+            guessmode: null,
+        }
+
+        for (const [name, value] of Object.entries(unit_settings)) {
+            try {
+                if (
+                    controlnet_unit_setters.hasOwnProperty(name)
+                    //&& value.toString() // check if it has a value, null return error; undefine return error; 0 pass
+                ) {
+                    // if (value) {
+                    const setter = controlnet_unit_setters[name]
+
+                    setter(index, value)
+                    // }
+                }
+            } catch (e) {
+                console.warn(e)
+            }
+        }
+    }
+    static getUnits() {
+        const controlnet_units = {}
+
+        for (let i = 0; i < g_controlnet_max_models; ++i) {
+            controlnet_units[i] = this.getUnit(i)
+        }
+        return controlnet_units
+    }
+    static setUnits(controlnet_units) {
+        for (const [index, unit] of Object.entries(controlnet_units)) {
+            try {
+                this.setUnit(index, unit)
+            } catch (e) {
+                console.warn(e)
+            }
+        }
+    }
+    static doesUnitExist(index) {
+        //TODO: check if controlnet unit exist
+        if (index >= 0) {
+        }
+    }
+
+    static getModule(index) {
+        const module = getSelectedModule(index)
+        return module
+    }
+    static setModule(index, module_item) {
+        try {
+            const module_menu_element = controlnetElement(
+                index,
+                '.mModulesMenuControlNet_'
+            )
+
+            html_manip.selectMenuItemByElement(module_menu_element, module_item)
+            // module_menu_element.dispatchEvent(new Event('click'))
+            // module_menu_element.click()
+            changeModule(module_item, index)
+        } catch (e) {
+            html_manip.unselectMenuItemByElement(module_menu_element)
+            console.warn(e)
+        }
+    }
+    static getModel(index) {
+        const model = getSelectedModel(index)
+        return model
+    }
+    static setModel(index, model_item) {
+        try {
+            const model_menu_element = controlnetElement(
+                index,
+                '.mModelsMenuControlNet_'
+            )
+            html_manip.selectMenuItemByElement(model_menu_element, model_item)
+        } catch (e) {
+            html_manip.unselectMenuItemByElement(model_menu_element)
+            console.warn(e)
+        }
+    }
+    static getWeight(index = 0) {
+        const weight = getWeight(index)
+        return weight
+    }
+    static setWeight(index, weight) {
+        setWeight(index, weight)
+    }
+    static getGuidanceStrengthStart(index) {
+        const guidance_strength = getControlNetGuidanceStrengthStart(index)
+        return guidance_strength
+    }
+
+    static setGuidanceStrengthStart(index, sd_value) {
+        setControlNetGuidanceStrengthStart(index, sd_value)
+    }
+    static getGuidanceStrengthEnd(index) {
+        const guidance_strength = getControlNetGuidanceStrengthEnd(index)
+        return guidance_strength
+    }
+    static setGuidanceStrengthEnd(index, sd_value) {
+        setControlNetGuidanceStrengthEnd(index, sd_value)
+    }
+    static getProcessorRes(index) {
+        const slider = controlnetElement(index, '.slControlNetProcessorRes_')
+
+        return slider.value
+    }
+    static setProcessorRes(index, sd_value) {
+        const slider = controlnetElement(index, '.slControlNetProcessorRes_')
+        slider.value = sd_value
+    }
+    static getThreshold(index, a_or_b) {
+        let slider
+        if (a_or_b === 'a') {
+            slider = controlnetElement(index, '.slControlNetThreshold_A_')
+        } else if (a_or_b === 'b') {
+            slider = controlnetElement(index, '.slControlNetThreshold_B_')
+        }
+
+        const sd_value = general.mapRange(
+            slider.value,
+            slider.min,
+            slider.max,
+            slider.dataset['sd_min'],
+            slider.dataset['sd_max']
+        )
+        return sd_value
+    }
+    static setThreshold(index, a_or_b, sd_value) {
+        let slider
+        let label
+        if (a_or_b === 'a') {
+            slider = controlnetElement(index, '.slControlNetThreshold_A_')
+            label = controlnetElement(index, '.lControlNetThreshold_A_')
+        } else if (a_or_b === 'b') {
+            slider = controlnetElement(index, '.slControlNetThreshold_B_')
+            label = controlnetElement(index, '.lControlNetThreshold_B_')
+        }
+
+        const slider_value = general.mapRange(
+            sd_value,
+            slider.dataset['sd_min'],
+            slider.dataset['sd_max'],
+            slider.min,
+            slider.max
+        )
+        slider.value = String(slider_value)
+        label.innerText = String(sd_value)
+    }
+
+    static getControlNetUnitJson(index = 0) {}
+}
+
+async function checkIfControlNetInstalled() {}
+
+async function requestControlNetDetectMap(
+    controlnet_init_image,
+    _module,
+    processor_res,
+    threshold_a,
+    threshold_b
+) {
+    try {
+        const payload = {
+            controlnet_module: _module,
+            controlnet_input_images: [controlnet_init_image],
+            controlnet_processor_res: processor_res,
+            controlnet_threshold_a: threshold_a,
+            controlnet_threshold_b: threshold_b,
+        }
+        const full_url = `${g_sd_url}/controlnet/detect`
+
+        // debugger
+
+        const response_data = await api.requestPost(full_url, payload)
+
+        // update the mask preview with the new detectMap
+        if (response_data['images'].length === 0) {
+            app.showAlert(response_data['info'])
+        }
+        return response_data['images'][0]
+    } catch (e) {
+        console.warn('requestControlNetDetectMap(): ', _module, e)
+    }
+}
+
+async function requestControlNetModelList() {
+    const control_net_json = await api.requestGet(
+        `${g_sd_url}/controlnet/model_list`
+    )
+
+    const model_list = control_net_json?.model_list
+
+    // const model_list = [
+    //     'none',
+    //     'control_sd15_depth [fef5e48e]',
+    //     'control_sd15_openpose [fef5e48e]',
+    //     'control_sd15_scribble [fef5e48e]',
+    // ]
+    return model_list
+}
+
+async function requestControlNetModuleList() {
+    // const control_net_json = await api.requestGet(
+    //     `${g_sd_url}/controlnet/model_list`
+    // )
+    // const module_list = [
+    //     // 'none',
+    //     'canny',
+    //     'depth',
+    //     'depth_leres',
+    //     'hed',
+    //     'mlsd',
+    //     'normal_map',
+    //     'openpose',
+    //     // "openpose_hand",
+    //     'pidinet',
+    //     'scribble',
+    //     'fake_scribble',
+    //     'segmentation',
+    // ]
+
+    // const module_list = g_sd_config_obj.getControlNetPreprocessors()
+
+    const result = await api.requestGet(
+        `${g_sd_url}/controlnet/module_list?alias_names=1`
+    )
+
+    return result?.module_list
+}
+async function populateModelMenu() {
+    try {
+        const models = await requestControlNetModelList()
+        for (let index = 0; index < g_controlnet_max_models; index++) {
+            const menu_element = controlnetElement(
+                index,
+                '.mModelsMenuControlNet_'
+            )
+            html_manip.populateMenuByElement(
+                menu_element,
+                'mModelsMenuItemControlNet_',
+                models,
+                (item, item_html_element) => {
+                    item_html_element.innerHTML = item
+                    item_html_element.dataset['index'] = index
+                },
+                false,
+                'Select Model'
+            )
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function changeModule(_module, index) {
+    // const index = index
+
+    const preprocessor_res_element = controlnetElement(
+        index,
+        '.slControlNetProcessorRes_'
+    )
+
+    const threshold_a_element = controlnetElement(
+        index,
+        '.slControlNetThreshold_A_'
+    )
+    const threshold_b_element = controlnetElement(
+        index,
+        '.slControlNetThreshold_B_'
+    )
+
+    const detail = g_module_detail[_module]
+
+    function remapArray(arr) {
+        let obj = {
+            preprocessor_res: arr[0] || null,
+            threshold_a: arr[1] || null,
+            threshold_b: arr[2] || null,
+        }
+        return obj
+    }
+    const params = remapArray(detail['sliders'])
+    const model_free = detail.model_free
+
+    // threshold_a_element.min = prams.
+    //     threshold_a_element.max =
+    // debugger
+    if (model_free)
+        controlnetElement(
+            index,
+            '.mModelsMenuControlNet_'
+        ).parentElement.style.display = 'none'
+
+    else
+        controlnetElement(
+            index,
+            '.mModelsMenuControlNet_'
+        ).parentElement.style.display = 'block'
+
+
+    if (params?.preprocessor_res) {
+        const preprocessor_res_label_element = controlnetElement(
+            index,
+            '.labelControlNetProcessorRes_'
+        )
+        preprocessor_res_element.style.display = 'block'
+        preprocessor_res_label_element.innerText = params.preprocessor_res.name
+    } else {
+        preprocessor_res_element.style.display = 'none'
+    }
+    if (params?.threshold_a) {
+        const threshold_a_label_element = controlnetElement(
+            index,
+            '.labelControlNetThreshold_A_'
+        )
+
+        threshold_a_element.dataset['sd_min'] = params.threshold_a.min
+        threshold_a_element.dataset['sd_max'] = params.threshold_a.max
+        ControlNetUnit.setThreshold(index, 'a', params.threshold_a.value)
+        threshold_a_element.style.display = 'block'
+        threshold_a_label_element.innerText = params.threshold_a.name + ":"
+    } else {
+        ControlNetUnit.setThreshold(index, 'a', 32)
+        threshold_a_element.style.display = 'none'
+    }
+
+    if (params?.threshold_b) {
+        const threshold_b_label_element = controlnetElement(
+            index,
+            '.labelControlNetThreshold_B_'
+        )
+
+        threshold_b_element.dataset['sd_min'] = params.threshold_b.min
+        threshold_b_element.dataset['sd_max'] = params.threshold_b.max
+        ControlNetUnit.setThreshold(index, 'b', params.threshold_b.value)
+        threshold_b_element.style.display = 'block'
+        threshold_b_label_element.innerText = params.threshold_b.name + ":"
+    } else {
+        ControlNetUnit.setThreshold(index, 'b', 32)
+        threshold_b_element.style.display = 'none'
+    }
+}
+async function populatePreprocessorMenu() {
+    try {
+        // debugger
+        const modules = await requestControlNetModuleList()
+        for (let index = 0; index < g_controlnet_max_models; index++) {
+            const menu_element = controlnetElement(
+                index,
+                '.mModulesMenuControlNet_'
+            )
+
+            menu_element.dataset['index'] = String(index)
+            html_manip.populateMenuByElement(
+                menu_element,
+                'mModuleMenuItemControlNet_',
+                modules,
+                (item, item_html_element) => {
+                    item_html_element.innerHTML = item
+                    item_html_element.dataset['index'] = index
+                },
+                false,
+                'Select Module'
+            )
+
+            menu_element.addEventListener('click', (event) => {
+                changeModule(
+                    event.target.innerText,
+                    event.target.dataset['index']
+                )
+            })
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+function controlnetElement(index, class_) {
+    const element = document.querySelector(
+        `#controlnet_settings_${index} ${class_}`
+    )
+    return element
+}
+function getControlNetGuidanceStrengthStart(index) {
+    const slider_element = document.querySelector(
+        `#controlnet_settings_${index} .slControlNetGuidanceStrengthStart_`
+    )
+    const sd_value = html_manip.getSliderSdValueByElement(
+        slider_element,
+        0,
+        100,
+        0,
+        1
+    )
+    return sd_value
+}
+function setControlNetGuidanceStrengthStart(index, sd_value) {
+    const slider_element = controlnetElement(
+        index,
+        '.slControlNetGuidanceStrengthStart_'
+    )
+
+    const label_element = controlnetElement(
+        index,
+        '.lControlNetGuidanceStrengthStart_'
+    )
+    html_manip.setSliderSdValueByElements(
+        slider_element,
+        label_element,
+        sd_value,
+        0,
+        100,
+        0,
+        1
+    )
+}
+
+function getControlNetGuidanceStrengthEnd(index) {
+    const slider_element = controlnetElement(
+        index,
+        '.slControlNetGuidanceStrengthEnd_'
+    )
+    const sd_value = html_manip.getSliderSdValueByElement(
+        slider_element,
+        0,
+        100,
+        0,
+        1
+    )
+    return sd_value
+}
+function setControlNetGuidanceStrengthEnd(index, sd_value) {
+    const slider_element = controlnetElement(
+        index,
+        '.slControlNetGuidanceStrengthEnd_'
+    )
+
+    const label_element = controlnetElement(
+        index,
+        '.lControlNetGuidanceStrengthEnd_'
+    )
+    html_manip.setSliderSdValueByElements(
+        slider_element,
+        label_element,
+        sd_value,
+        0,
+        100,
+        0,
+        1
+    )
+}
+
+// controlnet settings getters
+function getControlNetWeightGuidanceStrengthStart(index = 0) {
+    const slider_element = controlnetElement(
+        index,
+        '.slControlNetGuidanceStrengthStart_'
+    )
+    const slider_value = slider_element.value
+    const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
+    return sd_value
+}
+
+function getControlNetWeightGuidanceStrengthEnd(index = 0) {
+    const slider_value = controlnetElement(
+        index,
+        '.slControlNetGuidanceStrengthEnd_'
+    ).value
+
+    const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
+    return sd_value
+}
+
+function getWeight(index = 0) {
+    const slider_value = document.querySelector(
+        `#controlnet_settings_${index} .slControlNetWeight_`
+    ).value
+
+    const sd_value = general.mapRange(slider_value, 0, 100, 0, 2) // convert slider value to SD ready value
+    return sd_value
+}
+function setWeight(index = 0, sd_weight) {
+    const slider_element = document.querySelector(
+        `#controlnet_settings_${index} .slControlNetWeight_`
+    )
+    const label_element = document.querySelector(
+        `#controlnet_settings_${index} .lControlNetWeight_`
+    )
+
+    html_manip.setSliderSdValueByElements(
+        slider_element,
+        label_element,
+        sd_weight,
+        0,
+        100,
+        0,
+        2
+    )
+}
+function getUseLowVram(index = 0) {
+    const b_result = document.querySelector(
+        `#controlnet_settings_${index} .chlowVram_`
+    ).checked
+    return b_result
+}
+function getEnableControlNet(index = 0) {
+    const is_enable = document.querySelector(
+        `#controlnet_settings_${index} .chEnableControlNet_`
+    ).checked
+    return is_enable
+}
+function setEnable(index) {
+    document.querySelector(
+        `#controlnet_settings_${index} .chEnableControlNet_`
+    ).checked = b_live_update
+}
+function getSelectedModule(index = 0) {
+    const menu_element = controlnetElement(index, '.mModulesMenuControlNet_')
+    // debugger
+    const module_name =
+        html_manip.getSelectedMenuItemTextContentByElement(menu_element)
+
+    return module_name
+}
+function getSelectedModel(index = 0) {
+    const menu_element = controlnetElement(index, '.mModelsMenuControlNet_')
+    const model_name =
+        html_manip.getSelectedMenuItemTextContentByElement(menu_element)
+    return model_name
+}
+function getUseGuessMode(index = 0) {
+    const is_guess_mode = document.querySelector(
+        `#controlnet_settings_${index} .chGuessMode_`
+    ).checked
+
+    return is_guess_mode
+}
+function isControlNetModeEnable() {
+    let is_tab_enabled = !document.getElementById('chDisableControlNetTab')
+        .checked
+
+    let numOfEnabled = 0
+    if (g_controlnet_max_models <= 0) {
+        return false
+    }
+
+    if (is_tab_enabled) {
+        for (let index = 0; index < g_controlnet_max_models; index++) {
+            if (getEnableControlNet(index)) {
+                numOfEnabled += 1
+            }
+        }
+    }
+    let is_mode_enabled = is_tab_enabled // could be true
+    if (is_tab_enabled === false || numOfEnabled === 0) {
+        is_mode_enabled = false
+    }
+    return is_mode_enabled
+}
+// function getControlNetMaxModelsNumber() {
+//     return g_controlnet_max_supported_models
+// }
+
+function preprocessorData(
+    processor_res = 512,
+    threshold_a = 64,
+    threshold_b = 64,
+    a_min = 64,
+    a_max = 1024,
+    b_min = 64,
+    b_max = 1024,
+    processor_res_label = 'Annotator resolution',
+    threshold_a_label = 'threshold a',
+    threshold_b_label = 'threshold b'
+) {
+    return {
+        processor_res,
+        threshold_a,
+        threshold_b,
+        a_min,
+        a_max,
+        b_min,
+        b_max,
+        processor_res_label,
+        threshold_a_label,
+        threshold_b_label,
+    }
+}
+
+function mapPluginSettingsToControlNet(plugin_settings) {
+    const ps = plugin_settings // for shortness
+    let controlnet_units = []
+
+    // debugger
+    let active_index = 0
+    for (let index = 0; index < g_controlnet_max_models; index++) {
+        const preprocessor_name = getSelectedModule(index)
+
+        controlnet_units[active_index] = {
+            enabled: getEnableControlNet(index),
+            input_image: g_generation_session.controlNetImage[index],
+            mask: '',
+            module: getSelectedModule(index),
+            model: getSelectedModel(index),
+            weight: getWeight(index),
+            resize_mode: 'Scale to Fit (Inner Fit)',
+            lowvram: getUseLowVram(index),
+            processor_res: ControlNetUnit.getProcessorRes(index),
+            threshold_a: ControlNetUnit.getThreshold(index, 'a'),
+            threshold_b: ControlNetUnit.getThreshold(index, 'b'),
+            // guidance: ,
+            guidance_start: getControlNetWeightGuidanceStrengthStart(index),
+            guidance_end: getControlNetWeightGuidanceStrengthEnd(index),
+            guessmode: false,
+        }
+        active_index++
+    }
+
+    if (
+        plugin_settings['mode'] === Enum.generationModeEnum['Img2Img'] ||
+        plugin_settings['mode'] === Enum.generationModeEnum['Inpaint'] ||
+        plugin_settings['mode'] === Enum.generationModeEnum['Outpaint']
+    ) {
+        const b_use_guess_mode = getUseGuessMode()
+        controlnet_units[0]['guessmode'] = b_use_guess_mode
+    }
+
+    const controlnet_payload = {
+        ...ps,
+        controlnet_units, //keep for backward compatibility for now
+        subseed: -1,
+        override_settings: {},
+        override_settings_restore_afterwards: true,
+        alwayson_scripts: {
+            controlnet: {
+                args: controlnet_units,
+            },
+        },
+    }
+
+    return controlnet_payload
+}
+function refreshControlNetTab() {}
+
+async function populateControlNetPresetMenu() {
+    // const default_preset_name = 'Select CtrlNet Preset'
+    // const default_preset_settings = {} // empty preset
+
+    const custom_presets = await preset.getAllCustomPresetsSettings(
+        Enum.PresetTypeEnum['ControlNetPreset']
+    )
+    g_controlnet_presets = {
+        'Select CtrlNet Preset': {},
+        ...controlnet_preset.ControlNetNativePresets,
+        ...custom_presets,
+    }
+
+    const presets_names = Object.keys(g_controlnet_presets)
+
+    html_manip.populateMenu(
+        'mControlNetPresetMenu',
+        'mControlNetPresetMenuItem',
+        presets_names,
+        (preset_name, item_html_element) => {
+            item_html_element.innerHTML = preset_name
+        }
+    )
+    html_manip.selectMenuItem('mControlNetPresetMenu', 'Select CtrlNet Preset')
+}
+
+document
+    .getElementById('mControlNetPresetMenu')
+    .addEventListener('change', async (evt) => {
+        try {
+            ControlNetUnit.resetUnits()
+            const preset_index = evt.target.selectedIndex
+            const preset_name = evt.target.options[preset_index].textContent
+            units_settings = g_controlnet_presets[preset_name]
+
+            ControlNetUnit.setUnits(units_settings)
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+
+document
+    .getElementById('bSetAllControlImage')
+    .addEventListener('click', async () => {
+        const selectionInfo = await selection.Selection.getSelectionInfoExe()
+        if (selectionInfo) {
+            const base64_image =
+                await g_generation_session.setControlNetImageHelper()
+
+            for (index = 0; index < g_controlnet_max_models; index++) {
+                await g_generation_session.setControlNetImage(
+                    index,
+                    base64_image
+                )
+            }
+        } else {
+            await note.Notification.inactiveSelectionArea()
+        }
+    })
+
+function initControlNetUnitsEventListeners(controlnet_max_models) {
+    for (let index = 0; index < controlnet_max_models; index++) {
+        //event listeners
+        controlnetElement(
+            index,
+            '.slControlNetGuidanceStrengthStart_'
+        ).addEventListener('input', (evt) => {
+            // debugger
+            const sd_value = general.mapRange(evt.target.value, 0, 100, 0, 1) // convert slider value to SD ready value
+            controlnetElement(
+                index,
+                '.lControlNetGuidanceStrengthStart_'
+            ).textContent = Number(sd_value).toFixed(2)
+        })
+
+        controlnetElement(
+            index,
+            '.slControlNetGuidanceStrengthEnd_'
+        ).addEventListener('input', (evt) => {
+            // debugger
+            const sd_value = general.mapRange(evt.target.value, 0, 100, 0, 1) // convert slider value to SD ready value
+            controlnetElement(
+                index,
+                '.lControlNetGuidanceStrengthEnd_'
+            ).textContent = Number(sd_value).toFixed(2)
+        })
+
+        document
+            .querySelector(`#controlnet_settings_${index} .slControlNetWeight_`)
+            .addEventListener('input', (evt) => {
+                // debugger
+                const sd_value = general.mapRange(
+                    evt.target.value,
+                    0,
+                    100,
+                    0,
+                    2
+                ) // convert slider value to SD ready value
+                document.querySelector(
+                    `#controlnet_settings_${index} .lControlNetWeight_`
+                ).textContent = Number(sd_value).toFixed(2)
+            })
+
+        // controlnetElement(index, '.slControlNetProcessorRes_').addEventListener(
+        //     'input',
+        //     (evt) => {
+        //         // debugger
+        //         const sd_value = general.mapRange(
+        //             evt.target.value,
+        //             64,
+        //             2048,
+        //             64,
+        //             2048
+        //         ) // convert slider value to SD ready value
+        //         controlnetElement(index, '.lControlNetProcessorRes_').textContent =
+        //             Number(sd_value).toFixed(2)
+        //     }
+        // )
+        controlnetElement(index, '.slControlNetThreshold_A_').addEventListener(
+            'input',
+            (event) => {
+                const slider = event.target
+                const sd_value = Number(
+                    general
+                        .mapRange(
+                            slider.value,
+                            slider.min,
+                            slider.max,
+                            slider.dataset['sd_min'],
+                            slider.dataset['sd_max']
+                        )
+                        .toFixed(2)
+                )
+                controlnetElement(index, '.lControlNetThreshold_A_').innerText =
+                    String(sd_value)
+                // ControlNetUnit.setThreshold(index, 'a', sd_value)
+                // controlnetElement(index, '.lControlNetThreshold_A_').value =
+                //     sd_value
+            }
+        )
+        controlnetElement(index, '.slControlNetThreshold_B_').addEventListener(
+            'input',
+            (event) => {
+                const slider = event.target
+                const sd_value = Number(
+                    general
+                        .mapRange(
+                            slider.value,
+                            slider.min,
+                            slider.max,
+                            slider.dataset['sd_min'],
+                            slider.dataset['sd_max']
+                        )
+                        .toFixed(2)
+                )
+                controlnetElement(index, '.lControlNetThreshold_B_').innerText =
+                    String(sd_value)
+                // ControlNetUnit.setThreshold(index, 'a', sd_value)
+                // controlnetElement(index, '.lControlNetThreshold_A_').value =
+                //     sd_value
+            }
+        )
+        document
+            .querySelector(`#controlnet_settings_${index} .bSetControlImage_`)
+            .addEventListener('click', async () => {
+                const selectionInfo =
+                    await selection.Selection.getSelectionInfoExe()
+                if (selectionInfo) {
+                    // debugger
+                    const base64_image =
+                        await g_generation_session.setControlNetImageHelper()
+                    await g_generation_session.setControlNetImage(
+                        index,
+                        base64_image
+                    )
+                } else {
+                    await note.Notification.inactiveSelectionArea()
+                }
+            })
+
+        document
+            .querySelector(`#controlnet_settings_${index} .bControlMask_`)
+            .addEventListener('click', async () => {
+                await previewAnnotator(index)
+            })
+    }
+}
+document
+    .getElementById('mControlNetPresetMenu')
+    .addEventListener('updatePresetMenuEvent', async (event) => {
+        // console.log("I'm listening on a custom event")
+        await populateControlNetPresetMenu()
+    })
+
+async function previewAnnotator(index) {
+    try {
+        const controlnet_init_image =
+            g_generation_session.controlNetImage[index]
+        const _module = ControlNetUnit.getModule(index)
+        const processor_res = ControlNetUnit.getProcessorRes(index)
+        const threshold_a = ControlNetUnit.getThreshold(index, 'a')
+        const threshold_b = ControlNetUnit.getThreshold(index, 'b')
+        if (!controlnet_init_image) {
+            const error = 'ControlNet initial image is empty'
+            app.showAlert(error)
+            throw error
+        }
+        if (!_module || _module === 'none') {
+            const error = 'select a valid controlnet module (preprocessor)'
+            app.showAlert(error)
+            throw error
+        }
+
+        const detect_map = await requestControlNetDetectMap(
+            controlnet_init_image,
+            _module,
+            processor_res,
+            threshold_a,
+            threshold_b
+        )
+
+        const rgb_detect_map_url =
+            await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
+        const rgb_detect_map = general.base64UrlToBase64(rgb_detect_map_url)
+        g_generation_session.controlNetMask[index] = rgb_detect_map
+
+        html_manip.setControlMaskSrc(rgb_detect_map_url, index)
+    } catch (e) {
+        console.warn('PreviewAnnotator click(): index: ', index, e)
+    }
+}
+async function previewAnnotatorFromCanvas(index) {
+    try {
+        const _module = ControlNetUnit.getModule(index)
+
+        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(
+            width,
+            height,
+            selectionInfo,
+            true
+        )
+
+        if (!_module || _module === 'none') {
+            const error = 'select a valid controlnet module (preprocessor)'
+            app.showAlert(error)
+            throw error
+        }
+
+        const processor_res = ControlNetUnit.getProcessorRes(index)
+        const threshold_a = ControlNetUnit.getThreshold(index, 'a')
+        const threshold_b = ControlNetUnit.getThreshold(index, 'b')
+
+        const detect_map = await requestControlNetDetectMap(
+            base64,
+            _module,
+            processor_res,
+            threshold_a,
+            threshold_b
+        )
+
+        const rgb_detect_map_url =
+            await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
+        g_generation_session.controlNetMask[index] = detect_map
+        html_manip.setControlMaskSrc(rgb_detect_map_url, index)
+    } catch (e) {
+        console.warn('PreviewAnnotator click(): index: ', index, e)
+    }
+}
+// document
+//     .getElementById('bPreviewAnnotator_0')
+//     .addEventListener('click', async (event) => {
+//         const index = parseInt(event.target.dataset['controlnet-index'])
+//         await previewAnnotator(index)
+//     })
+
+function initPreviewElement(index) {
+    //make init mask image use the thumbnail class with buttons
+    // const mask_image_html = document.getElementById(
+    //     'control_net_preview_image_0'
+    // )
+
+    const mask_image_html = controlnetElement(index, '.control_net_mask_')
+    const mask_parent_element = mask_image_html.parentElement
+
+    this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
+        mask_image_html,
+        'viewer-image-container'
+    )
+
+    mask_parent_element.appendChild(thumbnail_container)
+
+    async function toCanvas(index) {
+        // debugger
+        if (
+            g_generation_session.control_net_preview_selection_info &&
+            g_generation_session.controlNetMask[index]
+        ) {
+            const selection_info =
+                g_generation_session.control_net_preview_selection_info
+            const layer = await io.IO.base64ToLayer(
+                g_generation_session.controlNetMask[index],
+                'ControlNet Mask.png',
+                selection_info.left,
+                selection_info.top,
+                selection_info.width,
+                selection_info.height
+            )
+        } else {
+            // await note.Notification.inactiveSelectionArea()
+            app.showAlert('Mask Image is not available')
+        }
+    }
+    async function toControlNetInitImage(index) {
+        const preview_result_base64 = g_generation_session.controlNetMask[index]
+        g_generation_session.controlNetImage[index] = preview_result_base64
+        g_generation_session.control_net_selection_info =
+            g_generation_session.control_net_preview_selection_info
+
+        const rgb_detect_map_url =
+            await io.convertBlackAndWhiteImageToRGBChannels3(
+                preview_result_base64
+            )
+
+        // g_generation_session.controlNetMask[index] = rgb_detect_map
+
+        html_manip.setControlImageSrc(rgb_detect_map_url, index)
+    }
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        this.thumbnail_container,
+        'svg_sp_btn',
+        'use as ControlNet init image',
+
+        toControlNetInitImage,
+        index
+    )
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        this.thumbnail_container,
+        'svg_sp_btn_canvas',
+        'move to the canvas',
+
+        toCanvas,
+        index
+    )
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        this.thumbnail_container,
+        'svg_sp_btn_preview',
+        'preview selection from canvas',
+
+        previewAnnotatorFromCanvas,
+        index
+    )
+}
+
+function initControlNetUnit(index) {
+    document.querySelector(
+        `#controlnet_settings_${index} .controlnet_unit_label_`
+    ).textContent = `Control Net Settings Slot ${index}`
+}
+async function initializeControlNetTab(controlnet_max_models) {
+    try {
+        if (controlnet_max_models <= 0) {
+            document.getElementById('controlnetMissingError').style.display =
+                'block'
+
+            return
+        }
+        document.getElementById('controlnetMissingError').style.display = 'none'
+        // if (controlnet_max_models > g_controlnet_max_models)
+        //     controlnet_max_models = g_controlnet_max_models
+
+        await populateControlNetPresetMenu()
+        const parent_container = document.getElementById(
+            'controlnet_parent_container'
+        )
+        parent_container.innerHTML = ''
+        const controlnet_unit_template = document.getElementById(
+            'controlnet_settings_template'
+        )
+
+        for (let index = 0; index < controlnet_max_models; index++) {
+            const controlnet_unit = controlnet_unit_template.cloneNode(true)
+            controlnet_unit.id = 'controlnet_settings_' + index
+            controlnet_unit.dataset['index'] = String(index)
+            parent_container.appendChild(controlnet_unit)
+        }
+
+        const full_url = `${g_sd_url}/controlnet/module_list?alias_names=1`
+        let result_json = await api.requestGet(full_url)
+        g_module_detail = result_json['module_detail']
+
+        initControlNetUnitsEventListeners(controlnet_max_models) // add event listener to all units after cloning
+
+        for (let index = 0; index < controlnet_max_models; index++) {
+            await populateModelMenu(index)
+            await populatePreprocessorMenu(index)
+            document.getElementById(
+                'controlnet_settings_' + index
+            ).style.display = 'block'
+            initPreviewElement(index)
+
+            initControlNetUnit(index)
+        }
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+module.exports = {
+    requestControlNetModelList,
+    populateModelMenu,
+    initializeControlNetTab,
+    getWeight,
+    mapPluginSettingsToControlNet,
+    getEnableControlNet,
+    getSelectedModule,
+    getSelectedModel,
+    // getControlNetMaxModelsNumber,
+    getControlNetGuidanceStrengthStart,
+    setControlNetGuidanceStrengthStart,
+    getControlNetGuidanceStrengthEnd,
+    setControlNetGuidanceStrengthEnd,
+    ControlNetUnit,
+    populateControlNetPresetMenu,
+    isControlNetModeEnable,
+    getModuleDetail() {
+        return g_module_detail
+    }
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/history_tab.js

@@ -0,0 +1,101 @@
+const settings_tab = require('./settings')
+const sdapi = require('../../sdapi_py_re')
+const thumbnail = require('../../thumbnail')
+
+//REFACTORED: moved to history_tab.js
+function getHistoryMetadata(img) {
+    //auto fill the ui with metadata
+    const metadata_json = JSON.parse(img.dataset.metadata_json_string)
+    console.log('metadata_json: ', metadata_json)
+    // document.querySelector('#tiSeed').value = metadata_json.Seed
+
+    //extract auto_metadata into the preset metadata
+    function convertAutoMetadataToPresset(metadata_json) {
+        metadata_json['seed'] = metadata_json?.auto_metadata?.Seed
+    }
+    convertAutoMetadataToPresset(metadata_json)
+
+    const b_use_original_prompt = settings_tab.getUseOriginalPrompt()
+    if (b_use_original_prompt) {
+        metadata_json['prompt'] = metadata_json?.original_prompt
+            ? metadata_json['original_prompt']
+            : metadata_json['prompt']
+
+        metadata_json['negative_prompt'] =
+            metadata_json?.original_negative_prompt
+                ? metadata_json['original_negative_prompt']
+                : metadata_json['negative_prompt']
+    }
+    document.querySelector('#historySeedLabel').textContent =
+        metadata_json?.seed
+
+    g_ui_settings_object.autoFillInSettings(metadata_json)
+}
+
+document
+    .getElementById('btnLoadHistory')
+    .addEventListener('click', async function () {
+        try {
+            const output_dir_relative = './server/python_server/'
+            const container = document.getElementById(
+                'divHistoryImagesContainer'
+            )
+            const uniqueDocumentId = await getUniqueDocumentId()
+            const [image_paths, metadata_jsons, base64_images] =
+                await sdapi.loadHistory(uniqueDocumentId)
+
+            while (container.firstChild) {
+                container.removeChild(container.firstChild)
+            }
+
+            const length = image_paths.length
+            // let i = length -1
+
+            // for (image_path of image_paths) {
+            for (let i = length - 1; i >= 0; --i) {
+                const img = document.createElement('img')
+                // img.src = `${output_dir_relative}/${image_path}`
+                const image_src = `data:image/png;base64, ${base64_images[i]}`
+                img.src = image_src
+
+                img.dataset.path = `${output_dir_relative}/${image_paths[i]}`
+                img.className = 'history-image'
+                img.dataset.metadata_json_string = JSON.stringify(
+                    metadata_jsons[i]
+                )
+                console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
+
+                const img_container = thumbnail.Thumbnail.wrapImgInContainer(
+                    img,
+                    'viewer-image-container'
+                )
+                thumbnail.Thumbnail.addSPButtonToContainer(
+                    img_container,
+                    'svg_sp_btn',
+                    'copy metadata to settings',
+                    history_tab.getHistoryMetadata,
+                    img
+                )
+                thumbnail.Thumbnail.addSPButtonToContainer(
+                    img_container,
+                    'svg_sp_btn_datadownload',
+                    'place the image on the canvas',
+                    moveHistoryImageToLayer,
+                    img
+                )
+                container.appendChild(img_container)
+                // i++
+            }
+        } catch (e) {
+            console.warn(`loadHistory warning: ${e}`)
+        }
+    })
+document
+    .getElementById('btnClearHistoryCache')
+    .addEventListener('click', () => {
+        const container = document.getElementById('divHistoryImagesContainer')
+        container.innerHTML = ''
+    })
+module.exports = {
+    getHistoryMetadata,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/image_search_tab.js

@@ -0,0 +1,51 @@
+const sdapi = require('../../sdapi_py_re')
+
+const storage = require('uxp').storage
+const fs = storage.localFileSystem
+
+//REFACTOR: move to events.js
+document
+    .getElementById('btnImageSearch')
+    .addEventListener('click', async function () {
+        try {
+            // const output_dir_relative = "./server/python_server/"
+            const container = document.getElementById(
+                'divImageSearchImagesContainer'
+            )
+            // const uniqueDocumentId = await getUniqueDocumentId()
+            // const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
+            const keywords = document.getElementById('imageSearchField').value
+            const image_search_objs = await sdapi.imageSearch(keywords)
+            while (container.firstChild) {
+                container.removeChild(container.firstChild)
+            }
+
+            // let i = 0
+            const temp_entry = await fs.getTemporaryFolder()
+            for (let image_search_obj of image_search_objs) {
+                const img = document.createElement('img')
+                // img.src = image_search_obj['image']
+
+                img.src = image_search_obj['thumbnail']
+
+                img.className = 'image-search'
+                // img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
+                container.appendChild(img)
+                img.addEventListener('click', async (e) => {
+                    console.log(`the image url: ${img.src}`)
+                    const link = img.src
+                    const image_file_name = 'search_image_temp.png'
+                    await io.IO.urlToLayer(link, image_file_name)
+                    // await downloadItExe(link, temp_entry, image_file_name)
+
+                    // const metadata_json = JSON.parse(e.target.dataset.metadata_json_string)
+                    // console.log("metadata_json: ",metadata_json)
+                    // document.querySelector('#tiSeed').value = metadata_json.Seed
+                    // document.querySelector('#historySeedLabel').textContent = metadata_json.Seed
+                })
+                // i++
+            }
+        } catch (e) {
+            console.warn(`imageSearch warning: ${e}`)
+        }
+    })

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/lexica_tab.js

@@ -0,0 +1,239 @@
+const thumbnail = require('../../thumbnail')
+const api = require('../api')
+const io = require('../io')
+const html_manip = require('../html_manip')
+
+class Lexica {
+    constructor(items = []) {
+        //items is json object return from lexica request
+        this.items = items
+    }
+
+    delete() {
+        this.items = []
+    }
+}
+
+async function requestHostedUrl(base64) {
+    try {
+        const payload = {
+            key: '6d207e02198a847aa98d0a2a901485a5',
+            source: base64,
+        }
+        const url = 'https://freeimage.host/api/1/upload'
+
+        const result_json = await api.requestFormDataPost(url, payload)
+
+        const image_url = result_json.image.url
+        return image_url
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+async function requestLexica(search_query) {
+    const lexica_url = `https://lexica.art/api/v1/search?q=${search_query}`
+    const url_encoded = encodeURI(lexica_url)
+    result = await api.requestGet(url_encoded)
+    console.log('result:', result)
+    return result
+}
+function displayAllLexicaImages(lexica_items) {
+    const lexicaMasterImageContainer = document.getElementById(
+        'divLexicaImagesContainer'
+    )
+    lexicaMasterImageContainer.innerHTML = ''
+    for (item of lexica_items) {
+        displayLexicaImage(item)
+    }
+}
+function displayLexicaImage(lexica_item) {
+    // let lexica_item = {
+    //     id: '0482ee68-0368-4eca-8846-5930db866b33',
+    //     gallery: 'https://lexica.art?q=0482ee68-0368-4eca-8846-5930db866b33',
+    //     src: 'https://lexica-serve-encoded-images.sharif.workers.dev/md/0482ee68-0368-4eca-8846-5930db866b33',
+    //     srcSmall:
+    //         'https://lexica-serve-encoded-images.sharif.workers.dev/sm/0482ee68-0368-4eca-8846-5930db866b33',
+    //     prompt: 'cute chubby blue fruits icons for mobile game ui ',
+    //     width: 512,
+    //     height: 512,
+    //     seed: '1413536227',
+    //     grid: false,
+    //     model: 'stable-diffusion',
+    //     guidance: 7,
+    //     promptid: 'd9868972-dad8-477d-8e5a-4a0ae1e9b72b',
+    //     nsfw: false,
+    // }
+
+    const lexicaMasterImageContainer = document.getElementById(
+        'divLexicaImagesContainer'
+    )
+
+    img_html = document.createElement('img')
+    img_html.classList.add('viewer-image')
+    img_html.src = lexica_item.srcSmall
+    img_html.style.width = '100px'
+    const thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
+        img_html,
+        'viewer-image-container'
+    )
+
+    async function loadOnCanvas(lexica_item) {
+        // lexica_item.
+        try {
+            const link = lexica_item.src
+            const image_file_name = 'lexica_image.png'
+            await io.IO.urlToLayer(link, image_file_name)
+        } catch (e) {
+            console.warn('loadOnCanvas(): ', lexica_item, e)
+        }
+    }
+    async function loadSettingsToUI(lexica_item) {
+        try {
+            const settings = {
+                prompt: lexica_item.prompt,
+                width: lexica_item.width,
+                height: lexica_item.height,
+                seed: lexica_item.seed,
+                cfg_scale: lexica_item.guidance,
+            }
+            g_ui_settings_object.autoFillInSettings(settings)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    async function searchForSimilarImage(lexica_item) {
+        try {
+            document.getElementById('LexicaSearchField').value = lexica_item.src
+            const result_json = await requestLexica(lexica_item.src)
+
+            const lexica_items = result_json.images
+
+            displayAllLexicaImages(lexica_items)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        thumbnail_container,
+        'svg_sp_btn_canvas',
+        'Load on Canvas',
+        loadOnCanvas,
+        lexica_item
+    )
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        thumbnail_container,
+        'svg_sp_btn',
+        'load settings',
+        loadSettingsToUI,
+        lexica_item
+    )
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        thumbnail_container,
+        'svg_sp_btn_search',
+        'Search for Similar Image',
+        searchForSimilarImage,
+        lexica_item
+    )
+    thumbnail_container.addEventListener('click', () => {
+        setLexicaPromptValue(lexica_item.prompt)
+        // taLexicaPrompt.style.position = 'fixed'
+        const originalPosition = taLexicaPrompt.offsetTop
+        const currentPosition = document.querySelector('body > div').scrollTop
+
+        const isScrolledPast = currentPosition > originalPosition
+
+        if (isScrolledPast) {
+            taLexicaPrompt.style.position = 'fixed'
+        } else {
+            taLexicaPrompt.style.position = 'static'
+        }
+    })
+
+    lexicaMasterImageContainer.appendChild(thumbnail_container)
+}
+
+const taLexicaPrompt = document.querySelector('#lexicaPrompt')
+function setLexicaPromptValue(input) {
+    taLexicaPrompt.value = input
+}
+function getLexicaPromptValue() {
+    return taLexicaPrompt.value
+}
+
+document
+    .getElementById('btnSearchLexica')
+    .addEventListener('click', async () => {
+        const search_query = document.getElementById('LexicaSearchField').value
+        const result_json = await requestLexica(search_query)
+
+        const lexica_items = result_json.images
+        const lexica_obj = getLexicaObject()
+        lexica_obj.items = lexica_items
+        displayAllLexicaImages(lexica_items)
+    })
+
+document
+    .getElementById('btnReverseSearchLexica')
+    .addEventListener('click', async () => {
+        //*) check if selection is valid
+        //*) get base64 from selection
+        //*) request global url from base64
+        //*) request Lexica search
+
+        try {
+            const width = html_manip.getWidth()
+            const height = html_manip.getHeight()
+            const selectionInfo = await psapi.getSelectionInfoExe()
+
+            const base64 =
+                await io.IO.getSelectionFromCanvasAsBase64Interface_New(
+                    width,
+                    height,
+                    selectionInfo,
+                    true
+                )
+            const hosted_url = await requestHostedUrl(base64)
+
+            const result_json = await requestLexica(hosted_url)
+
+            const lexica_items = result_json.images
+
+            displayAllLexicaImages(lexica_items)
+        } catch (e) {
+            console.warn(e)
+        }
+    })
+
+const windowEventListener = document
+    .querySelector('body > div')
+    .addEventListener('scroll', () => {
+        const originalPosition = taLexicaPrompt.offsetTop
+        const currentPosition = document.querySelector('body > div').scrollTop
+        taLexicaPrompt.style.position = 'static'
+        // const isScrolledPast = currentPosition > originalPosition
+
+        // if (isScrolledPast) {
+        //     taLexicaPrompt.style.position = 'fixed'
+        // } else {
+        //     taLexicaPrompt.style.position = 'static'
+        // }
+    })
+
+const g_lexica_obj = new Lexica()
+
+function getLexicaObject() {
+    return g_lexica_obj
+}
+function setLexicaObject(lexica_obj) {
+    g_lexica_obj = lexica_obj
+}
+module.exports = {
+    requestLexica,
+    displayLexicaImage,
+    displayAllLexicaImages,
+    requestHostedUrl,
+    Lexica,
+    getLexicaObject,
+    setLexicaObject,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/sd.js

@@ -0,0 +1,370 @@
+const general = require('../general')
+const thumbnail = require('../../thumbnail')
+const html_manip = require('../html_manip')
+const api = require('../api')
+const psapi = require('../../psapi')
+const sdapi = require('../../sdapi_py_re')
+const Enum = require('../../enum')
+//REFACTOR: move to notification.js
+async function promptForUpdate(header_message, long_message) {
+    const shell = require('uxp').shell
+
+    ;(async () => {
+        const buttons = ['Cancel', 'OK']
+        const r1 = await dialog_box.prompt(
+            header_message,
+            long_message,
+            buttons
+            // 'Please Update you Plugin. it will take about 10 seconds to update',
+            // 'update from discord, update from github'[
+            // ['Cancel', 'Discord', 'Github']
+            // ('Cancel', 'OK')
+            // ]
+        )
+        try {
+            let url
+            if (r1 === 'Cancel') {
+                /* cancelled or No */
+                console.log('cancel')
+            } else if (r1 === 'Github') {
+                url =
+                    'https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin'
+                // await py_re.openUrlRequest(url)
+            } else if (r1 === 'Discord') {
+                console.log('Discord')
+                // url = 'https://discord.gg/3mVEtrddXJ'
+                // url = 'https://discord.gg/YkUJXYWK3c'
+                // await py_re.openUrlRequest(url)
+            } else if (r1 === 'Ok') {
+            }
+            // console.log('url: ', url)
+        } catch (e) {
+            console.warn(e, url)
+        }
+    })()
+}
+
+async function updateClickEventHandler(current_version) {
+    try {
+        const online_data = await general.requestOnlineData()
+        const b_need_update = general.compareVersions(
+            current_version,
+            online_data.new_version
+        )
+
+        let header_message = "You're Plugin is up to date."
+        let long_message = ''
+        if (b_need_update) {
+            header_message = `New Version is Available (${online_data.new_version})`
+            long_message = online_data.update_message
+        }
+
+        await promptForUpdate(header_message, long_message)
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function viewMaskExpansion() {
+    if (g_generation_session.base64maskExpansionImage) {
+        const mask_src = general.base64ToBase64Url(
+            g_generation_session.base64maskExpansionImage
+        )
+        html_manip.setInitImageMaskSrc(mask_src)
+    } else {
+        console.log(
+            'the mask has not been expanded, g_generation_session.base64maskExpansionImage is empty'
+        )
+    }
+}
+function viewDrawnMask() {
+    //this is the generated mask or user drawn mask, but it's not the mask after expansion
+    if (g_generation_session.activeBase64MaskImage) {
+        const mask_src = general.base64ToBase64Url(
+            g_generation_session.activeBase64MaskImage
+        )
+        html_manip.setInitImageMaskSrc(mask_src)
+    } else {
+        console.log('no mask is available')
+    }
+}
+
+async function clipInterrogate() {
+    try {
+        const width = html_manip.getWidth()
+        const height = html_manip.getHeight()
+        const selectionInfo = await psapi.getSelectionInfoExe()
+
+        const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
+            width,
+            height,
+            selectionInfo,
+            true
+        )
+
+        const url = `${g_sd_url}/sdapi/v1/interrogate`
+
+        const payload = {
+            image: base64,
+            model: 'clip',
+        }
+        const result_json = await api.requestPost(url, payload)
+        console.log(result_json)
+        return result_json
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+function getHrScaleSliderSDValue() {
+    sd_value = html_manip.getSliderSdValue('hrScaleSlider', 1, 100, 1, 4)
+    return sd_value
+}
+function setHrScaleSliderSDValue(sd_value) {
+    const slider_id = 'hrScaleSlider'
+    const label_id = 'hrScaleLabel'
+    html_manip.setSliderSdValue(slider_id, label_id, sd_value, 1, 100, 1, 4)
+}
+function getImageCfgScaleSDValue() {
+    sd_value = html_manip.getSliderSdValue('slImageCfgScale', 0, 30, 0, 3)
+    return sd_value
+}
+function setImageCfgScaleSDValue(sd_value) {
+    const slider_id = 'slImageCfgScale'
+    const label_id = 'lImageCfgScale'
+    // debugger
+    html_manip.setSliderSdValue(slider_id, label_id, sd_value, 0, 30, 0, 3)
+}
+
+function updateHrScaleFromToLabel() {
+    //get width and height
+    //get hr scale by
+    //find the hr scale and height
+
+    const hr_scale = getHrScaleSliderSDValue()
+    const [width, height] = [html_manip.getWidth(), html_manip.getHeight()]
+    const [hr_width, hr_height] = [
+        parseInt(width * hr_scale),
+        parseInt(height * hr_scale),
+    ]
+    document.getElementById(
+        'lHrScaleFromTo'
+    ).textContent = `${width}x${height} -> ${hr_width}x${hr_height}`
+}
+function getLoraModelPrompt(lora_model_name) {
+    return `<lora:${lora_model_name}:1>`
+}
+async function populateLoraModelMenu() {
+    try {
+        const lora_models_json = await sdapi.requestLoraModels()
+        const lora_models_names = Object.keys(lora_models_json)
+
+        document.getElementById('mLoraModelMenu').innerHTML = ''
+
+        html_manip.populateMenu(
+            'mLoraModelMenu',
+            'mLoraModelItemClass',
+            lora_models_names,
+            (item, item_html_element) => {
+                item_html_element.innerHTML = item
+                item_html_element.onclick = () => {
+                    const lora_prompt = getLoraModelPrompt(item)
+                    const prompt = html_manip.getPrompt()
+                    html_manip.autoFillInPrompt(`${prompt} ${lora_prompt}`)
+                }
+            },
+            false,
+            'Select Lora'
+        )
+    } catch (e) {
+        console.warn('populateLoraModelMenu error: ', e)
+    }
+}
+
+function displayImageCfgScaleSlider(mode) {
+    const b_slider_enabled = document.getElementById(
+        'chUseImageCfgScaleSlider'
+    ).checked
+    if (b_slider_enabled) {
+        if (mode === Enum.generationModeEnum['Txt2Img']) {
+            document.getElementById('slImageCfgScale').style.display = 'none'
+        } else if (mode === Enum.generationModeEnum['Img2Img']) {
+            document.getElementById('slImageCfgScale').style.display = 'block'
+        } else if (mode === Enum.generationModeEnum['Inpaint']) {
+            document.getElementById('slImageCfgScale').style.display = 'block'
+        } else if (mode === Enum.generationModeEnum['Outpaint']) {
+            document.getElementById('slImageCfgScale').style.display = 'none'
+        } else {
+            document.getElementById('slImageCfgScale').style.display = 'none'
+        }
+    } else {
+        document.getElementById('slImageCfgScale').style.display = 'none'
+    }
+}
+function initInitMaskElement() {
+    //make init mask image use the thumbnail class with buttons
+    const mask_image_html = html_manip.getInitImageMaskElement()
+    const mask_parent_element = mask_image_html.parentElement
+
+    this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
+        mask_image_html,
+        'viewer-image-container'
+    )
+    mask_parent_element.appendChild(thumbnail_container)
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        this.thumbnail_container,
+        'svg_sp_btn',
+        'view original mask',
+
+        viewDrawnMask,
+        null
+    )
+    thumbnail.Thumbnail.addSPButtonToContainer(
+        this.thumbnail_container,
+        'svg_sp_btn_expand',
+        'view modified mask',
+
+        viewMaskExpansion,
+        null
+    )
+    populateLoraModelMenu() // no need for await
+}
+
+async function refreshSDTab() {
+    populateLoraModelMenu()
+}
+document.getElementById('hrScaleSlider').addEventListener('input', (evt) => {
+    const sd_value = getHrScaleSliderSDValue()
+    setHrScaleSliderSDValue(sd_value.toFixed(2))
+    updateHrScaleFromToLabel()
+})
+document.getElementById('btnUpdate').addEventListener('click', async () => {
+    await updateClickEventHandler(g_version)
+})
+
+document
+    .getElementById('slMaskExpansion')
+    .addEventListener('change', async (evt) => {
+        document.getElementById('slMaskExpansion')
+        const original_mask = g_generation_session.activeBase64MaskImage
+        if (original_mask) {
+            //only if mask is available
+            // use blurry and expanded mask
+            const iterations = evt.target.value
+            const modified_mask = await py_re.maskExpansionRequest(
+                original_mask,
+                iterations
+            )
+            if (modified_mask) {
+                g_generation_session.base64maskExpansionImage = modified_mask
+                viewMaskExpansion()
+            }
+        }
+    })
+
+document
+    .getElementById('btnInterrogate')
+    .addEventListener('click', async () => {
+        // start sudo timer after 1 seconds delay
+        setTimeout(() => {
+            g_generation_session.sudo_timer_id =
+                general.sudoTimer('Interrogate')
+        }, 1000)
+        const interrogate_result = await clipInterrogate()
+
+        if (interrogate_result.caption) {
+            html_manip.autoFillInPrompt(interrogate_result.caption)
+        }
+
+        // after the clipInterrogate finish stop the timer
+
+        html_manip.updateProgressBarsHtml(0, 'No work in progress')
+        g_generation_session.sudo_timer_id = clearInterval(
+            g_generation_session.sudo_timer_id
+        )
+    })
+
+function ctrlBackspaceDelete(text) {
+    try {
+        let index = text.indexOf(String.fromCharCode(127))
+        let new_text = text
+        if (index >= 0) {
+            // Ctrl + Enter pressed
+            console.log('Ctrl + Enter pressed')
+
+            function ctrlBackspaceDeleteLogic(string, index) {
+                // if (index < 1) {
+                //     return string
+                // }
+                // let i = index - 1
+                // while (
+                //     i > 0 &&
+                //     /\s/.test(string[i - 1]) === /\s/.test(string[i])
+                // ) {
+                //     i--
+                // }
+                // return string.slice(0, i) + string.slice(index)
+
+                if (index < 1) {
+                    return string
+                }
+                let i = index - 1
+                if (/\s/.test(string[i])) {
+                    while (i > 0 && /\s/.test(string[i - 1])) {
+                        i--
+                    }
+                } else {
+                    while (
+                        i > 0 &&
+                        /\s/.test(string[i - 1]) === /\s/.test(string[i])
+                    ) {
+                        i--
+                    }
+                }
+                return string.slice(0, i) + string.slice(index)
+            }
+            new_text = ctrlBackspaceDeleteLogic(text, index + 1) //+ 1 to also delete the backspace delete char
+        }
+
+        return new_text
+    } catch (error) {
+        console.warn(error)
+    }
+}
+
+// document.getElementById('taPrompt').addEventListener('input', (event) => {
+//     // debugger
+//     const value = event.target.value
+//     console.log('value: ', value)
+//     let index = value.indexOf(String.fromCharCode(127))
+//     console.log('index:', index)
+//     const new_text = ctrlBackspaceDelete(value)
+//     event.target.value = new_text
+//     console.log('new_text: ', new_text)
+// })
+function initSDTab() {
+    initInitMaskElement()
+    html_manip.sliderAddEventListener_new(
+        'slImageCfgScale',
+        'lImageCfgScale',
+        0,
+        30,
+        0,
+        3
+    )
+}
+
+initSDTab()
+module.exports = {
+    updateClickEventHandler,
+    viewMaskExpansion,
+    viewDrawnMask,
+    clipInterrogate,
+    getHrScaleSliderSDValue,
+    getLoraModelPrompt,
+    populateLoraModelMenu,
+    getImageCfgScaleSDValue,
+    setImageCfgScaleSDValue,
+    refreshSDTab,
+    displayImageCfgScaleSlider,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/settings.js

@@ -0,0 +1,137 @@
+const io = require('../io')
+
+function getUseSharpMask() {
+    const isChecked = document.getElementById('chUseSharpMask').checked
+    return isChecked
+}
+function setUseSharpMask() {
+    console.warn('setUseSharpMask is not setup')
+}
+
+function getUseLiveProgressImage() {
+    const b_live_update = document.getElementById('chLiveProgressImage').checked
+    return b_live_update
+}
+function setUseLiveProgressImage(b_live_update) {
+    document.getElementById('chLiveProgressImage').checked = b_live_update
+}
+
+function getExtensionType() {
+    return [...document.getElementsByClassName('rbExtensionType')].filter(
+        (e) => e.checked == true
+    )[0].value
+}
+
+document.getElementById('btnGetDocPath').addEventListener('click', async () => {
+    const docPath = await io.IOFolder.getDocumentFolderNativePath()
+    document.getElementById('tiDocPath').value = docPath
+
+    const uuid = await getUniqueDocumentId()
+    doc_entry = await io.IOFolder.getDocFolder(uuid)
+    await shell.openPath(doc_entry.nativePath)
+})
+
+document.getElementById('btnSdUrl').addEventListener('click', async () => {
+    //change the sdUrl in server in proxy server
+    // console.log('you clicked btnSdUrl')
+    let new_sd_url = document.getElementById('tiSdUrl').value
+    changeSdUrl(new_sd_url)
+})
+
+function getSdUrlHtml() {
+    let sd_url = document.getElementById('tiSdUrl').value
+    return sd_url
+}
+function setSdUrlHtml(sd_url) {
+    document.getElementById('tiSdUrl').value = sd_url
+}
+async function changeSdUrl(sd_url) {
+    sd_url = sd_url.trim()
+    console.log('sd_url.trim(): ', sd_url)
+
+    if (sd_url.length > 0) {
+        //check if the last character of the url has "/" or '\' and remove it
+
+        last_index = sd_url.length - 1
+
+        if (sd_url[last_index] === '/' || sd_url[last_index] === '\\') {
+            sd_url = sd_url.slice(0, -1)
+        }
+
+        //submit the change
+        await sdapi.changeSdUrl(sd_url)
+    }
+}
+
+async function saveSettings() {
+    const settings_tab_settings = {
+        use_sharp_mask: getUseSharpMask(),
+        extension_type: getExtensionType(),
+        sd_url: getSdUrlHtml(),
+    }
+
+    const folder = await io.IOFolder.getSettingsFolder()
+    await io.IOJson.saveJsonToFile(
+        settings_tab_settings,
+        folder,
+        'settings_tab.json'
+    )
+}
+async function loadSettings() {
+    try {
+        const folder = await io.IOFolder.getSettingsFolder()
+        let settings_tab_settings = await io.IOJson.loadJsonFromFile(
+            folder,
+            'settings_tab.json'
+        )
+        setSdUrlHtml(settings_tab_settings['sd_url'])
+        await changeSdUrl(settings_tab_settings['sd_url'])
+    } catch (e) {
+        console.warn(e)
+    }
+}
+
+document.getElementById('chUseSharpMask').addEventListener('change', (ev) => {
+    const isChecked = ev.target.checked
+    if (isChecked) {
+        document.getElementById('slMaskBlur').setAttribute('disabled')
+    } else {
+        document.getElementById('slMaskBlur').removeAttribute('disabled')
+    }
+})
+
+document.getElementById('chUseSmartObject').addEventListener('change', (ev) => {
+    const isChecked = ev.target.checked
+    if (isChecked) {
+        g_b_use_smart_object = true
+    } else {
+        g_b_use_smart_object = false
+    }
+})
+
+function getUseOriginalPrompt() {
+    const b_use_original_prompt = document.getElementById(
+        'chUseOriginalPrompt'
+    ).checked
+    return b_use_original_prompt
+}
+
+document
+    .getElementById('btnSaveSettingsTabs')
+    .addEventListener('click', async () => {
+        await saveSettings()
+    })
+
+module.exports = {
+    getUseSharpMask,
+    setUseSharpMask,
+    getExtensionType,
+    getSdUrlHtml,
+    setSdUrlHtml,
+    changeSdUrl,
+    loadSettings,
+    saveSettings,
+    getUseLiveProgressImage,
+    setUseLiveProgressImage,
+    getUseOriginalPrompt,
+}

Auto-Photoshop-StableDiffusion-Plugin/utility/tab/share_tab.js

@@ -0,0 +1,17 @@
+const chLiveProgressImageElements = document.getElementsByClassName(
+    'chLiveProgressImageClass'
+)
+
+const default_preview_value = document.getElementById(
+    'chLiveProgressImage'
+).checked
+
+chLiveProgressImageElements.forEach((element) => {
+    element.checked = default_preview_value
+    element.addEventListener('click', (event) => {
+        value = element.checked
+        chLiveProgressImageElements.forEach((element) => {
+            element.checked = value
+        })
+    })
+})

Auto-Photoshop-StableDiffusion-Plugin/utility/tips.js

@@ -0,0 +1,40 @@
+//tips that will display when you hover over a html element
+const tips_json = {
+    snapshot: '',
+    txt2img: 'use this mode to generate images from text only',
+    img2img: 'use this mode to generate variation of an image',
+    inpaint:
+        'use this mode to generate variation of a small area of an image, while keeping the rest of the image intact',
+    outpaint:
+        'use this mode to (1) fill any missing area of an image,(2) expand an image',
+    generate: 'create',
+    discardAll: 'Delete all generated images from the canvas',
+    acceptAll: 'Keep all generated images on the canvas',
+    acceptSelected: 'Keep only the highlighted images',
+    discardSelected: 'Delete only the highlighted images',
+    modelMenu: 'select a model',
+    refresh: 'Refresh the plugin, only fixes minor issues.',
+    prompt_shortcut: 'use {keyword} form the prompts library',
+    inpaint: 'use when you need to modify an already existing part of an image',
+    img2img: 'use this mode when you want to generate variation of an image',
+    txt2img: 'use this mode to generate images based on text only',
+    batchNumber:
+        'the number of images to generate at once.The larger the number more VRAM stable diffusion will use.',
+    steps: 'how long should stable diffusion take to generate an image',
+    selection_mode_ratio:
+        'will auto fill the width and height slider to the same ratio as the selection area',
+    selection_mode_precise:
+        'auto fill width and height slider to the size as the selection area',
+    selection_mode_ignore:
+        'you will have to fill the width and height slider manually',
+    cfg_scale: 'larger value will put more emphasis on the prompt',
+    preset_menu:
+        'auto fill the plugin with smart settings, to speed up your working process.',
+    width: 'the generated image width',
+    height: 'the generated image height',
+    mask_expansion:
+        "the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur",
+    mask_content_fill: '',
+}
+
+module.exports = { tips_json }

Auto-Photoshop-StableDiffusion-Plugin/utility/ui.js

@@ -0,0 +1,404 @@
+const html_manip = require('./html_manip')
+const presets = require('./presets/preset')
+const layer_util = require('../utility/layer')
+const psapi = require('../psapi')
+const Enum = require('../enum')
+const { executeAsModal } = require('photoshop').core
+
+class UI {
+    constructor() {}
+
+    onStartSessionUI() {
+        // will toggle the buttons needed when a generation session start
+
+        const accept_class_btns = Array.from(
+            document.getElementsByClassName('acceptClass')
+        )
+
+        const discard_class_btns = Array.from(
+            document.getElementsByClassName('discardClass')
+        )
+
+        const discard_selected_class_btns = Array.from(
+            document.getElementsByClassName('discardSelectedClass')
+        )
+
+        const accept_selected_class_btns = Array.from(
+            document.getElementsByClassName('acceptSelectedClass')
+        )
+
+        //show the accept and discard buttons when a new session is active
+        accept_class_btns.forEach(
+            (element) => (element.style.display = 'inline-block')
+        )
+        discard_class_btns.forEach(
+            (element) => (element.style.display = 'inline-block')
+        )
+        discard_selected_class_btns.forEach(
+            (element) => (element.style.display = 'inline-block')
+        )
+        accept_selected_class_btns.forEach(
+            (element) => (element.style.display = 'inline-block')
+        )
+
+        this.generateMoreUI()
+    }
+    onActiveSessionUI() {}
+    generateModeUI(mode) {
+        const generate_btns = Array.from(
+            document.getElementsByClassName('btnGenerateClass')
+        )
+        generate_btns.forEach((element) => {
+            element.textContent = `Generate ${mode}`
+        })
+        html_manip.setGenerateButtonsColor('generate', 'generate-more')
+    }
+    generateMoreUI() {
+        const generate_btns = Array.from(
+            document.getElementsByClassName('btnGenerateClass')
+        )
+        const generation_mode = g_generation_session.mode
+        const generation_name = getCurrentGenerationModeByValue(generation_mode)
+        generate_btns.forEach((element) => {
+            element.textContent = `Generate More ${generation_name}`
+        })
+        html_manip.setGenerateButtonsColor('generate-more', 'generate')
+    }
+
+    onEndSessionUI() {
+        const accept_class_btns = Array.from(
+            document.getElementsByClassName('acceptClass')
+        )
+
+        const discard_class_btns = Array.from(
+            document.getElementsByClassName('discardClass')
+        )
+        const discard_selected_class_btns = Array.from(
+            document.getElementsByClassName('discardSelectedClass')
+        )
+
+        const accept_selected_class_btns = Array.from(
+            //Node: change customClass to acceptSelectedClass
+            document.getElementsByClassName('acceptSelectedClass')
+        )
+
+        accept_class_btns.forEach((element) => (element.style.display = 'none'))
+        discard_class_btns.forEach(
+            (element) => (element.style.display = 'none')
+        )
+        discard_selected_class_btns.forEach(
+            (element) => (element.style.display = 'none')
+        )
+
+        accept_selected_class_btns.forEach(
+            (element) => (element.style.display = 'none')
+        )
+
+        this.generateModeUI(g_sd_mode)
+    }
+
+    setGenerateBtnText(textContent) {
+        const generate_btns = Array.from(
+            document.getElementsByClassName('btnGenerateClass')
+        )
+        generate_btns.forEach((element) => {
+            element.textContent = textContent
+        })
+    }
+}
+
+// const defaultSettings = {
+//   model: null,
+//   prompt_shortcut: null,
+//   positive_prompt: "",
+//   negative_prompt: "",
+//   selection_mode: null,
+//   batch_number: 1,
+//   steps: 20,
+//   width: 512 ,
+//   height:512,
+//   firstphase_width:512,
+//   firstphase_height:512,
+//   cfg:7,
+//   denoising_strength:0.7,
+//   hi_res_denoising_strength:0.7,
+//   mask_blur: 8,
+//   inpaint_at_full_res: false,
+//   hi_res_fix:false,
+//   inpaint_padding:0,
+//   seed:-1,
+//   samplers: null,
+//   mask_content:null
+//   }
+
+class UIElement {
+    constructor() {
+        this.name
+        this.html_elem
+        this.sd_value
+    }
+    setValue() {}
+    getValue() {}
+}
+function createUIElement(getter, setter) {
+    let ui_element_obj = new UIElement()
+    ui_element_obj.getValue = getter
+    ui_element_obj.setValue = setter
+    return ui_element_obj
+}
+class UISettings {
+    // get and set the settings of the ui. the stable diffusion settings not the human friendly settings
+    constructor() {
+        // this.width = new ui.UIElement()
+        // this.width.getValue = html_manip.getWidth
+        // this.width.setValue = html_manip.autoFillInWidth
+        this.width = createUIElement(
+            html_manip.getWidth,
+            html_manip.autoFillInWidth
+        )
+        this.height = createUIElement(
+            html_manip.getHeight,
+            html_manip.autoFillInHeight
+        )
+        this.steps = createUIElement(
+            html_manip.getSteps,
+            html_manip.autoFillInSteps
+        )
+        this.batch_number = createUIElement(
+            html_manip.getBatchNumber,
+            html_manip.autoFillInBatchNumber
+        )
+        this.firstphase_width = createUIElement(
+            html_manip.getHrWidth,
+            html_manip.autoFillInHRWidth
+        )
+        this.firstphase_height = createUIElement(
+            html_manip.getHrHeight,
+            html_manip.autoFillInHRHeight
+        )
+        this.cfg = createUIElement(html_manip.getCFG, html_manip.setCFG)
+        this.denoising_strength = createUIElement(
+            html_manip.getDenoisingStrength,
+            html_manip.autoFillInDenoisingStrength
+        )
+
+        this.mask_content = createUIElement(
+            html_manip.getMaskContent,
+            html_manip.setMaskContent
+        )
+        this.seed = createUIElement(html_manip.getSeed, html_manip.setSeed)
+        this.prompt = createUIElement(
+            html_manip.getPrompt,
+            html_manip.autoFillInPrompt
+        )
+        this.negative_prompt = createUIElement(
+            html_manip.getNegativePrompt,
+            html_manip.autoFillInNegativePrompt
+        )
+        this.mask_blur = createUIElement(
+            html_manip.getMaskBlur,
+            html_manip.setMaskBlur
+        )
+        this.mask_expansion = createUIElement(
+            html_manip.getMaskExpansion,
+            html_manip.setMaskExpansion
+        )
+        this.samplers = createUIElement(
+            html_manip.getCheckedSamplerName,
+            html_manip.autoFillInSampler
+        )
+
+        this.uiElements = {
+            // model: null,
+            // prompt_shortcut: null,
+            prompt: this.prompt,
+            negative_prompt: this.negative_prompt,
+            // selection_mode: null,
+            batch_size: this.batch_number,
+            steps: this.steps,
+            width: this.width,
+            height: this.height,
+            firstphase_width: this.firstphase_width,
+            firstphase_height: this.firstphase_height,
+            cfg_scale: this.cfg,
+            denoising_strength: this.denoising_strength,
+            // hi_res_denoising_strength:0.7,
+            mask_blur: this.mask_blur,
+            mask_expansion: this.mask_expansion,
+            // inpaint_at_full_res: false,
+            // hi_res_fix:false,
+            // inpaint_padding:0,
+            seed: this.seed,
+            sampler_index: this.samplers,
+            mask_content: this.mask_content,
+        }
+    }
+
+    autoFillInSettings(settings) {
+        for (const [name, value] of Object.entries(settings)) {
+            if (this.uiElements.hasOwnProperty(name) && value) {
+                //get the values for debugging
+                const old_value = this.uiElements[name].getValue()
+                console.log(
+                    '(name,old_value) => newValue:',
+                    name,
+                    old_value,
+                    value
+                )
+                //set the value
+                this.uiElements[name].setValue(value)
+            }
+        }
+    }
+    getSettings() {
+        let settings = {}
+        for (const [name, ui_element] of Object.entries(this.uiElements)) {
+            if (ui_element) {
+                const value = ui_element.getValue()
+                settings[name] = value
+            }
+        }
+        return settings
+    }
+
+    saveAsJson(json_file_name, settings) {
+        for (const [name, value] of Object.entries(settings)) {
+            if (this.uiElements.hasOwnProperty(name) && value) {
+                //get the values for debugging
+                const old_value = this.uiElements[name].getValue()
+                console.log(
+                    '(name,old_value) => newValue:',
+                    name,
+                    old_value,
+                    value
+                )
+
+                //set the value
+            }
+        }
+    }
+}
+// const ui_settings = new UISettings()
+
+function loadPreset(ui_settings, preset) {
+    console.log('preset:', preset)
+    ui_settings.autoFillInSettings(preset)
+}
+
+function loadLatentNoiseSettings(ui_settings) {
+    loadPreset(ui_settings, presets.LatentNoiseSettings)
+}
+
+function loadFillSettings(ui_settings) {
+    loadPreset(ui_settings, presets.FillSettings)
+}
+function loadOriginalSettings(ui_settings) {
+    loadPreset(ui_settings, presets.OriginalSettings)
+}
+async function loadHealBrushSettings(ui_settings) {
+    document.getElementById('rbModeInpaint').click()
+
+    loadPreset(ui_settings, presets.HealBrushSettings)
+}
+function loadCustomPreset(ui_settings_obj, custom_preset_settings) {
+    loadPreset(ui_settings_obj, custom_preset_settings)
+}
+
+function loadCustomPresetsSettings() {}
+async function mapCustomPresetsToLoaders(ui_settings_obj) {
+    const name_to_settings_obj = await presets.getAllCustomPresetsSettings(
+        Enum.PresetTypeEnum['SDPreset']
+    )
+    const preset_name_to_loader_obj = {}
+    for (const [preset_name, preset_settings] of Object.entries(
+        name_to_settings_obj
+    )) {
+        preset_name_to_loader_obj[preset_name] = () => {
+            loadCustomPreset(ui_settings_obj, preset_settings)
+        }
+    }
+    return preset_name_to_loader_obj
+}
+
+const g_nativePresets = {
+    fill: loadFillSettings,
+    original: loadOriginalSettings,
+    'latent noise': loadLatentNoiseSettings,
+    'Heal Brush': loadHealBrushSettings,
+}
+
+async function getLoadedPresets(ui_settings_obj) {
+    let customPresets
+
+    customPresets = await mapCustomPresetsToLoaders(ui_settings_obj)
+    console.log('customPresets: ', customPresets)
+    let loadedPresets = {
+        ...g_nativePresets,
+        ...customPresets,
+    }
+    return loadedPresets
+}
+let g_ui_settings_object = new UISettings()
+function getUISettingsObject() {
+    return g_ui_settings_object
+}
+
+//REFACTOR: move to ui.js
+function addPresetMenuItem(preset_title) {
+    // console.log(model_title,model_name)
+    const menu_item_element = document.createElement('sp-menu-item')
+    menu_item_element.className = 'mPresetMenuItem'
+    menu_item_element.innerHTML = preset_title
+
+    // menu_item_element.addEventListener('select',()=>{
+    //   preset_func(g_ui_settings)
+    // })
+    return menu_item_element
+}
+//REFACTOR: move to ui.js
+async function populatePresetMenu() {
+    document.getElementById('mPresetMenu').innerHTML = ''
+    const divider_elem = document.createElement('sp-menu-divider')
+    const preset_name = 'Select Smart Preset'
+    const preset_func = () => {}
+    const dummy_preset_item = addPresetMenuItem(preset_name, preset_func)
+    dummy_preset_item.setAttribute('selected', 'selected')
+    // dummy_preset_item.setAttribute('disabled')
+    document.getElementById('mPresetMenu').appendChild(dummy_preset_item)
+    document.getElementById('mPresetMenu').appendChild(divider_elem)
+    const presets = await getLoadedPresets(g_ui_settings_object)
+    for ([key, value] of Object.entries(presets)) {
+        const preset_menu_item = addPresetMenuItem(key, value)
+        document.getElementById('mPresetMenu').appendChild(preset_menu_item)
+    }
+}
+
+populatePresetMenu()
+//REFACTOR: move to preset_tab.js
+document
+    .getElementById('mPresetMenu')
+    .addEventListener('change', async (evt) => {
+        const preset_index = evt.target.selectedIndex
+        const preset_name = evt.target.options[preset_index].textContent
+        const presets = await getLoadedPresets(g_ui_settings_object)
+        if (presets.hasOwnProperty(preset_name)) {
+            const loader = presets[preset_name]
+            if (loader.constructor.name === 'AsyncFunction') {
+                await loader(g_ui_settings_object)
+            } else {
+                loader(g_ui_settings_object)
+            }
+        }
+    })
+
+module.exports = {
+    UI,
+    UIElement,
+    UISettings,
+    loadLatentNoiseSettings,
+    loadFillSettings,
+    loadHealBrushSettings,
+    getLoadedPresets,
+    getUISettingsObject,
+    populatePresetMenu,
+}

Auto-Photoshop-StableDiffusion-Plugin/viewer.js

@@ -0,0 +1,861 @@
+// output image class: one image to one layer
+// 	* path:
+// 	* image layer
+// 	* viewer()
+// 	* select()
+
+// * init image class: has three layers
+// 	* path :
+// 	* init image group layer
+// 	* init image layer
+// 	* background layer
+
+// * mask class:
+// 	* path
+// 	* mask group
+// 	* white mask
+// 	* balck layer
+// 	* select()
+// 	* viewe()
+const general = require('./utility/general')
+const Enum = require('./enum')
+const psapi = require('./psapi')
+const layer_util = require('./utility/layer')
+const thumbnail = require('./thumbnail')
+const ViewerObjState = {
+    Delete: 'delete',
+    Unlink: 'unlink',
+}
+
+class ViewerImage {
+    constructor() {
+        this.img_html = null //
+        this.thumbnail_container = null
+        this.is_highlighted = false
+        this.can_highlight = true
+        this.is_active = false // active is a temporary highlight , the yellow/orang highlight
+        this.state = ViewerObjState['Unlink']
+
+        // true will delete the layers from the layer stacks when the session ends,
+        // false mean use this.state to determine whither you delete the layer or not
+        this.autoDelete = false
+        this.viewerManager = null // store link to the viewer manager of this document
+        this.viewerObjectType
+        this.objectId
+    }
+    info() {
+        console.log('state: ', this.state)
+    }
+    visible(visibleOn) {}
+    select() {}
+    isActive() {
+        return this.is_active
+    }
+    active(isActive) {
+        if (isActive) {
+            //unlink it if it's active
+            // this.state = ViewerObjState['Unlink']
+
+            this.img_html.classList.add('viewerImgActive')
+        } else {
+            if (this.getHighlight() === false) {
+                // if it's not active and it's not highlighted
+                // this.state = ViewerObjState['Delete']
+            } else {
+                // this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
+            }
+            this.img_html.classList.remove('viewerImgActive')
+        }
+        this.is_active = isActive
+    }
+    setAutoDelete(auto_delete) {
+        this.autoDelete = auto_delete
+    }
+
+    isSameLayer(layer_id) {}
+    setHighlight(is_highlighted) {
+        if (this.can_highlight) {
+            this.is_highlighted = is_highlighted
+            if (this.is_highlighted) {
+                // this.state = ViewerObjState['Unlink']
+                this.img_html.classList.add('viewerImgSelected')
+            } else {
+                this.img_html.classList.remove('viewerImgSelected')
+                // this.state = ViewerObjState["Delete"]
+            }
+        }
+    }
+    getHighlight() {
+        return this.is_highlighted
+    }
+    toggleHighlight() {
+        const toggle_value = !this.getHighlight()
+        this.setHighlight(toggle_value)
+        // this.is_highlighted = !this.is_highlighted
+        // this.img_html.classList.toggle("viewerImgSelected")
+    }
+    setImgHtml() {}
+
+    async delete() {
+        try {
+            if (this.img_html) {
+                this.img_html.remove() //delete the img html element
+            }
+            if (this.thumbnail_container) {
+                this.thumbnail_container.remove()
+            }
+
+            //1) it's output layer // can_highlight && this.getHighlight()
+            //2) it init or mask relate layers // this.autoDelete
+            //3) it output layer that been used as init layer // !can_highlight && !this.autoDelete
+
+            // do 1) and 2) here . test for 3) in InitImage
+
+            //1)
+            if (this.can_highlight && (this.getHighlight() || this.is_active)) {
+                //keep if can be highlighted and either is highlighted or active
+                this.state = ViewerObjState['Unlink']
+            } else {
+                //
+                this.state = ViewerObjState['Delete']
+            }
+
+            if (this.autoDelete) {
+                //remove if it's first automated layer
+                this.state = ViewerObjState['Delete']
+            }
+
+            // else {
+            //   //discard only if it's
+            //   if (this.autoDelete){
+            //     this.state = ViewerObjState['Delete']
+            //   }
+            // }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    unlink() {
+        //keep the layer but unlink it from the ui
+        try {
+            this.img_html.remove() //delete the img html element
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    createThumbnailNew(img, _) {
+        this.img_html = img
+        this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
+            img,
+            'viewer-image-container'
+        )
+        thumbnail.Thumbnail.addSPButtonToContainer(
+            this.thumbnail_container,
+            'svg_sp_btn',
+            'Use this as an initial image',
+
+            this.useOutputImageAsInitImage,
+            img
+        )
+    }
+    useOutputImageAsInitImage = async () => {
+        //set init image event listener, use when settion is active
+        // const layer = await app.activeDocument.activeLayers[0]
+        try {
+            // console.log('this.img_html:', this.img_html)
+            // await executeAsModal(() => {
+            //     this.visible(true)
+            // })
+            // await this.select(true) //select() does take arguments
+            // this.active(true)
+            await executeAsModal(async () => {
+                await this.click(Enum.clickTypeEnum['Click'])
+            })
+
+            const layer = layer_util.Layer.doesLayerExist(this.layer)
+                ? this.layer
+                : await app.activeDocument.activeLayers[0]
+
+            // const layer = this.layer
+            const image_info = await psapi.silentSetInitImage(
+                layer,
+                random_session_id
+            )
+            const image_name = image_info['name']
+            const path = `./server/python_server/init_images/${image_name}`
+            g_viewer_manager.addInitImageLayers(layer, path, false)
+            await g_viewer_manager.loadInitImageViewerObject(path)
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    createThumbnail(img, b_button_visible = true) {
+        this.img_html = img
+        // Create new container element
+        this.thumbnail_container = document.createElement('div')
+
+        this.thumbnail_container.className = 'viewer-image-container'
+
+        const elem = document.getElementById('svg_sp_btn')
+
+        // Create a copy of it
+        const clone = elem.cloneNode(true)
+        const button = clone
+        button.style.display = null
+        button.setAttribute(
+            'title',
+            'use this image to generate more variance like it'
+        )
+
+        // Create button element
+        // const button = document.createElement('sp-button');
+        button.className = 'viewer-image-button'
+        // button.innerHTML = "Button";
+        if (!b_button_visible) {
+            button.style.display = 'none'
+        }
+        button.addEventListener('click', async () => {
+            await useOutputImageAsInitImage()
+        })
+
+        // Append elements to container
+        this.thumbnail_container.appendChild(this.img_html)
+        this.thumbnail_container.appendChild(button)
+
+        // this.img_html = container
+    }
+}
+
+class OutputImage extends ViewerImage {
+    constructor(layer, path, viewer_manager) {
+        super()
+        this.layer = layer
+        this.path = path
+        this.img_html = null
+        this.viewerManager = viewer_manager
+        this.viewerObjectType = Enum.ViewerObjectTypeEnum['OutputImage']
+        this.objectId = path // the path is unique, so we will use it as an id
+    }
+    async click(click_type) {
+        console.log('click_type: ', click_type)
+        // if (this.isActive() && click_type === Enum.clickTypeEnum['Click']) {
+        //     //convert consecutive clicks to AltClick
+        //     click_type = Enum.clickTypeEnum['SecondClick']
+        //     console.log('converted click_type: ', click_type)
+        // }
+
+        if (click_type === Enum.clickTypeEnum['Click']) {
+            //select layer
+            //turn the layer visible
+            //set the layer to active
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.active(true)
+        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.setHighlight(true)
+            this.active(true)
+            // if (this.viewerManager.last_selected_viewer_obj) {
+            //     //if the last selected layer is valid then converted last selected layer into highlight layer
+            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
+            // }
+        } else if (click_type === Enum.clickTypeEnum['AltClick']) {
+            // this.viewerManager.last_selected_viewer_obj = null
+            this.setHighlight(false)
+            this.visible(false)
+            this.active(false)
+
+            await psapi.unselectActiveLayersExe() //Note:can we move to ViewerManager.click()
+        } else if (click_type === Enum.clickTypeEnum['SecondClick']) {
+            //select layer
+            //turn the layer visible
+            //set the layer to active
+            this.visible(false)
+            await this.select(false) //select() does take arguments
+            this.active(false)
+        }
+        this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+    }
+    visible(visibleOn) {
+        //turn the visibility for the layer
+        try {
+            super.visible(visibleOn)
+            if (layer_util.Layer.doesLayerExist(this.layer)) {
+                this.layer.visible = visibleOn
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    async select() {
+        //select the layer
+        super.select()
+        if (layer_util.Layer.doesLayerExist(this.layer)) {
+            await psapi.selectLayersExe([this.layer])
+            //   console.log(`${this.layer.id} got selected`);
+        }
+    }
+
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        const is_same = this.layer.id == layer_id
+        return is_same
+    }
+    isSameObject(object) {
+        if (
+            layer_util.Layer.doesLayerExist(this.layer) &&
+            layer_util.Layer.doesLayerExist(object.layer)
+        ) {
+            return this.layer.id === object.layer.id
+        }
+        return false
+    }
+
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
+    }
+    async delete() {
+        try {
+            await super.delete()
+            // this.img_html.remove()//delete the img html element
+            if (this.state === ViewerObjState['Delete']) {
+                await psapi.cleanLayers([this.layer])
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    info() {
+        super.info()
+    }
+    // unlink(){
+    //   //keep the layer but unlink it from the ui
+    //   try{
+
+    //     super.unlink()
+    //     this.img_html.remove()//delete the img html element
+
+    //   }catch(e){
+    //     console.warn(e)
+    //   }
+    // }
+}
+
+class InitImage extends ViewerImage {
+    constructor(init_group, init_snapshot, solid_layer, path, viewer_manager) {
+        super()
+        this.init_group = init_group
+        this.init_snapshot = init_snapshot
+        this.solid_layer = solid_layer
+
+        this.path = path
+        this.can_highlight = false
+        this.viewerManager = viewer_manager
+        this.viewerObjectType = Enum.ViewerObjectTypeEnum['InitImage']
+        this.objectId = path // the path is unique, so we will use it as an id
+        // if (this.autoDelete === false){
+        //   this.state = ViewerObjState['Unlink']
+        // }
+    }
+    async click(click_type) {
+        if (click_type === Enum.clickTypeEnum['Click']) {
+            //select layer
+            //turn the layer visible
+            //set the layer to active
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.active(true)
+            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
+            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.active(true)
+            // if (this.viewerManager.last_selected_viewer_obj) {
+            //     //if the last selected layer is valid then converted last selected layer into highlight layer
+            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
+            // }
+            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
+            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+        }
+        // else if (click_type === Enum.clickTypeEnum['AltClick']) {
+        //     // this.viewerManager.last_selected_viewer_obj = null
+        //     this.setHighlight(false)
+        //     this.visible(false)
+        //     this.active(false)
+
+        //     await psapi.unselectActiveLayersExe() //Note:can we move to ViewerManager.click()
+        // }
+        // this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+    }
+    visible(visibleOn) {
+        try {
+            super.visible(visibleOn)
+
+            let visibleValues = []
+            if (visibleOn) {
+                visibleValues = [true, true, true]
+            } else {
+                visibleValues = [false, false, false]
+            }
+
+            if (layer_util.Layer.doesLayerExist(this.init_group)) {
+                this.init_group.visible = visibleValues[0]
+            }
+            if (layer_util.Layer.doesLayerExist(this.init_snapshot)) {
+                this.init_snapshot.visible = visibleValues[1]
+            }
+
+            if (layer_util.Layer.doesLayerExist(this.solid_layer)) {
+                this.solid_layer.visible = visibleValues[2]
+            }
+
+            if (!this.autoDelete) {
+                //means it's not the first init image
+
+                if (layer_util.Layer.doesLayerExist(this.solid_layer)) {
+                    this.solid_layer.visible = false //turn it off sense the init group is above the output group, and the white solid will hide the init image reference located in the output group
+                }
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    async select() {
+        super.select()
+
+        const selectLayers = []
+        if (layer_util.Layer.doesLayerExist(this.init_group)) {
+            selectLayers.push(this.init_group)
+        }
+
+        await psapi.selectLayersExe(selectLayers)
+        //   console.log(`${this.layer.id} got selected`);
+    }
+
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        let is_same = false
+        if (layer_util.Layer.doesLayerExist(this.init_group)) {
+            is_same = this.init_group.id == layer_id
+        }
+        return is_same
+    }
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
+    }
+    async delete() {
+        try {
+            await super.delete()
+
+            // this.img_html.remove()//delete the img html element
+
+            if (!this.autoDelete && !this.can_highlight) {
+                //don't delete since it's output layer that is been used as init image
+                this.state = ViewerObjState['Unlink']
+            }
+
+            if (this.state === ViewerObjState['Delete']) {
+                await psapi.cleanLayers([
+                    this.init_group,
+                    this.init_snapshot,
+                    this.solid_layer,
+                ])
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+}
+
+class InitMaskImage extends ViewerImage {
+    constructor(mask_group, white_mark, solid_black, path, viewer_manager) {
+        super()
+        this.mask_group = mask_group
+        this.white_mark = white_mark
+        this.solid_black = solid_black
+
+        this.path = path
+        this.can_highlight = false
+        this.viewerManager = viewer_manager
+        this.viewerObjectType = Enum.ViewerObjectTypeEnum['MaskImage']
+        this.objectId = path // the path is unique, so we will use it as an id
+    }
+    async click(click_type) {
+        if (click_type === Enum.clickTypeEnum['Click']) {
+            //select layer
+            //turn the layer visible
+            //set the layer to active
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.active(true)
+            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
+            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
+            this.visible(true)
+            await this.select(true) //select() does take arguments
+            this.active(true)
+            // if (this.viewerManager.last_selected_viewer_obj) {
+            //     //if the last selected layer is valid then converted last selected layer into highlight layer
+            //     this.viewerManager.last_selected_viewer_obj.setHighlight(true)
+            // }
+            click_type = Enum.clickTypeEnum['Click'] // convert all click to Click
+            this.viewerManager.replaceLastSelection(click_type, this) //pass the click_type and this object
+        }
+    }
+    visible(visibleOn) {
+        try {
+            super.visible(visibleOn)
+
+            let visibleValues = []
+            if (visibleOn) {
+                visibleValues = [true, true, false]
+            } else {
+                visibleValues = [false, false, false]
+            }
+
+            if (layer_util.Layer.doesLayerExist(this.mask_group)) {
+                this.mask_group.visible = visibleValues[0]
+            }
+            if (layer_util.Layer.doesLayerExist(this.white_mark)) {
+                this.white_mark.visible = visibleValues[1]
+            }
+            if (layer_util.Layer.doesLayerExist(this.solid_black)) {
+                this.solid_black.visible = visibleValues[2]
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    async select() {
+        super.select()
+
+        const selectLayers = []
+
+        if (layer_util.Layer.doesLayerExist(this.white_mark)) {
+            selectLayers.push(this.white_mark)
+        }
+
+        await psapi.selectLayersExe(selectLayers)
+        //   console.log(`${this.layer.id} got selected`);
+    }
+
+    isSameLayer(layer_id) {
+        super.isSameLayer(layer_id)
+        let is_same = false
+        if (layer_util.Layer.doesLayerExist(this.mask_group)) {
+            is_same = this.mask_group.id == layer_id
+        }
+        return is_same
+    }
+    setImgHtml(img_html) {
+        super.setImgHtml()
+        this.img_html = img_html
+    }
+    async delete() {
+        try {
+            await super.delete()
+            // this.img_html.remove()//delete the img html element
+            if (this.state === ViewerObjState['Delete']) {
+                await psapi.cleanLayers([
+                    this.mask_group,
+                    this.white_mark,
+                    this.solid_black,
+                ])
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    createThumbnailNew(img, _) {
+        this.img_html = img
+        this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
+            img,
+            'viewer-image-container'
+        )
+        thumbnail.Thumbnail.addSPButtonToContainer(
+            this.thumbnail_container,
+            'svg_sp_btn',
+            'update the mask',
+            setMaskViewer,
+            img
+        )
+    }
+}
+
+class initImageLayers {
+    //store info about the init image related layers
+    constructor(group, snapshot, solid_background, autoDelete) {
+        this.group = group
+        this.snapshot = snapshot
+        this.solid_background = solid_background
+        this.autoDelete = autoDelete
+    }
+}
+class maskLayers {
+    //store info about the init image related layers
+    constructor(group, white_mark, solid_background, autoDelete) {
+        this.group = group
+        this.white_mark = white_mark
+        this.solid_background = solid_background
+        this.autoDelete = autoDelete
+    }
+}
+class ViewerManager {
+    //viewer manager will reset after the end of the session
+    //it will store
+    constructor() {
+        this.outputImages = []
+        this.initImages = []
+        this.initMaskImage
+        this.pathToViewerImage = {} // quick way to check if an link image path on disk to ViewerImage object.
+        this.initImageLayersJson = {} //{path: initImageLayers}
+
+        this.selectedOutputImages = {} //store the selected output images {path: outputImage}
+
+        this.mask_layer
+        this.maskLayersJson = {} //{path: MaskLayers}
+
+        //Note:move initGroup, to GenerationSession
+        this.initGroup
+        this.init_solid_background
+        this.maskGroup
+        this.mask_solid_background
+
+        //last_selected_obj
+        this.last_selected_viewer_obj
+        this.thumbnail_scaler = 1
+        this.isSquareThumbnail = false
+        this.init_image_container = document.getElementById(
+            'divInitImageViewerContainer'
+        )
+    }
+
+    replaceLastSelection(click_type, clicked_object) {
+        if (
+            this.last_selected_viewer_obj && // is valid last selected object
+            this.last_selected_viewer_obj.objectId !== clicked_object.objectId // not the same object
+
+            // clicked_object instanceof OutputImage &&
+            // !clicked_object.isSameObject(this.last_selected_viewer_obj)
+        ) {
+            //if the current selection and the last selection are different
+
+            this.last_selected_viewer_obj.visible(false)
+            this.last_selected_viewer_obj.active(false)
+        }
+        if (click_type === Enum.clickTypeEnum['Click']) {
+            this.last_selected_viewer_obj = clicked_object
+        } else if (click_type === Enum.clickTypeEnum['ShiftClick']) {
+            if (this.last_selected_viewer_obj) {
+                //if the last selected layer is valid then converted last selected layer into highlight layer
+                this.last_selected_viewer_obj.setHighlight(true)
+            }
+            this.last_selected_viewer_obj = clicked_object
+        } else if (click_type === Enum.clickTypeEnum['AltClick']) {
+            this.last_selected_viewer_obj = null
+        } else if (click_type === Enum.clickTypeEnum['SecondClick']) {
+            this.last_selected_viewer_obj = null
+        }
+    }
+    initializeInitImage(group, snapshot, solid_background, path) {
+        console.warn('this method is deprecated, use the session.js method ')
+        this.initGroup = group
+        this.init_solid_background = solid_background
+        this.addInitImageLayers(snapshot, path, true)
+    }
+    initializeMask(group, white_mark, solid_background, path, base64) {
+        this.maskGroup = group
+        this.mask_solid_background = solid_background
+        this.addMaskLayers(white_mark, path, true, base64)
+    }
+    addMaskLayers(white_mark, path, auto_delete, base64) {
+        try {
+            if (!this.maskLayersJson.hasOwnProperty(path)) {
+                //it's a new mask, mostly for the first time storing the mask
+
+                const mask_layers = new maskLayers(
+                    this.maskGroup,
+                    white_mark,
+                    this.mask_solid_background,
+                    auto_delete
+                )
+                this.maskLayersJson[path] = mask_layers
+            } else {
+                //for updating the mask
+
+                //just update the html
+                const new_path = `${path}?t=${new Date().getTime()}`
+                console.log('new mask path: ', new_path)
+                // this.maskLayersJson[path].img_html.src = new_path
+
+                // this.pathToViewerImage[path].img_html.src = new_path
+                this.pathToViewerImage[path].img_html.src = base64ToSrc(base64)
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+    updateMaskLayer() {}
+    addInitImageLayers(snapshot, path, auto_delete) {
+        try {
+            if (!this.initImageLayersJson.hasOwnProperty(path)) {
+                //if this is a new init image
+                //store it all of layers in a container object
+                const init_image_layers = new initImageLayers(
+                    this.initGroup,
+                    snapshot,
+                    this.init_solid_background,
+                    auto_delete
+                )
+                this.initImageLayersJson[path] = init_image_layers
+            }
+        } catch (e) {
+            console.warn(e)
+        }
+    }
+
+    hasViewerImage(path) {
+        if (this.pathToViewerImage.hasOwnProperty(path)) {
+            return true
+        }
+        return false
+    }
+    addOutputImage(layer, path) {
+        const outputImage = new OutputImage(layer, path, this)
+
+        this.outputImages.push(outputImage)
+        this.pathToViewerImage[path] = outputImage //
+        return outputImage
+    }
+    addInitImage(group, snapshot, solid_background, path, auto_delete) {
+        const initImage = new InitImage(
+            group,
+            snapshot,
+            solid_background,
+            path,
+            this
+        )
+        initImage.setAutoDelete(auto_delete)
+        this.initImages.push(initImage)
+        this.pathToViewerImage[path] = initImage
+        return initImage
+    }
+    addMask(group, white_mark, solid_background, path) {
+        const mask = new InitMaskImage(
+            group,
+            white_mark,
+            solid_background,
+            path,
+            this
+        )
+
+        this.initMaskImage = mask
+        this.pathToViewerImage[path] = mask
+        return mask
+    }
+
+    scaleThumbnails(
+        original_width,
+        original_height,
+        min_width,
+        min_height,
+        scaler
+    ) {
+        //calculate the new width and height
+
+        const image_width = this.isSquareThumbnail
+            ? 100
+            : g_generation_session.last_settings.width
+        const image_height = this.isSquareThumbnail
+            ? 100
+            : g_generation_session.last_settings.height
+
+        const [new_width, new_height] = general.scaleToClosestKeepRatio(
+            image_width,
+            image_height,
+            100,
+            100
+        )
+        const [scaled_width, scaled_height] = [
+            new_width * scaler,
+            new_height * scaler,
+        ]
+
+        for (let outputImage of this.outputImages) {
+            //get the image and it's container
+            const img = outputImage.img_html
+            const img_container = img.parentElement
+
+            img_container.style.width = scaled_width
+            img_container.style.height = scaled_height
+            img.style.width = scaled_width
+            img.style.height = scaled_height
+            //scale them to the new dimensions
+        }
+    }
+    onSessionEnd() {
+        this.outputImages = []
+        this.initImages = []
+        this.initMaskImage = null
+
+        this.pathToViewerImage = {} // quick way to check if an link image path on disk to ViewerImage object.
+        this.initImageLayersJson = {} //{path: initImageLayers}
+
+        this.selectedOutputImages = {} //store the selected output images {path: outputImage}
+
+        this.mask_layer = null
+        this.maskLayersJson = {} //{path: MaskLayers}
+
+        //Note:move initGroup, to GenerationSession
+        this.initGroup = null
+        this.init_solid_background = null
+        this.maskGroup = null
+        this.mask_solid_background = null
+
+        //last_selected_obj
+        this.last_selected_viewer_obj = null
+        // this.thumbnail_scaler = 1
+        // this.isSquareThumbnail = false
+    }
+
+    async loadInitImageViewerObject(path) {
+        if (!g_viewer_manager.hasViewerImage(path)) {
+            const group = this.initImageLayersJson[path].group
+            const snapshot = this.initImageLayersJson[path].snapshot
+            const solid_background =
+                this.initImageLayersJson[path].solid_background
+            const auto_delete = this.initImageLayersJson[path].autoDelete
+            const base64_image = g_generation_session.base64initImages[path]
+            await loadInitImageViewerObject(
+                group,
+                snapshot,
+                solid_background,
+                path,
+                auto_delete,
+                base64_image
+            )
+        }
+    }
+    deleteAll() {}
+    keepAll() {}
+    keepSelected() {}
+    deleteSelected() {}
+    deleteInitImages() {}
+    deleteMask() {}
+}
+
+module.exports = {
+    OutputImage,
+    InitImage,
+    InitMaskImage,
+    ViewerObjState,
+    ViewerManager,
+}

Stable-Diffusion-Webui-Civitai-Helper/.github/ISSUE_TEMPLATE/simple-issue-template.md

@@ -0,0 +1,20 @@
+---
+name: Simple Issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Have you read document?
+
+## Have you checked console log window's msg?
+
+## Describe Issue
+
+
+## Screenshot for UI issue
+
+
+## Console log's msg or screenshot for function issue

Stable-Diffusion-Webui-Civitai-Helper/.gitignore

@@ -0,0 +1,3 @@
+scripts/__pycache__/
+scripts/ch_lib/__pycache__/
+setting.json

Stable-Diffusion-Webui-Civitai-Helper/README.cn.md

@@ -0,0 +1,241 @@
+## 关于Civitai Helper2: Model Info Helper
+Civitai助手2将改名为**Model Info助手**。目前还在缓慢开发中。你可以查看它的UI演示视频，了解它会是什么样子:    
+[https://youtu.be/mPcKwQDDH8s](https://youtu.be/mPcKwQDDH8s)  
+
+
+# Civitai Helper
+Stable Diffusion Webui 扩展Civitai助手，用于更轻松的管理和使用Civitai模型。
+
+[Civitai Url](https://civitai.com/models/16768/civitai-helper-sd-webui-civitai-extension)  
+
+# 注意
+**本插件现在非常稳定，很多人用得很好，如果碰到问题，先看[常见问题](#常见问题)，并检查命令行窗口的详情。**   
+开issue前，请先看文档。找茬行为的用户将会被拉黑，参考：[找茬行为会被拉黑](https://github.com/butaixianran/Stable-Diffusion-Webui-Civitai-Helper/issues/96#issuecomment-1500310981)   
+
+
+# 功能
+[中文介绍视频(非官方)](https://youtu.be/x4tPWPmeAgM?t=373)  
+
+* 扫描所有模型，从Civitai下载模型信息和预览图 
+* 通过civitai模型页面url，连接本地模型和civitai模型信息
+* 通过Civitai模型页面url，下载模型(含信息和预览图)到SD目录或子目录。
+* 下载支持断点续传
+* 批量检查本地模型，在civitai上的新版本
+* 直接下载新版本模型到SD模型目录内(含信息和预览图)
+* 修改了内置的"Extra Network"模型卡片，每个卡片增加了如下功能按钮:
+  - 🖼: 修改文字"replace preview"为这个图标
+  - 🌐: 在新标签页打开这个模型的Civitai页面
+  - 💡: 一键添加这个模型的触发词到关键词输入框
+  - 🏷: 一键使用这个模型预览图所使用的关键词
+* 以上额外功能按钮支持thumbnail模式
+* 增加一直显示按钮的选项，以供触屏用户使用
+
+
+# 安装
+下载本项目为zip文件，解压到`你的SD webui目录/extensions`下即可。
+
+不管是安装还是升级本插件，都要整个关闭SD Webui，重新启动它。只是Reload UI不起作用。  
+
+(如果用SD webui的插件界面安装，请先给git配置代理。它不是通过浏览器下载，是通过git下载。)  
+
+
+# 使用方法
+
+## 更新你的SD webui
+本扩展需要取到 Extra Network的卡片列表id。**这个是2023-02-06，才添加到SD webui里面的。**  
+
+所以，如果你用的版本比这个早，你就需要先更新你的SD Webui！
+
+
+## 扫描模型
+前往扩展页面"Civitai Helper"，有个按钮叫："Scan Model"  
+
+![](img/extension_tab.jpg)  
+
+点击，就会扫描所有模型，生成SHA256码，用于从civitai获取模型信息和预览图。**扫描需要很久，耐心等待**。
+
+每个模型，本扩展都会创建一个json文件，用来保存从civitai得到的模型信息。这个文件会保存在模型同目录下，名称为："模型名字.civitai.info"。  
+
+![](img/model_info_file.jpg)  
+
+如果模型信息文件已经存在，扫描时就会跳过这个模型。如果模型不是civitai的，就会创建个空信息文件，以避免以后重复扫描。
+
+### 添加新模型
+当你下载了新模型之后，只要再次点击扫描按钮即可。已经扫描过的文件不会重复扫描，会自动得到新模型的信息和预览图。无须重启SD webui。 
+
+## 模型卡片
+**(先完成扫描，再使用卡片功能)**  
+打开SD webui's 内置的 "Extra Network" 页面，显示模型卡片  
+
+![](img/extra_network.jpg)  
+
+
+移动鼠标到模型卡片底部，就会显示4个按钮：
+  - 🖼: 修改文字"replace preview"为这个图标
+  - 🌐: 在新标签页打开这个模型的Civitai页面
+  - 💡: 一键添加这个模型的触发词到关键词输入框
+  - 🏷: 一键使用这个模型预览图所使用的关键词
+  
+![](img/model_card.jpg)  
+
+如果你没有看到这些额外的按钮，只要点击`Refresh Civitai Helper`，他们就会被重新添加到卡片上。  
+
+![](img/refresh_ch.jpg)  
+
+每次当Extra Network刷新，他都会删除掉额外的修改，我们的按钮就会消失。这时你就需要点击`Refresh Civitai Helper`把这些功能添加回去。
+
+
+### 小图模式
+以上功能按钮支持小图模式，但受制于SD Webui的CSS问题，目前，只能要么一直显示，要么一直不显示，不能鼠标滑过才显示。   
+![](img/thumb_mode.jpg)  
+
+## 下载 
+**(单任务，下载完一个再下另一个)**  
+通过Civitai模型页面Url下载模型，要3个步骤：
+* 填入url，点击按钮获取模型信息
+* 扩展会自动填入模型名称和类型，你需要选择下载的子目录和模型版本。
+* 点击下载  
+![](img/download_model.jpg)
+
+下载过程会显示在命令行界面带个进度条。  
+支持断点续传，无畏大文件。  
+
+
+## 批量检查模型新版本
+你可以按照模型类型，批量检查你的本地模型，在civitai上的新版本。你可以选择多个模型类型。  
+![](img/check_model_new_version.jpg)  
+
+检查新版本的时候，每检查完一个模型，都会有一个1秒的延迟，所以速度有点慢。
+
+这是为了保护Civitai避免因为本插件而短暂陷入类似DDos的局面。有些云服务商，有类似“免费用户每秒API请求不能超过1次”的保护机制。Civitai还没有这种设置。但我们还是得自觉保护它。因为如果它挂了，对大家都没有好处。    
+
+**检查完毕之后**，就会如下图，在UI上显示所有找到的新版本的信息。  
+
+每个模型新版本，都有3个链接。
+* 第一个是这个模型的网页。
+* 第二个是这个新版本的下载地址。   
+* 第三个是个按钮，在python端，直接下载新版本到模型目录内。  
+这种方式下载，下载详情显示在"Download Model"的区域和命令行窗口中。一次一个任务，不支持多任务。  
+![](img/check_model_new_version_output.jpg)
+
+
+
+## 根据URL获取模型信息
+如果无法在civitai上找到你的模型的SHA256，但你还是希望能把你的模型连接到一个civitai模型，你可以在本扩展页面，从列表中选择你的模型，并提供一个civitai模型页面的url。
+
+点击按钮之后，扩展就会下载那个civitai模型的信息，作为你这个本地模型的信息使用。  
+
+![](img/get_one_model_info.jpg)  
+
+## 代理
+**如果你是刚更新新版本，你需要重启SD webui再来使用**   
+
+代理输入框在插件页面最下方。
+
+**每次填入或清除代理后，都要保存，并用SDwebui设置页面的Reload UI按钮刷新UI**  
+
+然后所有发到civitai的请求就会用代理。  
+
+有些sock5代理, 需要使用socks5h开头的形式"socks5h://xxxxx"才能生效。   
+
+
+
+## 其他设置
+**保存设置按钮, 会保存扫描模型区域，以及其他设置 这两个区域的选项**  
+
+* "一直显示按钮" 是为了方便触屏。  
+* "小图模式显示功能按钮" 会开关功能按钮在小图模式的显示  
+![](img/other_setting.jpg) 
+
+## 预览图
+Extra Network支持两种预览图命名：`model_name.png` 和 `model_name.preview.png`。其中，`model_name.png`优先级较高。
+
+当优先级较高的预览图不存在，他就会自动使用`model_name.preview.png`。
+
+这样，你自己创建的预览图 和 网络下载的预览图，能够同时存在，并优先使用你自己创建的。
+
+## 关键词
+卡片上，添加关键词按钮，是添加从civitai预览图中得到的关键词，而不是你自己创建的图片的关键词。
+
+civitai不是每个图片都有关键词，一个模型中，也不是所有预览图关键词都一样。所以这里是遍历所有civitai预览图信息，加载第一个有关键词的。
+
+
+## SHA256
+为了创建文件的SHA256，插件需要读取整个文件。对于大尺寸文件，就会很慢。
+
+有两种情况，这个SHA256无法从civitai找到对应模型：
+* 太老的模型，civitai没有存储SHA256.
+* 模型作者，静静的换掉了模型文件，但没有修改描述和版本。所以，虽然网页上看不出来，但实际上civitai上的 和你本地的模型文件，已经不是同一个文件了。  
+
+这些情况下，你可以在插件上，通过提供模型页面的url，来获取模型信息文件。
+
+
+
+## 新特性
+从v1.5开始，v1.x不再接受任何新特性。所有新特性进入2.x。
+
+2.x专注于自定义模型信息，并可能改名为"Model Info Helper"。因为不再是专注Civitai了。 
+
+从v1.5开始。v1.x进入维护阶段。  
+
+
+Enjoy!
+
+
+## 常见问题
+### 4个卡片按钮不显示
+#### 汉化原因
+下载新版，最新版已经处理汉化导致的问题。**双语汉化插件需要v1.6.1.1之后的版本才开始支持。**  
+
+#### 使用了云端汉化功能
+如果是秋叶启动器，就关闭启动器“云端汉化”功能。如果是专门的云端汉化插件，就换用普通汉化插件。  
+
+#### 其他情况
+首先，确保你点过了"Refresh Civitai Helper"刷新按钮。  
+
+然后，如果还有这个问题，那么唯一原因，是你没有使用最新版SD webui。  
+
+如果你修改过SD webui的文件， 你的更新操作可能会失败。你需要检查git命令行的输出信息，来确定你更新成功了。   
+
+git在很多时候，会拒绝升级，并告诉你有些冲突需要你手动先解决。如果你不看命令行输出，你就会以为你已经更新成功了，但其实并没有。   
+
+ 
+### Request model info from civitai
+意思就是正在连接civitai，如果没有后面的信息，就是连不上，请挂代理。
+
+
+### 扫描或获取模型信息失败
+这个插件现在很稳定，所以，这个问题的原因，基本是是因为Civitai拒绝了你的连接请求。  
+
+Civitai不像那些大网站那么稳定。他网站会挂，会拒绝API连接，还会把API请求转到真人验证页面，来挡住。  
+
+Civitai还有连接池的设定。基本上，就是同时能允许的最大连接数。一旦达到这个数字，接下来的API连接请求，都会被拒绝。  
+
+所以，这种时候你只能等一下再试。  
+
+另外，对于国��用户，还有代理问题。现在国内都要用代理才能连上。   
+
+
+### 扫描之后得到了错误的预览图和模型信息
+坏消息是，有些模型在civitai数据库中，保存的sha256完全是错的。查看下面的issue了解详情：    
+[https://github.com/civitai/civitai/issues/426](https://github.com/civitai/civitai/issues/426)  
+
+对于这种模型，那这个插件自然就无法获得正确的模型信息和预览图。  
+
+这种情况下，请删除扫描得到的模型信息和预览图，在插件界面提供正确的模型url来获取。   
+
+另外，civitai官方有个页面，专门用于回报带有错误sha256的模型：   
+[https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100](https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100)  
+
+请把这类模型反馈给civitai，好让他们进行修复。  
+
+
+
+
+### 使用colab时扫描失败
+首先，在google中搜索你看到的错误信息。更有可能是，你碰到的是个colab的问题。  
+
+然后，如果colab连接了google drive，会有一次性访问文件数量的限制，而导致扫描失败。这是google drive的限制，请自行google搜索了解详情。
+
+
+

Stable-Diffusion-Webui-Civitai-Helper/README.jp.md

@@ -0,0 +1,224 @@
+### Language
+[中文](README.cn.md)   
+[English](README.md)  
+[한국어(ChatGPT)](README.kr.md)  
+
+## About Civitai Helper2: Model Info Helper
+Civitai Helper 2は、**ModelInfo Helper**に改名されます。現在開発中です。デモをご覧ください:
+[YouTube](https://youtu.be/mPcKwQDDH8s)  
+
+# お知らせ
+**この拡張機能は現在、非常に安定しています。もし問題があれば、コンソールログの詳細を確認し、[よくある質問](#よくある質問)を確認してください。**   
+
+# Civitai Helper
+この拡張機能は、Civitaiのモデルをより簡単に扱えるようにするためのものです。
+
+Civitai: [Civitai Url](https://civitai.com/models/16768/civitai-helper-sd-webui-civitai-extension)  
+
+# 機能
+* 全てのモデルをスキャンし、Civitaiからモデル情報とプレビューをダウンロード
+* CivitaiモデルページのURLを使って、ローカルモデルとCivitaiモデル情報を取得
+* CivitaiモデルページのURLから、モデル(情報とプレビューを含む)をSDディレクトリまたはサブディレクトリにダウンロードする。
+* ダウンロードは途中から再開可能
+* ローカルのモデルとCivitai上の新しいバージョンを一括でチェック
+* 新しいバージョンのモデルを直接モデルのディレクトリにダウンロード(情報とプレビュー画像を含む)
+* 内蔵の**Extra Network**モデルカードを変更し、各カードに以下の機能ボタンを追加しました。
+  - 🖼: `replace preview`のテキストをこのアイコンに変更
+  - 🌐: このモデルのCivitaiページを新しいタブで開く
+  - 💡: このモデルのトリガーワードをキーワード入力欄に一括で追加する
+  - 🏷: このモデルのプレビュー画像で使用されているキーワードを一括で使用する
+* 上記の追加機能ボタンは、サムネイルモードにも対応しています。
+* タッチスクリーンデバイス向けに、常に表示されるボタンのオプションを追加しました。
+
+
+# インストール
+SD webui's extensionタブから、`Install from url`のタブに移動。
+このリポジトリのURLをコピーペーストし、インストールする。  
+
+または、このリポジトリをzipでダウンロードし、`./webui/extensions`へ展開してください。
+
+この拡張機能をインストール、またはアップデートするたびに、SD Webui再起動する必要があります。  
+この拡張機能は、**UIを再読み込みする**だけでは動作しません。
+
+# 使い方
+
+## WebUIをアップデート
+この拡張機能は`network cards id`を取得する必要があります。この機能は**2023-02-06**に追加されました。    
+**SD webuiがこれより前のバージョンである場合は、アップデートする必要があります!**  
+
+## モデルのスキャン
+拡張機能タブから<kbd>Civitai Helper</kbd>へ。  
+<kbd>Scan model</kbd>というボタンがあります。  
+
+![](img/extension_tab.jpg)
+
+これをクリックすると、拡張機能がすべてのモデルをスキャンしてSHA256ハッシュを生成し、それを使ってCivitaiからモデル情報とプレビュー画像を取得します。
+**スキャンには時間がかかります。 終了までお待ちください。**
+
+各モデルに対して、Civitaiからすべてのモデル情報を保存するためのjsonファイルを作成します。このモデル情報ファイルは、modelsディレクトリ内の`Your_model_name.civitai.info`となります。
+
+![](img/model_info_file.jpg)
+
+モデル情報ファイルがすでに存在する場合は、スキップされます。Civitaiでモデルが見つからない場合、空のモデル情報ファイルを作成するので、モデルが2回スキャンされることはありません。
+
+### 新しいモデルを追加
+新規のモデルがある場合、もう一度スキャンボタンをクリックするだけで、新しいモデルの情報とプレビューを取得できます。同じモデルを2回スキャンすることはありません。
+
+## モデルカード
+**(スキャン終了後に使用)**   
+SD webuiの`Extra Network`タブを開き、モデルカードを表示します。
+
+![](img/extra_network.jpg)
+
+
+マウスをモデルカードの下部に移動すると、4つのボタンが表示されます。
+  - 🖼: プレビューを置き換えるためのテキストを`replace preview`からこのアイコンに変更します
+  - 🌐: このモデルのCivitaiページを新しいタブで開きます
+  - 💡: このモデルのトリガーワードをキーワード入力欄に一括追加します
+  - 🏷: このモデルのプレビュー画像に使用されているキーワードを一括で使用します
+  
+![](img/model_card.jpg)  
+
+これらのボタンが表示���れない場合は、<kbd>Refresh Civitai Helper</kbd>をクリックすると、ボタンがカードに再追加されます。  
+
+![](img/refresh_ch.jpg)  
+
+`Extra Network`が更新されるたびに、余分な変更が削除され、ボタンが消えてしまいます。その場合は、「Refresh Civitai Helper」をクリックして、これらの機能を再度追加する必要があります。
+
+
+### サムネイル
+これらのボタンは、サムネイルをサポートしていますが、SD WebuiのCSSの問題により、現在は常に表示か非表示かのどちらかに制限されています。マウスをスライドして表示することはできません。   
+![](img/thumb_mode.jpg)  
+
+
+## ダウンロード
+**(タスクが一つ完了してから、次のタスクをダウンロードしてください)**  
+CivitaiモデルページのURLを使用してモデルをダウンロードするには、3つのステップが必要です。
+1. URLを入力し、モデル情報を取得するためにボタンをクリック
+2. 拡張機能が自動的にモデル名とタイプを入力します。ダウンロードするサブディレクトリとモデルバージョンを選択
+3. ダウンロードをクリックします  
+![](img/download_model.jpg)
+
+ダウンロード状況は、CLIに進行状況バーを表示します。  
+断片的に再開することができ、大きなファイルをダウンロードする際にも心配する必要はありません。  
+
+
+## 新しいモデルのバージョンを確認する
+モデルの種類に従って、ローカルのモデルを一括でCivitaiの新バージョンがないかをチェックすることができます。複数のモデルの種類を選択できます。  
+![](img/check_model_new_version.jpg)  
+
+これを押すと、各モデルをチェックするたびに1秒の遅延が発生するため、速度がやや遅くなります。  
+
+これは、本拡張機能のユーザーの過失によるDDoSを回避し、Civitaiを保護するために行われます。  
+一部のクラウドサービスプロバイダーには、「無料ユーザーのAPIリクエストは1秒あたり1回を超えてはいけない」というような保護があります。Civitaiにはまだこのような設定がありませんが、我々はそれを自衛しなければなりません。  
+なぜなら、もしCivitaiがダウンした場合、誰にとっても良いことではないからです。      
+
+チェックが完了すると、すべての新しいバージョンがUIに表示されます。    
+
+各モデルの新しいバージョンには、3つのリンクがあります。
+* 最初のものは、このモデルのWebページです。
+* 2つ目は、この新しいバージョンのダウンロードアドレスです。  
+* 3つ目は、Python(拡張機能)側で新しいバージョンをモデルディレクトリに直接ダウンロードするボタンです。
+この方法でダウンロードすると、ダウンロードの詳細が「Download Model」の領域とコマンドラインに表示されます。一度に1つのタスクしかサポートされていません。  
+![](img/check_model_new_version_output.jpg)
+
+
+
+## URLからモデル情報を取得する
+Civitai上で自分のモデルのSHA256が見つからない場合でも、自分のモデルをCivitaiモデルに接続したい場合は、この拡張機能のページから、モデルをリストから選択し、CivitaiモデルページのURLを提供することができます。  
+
+ボタンをクリックすると、拡張機能はCivitaiモデルの情報をダウンロードし、それをローカルモデルの情報として使用します。  
+
+![](img/get_one_model_info.jpg)  
+
+
+
+## その他の設定
+**設定保存ボタンを押すと、<kbd>Scan Model</kbd>の設定とその他の設定の両方が保存されます。**  
+
+*  <kbd>Always Display Button</kbd>は、タッチデバイスでの操作を容易にするためです。
+*  <kbd>Show Buttons on Thumb Mode</kbd>は、小さな画像モードでの機能ボタンの表示を切り替えます。 
+![](img/other_setting.jpg) 
+
+## プレビュー
+Extra Networkは、2つのプレビュー画像の命名をサポートしています:`model_name.png`と`model_name.preview.png`。  
+デフォルトでは自動で`model_name.png`が優先的に使われます。
+
+優先度が高いプレビュー画像が存在しない場合は、自動的に`model_name.preview.png`が使用されます。
+
+これにより、自分で作成したプレビュー画像とネットからダウンロードしたプレビュー画像を同時に使用し、自分で作成したプレビュー画像を優先的に使用できます。
+
+## プロンプト
+カード上の<kbd>Use prompt from preview image</kbd>ボタンは、Civitaiプレビュー画像から取得したキーワードであり、自分で作成した画像のキーワードではありません。
+
+Civitaiにはすべての画像にキーワードがあるわけではなく、1つのモデルに含まれるすべてのプレビュー画像のキーワードが同じであるわけでもありません。したがって、ここではすべてのCivitaiプレビュー画像情報を走査し、最初にキーワードがあるものを読み込みます。
+
+
+## SHA256
+ファイルのSHA256を作成するために、はファイル全体を読み取る必要があります。大きなファイルの場合、処理が遅くなります。
+
+Civitaiで対応するモデルのSHA256が見つからない場合は、次の2つの場合が考えられます：
+* 古すぎるモデルには、SHA256が保存されていません。
+* モデルの作成者が静かにモデルファイルを変更しましたが、説明やバージョンを変更していないため、サイト上ではわかりませんが、実際にはCivitaiに保存されているモデルファイルとローカルのモデルファイルは異なるものとなっています。  
+
+これらの場合は、拡張機能にモデルページのURLを提供することで、モデルの情報ファイルを取得できます。
+
+## Feature Request
+v1.5以降のv1.xには新機能はありません。すべての新機能は2.xに移行されます。
+2.xでは、カスタムモデル情報にフォーカスし、Civitaiだけではなく、`Model Info Helper`という名称に変更する可能性があります。
+v1.5からv1.xはメンテナンスのフェーズに入ります。
+
+お楽しみに!
+
+
+## よくある質問
+### 4つのカードボタンが表示されない
+#### ローカライズの問題
+新しいバージョンをダウンロードしてください。  
+最新バージョンでは、ローカライズによる問題が解決されています。
+[バイリンガル拡張機能](https://github.com/journey-ad/sd-webui-bilingual-localization)は、v1.6.1.1以降のバージョンでサポートされるようになりました。 
+
+#### クラウドサービスベースの翻訳機能を使用した
+クラウドサービスベースの翻訳機能を使用している場合は、通常のローカライズに変更してください。
+
+#### その他の場合
+まず、<kbd>Refresh Civitai Helper</kbd>をクリックして更新しましたか?  
+
+それでもこの問題が発生する場合は、おそらく最新バージョンのSD webuiを使用していないためです。  
+
+SD webuiのファイルを変更した場合、更新操作が失敗する可能性があります。更新が成功したかどうかを確認するには、gitコマンドラインの出力情報を確認する必要があります。  
+
+gitは、多くの場合、アップグレードを拒否し、手動で解決する必要があるいくつかの競合状態を示します。コマンドライン出力を見ない場合、更新が成功したと思うかもしれませんが、実際には成功していません。   
+
+ 
+### Request model info from civitai
+これはcivitaiに接続しています。情報がない場合は接続できないため、プロキシを使用してください。
+
+
+### スキャンまたはモデル情報の取得に失敗しました
+この拡張機能は現在非常に安定しているため、この問題の原因は基本的にはCivitaiが接続要求を拒否したためです。  
+
+Civitaiは大きなウェブサイトとは異なり、安定していません。彼らのウェブサイトはダウンしたり、API接続を拒否したり、APIリクエストをCpatchaページに転送してブロックしたりすることがあります。  
+
+Civitaiには接続プールの上限もあります。基本的に、同時に許可される最大接続数です。この数字に達すると、以降のAPI接続要求はすべて拒否されます。  
+
+そのため、このような場合はしばらく待ってから再試行するしかありません。  
+
+### civitaiから誤ったモデル情報とプレビュー画像を取得する(Translated by ChatGPT)
+悪いニュースですが、civitaiのデータベースには誤ったsha256で保存されたモデルがいくつかあります。詳細についてはこちらをご覧ください：  
+[https://github.com/civitai/civitai/issues/426](https://github.com/civitai/civitai/issues/426)  
+
+したがって、これらのモデルについては、この拡張機能では正しいモデル情報やプレビュー画像を取得できません。  
+
+この場合、モデル情報ファイルを削除し、この拡張機能のタブページでcivitaiのURLから正しいモデル情報を取得する必要があります。  
+
+また、誤ったsha256を持つこれらのモデルをcivitaiに報告することもできます。  
+[https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100](https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100)  
+
+civitaiにそのモデルを報告して修正してもらうようにしてください。  
+
+
+### colabを使用した際にスキャンに失敗する
+まず、表示されたエラーメッセージをGoogleで検索してください。おそらくcolabの問題が発生している可能性があります。表示されたエラーメッセージを検索して、原因を特定してください。  
+
+Google Driveに接続する際には、ファイルへのアクセス数に制限があるため、スキャンが失敗することがよくあります。これはGoogle Drive側の制限です。詳細についてはインターネットで[検索](https://google.com)してください。

Stable-Diffusion-Webui-Civitai-Helper/README.kr.md

@@ -0,0 +1,206 @@
+# Civitai Helper
+Stable Diffusion Webui는 Civitai 모델을 더 쉽게 관리하고 사용하기 위한 Civitai Assistant 확장 기능입니다.
+
+[Civitai Url](https://civitai.com/models/16768/civitai-helper-sd-webui-civitai-extension)  
+
+# 주의사항
+**이 플러그인은 지금 매우 안정적이며 많은 사용자들이 잘 사용하고 있습니다. 문제가 발생하면, [자주 묻는 질문](#자주-묻는-질문)을 먼저 확인하고 명령 프롬프트 창의 세부 정보를 확인하세요.**   
+
+
+
+
+# 기능
+* 모든 모델을 스캔하여 Civitai에서 모델 정보 및 미리보기 이미지 다운로드
+* Civitai 모델 페이지 URL을 통해 로컬 모델 및 Civitai 모델 정보 연결
+* Civitai 모델 페이지 URL을 통해 모델(정보 및 미리보기 이미지 포함) 다운로드하여 SD 디렉토리 또는 하위 디렉토리에 저장
+* 이어받기 지원 다운로드
+* 로컬 모델에서 Civitai에 새 버전이 있는지 일괄 확인
+* 새 버전 모델을 SD 모델 디렉토리에 직접 다운로드(정보 및 미리보기 이미지 포함)
+* "Extra Network" 모델 카드 내부를 수정하여 다음과 같은 기능 버튼을 추가:
+  - 🖼: "replace preview" 텍스트를 이 아이콘으로 변경
+  - 🌐: 해당 모델의 Civitai 페이지를 새 탭에서 열기
+  - 💡: 이 모델의 트리거 단어를 키워드 입력란에 일괄 추가
+  - 🏷: 이 모델 미리보기 이미지에 사용된 키워드 사용
+* 위의 추가 기능 버튼은 썸네일 모드를 지원합니다.
+* 터치 스크린 사용자를 위해 항상 표시되는 버튼 옵션 추가
+
+
+# 설치
+이 프로젝트를 zip 파일로 다운로드하고 SD webui 디렉토리/extensions에 압축 해제하면 됩니다.  
+
+이 플러그인을 설치하거나 업그레이드하려면 SD Webui를 완전히 종료하고 다시 시작해야 합니다. UI 다시로드는 작동하지 않습니다.  
+
+# 사용 방법
+
+## SD Webui 업데이트
+이 확장 기능은 Extra Network 카드 목록 ID를 가져와야 합니다. 이것은 2023-02-06에 SD Webui에 추가된 것입니다.  
+
+따라서, 만약 사용 중인 버전이 이보다 이전 버전이라면, 먼저 SD Webui를 업데이트해야 합니다!  
+
+
+## 모델 스캔
+확장 페이지 "Civitai Helper"로 이동하고 "Scan Model"이라는 버튼을 클릭합니다.  
+
+![](img/extension_tab.jpg)  
+
+클릭하면 모든 모델을 스캔하고 SHA256 코드를 생성하여 Civitai에서 모델 정보 및 미리보기 이미지를 가져옵니다. 스캔에는 시간이 걸리므로 인내심을 가지고 기다려주세요.  
+
+이 확장 기능은 각 모델마다 Civitai에서 얻은 모델 정보를 저장하는 JSON 파일을 생성합니다. 이 파일은 모델이 있는 디렉토리에 "모델 이름.civitai.info"라는 이름으로 저장됩니다.  
+
+![](img/model_info_file.jpg)  
+
+모델 정보 파일이 이미 존재하는 경우 해당 모델은 스캔하지 않습니다. 모델이 Civitai가 아닌 경우 빈 정보 파일이 생성되어 나중에 중복 스캔을 피합니다.  
+
+### 새 모델 추가
+새 모델을 다운로드한 후 스캔 버튼을 다시 클릭하면 됩니다. 이미 스캔된 파일은 다시 스캔하지 않으며 새 모델의 정보와 미리보기 이미지를 자동으로 얻을 수 있습니다. SD Webui를 다시 시작할 필요가 없습니다.  
+
+## 모델 카드
+**(스캔을 완료한 후에 카드 기능을 사용하세요)**  
+SD Webui의 내장 "Extra Network" 페이지를 열어 모델 카드를 표시합니다.  
+
+![](img/extra_network.jpg)  
+
+
+마우스를 모델 카드 아래쪽으로 이동하면 4개의 버튼이 표시됩니다:  
+  - 🖼: "replace preview" 텍스트를이 아이콘으로 변경
+  - 🌐:이 모델의 Civitai 페이지를 새 탭에서 엽니다.
+  - 💡:이 모델의 트리거 단어를 키워드 입력 상자에 추가합니다.
+  - 🏷:이 모델 미리보기에 사용되는 키워드를 사용합니다.
+  
+![](img/model_card.jpg)  
+
+이러한 추가 버튼이 표시되지 않으면 Refresh Civitai Helper를 클릭하여 다시 추가하십시오.  
+
+![](img/refresh_ch.jpg)  
+
+Extra Network가 새로 고침될 때마다이 추가 수정이 제거되므로 버튼이 사라지면 Refresh Civitai Helper를 클릭하여 기능을 다시 추가해야합니다.  
+
+
+### 작은 미리보기 모드
+이러한 기능 버튼은 작은 미리보기 모드를 지원하지만 SD Webui의 CSS 문제로 인해 현재 항상 표시하거나 항상 표시하지 않아야합니다.  
+![](img/thumb_mode.jpg)  
+
+## 다운로드
+**(한 번에 하나씩, 하나를 다운로드하고 다른 것을 다운로드하세요)**  
+Civitai 모델 페이지 URL을 통해 모델을 다운로드하려면 3 단계가 필요합니다:  
+* URL을 입력하고 모델 정보를 가져 오는 버튼을 클릭합니다.
+* 확장 프로그램이 모델 이름과 유형을 자동으로 입력합니다. 다운로드 할 하위 디렉토리와 모델 버전을 선택해야합니다.
+* 다운로드를 클릭하십시오.  
+![](img/download_model.jpg)
+
+다운로드 과정은 진행률 표시 줄이있는 명령 줄 인터페이스에서 표시됩니다.  
+일시 중지 및 다시 시작을 지원하며 대용량 파일도 문제없이 처리합니다.  
+
+
+## 일괄적으로 모델 새 버전 확인
+Civitai에서 새 버전을 확인하기 위해 로컬 모델을 모델 유형 별로 일괄적으로 확인할 수 있습니다. 여러 모델 유형을 선택할 수 있습니다.  
+![](img/check_model_new_version.jpg)  
+
+새 버전을 확인 할 때마다 모델이 모두 확인 될 때까지 1 초의 지연이 있으므로 속도가 다소 느립니다.  
+
+이것은 Civitai가 이 플러그인으로 인해 일시적으로 DDos와 유사한 상황에 빠지지 않도록 보호하기 위한 것입니다. 일부 클라우드 서비스 제공 업체는 "무료 사용자의 초당 API 요청 수는 1 회를 초과 할 수 없다"는 보호 메커니즘이 있습니다. Civitai는 이러한 설정이 없습니다. 그러나 우리는 여전히 그것을 보호해야합니다. 왜냐하면 그것이 다운되면 모두에게 좋지 않기 때문입니다.     
+
+확인이 완료되면 다음과 같이 UI에 모든 새 버전을 찾은 정보가 표시됩니다.  
+
+각 모델 새 버전에는 3 개의 링크가 있습니다.  
+* 첫 번째는 이 모델의 웹 페이지입니다.
+* 두 번째는이 새 버전의 다운로드 주소입니다.  
+* 세 번째는 버튼입니다. Python 측에서 새 버전을 모델 디렉토리로 직접 다운로드합니다.  
+이 방식으로 다운로드하면 "모델 다운로드" 영역과 명령 줄 창에 다운로드 세부 정보가 표시됩니다. 한 번에 하나의 작업만 지원됩니다.  
+![](img/check_model_new_version_output.jpg)
+
+
+
+## URL을 기반으로 모델 정보 가져오기
+Civitai에서 모델의 SHA256을 찾을 수 없지만 여전히 Civitai 모델에 모델을 연결하고 싶다면 해당 확장 프로그램 페이지에서 모델을 선택하고 Civitai 모델 페이지의 URL을 제공할 수 있습니다.  
+
+버튼을 클릭하면 확장 프로그램이 해당 Civitai 모델의 정보를 다운로드하여 로컬 모델의 정보로 사용합니다.  
+
+![](img/get_one_model_info.jpg)  
+
+
+
+## 기타 설정
+**설정 저장 버튼은 스캔 모델 영역 및 기타 설정 두 영역의 옵션을 저장합니다.**  
+
+* "항상 표시 버튼"은 터치 스크린에서 편리하게 사용하기 위한 것입니다.  
+* "작은 그림 모드에서 기능 버튼 표시"는 작은 그림 모드에서 기능 버튼을 표시할지 여부를 전환합니다.  
+![](img/other_setting.jpg) 
+
+## 미리보기 이미지
+Extra Network는 model_name.png 및 model_name.preview.png 두 가지 미리보기 이미지 이름을 지원합니다. 여기서 model_name.png이 우선순위가 높습니다.  
+
+우선순위가 높은 미리보기 이미지가 없으면 자동으로 model_name.preview.png를 사용합니다.  
+
+이렇게 하면 직접 만든 미리보기 이미지와 인터넷에서 다운로드한 미리보기 이미지를 함께 사용할 수 있으며, 우선순위는 직접 만든 이미지가 높습니다.  
+
+## 키워드
+카드에 키워드 추가 버튼은 civitai 미리보기 이미지에서 얻은 키워드를 추가하는 것이며, 사용자가 직접 만든 이미지의 키워드가 아닙니다.  
+
+모든 이미지에 키워드가 있는 것은 아니며, 모델에 따라 미리보기 이미지의 키워드가 모두 같지 않을 수 있습니다. 따라서 여기서는 civitai 모든 미리보기 이미지 정보를 탐색하여 첫 번째 키워드가 있는 이미지를 로드합니다.  
+
+
+## SHA256
+파일의 SHA256을 생성하려면 플러그인에서 전체 파일을 읽어야 합니다. 대형 파일의 경우 시스템이 느려질 수 있습니다.  
+
+SHA256은 civitai에서 해당 모델을 찾을 수 없는 두 가지 경우가 있습니다.
+* 너무 오래된 모델이므로 civitai에 SHA256이 저장되어 있지 않습니다.
+* 모델 작성자가 모델 파일을 조용히 교체했지만 설명 및 버전을 수정하지 않았습니다. 따라서 웹 페이지에서는 확인할 수 없지만 civitai 및 로컬 모델 파일은 이미 다른 파일입니다.  
+
+이러한 경우에는 플러그인에서 모델 페이지 URL을 제공하여 모델 정보 파일을 얻을 수 있습니다  
+
+
+## 자주 묻는 질문
+### 4개의 카드 버튼이 표시되지 않습니다.
+#### 한국어 플러그인을 사용했습니다
+새 버전을 다운로드하면, 최신 버전에서 한국어 번역으로 인한 문제가 해결되었습니다. 양방향 다국어 플러그인은 v1.6.1.1 이후 버전부터 지원됩니다.  
+
+#### 클라우드 기반 한국어 플러그인을 사용했습니다
+클라우드 기반 한국어 플러그인을 사용한 경우 일반적인 한국어 플러그인으로 변경���십시오.  
+
+
+#### 다른 경우
+먼저 "Refresh Civitai Helper" 버튼을 클릭하여 Civitai Helper를 새로고침했는지 확인하세요.  
+
+그런 다음 이 문제가 계속되는 경우, 유일한 이유는 최신 버전의 SD webui를 사용하지 않았기 때문입니다.  
+
+만약 SD webui의 파일을 수정했다면, 업데이트 작업이 실패할 수 있습니다. 업데이트가 제대로 이루어졌는지 확인하려면 git 명령 줄의 출력 정보를 확인해야 합니다.  
+
+git은 종종 업그레이드를 거부하고, 일부 충돌을 수동으로 해결해야 한다는 메시지를 보여줍니다. 명령 줄 출력을 확인하지 않으면 업그레이드가 성공했다고 잘못 생각할 수 있습니다.  
+
+ 
+### Request model info from civitai
+이것은 Civitai에 연결하고 있음을 나타내며, 정보가 없으면 연결할 수 없으므로 프록시를 사용해야 합니다.  
+
+
+### 모델 정보 스캔 또는 가져오기 실패
+이 플러그인은 이제 매우 안정적이므로, 이 문제의 원인은 대부분 Civitai가 연결 요청을 거부했기 때문입니다.  
+
+Civitai는 대형 웹사이트와 같이 안정적이지 않습니다. 웹사이트가 다운되거나 API 연결을 거부할 수 있고, API 요청을 실제 검증 페이지로 전환하여 차단할 수도 있습니다.  
+
+Civitai에는 연결 풀 설정이 있습니다. 이는 동시에 허용되는 최대 연결 수입니다. 이 수치에 도달하면 다음 API 연결 요청은 모두 거부됩니다. 이 때는 잠시 기다렸다가 다시 시도해야 합니다.  
+
+또한 국내 사용자들에게는 프록시 문제가 있습니다. 대개는 프록시를 사용해야만 연결할 수 있습니다.  
+
+
+### civitai에서 잘못된 모델 정보 및 미리보기 이미지 가져오기
+안타깝게도, civitai의 데이터베이스에 일부 모델이 잘못된 sha256으로 저장되어 있습니다. 자세한 내용은 여기를 확인하십시오:  
+[https://github.com/civitai/civitai/issues/426](https://github.com/civitai/civitai/issues/426)  
+
+따라서 이 확장 프로그램은 해당 모델의 올바른 모델 정보나 미리보기 이미지를 가져올 수 없습니다.  
+
+이 경우 모델 정보 파일을 제거하고 이 확장 프로그램의 탭 페이지에서 civitai url로 올바른 모델 정보를 가져와야 합니다.  
+
+또한, 잘못된 sha256을 가진 해당 모델을 civitai에 신고할 수 있습니다.  
+[https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100](https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100)  
+
+civitai에 그 모델을 신고하여 수정할 수 있도록 해주시기 바랍니다.  
+
+
+### Colab 사용시 스캔 실패
+먼저 보이는 오류 메시지를 Google에서 검색해보세요. 대개 Colab의 문제일 가능성이 높습니다.  
+
+그리고 Colab이 Google 드라이브에 연결되어 있다면, 파일에 대한 일회성 액세스 제한으로 인해 스캔이 실패할 수 있습니다. 이는 Google 드라이브의 제한 사항으로, 자세한 내용은 Google 검색을 통해 알아보세요.  
+
+
+

Stable-Diffusion-Webui-Civitai-Helper/README.md

@@ -0,0 +1,329 @@
+### Language
+[中文](README.cn.md)   
+[日本語](README.jp.md)  
+[한국어(ChatGPT)](README.kr.md)  
+
+## About Civitai Helper2: Model Info Helper
+Civitai Helper 2 will be renamed to **ModelInfo Helper**. It is under development, you can watch its UI demo video to see how it gonna look like:    
+[YouTube](https://youtu.be/mPcKwQDDH8s)  
+
+# Notice
+**This extension now is very stable and works well for many people. If you have an issue, check console log window's detail and read [common issue](#common-issue) part**   
+
+If you want to claim it doesn't work, check this first: [Claim Wall](claim_wall.md)  
+
+
+# Civitai Helper
+Stable Diffusion Webui Extension for Civitai, to handle your models much more easily.  
+
+Civitai: [Civitai Url](https://civitai.com/models/16768/civitai-helper-sd-webui-civitai-extension)  
+
+# Features
+* Scans all models to download model information and preview images from Civitai.  
+* Link local model to a civitai model by civitai model's url
+* Download a model(with info+preview) by Civitai Url into SD's model folder or subfolder.
+* Downloading can resume at break-point, which is good for large file. 
+* Checking all your local model's new version from Civitai
+* Download a new version directly into SD model folder (with info+preview)
+* Modified Built-in "Extra Network" cards, to add the following buttons on each card:
+  - 🖼️: Modified "replace preview" text into this icon
+  - 🌐: Open this model's Civitai url in a new tab
+  - 💡: Add this model's trigger words to prompt
+  - 🏷️: Use this model's preview image's prompt
+* Above buttons support thumbnail mode of Extra Network
+* Option to always show additional buttons, to work with touchscreen.  
+
+
+# Install
+Go to SD webui's extension tab, go to `Install from url` sub-tab.
+Copy this project's url into it, click install.  
+
+Alternatively, download this project as a zip file, and unzip it to `Your SD webui folder/extensions`.
+
+Everytime you install or update this extension, you need to shutdown SD Webui and Relaunch it. Just "Reload UI" won't work for this extension.
+
+Done.
+
+# How to Use
+
+## Update Your SD Webui
+This extension need to get extra network's cards id. Which is added since **2023-02-06**.  
+**If your SD webui is an earlier version, you need to update it!**  
+
+## Scanning Models
+Go to extension tab "Civitai Helper". There is a button called "Scan model".  
+
+![](img/extension_tab.jpg)
+
+Click it and the extension will scan all your models to generate SHA256 hashes, using them to retreive model information and preview images from Civitai.
+
+**Scanning takes time, just wait it finish**
+
+For each model, it will create a json file to save all model info from Civitai. This model info file will be "Your_model_name.civitai.info" in your model folder.
+
+![](img/model_info_file.jpg)
+
+If a model info file already exists, it will be skipped. If a model cannot be found in Civitai, it will create an empty model info file, so the model won't be scanned twice.
+
+### Adding New Models
+When you have some new models, just click scan button again, to get new model's information and preview images. It won't scan the same model twice. 
+
+## Model Card
+**(Use this only after scanning finished)**   
+Open SD webui's build-in "Extra Network" tab, to show model cards.
+
+![](img/extra_network.jpg)
+
+
+Move your mouse on to the bottom of a model card. It will show 4 icon buttons:
+  - 🖼: Replace preview (a build-in button, modified from text to icon)
+  - 🌐: Open this model's Civitai url in a new tab
+  - 💡: Add this model's trigger words to prompt
+  - 🏷: Use this model's preview image's prompt
+
+![](img/model_card.jpg)
+
+**If these additional buttons are not there**, click the `Refresh Civitai Helper` button to bring them back.  
+
+![](img/refresh_ch.jpg)  
+Everytime after Extra Network tab refreshed, it will remove all these additional buttons. So, you need to click `Refresh Civitai Helper` button to bring them back.  
+
+### Thumbnail Mode
+Additional buttons work on thumbnail too, but due to SD webui's CSS issue, for now, they must be always displayed on thumbnail or don't display at all.   
+![](img/thumb_mode.jpg)
+
+
+## Download 
+To download a model by Civitai Model Page's Url, you need 3 steps:
+* Fill url, click button to get model info
+* It will show model name and type automatically. Just choose sub-folder and model version
+* Click download.
+![](img/download_model.jpg)
+
+Detail will be displayed on console log, with a progress bar.   
+Downloading can resume from break-point, so no fear for large file.   
+
+## Checking Model's New Version
+You can checking your local model's new version from civitai by model types. You can select multiple model types.   
+![](img/check_model_new_version.jpg)  
+
+The checking process has a "1 second delay" after each model's new version checking request. So it is a little slow.  
+
+This is to protect Civitai from issue like DDos from this extension. Some cloud service provider has a rule as "no more than 1 API request in a second for free user". Civitai doesn't have this rule yet, but we still need to protect it. There is no good for us if it is down.  
+
+**After checking process done**, it will display all new version's information on UI.  
+
+There are 3 urls for each new version. 
+* First one is model's civitai page.  
+* Second one is new version's download url.    
+* Third one is a button to download it into your SD's model folder with python.  
+With this one, output information is on "Download Model" section's log and console log. **One task at a time**.  
+
+![](img/check_model_new_version_output.jpg)
+
+
+## Get Model Info By Url
+This is used to force a local model links to a Civitai model. For example, you converted a model's format or pruned it. Then it can not be found on civitai when scanning.  
+
+In that case, if you still want to link it to a civitai model. You can use this funcion.   
+
+Choose this model from list, then offer a civitai model page's url.   
+
+After clicking button, extension will download that civitai model's info and preview image for the local file you picked.  
+
+![](img/get_one_model_info.jpg)  
+
+## Proxy
+**If you are updating to new version, you need to re-lanuch SD webui before using it.**   
+
+Proxy textbox is at the bottom of extension tab. 
+
+**Each time you fill or clear a proxy value, you need to save setting, and Re-load UI with setting tab's reload button.**  
+
+Then all requests to civitai will use the proxy.  
+
+For some sock5 proxy, need to be used as "socks5h://xxxxx".  
+
+
+
+
+## Other Setting
+**The Save Setting button, will save both "Scan Model"'s setting and other setting.**  
+
+* "Always Display Button" is good for touch screen.  
+* "Show Buttons on Thumb Mode" will turn on/off additional Buttons on thumbnail.  
+![](img/other_setting.jpg)
+
+
+
+
+## Preview Image
+Extra network uses both `model_file.png` and `model_file.preview.png` as preview image. But `model_file.png` has higher priority, because it is created by yourself.  
+
+When you don't have the higher priority one, it will use the other automatically.  
+
+## Prompt
+When you click the button "Use prompt from preview image", it does not use the prompt from your own preview image. It uses the one from civitai's preview image.  
+
+On civitai, a model's preview images may not has prompt. This extension will check this model's all civitai preview images' information and use the first one has prompt in it.  
+
+## SHA256
+To create a file SHA256, it need to read the whole file to generate a hash code. It gonna be slow for large files. 
+
+Also, extension uses Memory Optimized SHA256, which won't stuck your system and works with colab.  
+
+There are 2 cases this hash code can not find the model on civitai:
+* Some old models, which do not have SHA256 code on civitai.
+* The model's owner changed file on civitai, but does not change version name and description. So, the file on civitai is actually not the one on your manchine.  
+
+In these cases, you can always link a model to civitai by filling its URL in this extension.
+
+
+
+## Feature Request
+No new feature for v1.x after v1.5. All new feature will go to 2.x.
+
+2.x will focus on custom model information and may change name to "Model Info Helper", because it is not just focus on Civitai anymore. 
+
+From v1.5, v1.x goes into maintenance phase. 
+
+Enjoy!
+
+
+## Common Issue
+### 4 Buttons on card didn't show
+#### Localization
+There was a Localization issue if you are not using English version of SD webui. This is fixed in the latest version of this extension. **Bilingual localization extension is supported by PR since v1.6.1.1.**  
+
+##### Using cloud based localization extension
+Turn off cloud based localization extension, use normal localization extension.  
+
+#### Other case
+First of all, make sure you clicked "Refresh Civitai Helper" button.  
+
+If issue is still there, then only reason is you are not using the latest SD webui. So, Make sure you updated it.  
+
+Your update could be failed if you have modified SD webui's file. You need to check git command's console log to make sure it is updated. 
+
+In many cases, git will just refuse to update and tell you there are some conflicts need you to handle manually. If you don't check the consloe log, you will think your SD webui is updated, but it is not.  
+
+### Request, Scan or Get model info failed
+This extension is stable. So, the reason for this most likely is your internet connection to Civitai API service.  
+
+Civitai is not as stable as those rich websites, it can be down or refuse your API connection.  
+
+Civitai has a connection pool setting. Basicly, it's a max connection number that civitai can have at the same time. So, if there are already too manny connections on civitai, it will refuse your API connection.  
+
+In those cases, the only thing you can do is just wait a while then try again.  
+
+### Get Wrong model info and preview images from civitai
+A bad news is, some models are saved with a wrong sha256 in civitai's database. Check here for more detail:  
+[https://github.com/civitai/civitai/issues/426](https://github.com/civitai/civitai/issues/426)  
+
+So, for those models, this extension can not get the right model info or preview images.   
+
+In this case, you have to remove the model info file and get the right model info by a civitai url on this extension's tab page.  
+
+Also, you can report those models with wrong sha256 to civitai at following page:   
+[https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100](https://discord.com/channels/1037799583784370196/1096271712959615100/1096271712959615100)  
+
+Please report that model to civitai, so they can fix it.  
+
+
+
+
+### Scanning fail when using colab
+First of, search your error message with google. Most likely, it will be a colab issue.    
+
+If you are sure it is a out of memory issue when scanning models, and you are using this extension's latest version, then there is nothing we can do.   
+
+Since v1.5.5, we've already optimized the SHA256 function to the top. So the only 2 choices for you are:  
+* try again  
+* or use a pro account of colab.  
+
+
+
+
+
+# Change Log
+## v1.6.4
+* Add "Download All files" checkbox for downloading model section. Uncheck means only download 1 file.
+
+## v1.6.3
+* Support downloading multiple files, not avaiable when checking new version.
+
+## v1.6.2.1
+* when parsing civitai url, remove query string by PR
+
+## v1.6.2
+* When downloading, re-name file if file already exists
+
+## v1.6.1.1
+* Support bilingual localization extension by PR
+
+## v1.6.1
+* Fix Localization issue for 4 addtional buttons on cards. (Forgot that again...)
+
+## v1.6.0
+* Fix some UI issues to work with gradio 3.23.0
+* Support Proxy when connecting to civitai. Check document for detail.
+* check realpath when opening file, to fix error when using junction
+* Fix multiple addtional buttons issue after switching tabs. 
+
+## v1.5.7
+* Fix Localization issue for 4 addtional buttons on cards
+
+## v1.5.6
+* update error msg when can not connect to civitai API service
+* update thumb mode for SD webui new version's metadata button
+
+## v1.5.5
+* update SHA256 function, now it just use the code from pip
+
+## v1.5.4
+* set sys.stdout to utf-8
+* Add default header for requests to prevent from being blocked by civitai.
+* merge other v1.5.x change log to v1.5.4
+* When downloading a model by url, check if target model version is already existed in user selected sub-folder.
+* Support scanning only selected model types. 
+* Force TI scanning delay 1 second to prevent from civitai treating this extension's requests as attacking.
+
+## v1.5.0
+* Download a model by Civitai model page's url
+* Resume downloading from break-point
+* Download new version into SD Webui's model folder
+* Addtional button now works on thumbnail mode
+* Option to always show addtion button, for touch screen.
+
+## v1.4.2
+* ignore .vae file in model folder when scanning
+
+## v1.4.1
+* When checking new versions, also searching and ignore already existed ones.
+* Add version number to the bottom of this extension's tab
+
+## v1.4
+* Support checking model's new version, display the result in UI and offer download url
+* Remove addintional sub tabs on extension tab. make ui simpler.
+
+## v1.3
+* Open url at client side
+* Link selected model to civitai by url or model id
+* Save and load extension setting to file
+* Show button action's output to UI
+* Code refactoring
+
+## v1.2.1
+* Add more error checking to work with different versions of SD webui. 
+
+## v1.2
+* Support customer model folder
+* Support readable model info file
+* Support download preview image with max size
+* Remove card buttons when extra network is in thumbnail mode
+
+## v1.1
+* Support subfolders
+* Check if refresh is needed when clicking "Refresh Civitai Helper"
+* Add space when adding trigger words
+* Add memory Optimized sha256 as an option

Stable-Diffusion-Webui-Civitai-Helper/claim_wall.md

@@ -0,0 +1,91 @@
+# Claim Wall
+
+Since this extension got a little hot, some users come to **claim many other issues to this extension**.   
+
+Following is a wall, to show a few examples how they claim this extension doesn't work, because they don't read document or forget what they did before.  
+
+If you are looking for guideline, go to section [What you should do](#what-you-should-do)  
+
+# Wall
+
+### Didn't even update SD Webui and claim "tried everything"
+
+![](img/user_claim_wall/have_not_update_sdwebui.jpg)  
+
+
+### Havn't even scanned model
+After 4 replies, find that out, and modified his comment.  
+
+![](img/user_claim_wall/have_not_scan_model.jpg)  
+
+### Claim "pretty sure" this extension breaks his UI, takes 2days to find out it is not
+Then removed his comment from civitai, but his post on reddit is still there, so you can know what's really going on there.  
+
+1. Claim "pretty sure" this extension breaks his UI
+
+![](img/user_claim_wall/css_issue_part1.jpg)  
+
+![](img/user_claim_wall/css_issue_part2.jpg)  
+
+2. Find out it is not, after 2 days  
+
+![](img/user_claim_wall/css_issue_part3.jpg)  
+
+3. Still don't remember what he did with other extensions, until another user tells him, about 4 days later.  
+
+![](img/user_claim_wall/css_issue_part4.jpg)  
+
+### **Blame SD Webui's modification to this extension**  
+Latest SD webui removed a button from UI, they claim this extension did that, and want it back by this extension  
+
+![](img/user_claim_wall/blame_sdweui_update_to_this_ext.jpg)  
+
+### Claim other extension's error to this extension
+Just because both extensions have "Civitai" in extension's name  
+
+![](img/user_claim_wall/do_not_even_use_this_ext.jpg)   
+
+
+### **Didn't even use this extension and request a feature it already has**  
+
+![](img/user_claim_wall/request_a_feature_it_already_has.jpg)  
+
+### **Renamed model folder's name carelessly and forgot that**
+Takes about 8 hours to find out why this extension doesn't work on his SDwebui and ready to re-install SD webui from beginning. 
+
+1. claim this extension can not open civitai url on checkpoint models  
+  
+![](img/user_claim_wall/changed_model_folder_name_then_forget_part1.jpg)  
+
+2. I reply that model he mentioned works well in my SDwebui  
+  
+![](img/user_claim_wall/changed_model_folder_name_then_forget_part2.jpg)  
+
+3. After 6 hours' trying, find out his model folder's name is modified.  
+  
+![](img/user_claim_wall/changed_model_folder_name_then_forget_part3.jpg)  
+
+![](img/user_claim_wall/changed_model_folder_name_then_forget_part4.jpg)  
+
+
+# What you should do
+Above are just a very small piece of this kind of claims. Those claims won't help you. If you have an issue, following is the guidline:   
+
+* If you want to make your extension work, read the document.   
+
+* If your SD webui is broken, before you claim it is caused by this extension, you can disable it and try again.   
+
+* If you followed document, but it still doesn't work well, you can check console log's msg to find out the reason. If you can not understand those msg, you can come and ask for help, with console log's msg or screenshot.    
+
+* If you are using colab, and get an error from colab, then search that error msg in google. Because it's a colab's issue or limitation.    
+
+* If you checked console log window's msg and understand what it means, you are welcome to submit your issue.  
+
+
+
+
+
+
+
+
+