handle incorrect yaml

front/src/components/PodcastGenerator.tsx

@@ -73,6 +73,17 @@ const getRandomSpeakerPair = (): { s1: string; s2: string } => {
   return { s1, s2 };
 };
 
+const parseYAML = (yaml: string): Podcast => {
+  try {
+    return parse(yaml);
+  } catch (e) {
+    console.error(e);
+    throw new Error(
+      'invalid YAML, please re-generate the script: ' + (e as any).message
+    );
+  }
+};
+
 export const PodcastGenerator = ({
   genratedScript,
   setBusy,
@@ -107,7 +118,7 @@ export const PodcastGenerator = ({
     setWav(null);
     setBusy(true);
     try {
-      const podcast: Podcast = parse(script);
+      const podcast = parseYAML(script);
       const { speakerNames, turns } = podcast;
       for (const turn of turns) {
         // normalize it

front/src/components/ScriptMaker.tsx

@@ -209,7 +209,7 @@ export const ScriptMaker = ({
           )}
         </button>
 
-        {/* <div role="alert" className="alert text-sm">
+        <div role="alert" className="alert text-sm">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -228,7 +228,7 @@ export const ScriptMaker = ({
             re-generate the script or adding a note to force it to follow YAML
             format.
           </span>
-        </div> */}
+        </div>
       </div>
     </div>
   );

index.html

@@ -20997,6 +20997,16 @@ const getRandomSpeakerPair = () => {
   ).value;
   return { s1, s2 };
 };
+const parseYAML = (yaml) => {
+  try {
+    return parse$3(yaml);
+  } catch (e) {
+    console.error(e);
+    throw new Error(
+      "invalid YAML, please re-generate the script: " + e.message
+    );
+  }
+};
 const PodcastGenerator = ({
   genratedScript,
   setBusy,
@@ -21023,7 +21033,7 @@ const PodcastGenerator = ({
     setWav(null);
     setBusy(true);
     try {
-      const podcast = parse$3(script);
+      const podcast = parseYAML(script);
       const { speakerNames, turns } = podcast;
       for (const turn of turns) {
         turn.nextGapMilisecs = Math.max(-600, Math.min(300, turn.nextGapMilisecs)) - 100;
@@ -22801,7 +22811,28 @@ const ScriptMaker = ({
           "Generating..."
         ] }) : "Generate script"
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "alert", className: "alert text-sm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          className: "stroke-info h-6 w-6 shrink-0",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "The LLM may generate an incorrect YAML. If it fails on Step 2, re-generate the script or adding a note to force it to follow YAML format." })
+    ] })
   ] }) });
 };
 var __defProp2 = Object.defineProperty;