Подключение переводчика Deepl, Часть 1
Пример перевода с помощью автопереводчика Deepl
Допустим наша задача перевести определенный текст на разные языки а после вставить их в таблицу переводов для сайта
- Создадим форму с вводом исходного текста и языка а так же укажем настройки для переводчика Deepl
Так же указал возможность вкл/ выключения языка перевода
HTML код формы
<form>
<fieldset>
<div class="form-row">
<div class="form-group col-md-8">
<label for="enterTranslate">Исходный текст перевода</label>
<textarea type="text" class="form-control" id="enterTranslate" required=""></textarea>
</div>
<div class="form-group col-md-4">
<label for="inputStateLang">Исходный язык</label>
<select style="line-height:normal; font-size:14px;" id="inputStateLang" class="form-control">
<option selected="" value="RU">RU</option>
<option value="UK">UA</option>
<option value="EN">EN</option>
</select>
<label class="top-10" for="formality">Формальность</label>
<select style="line-height:normal; font-size:14px;" id="formality" class="form-control">
<option value="default">default</option>
<option value="more">more</option>
<option value="less">less</option>
<option value="prefer_more">prefer_more</option>
<option value="prefer_less">prefer_less</option>
</select>
<div style="padding:0;" class="form-check top-10 col-lg-7">
<input class="form-check-input" name="preserve_formatting" type="checkbox" value="0" id="preserve_formatting">
<label class="form-check-label" for="preserve_formatting">
Форматирование </label>
</div>
<div style="padding:0;" class="form-check top-10 col-lg-5">
<input class="form-check-input" name="split_sentences" type="checkbox" value="0" id="split_sentences">
<label class="form-check-label" for="split_sentences">
Разделение </label>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary translate-langs">Перевести на другие языки</button>
<button type="button" class="btn btn-success insert-table">Вставить перевод в таблицу</button>
<br><br>
</div>
<div class="form-row">
<br><label class="col-md-12">Варианты перевода</label>
<div class="line-lang">
<div class="form-group col-md-11">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">RU</div>
</div>
<textarea data-lang="RU" class="form-control input-lang" id="lang_RU" placeholder=""></textarea>
</div>
</div>
<div class="form-group col-md-1">
<button type="button" class="btn btn-success activation-lang">Active</button>
</div>
</div>
<div class="line-lang">
<div class="form-group col-md-11">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">EN</div>
</div>
<textarea data-lang="EN" class="form-control input-lang" id="lang_EN" placeholder=""></textarea>
</div>
</div>
<div class="form-group col-md-1">
<button type="button" class="btn btn-success activation-lang">Active</button>
</div>
</div>
....
</div>
</div>
</fieldset>
</form>Далее определим js функцию которая будет передавать параметры из формы в обработчик php и в API Deepl
Функция requestTranslate принимает параметры формы и отправляет их на сервер, далее полученные результаты вставляет перевод в нужное языковое текстовое поле
function requestTranslate (params) {
var target_lang = 'EN';
var modal = $('.modal#translate');
if(params.target_lang){
target_lang = params.target_lang;
}
if(params.start_source_lang) {
target_lang = (params.start_source_lang == 'RU') ? 'EN' : 'RU';
params['source_lang'] = params.start_source_lang;
params['target_lang'] = target_lang;
}
if($('select#formality').length > 0){
params['formality'] = $('select#formality').val();
}
if($('input#preserve_formatting').length > 0){
params['preserve_formatting'] = $('input#preserve_formatting').prop('checked') ? 1 : 0;
}
if($('input#split_sentences').length > 0){
params['split_sentences'] = $('input#split_sentences').prop('checked') ? 1 : 0;
}
$('.form-control.input-lang[data-lang="'+target_lang+'"]').prev().find('.input-group-text').html('...');
$.ajax({
type: "POST",
url: '/request.php',
data: params,
success: function (response) {
if (response.translations) {
var selectLang =modal.find('select#inputStateLang').val();
modal.find('textarea[data-lang="'+selectLang+'"]').val(params['text']);
$.each(response.translations, function(d, t){
if(t.detected_source_language && t.text){
modal.find('textarea[data-lang="'+target_lang+'"]').val(t.text);
}
});
} else {
console.log('ошибка');
console.log(response);
}
},
complete: function (e) {
var html_lang = target_lang;
if(target_lang == 'UK'){
html_lang = 'UA';
} else if(target_lang == 'CS'){
html_lang = 'CZ';
} else if(target_lang == 'ZH'){
html_lang = 'CN';
}
modal.find('.form-control.input-lang[data-lang="'+target_lang+'"]').prev().find('.input-group-text').html(html_lang);
},
error: function (e) {
console.log('e');
console.log(e);
},
dataType: "json"
});
}Так как запрос на перевод нескольких языков сразу отправить нельзя, приходится воспользоваться циклом для передачи данных. Клик на передачу данных в функцию requestTranslate
$(document.body).on('click', 'button.translate-langs', function(){
var source_lang = $('#inputStateLang').val();
var text = $('#enterTranslate').val();
if(text.length === 0){
alert('Введите текст для перевода!');
return false;
}
var $arr_langs = [];
$('.form-row > .line-lang').each(function() {
var input = $(this).find('textarea');
if (!input.prop('disabled')) {
$arr_langs.push(input.data('lang'));
}
});
var indexTargetLang = $arr_langs.indexOf(source_lang);
if (indexTargetLang >= 0) {
$arr_langs.splice( indexTargetLang, 1 );
}
if($arr_langs.length > 0){
$.each($arr_langs, function(d, lang){
var paramsNext = {
'Function': 'get_translate',
'text': text,
'target_lang': lang,
// 'source_lang': source_lang,
// 'tag_handling': 'html',
// 'preserve_formatting': 1
};
requestTranslate(paramsNext);
});
} else {
alert('Нету доступных языков для перевода!');
}
});Js функция для вкл/выключения языков для передачи переводчику
$(document.body).on('click', 'button.activation-lang', function(){
var inputLang = $(this).parents('div.line-lang').find('textarea');
if(!inputLang.prop("disabled")){
$(this).removeClass('btn-success').addClass('btn-secondary').text('Off');
inputLang.prop("disabled", true);
}else{
$(this).removeClass('btn-secondary').addClass('btn-success').text('Active');
inputLang.prop("disabled", false);
}
});Во второй части статьи рассмотрим php обработчик
Comments:0