В этом посте мы узнаем, как создать простое Android-приложение Language Translation на основе React Native с возможностями преобразования речи в текст и преобразования текста в речь на базе Google. API.
Установка зависимостей:
Перейдите в React Native Docs, выберите Быстрый запуск React Native CLI и выберите ОС для разработки и Целевую ОС -> Android, так как мы собираемся создать приложение для Android.
Следуйте документации по установке зависимостей и создайте новое приложение React Native. Используйте интерфейс командной строки для создания нового проекта React Native под названием «Translator»:
react-native init TranslatorВы должны увидеть созданную папку с именем Translator. Теперь откройте папку Translator в своем любимом редакторе кода и создайте файл с именем Translator.js. Нам нужно поле ввода для текста, который необходимо перевести, и еще один раздел вывода для отображения переведенного текста. Нам также нужно поле выбора, в котором перечислены различные языки для выбора для перевода. Давайте создадим файл json, назовем его languages.json.
Перейдите к файлу languages.json и скопируйте приведенный ниже код:
{
"auto": "Auto Detect",
"af": "Afrikaans",
"sq": "Albanian",
"am": "Amharic",
"ar": "Arabic",
"hy": "Armenian",
"az": "Azerbaijani",
"eu": "Basque",
"be": "Belarusian",
"bn": "Bengali",
"bs": "Bosnian",
"bg": "Bulgarian",
"ca": "Catalan",
"ceb": "Cebuano",
"ny": "Chichewa",
"zh-cn": "Chinese Simplified",
"zh-tw": "Chinese Traditional",
"co": "Corsican",
"hr": "Croatian",
"cs": "Czech",
"da": "Danish",
"nl": "Dutch",
"en": "English",
"eo": "Esperanto",
"et": "Estonian",
"tl": "Filipino",
"fi": "Finnish",
"fr": "French",
"fy": "Frisian",
"gl": "Galician",
"ka": "Georgian",
"de": "German",
"el": "Greek",
"gu": "Gujarati",
"ht": "Haitian Creole",
"ha": "Hausa",
"haw": "Hawaiian",
"iw": "Hebrew",
"hi": "Hindi",
"hmn": "Hmong",
"hu": "Hungarian",
"is": "Icelandic",
"ig": "Igbo",
"id": "Indonesian",
"ga": "Irish",
"it": "Italian",
"ja": "Japanese",
"jw": "Javanese",
"kn": "Kannada",
"kk": "Kazakh",
"km": "Khmer",
"ko": "Korean",
"ku": "Kurdish (Kurmanji)",
"ky": "Kyrgyz",
"lo": "Lao",
"la": "Latin",
"lv": "Latvian",
"lt": "Lithuanian",
"lb": "Luxembourgish",
"mk": "Macedonian",
"mg": "Malagasy",
"ms": "Malay",
"ml": "Malayalam",
"mt": "Maltese",
"mi": "Maori",
"mr": "Marathi",
"mn": "Mongolian",
"my": "Myanmar (Burmese)",
"ne": "Nepali",
"no": "Norwegian",
"ps": "Pashto",
"fa": "Persian",
"pl": "Polish",
"pt": "Portuguese",
"ma": "Punjabi",
"ro": "Romanian",
"ru": "Russian",
"sm": "Samoan",
"gd": "Scots Gaelic",
"sr": "Serbian",
"st": "Sesotho",
"sn": "Shona",
"sd": "Sindhi",
"si": "Sinhala",
"sk": "Slovak",
"sl": "Slovenian",
"so": "Somali",
"es": "Spanish",
"su": "Sundanese",
"sw": "Swahili",
"sv": "Swedish",
"tg": "Tajik",
"ta": "Tamil",
"te": "Telugu",
"th": "Thai",
"tr": "Turkish",
"uk": "Ukrainian",
"ur": "Urdu",
"uz": "Uzbek",
"vi": "Vietnamese",
"cy": "Welsh",
"xh": "Xhosa",
"yi": "Yiddish",
"yo": "Yoruba",
"zu": "Zulu"
}Translator.js(изменить файл), скопируйте приведенный ниже код:
import React, { Component } from 'react'; import { View, TextInput, StyleSheet, TouchableOpacity, TouchableHighlight, Text, Picker, Image } from 'react-native'; import Languages from './languages.json';export default class Translator extends Component {constructor(props) { super(props); this.state = { languageFrom: "", languageTo: "", languageCode: 'en', inputText: "", outputText: "", submit: false, }; }render() { return ( <View style = {styles.container}> <View style={styles.input}> <TextInput style={{flex:1, height: 80}} placeholder="Enter Text" underlineColorAndroid="transparent" onChangeText = {inputText => this.setState({inputText})} value={this.state.inputText} /> </View><Picker selectedValue={this.state.languageTo} onValueChange={ lang => this.setState({languageTo: lang, languageCode: lang})} > {Object.keys(Languages).map(key => ( <Picker.Item label={Languages[key]} value={key} /> ))} </Picker><View style = {styles.output}> {/* output text displays here.. */} </View> <TouchableOpacity style = {styles.submitButton} onPress = {this.handleTranslate} > <Text style = {styles.submitButtonText}> Submit </Text> </TouchableOpacity> </View> ) } }const styles = StyleSheet.create({ container: { paddingTop: 53 }, input: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: .5, borderColor: '#000', // height: 40, borderRadius: 5 , margin: 10 }, output: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: .5, borderColor: '#000', borderRadius: 5 , margin: 10, height: 80, }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, borderRadius: 5 , height: 40, }, submitButtonText:{ color: 'white' }, })
Теперь импортируйте файл Translator.jsв файл App.js.
Замените файл App.js файл с кодом ниже
import React, {Component} from 'react'; import {View} from 'react-native'; import Translator from './Translator';export default class App extends Component { render() { return ( <View> <Translator /> </View> ); } }
Подготовка Android-устройства
Вам понадобится устройство Android для запуска вашего приложения React Native Android. Это может быть либо физическое устройство Android, либо, чаще всего, вы можете использовать виртуальное устройство Android (AVD), которое позволяет вам эмулировать устройство Android на вашем компьютере (используя Android Studio).
В любом случае вам нужно будет подготовить устройство для запуска приложений Android для разработки.
Использование физического устройства
Если у вас есть физическое Android-устройство, вы можете использовать его для разработки вместо AVD, подключив его к компьютеру с помощью USB-кабеля и следуя инструкциям здесь.
Если вы используете виртуальное устройство, перейдите по этой ссылке.
Теперь перейдите в командную строку и запустите react-native run-android в каталоге вашего приложения React Native:
cd Translator
react-native run-androidЕсли все настроено правильно, вы должны увидеть, как ваше новое приложение работает на вашем физическом устройстве или в эмуляторе Android, как показано ниже.
Замечательно. Мы получили базовый пользовательский интерфейс для нашего приложения Translator. Теперь нам нужно перевести входной текст на выбранный язык при отправке. В React Native есть библиотека react-native-power-translator для перевода текста.
Давайте установим библиотеку react-native-power-translator. Перейдите в корневой каталог проекта в командной строке и выполните следующую команду:
npm i react-native-power-translator --saveИспользование:
import { PowerTranslator, ProviderTypes, TranslatorConfiguration, TranslatorFactory } from 'react-native-power-translator';//Example TranslatorConfiguration.setConfig('Provider_Type', 'Your_API_Key','Target_Language', 'Source_Language');//Fill with your own details TranslatorConfiguration.setConfig(ProviderTypes.Google, 'xxxx','fr');
- PowerTranslator: простой компонент для перевода ваших текстов.
- ProviderTypes: тип облачного провайдера, которого вы хотите использовать. Вы можете указать двух поставщиков. ProviderTypes.Google для Google переводчик и ProviderTypes.Microsoft для облачного сервиса Microsoft переводчик текста.
- TranslatorFactory: возвращает подходящий экземпляр переводчика в зависимости от вашей конфигурации.
- TranslatorConfiguration: это одноэлементный класс, в котором хранится конфигурация транслятора.
Теперь добавьте следующий код в файл Translator.js:
В приведенном выше коде я использую провайдера Google. Вы можете использовать провайдера Google или Microsoft.
Сохраните все файлы и снова запустите приложение в командной строке, и вы увидите работающее приложение с переводом текста с одного языка на другой, как показано ниже.
import React, { Component } from 'react'; ... ... import { PowerTranslator, ProviderTypes, TranslatorConfiguration, TranslatorFactory } from 'react-native-power-translator';export default class Translator extends Component { ... ... render() { TranslatorConfiguration.setConfig(ProviderTypes.Google,’XXXX’, this.state.languageCode); return ( ... ... ... <View style = {styles.output}> {/* output text displays here.. */} {this.state.submit && <PowerTranslator text={this.state.inputText} />} </View>... ... } }
На изображении ниже вы можете увидеть текст, преобразованный с английского на французский.
На устройства Android вы можете загрузить клавиатуры на разных языках. Так что вы можете перевести свой местный язык на другие языки.
На устройства Android вы можете загрузить клавиатуры на разных языках. Так что вы можете перевести свой местный язык на другие языки.
Для преобразования речи в текст у нас есть библиотека под названием react-native-android-voice. Давайте установим эту библиотеку в наш проект.
Перейдите в командную строку, перейдите в корневой каталог проекта и выполните следующую команду:
npm install --save react-native-android-voiceПосле успешной установки следуйте инструкциям по этой ссылке, чтобы связать библиотеку с вашим проектом Android.
Когда вы завершите связывание библиотек с проектом Android, давайте начнем реализовывать его в нашем файле Translator.js.
Давайте добавим значок микрофона в поле ввода. Когда пользователь нажимает на значок микрофона, включается функция речи, существует библиотека под названием react-native-vector-icons. Для установки следуйте инструкциям по этой ссылке.
В этом проекте я использую значки Ionicons, вы можете изменить их в iconFontNames в вашем файле android/app/build.gradle следующим образом:
project.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to copy
]Теперь добавьте следующий код в файл Translator.js.
import React, { Component } from 'react'; ... ... import Icon from "react-native-vector-icons/Ionicons"; import SpeechAndroid from 'react-native-android-voice';export default class Translator extends Component { constructor(props) { super(props); this.state = { languageFrom: "", .... .... micOn: false, //Add this }; this._buttonClick = this._buttonClick.bind(this); //Add this }... async _buttonClick(){ await this.setState({micOn: true}) try{ var spokenText = await SpeechAndroid.startSpeech("", SpeechAndroid.ENGLISH); await this.setState({inputText: spokenText}); await ToastAndroid.show(spokenText , ToastAndroid.LONG); }catch(error){ switch(error){ case SpeechAndroid.E_VOICE_CANCELLED: ToastAndroid.show("Voice Recognizer cancelled" , ToastAndroid.LONG); break; case SpeechAndroid.E_NO_MATCH: ToastAndroid.show("No match for what you said" , ToastAndroid.LONG); break; case SpeechAndroid.E_SERVER_ERROR: ToastAndroid.show("Google Server Error" , ToastAndroid.LONG); break; } } this.setState({micOn: false}) }render() { TranslatorConfiguration.setConfig(ProviderTypes.Google,'XXXX', this.state.languageCode); return ( <View style = {styles.container}> <View style={styles.input}> <TextInput ... ... ... /> <TouchableOpacity onPress={this._buttonClick}> {this.state.micOn ? <Icon size={30} name="md-mic" style={styles.micStyle}/> : <Icon size={30} name="md-mic-off" style={styles.micStyle}/>} </TouchableOpacity> </View> ... ... </View> ) } }const styles = StyleSheet.create({ container: { paddingTop: 53 }, ... ... ... micStyle: { padding: 10, margin: 5, alignItems: 'center' } })
После правильного добавления кода сохраните все изменения и запустите приложение. Теперь вы можете увидеть значок микрофона в поле ввода текста, который позволяет использовать функцию преобразования речи в текст.
В приведенном выше коде мы вызываем функцию с именем _buttonClick(), которая содержит логику преобразования речи в текст. Это автоматически начнет распознавание и настройку для английского языка. Вы можете использовать разные языки для речи, вы можете проверить здесь для получения дополнительной информации.
Теперь мы успешно внедрили преобразование речи в текст в наше приложение-переводчик. Давайте добавим функцию преобразования текста в речь, которая преобразует переведенный текст в речь. Для этого у нас есть библиотека под названием react-native-tts, которая преобразует текст в речь.
Установите react-native-tts в наш проект. Перейдите в командную строку, перейдите в корневой каталог проекта и выполните следующую команду:
npm install --save react-native-tts
react-native link react-native-ttsПервая команда установит библиотеку.
Вторая команда свяжет библиотеку с вашим проектом Android.
Теперь добавьте следующий код в файл Translator.js.
import React, { Component } from 'react'; ... ... import Icon from "react-native-vector-icons/Ionicons"; import SpeechAndroid from 'react-native-android-voice';export default class Translator extends Component { constructor(props) { super(props); this.state = { languageFrom: "", ... ... micOn: false, //Add this }; this._buttonClick = this._buttonClick.bind(this); //Add this }handleTranslate = () => { this.setState({submit: true}) const translator = TranslatorFactory.createTranslator(); translator.translate(this.state.inputText).then(translated => { // alert(translated) Tts.getInitStatus().then(() => { Tts.speak(translated); }); Tts.stop(); }); } ...render() { ... ) } }
В приведенном выше коде мы добавили логику преобразования текста в речь в функции handleTranslate, которая вызывается при нажатии кнопки отправки.
Теперь наш окончательный файл Translator.js будет выглядеть следующим образом:
import React, { Component } from 'react'; import { PowerTranslator, ProviderTypes, TranslatorConfiguration, TranslatorFactory } from 'react-native-power-translator'; import { View, TextInput, StyleSheet, TouchableOpacity, TouchableHighlight, Text, Picker, Image } from 'react-native'; import Icon from "react-native-vector-icons/Ionicons"; import Tts from 'react-native-tts'; import Languages from './languages.json'; import SpeechAndroid from 'react-native-android-voice';export default class Translator extends Component {constructor(props) { super(props); this.state = { languageFrom: "", languageTo: "", languageCode: 'en', inputText: "", outputText: "", submit: false, micOn: false, }; this._buttonClick = this._buttonClick.bind(this); } handleTranslate = () => { this.setState({submit: true}) const translator = TranslatorFactory.createTranslator(); translator.translate(this.state.inputText).then(translated => { Tts.getInitStatus().then(() => { Tts.speak(translated); }); Tts.stop(); }); } async _buttonClick(){ await this.setState({micOn: true}) try{ var spokenText = await SpeechAndroid.startSpeech("", SpeechAndroid.DEFAULT); await this.setState({inputText: spokenText}); await ToastAndroid.show(spokenText , ToastAndroid.LONG); }catch(error){ switch(error){ case SpeechAndroid.E_VOICE_CANCELLED: ToastAndroid.show("Voice Recognizer cancelled" , ToastAndroid.LONG); break; case SpeechAndroid.E_NO_MATCH: ToastAndroid.show("No match for what you said" , ToastAndroid.LONG); break; case SpeechAndroid.E_SERVER_ERROR: ToastAndroid.show("Google Server Error" , ToastAndroid.LONG); break; } } this.setState({micOn: false}) }render() { TranslatorConfiguration.setConfig(ProviderTypes.Google, 'XXXXXXXXX', this.state.languageCode); return ( <View style = {styles.container}> <View style={styles.input}> <TextInput style={{flex:1, height: 80}} placeholder="Enter Text" underlineColorAndroid="transparent" onChangeText = {inputText => this.setState({inputText})} value={this.state.inputText} /> <TouchableOpacity onPress={this._buttonClick}> {this.state.micOn ? <Icon size={30} name="md-mic" style={styles.ImageStyle}/> : <Icon size={30} name="md-mic-off" style={styles.ImageStyle}/>} </TouchableOpacity> </View><Picker selectedValue={this.state.languageTo} onValueChange={ lang => this.setState({languageTo: lang, languageCode: lang})} > {Object.keys(Languages).map(key => ( <Picker.Item label={Languages[key]} value={key} /> ))} </Picker><View style = {styles.output}> {this.state.submit && <PowerTranslator text={this.state.inputText} />} {/* onTranslationEnd={this.textToSpeech} */} </View> <TouchableOpacity style = {styles.submitButton} onPress = {this.handleTranslate} > <Text style = {styles.submitButtonText}> Submit </Text> </TouchableOpacity> </View> ) } }const styles = StyleSheet.create({ container: { paddingTop: 53 }, input: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: .5, borderColor: '#000', // height: 40, borderRadius: 5 , margin: 10 }, output: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: .5, borderColor: '#000', borderRadius: 5 , margin: 10, height: 80, }, ImageStyle: { padding: 10, margin: 5, alignItems: 'center' }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, borderRadius: 5 , height: 40, }, submitButtonText:{ color: 'white' }, })
Убедитесь, что вы заменили «XXXXXX» на свой ключ Google/Microsoft API в TranslatorConfiguration в методе рендеринга.
Вот и все. Теперь в нашем приложении Translator есть функции Language Translator, Speech to Text, Text to Speech. Мы готовы идти сейчас. Перезагрузите/запустите приложение, и вы увидите полностью функциональное приложение.
Когда пользователь нажимает на значок микрофона, отображается всплывающее окно распознавания речи Android, как показано ниже.
Если пользователь не говорил или Google не распознал речь, это выглядит следующим образом:
Как только Google распознает речь, выберите язык, на который вам нужно перевести, и нажмите кнопку «Отправить», чтобы получить переведенный текст как речь.
Как только Google распознает речь, выберите язык, на который вам нужно перевести, и нажмите кнопку «Отправить», чтобы получить переведенный текст как речь.
Вот и все!
Автором этой истории является Вену Вака. Вену — инженер-программист и энтузиаст машинного обучения.
Первоначально опубликовано на http://blog.zenof.ai 1 июля 2019 г.
