如何使用 Flutter 和 Back4App 构建 AI 语音翻译应用程序

介绍 在本教程中，您将学习如何使用 flutter 作为前端框架和 back4app 作为后端服务构建一个 ai 语音翻译应用。该应用将允许用户在多种语言之间翻译语音、文本和图像。它将具有 ai 驱动的翻译、光学字符识别 (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 apis 和 dart 中的异步编程 。 步骤 1 — 设置您的 back4app 后端 在此步骤中，您将设置一个 back4app 应用程序，定义数据模型，并配置后端以存储翻译历史、语言和用户数据。 1 1 在 back4app 上创建新应用程序 登录到您的 back4app 控制面板 https //dashboard back4app com/ 点击 "创建新应用" 输入一个 应用名称 （例如，"ai 语音翻译器"）并选择您的 应用图标 如果提示，请选择您的服务器位置。 点击 "创建" 1 2 获取应用程序密钥 导航到 应用设置 > 安全与密钥 在您应用的控制面板中 记下 应用程序 id 和 客户端密钥 。这些将在 flutter 应用配置中需要 1 3 定义您的数据模型 我们将在 back4app 中创建以下类： 用户 (默认) 翻译 语言 短语 字典条目 1 3 1 创建翻译类 前往 数据库 > 浏览器 点击 "创建一个类" 选择 "自定义" 并命名为 翻译 点击 "创建类" 向 翻译 用户 (pointer< user>) 指向 用户 对象 源语言 (string) 源语言代码 目标语言 (string) 目标语言代码 源文本 (string) 要翻译的原始文本 翻译文本 (string) 翻译后的文本 翻译类型 (string) 翻译类型 ( 语音 , 文本 , 图像 ) 时间戳 (datetime) 1 3 2 创建语言类 重复步骤以创建一个名为 language 的新类。 向 language 名称 (字符串) 语言的名称（例如，"英语"）。 代码 (字符串) 语言的iso代码（例如，"en"）。 国旗图标url (字符串) 代表该语言的国旗图像的url。 1 3 3 创建短语类 创建一个名为 phrase 的类。 添加以下列到 短语 类别 (字符串) 短语的类别（例如，"问候"）。 源语言 (字符串) 源语言代码。 目标语言 (字符串) 目标语言代码。 源文本 (字符串) 原始短语。 翻译文本 (字符串) 翻译后的短语。 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 在您的 flutter 应用中初始化 parse 创建一个新文件 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'; 用 back4app 的密钥替换 'your application id' 和 'your client key' 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 创建文本翻译屏幕 创建 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 — 实现语音翻译 在此步骤中，您将通过集成 语音转文本 和 文本转语音 功能来添加语音翻译。 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语音翻译应用程序 ，使用 flutter 和 back4app 您实现了 基本和高级文本翻译。 语音到语音翻译，使用 语音识别 和 文本转语音 图像到文本翻译，使用 ocr 翻译历史管理和常用表达的短语书。 下一步 增强ui/ux 改进应用程序的界面，以提供更流畅的用户体验。 改进错误处理 添加错误处理和api故障的后备机制。 实现离线模式 缓存常见翻译、短语和历史记录以供离线访问。 部署应用程序 准备将应用程序部署到ios和android平台。