+ New load image component
+
+ {node_name}
+
+ 
{
+ console.error(
+ 'error loading image: ',
+ store.data.current_loaded_image[node_id]
+ )
+ // try {
+ // const filename = inputs.image
+ // store.data.current_loaded_image[node_id] =
+ // await util.base64UrlFromComfy(
+ // store.data.comfy_server,
+ // {
+ // filename: encodeURIComponent(filename),
+ // type: 'input',
+ // subfolder: '',
+ // }
+ // )
+ // console.log(
+ // 'store.data.current_loaded_image[node_id]: ',
+ // toJS(store.data.current_loaded_image[node_id])
+ // )
+ // } catch (e) {
+ // console.warn(e)
+ // }
+ onChangeLoadImage(node_id, inputs.image)
+ }}
+ />
+ {/*
+ )
+ } else if (node_type === util.ComfyNodeType.Normal) {
+ node_html = Object.entries(node.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(input)
+ const html_element = renderInput(
+ node_id,
+ name,
+ type,
+ config,
+ `${node_id}_${name}_${type}_${index}`
+ )
+ return html_element
+ } catch (e) {
+ console.error(e)
+ }
+ })
+ }
+ if (is_output) {
+ const output_node_element = (
+
+
+ ) => {
+ 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)
+ }}
+ >
+
+
+
+
+
+
+
+ {
+ store.data.output_thumbnail_image_size[node_id] =
+ evt.target.value
+ }}
+ >
+
+ Thumbnail Size:
+
+
+ {parseInt(
+ store.data.output_thumbnail_image_size[
+ node_id
+ ] as any
+ )}
+
+
+ {
+ // io.IO.base64ToLayer(
+ // store.data.current_prompt2_output[node_id][
+ // index
+ // ]
+ // )
+ urlToCanvas(
+ store.data.current_prompt2_output[node_id][
+ index
+ ],
+ 'comfy_output.png'
+ )
+ },
+ title: 'Copy Image to Canvas',
+ },
+ ]}
+ >
+
+ )
+
+ 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.BigNumber) {
+ 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) => {
+ return (
+
+
+ ) : (
+ void 0
+ )}
+
+
+ "{node_id}":{' '}
+
+ {
+ store.data.nodes_label[
+ node_id
+ ]
+ }
+ {' '}
+ {' '}
+
+ {node.class_type}
+
+
+ )
+ })}
+
+
+
+
+
+
+
+ {/* */}
+
+
+ {
+ store.data.nodes_label[
+ node_id
+ ] = event.target.value
+ }}
+ >
+
+ {renderNode(node_id, node)}
+ {/*
-
-
-
- {/*
+
+ {/*
+
+ {/*