React Native + ExecuTorch : IA on-device pour apps mobiles privées et performantes
React NativeReact NativeExecuTorchIA on-deviceWhisperPrivacyMobile

React Native + ExecuTorch : IA on-device pour apps mobiles privées et performantes

Découvrez comment intégrer l'IA directement dans vos apps React Native avec ExecuTorch. Transcription vocale, OCR, génération texte : tout fonctionne offline, sans API, en préservant la vie privée.

Les apps IA envahissent les stores, mais la majorité dépend d'APIs cloud coûteuses et envoie vos données à des serveurs distants. Et si vos modèles IA tournaient directement sur le téléphone, sans connexion, sans frais API, en garantissant la confidentialité totale ? C'est désormais possible grâce à l'IA on-device et au framework react-native-executorch. Ce guide complet explore comment construire des apps React Native avec transcription vocale, OCR et génération de texte, entièrement offline.

Qu'est-ce que l'IA on-device ?

L'IA on-device (ou edge AI) désigne l'exécution de modèles d'intelligence artificielle directement sur l'appareil de l'utilisateur, sans envoyer de données à un serveur. Contrairement aux approches cloud (OpenAI API, Google Cloud AI), tout le traitement se fait localement sur le CPU/GPU/NPU du smartphone.

Historique : de Siri cloud à l'IA locale

En 2011, Siri émerge comme l'un des premiers assistants IA mobiles, mais totalement dépendant du cloud. En 2014, "Hey Siri" introduit la première feature on-device (détection du mot-clé). Le tournant arrive en 2017 avec l'A11 Bionic (iPhone X) et son Neural Engine : 600 milliards d'opérations/seconde dédiées à l'IA.

Aujourd'hui, l'A18 Pro (iPhone 16 Pro) atteint 35 trillions d'opérations/seconde, permettant de faire tourner des LLMs, de la génération d'images et de la reconnaissance vocale en temps réel, entièrement offline.

Avantages de l'IA on-device

Avantage Description Impact
Privacy by design Les données ne quittent jamais l'appareil RGPD compliant, zero data leak
Coût zéro Pas de frais API récurrents Économie de centaines €/mois
Offline-first Fonctionne sans réseau Avion, tunnels, zones blanches
Latence ultra-faible Pas de round-trip réseau <100ms vs 500-2000ms cloud
Scalabilité infinie Chaque device = un serveur Pas de limitation d'infrastructure

Inconvénients et limites

  • Consommation ressources : batterie, chaleur, RAM (6-12GB max sur mobile)
  • Taille des modèles : LLMs 20GB+ impossibles à faire tourner localement
  • Disparité performance : flagship 50 tokens/s vs milieu de gamme 5 tokens/s
  • Distribution : apps volumineuses (modèles = 50MB-2GB) ou téléchargement post-install

Présentation de react-native-executorch

react-native-executorch est une bibliothèque open-source créée par Software Mansion qui permet aux développeurs React Native d'intégrer l'IA on-device sans expertise en machine learning. Elle s'appuie sur ExecuTorch, le moteur d'inférence de Meta utilisé dans Instagram et Facebook.

Architecture technique

ExecuTorch est le runtime d'inférence optimisé de Meta pour l'edge computing. Il offre :

  • Intégration PyTorch : export direct depuis l'écosystème PyTorch
  • Cross-platform : smartphones, smartwatches, AR/VR, IoT, microcontrôleurs
  • Backends optimisés :
    • CoreML (iOS) : accélération Neural Engine
    • Vulkan : GPU cross-platform
    • XNNPACK : CPU optimisé
    • QNN (Qualcomm) : accélération NPU Android

Flow de communication

React Native App
    ↓
react-native-executorch (hooks React)
    ↓
ExecuTorch Runtime (C++)
    ↓
Backend (CoreML / Vulkan / CPU)
    ↓
Hardware (NPU / GPU / CPU)

Cas d'usage : App de transcription vocale offline

Construisons une app de transcription vocale en temps réel avec le modèle Whisper d'OpenAI, tournant 100% on-device. Cette app permet de :

  • Enregistrer l'audio en temps réel via le micro
  • Transcrire la voix en texte instantanément
  • Fonctionner offline (avion, tunnel, etc.)
  • Garantir la confidentialité (audio jamais envoyé)

1. Installation des dépendances

# Créer un projet Expo
npx create-expo-app my-ai-app
cd my-ai-app

# Installer les dépendances
yarn add react-native-executorch
yarn add react-native-audio-api

Librairies utilisées :

  • react-native-executorch : bridge vers ExecuTorch, accès aux modèles IA
  • react-native-audio-api : moteur audio haute performance (Web Audio API spec)

2. Configuration des permissions

L'enregistrement audio nécessite des permissions explicites. Configurez-les dans app.json :

{
  "plugins": [
    [
      "react-native-audio-api",
      {
        "iosBackgroundMode": true,
        "iosMicrophonePermission": "Cette app nécessite l'accès au micro pour transcrire votre voix.",
        "androidPermissions": [
          "android.permission.MODIFY_AUDIO_SETTINGS",
          "android.permission.RECORD_AUDIO"
        ]
      }
    ]
  ]
}

Après modification, rebuilder le development build :

npx expo prebuild
npx expo run:ios  # ou run:android

3. Setup audio recorder

import { useState, useEffect } from 'react';
import { AudioManager, AudioRecorder } from 'react-native-audio-api';

function App() {
  const [recorder] = useState(
    () => new AudioRecorder({
      sampleRate: 16000,              // Whisper native sample rate
      bufferLengthInSamples: 1600,    // 100ms chunks (real-time)
    })
  );

  useEffect(() => {
    // Config session audio iOS (optimisée pour la voix)
    AudioManager.setAudioSessionOptions({
      iosCategory: 'playAndRecord',
      iosMode: 'spokenAudio',        // Optimisation parole
      iosOptions: ['allowBluetooth', 'defaultToSpeaker'],
    });

    // Demander permissions runtime
    AudioManager.requestRecordingPermissions();
  }, []);
}

Détails configuration :

  • 16kHz sample rate : format natif Whisper, réduit overhead
  • Buffer 100ms : compromis entre latence et qualité
  • SpokenAudio mode : iOS applique noise suppression automatique

4. Charger le modèle Whisper

Utilisons le hook useSpeechToText avec Whisper Tiny English (modèle équilibré pour mobile) :

import { useSpeechToText, WHISPER_TINY_EN } from 'react-native-executorch';

const model = useSpeechToText({
  model: WHISPER_TINY_EN,
});

// Afficher progression téléchargement
return (
  <View>
    {!model.isReady ? (
      <>
        <Text>Téléchargement du modèle Whisper...</Text>
        <Text>{Math.round(model.downloadProgress * 100)}%</Text>
      </>
    ) : (
      <Text>Modèle prêt !</Text>
    )}
  </View>
);

Architecture du modèle Whisper Tiny :

Composant Taille Fonction
Encoder ~33MB Traite les features audio (mel-spectrogram)
Decoder ~118MB Génère les tokens texte
Tokenizer ~3MB Encode/décode le texte
Total ~150MB Téléchargé une seule fois, caché localement

Alternatives :

  • WHISPER_TINY : multilingue (100+ langues), 150MB
  • WHISPER_BASE_EN : meilleure précision, 290MB, plus lent
  • WHISPER_SMALL_EN : haute précision, 970MB, réservé flagship devices

5. Implémenter la transcription streaming

Whisper a une limite de 30 secondes d'audio. Pour des enregistrements continus, on utilise le streaming avec chunks overlapping (adapté de whisper-streaming) :

const handleStartRecording = async () => {
  // Config traitement buffers audio
  recorder.onAudioReady(async ({ buffer }) => {
    // Convert Float32Array → Array
    const bufferArray = Array.from(buffer.getChannelData(0));
    model.streamInsert(bufferArray);  // Envoie au modèle
  });

  // Démarre enregistrement
  recorder.start();

  try {
    // Démarre transcription streaming
    await model.stream();
  } catch (error) {
    console.error('Erreur transcription:', error);
    handleStopRecording();
  }
};

const handleStopRecording = () => {
  recorder.stop();
  model.streamStop();  // Signal fin du stream
};

Comment fonctionne le streaming :

  1. Audio capturé en chunks de 100ms
  2. Chunks traités avec contexte overlapping (évite coupures mid-sentence)
  3. Modèle maintient continuité conversationnelle
  4. Résultats mis à jour en temps réel

6. Afficher les résultats

Le modèle fournit 2 types de sorties :

  • committedTranscription : texte finalisé (en noir, bold)
  • nonCommittedTranscription : texte en cours de traitement (en gris, italique)
return (
  <View style={styles.container}>
    {!model.isReady ? (
      <>
        <Text>Chargement modèle...</Text>
        <Text>{Math.round(model.downloadProgress * 100)}%</Text>
      </>
    ) : (
      <>
        <Text style={{ color: 'black', fontWeight: 'bold' }}>
          {model.committedTranscription}{' '}
          <Text style={{ color: 'gray', fontStyle: 'italic' }}>
            {model.nonCommittedTranscription}
          </Text>
        </Text>

        <Button
          onPress={model.isGenerating ? handleStopRecording : handleStartRecording}
          title={model.isGenerating ? "Arrêter" : "Démarrer"}
          disabled={!model.isReady}
        />
      </>
    )}
  </View>
);

Résultat final

Vous avez désormais une app de transcription vocale 100% offline, privée et gratuite ! Tapez "Démarrer", parlez, et voyez la transcription apparaître en temps réel.

Au-delà de Whisper : autres modèles disponibles

react-native-executorch supporte de nombreux modèles pré-exportés sur Hugging Face. Pour approfondir le traitement du langage naturel, consultez notre guide complet NLP.

Natural Language Processing

Modèle Taille Cas d'usage
Llama 3.2 (1B/3B) 1-3GB Chatbot, Q&A, génération texte
Phi-3 Mini 2.3GB Assistant conversationnel léger
Gemma 2B 2GB Génération texte, summarization

Computer Vision

Modèle Taille Cas d'usage
MobileNetV3 17MB Classification images (1000 classes)
EfficientNet-Lite 25MB Détection objets temps réel
YOLOv8 Nano 12MB Object detection ultra-rapide

Exemple : Chatbot local avec Llama 3.2

import { useLanguageModel, LLAMA_3_2_1B } from 'react-native-executorch';

const model = useLanguageModel({
  model: LLAMA_3_2_1B,
  maxTokens: 512,
});

const handleSendMessage = async (message) => {
  const response = await model.generate({
    prompt: message,
    temperature: 0.7,
  });

  console.log(response.text);  // Réponse du chatbot
};

Optimisation et best practices

1. Quantization

Réduisez la taille des modèles de 50-75% avec la quantization (réduction précision des poids) :

Format Précision Gain taille Perte précision
FP32 (original) 32-bit float - -
FP16 16-bit float -50% <1%
INT8 8-bit int -75% 1-3%
INT4 4-bit int -87.5% 3-5%

2. Architecture hybride

Combinez on-device et cloud intelligemment :

  • On-device : tâches fréquentes, simples, sensibles (transcription, OCR, classification)
  • Cloud : tâches complexes, rares, non-sensibles (génération images haute qualité, traduction 100+ langues)

3. Lazy loading

Ne téléchargez les modèles que lorsque nécessaire :

// ❌ Bad: charge tous les modèles au démarrage
const whisper = useSpeechToText({ model: WHISPER_TINY_EN });
const llama = useLanguageModel({ model: LLAMA_3_2_1B });

// ✅ Good: lazy load
const [activeModel, setActiveModel] = useState(null);

const loadWhisper = () => {
  setActiveModel('whisper');
};

4. Monitoring performance

const model = useSpeechToText({
  model: WHISPER_TINY_EN,
  onPerformanceMetrics: (metrics) => {
    console.log('Latence:', metrics.latency, 'ms');
    console.log('Throughput:', metrics.tokensPerSecond, 'tokens/s');
    console.log('Mémoire:', metrics.memoryUsage, 'MB');
  },
});

Quand choisir on-device vs cloud ?

Choisissez on-device si :

  • ✅ Privacy critique (santé, finance, données personnelles)
  • ✅ Offline requis (avion, zones blanches, IoT déconnecté)
  • ✅ Latence <100ms (real-time, jeux, AR/VR)
  • ✅ Volume élevé (économie API sur millions d'utilisateurs)
  • ✅ Modèles légers (<2GB, précision acceptable)

Choisissez cloud si :

  • ❌ Modèles massifs (GPT-4, DALL-E, Stable Diffusion XL)
  • ❌ MAJ fréquentes (nouveaux modèles chaque semaine)
  • ❌ Hardware hétérogène (Android low-end = perf médiocre)
  • ❌ Compliance (logs, audit trail, modération centralisée)

Écosystème react-native-executorch

La bibliothèque devient la fondation d'un écosystème complet, permettant de créer des agents IA autonomes entièrement on-device.

react-native-rag

react-native-rag ajoute le Retrieval-Augmented Generation : interrogez des documents locaux avec un LLM on-device. Cette approche combine les techniques de NLP avancé avec la confidentialité de l'IA locale.

import { useRAG } from 'react-native-rag';

const rag = useRAG({
  model: LLAMA_3_2_1B,
  documents: ['./docs/manual.pdf', './docs/faq.md'],
});

const answer = await rag.query('Comment réinitialiser mon mot de passe ?');

Private Mind (app showcase)

Private Mind est une alternative à ChatGPT 100% on-device, open-source, disponible sur App Store et Google Play.

Roadmap et futur de l'IA on-device

Évolutions hardware

  • NPUs nouvelle génération : 100+ TOPS (trillions ops/s) d'ici 2026
  • RAM étendue : 16-24GB sur smartphones flagship
  • Stockage UFS 4.0 : téléchargement modèles 5x plus rapide

Évolutions modèles

  • LLMs ultra-compacts : 500MB avec qualité GPT-3.5
  • Multimodal : vision + texte + audio dans un seul modèle
  • Continuous learning : modèles qui apprennent de l'utilisateur localement

Évolutions react-native-executorch

  • Hot-reload modèles : MAJ modèles sans rebuild app
  • Model marketplace : catalogue 100+ modèles pré-optimisés
  • Collaborative inference : distribuer calcul sur plusieurs devices (P2P)

FAQ

react-native-executorch fonctionne sur Expo ?

Oui, mais nécessite un development build (pas Expo Go). Les modules natifs ExecuTorch ne sont pas supportés dans Expo Go.

Quelle est la consommation batterie ?

Variable selon modèle et usage. Whisper Tiny en streaming continu : ~5-10% batterie/heure sur iPhone 14 Pro. LLMs ~15-25%/heure.

Puis-je fine-tuner les modèles ?

Non directement sur mobile. Fine-tunez avec PyTorch sur serveur, puis exportez vers ExecuTorch avec torch.export().

Compatibilité Android ?

Oui, totale. react-native-executorch supporte iOS (CoreML) et Android (Vulkan, QNN). Performance optimale sur devices avec NPU (Snapdragon 8 Gen 2+).

Quelle version React Native minimum ?

React Native 0.74+ recommandé. ExecuTorch nécessite New Architecture (TurboModules, Fabric).

Ressources et liens utiles

VOID, agence digitale au Maroc, accompagne les entreprises dans le développement d'apps React Native avec IA on-device. Nos experts mobile vous aident à intégrer ExecuTorch, optimiser les performances et construire des expériences IA privées et performantes. Contactez-nous pour un audit technique gratuit.

Besoin d'accompagnement ?

Notre équipe d'experts peut vous aider à mettre en œuvre ces recommandations.

Contactez-nous

À lire également

Comment améliorer vos Core Web Vitals au MarocPerformance Web

Comment améliorer vos Core Web Vitals au Maroc

Guide complet des bonnes pratiques de performance web pour des sites plus rapides et mieux positionnés sur Google.

Lire l'article
React 19.2: ViewTransition et Fragment ref arrivent en CanaryReact

React 19.2: ViewTransition et Fragment ref arrivent en Canary

React 19.2 introduit ViewTransition pour animer les changements d'UI et Fragment ref pour composer des comportements impératifs. Focus sur les cas d'usage, limites actuelles et adoption progressive.

Lire l'article
React Compiler 1.0 et React Foundation sous l'égide de la Linux FoundationReact

React Compiler 1.0 et React Foundation sous l'égide de la Linux Foundation

Le React Compiler 1.0 est prêt pour la production et s'accompagne d'un plugin ESLint. En parallèle, la React Foundation devient le nouveau foyer de React, React Native et JSX au sein de la Linux Foundation.

Lire l'article