Как создать приложение для перевода голоса с AI, используя Flutter и Back4App

введение в этом учебном пособии вы научитесь создавать приложение ai voice translator, используя flutter в качестве фронтенд фреймворка и back4app в качестве бэкенд сервиса приложение позволит пользователям переводить речь, текст и изображения на несколько языков оно будет включать функции перевода на основе ии, оптического распознавания символов (ocr) и распознавания речи к концу этого учебного пособия вы создадите приложение, которое сможет обрабатывать переводы в реальном времени и хранить историю на back4app для будущего использования предварительные требования чтобы завершить это учебное пособие, вам потребуется аккаунт back4app зарегистрируйтесь для получения бесплатного аккаунта на back4app https //www back4app com/ flutter sdk установленный на вашем локальном компьютере следуйте официальному руководству по установке flutter https //flutter dev/docs/get started/install базовые знания о dart и flutter если вы новичок в flutter, ознакомьтесь с документацией flutter https //flutter dev/docs перед тем, как продолжить аккаунт у поставщика api перевода , такого как google cloud translation или deepl знание rest api и асинхронного программирования в dart шаг 1 — настройка вашего бэкенда back4app на этом этапе вы настроите приложение back4app, определите модели данных и сконфигурируете серверную часть для хранения истории переводов, языков и данных пользователей 1 1 создайте новое приложение на back4app войдите в ваш панель управления back4app https //dashboard back4app com/ нажмите на "создать новое приложение" введите имя приложения (например, "ai voice translator") и выберите ваш значок приложения выберите местоположение вашего сервера, если будет предложено нажмите "создать" 1 2 получите ключи приложения перейдите в настройки приложения > безопасность и ключи в панели управления вашего приложения запишите идентификатор приложения и ключ клиента они понадобятся для настройки приложения flutter 1 3 определите ваши модели данных мы создадим следующие классы в back4app пользователь (по умолчанию) перевод язык фраза словарнаязапись 1 3 1 создать класс перевода перейдите к база данных > браузер нажмите "создать класс" выберите "пользовательский" и назовите его перевод нажмите "создать класс" добавьте следующие столбцы к перевод пользователь (указатель< пользователь>) указывает на объект пользователь sourcelanguage (строка) код исходного языка targetlanguage (строка) код целевого языка sourcetext (строка) исходный текст для перевода translatedtext (строка) переведенный текст translationtype (строка) тип перевода ( голос , текст , изображение ) timestamp (датавремя) 1 3 2 создайте класс язык повторите шаги, чтобы создать новый класс с именем язык добавьте следующие столбцы к язык имя (строка) имя языка (например, "английский") код (строка) iso код языка (например, "en") flagiconurl (строка) url изображения флага, представляющего язык 1 3 3 создайте класс фраза создайте класс с именем фраза добавьте следующие столбцы к фраза категория (строка) категория фразы (например, "приветствия") языкисходник (строка) код исходного языка языкцель (строка) код целевого языка исходныйтекст (строка) исходная фраза переведенныйтекст (строка) переведенная фраза 1 3 4 создайте класс dictionaryentry создайте класс с именем dictionaryentry добавьте следующие столбцы к dictionaryentry слово (строка) определяемое слово язык (строка) язык слова определение (строка) определение слова примеры (массив) примеры предложений с использованием слова 1 4 установите разрешения на уровне класса убедитесь, что только аутентифицированные пользователи могут получить доступ к своим данным для каждого класса перейдите в безопасность > разрешения на уровне класса (clp) установите clp, чтобы разрешить доступ на чтение/запись только аутентифицированным пользователям шаг 2 — инициализация вашего проекта flutter на этом этапе вы настроите проект flutter и сконфигурируете его для подключения к back4app 2 1 создайте новый проект flutter откройте терминал и выполните flutter create ai voice translator перейдите в каталог проекта cd ai voice translator 2 2 добавьте необходимые зависимости откройте pubspec yaml и добавьте следующие зависимости 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 запустите flutter pub get для установки пакетов 2 3 инициализируйте parse в вашем приложении flutter создайте новый файл 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'; замените 'your application id' и 'your client key' на ключи из back4app в lib/main dart , инициализируйте 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()); } создайте 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(), ); } } шаг 3 — реализация перевода текста первой функцией для реализации является базовый перевод текста 3 1 настройка службы перевода создайте lib/services/translation service dart для управления взаимодействиями с api перевода (google cloud translation api или 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 реализация языковой модели создайте lib/models/language dart для представления поддерживаемых языков // 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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, }); }// 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 создание экрана перевода текста создайте lib/screens/text translation screen dart для обработки ввода текста и перевода // 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), ], ), ), ); } } шаг 4 — реализация голосового перевода на этом этапе вы добавите голосовой перевод, интегрируя speech to text и text to speech функции 4 1 настройка распознавания речи создайте lib/services/speech recognition service dart с использованием пакета speech to text // 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 добавить синтез речи (tts) создайте lib/services/tts service dart с использованием пакета flutter tts // 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 создать экран перевода голоса создайте lib/screens/voice translation screen dart для обработки голосового перевода // 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')), ], ), ), ); } } шаг 5 — реализация перевода изображений (ocr) 5 1 настройка службы ocr создайте lib/services/ocr service dart с использованием пакета google ml kit // 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 создание экрана перевода изображений создайте lib/screens/image translation screen dart для обработки ввода изображения и 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')), ], ), ), ); } } шаг 6 — история переводов и фразеологический словарь на этом шаге вы реализуете сохранение истории переводов и управление фразеологическим словарем 6 1 сохранение истории переводов обновите lib/services/translation service dart для сохранения истории переводов в 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 реализовать фразеологический словарь создайте lib/screens/phrase book screen dart для управления общими фразами // 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}'), ); }, ); }, ), ); } } заключение следуя этому руководству, вы создали приложение ai voice translator app с использованием flutter и back4app вы реализовали базовый и продвинутый перевод текста перевод голосом с использованием распознавания речи и синтеза речи перевод изображений в текст с использованием ocr управление историей переводов и разговорник для общих выражений следующие шаги улучшить ui/ux улучшите интерфейс приложения для более плавного пользовательского опыта улучшить обработку ошибок добавьте обработку ошибок и механизмы резервного копирования для сбоев api реализовать оффлайн режим кэшируйте общие переводы, фразы и историю для доступа в оффлайн развернуть приложение подготовьте приложение к развертыванию на платформах ios и android