Upload 2 files

For AudioPlayer.tsx:
Refactor: Improved AudioPlayer with dynamic filename and simplified download.
Added an optional filename prop to allow custom download filenames (used for timestamped names).
Reused the blobUrl for both audio playback and download, eliminating redundant code.
Corrected the useEffect cleanup to only revoke the necessary URL.

For PodcastGenerator.tsx:
Feat: Integrated denoising, MP3/WAV downloads, and controlled blog upload.
Combined original and suggested edits for a complete podcast generation component.
Added wavBlob and mp3Blob states for WAV and MP3 download functionality.
Implemented download links for both WAV and MP3 formats, using timestamped filenames.
Integrated optional denoising using the audio-denoiser library (requires denoiseAudioBuffer implementation in utils.ts).
Added an uploadToBlog checkbox to explicitly control blog uploads, enhancing user privacy and control. Upload only happens if isBlogMode, the checkbox is checked, a token is provided, and a blog URL is entered.
Improved error handling during the upload process.
Cleaned up state management for a more consistent UI.

Untested by me - as I don't have local react server.

front/src/components/AudioPlayer.tsx

@@ -1,43 +1,39 @@
-import React, { useMemo, useEffect } from 'react';
-import { blobFromAudioBuffer } from '../utils/utils';
-
-interface AudioPlayerProps {
-  audioBuffer: AudioBuffer;
-}
-
-export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer }) => {
-  // Create a Blob URL from the audioBuffer.
-  const blobUrl = useMemo(() => {
-    const wavBlob = blobFromAudioBuffer(audioBuffer);
-    return URL.createObjectURL(wavBlob);
-  }, [audioBuffer]);
-
-  const downloadUrl = useMemo(() => {
-    const wavBlob = blobFromAudioBuffer(audioBuffer);
-    return URL.createObjectURL(wavBlob);
-  }, [audioBuffer]);
-
-  // Clean up the object URL when the component unmounts or audioBuffer changes.
-  useEffect(() => {
-    return () => {
-      URL.revokeObjectURL(blobUrl);
-      URL.revokeObjectURL(downloadUrl);
-    };
-  }, [blobUrl]);
-
-  return (
-    <div className="mt-4 flex items-center">
-      <audio controls src={blobUrl}>
-        Your browser does not support the audio element.
-      </audio>
-
-      <a
-        className="btn btn-sm btn-primary ml-2"
-        href={downloadUrl}
-        download={'podcast.wav'}
-      >
-        Download
-      </a>
-    </div>
-  );
-};
+import React, { useMemo, useEffect } from 'react';
+import { blobFromAudioBuffer } from '../utils/utils';
+
+interface AudioPlayerProps {
+  audioBuffer: AudioBuffer;
+  filename?: string; // Optional filename prop
+}
+
+export const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioBuffer, filename = 'podcast.wav' }) => {
+  // Create a Blob URL from the audioBuffer.
+  const blobUrl = useMemo(() => {
+    const wavBlob = blobFromAudioBuffer(audioBuffer);
+    return URL.createObjectURL(wavBlob);
+  }, [audioBuffer]);
+
+
+  // Clean up the object URL when the component unmounts or audioBuffer changes.
+  useEffect(() => {
+    return () => {
+      URL.revokeObjectURL(blobUrl);
+    };
+  }, [blobUrl]);
+
+  return (
+    <div className="mt-4 flex items-center">
+      <audio controls src={blobUrl}>
+        Your browser does not support the audio element.
+      </audio>
+
+      <a
+        className="btn btn-sm btn-primary ml-2"
+        href={blobUrl} // Use the same blobUrl for download
+        download={filename}
+      >
+        Download
+      </a>
+    </div>
+  );
+};

front/src/components/PodcastGenerator.tsx

@@ -1,377 +1,454 @@
-import { useEffect, useState } from 'react';
-import { AudioPlayer } from './AudioPlayer';
-import { Podcast, PodcastTurn } from '../utils/types';
-import { parse } from 'yaml';
-import {
-  addNoise,
-  addSilence,
-  audioBufferToMp3,
-  generateAudio,
-  isBlogMode,
-  joinAudio,
-  loadWavAndDecode,
-  pickRand,
-  uploadFileToHub,
-} from '../utils/utils';
-
-// taken from https://freesound.org/people/artxmp1/sounds/660540
-import openingSoundSrc from '../opening-sound.wav';
-import { getBlogComment } from '../utils/prompts';
-
-interface GenerationStep {
-  turn: PodcastTurn;
-  audioBuffer?: AudioBuffer;
-}
-
-const SPEEDS = [
-  { name: 'slow AF', value: 0.8 },
-  { name: 'slow', value: 0.9 },
-  { name: 'a bit slow', value: 1.0 },
-  { name: 'natural', value: 1.1 },
-  { name: 'most natural', value: 1.2 },
-  { name: 'a bit fast', value: 1.3 },
-  { name: 'fast!', value: 1.4 },
-  { name: 'fast AF', value: 1.5 },
-];
-
-const SPEAKERS = [
-  { name: '🇺🇸 🚺 Heart ❤️', value: 'af_heart' },
-  { name: '🇺🇸 🚺 Bella 🔥', value: 'af_bella' },
-  // { name: '🇺🇸 🚺 Nicole 🎧', value: 'af_nicole' },
-  { name: '🇺🇸 🚺 Aoede', value: 'af_aoede' },
-  { name: '🇺🇸 🚺 Kore', value: 'af_kore' },
-  { name: '🇺🇸 🚺 Sarah', value: 'af_sarah' },
-  { name: '🇺🇸 🚺 Nova', value: 'af_nova' },
-  { name: '🇺🇸 🚺 Sky', value: 'af_sky' },
-  { name: '🇺🇸 🚺 Alloy', value: 'af_alloy' },
-  { name: '🇺🇸 🚺 Jessica', value: 'af_jessica' },
-  { name: '🇺🇸 🚺 River', value: 'af_river' },
-  { name: '🇺🇸 🚹 Michael', value: 'am_michael' },
-  { name: '🇺🇸 🚹 Fenrir', value: 'am_fenrir' },
-  { name: '🇺🇸 🚹 Puck', value: 'am_puck' },
-  { name: '🇺🇸 🚹 Echo', value: 'am_echo' },
-  { name: '🇺🇸 🚹 Eric', value: 'am_eric' },
-  { name: '🇺🇸 🚹 Liam', value: 'am_liam' },
-  { name: '🇺🇸 🚹 Onyx', value: 'am_onyx' },
-  { name: '🇺🇸 🚹 Santa', value: 'am_santa' },
-  { name: '🇺🇸 🚹 Adam', value: 'am_adam' },
-  { name: '🇬🇧 🚺 Emma', value: 'bf_emma' },
-  { name: '🇬🇧 🚺 Isabella', value: 'bf_isabella' },
-  { name: '🇬🇧 🚺 Alice', value: 'bf_alice' },
-  { name: '🇬🇧 🚺 Lily', value: 'bf_lily' },
-  { name: '🇬🇧 🚹 George', value: 'bm_george' },
-  { name: '🇬🇧 🚹 Fable', value: 'bm_fable' },
-  { name: '🇬🇧 🚹 Lewis', value: 'bm_lewis' },
-  { name: '🇬🇧 🚹 Daniel', value: 'bm_daniel' },
-];
-
-const getRandomSpeakerPair = (): { s1: string; s2: string } => {
-  const s1Gender = Math.random() > 0.5 ? '🚺' : '🚹';
-  const s2Gender = s1Gender === '🚺' ? '🚹' : '🚺';
-  const s1 = pickRand(
-    SPEAKERS.filter((s) => s.name.includes(s1Gender) && s.name.includes('🇺🇸'))
-  ).value;
-  const s2 = pickRand(
-    SPEAKERS.filter((s) => s.name.includes(s2Gender) && s.name.includes('🇺🇸'))
-  ).value;
-  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,
-  blogURL,
-  busy,
-}: {
-  genratedScript: string;
-  blogURL: string;
-  setBusy: (busy: boolean) => void;
-  busy: boolean;
-}) => {
-  const [wav, setWav] = useState<AudioBuffer | null>(null);
-  const [numSteps, setNumSteps] = useState<number>(0);
-  const [numStepsDone, setNumStepsDone] = useState<number>(0);
-
-  const [script, setScript] = useState<string>('');
-  const [speaker1, setSpeaker1] = useState<string>('');
-  const [speaker2, setSpeaker2] = useState<string>('');
-  const [speed, setSpeed] = useState<string>('1.2');
-  const [addIntroMusic, setAddIntroMusic] = useState<boolean>(false);
-
-  const [blogFilePushToken, setBlogFilePushToken] = useState<string>(
-    localStorage.getItem('blogFilePushToken') || ''
-  );
-  const [blogCmtOutput, setBlogCmtOutput] = useState<string>('');
-  useEffect(() => {
-    localStorage.setItem('blogFilePushToken', blogFilePushToken);
-  }, [blogFilePushToken]);
-
-  const setRandSpeaker = () => {
-    const { s1, s2 } = getRandomSpeakerPair();
-    setSpeaker1(s1);
-    setSpeaker2(s2);
-  };
-  useEffect(setRandSpeaker, []);
-
-  useEffect(() => {
-    setScript(genratedScript);
-  }, [genratedScript]);
-
-  const generatePodcast = async () => {
-    setWav(null);
-    setBusy(true);
-    setBlogCmtOutput('');
-    if (isBlogMode && !blogURL) {
-      alert('Please enter a blog slug');
-      setBusy(false);
-      return;
-    }
-    let outputWav: AudioBuffer;
-    try {
-      const podcast = parseYAML(script);
-      const { speakerNames, turns } = podcast;
-      for (const turn of turns) {
-        // normalize it
-        turn.nextGapMilisecs =
-          Math.max(-600, Math.min(300, turn.nextGapMilisecs)) - 100;
-        turn.text = turn.text
-          .trim()
-          .replace(/’/g, "'")
-          .replace(/“/g, '"')
-          .replace(/”/g, '"');
-      }
-      const steps: GenerationStep[] = turns.map((turn) => ({ turn }));
-      setNumSteps(steps.length);
-      setNumStepsDone(0);
-      for (let i = 0; i < steps.length; i++) {
-        const step = steps[i];
-        const speakerIdx = speakerNames.indexOf(
-          step.turn.speakerName as string
-        ) as 1 | 0;
-        const speakerVoice = speakerIdx === 0 ? speaker1 : speaker2;
-        const url = await generateAudio(
-          step.turn.text,
-          speakerVoice,
-          parseFloat(speed)
-        );
-        step.audioBuffer = await loadWavAndDecode(url);
-        if (i === 0) {
-          outputWav = step.audioBuffer;
-          if (addIntroMusic) {
-            const openingSound = await loadWavAndDecode(openingSoundSrc);
-            outputWav = joinAudio(openingSound, outputWav!, -2000);
-          } else {
-            outputWav = addSilence(outputWav!, true, 200);
-          }
-        } else {
-          const lastStep = steps[i - 1];
-          outputWav = joinAudio(
-            outputWav!,
-            step.audioBuffer,
-            lastStep.turn.nextGapMilisecs
-          );
-        }
-        setNumStepsDone(i + 1);
-      }
-      outputWav = addNoise(outputWav!, 0.002);
-      setWav(outputWav! ?? null);
-    } catch (e) {
-      console.error(e);
-      alert(`Error: ${(e as any).message}`);
-      setWav(null);
-    }
-    setBusy(false);
-    setNumStepsDone(0);
-    setNumSteps(0);
-
-    // maybe upload
-    if (isBlogMode && outputWav!) {
-      const repoId = 'ngxson/hf-blog-podcast';
-      const blogSlug = blogURL.split('/blog/').pop() ?? '_noname';
-      const filename = `${blogSlug}.mp3`;
-      setBlogCmtOutput(`Uploading '${filename}' ...`);
-      await uploadFileToHub(
-        audioBufferToMp3(outputWav),
-        filename,
-        repoId,
-        blogFilePushToken
-      );
-      setBlogCmtOutput(getBlogComment(filename));
-    }
-  };
-
-  const isGenerating = numSteps > 0;
-
-  return (
-    <>
-      <div className="card bg-base-100 w-full shadow-xl">
-        <div className="card-body">
-          <h2 className="card-title">Step 2: Script (YAML format)</h2>
-
-          {isBlogMode && (
-            <>
-              <input
-                type="password"
-                placeholder="Repo push HF_TOKEN"
-                className="input input-bordered w-full"
-                value={blogFilePushToken}
-                onChange={(e) => setBlogFilePushToken(e.target.value)}
-              />
-            </>
-          )}
-
-          <textarea
-            className="textarea textarea-bordered w-full h-72 p-2"
-            placeholder="Type your script here..."
-            value={script}
-            onChange={(e) => setScript(e.target.value)}
-          ></textarea>
-
-          <div className="grid grid-cols-2 gap-4">
-            <label className="form-control w-full">
-              <div className="label">
-                <span className="label-text">Speaker 1</span>
-              </div>
-              <select
-                className="select select-bordered"
-                value={speaker1}
-                onChange={(e) => setSpeaker1(e.target.value)}
-              >
-                {SPEAKERS.map((s) => (
-                  <option key={s.value} value={s.value}>
-                    {s.name}
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            <label className="form-control w-full">
-              <div className="label">
-                <span className="label-text">Speaker 2</span>
-              </div>
-              <select
-                className="select select-bordered"
-                value={speaker2}
-                onChange={(e) => setSpeaker2(e.target.value)}
-              >
-                {SPEAKERS.map((s) => (
-                  <option key={s.value} value={s.value}>
-                    {s.name}
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            <button className="btn" onClick={setRandSpeaker}>
-              Randomize speakers
-            </button>
-
-            <label className="form-control w-full">
-              <select
-                className="select select-bordered"
-                value={speed.toString()}
-                onChange={(e) => setSpeed(e.target.value)}
-              >
-                {SPEEDS.map((s) => (
-                  <option key={s.value} value={s.value.toString()}>
-                    Speed: {s.name} ({s.value})
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                className="checkbox"
-                checked={addIntroMusic}
-                onChange={(e) => setAddIntroMusic(e.target.checked)}
-                disabled={isGenerating || busy}
-              />
-              Add intro music
-            </div>
-          </div>
-
-          <button
-            id="btn-generate-podcast"
-            className="btn btn-primary mt-2"
-            onClick={generatePodcast}
-            disabled={busy || !script || isGenerating}
-          >
-            {isGenerating ? (
-              <>
-                <span className="loading loading-spinner loading-sm"></span>
-                Generating ({numStepsDone}/{numSteps})...
-              </>
-            ) : (
-              'Generate podcast'
-            )}
-          </button>
-
-          {isGenerating && (
-            <progress
-              className="progress progress-primary mt-2"
-              value={numStepsDone}
-              max={numSteps}
-            ></progress>
-          )}
-        </div>
-      </div>
-
-      {wav && (
-        <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} />
-
-            {isBlogMode && (
-              <div>
-                -------------------
-                <br />
-                <h2>Comment to be posted:</h2>
-                <pre className="p-2 bg-base-200 rounded-md my-2 whitespace-pre-wrap break-words">
-                  {blogCmtOutput}
-                </pre>
-                <button
-                  className="btn btn-sm btn-secondary"
-                  onClick={() => copyStr(blogCmtOutput)}
-                >
-                  Copy comment
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-// copy text to clipboard
-export const copyStr = (textToCopy: string) => {
-  // Navigator clipboard api needs a secure context (https)
-  if (navigator.clipboard && window.isSecureContext) {
-    navigator.clipboard.writeText(textToCopy);
-  } else {
-    // Use the 'out of viewport hidden text area' trick
-    const textArea = document.createElement('textarea');
-    textArea.value = textToCopy;
-    // Move textarea out of the viewport so it's not visible
-    textArea.style.position = 'absolute';
-    textArea.style.left = '-999999px';
-    document.body.prepend(textArea);
-    textArea.select();
-    document.execCommand('copy');
-  }
-};
+import { useEffect, useState } from 'react';
+import { AudioPlayer } from './AudioPlayer';
+import { Podcast, PodcastTurn } from '../utils/types';
+import { parse } from 'yaml';
+import {
+  addNoise,
+  addSilence,
+  audioBufferToMp3,
+  generateAudio,
+  isBlogMode,
+  joinAudio,
+  loadWavAndDecode,
+  pickRand,
+  uploadFileToHub,
+    denoiseAudioBuffer,
+} from '../utils/utils';
+
+// taken from https://freesound.org/people/artxmp1/sounds/660540
+import openingSoundSrc from '../opening-sound.wav';
+import { getBlogComment } from '../utils/prompts';
+
+interface GenerationStep {
+  turn: PodcastTurn;
+  audioBuffer?: AudioBuffer;
+}
+
+const SPEEDS = [
+  { name: 'slow AF', value: 0.8 },
+  { name: 'slow', value: 0.9 },
+  { name: 'a bit slow', value: 1.0 },
+  { name: 'natural', value: 1.1 },
+  { name: 'most natural', value: 1.2 },
+  { name: 'a bit fast', value: 1.3 },
+  { name: 'fast!', value: 1.4 },
+  { name: 'fast AF', value: 1.5 },
+];
+
+const SPEAKERS = [
+  { name: '🇺🇸 🚺 Heart ❤️', value: 'af_heart' },
+  { name: '🇺🇸 🚺 Bella 🔥', value: 'af_bella' },
+  // { name: '🇺🇸 🚺 Nicole 🎧', value: 'af_nicole' },
+  { name: '🇺🇸 🚺 Aoede', value: 'af_aoede' },
+  { name: '🇺🇸 🚺 Kore', value: 'af_kore' },
+  { name: '🇺🇸 🚺 Sarah', value: 'af_sarah' },
+  { name: '🇺🇸 🚺 Nova', value: 'af_nova' },
+  { name: '🇺🇸 🚺 Sky', value: 'af_sky' },
+  { name: '🇺🇸 🚺 Alloy', value: 'af_alloy' },
+  { name: '🇺🇸 🚺 Jessica', value: 'af_jessica' },
+  { name: '🇺🇸 🚺 River', value: 'af_river' },
+  { name: '🇺🇸 🚹 Michael', value: 'am_michael' },
+  { name: '🇺🇸 🚹 Fenrir', value: 'am_fenrir' },
+  { name: '🇺🇸 🚹 Puck', value: 'am_puck' },
+  { name: '🇺🇸 🚹 Echo', value: 'am_echo' },
+  { name: '🇺🇸 🚹 Eric', value: 'am_eric' },
+  { name: '🇺🇸 🚹 Liam', value: 'am_liam' },
+  { name: '🇺🇸 🚹 Onyx', value: 'am_onyx' },
+  { name: '🇺🇸 🚹 Santa', value: 'am_santa' },
+  { name: '🇺🇸 🚹 Adam', value: 'am_adam' },
+  { name: '🇬🇧 🚺 Emma', value: 'bf_emma' },
+  { name: '🇬🇧 🚺 Isabella', value: 'bf_isabella' },
+  { name: '🇬🇧 🚺 Alice', value: 'bf_alice' },
+  { name: '🇬🇧 🚺 Lily', value: 'bf_lily' },
+  { name: '🇬🇧 🚹 George', value: 'bm_george' },
+  { name: '🇬🇧 🚹 Fable', value: 'bm_fable' },
+  { name: '🇬🇧 🚹 Lewis', value: 'bm_lewis' },
+  { name: '🇬🇧 🚹 Daniel', value: 'bm_daniel' },
+];
+
+const getRandomSpeakerPair = (): { s1: string; s2: string } => {
+  const s1Gender = Math.random() > 0.5 ? '🚺' : '🚹';
+  const s2Gender = s1Gender === '🚺' ? '🚹' : '🚺';
+  const s1 = pickRand(
+    SPEAKERS.filter((s) => s.name.includes(s1Gender) && s.name.includes('🇺🇸'))
+  ).value;
+  const s2 = pickRand(
+    SPEAKERS.filter((s) => s.name.includes(s2Gender) && s.name.includes('🇺🇸'))
+  ).value;
+  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
+    );
+  }
+};
+
+const getTimestampedFilename = (ext: string) => {
+    return `podcast_${new Date().toISOString().replace(/:/g, "-").split(".")[0]}.${ext}`;
+};
+
+
+export const PodcastGenerator = ({
+  genratedScript,
+  setBusy,
+  blogURL,
+  busy,
+}: {
+  genratedScript: string;
+  blogURL: string;
+  setBusy: (busy: boolean) => void;
+  busy: boolean;
+}) => {
+  const [wav, setWav] = useState<AudioBuffer | null>(null);
+    const [wavBlob, setWavBlob] = useState<Blob | null>(null);
+    const [mp3Blob, setMp3Blob] = useState<Blob | null>(null);
+  const [numSteps, setNumSteps] = useState<number>(0);
+  const [numStepsDone, setNumStepsDone] = useState<number>(0);
+
+  const [script, setScript] = useState<string>('');
+  const [speaker1, setSpeaker1] = useState<string>('');
+  const [speaker2, setSpeaker2] = useState<string>('');
+  const [speed, setSpeed] = useState<string>('1.2');
+  const [addIntroMusic, setAddIntroMusic] = useState<boolean>(false);
+    const [enableDenoise, setEnableDenoise] = useState<boolean>(false);
+
+
+  const [blogFilePushToken, setBlogFilePushToken] = useState<string>(
+    localStorage.getItem('blogFilePushToken') || ''
+  );
+  const [blogCmtOutput, setBlogCmtOutput] = useState<string('');
+    const [uploadToBlog, setUploadToBlog] = useState<boolean>(false); // Control blog upload
+
+
+  useEffect(() => {
+    localStorage.setItem('blogFilePushToken', blogFilePushToken);
+  }, [blogFilePushToken]);
+
+  const setRandSpeaker = () => {
+    const { s1, s2 } = getRandomSpeakerPair();
+    setSpeaker1(s1);
+    setSpeaker2(s2);
+  };
+  useEffect(setRandSpeaker, []);
+
+  useEffect(() => {
+    setScript(genratedScript);
+  }, [genratedScript]);
+
+  const generatePodcast = async () => {
+    setWav(null);
+        setWavBlob(null);
+        setMp3Blob(null);
+    setBusy(true);
+    setBlogCmtOutput('');
+
+      // Blog mode check moved inside the upload section
+
+    let outputWav: AudioBuffer;
+    try {
+      const podcast = parseYAML(script);
+      const { speakerNames, turns } = podcast;
+      for (const turn of turns) {
+        // normalize it
+        turn.nextGapMilisecs =
+          Math.max(-600, Math.min(300, turn.nextGapMilisecs)) - 100;
+        turn.text = turn.text
+          .trim()
+          .replace(/’/g, "'")
+          .replace(/“/g, '"')
+          .replace(/”/g, '"');
+      }
+      const steps: GenerationStep[] = turns.map((turn) => ({ turn }));
+      setNumSteps(steps.length);
+      setNumStepsDone(0);
+      for (let i = 0; i < steps.length; i++) {
+        const step = steps[i];
+        const speakerIdx = speakerNames.indexOf(
+          step.turn.speakerName as string
+        ) as 1 | 0;
+        const speakerVoice = speakerIdx === 0 ? speaker1 : speaker2;
+        const url = await generateAudio(
+          step.turn.text,
+          speakerVoice,
+          parseFloat(speed)
+        );
+        step.audioBuffer = await loadWavAndDecode(url);
+        if (i === 0) {
+          outputWav = step.audioBuffer;
+          if (addIntroMusic) {
+            const openingSound = await loadWavAndDecode(openingSoundSrc);
+            outputWav = joinAudio(openingSound, outputWav!, -2000);
+          } else {
+            outputWav = addSilence(outputWav!, true, 200);
+          }
+        } else {
+          const lastStep = steps[i - 1];
+          outputWav = joinAudio(
+            outputWav!,
+            step.audioBuffer,
+            lastStep.turn.nextGapMilisecs
+          );
+        }
+        setNumStepsDone(i + 1);
+      }
+
+        // Denoise if enabled
+        if (enableDenoise) {
+            outputWav = await denoiseAudioBuffer(outputWav!);
+        }
+
+      setWav(outputWav! ?? null);
+        // Create WAV blob
+        const wavArrayBuffer = outputWav.getChannelData(0).buffer;
+        setWavBlob(new Blob([wavArrayBuffer], { type: 'audio/wav' }));
+
+        // Convert to MP3 and create MP3 blob
+        const mp3Data = await audioBufferToMp3(outputWav);
+        setMp3Blob(new Blob([mp3Data], { type: 'audio/mp3' }));
+
+    } catch (e) {
+      console.error(e);
+      alert(`Error: ${(e as any).message}`);
+        setWav(null);
+        setWavBlob(null);
+        setMp3Blob(null);
+    }
+    setBusy(false);
+    setNumStepsDone(0);
+    setNumSteps(0);
+
+      // Maybe upload to blog
+    if (isBlogMode && uploadToBlog && outputWav && blogFilePushToken) {
+        if (!blogURL) {
+          alert('Please enter a blog slug');
+          return; // Stop if no blog URL
+        }
+      const repoId = 'ngxson/hf-blog-podcast';
+      const blogSlug = blogURL.split('/blog/').pop() ?? '_noname';
+      const filename = `${blogSlug}.mp3`;  //Use Consistent name for blog
+      setBlogCmtOutput(`Uploading '${filename}' ...`);
+      try {
+        await uploadFileToHub(
+            mp3Data, // Use mp3 data from conversion
+          filename,
+          repoId,
+          blogFilePushToken
+        );
+        setBlogCmtOutput(getBlogComment(filename));
+      } catch (uploadError) {
+        console.error("Upload failed:", uploadError);
+        setBlogCmtOutput(`Upload failed: ${(uploadError as any).message}`);
+      }
+    }
+  };
+
+  const isGenerating = numSteps > 0;
+
+  return (
+    <>
+      <div className="card bg-base-100 w-full shadow-xl">
+        <div className="card-body">
+          <h2 className="card-title">Step 2: Script (YAML format)</h2>
+
+          {isBlogMode && (
+            <>
+              <input
+                type="password"
+                placeholder="Repo push HF_TOKEN"
+                className="input input-bordered w-full"
+                value={blogFilePushToken}
+                onChange={(e) => setBlogFilePushToken(e.target.value)}
+              />
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  className="checkbox"
+                  checked={uploadToBlog}
+                  onChange={(e) => setUploadToBlog(e.target.checked)}
+                  disabled={isGenerating || busy}
+                />
+                Upload to Blog
+              </div>
+            </>
+          )}
+
+          <textarea
+            className="textarea textarea-bordered w-full h-72 p-2"
+            placeholder="Type your script here..."
+            value={script}
+            onChange={(e) => setScript(e.target.value)}
+          ></textarea>
+
+          <div className="grid grid-cols-2 gap-4">
+            <label className="form-control w-full">
+              <div className="label">
+                <span className="label-text">Speaker 1</span>
+              </div>
+              <select
+                className="select select-bordered"
+                value={speaker1}
+                onChange={(e) => setSpeaker1(e.target.value)}
+              >
+                {SPEAKERS.map((s) => (
+                  <option key={s.value} value={s.value}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className="form-control w-full">
+              <div className="label">
+                <span className="label-text">Speaker 2</span>
+              </div>
+              <select
+                className="select select-bordered"
+                value={speaker2}
+                onChange={(e) => setSpeaker2(e.target.value)}
+              >
+                {SPEAKERS.map((s) => (
+                  <option key={s.value} value={s.value}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <button className="btn" onClick={setRandSpeaker}>
+              Randomize speakers
+            </button>
+
+            <label className="form-control w-full">
+              <select
+                className="select select-bordered"
+                value={speed.toString()}
+                onChange={(e) => setSpeed(e.target.value)}
+              >
+                {SPEEDS.map((s) => (
+                  <option key={s.value} value={s.value.toString()}>
+                    Speed: {s.name} ({s.value})
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                className="checkbox"
+                checked={addIntroMusic}
+                onChange={(e) => setAddIntroMusic(e.target.checked)}
+                disabled={isGenerating || busy}
+              />
+              Add intro music
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                className="checkbox"
+                checked={enableDenoise}
+                onChange={(e) => setEnableDenoise(e.target.checked)}
+                disabled={isGenerating || busy}
+              />
+              Enable Noise Reduction
+            </div>
+          </div>
+
+          <button
+            id="btn-generate-podcast"
+            className="btn btn-primary mt-2"
+            onClick={generatePodcast}
+            disabled={busy || !script || isGenerating}
+          >
+            {isGenerating ? (
+              <>
+                <span className="loading loading-spinner loading-sm"></span>
+                Generating ({numStepsDone}/{numSteps})...
+              </>
+            ) : (
+              'Generate podcast'
+            )}
+          </button>
+
+          {isGenerating && (
+            <progress
+              className="progress progress-primary mt-2"
+              value={numStepsDone}
+              max={numSteps}
+            ></progress>
+          )}
+        </div>
+      </div>
+
+      {wav && (
+        <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} />
+            {wavBlob && (
+              <a
+                className="btn btn-sm btn-primary ml-2"
+                href={URL.createObjectURL(wavBlob)}
+                download={getTimestampedFilename('wav')}
+              >
+                Download WAV
+              </a>
+            )}
+
+            {mp3Blob && (
+              <a
+                className="btn btn-sm btn-primary ml-2"
+                href={URL.createObjectURL(mp3Blob)}
+                download={getTimestampedFilename('mp3')}
+              >
+                Download MP3
+              </a>
+            )}
+
+            {isBlogMode && (
+              <div>
+                -------------------
+                <br />
+                <h2>Comment to be posted:</h2>
+                <pre className="p-2 bg-base-200 rounded-md my-2 whitespace-pre-wrap break-words">
+                  {blogCmtOutput}
+                </pre>
+                <button
+                  className="btn btn-sm btn-secondary"
+                  onClick={() => copyStr(blogCmtOutput)}
+                >
+                  Copy comment
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+// copy text to clipboard
+export const copyStr = (textToCopy: string) => {
+  // Navigator clipboard api needs a secure context (https)
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(textToCopy);
+  } else {
+    // Use the 'out of viewport hidden text area' trick
+    const textArea = document.createElement('textarea');
+    textArea.value = textToCopy;
+    // Move textarea out of the viewport so it's not visible
+    textArea.style.position = 'absolute';
+    textArea.style.left = '-999999px';
+    document.body.prepend(textArea);
+    textArea.select();
+    document.execCommand('copy');
+  }
+};