Reconnaissance vocale

Mini-Zoe intègre un système de reconnaissance vocale avancé avec machine learning pour comprendre les commandes de navigation de vos utilisateurs.

Fonctionnement

La reconnaissance vocale de Mini-Zoe fonctionne en 4 étapes :

1. Capture audio - Via @react-native-voice/voice
2. Transcription - Conversion de la voix en texte
3. Vectorisation - Transformation du texte en vecteur numérique
4. Prédiction - Utilisation d'un modèle TensorFlow Lite pour prédire la route de destination

Fichiers requis

1. vectorizer.json

Dictionnaire qui mappe chaque mot à un index numérique pour la vectorisation.

Structure :

{
  "aller": 0,
  "vers": 1,
  "naviguer": 2,
  "profil": 3,
  "accueil": 4,
  "paramètres": 5,
  "page": 6,
  "ouvrir": 7
}

Comment le créer :

1. Listez tous les mots que vos utilisateurs pourraient utiliser
2. Incluez les variantes et synonymes
3. Assignez un index unique à chaque mot
4. Plus le vocabulaire est riche, meilleure sera la reconnaissance

2. routes.json

Mapping entre les indices de prédiction du modèle et les noms de routes React Navigation.

Structure :

{
  "0": "Home",
  "1": "Profile",
  "2": "Settings",
  "3": "Notifications",
  "4": "Search"
}

Exemple avec navigation imbriquée :

{
  "0": "MainStack",
  "1": "ProfileStack",
  "2": "SettingsScreen",
  "3": "NotificationsTab"
}

3. model.tflite

Modèle TensorFlow Lite entraîné pour classifier les intentions de navigation.

Caractéristiques du modèle :

• Input : Vecteur de texte vectorisé
• Output : Probabilités pour chaque route possible
• Format : .tflite (TensorFlow Lite)

Entraînement du modèle

Le modèle doit être entraîné sur un dataset de commandes vocales associées à des routes. Vous pouvez utiliser TensorFlow/Keras pour créer et entraîner votre modèle, puis le convertir en .tflite.

Configuration

Initialisation complète

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

// Importer les assets
import vectorizerData from './assets/vectorizer.json';
import routeIndexToName from './assets/routes.json';
const modelPath = require('./assets/model.tflite');

function App() {
  const navigation = useNavigation();

  useEffect(() => {
    // Initialiser le store avec les assets
    VoiceRecognitionStore.initialize(
      vectorizerData,    // Dictionnaire de vectorisation
      routeIndexToName,  // Mapping routes
      modelPath          // Modèle TFLite
    );

    // Configurer la navigation
    VoiceRecognitionStore.setNavigation(navigation);

    // Démarrer la reconnaissance
    VoiceRecognitionStore.startRecognition();

    // Nettoyage
    return () => {
      VoiceRecognitionStore.stopRecognition();
      VoiceRecognitionStore.destroy();
    };
  }, [navigation]);

  return <YourApp />;
}

Contrôle de la reconnaissance

Démarrer la reconnaissance

await VoiceRecognitionStore.startRecognition();

Arrêter la reconnaissance

await VoiceRecognitionStore.stopRecognition();

Vérifier l'état

import { observer } from 'mobx-react';

const VoiceStatus = observer(() => {
  const isActive = VoiceRecognitionStore.isRecognizing;

  return (
    <Text>
      Reconnaissance vocale : {isActive ? 'Active' : 'Inactive'}
    </Text>
  );
});

Toggle manuel

import { Button } from 'react-native';

function VoiceToggle() {
  const toggleVoice = async () => {
    if (VoiceRecognitionStore.isRecognizing) {
      await VoiceRecognitionStore.stopRecognition();
    } else {
      await VoiceRecognitionStore.startRecognition();
    }
  };

  return (
    <Button
      title={VoiceRecognitionStore.isRecognizing ? 'Arrêter' : 'Démarrer'}
      onPress={toggleVoice}
    />
  );
}

Exemples de commandes vocales

Une fois configuré, vos utilisateurs peuvent dire :

• "Aller vers profil" → Navigation vers Profile
• "Ouvrir paramètres" → Navigation vers Settings
• "Naviguer vers accueil" → Navigation vers Home
• "Afficher notifications" → Navigation vers Notifications

Personnalisation

Les commandes dépendent entièrement de votre fichier vectorizer.json et de votre modèle entraîné. Vous pouvez les adapter à votre langue et à vos besoins.

Gestion du cycle de vie

Avec React Hooks

import { useEffect, useRef } from 'react';
import { AppState } from 'react-native';

function App() {
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
        // App revient au premier plan
        VoiceRecognitionStore.startRecognition();
      } else if (nextAppState.match(/inactive|background/)) {
        // App passe en arrière-plan
        VoiceRecognitionStore.stopRecognition();
      }

      appState.current = nextAppState;
    });

    return () => subscription.remove();
  }, []);
}

Démarrage conditionnel

import { useEffect, useState } from 'react';

function App() {
  const [voiceEnabled, setVoiceEnabled] = useState(true);

  useEffect(() => {
    if (voiceEnabled) {
      VoiceRecognitionStore.startRecognition();
    } else {
      VoiceRecognitionStore.stopRecognition();
    }
  }, [voiceEnabled]);

  return (
    <Switch
      value={voiceEnabled}
      onValueChange={setVoiceEnabled}
      title="Reconnaissance vocale"
    />
  );
}

Propriétés observables

Le store expose plusieurs propriétés MobX observables :

Propriété	Type	Description
isRecognizing	boolean	État de la reconnaissance vocale
recognizedText	string	Dernier texte reconnu
showMiniZoe	boolean	Visibilité de Mini-Zoe
currentRoute	string	Route actuellement affichée
message	string	Message affiché par Mini-Zoe

Exemple d'utilisation avec observer :

import { observer } from 'mobx-react';
import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

const VoiceDebug = observer(() => (
  <View>
    <Text>Actif: {VoiceRecognitionStore.isRecognizing ? 'Oui' : 'Non'}</Text>
    <Text>Texte: {VoiceRecognitionStore.recognizedText}</Text>
    <Text>Route: {VoiceRecognitionStore.currentRoute}</Text>
  </View>
));

Gestion des permissions

iOS

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const checkMicrophonePermission = async () => {
  const result = await check(PERMISSIONS.IOS.MICROPHONE);

  if (result === RESULTS.DENIED) {
    const requestResult = await request(PERMISSIONS.IOS.MICROPHONE);
    return requestResult === RESULTS.GRANTED;
  }

  return result === RESULTS.GRANTED;
};

Android

import { PermissionsAndroid, Platform } from 'react-native';

const requestMicrophonePermission = async () => {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: 'Permission Microphone',
        message: 'Cette application a besoin d\'accéder au microphone',
        buttonPositive: 'OK',
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true;
};

Bonnes pratiques

À faire

• Demander les permissions avant de démarrer la reconnaissance
• Arrêter la reconnaissance quand l'app passe en arrière-plan
• Nettoyer les ressources lors du démontage du composant
• Gérer les erreurs de reconnaissance vocale
• Donner un feedback visuel à l'utilisateur

À éviter

• Laisser la reconnaissance tourner en permanence (batterie)
• Ne pas gérer les cas d'erreur
• Oublier d'appeler destroy() lors du démontage
• Ne pas vérifier les permissions

Résolution de problèmes

La reconnaissance ne démarre pas

// Vérifier l'état et les logs
console.log('Is recognizing:', VoiceRecognitionStore.isRecognizing);

try {
  await VoiceRecognitionStore.startRecognition();
} catch (error) {
  console.error('Erreur démarrage:', error);
}

Les commandes ne sont pas reconnues

• Vérifiez que le vectorizer.json contient les mots utilisés
• Assurez-vous que le modèle est bien chargé
• Testez avec des commandes simples et claires
• Vérifiez que la langue du device correspond à celle du modèle

Performances dégradées

• Optimisez votre modèle TFLite (quantization)
• Limitez la taille du vocabulaire dans vectorizer.json
• Arrêtez la reconnaissance quand elle n'est pas nécessaire

Prochaines étapes

• Référence API Store - Documentation complète du VoiceRecognitionStore
• Text-to-Speech - Ajoutez la synthèse vocale
• Personnalisation - Personnalisez Mini-Zoe