audioblob fix

frontend/pages/index.js

@@ -14,7 +14,9 @@ export default function Home() {
   }
 
   function handleStopRecording() {
-    stopRecording(mediaRecorderRef, setRecording)
+    // Immediately stop the recording animation
+    setRecording(false)
+    stopRecording(mediaRecorderRef)
   }
 
   async function handleSendAudio(blob) {
@@ -45,10 +47,6 @@ export default function Home() {
           <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-4">
             🎤 Voice Assistant
           </h1>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-            Experience the future of voice interaction. Press and hold to record your voice,
-            or simply click to toggle recording mode.
-          </p>
         </div>
 
         {/* Main Interface */}
@@ -68,9 +66,9 @@ export default function Home() {
               <button
                 onMouseDown={handleStartRecording}
                 onMouseUp={handleStopRecording}
+                onMouseLeave={handleStopRecording}
                 onTouchStart={handleStartRecording}
                 onTouchEnd={handleStopRecording}
-                onClick={() => (recording ? handleStopRecording() : handleStartRecording())}
                 disabled={isProcessing}
                 className={`record-button w-40 h-40 rounded-full border-none text-white text-lg font-semibold
                   ${recording

frontend/services/audioService.js

@@ -31,10 +31,9 @@ export async function startRecording(mediaRecorderRef, audioChunksRef, setRecord
   }
 }
 
-export function stopRecording(mediaRecorderRef, setRecording) {
+export function stopRecording(mediaRecorderRef) {
   if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
     mediaRecorderRef.current.stop()
-    setRecording(false)
     return true
   }
   return false
@@ -59,10 +58,10 @@ export async function sendAudioToBackend(audioBlob) {
     }
 
     console.log('Converting response to blob...')
-    const audioBlob = await res.blob()
+    const responseBlob = await res.blob()
-    console.log('Audio blob created, size:', audioBlob.size)
+    console.log('Audio blob created, size:', responseBlob.size)
 
-    return audioBlob
+    return responseBlob
   } catch (error) {
     console.error('Error in sendAudioToBackend:', error)
     throw error