diff --git a/frontend/src/CustomNode.jsx b/frontend/src/CustomNode.jsx
index b5b4666..d4fb0a0 100644
--- a/frontend/src/CustomNode.jsx
+++ b/frontend/src/CustomNode.jsx
@@ -16,6 +16,14 @@ import {
export const NodeContext = React.createContext(null);
+function formatUiLabel(text) {
+ return String(text ?? '')
+ .replace(/_/g, ' ')
+ .replace(/\s+/g, ' ')
+ .trim()
+ .toLowerCase();
+}
+
class PreviewBoundary extends React.Component {
constructor(props) {
super(props);
@@ -786,7 +794,7 @@ function CustomNode({ id, data }) {
for (const [name, spec] of Object.entries(required)) {
const [type, opts] = Array.isArray(spec) ? spec : [spec, {}];
if (DATA_TYPES.has(type)) {
- dataInputs.push({ name, type, label: opts?.label || name });
+ dataInputs.push({ name, type, label: formatUiLabel(opts?.label || name) });
visibleInputNames.add(name);
} else if (opts?.hidden) {
hiddenWidgets.add(name);
@@ -836,7 +844,7 @@ function CustomNode({ id, data }) {
if (match) {
const idx = parseInt(match[1], 10);
if (idx === 0 || (connectedInputs && connectedInputs.has(`field_${idx - 1}`))) {
- dataInputs.push({ name, type, label: opts?.label || name });
+ dataInputs.push({ name, type, label: formatUiLabel(opts?.label || name) });
visibleInputNames.add(name);
}
continue;
@@ -845,7 +853,7 @@ function CustomNode({ id, data }) {
if (opts?.hidden) {
hiddenWidgets.add(name);
} else if (DATA_TYPES.has(type)) {
- dataInputs.push({ name, type, label: opts?.label || name });
+ dataInputs.push({ name, type, label: formatUiLabel(opts?.label || name) });
visibleInputNames.add(name);
} else {
widgets.push({ name, type, opts: opts || {}, socketType: SOCKET_WIDGET_TYPES.has(type) ? type : null });
@@ -882,7 +890,7 @@ function CustomNode({ id, data }) {
}
const outputs = def.output.map((type, i) => ({
- name: def.output_name[i] || type,
+ name: formatUiLabel(def.output_name[i] || type),
type,
slot: i,
}));
@@ -949,18 +957,21 @@ function CustomNode({ id, data }) {
/>
);
})()}
-