frontend almost work

src/graphBuilder.ts

@@ -23,11 +23,26 @@ function parseRes(res: string): { width: number; height: number } {
   return { width: w || 1920, height: h || 1080 }
 }
 
+// Looks up the port kind from the node type definition
+function portKindFor(node: Node | undefined, handleId: string): string | undefined {
+  if (!node) return undefined
+  const def = NODE_TYPES[(node.data as StudioNodeData).nodeType]
+  return def?.ports.find(p => p.id === handleId)?.kind
+}
+
+// Looks up the backend port key from the node type definition, falls back to handleToPort
+function portKeyFor(node: Node | undefined, handleId: string): string {
+  if (node) {
+    const def = NODE_TYPES[(node.data as StudioNodeData).nodeType]
+    const portKey = def?.ports.find(p => p.id === handleId)?.portKey
+    if (portKey) return portKey
+  }
+  return handleToPort(handleId)
+}
+
 // Converts a Vue Flow handle id to the NODE_CONFIG port key used in graph JSON
 function handleToPort(handle: string): string {
   return handle.replace(/-(?:in|out)(?:-\d+)?$/, '_flow_id')
-  // 'video-out' → 'video_flow_id', 'audio-in' → 'audio_flow_id'
-  // 'video-in-1' → 'video_flow_id', 'audio-in-2' → 'audio_flow_id'
 }
 
 export function buildGraph(vfNodes: Node[], vfEdges: Edge[]): GraphJson {
@@ -49,10 +64,12 @@ export function buildGraph(vfNodes: Node[], vfEdges: Edge[]): GraphJson {
   })
 
   const edges = vfEdges.map((e) => {
+    const srcNode = vfNodes.find(n => n.id === e.source)
+    const tgtNode = vfNodes.find(n => n.id === e.target)
     const srcData = nodeMap.get(e.source)
     const srcHandle = e.sourceHandle ?? 'video-out'
     const tgtHandle = e.targetHandle ?? 'video-in'
-    const kind = srcHandle.startsWith('video') ? 'video' : 'audio'
+    const kind = portKindFor(srcNode, srcHandle) ?? 'video'
 
     let format: Record<string, unknown> = { kind }
     if (kind === 'video') {
@@ -60,12 +77,17 @@ export function buildGraph(vfNodes: Node[], vfEdges: Edge[]): GraphJson {
       const { fps_num, fps_den } = parseFps(String(srcData?.params.fps ?? '25'))
       format = { kind, width, height, fps_num, fps_den }
     } else {
-      format = { kind, sample_rate: 48000, channels: 2, bit_depth: 32 }
+      format = {
+        kind,
+        sample_rate:   Number(srcData?.params.sample_rate   ?? 48000),
+        channels:       Number(srcData?.params.channels       ?? 2),
+        bit_depth:      32,
+      }
     }
 
     return {
-      from: e.source,  from_port: handleToPort(srcHandle),
-      to:   e.target,  to_port:   handleToPort(tgtHandle),
+      from: e.source,  from_port: portKeyFor(srcNode, srcHandle),
+      to:   e.target,  to_port:   portKeyFor(tgtNode, tgtHandle),
       format,
     }
   })