fix: downsample audio to 16kHz to prevent ASR 500 error, add permission check handler, and render errors in compact view (v1.0.8)

README.md

@@ -1,7 +1,7 @@
 # 🚀 EveFlow — Compagnon de Bureau Rétro-Futuriste 3D
 
 [![Windows Version](https://img.shields.io/badge/OS-Windows-blue.svg?style=flat-square&logo=windows)](https://github.com/R0m1k3/EveFlow)
-[![Version](https://img.shields.io/badge/version-1.0.4-brightgreen.svg?style=flat-square)](https://github.com/R0m1k3/EveFlow/releases/tag/v1.0.4)
+[![Version](https://img.shields.io/badge/version-1.0.8-brightgreen.svg?style=flat-square)](https://github.com/R0m1k3/EveFlow/releases/tag/v1.0.8)
 [![License](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat-square)](LICENSE)
 
 **EveFlow** est un compagnon de bureau Windows immersif haut de gamme, combinant une esthétique cyberpunk rétro-futuriste soignée et des technologies d'intelligence artificielle avancées. Il intègre un assistant virtuel en 3D nommé **Eve**, animé en temps réel avec des expressions émotionnelles dynamiques et synchronisé avec des services de synthèse vocale (TTS/STT) locaux et des architectures multi-agents.
@@ -74,7 +74,7 @@ Pour générer l'exécutable d'installation Windows (`.exe`) autonome :
    ```bash
    npm run dist
    ```
-   *L'exécutable d'installation NSIS (`EveFlow Setup 1.0.4.exe`) et la build décompressée seront générés dans le dossier `./out/`.*
+   *L'exécutable d'installation NSIS (`EveFlow Setup 1.0.8.exe`) et la build décompressée seront générés dans le dossier `./out/`.*
 
 ---
 

main.js

@@ -267,6 +267,21 @@ app.whenReady().then(() => {
     }
   );
 
+  // Autoriser l'accès aux périphériques de capture (microphone) sous Electron
+  session.defaultSession.setPermissionRequestHandler((webContents, permission, callback) => {
+    if (permission === 'media') {
+      return callback(true);
+    }
+    callback(false);
+  });
+
+  session.defaultSession.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
+    if (permission === 'media') {
+      return true;
+    }
+    return false;
+  });
+
   startWebhookServer();
   createWindow();
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eveflow",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "eveflow",
-      "version": "1.0.4",
+      "version": "1.0.8",
       "dependencies": {
         "@react-three/drei": "^9.105.0",
         "@react-three/fiber": "^8.16.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eveflow",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "description": "Retro-futuristic Windows companion with 3D Eve bot, local TTS/STT, and multi-agent connectivity",
   "main": "main.js",
   "scripts": {

src/App.tsx

@@ -898,7 +898,7 @@ export const App: React.FC = () => {
   const [sttProvider, setSttProvider] = useState<'browser' | 'qwen3-asr'>('browser');
   const [sttApiUrl, setSttApiUrl] = useState<string>('http://127.0.0.1:8000/v1');
   const [sttApiKey, setSttApiKey] = useState<string>('');
-  const [sttModel, setSttModel] = useState<string>('qwen3-asr');
+  const [sttModel, setSttModel] = useState<string>('Qwen/Qwen3-ASR-0.6B');
 
   const [ttsApiUrl, setTtsApiUrl] = useState<string>('http://127.0.0.1:8000/v1');
   const [ttsApiKey, setTtsApiKey] = useState<string>('');
@@ -1187,7 +1187,14 @@ export const App: React.FC = () => {
       if (val) setSttApiKey(val);
     });
     persistRead('eveflow_stt_model').then(val => {
-      if (val) setSttModel(val);
+      if (val) {
+        if (val === 'qwen3-asr') {
+          setSttModel('Qwen/Qwen3-ASR-0.6B');
+          persistWrite('eveflow_stt_model', 'Qwen/Qwen3-ASR-0.6B');
+        } else {
+          setSttModel(val);
+        }
+      }
     });
     persistRead('eveflow_tts_api_url').then(val => {
       if (val) setTtsApiUrl(val);
@@ -1606,12 +1613,18 @@ export const App: React.FC = () => {
   const handleStartVocalRecord = () => {
     if (!audioServiceRef.current) return;
 
+    setErrorMessage(null);
     audioServiceRef.current.stopSpeaking();
     setIsSpeaking(false);
 
     audioServiceRef.current.startListening(
       (text) => {
-        handleSendMessage(text);
+        if (text.trim()) {
+          handleSendMessage(text);
+        } else {
+          setErrorMessage("Aucune parole n'a été détectée. Veuillez parler distinctement près du micro.");
+          setCurrentEmotion('sad');
+        }
       },
       () => {
         setIsListening(true);
@@ -1622,6 +1635,8 @@ export const App: React.FC = () => {
       },
       (err) => {
         setIsListening(false);
+        setErrorMessage(`Erreur de reconnaissance vocale : ${err}`);
+        setCurrentEmotion('sad');
         console.error(err);
       },
       sttLang
@@ -2528,6 +2543,27 @@ export const App: React.FC = () => {
                 <div ref={compactMessagesEndRef} />
               </div>
 
+              {errorMessage && (
+                <div style={{
+                  backgroundColor: 'rgba(239, 68, 68, 0.12)',
+                  border: '1px solid rgba(239, 68, 68, 0.35)',
+                  borderRadius: '8px',
+                  color: '#ff6b6b',
+                  padding: '6px 10px',
+                  fontSize: '10px',
+                  display: 'flex',
+                  gap: '6px',
+                  alignItems: 'center',
+                  boxShadow: '0 0 10px rgba(239, 68, 68, 0.05)'
+                }}>
+                  <AlertCircle style={{ width: '13px', height: '13px', flexShrink: 0, color: '#ef4444' }} />
+                  <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={errorMessage}>
+                    <strong style={{ textTransform: 'uppercase', marginRight: '4px' }}>DÉFAILLANCE:</strong>
+                    {errorMessage}
+                  </div>
+                </div>
+              )}
+
               {/* Barre de saisie compacte */}
               <div style={{ display: 'flex', gap: '6px', alignItems: 'center', width: '100%', paddingBottom: '2px' }}>
                 <input

src/services/audioService.ts

@@ -63,9 +63,21 @@ export class AudioService {
   private sttProvider: 'browser' | 'qwen3-asr' = 'browser';
   private sttApiUrl = 'http://127.0.0.1:8000/v1';
   private sttApiKey = '';
-  private sttModel = 'qwen3-asr';
-  private mediaRecorder: MediaRecorder | null = null;
-  private audioChunks: Blob[] = [];
+  private sttModel = 'Qwen/Qwen3-ASR-0.6B';
+
+  // Propriétés pour l'enregistrement WAV direct
+  private audioContext: AudioContext | null = null;
+  private scriptProcessor: ScriptProcessorNode | null = null;
+  private micStream: MediaStream | null = null;
+  private leftChannel: Float32Array[] = [];
+  private recordingLength = 0;
+  private sampleRate = 44100;
+
+  // Callbacks pour l'écoute
+  private activeOnResult: ((text: string) => void) | null = null;
+  private activeOnEnd: (() => void) | null = null;
+  private activeOnError: ((err: string) => void) | null = null;
+  private activeLang = 'fr-FR';
 
   private ttsApiUrl = 'http://127.0.0.1:8000/v1';
   private ttsApiKey = '';
@@ -101,6 +113,19 @@ export class AudioService {
     }
   }
 
+  private logInfo(tag: string, message: string, data?: any) {
+    console.log(`[${tag}] ${message}`, data);
+    if ((window as any).electronAPI?.writeLog) {
+      (window as any).electronAPI.writeLog({
+        ts: new Date().toISOString(),
+        level: 'INFO',
+        tag,
+        message,
+        data: data ? { message: data.message, stack: data.stack, ...data } : undefined
+      });
+    }
+  }
+
   constructor() {
     this.ttsSynth = window.speechSynthesis;
     this.initSTT();
@@ -584,7 +609,7 @@ export class AudioService {
     }
   }
 
-  // Démarrer l'écoute vocale API via MediaRecorder
+  // Démarrer l'écoute vocale API via AudioContext (WAV Recorder)
   private async startListeningAPI(
     onResult: (text: string) => void,
     onStart: () => void,
@@ -596,59 +621,214 @@ export class AudioService {
       this.stopListening();
     }
 
+    // Assigner les callbacks pour y avoir accès à l'arrêt
+    this.activeOnResult = onResult;
+    this.activeOnEnd = onEnd;
+    this.activeOnError = onError;
+    this.activeLang = lang;
+
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      this.audioChunks = [];
+      this.micStream = stream;
+      this.leftChannel = [];
+      this.recordingLength = 0;
 
-      let options = {};
-      if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
-        options = { mimeType: 'audio/webm;codecs=opus' };
-      } else if (MediaRecorder.isTypeSupported('audio/webm')) {
-        options = { mimeType: 'audio/webm' };
+      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+      this.audioContext = new AudioCtx();
+      
+      // Assurer que l'AudioContext est actif (non suspendu)
+      if (this.audioContext.state === 'suspended') {
+        this.logWarn("STT", "AudioContext initialisé à l'état suspendu. Tentative de reprise...");
+        await this.audioContext.resume();
       }
+      
+      this.sampleRate = this.audioContext.sampleRate;
+      this.logInfo("STT", "AudioContext démarré avec succès", {
+        state: this.audioContext.state,
+        sampleRate: this.sampleRate
+      });
+
+      const source = this.audioContext.createMediaStreamSource(stream);
+      // bufferSize de 2048, 1 canal d'entrée, 1 de sortie
+      this.scriptProcessor = this.audioContext.createScriptProcessor(2048, 1, 1);
+
+      this.scriptProcessor.onaudioprocess = (e) => {
+        if (!this.isListeningActive) return;
+        const inputData = e.inputBuffer.getChannelData(0);
+        // Cloner les échantillons
+        this.leftChannel.push(new Float32Array(inputData));
+        this.recordingLength += inputData.length;
+      };
+
+      source.connect(this.scriptProcessor);
+      this.scriptProcessor.connect(this.audioContext.destination);
 
-      this.mediaRecorder = new MediaRecorder(stream, options);
       this.isListeningActive = true;
-
-      this.mediaRecorder.ondataavailable = (event) => {
-        if (event.data && event.data.size > 0) {
-          this.audioChunks.push(event.data);
-        }
-      };
-
-      this.mediaRecorder.onstart = () => {
-        onStart();
-      };
-
-      this.mediaRecorder.onstop = async () => {
-        this.isListeningActive = false;
-        onEnd();
-
-        // Stopper toutes les pistes pour éteindre le voyant du microphone
-        stream.getTracks().forEach(track => track.stop());
-
-        if (this.audioChunks.length === 0) {
-          onError("Aucune donnée audio capturée");
-          return;
-        }
-
-        const audioBlob = new Blob(this.audioChunks, { type: this.mediaRecorder?.mimeType || 'audio/webm' });
-
-        try {
-          const text = await this.transcribeAudioWithAPI(audioBlob, lang);
-          onResult(text);
-        } catch (err: any) {
-          onError(err.message || "Erreur de transcription de l'API");
-        }
-      };
-
-      this.mediaRecorder.start();
+      onStart();
     } catch (err: any) {
       this.isListeningActive = false;
+      this.logError("STT", "Impossible d'accéder au microphone", err);
       onError(err.message || "Impossible d'accéder au microphone.");
     }
   }
 
+  // Arrêter proprement la capture AudioContext et exporter en WAV
+  private stopListeningAPI() {
+    if (!this.isListeningActive) return;
+    this.isListeningActive = false;
+
+    // Déconnecter le processeur
+    if (this.scriptProcessor) {
+      this.scriptProcessor.disconnect();
+      this.scriptProcessor.onaudioprocess = null;
+      this.scriptProcessor = null;
+    }
+
+    // Arrêter le flux micro
+    if (this.micStream) {
+      this.micStream.getTracks().forEach(track => track.stop());
+      this.micStream = null;
+    }
+
+    // Fermer l'audio context
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+
+    const onEndCallback = this.activeOnEnd;
+    const onResultCallback = this.activeOnResult;
+    const onErrorCallback = this.activeOnError;
+    const lang = this.activeLang;
+
+    if (onEndCallback) onEndCallback();
+
+    if (this.recordingLength === 0) {
+      if (onErrorCallback) onErrorCallback("Aucune donnée audio capturée");
+      return;
+    }
+
+    // Exporter le tampon audio en fichier WAV
+    const wavBlob = this.exportWAV(this.leftChannel, this.recordingLength, this.sampleRate);
+    
+    this.logInfo("STT", "Arrêt de l'écoute, exportation WAV...", {
+      recordingLength: this.recordingLength,
+      sampleRate: this.sampleRate,
+      wavSize: wavBlob.size
+    });
+
+    this.transcribeAudioWithAPI(wavBlob, lang)
+      .then(text => {
+        if (onResultCallback) onResultCallback(text);
+      })
+      .catch(err => {
+        this.logError("STT", "Erreur de transcription", err);
+        if (onErrorCallback) onErrorCallback(err.message || "Erreur de transcription de l'API");
+      });
+  }
+
+  // Fonctions utilitaires pour générer le conteneur WAV PCM 16-bit
+  private exportWAV(channelData: Float32Array[], recordingLength: number, sampleRate: number): Blob {
+    const originalBuffer = this.mergeBuffers(channelData, recordingLength);
+    
+    // Rééchantillonner à 16000 Hz pour la compatibilité avec l'API ASR (Whisper / Qwen3-ASR)
+    const targetSampleRate = 16000;
+    const resampledBuffer = this.downsampleBuffer(originalBuffer, sampleRate, targetSampleRate);
+    
+    const wavBuffer = new ArrayBuffer(44 + resampledBuffer.length * 2);
+    const view = new DataView(wavBuffer);
+
+    /* Identifiant RIFF */
+    this.writeString(view, 0, 'RIFF');
+    /* Taille du fichier */
+    view.setUint32(4, 36 + resampledBuffer.length * 2, true);
+    /* Type RIFF */
+    this.writeString(view, 8, 'WAVE');
+    /* Identifiant format fmt */
+    this.writeString(view, 12, 'fmt ');
+    /* Longueur du chunk format */
+    view.setUint32(16, 16, true);
+    /* Format d'encodage (1 = PCM non compressé) */
+    view.setUint16(20, 1, true);
+    /* Nombre de canaux (1 = Mono) */
+    view.setUint16(22, 1, true);
+    /* Fréquence d'échantillonnage */
+    view.setUint32(24, targetSampleRate, true);
+    /* Débit d'octets (targetSampleRate * blockAlign) */
+    view.setUint32(28, targetSampleRate * 2, true);
+    /* Block align (1 canal * 2 octets par échantillon) */
+    view.setUint16(32, 2, true);
+    /* Bits par échantillon (16 bits) */
+    view.setUint16(34, 16, true);
+    /* Identifiant de données data */
+    this.writeString(view, 36, 'data');
+    /* Longueur des données audio */
+    view.setUint32(40, resampledBuffer.length * 2, true);
+
+    this.floatTo16BitPCM(view, 44, resampledBuffer);
+
+    return new Blob([view], { type: 'audio/wav' });
+  }
+
+  private downsampleBuffer(buffer: Float32Array, originalSampleRate: number, targetSampleRate: number): Float32Array {
+    if (originalSampleRate === targetSampleRate) {
+      return buffer;
+    }
+    
+    const sampleRateRatio = originalSampleRate / targetSampleRate;
+    const newLength = Math.round(buffer.length / sampleRateRatio);
+    const result = new Float32Array(newLength);
+    
+    let offsetResult = 0;
+    let offsetBuffer = 0;
+    
+    while (offsetResult < result.length) {
+      const nextOffsetBuffer = Math.round((offsetResult + 1) * sampleRateRatio);
+      
+      // Moyennage simple (box filter) pour éviter l'aliasing
+      let accum = 0;
+      let count = 0;
+      for (let i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i++) {
+        accum += buffer[i];
+        count++;
+      }
+      
+      if (count > 0) {
+        result[offsetResult] = accum / count;
+      } else {
+        result[offsetResult] = buffer[Math.min(offsetBuffer, buffer.length - 1)];
+      }
+      
+      offsetResult++;
+      offsetBuffer = nextOffsetBuffer;
+    }
+    
+    return result;
+  }
+
+  private mergeBuffers(channelData: Float32Array[], recordingLength: number): Float32Array {
+    const result = new Float32Array(recordingLength);
+    let offset = 0;
+    for (let i = 0; i < channelData.length; i++) {
+      result.set(channelData[i], offset);
+      offset += channelData[i].length;
+    }
+    return result;
+  }
+
+  private writeString(view: DataView, offset: number, string: string) {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  }
+
+  private floatTo16BitPCM(output: DataView, offset: number, input: Float32Array) {
+    for (let i = 0; i < input.length; i++, offset += 2) {
+      const s = Math.max(-1, Math.min(1, input[i]));
+      output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+    }
+  }
+
   // Requête API Speech-To-Text compatible OpenAI /v1/audio/transcriptions
   private async transcribeAudioWithAPI(audioBlob: Blob, lang: string): Promise<string> {
     if (!this.sttApiUrl) {
@@ -666,9 +846,8 @@ export class AudioService {
     }
 
     const formData = new FormData();
-    const ext = audioBlob.type.includes('wav') ? 'wav' : 'webm';
-    formData.append('file', audioBlob, `audio.${ext}`);
-    formData.append('model', this.sttModel || 'qwen3-asr');
+    formData.append('file', audioBlob, 'audio.wav');
+    formData.append('model', this.sttModel || 'Qwen/Qwen3-ASR-0.6B');
 
     if (lang) {
       const isoLang = lang.split('-')[0];
@@ -756,10 +935,7 @@ export class AudioService {
   // Arrêter l'écoute vocale
   public stopListening() {
     if (this.sttProvider === 'qwen3-asr') {
-      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-        this.mediaRecorder.stop();
-        this.isListeningActive = false;
-      }
+      this.stopListeningAPI();
     } else {
       if (this.recognition && this.isListeningActive) {
         this.recognition.stop();