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

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

1. Создадим форму с вводом исходного текста и языка а так же укажем настройки для переводчика Deepl

Так же указал возможность вкл/ выключения языка перевода

HTML код формы

	

		

			

			  Исходный текст перевода
			  
			
			

			  Исходный язык
			  
				RU
				UA
				EN
				
				Формальность
										
					default
					more
					less
					prefer_more
					prefer_less
				 
				

				  
				  
					Форматирование								  
				
				

				  
				  
					Разделение								  
				
							  
			
		
		

			Перевести на другие языки
			Вставить перевод в таблицу
			


		
	
		

			
Варианты перевода								
				

					

					  

						

						  
RU
						
						
					  
					
 
					

						Active
					
				
															
				

					

					  

						

						  
EN
						
						
					  
					
 
					

						Active
					
				
								
				....
			
	

Далее определим 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 обработчик