\n \n {input.label}\n \n

\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'int')}\n className=\"flex-1\"\n />\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'int')}\n className=\"w-20 px-2 py-1 border border-gray-300 rounded text-sm\"\n />\n

\n {intConstraints.min || 0}\n {intConstraints.max || 100}\n

\n );\n\n case 'float':\n const floatConstraints = input.constraints || {};\n return (\n

\n \n {input.label}\n \n

\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'float')}\n className=\"flex-1\"\n />\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'float')}\n className=\"w-24 px-2 py-1 border border-gray-300 rounded text-sm\"\n />\n

\n {floatConstraints.min || 0}\n {floatConstraints.max || 10}\n

\n );\n\n case 'string':\n const stringConstraints = input.constraints || {};\n return (\n

\n \n {input.label}\n \n {stringConstraints.multiline ? (\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'string')}\n rows={4}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical\"\n placeholder=\"Enter text...\"\n />\n ) : (\n handleInputChange(input.nodeId, input.inputName, e.target.value, 'string')}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Enter text...\"\n />\n )}\n

\n );\n\n case 'image':\n return (\n

\n \n {input.label}\n \n

\n fileInputRefs.current[inputKey] = el}\n type=\"file\"\n accept=\"image/*\"\n onChange={(e) => {\n const file = e.target.files?.[0];\n if (file) {\n handleImageUpload(input.nodeId, input.inputName, file);\n }\n }}\n className=\"hidden\"\n />\n fileInputRefs.current[inputKey]?.click()}\n className=\"px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm\"\n >\n 📁 Choose Image\n \n {input.currentValue && (\n \n {input.currentValue}\n \n )}\n

\n Note: Images need to be uploaded to ComfyUI's input folder manually\n

\n );\n\n default:\n return (\n

\n Unsupported input type: {input.inputType}\n

\n );\n }\n };\n\n if (customInputs.length === 0) {\n return null;\n }\n\n return (\n

Customizable Inputs

\n \n {customInputs.map((nodeData) => (\n

\n toggleNodeExpanded(nodeData.nodeId)}\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-t-lg flex items-center justify-between\"\n >\n

\n \n {nodeData.nodeName || `Node ${nodeData.nodeId}`}\n \n \n ({nodeData.inputs.length} inputs)\n \n

\n \n {expandedNodes.has(nodeData.nodeId) ? '▼' : '▶'}\n \n \n \n {expandedNodes.has(nodeData.nodeId) && (\n

\n {nodeData.inputs.map((input) => (\n

\n {renderInput(input)}\n

\n ))}\n

\n )}\n

\n ))}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/anibalpw/comfy-frontend/code/frontend/components/CustomInputs.tsx","extension","actionData","errors"]