Upload components/NodeEditor.jsx with huggingface_hub

components/NodeEditor.jsx

@@ -0,0 +1,101 @@
+import React, { useCallback } from 'react'
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+} from 'react-flow-renderer'
+
+const nodeTypes = {
+  checkpoint: ({ data }) => (
+    <div className="p-3 rounded-lg bg-dark-800 border border-primary-500 text-white">
+      <div className="font-bold text-primary-500">{data.label}</div>
+      <div className="text-sm mt-1">{data.ckpt_name}</div>
+    </div>
+  ),
+  textEncode: ({ data }) => (
+    <div className="p-3 rounded-lg bg-dark-800 border border-green-500 text-white max-w-xs">
+      <div className="font-bold text-green-500">{data.label}</div>
+      <div className="text-sm mt-1 truncate">{data.text}</div>
+    </div>
+  ),
+  sampler: ({ data }) => (
+    <div className="p-3 rounded-lg bg-dark-800 border border-purple-500 text-white">
+      <div className="font-bold text-purple-500">{data.label}</div>
+      <div className="text-xs mt-1">
+        Steps: {data.steps}, CFG: {data.cfg}
+      </div>
+    </div>
+  ),
+  vae: ({ data }) => (
+    <div className="p-3 rounded-lg bg-dark-800 border border-yellow-500 text-white">
+      <div className="font-bold text-yellow-500">{data.label}</div>
+    </div>
+  ),
+  save: ({ data }) => (
+    <div className="p-3 rounded-lg bg-dark-800 border border-red-500 text-white">
+      <div className="font-bold text-red-500">{data.label}</div>
+    </div>
+  ),
+}
+
+export default function NodeEditor({ workflow }) {
+  const initialNodes = workflow.nodes.map(node => {
+    const baseNode = {
+      id: node.id.toString(),
+      position: { x: node.pos[0], y: node.pos[1] },
+      data: { ...node.inputs, label: node.type },
+    }
+
+    switch(node.type) {
+      case 'CheckpointLoaderSimple':
+        return { ...baseNode, type: 'checkpoint' }
+      case 'CLIPTextEncode':
+        return { ...baseNode, type: 'textEncode' }
+      case 'KSampler':
+        return { ...baseNode, type: 'sampler' }
+      case 'VAEDecode':
+        return { ...baseNode, type: 'vae' }
+      case 'SaveImage':
+        return { ...baseNode, type: 'save' }
+      default:
+        return baseNode
+    }
+  })
+
+  const initialEdges = workflow.links.map(link => ({
+    id: `e${link[0]}-${link[1]}-${link[2]}-${link[3]}`,
+    source: link[0].toString(),
+    sourceHandle: link[1].toString(),
+    target: link[2].toString(),
+    targetHandle: link[3].toString(),
+  }))
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [setEdges]
+  )
+
+  return (
+    <div className="h-[calc(100vh-64px)] bg-dark-900">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+      >
+        <Background />
+        <Controls />
+        <MiniMap />
+      </ReactFlow>
+    </div>
+  )
+}