Как использовать API Google/Yandex для перевода текста?

Каким образом можно реализовать перевод текста прямо на своём сайте с помощью Google или Yandex API, если у меня есть разметка? Я хотел бы, чтобы при клике на кнопку, текст из элемента с id="text" переводился и вставлялся в элемент с id="textTranslate". Нужно учитывать, что я не говорю на английском и затрудняюсь найти информацию о реализации. Буду рад получить ответы, относящиеся и к Google API, и к Yandex API.
  • 10 октября 2023 г. 10:37
Ответы на вопрос 2
Для использования API перевода текста от Google или Yandex на вашем сайте, вам необходимо успеть следующие шаги:

1. Получить ключ API:
   - Для Google Translate API:
     - Перейдите на `https://cloud.google.com/translate/docs/start`, нажмите на кнопку "Console" в правом верхнем углу и создайте новый проект.
     - В разделе "Управление > Креды" создайте новый ключ API с доступом к Translate API.
   - Для Yandex.Translate API:
     - Перейдите на `https://translate.yandex.ru/developers/keys`, создайте новое приложение и скопируйте ключ API.

2. Использовать API на вашем сайте:
   - Для Google Translate API:
     - Добавьте следующий скрипт в разметку вашей страницы:
       `<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>`
     - Позже в разметке вашей страницы добавьте следующий код для инициализации переводчика:
       ```javascript
       function googleTranslateElementInit() {
           new google.translate.TranslateElement({pageLanguage: 'your_language'}, 'google_translate_element');
       }
       ```
     - Вставьте следующий элемент HTML для размещения переводчика на странице:
       `<div id="google_translate_element"></div>`

   - Для Yandex.Translate API:
     - Добавьте следующий скрипт в разметку вашей страницы:
       `<script src="https://translate.yandex.net/website-widget/v1/widget.js?widgetId=your_widget_id"></script>`
     - Вставьте следующий элемент HTML для размещения виджета переводчика на странице:
       `<div id="ya_translate_widget"></div>`
     - Обратитесь в URL-адресу `https://translate.yandex.net/website-widget/v1/get-widget` для создания вашего собственного виджета и скопируйте идентификатор виджета (`widgetId`).

3. Реализовать вашу функциональность перевода текста:
   - Если вы хотите использовать свои собственные кнопки для выполнения перевода, добавьте обработчик события для кнопки и использование API чтобы отправить текст для перевода и обработать возвращаемые результаты.
   - Вот пример использования JavaScript с Google Translate API:

     ```javascript
     function translateText() {
         var text = document.getElementById('text').innerText; // Получите текст, который будет переведен
         var translationDiv = document.getElementById('textTranslate'); // Элемент для вставки переведенного текста

         var myCallback = function (response) {
             var translatedText = response.data.translations[0].translatedText;
             translationDiv.innerText = translatedText;
         };

         var script = document.createElement('script');
         script.src = 'https://translation.googleapis.com/language/translate/v2?key=YOUR_API_KEY&callback=myCallback&q=' + encodeURI(text) + '&target=en';

         document.getElementsByTagName('head')[0].appendChild(script);
     }
     ```

     При вызове функции `translateText` текст, содержащийся в элементе с `id="text"`, будет переведен и результат будет вставлен в элемент с `id="textTranslate"`. Замените `"YOUR_API_KEY"` на ваш ключ API для Google Translate API.

     Аналогичным образом, можно использовать Yandex.Translate API, чтобы перевести текст на своем сайте, с помощью использования API-ключа Yandex и документации для доступа к методам API.

Обратитесь к документации Google API и Yandex API для получения дополнительных сведений и конфигурации под свои потребности.
1. Ориентируйтесь на фриланс-тематику при написании функции на JavaScript.
2. Учтите специфику работы фрилансера, когда пишете функцию на JavaScript.
3. Возьмите во внимание особенности заказов во фрилансе при написании функции на JavaScript.
4. Уделяйте внимание деталям фриланс-предложений, воплощая их в функции на JavaScript.
5. Постарайтесь наиболее точно отразить основные аспекты фриланс-разработки, реализуя их в своей функции на JavaScript.
6. При создании функции на JavaScript для работы на фрилансе, учтите особенности процесса подачи и выполнения заказов.
Похожие вопросы