working graph

src/App.svelte

@@ -45,14 +45,18 @@
       for (let vid of $inputs) {
         await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name));
       }
-      const clist = commandList();
-      console.log(clist);
+      let clist = $previewCommand.replaceAll('"', '').replace("ffmpeg", "").split(" ").filter(i => i.trim() != '');
+      console.log("command", clist);
+			// command.push("-pix_fmt");
+			// command.push("yuv420p");
+			// command.push("out.mp4");
       await ffmpeg.exec(clist, TIMEOUT);
       // await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"])
       const data = await ffmpeg.readFile("out.mp4");
       rendering = false;
       videoValue = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
     } catch (e) {
+			console.log(e);
       log += "Failed";
     }
     rendering = false;
@@ -60,7 +64,6 @@
 
   async function loadFFmpeg() {
     ffmpeg.on("log", ({ message: msg }) => {
-      console.log(msg);
       log += msg + "\n";
       logbox.scrollTop = logbox.scrollHeight;
     });
@@ -77,34 +80,13 @@
         workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
       });
     }
-    console.log(ffmpeg);
     ffmpegLoaded = true;
   }
 
 
 
-  function commandList() {
-    let command = [];
-    for (let vid of $inputs) {
-      command.push("-i");
-      command.push(vid.name);
-    }
-    // const audioFilters = $filters.filter(f => f.type[0] === "A").map(makeFilterArgs);
-    // const videoFilters = $filters.filter(f => f.type[0] === "V").map(makeFilterArgs);
 
-    const cFilters = $filters.map(makeFilterArgs).join(",");
 
-    if (cFilters.length > 0) {
-      command.push("-filter_complex");
-      command.push(cFilters);
-    }
-
-    command.push("-pix_fmt");
-    command.push("yuv420p");
-    command.push("out.mp4");
-
-    return command;
-  }
 
   function handleFilterSort(e) {
     filters.set(e.detail.items);

src/Graph.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { nodes, edges, command } from "./stores.js";
+  import { nodes, edges} from "./stores.js";
   import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from "@xyflow/svelte";
   import Node from "./nodes/Node.svelte";
 
@@ -88,7 +88,3 @@
     <Background variant={BackgroundVariant.Dots} />
   </SvelteFlow>
 </div>
-
-<div>
-	{JSON.stringify(command)}
-</div>

src/stores.js

@@ -25,12 +25,96 @@ function makeFilterArgs(f) {
   return fCommand;
 }
 
-export const command = derived(edges, ($edges) => {
-  console.log($edges);
-  return $edges;
+export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
+  // [0:v]f1=val,f2=val[out] -map out
+  // [0:v]f1=val,f2=val[1];[1][1:v]overlay[out] -map out`
+
+	let finalCommand = [];
+
+  let filtergraph = [];
+
+	const inputs = $nodes.filter(n => n.nodeType == "input");
+	const outputs = $nodes.filter(n => n.nodeType == "output");
+
+	const inputIds = {};
+	for (let i=0; i<inputs.length; i++) {
+		const inp = inputs[i];
+		inputIds[inp.id] = i;
+	}
+
+	const edgeIds = {};
+	for (let i = 0; i < $edges.length; i++) {
+		const e = $edges[i];
+		edgeIds[e.id] = i + 1;
+
+		const source = $nodes.find(n => n.id === e.source);
+		const target = $nodes.find(n => n.id === e.target);
+
+		if (source.nodeType === "input") {
+			if (e.sourceHandle.includes("v")) {
+				edgeIds[e.id] = inputIds[source.id] + ":v";
+			}
+			if (e.sourceHandle.includes("a")) {
+				edgeIds[e.id] = inputIds[source.id] + ":a";
+			}
+		}
+
+		if (target.nodeType === "output") {
+			edgeIds[e.id] = "out";
+		}
+	}
+
+
+  for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
+    let cmd = "";
+
+    const outs = $edges.filter((e) => e.source == n.id);
+    const ins = $edges.filter((e) => e.target == n.id);
+
+    if (outs.length == 0 && ins.length == 0) continue;
+
+    for (let i of ins) {
+			const eid = edgeIds[i.id];
+      cmd += `[${eid}]`
+    }
+    cmd += makeFilterArgs(n.data);
+    for (let o of outs) {
+			const eid = edgeIds[o.id];
+      cmd += `[${eid}]`
+    }
+		filtergraph.push(cmd);
+  }
+
+	finalCommand.push("ffmpeg");
+
+	for (let inp of inputs) {
+		finalCommand.push("-i");
+		finalCommand.push(inp.data.name);
+	}
+
+	finalCommand.push("-filter_complex")
+
+	finalCommand.push('"' + filtergraph.join(';') + '"');
+
+	for (let out of outputs) {
+		finalCommand.push("-map");
+		finalCommand.push('"[out]"');
+	}
+
+	for (let inp of inputs) {
+		finalCommand.push("-map");
+		finalCommand.push(inputIds[inp.id] + ":a");
+	}
+
+	for (let out of outputs) {
+		finalCommand.push(out.data.name);
+	}
+
+	const entireCommand = finalCommand.join(" ");
+	return entireCommand;
 });
 
-export const previewCommand = derived(nodes, ($nodes) => {
+export const previewCommandOld = derived(nodes, ($nodes) => {
   const cInputs = $nodes
     .filter((n) => n.nodeType === "input")
     .map((i) => `-i ${i.data.name}`)
@@ -123,20 +207,18 @@ export function addNode(data, type) {
     return n;
   });
 
-  edges.update((_edges) => {
-		console.log('EXISTING', existing);
-		const target = existing[existing.length -2];
-		if (!target) return _edges;
-    const newEdge = {
-      id: uuidv4(),
-      type: "default",
-      source: node.id,
-      target: target.id,
-    };
-		console.log("NEW EDGE", newEdge);
-    _edges.push(newEdge);
-    return _edges;
-  });
+  // edges.update((_edges) => {
+  // const target = existing[existing.length - 2];
+  // if (!target) return _edges;
+  //   const newEdge = {
+  //     id: uuidv4(),
+  //     type: "default",
+  //     source: target.id,
+  //     target: node.id,
+  //   };
+  //   _edges.push(newEdge);
+  //   return _edges;
+  // });
 }
 
 export function removeNode(id) {