diff --git a/index.js b/index.js index 5ddd0ed..628b0a2 100644 --- a/index.js +++ b/index.js @@ -789,6 +789,7 @@ for (let rbModeElement of rbModeElements) { rbModeElement.addEventListener('click', async (evt) => { try { g_sd_mode = evt.target.value + scripts.script_store.setMode(g_sd_mode) // console.log(`You clicked: ${g_sd_mode}`) await displayUpdate() await postModeSelection() // do things after selection @@ -2003,7 +2004,8 @@ async function getSettings() { if ( scripts.script_store.is_active && - scripts.script_store.selected_script_name !== 'None' + scripts.script_store.selected_script_name !== 'None' && + scripts.script_store.is_selected_script_available ) { payload['script_args'] = scripts.script_store.orderedValues() diff --git a/ultimate_sd_upscaler/src/config.ts b/ultimate_sd_upscaler/src/config.ts index a07b1cc..97dcd0c 100644 --- a/ultimate_sd_upscaler/src/config.ts +++ b/ultimate_sd_upscaler/src/config.ts @@ -83,7 +83,7 @@ export let ui_config = { 'Half tile offset pass + intersections', ], type: 'index', - value: 0, + value: 3, }, target_size_type: { diff --git a/ultimate_sd_upscaler/src/elements.tsx b/ultimate_sd_upscaler/src/elements.tsx index 146630a..78127df 100644 --- a/ultimate_sd_upscaler/src/elements.tsx +++ b/ultimate_sd_upscaler/src/elements.tsx @@ -173,11 +173,14 @@ export class SpMenu extends React.Component<{ 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 } - spMenuRef = React.createRef() + state = { + selectedItem: this.props.items ? this.props.items[0] : undefined, + } componentDidUpdate(prevProps: any) { // console.log('prevProps.items: ', prevProps.items) @@ -221,10 +224,22 @@ export class SpMenu extends React.Component<{ {this.props.label_item} )} - {this.props.items?.map((item, index) => ( + {this.props.items?.map((item, index: number) => ( { this.handleItemClick(item, index) }} @@ -238,7 +253,3 @@ export class SpMenu extends React.Component<{ ) } } - -function handleSliderValueChange(newValue: Event) { - console.log('handleSliderValueChange: newValue', newValue) -} diff --git a/ultimate_sd_upscaler/src/scripts.tsx b/ultimate_sd_upscaler/src/scripts.tsx index b5c61e1..89a00b4 100644 --- a/ultimate_sd_upscaler/src/scripts.tsx +++ b/ultimate_sd_upscaler/src/scripts.tsx @@ -6,37 +6,45 @@ 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: [] }, + 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 @@ -53,17 +61,57 @@ class ScriptStore { } 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 : ( + + {'the script is not available in the current Mode'} + + ) + return ( <> { script_store.setSelectedScript(value.item) }} /> +
+ {script_message} + + {/* {script_store.disabled.map((value, index) => ( +
  • {value ? 'true' : 'false'}
  • + ))} */} +
    ) => { @@ -85,7 +140,10 @@ class ScriptComponent extends React.Component<{}> { ultimate_sd_upscale_script.script_name && ( )} diff --git a/ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx b/ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx index d9a16bd..ea3884f 100644 --- a/ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx +++ b/ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx @@ -7,12 +7,22 @@ import { Provider, inject, observer } from 'mobx-react' import { SliderType, SpMenu, SpSliderWithLabel } from './elements' import * as sdapi from '../../sdapi_py_re' -import { storeAnnotation } from 'mobx/dist/internal' 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 @@ -176,8 +186,8 @@ export class UltimateSDUpscalerForm extends React.Component<{ steps={ui_config[id].step} out_min={ui_config[id].minimum} out_max={ui_config[id].maximum} - output_value={ui_config[id].value} - title="this is a title" + output_value={this.props.store.data[id]} + title={ui_config[id].label} label={ui_config[id].label} onSliderChange={this.handleSliderChange} /> @@ -196,8 +206,8 @@ export class UltimateSDUpscalerForm extends React.Component<{ steps={ui_config[id].step} out_min={ui_config[id].minimum} out_max={ui_config[id].maximum} - output_value={ui_config[id].value} - title="this is a title" + output_value={this.props.store.data[id]} + title={ui_config[id].label} label={ui_config[id].label} onSliderChange={this.handleSliderChange} slider_type={ @@ -212,20 +222,18 @@ export class UltimateSDUpscalerForm extends React.Component<{ - {group_1_sliders} - {seamfix_sliders} {ui_config.save_seams_fix_image.label} - \ + {group_1_sliders} + {seamfix_sliders} ) }