enable and disable the scripts based on the selected mode

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()
 

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: {

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 }
+    state = {
-    spMenuRef = React.createRef<HTMLDivElement>()
+        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}
                             </sp-menu-item>
                         )}
-                        {this.props.items?.map((item, index) => (
+                        {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)
                                 }}
@@ -238,7 +253,3 @@ export class SpMenu extends React.Component<{
         )
     }
 }
-
-function handleSliderValueChange(newValue: Event) {
-    console.log('handleSliderValueChange: newValue', newValue)
-}

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 : (
+                <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'}
@@ -71,6 +119,13 @@ class ScriptComponent extends React.Component<{}> {
                         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>) => {
@@ -85,7 +140,10 @@ class ScriptComponent extends React.Component<{}> {
                         ultimate_sd_upscale_script.script_name && (
                         <ultimate_sd_upscale_script.UltimateSDUpscalerForm
                             store={
-                                ultimate_sd_upscale_script.ultimate_sd_upscaler_store
+                                // ultimate_sd_upscale_script.ultimate_sd_upscaler_store
+                                script_store.scripts[
+                                    script_store.selected_script_name
+                                ].store
                             }
                         />
                     )}

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}
+                output_value={this.props.store.data[id]}
-                title="this is a title"
+                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}
+                output_value={this.props.store.data[id]}
-                title="this is a title"
+                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<{
                 <SpMenu
                     title="Stable Diffusion Upscalers"
                     items={this.state.sd_upscalers}
-                    // style="width: 199px; margin-right: 5px"
                     label_item="Select Upscaler"
                     id={'upscaler_index'}
                     onChange={this.handleMenuChange}
+                    selected_index={this.props.store.data.upscaler_index}
                 />
-                {group_1_sliders}
-                {seamfix_sliders}
                 <SpMenu
-                    title=""
+                    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}
-                    // style="width: 199px; margin-right: 5px"
+                    selected_index={this.props.store.data.target_size_type}
                 />
                 <SpSliderWithLabel
                     label={ui_config.custom_scale.label}
@@ -238,12 +246,12 @@ export class UltimateSDUpscalerForm extends React.Component<{
                     slider_type={SliderType.Float}
                 />
                 <SpMenu
-                    title="Seams Fix Type"
+                    title={'Seams Fix Type'}
                     id={'seams_fix_type'}
                     items={ui_config.seams_fix_type.choices}
                     label_item="Select Seams Fix Type"
                     onChange={this.handleMenuChange}
-                    // style="width: 199px; margin-right: 5px"
+                    selected_index={this.props.store.data.seams_fix_type}
                 />
                 <sp-checkbox
                     checked={
@@ -275,7 +283,8 @@ export class UltimateSDUpscalerForm extends React.Component<{
                 >
                     {ui_config.save_seams_fix_image.label}
                 </sp-checkbox>
-                \
+                {group_1_sliders}
+                {seamfix_sliders}
             </div>
         )
     }