Merge pull request #52 from ForgeOpus/resnet_update

fixed custom block ui

Author: RETR0-OS

project/block_manager/services/nodes/pytorch/batchnorm2d.py

@@ -10,12 +10,12 @@ class BatchNorm2DNode(NodeDefinition):
     @property
     def metadata(self) -> NodeMetadata:
         return NodeMetadata(
-            type="batchnorm2d",
-            label="BatchNorm2D",
+            type="batchnorm",
+            label="Batch Normalization",
             category="basic",
-            color="var(--color-primary)",
+            color="var(--color-accent)",
             icon="ChartLineUp",
-            description="Batch normalization for 2D inputs",
+            description="Batch normalization layer",
             framework=Framework.PYTORCH
         )
 

project/block_manager/services/nodes/tensorflow/batchnorm2d.py

@@ -10,11 +10,11 @@ class BatchNorm2DNode(NodeDefinition):
     @property
     def metadata(self) -> NodeMetadata:
         return NodeMetadata(
-            type="batchnorm2d",
-            label="BatchNorm2D",
+            type="batchnorm",
+            label="Batch Normalization",
             category="basic",
-            color="var(--color-orange)",
-            icon="Zap",
+            color="var(--color-accent)",
+            icon="ChartLineUp",
             description="Batch normalization layer",
             framework=Framework.TENSORFLOW
         )

project/block_manager/services/validation.py

@@ -324,7 +324,7 @@ def _validate_shape_compatibility(self):
             incoming = edge_map.get(node_id, [])
 
             # Check that nodes with required inputs have connections
-            if node_type in ('conv2d', 'linear', 'maxpool2d', 'maxpool', 'batchnorm', 'batchnorm2d', 'flatten'):
+            if node_type in ('conv2d', 'linear', 'maxpool2d', 'maxpool', 'batchnorm', 'flatten'):
                 if not incoming:
                     self.errors.append(ValidationError(
                         message=f'{node_type} layer requires an input connection',

project/frontend/src/components/GroupBlockNode.tsx

@@ -154,8 +154,10 @@ const GroupBlockNode = memo(({ data, selected, id }: GroupBlockNodeProps) => {
 
       {/* Render input handles */}
       {inputPorts.map((port, index) => {
-        const spacing = 100 / (inputPorts.length + 1)
-        const topPercent = spacing * (index + 1)
+        const rangeStart = 70
+        const rangeEnd = 90
+        const spacing = (rangeEnd - rangeStart) / (inputPorts.length + 1)
+        const topPercent = rangeStart + spacing * (index + 1)
         const color = getPortColor(port.semantic)
         const isConnected = isHandleConnected(port.externalPortId, true)
 
@@ -212,45 +214,46 @@ const GroupBlockNode = memo(({ data, selected, id }: GroupBlockNodeProps) => {
         )
       })}
 
-      <div className="p-3 space-y-2">
+      <div className="p-3">
         <div className="flex items-center gap-2">
           <div
-            className="p-1.5 rounded"
+            className="p-1 rounded shrink-0"
             style={{
               backgroundColor: groupDef.color,
               color: 'white'
             }}
           >
-            <Icons.SquaresFour size={16} weight="bold" />
+            <Icons.SquaresFour size={14} weight="bold" />
           </div>
           <div className="flex-1 min-w-0">
-            <div className="font-semibold text-sm truncate">
+            <div className="font-semibold text-sm truncate leading-tight">
               {groupDef.name}
             </div>
-            <div className="flex items-center gap-1">
-              <Badge
-                variant="secondary"
-                className="text-[9px] px-1 py-0 h-3.5"
-              >
-                {groupDef.category}
-              </Badge>
-              <Badge
-                variant="outline"
-                className="text-[9px] px-1 py-0 h-3.5"
-              >
-                {groupDef.internalNodes.length} nodes
-              </Badge>
-            </div>
           </div>
         </div>
 
+        <div className="flex items-center gap-1 mt-1">
+          <Badge
+            variant="secondary"
+            className="text-[9px] px-1 py-0 h-3.5"
+          >
+            {groupDef.category}
+          </Badge>
+          <Badge
+            variant="outline"
+            className="text-[9px] px-1 py-0 h-3.5"
+          >
+            {groupDef.internalNodes.length} nodes
+          </Badge>
+        </div>
+
         {groupDef.description && (
-          <div className="text-[10px] text-muted-foreground line-clamp-2">
+          <div className="text-[10px] text-muted-foreground line-clamp-2 mt-1">
             {groupDef.description}
           </div>
         )}
 
-        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+        <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-1">
           <Icons.ArrowsIn size={12} />
           <span>{inputPorts.length} in</span>
           <span className="mx-1">•</span>
@@ -261,8 +264,10 @@ const GroupBlockNode = memo(({ data, selected, id }: GroupBlockNodeProps) => {
 
       {/* Render output handles */}
       {outputPorts.map((port, index) => {
-        const spacing = 100 / (outputPorts.length + 1)
-        const topPercent = spacing * (index + 1)
+        const rangeStart = 70
+        const rangeEnd = 90
+        const spacing = (rangeEnd - rangeStart) / (outputPorts.length + 1)
+        const topPercent = rangeStart + spacing * (index + 1)
         const color = getPortColor(port.semantic)
         const isConnected = isHandleConnected(port.externalPortId, false)
 

project/frontend/src/index.css

@@ -120,6 +120,13 @@ body {
   font-family: var(--font-sans);
 }
 
+.react-flow__node-group {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+
 code, pre {
   font-family: var(--font-mono);
 }