Merge pull request #6 from intellwe/feat/live-rec

FEAT: implement Real-time Transcription with live recording

Author: RianaAzad

src/App.tsx

@@ -3,6 +3,7 @@ import { Mic, FileAudio, Heart } from 'lucide-react';
 import AudioUploader from './components/AudioUploader';
 import TranscriptDisplay from './components/TranscriptDisplay';
 import { TranscriptResponse } from './types';
+import LiveRecording from './components/LiveRecording';
 
 function App() {
   const [transcript, setTranscript] = useState<TranscriptResponse | null>(null);
@@ -41,10 +42,20 @@ function App() {
         </header>
 
         <main className="animate-fade-in animation-delay-300">
-          <AudioUploader 
-            onTranscriptReceived={handleTranscriptReceived} 
-            apiKey={apiKey}
-          />
+          <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} />}
         </main>

src/components/LiveRecording.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Mic, StopCircle, Loader2 } from 'lucide-react';
+import axios from 'axios';
+import { TranscriptResponse } from '../types';
+
+interface LiveRecordingProps {
+  onTranscriptReceived: (transcript: TranscriptResponse) => void;
+  apiKey: string;
+}
+
+const LiveRecording: React.FC<LiveRecordingProps> = ({ onTranscriptReceived, apiKey }) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const timerRef = useRef<number | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  const startRecording = async () => {
+    try {
+      setError(null);
+      audioChunksRef.current = [];
+      
+      console.log("Requesting microphone access...");
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      
+      console.log("Creating MediaRecorder...");
+      const mediaRecorder = new MediaRecorder(stream);
+      
+      mediaRecorder.ondataavailable = (event) => {
+        console.log("Data available event triggered", event.data.size);
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      
+      mediaRecorder.onstop = () => {
+        console.log("MediaRecorder stopped");
+        processAudio();
+      };
+      
+      mediaRecorderRef.current = mediaRecorder;
+      
+      console.log("Starting MediaRecorder...");
+      mediaRecorder.start(1000); // Collect data every second
+      setIsRecording(true);
+      setRecordingTime(0);
+      
+      // Start timer
+      timerRef.current = window.setInterval(() => {
+        setRecordingTime(prev => prev + 1);
+      }, 1000);
+      
+      console.log("Recording started successfully");
+    } catch (err) {
+      console.error('Error accessing microphone:', err);
+      setError('Could not access your microphone. Please check permissions.');
+    }
+  };
+
+  const stopRecording = () => {
+    console.log("Stopping recording...");
+    if (mediaRecorderRef.current && isRecording) {
+      try {
+        mediaRecorderRef.current.stop();
+        
+        // Stop all audio tracks
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach(track => {
+            console.log("Stopping track:", track.kind);
+            track.stop();
+          });
+          streamRef.current = null;
+        }
+        
+        // Clear timer
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+        }
+        
+        setIsRecording(false);
+        console.log("Recording stopped successfully");
+      } catch (err) {
+        console.error("Error stopping recording:", err);
+        setError('Error stopping recording. Please try again.');
+      }
+    } else {
+      console.warn("Tried to stop recording but no MediaRecorder was active");
+    }
+  };
+
+  const processAudio = async () => {
+    console.log("Processing audio...", audioChunksRef.current.length);
+    if (audioChunksRef.current.length === 0) {
+      setError("No audio recorded. Please try again.");
+      return;
+    }
+    
+    setIsProcessing(true);
+    setError(null);
+    
+    try {
+      console.log("Creating audio blob...");
+      const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+      console.log("Audio blob size:", audioBlob.size);
+      
+      // Debug: Create an audio element to test the recording
+      const audioUrl = URL.createObjectURL(audioBlob);
+      const audio = new Audio(audioUrl);
+      console.log("Audio URL created:", audioUrl);
+      
+      const formData = new FormData();
+      formData.append('file', audioBlob, 'recording.webm');
+      formData.append('model_id', 'scribe_v1');
+      formData.append('diarize', 'true');
+      formData.append('timestamps_granularity', 'word');
+      
+      console.log("Sending request to ElevenLabs API...");
+      console.log("API Key available:", !!apiKey);
+      
+      const response = await axios.post<TranscriptResponse>(
+        'https://api.elevenlabs.io/v1/speech-to-text',
+        formData,
+        {
+          headers: {
+            'xi-api-key': apiKey,
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+      );
+      
+      console.log("Response received:", response.status);
+      onTranscriptReceived(response.data);
+    } catch (err) {
+      console.error('Error processing audio:', err);
+      setError(
+        err instanceof Error 
+          ? err.message 
+          : 'An error occurred while processing your recording'
+      );
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+      
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, []);
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="w-full max-w-md mx-auto bg-gray-800 p-6 rounded-xl shadow-xl border border-gray-700 transform hover:scale-[1.01] transition-all duration-300 mt-8">
+      <h2 className="text-xl font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Live Recording</h2>
+      
+      <div className="flex flex-col items-center justify-center">
+        {isRecording ? (
+          <div className="relative mb-4">
+            <div className="absolute inset-0 bg-red-500/20 rounded-full animate-ping"></div>
+            <button 
+              onClick={stopRecording}
+              className="relative z-10 p-6 bg-gradient-to-r from-red-600 to-red-500 rounded-full shadow-glow hover:shadow-lg hover:from-red-700 hover:to-red-600 transition-all duration-300"
+            >
+              <StopCircle className="h-10 w-10 text-white" />
+            </button>
+          </div>
+        ) : (
+          <button 
+            onClick={startRecording}
+            disabled={isProcessing}
+            className="p-6 bg-gradient-to-r from-green-600 to-emerald-500 rounded-full shadow-glow hover:shadow-lg hover:from-green-700 hover:to-emerald-600 transition-all duration-300 mb-4 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Mic className="h-10 w-10 text-white" />
+          </button>
+        )}
+        
+        {isRecording && (
+          <div className="flex items-center space-x-2 mb-4">
+            <div className="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
+            <span className="text-lg font-medium text-white">{formatTime(recordingTime)}</span>
+          </div>
+        )}
+        
+        {isProcessing && (
+          <div className="flex items-center space-x-2 text-gray-300 mt-2">
+            <Loader2 className="animate-spin h-5 w-5" />
+            <span>Processing audio...</span>
+          </div>
+        )}
+        
+        {error && (
+          <div className="mt-4 p-3 bg-red-900/30 text-red-400 border border-red-800 rounded-md text-sm animate-shake w-full">
+            {error}
+          </div>
+        )}
+      </div>
+      
+      <div className="mt-4 text-center text-sm text-gray-400">
+        {isRecording ? 
+          "Click the stop button when you're finished recording" : 
+          "Click the microphone to start recording your conversation"
+        }
+      </div>
+      
+      <div className="mt-4 text-xs text-gray-500">
+        Note: Make sure your browser has permission to access your microphone.
+      </div>
+    </div>
+  );
+};
+
+export default LiveRecording;