front/src/components/PodcastGenerator.tsx

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');
  }
};