+ 
+
+
+
+
+
+ )
+ return element
+}
+function nodeInputToHtmlElement(input: ValidInput) {
+ let element
+ if (
+ [InputTypeEnum.NumberField, InputTypeEnum.TextField].includes(
+ input.type
+ )
+ ) {
+ element = createTextField(input)
+ } else if ([InputTypeEnum.Menu].includes(input.type)) {
+ element = createMenu(input)
+ } else if ([InputTypeEnum.TextArea].includes(input.type)) {
+ element = createTextArea(input)
+ } else if ([InputTypeEnum.ImageBase64].includes(input.type)) {
+ element = createImageBase64(input)
+ }
+ return element
+}
+
+export async function loadWorkflow(workflow_path: string) {
+ try {
+ store.data.current_prompt = (
+ await getWorkflowApi(workflow_path)
+ )?.prompt
+
+ store.data.is_random_seed = Object.fromEntries(
+ Object.keys(toJS(store.data.current_prompt)).map(
+ (node_id: string) => {
+ return [node_id, false]
+ }
+ )
+ )
+ const current_prompt: any = store.toJsFunc().data.current_prompt
+ const loadImageNodes = Object.keys(current_prompt)
+ .filter(
+ (key: any) => current_prompt[key].class_type === 'LoadImage'
+ )
+ .reduce(
+ (acc, key) => ({
+ ...acc,
+ [key]: current_prompt[key],
+ }),
+ {}
+ )
+
+ Object.keys(loadImageNodes).forEach((node_id: any) => {
+ store.data.current_prompt[node_id] = {
+ inputs: {
+ image_base64: '',
+ },
+ class_type: 'LoadImageBase64',
+ }
+ })
+
+ const node_obj = Object.entries(store.data.current_prompt)
+ //clear both node structure and base64 images store values
+ store.data.comfyui_valid_nodes = {}
+ store.data.uuids = {}
+ // store.data.load_image_base64_strings = {}
+ node_obj.forEach(([node_id, node]: [string, any]) => {
+ console.log(node_id, node)
+ const valid_input = parseUIFromNode(node, node_id)
+ })
+ } catch (e) {
+ console.error(e)
+ }
+}
+
+function setSliderValue(store: any, node_id: string, name: string, value: any) {
+ runInAction(() => {
+ store.data.current_prompt2[node_id].inputs[name] = value
+ })
+}
+async function onChangeLoadImage(node_id: string, filename: string) {
+ try {
+ store.data.current_uploaded_image[node_id] =
+ await util.base64UrlFromComfy({
+ filename: encodeURIComponent(filename),
+ type: 'input',
+ subfolder: '',
+ })
+ store.data.current_prompt2[node_id].inputs.image = filename
+ } catch (e) {
+ console.warn(e)
+ }
+}
+async function onChangeLoadVideo(node_id: string, filename: string) {
+ try {
+ store.data.current_uploaded_video[node_id] =
+ await util.base64UrlFromComfy({
+ filename: encodeURIComponent(filename),
+ type: 'input',
+ subfolder: '',
+ })
+ store.data.current_prompt2[node_id].inputs.video = filename
+ } catch (e) {
+ console.warn(e)
+ }
+}
+function renderNode(node_id: string, node: any, is_output: boolean) {
+ const comfy_node_info = toJS(store.data.object_info[node.class_type])
+
+ // console.log('comfy_node_info: ', comfy_node_info)
+ const node_type = util.getNodeType(node.class_type)
+ let node_html
+
+ const inputs = toJS(node.inputs)
+ node_html = Object.entries(inputs).map(([name, value], index) => {
+ // store.data.current_prompt2[node_id].inputs[name] = value
+ try {
+ const input = comfy_node_info.input.required[name]
+
+ let { type, config } = util.parseComfyInput(name, input, value)
+ if (type === ComfyInputType.Skip) {
+ return (
+
+ )
+ }
+ const html_element = renderInput(
+ node_id,
+ name,
+ type,
+ config,
+ `${node_id}_${name}_${type}_${index}`
+ )
+
+ return html_element
+ } catch (e) {
+ console.error(e)
+ return (
+
+ {/* {name},{type}, {JSON.stringify(config)} */}
+
+ )
+ }
+ })
+
+ if (node_type === util.ComfyNodeType.LoadImage) {
+ const uploaded_images = store.data.uploaded_images_list
+ const inputs = store.data.current_prompt2[node_id].inputs
+ const node_name = node.class_type
+ node_html = (
+
+ {/* New load image component */}
+
+ {node_name}
+
+ 
{
+ console.error(
+ 'error loading image: ',
+ store.data.current_uploaded_image[node_id]
+ )
+
+ onChangeLoadImage(node_id, inputs.image)
+ }}
+ />
+
+ )
+ } else if (node_type === util.ComfyNodeType.LoadVideo) {
+ //ToDo: rewrite this to support video loading node
+ const uploaded_video_list = store.data.uploaded_video_list
+ const inputs = store.data.current_prompt2[node_id].inputs
+ const node_name = node.class_type
+ node_html = (
+
+
+
+
+
+
+ ) => {
+ console.log('onChange value.item: ', item)
+ inputs.image = item
+ //load image store for each LoadImage Node
+ //use node_id to store these
+
+ onChangeLoadImage(node_id, item)
+ }}
+ >
+
+
+
+
+
+
+
+ {/* New load Video component */}
+
+ {node_name}
+
+ 
{
+ console.error(
+ 'error loading video: ',
+ store.data.current_uploaded_video[node_id]
+ )
+
+ onChangeLoadVideo(node_id, inputs.video)
+ }}
+ />
+
+ )
+ }
+
+ if (is_output) {
+ const output_node_element = (
+
+
+
+
+
+ ) => {
+ console.log('onChange value.item: ', item)
+ inputs.video = item
+
+ onChangeLoadVideo(node_id, item)
+ }}
+ >
+
+
+
+
+
+
+
+ {node_html}
+ {store.data.current_prompt2_output[node_id]?.length > 0 ? (
+ {
+ store.data.output_thumbnail_image_size[node_id] =
+ evt.target.value
+ }}
+ >
+
+ Thumbnail Size:
+
+
+ {parseInt(
+ store.data.output_thumbnail_image_size[
+ node_id
+ ] as any
+ )}
+
+
+ ) : (
+ void 0
+ )}
+ {
+ let format = util.extractFormat(
+ store.data.current_prompt2_output[node_id][
+ index
+ ]
+ )
+
+ if (format === 'gif') {
+ //@ts-ignore
+ openFileFromUrlExe(
+ store.data.current_prompt2_output[
+ node_id
+ ][index],
+ format
+ )
+ } else if (format === 'png') {
+ urlToCanvas(
+ store.data.current_prompt2_output[
+ node_id
+ ][index],
+ 'comfy_output.png'
+ )
+ }
+ },
+ title: 'Copy Image to Canvas',
+ },
+ {
+ ComponentType: MoveToCanvasSvg,
+ callback: async (index: number) => {
+ let format = util.extractFormat(
+ store.data.current_prompt2_output[node_id][
+ index
+ ]
+ )
+
+ if (format === 'png') {
+ const selectionInfo =
+ await getSelectionInfoExe()
+ const image_layer = await moveImageToLayer(
+ base64UrlToBase64(
+ store.data.current_prompt2_output[
+ node_id
+ ][index]
+ ),
+ selectionInfo
+ )
+ }
+ },
+ title: 'Copy Image to Selection Area',
+ },
+ ]}
+ >
+
+ )
+
+ return output_node_element
+ }
+ return node_html
+}
+function renderInput(
+ node_id: string,
+ name: string,
+ type: any,
+ config: any,
+ key?: string
+) {
+ let html_element = (
+
+ {name},{type}, {JSON.stringify(config)}
+
+ )
+ const inputs = store.data.current_prompt2[node_id].inputs
+
+ if (type === util.ComfyInputType.Seed) {
+ html_element = (
+ <>
+ {html_element}
+}
+
+export function swap(index1: number, index2: number) {
+ const { length } = store.data.nodes_order
+ if (index1 >= 0 && index1 < length && index2 >= 0 && index2 < length) {
+ ;[store.data.nodes_order[index1], store.data.nodes_order[index2]] = [
+ store.data.nodes_order[index2],
+ store.data.nodes_order[index1],
+ ]
+ }
+}
+
+export function saveWorkflowData(
+ workflow_name: string,
+ { prompt, nodes_order, nodes_label }: WorkflowData
+) {
+ storage.localStorage.setItem(
+ workflow_name,
+ JSON.stringify({ prompt, nodes_order, nodes_label })
+ )
+}
+export function loadWorkflowData(workflow_name: string): WorkflowData {
+ const workflow_data: WorkflowData = JSON.parse(
+ storage.localStorage.getItem(workflow_name)
+ )
+ return workflow_data
+}
+interface WorkflowData {
+ prompt: any
+ nodes_order: string[]
+ nodes_label: Record
+
+ )
+ }
+}
+const container = document.getElementById('ComfyUIContainer')!
+const root = ReactDOM.createRoot(container)
+root.render(
+ //
+ {/* {util.getNodes(util.hi_res_workflow).map((node, index) => {
+ // return
+ {node.class_type}
+ return (
+ {this.renderNode(node)}
+ )
+ })} */}
+
+
+
+
+
+
+
+ {
+ store.data.selected_workflow_name = value.item
+ loadWorkflow2(store.data.workflows2[value.item])
+ }}
+ > {' '}
+
+
+
+
+ {store.data.object_info ? (
+ <>
+
+ {util
+ .getNodes(store.data.current_prompt2)
+ .sort(
+ ([node_id1, node1], [node_id2, node2]) => {
+ return (
+ store.data.nodes_order.indexOf(
+ node_id1
+ ) -
+ store.data.nodes_order.indexOf(
+ node_id2
+ )
+ )
+ }
+ )
+
+ .map(([node_id, node], index) => {
+ try {
+ const is_output =
+ store.data.object_info[
+ node.class_type
+ ].output_node
+ return (
+
+ {Locale(
+ `Error: Node ${node.class_type} is
+ missing, please install it from
+ comfyui manager`
+ )}
+
+ )
+ }
+ })}
+
+
+ ) : (
+ void 0
+ )}
+
+
+ "{node_id}":{' '}
+
+ {
+ store.data
+ .nodes_label[
+ node_id
+ ]
+ }
+ {' '}
+ {' '}
+
+ {node.class_type}
+
+
+ )
+ } catch (e) {
+ console.error(
+ `node_id: ${node_id}`,
+ 'node:',
+ toJS(node),
+ 'node.class_type',
+ node.class_type,
+ 'store.data.object_info[node.class_type]: ',
+ store.data.object_info[
+ node.class_type
+ ],
+ 'error: ',
+ e
+ )
+ return (
+
+
+
+
+
+
+
+ {/* */}
+
+
+ {
+ store.data.nodes_label[
+ node_id
+ ] =
+ event.target.value
+ }}
+ >
+
+ {renderNode(
+ node_id,
+ node,
+ is_output
+ )}
+
+
+ {/*
+
+ {/*
- {
+ const default_value =
+ // storeData.module_list[0] || 'None'
+ 'None'
+
+ storeData.module = default_value
+ return default_value
+ }}
+ onChange={(item: any) => {
+ this.onPreprocsesorChange(item)
+ }}
/>
{!pd.model_free && (
- {
+ const default_value =
+ // storeData.model_list[0] || 'None'
+ 'None'
+ storeData.model = default_value
+ return default_value
+ }}
+ onChange={(item: any) => {
+ this.onModelChange(item)
+ }}
/>
)}
diff --git a/typescripts/controlnet/entry.ts b/typescripts/controlnet/entry.ts
index 43b35c1b..41ae098c 100644
--- a/typescripts/controlnet/entry.ts
+++ b/typescripts/controlnet/entry.ts
@@ -1,8 +1,9 @@
+import { toJS } from 'mobx'
import { setControlImageSrc } from '../../utility/html_manip'
// import { session_ts } from '../entry'
// import * as session_ts from '../session/session'
import { store as session_store } from '../session/session_store'
-import { Enum, api, python_replacement } from '../util/oldSystem'
+import { Enum, api, io, python_replacement } from '../util/oldSystem'
import { GenerationModeEnum } from '../util/ts/enum'
import store, {
DefaultControlNetUnitData,
@@ -14,6 +15,40 @@ const { getExtensionUrl } = python_replacement
declare const g_sd_config_obj: any
declare let g_sd_url: string
+function convertComfyModuleDetailsToPluginModuleDetails(
+ comfy_module_details: Record
-
Batch Size:
+ {Locale('Batch Size:')}
{
alignItems: 'flex-start',
}}
>
- Batch Count:
+ {Locale('Batch Count:')}
{
}}
>
- Sampling Steps
+ {Locale('Sampling Steps:')}
{
- Selection Mode:
+ {Locale('Selection Mode:')}
@@ -575,7 +640,7 @@ class SDTab extends React.Component<{}> {
}
}}
>
- {selection_mode.name}
+ {Locale(selection_mode.name)}
)
}
@@ -705,7 +770,7 @@ class SDTab extends React.Component<{}> {
}}
>
- Width:
+ {Locale('Width:')}
{
}}
>
- Height:
+ {Locale('Height:')}
{
}}
>
- CFG Scale:
+ {Locale('CFG Scale:')}
@@ -814,7 +879,7 @@ class SDTab extends React.Component<{}> {
}}
>
- Denoising Strength:
+ {Locale('Denoising Strength:')}
{store.data.denoising_strength.toFixed(2)}
@@ -933,7 +998,9 @@ class SDTab extends React.Component<{}> {
}
}}
>
- Mask Expansion:
+
+ {Locale('Mask Expansion:')}
+
{
store.data.enable_hr = evt.target.checked
}}
>
- Hi Res Fix
+ {Locale('Hi Res Fix')}
{
store.data.tiling = evt.target.checked
}}
>
- tiling
+ {Locale('Tiling')}
//
)
+
+export default {
+ store,
+ populateVAE,
+}
diff --git a/typescripts/tool_bar/tool_bar.tsx b/typescripts/tool_bar/tool_bar.tsx
index af8481bb..fe8609bf 100644
--- a/typescripts/tool_bar/tool_bar.tsx
+++ b/typescripts/tool_bar/tool_bar.tsx
@@ -137,8 +137,7 @@ class ToolBar extends React.Component<{}> {
}}
>
- {
- return lora.name
- })}
+ // items={helper_store.data.loras.map((lora: any) => {
+ // return lora.name
+ // })}
+ items={helper_store.data.loras}
label_item="Select Lora"
// selected_index={store.data.models
// .map((model) => {
@@ -272,8 +313,19 @@ class SDTab extends React.Component<{}> {
positive: `${prompt} ${lora_prompt}`,
})
}}
- >
- {
+ const lora_prompt = getLoraModelPrompt(item)
+ const prompt = multiPrompts.getPrompt().positive
+ multiPrompts.setPrompt({
+ positive: `${prompt} ${lora_prompt}`,
+ })
+ }}
+ />
+ {/* {
positive: `${prompt} ${value.item}`,
})
}}
- >
+ > */}
+ {
+ const prompt = multiPrompts.getPrompt().positive
+ multiPrompts.setPrompt({
+ positive: `${prompt} ${item}`,
+ })
+ }}
+ />
{
padding: '3px',
}}
>
-
+
@@ -363,7 +428,7 @@ class SDTab extends React.Component<{}> {
: void 0
}
>
- {config.name}
+ {Locale(config.name)}
)
})}
@@ -465,7 +530,7 @@ class SDTab extends React.Component<{}> {
alignItems: 'flex-start',
}}
>
-
@@ -997,30 +1064,31 @@ class SDTab extends React.Component<{}> {
Mask Content:
- {mask_content_config.map(
- (mask_content, index: number) => {
- return (
- {
+ return (
+ {
+ store.data.inpainting_fill =
mask_content.value
- ? true
- : void 0
- }
- value={mask_content.value}
- onClick={(evt: any) => {
- store.data.inpainting_fill =
- mask_content.value
- }}
- >
- {mask_content.name}
-
- )
- }
- )}
+ }}
+ >
+ {Locale(`${mask_content.name}`)}
+
+ )
+ })}
@@ -1053,24 +1121,20 @@ class SDTab extends React.Component<{}> {
evt.target.checked
}}
>
- Restore Faces
+ {Locale('Restore Faces')}
{
- Select Extension:
+
+ {Locale('Select Extension:')}
+
{[
ExtensionTypeEnum.ProxyServer,
ExtensionTypeEnum.Auto1111Extension,
@@ -329,7 +386,7 @@ export class Settings extends React.Component<{}> {
evt.target.value
}}
>
- {config[extension_type].label}
+ {Locale(config[extension_type].label)}
)
})}
@@ -352,7 +409,7 @@ export class Settings extends React.Component<{}> {
)
}}
>
- Turn Off Server Status Alert
+ {Locale('Turn Off Server Status Alert')}
diff --git a/typescripts/main/main.tsx b/typescripts/settings/vae.tsx
similarity index 84%
rename from typescripts/main/main.tsx
rename to typescripts/settings/vae.tsx
index cd8cc285..3d4559c1 100644
--- a/typescripts/main/main.tsx
+++ b/typescripts/settings/vae.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { observer } from 'mobx-react'
-import { AStore } from './astore'
+import { AStore } from '../main/astore'
import { SpMenu } from '../util/elements'
import { api, python_replacement } from '../util/oldSystem'
@@ -10,27 +10,11 @@ import '../locale/locale-for-old-html'
import { ErrorBoundary } from '../util/errorBoundary'
declare let g_sd_url: string
-// class SDStore extends AStore {
-// constructor(data: any) {
-// super(data)
-// }
-// }
-// const configValues = Object.entries(ui_config).reduce(
-// (acc, [key, value]) => ({ ...acc, [key]: value.value }),
-// {}
-// )
-// const default_values: any = {
-// _: '',
-// ...configValues,
-// }
-
-const default_values: any = {
- vae_model_list: [],
- current_vae: '',
-}
-
-export const store = new AStore(default_values)
+export const store = new AStore({
+ vae_model_list: [] as string[],
+ current_vae: '' as string,
+})
@observer
export class VAEComponent extends React.Component<{
@@ -54,7 +38,6 @@ export class VAEComponent extends React.Component<{
- Seed:
+
+ {Locale('Seed:')}
+
{
store.data.seed = '-1'
}}
>
- Random
+ {Locale('Random')}
{session_store.data.can_generate ? (
@@ -301,12 +356,14 @@ export class Settings extends React.Component<{}> {
store.data.use_sharp_mask = evt.target.checked
}}
>
- use sharp mask
+ {Locale('use sharp mask')}
@@ -394,7 +451,7 @@ export class Settings extends React.Component<{}> {
: false
}}
>
- Smart Object
+ {Locale('Smart Object')}