Merge pull request #9 from intellwe/feat/vc

FEAT: Implement voice-changer with live record and upload voice file

Author: RianaAzad

src/App.tsx

@@ -1,16 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Mic, FileAudio, Heart } from 'lucide-react';
+import { Mic, FileAudio, Heart, Wand2 } from 'lucide-react';
 import AudioUploader from './components/AudioUploader';
 import TranscriptDisplay from './components/TranscriptDisplay';
 import { TranscriptResponse } from './types';
 import LiveRecording from './components/LiveRecording';
 import StandaloneTextToSpeech from './components/StandaloneTextToSpeech';
+import VoiceChanger from './components/VoiceChanger';
 
 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 [activeTab, setActiveTab] = useState<'transcribe' | 'tts' | 'voice-changer'>('transcribe');
 
   const handleTranscriptReceived = (data: TranscriptResponse) => {
     setTranscript(data);
@@ -68,6 +69,16 @@ function App() {
             >
               Text to Speech
             </button>
+            <button
+              onClick={() => setActiveTab('voice-changer')}
+              className={`px-6 py-3 font-medium text-sm transition-colors ${
+                activeTab === 'voice-changer'
+                  ? 'text-blue-400 border-b-2 border-blue-400'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              Voice Changer
+            </button>
           </div>
 
           {/* Transcribe Audio Tab */}
@@ -98,6 +109,13 @@ function App() {
               <StandaloneTextToSpeech apiKey={apiKey} />
             </div>
           )}
+          
+          {/* Voice Changer Tab */}
+          {activeTab === 'voice-changer' && (
+            <div className="mb-12">
+              <VoiceChanger 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">