From d20d363e26b6040ea6de0ceb7d432e2c0a01a7d4 Mon Sep 17 00:00:00 2001
From: SamA1430 <samuel.arg14@gmail.com>
Date: Fri, 1 Aug 2025 15:51:38 -0400
Subject: [PATCH 1/4] Add yaml export button and functionality

---
 chainforge/react-server/src/App.tsx           |  23 ++
 .../react-server/src/backend/jsonToYml.ts     | 197 ++++++++++++++++++
 2 files changed, 220 insertions(+)
 create mode 100644 chainforge/react-server/src/backend/jsonToYml.ts

diff --git a/chainforge/react-server/src/App.tsx b/chainforge/react-server/src/App.tsx
index ffb2dbde0..96d2fd7cb 100644
--- a/chainforge/react-server/src/App.tsx
+++ b/chainforge/react-server/src/App.tsx
@@ -117,6 +117,7 @@ import NestedMenu, { NestedMenuItemProps } from "./NestedMenu";
 import RequestClarificationModal, {
   RequestClarificationModalProps,
 } from "./RequestClarificationModal";
+import { jsontoYml } from "./backend/jsonToYml";
 
 const IS_ACCEPTED_BROWSER =
   (isChrome ||
@@ -667,6 +668,17 @@ const App = () => {
     URL.revokeObjectURL(downloadLink.href);
   };
 
+  const exportYml = useCallback(
+    async (flowData?: unknown) => {
+      if (!rfInstance && !flowData) return;
+      // We first get the data of the flow, if we haven't already
+      const flow = flowData ?? rfInstance?.toObject();
+      if (!flow) return;
+      await jsontoYml(JSON.stringify(flow), flowFileName);
+    },
+    [rfInstance, flowFileName],
+  );
+
   // Export flow to JSON
   const exportFlow = useCallback(
     (
@@ -1573,6 +1585,17 @@ const App = () => {
             >
               Export
             </Button>
+            <Button
+              onClick={() => exportYml()}
+              size="sm"
+              variant="outline"
+              color={colorScheme === "light" ? "blue" : "gray"}
+              bg={colorScheme === "light" ? "#eee" : "#222"}
+              compact
+              mr="xs"
+            >
+              Export YML
+            </Button>
             <Button
               onClick={importFlowFromFile}
               size="sm"
diff --git a/chainforge/react-server/src/backend/jsonToYml.ts b/chainforge/react-server/src/backend/jsonToYml.ts
new file mode 100644
index 000000000..8ce4cfa54
--- /dev/null
+++ b/chainforge/react-server/src/backend/jsonToYml.ts
@@ -0,0 +1,197 @@
+import * as yaml from "js-yaml";
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
+function cleanText(text: string): string {
+  return text.replace(/\s*\n\s*/g, " ").trim();
+}
+
+export async function jsontoYml(
+  json_data: string,
+  title: string,
+  max_retry = 0,
+  threads = 1,
+) {
+  try {
+    const non_used_nodes = new Set<string>();
+    const json = JSON.parse(json_data);
+    const nodes = json.nodes;
+    const links = json.edges;
+    const yml_nodes: any[] = [];
+    const zip = new JSZip();
+    for (const node of nodes) {
+      if (node.type === "prompt") {
+        const llms = [];
+        for (const llm of node.data.llms) {
+          const yml_llm: { [key: string]: any } = {
+            key: llm.key,
+            name: llm.name,
+            model: llm.model,
+            emoji: llm.emoji,
+            base_model: llm.base_model,
+            temp: llm.temp,
+          };
+          for (const key of Object.keys(llm.settings)) {
+            if (key !== "response_format") {
+              yml_llm[key] = llm.settings[key];
+            }
+          }
+          llms.push(yml_llm);
+        }
+        const yml_node = {
+          template: {
+            name: node.id,
+            value: node.data.prompt,
+            iterations: node.data.n,
+            llms,
+          },
+        };
+        yml_nodes.push(yml_node);
+      }
+      // We need to create a csv file for each dataset node
+      else if (node.type === "textfields") {
+        const yml_node = {
+          dataset: {
+            name: node.id,
+            path: `../files/${node.id}.csv`,
+          },
+        };
+        // Create the csv file with the text fields
+        let csv = "output\n";
+        for (const key of Object.keys(node.data.fields)) {
+          const value = cleanText(node.data.fields[key]);
+          csv += `${value}\n`;
+        }
+        // Save the csv file
+        zip.file(`${node.id}.csv`, csv);
+        yml_nodes.push(yml_node);
+      } else if (node.type === "evaluator") {
+        if (node.data.language === "javascript") {
+          const yml_node = {
+            evaluator: {
+              type: "javascript",
+              name: node.id,
+              return_type: "string",
+              file: `../files/${node.id}.js`,
+            },
+          };
+          // Create the javascript file
+          const js_code = node.data.code;
+          zip.file(`${node.id}.js`, js_code);
+          yml_nodes.push(yml_node);
+        } else if (node.type === "python") {
+          const yml_node = {
+            evaluator: {
+              type: "python",
+              name: node.id,
+              return_type: "string",
+              file: `../files/${node.id}.py`,
+            },
+          };
+          // Create the python file
+          const py_code = node.data.code;
+          zip.file(`${node.id}.py`, py_code);
+          yml_nodes.push(yml_node);
+        }
+      } else if (node.type === "processor") {
+        if (node.data.language === "javascript") {
+          const yml_node = {
+            processor: {
+              type: "javascript",
+              name: node.id,
+              file: `${node.id}.js`,
+            },
+          };
+          // Create the javascript file
+          const js_code = node.data.code;
+          zip.file(`${node.id}.js`, js_code);
+          yml_nodes.push(yml_node);
+        } else if (node.type === "python") {
+          const yml_node = {
+            processor: {
+              type: "python",
+              name: node.id,
+              file: `${node.id}.py`,
+            },
+          };
+          // Create the python file
+          const py_code = node.data.code;
+          zip.file(`${node.id}.py`, py_code);
+          yml_nodes.push(yml_node);
+        }
+      } else if (node.type === "table") {
+        const yml_node = {
+          dataset: {
+            name: node.id,
+            path: `../files/${node.id}.csv`,
+          },
+        };
+        // Create the csv file with the table data
+        const row = node.data.rows[0];
+        let headers = Object.keys(row);
+        // remove the key '__uid' from headers
+        headers = headers.filter((header) => header !== "__uid");
+        let csv = headers.join(",") + "\n";
+        for (const row of node.data.rows) {
+          const values = headers.map((header) => cleanText(row[header]));
+          csv += values.join(",") + "\n";
+        }
+        // Save the csv file
+        zip.file(`${node.id}.csv`, csv);
+        yml_nodes.push(yml_node);
+      } else if (node.type === "csv") {
+        const yml_node = {
+          dataset: {
+            name: node.id,
+            path: `../files/${node.id}.csv`,
+          },
+        };
+        // Create the csv file with the csv data
+        const csv_data: string[] = node.data.fields;
+        let csv = "output\n";
+        for (const value of csv_data) {
+          csv += `${cleanText(value)}\n`;
+        }
+        // Save the csv file
+        zip.file(`${node.id}.csv`, csv);
+        yml_nodes.push(yml_node);
+      }
+      // else if(node.type === 'simpleval'){}
+      // else if(node.type === 'join'){}
+      // else if(node.type === 'split'){}
+      else {
+        non_used_nodes.add(node.id);
+      }
+    }
+    const yml_links: any[] = [];
+    for (const link of links) {
+      // If the source or target node is not used, skip the link
+      if (non_used_nodes.has(link.source) || non_used_nodes.has(link.target)) {
+        continue;
+      }
+      const yml_link = {
+        source: link.source,
+        target: link.target,
+        source_var: link.sourceHandle,
+        target_var: link.targetHandle,
+      };
+      yml_links.push(yml_link);
+    }
+    // Create the YAML file
+    const yml_data = {
+      experiment: {
+        title,
+        max_retry,
+        threads,
+      },
+      nodes: yml_nodes,
+      links: yml_links,
+    };
+    const yml_string = yaml.dump(yml_data);
+    zip.file(`${title}.yml`, yml_string);
+    const blob = await zip.generateAsync({ type: "blob" });
+    saveAs(blob, `${title}.zip`);
+  } catch (error) {
+    console.error("Error parsing JSON data:", error);
+  }
+}

From 0f783035e1028cce7710f0e2f7b6b8e0a5ca7d24 Mon Sep 17 00:00:00 2001
From: SamA1430 <samuel.arg14@gmail.com>
Date: Thu, 7 Aug 2025 16:00:14 -0400
Subject: [PATCH 2/4] Fix file path references in jsontoYml and update text
 formatting in cleanText function

---
 chainforge/react-server/src/backend/jsonToYml.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/chainforge/react-server/src/backend/jsonToYml.ts b/chainforge/react-server/src/backend/jsonToYml.ts
index 8ce4cfa54..98fff9e90 100644
--- a/chainforge/react-server/src/backend/jsonToYml.ts
+++ b/chainforge/react-server/src/backend/jsonToYml.ts
@@ -3,7 +3,7 @@ import JSZip from "jszip";
 import { saveAs } from "file-saver";
 
 function cleanText(text: string): string {
-  return text.replace(/\s*\n\s*/g, " ").trim();
+  return '"' + text.replace(/\s*\n\s*/g, " ").trim() + '"';
 }
 
 export async function jsontoYml(
@@ -99,7 +99,7 @@ export async function jsontoYml(
             processor: {
               type: "javascript",
               name: node.id,
-              file: `${node.id}.js`,
+              file: `../files/${node.id}.js`,
             },
           };
           // Create the javascript file
@@ -111,7 +111,7 @@ export async function jsontoYml(
             processor: {
               type: "python",
               name: node.id,
-              file: `${node.id}.py`,
+              file: `../files/${node.id}.py`,
             },
           };
           // Create the python file

From 13900bf72d7d155fae7317e42ce37c87122ec02f Mon Sep 17 00:00:00 2001
From: SamA1430 <samuel.arg14@gmail.com>
Date: Fri, 8 Aug 2025 09:51:04 -0400
Subject: [PATCH 3/4] improve jsonToYml to fix iterations errors and improve
 llm settings validation

---
 chainforge/react-server/src/backend/jsonToYml.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/chainforge/react-server/src/backend/jsonToYml.ts b/chainforge/react-server/src/backend/jsonToYml.ts
index 98fff9e90..717b2c580 100644
--- a/chainforge/react-server/src/backend/jsonToYml.ts
+++ b/chainforge/react-server/src/backend/jsonToYml.ts
@@ -32,17 +32,29 @@ export async function jsontoYml(
             temp: llm.temp,
           };
           for (const key of Object.keys(llm.settings)) {
-            if (key !== "response_format") {
+            if (key !== "response_format" && llm.settings[key]) {
+              if (
+                (key === "tools" || key === "stop") &&
+                llm.settings[key].length === 0
+              ) {
+                continue;
+              }
               yml_llm[key] = llm.settings[key];
             }
           }
           llms.push(yml_llm);
         }
+        let iterations: number;
+        if (isNaN(Number(node.data.n))) {
+          iterations = 1;
+        } else {
+          iterations = Number(node.data.n);
+        }
         const yml_node = {
           template: {
             name: node.id,
             value: node.data.prompt,
-            iterations: node.data.n,
+            iterations,
             llms,
           },
         };

From 6e13d4e414deaca962418aa29762b210dbc46585 Mon Sep 17 00:00:00 2001
From: SamA1430 <samuel.arg14@gmail.com>
Date: Wed, 13 Aug 2025 09:54:49 -0400
Subject: [PATCH 4/4] Add file-saver and js-yaml libraries to package.json

---
 chainforge/react-server/package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/chainforge/react-server/package.json b/chainforge/react-server/package.json
index 229a67686..884023508 100644
--- a/chainforge/react-server/package.json
+++ b/chainforge/react-server/package.json
@@ -57,6 +57,7 @@
     "dayjs": "^1.11.8",
     "emoji-mart": "^5.5.2",
     "emoji-picker-react": "^4.4.9",
+    "file-saver": "^2.0.5",
     "google-auth-library": "^8.8.0",
     "https-browserify": "^1.0.0",
     "jstat": "^1.9.6",
@@ -135,6 +136,8 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.0",
     "@types/papaparse": "^5.3.14",
     "@types/react-beautiful-dnd": "^13.1.8",