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

enable and disable the scripts based on the selected mode

ultimate_sd_upscaler
Abdullah Alfaraj 2023-05-22 15:22:57 +03:00
parent 119462075d
commit e4737f9150
5 changed files with 105 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

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

2
ultimate_sd_upscaler/src/config.ts
View File

@ -83,7 +83,7 @@ export let ui_config = {
'Half tile offset pass + intersections',
],
type: 'index',
value: 0,
value: 3,
},
target_size_type: {

25
ultimate_sd_upscaler/src/elements.tsx
View File

@ -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<HTMLDivElement>()
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}
</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)
}

64
ultimate_sd_upscaler/src/scripts.tsx
View File

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

35
ultimate_sd_upscaler/src/ultimate_sd_upscaler.tsx
View File

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