fix filename, add convert to mp3

front/src/components/AudioPlayer.tsx

@@ -1,30 +1,59 @@
-import React, { useMemo, useEffect } from 'react';
-import { blobFromAudioBuffer } from '../utils/utils';
+import React, { useMemo, useEffect, useState } from 'react';
+import {
+  audioBufferToMp3,
+  blobFromAudioBuffer,
+  cleanupFilename,
+  delay,
+} from '../utils/utils';
 
 interface AudioPlayerProps {
   audioBuffer: AudioBuffer;
+  title: string;
 }
 
-export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer }) => {
-  // Create a Blob URL from the audioBuffer.
+export const AudioPlayer: React.FC<AudioPlayerProps> = ({
+  audioBuffer,
+  title,
+}) => {
+  const [isConverting, setIsConverting] = useState(false);
+  const [mp3Buffer, setMp3Buffer] = useState<ArrayBuffer | null>(null);
+
   const blobUrl = useMemo(() => {
     const wavBlob = blobFromAudioBuffer(audioBuffer);
     return URL.createObjectURL(wavBlob);
   }, [audioBuffer]);
 
-  const downloadUrl = useMemo(() => {
+  const downloadWavUrl = useMemo(() => {
     const wavBlob = blobFromAudioBuffer(audioBuffer);
     return URL.createObjectURL(wavBlob);
   }, [audioBuffer]);
 
+  const downloadMp3Url = useMemo(() => {
+    if (!mp3Buffer) return '';
+    const mp3Blob = new Blob([mp3Buffer], { type: 'audio/mp3' });
+    return URL.createObjectURL(mp3Blob);
+  }, [audioBuffer]);
+
   // Clean up the object URL when the component unmounts or audioBuffer changes.
   useEffect(() => {
-    return () => {
-      URL.revokeObjectURL(blobUrl);
-      URL.revokeObjectURL(downloadUrl);
-    };
+    return () => URL.revokeObjectURL(blobUrl);
   }, [blobUrl]);
 
+  useEffect(() => {
+    return () => URL.revokeObjectURL(downloadWavUrl);
+  }, [downloadWavUrl]);
+
+  useEffect(() => {
+    return () => URL.revokeObjectURL(downloadMp3Url);
+  }, [downloadMp3Url]);
+
+  const convertToMp3 = async () => {
+    setIsConverting(true);
+    await delay(10); // wait a bit for the button to be rendered
+    setMp3Buffer(audioBufferToMp3(audioBuffer));
+    setIsConverting(false);
+  };
+
   return (
     <div className="mt-4 flex items-center">
       <audio controls src={blobUrl}>
@@ -33,11 +62,30 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer }) => {
 
       <a
         className="btn btn-sm btn-primary ml-2"
-        href={downloadUrl}
-        download={'podcast.wav'}
+        href={downloadWavUrl}
+        download={`Podcast_${cleanupFilename(title)}.wav`}
       >
         Download WAV
       </a>
+      {mp3Buffer ? (
+        <a
+          className="btn btn-sm btn-primary ml-2"
+          href={downloadMp3Url}
+          download={`Podcast_${cleanupFilename(title)}.mp3`}
+        >
+          Download MP3
+        </a>
+      ) : (
+        <button
+          className="btn btn-sm ml-2"
+          disabled={isConverting}
+          onClick={convertToMp3}
+        >
+          {isConverting
+            ? 'Converting...'
+            : 'Convert to MP3 (may take ~10 seconds)'}
+        </button>
+      )}
     </div>
   );
 };

front/src/components/PodcastGenerator.tsx

@@ -89,6 +89,7 @@ export const PodcastGenerator = ({
   busy: boolean;
 }) => {
   const [wav, setWav] = useState<AudioBuffer | null>(null);
+  const [outTitle, setOutTitle] = useState<string>('');
   const [numSteps, setNumSteps] = useState<number>(0);
   const [numStepsDone, setNumStepsDone] = useState<number>(0);
 
@@ -138,6 +139,7 @@ export const PodcastGenerator = ({
     let outputWav: AudioBuffer;
     try {
       const podcast = parseYAML(script);
+      setOutTitle(podcast.title ?? 'Untitled podcast');
       outputWav = await pipelineGeneratePodcast(
         {
           podcast,
@@ -312,7 +314,7 @@ export const PodcastGenerator = ({
         <div className="card bg-base-100 w-full shadow-xl">
           <div className="card-body">
             <h2 className="card-title">Step 3: Listen to your podcast</h2>
-            <AudioPlayer audioBuffer={wav} />
+            <AudioPlayer audioBuffer={wav} title={outTitle} />
 
             {isBlogMode && (
               <div>

front/src/utils/utils.ts

@@ -12,6 +12,8 @@ export const isDev: boolean = import.meta.env.MODE === 'development';
 export const testToken: string = import.meta.env.VITE_TEST_TOKEN;
 export const isBlogMode: boolean = !!window.location.href.match(/blogmode/);
 
+export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
 // return URL to the WAV file
 export const generateAudio = async (
   content: string,
@@ -507,3 +509,8 @@ function floatTo16BitPCM(input: Float32Array): Int16Array {
   }
   return output;
 }
+
+// clean up filename for saving
+export const cleanupFilename = (name: string): string => {
+  return name.replace(/[^a-zA-Z0-9-_]/g, '_');
+};

index.html

@@ -25406,6 +25406,7 @@ async function whoAmI(params) {
   return response;
 }
 const isBlogMode = !!window.location.href.match(/blogmode/);
+const delay$1 = (ms) => new Promise((res) => setTimeout(res, ms));
 const generateAudio = async (content, voice, speed = 1.1) => {
   const maxRetries = 3;
   for (let i = 0; i < maxRetries; i++) {
@@ -25704,31 +25705,70 @@ function floatTo16BitPCM(input) {
   }
   return output;
 }
-const AudioPlayer = ({ audioBuffer }) => {
+const cleanupFilename = (name2) => {
+  return name2.replace(/[^a-zA-Z0-9-_]/g, "_");
+};
+const AudioPlayer = ({
+  audioBuffer,
+  title
+}) => {
+  const [isConverting, setIsConverting] = reactExports.useState(false);
+  const [mp3Buffer, setMp3Buffer] = reactExports.useState(null);
   const blobUrl = reactExports.useMemo(() => {
     const wavBlob = blobFromAudioBuffer(audioBuffer);
     return URL.createObjectURL(wavBlob);
   }, [audioBuffer]);
-  const downloadUrl = reactExports.useMemo(() => {
+  const downloadWavUrl = reactExports.useMemo(() => {
     const wavBlob = blobFromAudioBuffer(audioBuffer);
     return URL.createObjectURL(wavBlob);
   }, [audioBuffer]);
+  const downloadMp3Url = reactExports.useMemo(() => {
+    if (!mp3Buffer) return "";
+    const mp3Blob = new Blob([mp3Buffer], { type: "audio/mp3" });
+    return URL.createObjectURL(mp3Blob);
+  }, [audioBuffer]);
   reactExports.useEffect(() => {
-    return () => {
-      URL.revokeObjectURL(blobUrl);
-      URL.revokeObjectURL(downloadUrl);
-    };
+    return () => URL.revokeObjectURL(blobUrl);
   }, [blobUrl]);
+  reactExports.useEffect(() => {
+    return () => URL.revokeObjectURL(downloadWavUrl);
+  }, [downloadWavUrl]);
+  reactExports.useEffect(() => {
+    return () => URL.revokeObjectURL(downloadMp3Url);
+  }, [downloadMp3Url]);
+  const convertToMp3 = async () => {
+    setIsConverting(true);
+    await delay$1(10);
+    setMp3Buffer(audioBufferToMp3(audioBuffer));
+    setIsConverting(false);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex items-center", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("audio", { controls: true, src: blobUrl, children: "Your browser does not support the audio element." }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
       {
         className: "btn btn-sm btn-primary ml-2",
-        href: downloadUrl,
-        download: "podcast.wav",
+        href: downloadWavUrl,
+        download: `Podcast_${cleanupFilename(title)}.wav`,
         children: "Download WAV"
       }
+    ),
+    mp3Buffer ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        className: "btn btn-sm btn-primary ml-2",
+        href: downloadMp3Url,
+        download: `Podcast_${cleanupFilename(title)}.mp3`,
+        children: "Download MP3"
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        className: "btn btn-sm ml-2",
+        disabled: isConverting,
+        onClick: convertToMp3,
+        children: isConverting ? "Converting..." : "Convert to MP3 (may take ~10 seconds)"
+      }
     )
   ] });
 };
@@ -31966,6 +32006,7 @@ const PodcastGenerator = ({
   busy
 }) => {
   const [wav, setWav] = reactExports.useState(null);
+  const [outTitle, setOutTitle] = reactExports.useState("");
   const [numSteps, setNumSteps] = reactExports.useState(0);
   const [numStepsDone, setNumStepsDone] = reactExports.useState(0);
   const [script, setScript] = reactExports.useState("");
@@ -32008,6 +32049,7 @@ const PodcastGenerator = ({
     let outputWav;
     try {
       const podcast = parseYAML(script);
+      setOutTitle(podcast.title ?? "Untitled podcast");
       outputWav = await pipelineGeneratePodcast(
         {
           podcast,
@@ -32165,7 +32207,7 @@ const PodcastGenerator = ({
     ] }) }),
     wav && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card bg-base-100 w-full shadow-xl", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card-body", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "card-title", children: "Step 3: Listen to your podcast" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AudioPlayer, { audioBuffer: wav }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AudioPlayer, { audioBuffer: wav, title: outTitle }),
       isBlogMode && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         "-------------------",
         /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),