Comment créer une application de traduction vocale IA en utilisant Flutter et Back4App

introduction dans ce tutoriel, vous apprendrez à créer une application de traduction vocale ai en utilisant flutter comme framework frontend et back4app comme service backend l'application permettra aux utilisateurs de traduire la parole, le texte et les images dans plusieurs langues elle comportera des fonctionnalités de traduction alimentées par l'ia, de reconnaissance optique de caractères (ocr) et de reconnaissance vocale à la fin de ce tutoriel, vous aurez construit une application capable de gérer des traductions en temps réel et de stocker l'historique sur back4app pour une utilisation future prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ flutter sdk installé sur votre machine locale suivez le guide d'installation de flutter https //flutter dev/docs/get started/install connaissances de base en dart et flutter si vous êtes nouveau sur flutter, consultez la documentation de flutter https //flutter dev/docs avant de continuer un compte avec un fournisseur d'api de traduction comme google cloud translation ou deepl familiarité avec les api rest et la programmation asynchrone en dart étape 1 — configuration de votre backend back4app dans cette étape, vous allez configurer une application back4app, définir les modèles de données et configurer le backend pour stocker l'historique des traductions, les langues et les données des utilisateurs 1 1 créer une nouvelle application sur back4app connectez vous à votre tableau de bord back4app https //dashboard back4app com/ cliquez sur "créer une nouvelle application" entrez un nom d'application (par exemple, "traducteur vocal ia") et sélectionnez votre icône d'application choisissez votre emplacement de serveur si cela vous est demandé cliquez sur "créer" 1 2 récupérer les clés de l'application accédez à paramètres de l'application > sécurité et clés dans le tableau de bord de votre application notez l' id de l'application et la clé client ceux ci seront nécessaires pour la configuration de l'application flutter 1 3 définir vos modèles de données nous allons créer les classes suivantes dans back4app utilisateur (par défaut) traduction langue phrase entréedudictionnaire 1 3 1 créer la classe de traduction allez à base de données > navigateur cliquez sur "créer une classe" choisissez "personnalisé" et nommez le traduction cliquez sur "créer une classe" ajoutez les colonnes suivantes à traduction utilisateur (pointer< user>) pointe vers l'objet utilisateur languesource (string) code de la langue source languecible (string) code de la langue cible textesource (string) le texte original à traduire textetraduit (string) le texte traduit typedetraduction (string) type de traduction ( voix , texte , image ) horodatage (datetime) 1 3 2 créer la classe langue répétez les étapes pour créer une nouvelle classe nommée langue ajoutez les colonnes suivantes à langue nom (string) le nom de la langue (par exemple, "anglais") code (string) code iso de la langue (par exemple, "en") flagiconurl (string) url de l'image du drapeau représentant la langue 1 3 3 créer la classe phrase créez une classe nommée phrase ajoutez les colonnes suivantes à phrase catégorie (chaîne) la catégorie de la phrase (par exemple, "salutations") languesource (chaîne) code de la langue source languecible (chaîne) code de la langue cible textesource (chaîne) la phrase originale textetraduit (chaîne) la phrase traduite 1 3 4 créer la classe dictionaryentry créer une classe nommée dictionaryentry ajoutez les colonnes suivantes à dictionaryentry mot (chaîne) le mot étant défini langue (chaîne) la langue du mot définition (chaîne) la définition du mot exemples (tableau) phrases d'exemple utilisant le mot 1 4 définir les autorisations au niveau de la classe assurez vous que seuls les utilisateurs authentifiés peuvent accéder à leurs propres données pour chaque classe, allez à sécurité > autorisations au niveau de la classe (clp) définissez le clp pour permettre l'accès en lecture/écriture uniquement aux utilisateurs authentifiés étape 2 — initialiser votre projet flutter dans cette étape, vous allez configurer un projet flutter et le configurer pour se connecter à back4app 2 1 créer un nouveau projet flutter ouvrez votre terminal et exécutez flutter create ai voice translator naviguez vers le répertoire du projet cd ai voice translator 2 2 ajouter les dépendances requises ouvrez pubspec yaml et ajoutez les dépendances suivantes dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter tts ^3 3 1 speech to text ^5 3 0 google ml kit ^0 7 3 provider ^6 0 2 http ^0 13 4 exécutez flutter pub get pour installer les paquets 2 3 initialiser parse dans votre application flutter créez un nouveau fichier lib/config/back4app config dart // lib/config/back4app config dart const string keyapplicationid = 'your application id'; const string keyclientkey = 'your client key'; const string keyparseserverurl = 'https //parseapi back4app com'; remplacez 'votre id application' et 'votre cle client' par les clés de back4app in lib/main dart , initialize parse // lib/main dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'config/back4app config dart'; import 'app dart'; void main() async { widgetsflutterbinding ensureinitialized(); await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } create lib/app dart // lib/app dart import 'package\ flutter/material dart'; import 'screens/home screen dart'; class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'ai voice translator', theme themedata(primaryswatch colors blue), home homescreen(), ); } } step 3 — implementing text translation the first feature to implement is basic text translation 3 1 configure translation service create lib/services/translation service dart to manage interactions with a translation api (google cloud translation api or deepl) // lib/services/translation service dart import 'dart\ convert'; import 'package\ http/http dart' as http; class translationservice { final string apikey = 'your translation api key'; final string apiurl = 'https //translation googleapis com/language/translate/v2'; future\<string> translatetext(string text, string sourcelang, string targetlang) async { final response = await http post( uri parse(apiurl), headers { 'content type' 'application/json', 'authorization' 'bearer $apikey', }, body jsonencode({ 'q' text, 'source' sourcelang, 'target' targetlang, 'format' 'text', }), ); if (response statuscode == 200) { final data = jsondecode(response body); return data\['data']\['translations']\[0]\['translatedtext']; } else { throw exception('translation failed'); } } } 3 2 implement language model create lib/models/language dart to represent supported languages // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } 3 3 créer l'écran de traduction de texte créer lib/screens/text translation screen dart pour gérer l'entrée de texte et la traduction // lib/screens/text translation screen dart import 'package\ flutter/material dart'; import ' /services/translation service dart'; import ' /models/language dart'; class texttranslationscreen extends statefulwidget { @override texttranslationscreenstate createstate() => texttranslationscreenstate(); } class texttranslationscreenstate extends state\<texttranslationscreen> { final translationservice translationservice = translationservice(); final texteditingcontroller textcontroller = texteditingcontroller(); string translatedtext = ''; language? sourcelanguage; language? targetlanguage; future\<void> translate() async { if (sourcelanguage != null && targetlanguage != null) { final translation = await translationservice translatetext( textcontroller text, sourcelanguage! code, targetlanguage! code, ); setstate(() { translatedtext = translation; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('text translation'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller textcontroller, decoration inputdecoration(labeltext 'enter text to translate'), ), sizedbox(height 10), // implement language selectors here elevatedbutton(onpressed translate, child text('translate')), sizedbox(height 20), text(translatedtext), ], ), ), ); } } étape 4 — mise en œuvre de la traduction vocale dans cette étape, vous ajouterez la traduction vocale en intégrant la reconnaissance vocale et la synthèse vocale fonctionnalités 4 1 configurer la reconnaissance vocale créer lib/services/speech recognition service dart en utilisant le speech to text paquet // lib/services/speech recognition service dart import 'package\ speech to text/speech to text dart' as stt; class speechrecognitionservice { final stt speechtotext speech = stt speechtotext(); future\<string?> listenforspeech() async { bool available = await speech initialize(); if (available) { await speech listen(); return await future delayed(duration(seconds 5), () { speech stop(); return speech lastrecognizedwords; }); } return null; } } 4 2 ajouter la synthèse vocale (tts) créer lib/services/tts service dart en utilisant le flutter tts paquet // lib/services/tts service dart import 'package\ flutter tts/flutter tts dart'; class ttsservice { final fluttertts fluttertts = fluttertts(); future\<void> speak(string text, string languagecode) async { await fluttertts setlanguage(languagecode); await fluttertts speak(text); } } 4 3 créer l'écran de traduction vocale créer lib/screens/voice translation screen dart pour gérer la traduction vocale // lib/screens/voice translation screen dart import 'package\ flutter/material dart'; import ' /services/speech recognition service dart'; import ' /services/translation service dart'; import ' /services/tts service dart'; class voicetranslationscreen extends statefulwidget { @override voicetranslationscreenstate createstate() => voicetranslationscreenstate(); } class voicetranslationscreenstate extends state\<voicetranslationscreen> { final speechrecognitionservice speechrecognitionservice = speechrecognitionservice(); final translationservice translationservice = translationservice(); final ttsservice ttsservice = ttsservice(); string? recognizedtext; string? translatedtext; future\<void> translatespeech() async { recognizedtext = await speechrecognitionservice listenforspeech(); if (recognizedtext != null) { translatedtext = await translationservice translatetext( recognizedtext!, 'en', // hardcoded source language (english) 'es', // hardcoded target language (spanish) ); setstate(() {}); ttsservice speak(translatedtext!, 'es'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('voice translation'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ if (recognizedtext != null) text('recognized $recognizedtext'), if (translatedtext != null) text('translated $translatedtext'), sizedbox(height 20), elevatedbutton(onpressed translatespeech, child text('start voice translation')), ], ), ), ); } } étape 5 — mise en œuvre de la traduction d'image (ocr) 5 1 configurer le service ocr créer lib/services/ocr service dart en utilisant le google ml kit paquet // lib/services/ocr service dart import 'package\ google ml kit/google ml kit dart'; class ocrservice { final textrecognizer = googlemlkit vision textrecognizer(); future\<string?> extracttextfromimage(string imagepath) async { final inputimage = inputimage fromfilepath(imagepath); final recognizedtext = await textrecognizer processimage(inputimage); return recognizedtext text; } } 5 2 créer l'écran de traduction d'image créer lib/screens/image translation screen dart pour gérer l'entrée d'image et l'ocr // lib/screens/image translation screen dart import 'package\ flutter/material dart'; import 'package\ image picker/image picker dart'; import ' /services/ocr service dart'; import ' /services/translation service dart'; class imagetranslationscreen extends statefulwidget { @override imagetranslationscreenstate createstate() => imagetranslationscreenstate(); } class imagetranslationscreenstate extends state\<imagetranslationscreen> { final ocrservice ocrservice = ocrservice(); final translationservice translationservice = translationservice(); string? extractedtext; string? translatedtext; future\<void> pickandtranslateimage() async { final picker = imagepicker(); final pickedfile = await picker getimage(source imagesource gallery); if (pickedfile != null) { extractedtext = await ocrservice extracttextfromimage(pickedfile path); if (extractedtext != null) { translatedtext = await translationservice translatetext(extractedtext!, 'en', 'es'); setstate(() {}); } } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('image translation'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ if (extractedtext != null) text('extracted $extractedtext'), if (translatedtext != null) text('translated $translatedtext'), sizedbox(height 20), elevatedbutton(onpressed pickandtranslateimage, child text('pick image for translation')), ], ), ), ); } } étape 6 — historique des traductions et livre de phrases dans cette étape, vous allez implémenter la sauvegarde de l'historique des traductions et la gestion d'un livre de phrases 6 1 sauvegarder l'historique des traductions mettre à jour lib/services/translation service dart pour enregistrer l'historique des traductions dans back4app import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/translation dart'; class translationservice { // existing translation logic future\<void> savetranslation(translation translation) async { final translationobject = parseobject('translation') set('user', parseuser currentuser) set('sourcelanguage', translation sourcelanguage) set('targetlanguage', translation targetlanguage) set('sourcetext', translation sourcetext) set('translatedtext', translation translatedtext) set('translationtype', translation type); await translationobject save(); } } 6 2 implémenter le carnet de phrases créer lib/screens/phrase book screen dart pour gérer les phrases courantes // lib/screens/phrase book screen dart import 'package\ flutter/material dart'; import ' /models/phrase dart'; import ' /services/phrase service dart'; class phrasebookscreen extends statelesswidget { final phraseservice phraseservice = phraseservice(); @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('phrase book'), ), body futurebuilder\<list\<phrase>>( future phraseservice fetchphrases(), builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no phrases found ')); } return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final phrase = snapshot data!\[index]; return listtile( title text('${phrase sourcetext} → ${phrase translatedtext}'), subtitle text('category ${phrase category}'), ); }, ); }, ), ); } } conclusion en suivant ce tutoriel, vous avez construit une application ai voice translator app riche en fonctionnalités avec flutter et back4app vous avez implémenté traduction de texte de base et avancée traduction voix à voix utilisant speech recognition et text to speech traduction image à texte utilisant ocr gestion de l'historique des traductions et un livre de phrases pour les expressions courantes prochaines étapes améliorer l'ui/ux améliorer l'interface de l'application pour une expérience utilisateur plus fluide améliorer la gestion des erreurs ajouter une gestion des erreurs et des mécanismes de secours pour les échecs d'api implémenter le mode hors ligne mettre en cache les traductions, phrases et historiques courants pour un accès hors ligne déployer l'application préparer l'application pour le déploiement sur les plateformes ios et android