VoiceRecognitionStore

Documentation de l'API du store VoiceRecognitionStore pour contrôler l'affichage de Mini-Zoe.

Introduction

Le VoiceRecognitionStore est un store global MobX qui permet de contrôler l'affichage, le comportement et la reconnaissance vocale de Mini-Zoe depuis n'importe où dans votre application.

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

Méthodes d'initialisation

initialize(vectorizer, routeMapping, modelPath)

Initialise le store avec les fichiers nécessaires pour la reconnaissance vocale.

Paramètres :

• vectorizer (Object) - Dictionnaire de vectorisation (vectorizer.json)
• routeMapping (Object) - Mapping des indices vers les routes (routes.json)
• modelPath (any) - Chemin vers le modèle TFLite

Retour : void

Exemple :

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

VoiceRecognitionStore.initialize(
  vectorizerData,
  routeIndexToName,
  modelPath
);

Requis

Cette méthode DOIT être appelée avant d'utiliser la reconnaissance vocale.

---

setNavigation(navigation)

Configure l'instance de navigation React Navigation.

Paramètres :

• navigation (NavigationProp) - Instance de navigation React Navigation

Retour : void

Exemple :

import { useNavigation } from '@react-navigation/native';

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

  useEffect(() => {
    VoiceRecognitionStore.setNavigation(navigation);
  }, [navigation]);
}

---

destroy()

Nettoie toutes les ressources du store (modèle TFLite, listeners, etc.).

Paramètres : aucun

Retour : void

Exemple :

useEffect(() => {
  // Initialisation...

  return () => {
    VoiceRecognitionStore.destroy();
  };
}, []);

Important

Appelez toujours destroy() lors du démontage du composant pour libérer les ressources.

---

Méthodes de reconnaissance vocale

startRecognition()

Démarre la reconnaissance vocale.

Paramètres : aucun

Retour : Promise<void>

Exemple :

const handleStart = async () => {
  try {
    await VoiceRecognitionStore.startRecognition();
    console.log('Reconnaissance démarrée');
  } catch (error) {
    console.error('Erreur:', error);
  }
};

astuce

La reconnaissance vocale démarre automatiquement si vous appelez cette méthode après l'initialisation.

---

stopRecognition()

Arrête la reconnaissance vocale.

Paramètres : aucun

Retour : Promise<void>

Exemple :

const handleStop = async () => {
  await VoiceRecognitionStore.stopRecognition();
  console.log('Reconnaissance arrêtée');
};

---

Méthodes d'affichage

navigate(pageName)

Affiche Mini-Zoe avec un message de navigation vers une page.

Paramètres :

• pageName (string) - Le nom de la page vers laquelle l'utilisateur navigue

Retour : void

Exemple :

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

function goToProfile() {
  navigation.navigate('Profile');
  VoiceRecognitionStore.navigate('Profil');
}

Message affiché : "Navigation vers [pageName]"

Utilisation

Utilisez cette méthode lors de chaque changement de page pour guider l'utilisateur.

---

show(message)

Affiche Mini-Zoe avec un message personnalisé.

Paramètres :

• message (string) - Le message à afficher et à vocaliser

Retour : void

Exemple :

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

function handleSave() {
  saveData();
  VoiceRecognitionStore.show('Données sauvegardées avec succès !');
}

Utilisation

Utilisez cette méthode pour donner des feedbacks d'actions, des confirmations ou des messages d'erreur.

---

hide()

Masque immédiatement Mini-Zoe.

Paramètres : aucun

Retour : void

Exemple :

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

function closeAssistant() {
  VoiceRecognitionStore.hide();
}

info

En général, vous n'avez pas besoin d'appeler cette méthode car Mini-Zoe se masque automatiquement après la durée définie dans autoHideDuration.

Propriétés observables (MobX)

Le store expose plusieurs propriétés observables que vous pouvez utiliser avec observer de MobX :

Propriété	Type	Description
isRecognizing	boolean	État de la reconnaissance vocale (actif/inactif)
recognizedText	string	Dernier texte reconnu par la reconnaissance vocale
showMiniZoe	boolean	Visibilité actuelle de Mini-Zoe
currentRoute	string	Nom de la route actuellement affichée
message	string	Message actuellement affiché par Mini-Zoe

Exemple d'utilisation avec observer :

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

const VoiceStatus = observer(() => {
  return (
    <View>
      <Text>État: {VoiceRecognitionStore.isRecognizing ? 'Actif' : 'Inactif'}</Text>
      <Text>Texte reconnu: {VoiceRecognitionStore.recognizedText}</Text>
      <Text>Route: {VoiceRecognitionStore.currentRoute}</Text>
      <Text>Message: {VoiceRecognitionStore.message}</Text>
    </View>
  );
});

Exemples d'utilisation

Configuration complète

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

// Imports 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(() => {
    // 1. Initialiser
    VoiceRecognitionStore.initialize(
      vectorizerData,
      routeIndexToName,
      modelPath
    );

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

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

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

  return <YourApp />;
}

Navigation avec React Navigation

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => {
        const route = state?.routes[state.index];
        if (route?.name) {
          VoiceRecognitionStore.navigate(route.name);
        }
      }}
    >
      <Stack.Navigator>
        <Stack.Screen name="Accueil" component={HomeScreen} />
        <Stack.Screen name="Profil" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Feedback d'actions utilisateur

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

function SettingsScreen() {
  const handleSaveSettings = async () => {
    try {
      await saveSettings();
      VoiceRecognitionStore.show('Paramètres sauvegardés !');
    } catch (error) {
      VoiceRecognitionStore.show('Erreur lors de la sauvegarde');
    }
  };

  const handleResetSettings = () => {
    resetToDefaults();
    VoiceRecognitionStore.show('Paramètres réinitialisés');
  };

  return (
    <View>
      <Button title="Sauvegarder" onPress={handleSaveSettings} />
      <Button title="Réinitialiser" onPress={handleResetSettings} />
    </View>
  );
}

Messages de bienvenue

import React, { useEffect } from 'react';
import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

function HomeScreen() {
  useEffect(() => {
    // Afficher un message de bienvenue au chargement
    VoiceRecognitionStore.show('Bienvenue sur l\'application !');
  }, []);

  return (
    <View>
      {/* Votre contenu */}
    </View>
  );
}

Formulaires

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

function LoginForm() {
  const handleSubmit = async (credentials) => {
    if (!credentials.email || !credentials.password) {
      VoiceRecognitionStore.show('Veuillez remplir tous les champs');
      return;
    }

    try {
      await login(credentials);
      VoiceRecognitionStore.show('Connexion réussie !');
    } catch (error) {
      VoiceRecognitionStore.show('Identifiants incorrects');
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      {/* Champs du formulaire */}
    </Form>
  );
}

Actions asynchrones

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

async function downloadFile(fileId) {
  VoiceRecognitionStore.show('Téléchargement en cours...');

  try {
    await download(fileId);
    VoiceRecognitionStore.show('Téléchargement terminé !');
  } catch (error) {
    VoiceRecognitionStore.show('Échec du téléchargement');
  }
}

Résumé des méthodes

Méthode	Description	Retour
initialize(vectorizer, routes, model)	Initialise le store avec les assets	void
setNavigation(navigation)	Configure la navigation	void
destroy()	Nettoie les ressources	void
startRecognition()	Démarre la reconnaissance vocale	Promise<void>
stopRecognition()	Arrête la reconnaissance vocale	Promise<void>
navigate(pageName)	Affiche Mini-Zoe avec message de navigation	void
show(message)	Affiche Mini-Zoe avec message personnalisé	void
hide()	Masque Mini-Zoe immédiatement	void

Bonnes pratiques

✅ À faire

• Toujours appeler initialize() avant d'utiliser la reconnaissance vocale
• Utiliser destroy() lors du démontage pour libérer les ressources
• Utilisez navigate() pour les changements de page
• Utilisez show() pour les confirmations et les erreurs
• Gardez les messages courts et informatifs (< 50 caractères)
• Testez avec le Text-to-Speech activé pour vérifier la clarté
• Gérer les erreurs avec try/catch pour les méthodes async

❌ À éviter

• Afficher plusieurs messages trop rapidement
• Utiliser des messages trop longs
• Appeler show() dans une boucle
• Oublier de gérer les cas d'erreur
• Ne pas appeler destroy() lors du démontage
• Démarrer la reconnaissance sans avoir initialisé le store

TypeScript

Le store est entièrement typé pour TypeScript :

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

// Les paramètres sont typés
VoiceRecognitionStore.navigate('Profile'); // ✅
VoiceRecognitionStore.show('Message');     // ✅
VoiceRecognitionStore.hide();              // ✅

// Erreur TypeScript si mauvais type
VoiceRecognitionStore.navigate(123);       // ❌ Error
VoiceRecognitionStore.show();              // ❌ Error

Prochaines étapes

• Reconnaissance vocale - Guide complet de la reconnaissance vocale
• Référence des props - Configuration du composant MiniZoe
• Guide d'utilisation - Exemples pratiques
• Text-to-Speech - Configuration TTS