Merge pull request #8 from intellwe/feat/tts

FEAT: Implement Text-to-Speech with voice customization, speed adjustment, audio download

Author: RianaAzad

src/App.tsx

@@ -4,14 +4,18 @@ import AudioUploader from './components/AudioUploader';
 import TranscriptDisplay from './components/TranscriptDisplay';
 import { TranscriptResponse } from './types';
 import LiveRecording from './components/LiveRecording';
+import StandaloneTextToSpeech from './components/StandaloneTextToSpeech';
 
 function App() {
   const [transcript, setTranscript] = useState<TranscriptResponse | null>(null);
   const apiKey = import.meta.env.VITE_ELEVEN_LABS_API_KEY || "";
   const [currentYear] = useState(new Date().getFullYear());
+  const [activeTab, setActiveTab] = useState<'transcribe' | 'tts'>('transcribe');
 
   const handleTranscriptReceived = (data: TranscriptResponse) => {
     setTranscript(data);
+    // Automatically switch to transcribe tab when transcript is received
+    setActiveTab('transcribe');
   };
 
   useEffect(() => {
@@ -42,22 +46,58 @@ function App() {
         </header>
 
         <main className="animate-fade-in animation-delay-300">
-          <div className="flex flex-col md:flex-row gap-6 mb-12">
-            <div className="md:w-1/2">
-              <AudioUploader 
-                onTranscriptReceived={handleTranscriptReceived} 
-                apiKey={apiKey}
-              />
-            </div>
-            <div className="md:w-1/2">
-              <LiveRecording
-                onTranscriptReceived={handleTranscriptReceived}
-                apiKey={apiKey}
-              />
-            </div>
+          {/* Tab Navigation */}
+          <div className="flex mb-8 border-b border-gray-700">
+            <button
+              onClick={() => setActiveTab('transcribe')}
+              className={`px-6 py-3 font-medium text-sm transition-colors ${
+                activeTab === 'transcribe'
+                  ? 'text-blue-400 border-b-2 border-blue-400'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              Transcribe Audio
+            </button>
+            <button
+              onClick={() => setActiveTab('tts')}
+              className={`px-6 py-3 font-medium text-sm transition-colors ${
+                activeTab === 'tts'
+                  ? 'text-blue-400 border-b-2 border-blue-400'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              Text to Speech
+            </button>
           </div>
+
+          {/* Transcribe Audio Tab */}
+          {activeTab === 'transcribe' && (
+            <>
+              <div className="flex flex-col md:flex-row gap-6 mb-12">
+                <div className="md:w-1/2">
+                  <AudioUploader 
+                    onTranscriptReceived={handleTranscriptReceived} 
+                    apiKey={apiKey}
+                  />
+                </div>
+                <div className="md:w-1/2">
+                  <LiveRecording
+                    onTranscriptReceived={handleTranscriptReceived}
+                    apiKey={apiKey}
+                  />
+                </div>
+              </div>
+              
+              {transcript && <TranscriptDisplay transcript={transcript} apiKey={apiKey} />}
+            </>
+          )}
 
-          {transcript && <TranscriptDisplay transcript={transcript} />}
+          {/* Text to Speech Tab */}
+          {activeTab === 'tts' && (
+            <div className="mb-12">
+              <StandaloneTextToSpeech apiKey={apiKey} />
+            </div>
+          )}
         </main>
 
         <footer className="mt-16 text-center text-gray-400 py-6 border-t border-gray-700 animate-fade-in animation-delay-700">