Подключение переводчика Deepl, Часть 1

Пример перевода с помощью автопереводчика Deepl

Допустим наша задача перевести определенный текст на разные языки а после вставить их в таблицу переводов для сайта

  1. Создадим форму с вводом исходного текста и языка а так же укажем настройки для переводчика 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

Добавить комментарий

Ваш адрес email не будет опубликован.