File size: 1,760 Bytes
8e0957b
 
 
 
0de6d2d
9f97307
 
ac91c3d
8e0957b
 
9f97307
a2a351d
 
9f97307
8e0957b
 
 
 
 
 
 
 
 
 
 
 
ac91c3d
0de6d2d
ba463b3
ac91c3d
 
 
ba463b3
 
ac91c3d
 
 
 
 
a2a351d
ac91c3d
1538aa3
ac91c3d
8e0957b
ac91c3d
 
 
 
a2a351d
ac91c3d
 
 
9f97307
8e0957b
 
9f97307
 
8e0957b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { OpenInNewTab } from './utils/common';
import { PodcastGenerator } from './components/PodcastGenerator';
import { useState } from 'react';
import { ScriptMaker } from './components/ScriptMaker';
import { AuthCard } from './components/AuthCard';

function App() {
  const [hfToken, setHfToken] = useState<string>('loading');
  const [genratedScript, setGeneratedScript] = useState<string>('');
  const [busy, setBusy] = useState<boolean>(false);

  const [blogURL, setBlogURL] = useState<string>('');

  return (
    <div className="bg-base-300 min-h-screen">
      <div className="max-w-screen-lg mx-auto p-4 pb-32 grid gap-4 grid-cols-1">
        <div className="p-4 col-span-1">
          <h1 className="text-3xl font-bold mb-2">
            Podcast generator via Kokoro-TTS
          </h1>
          <p>
            A space made by{' '}
            <OpenInNewTab href="https://hf.co/ngxson">🤗 ngxson</OpenInNewTab>
          </p>
        </div>

        <AuthCard hfToken={hfToken} setHfToken={setHfToken} />

        {hfToken === 'loading' ? (
          <div className="p-4 col-span-1">
            <div className="loading loading-spinner loading-lg"></div>
          </div>
        ) : !hfToken || !hfToken.startsWith('hf_') ? (
          <></>
        ) : (
          <>
            <ScriptMaker
              setScript={setGeneratedScript}
              setBusy={setBusy}
              setBlogURL={setBlogURL}
              busy={busy}
              hfToken={hfToken}
            />

            <PodcastGenerator
              genratedScript={genratedScript}
              setBusy={setBusy}
              busy={busy}
              blogURL={blogURL}
            />
          </>
        )}
      </div>
    </div>
  );
}

export default App;