Translate the text of a textarea and store it in another textarea (without API)

user_15972034 0
Viewed 237

<!DOCTYPE html>
<html>

<head>
</head>
<body>
  <textarea id="textetrad" rows="5"></textarea>
  <textarea id="translated-text" rows="5"></textarea>
  <button id="run-translation" onclick="runTranslation();">Translate</button>
  <script>
    function runTranslation() {
      var data = document.getElementById("textetrad").value;
      var trad = LanguageApp.translate(data, 'en', 'es');
      document.getElementById("translated-text").value = trad;
    }
  </script>
</body>
</html>

Hello, I am creating a bar lateral and I have a problem. I would like to create a textarea where we insert what we want and it is translated in another textarea. I have tried different methods like LanguageApp.translate(data , 'en', 'es') but I can't get this function to work in the HTML code. So already is what I want possible without using an API? If yes, should I do it only in the HTML code or should I make the HMTL code and the .gs communicate? And then how do I transmit the translation from the gs code to the HTML?

google-apps-script html javascript
1 Answers

I tried and made it work on apps script using LanguageApp

index.html:

<!DOCTYPE html>
<html>

  <head>
    <title>Test Page</title>
  </head>

  <script type="text/javascript">
    function runTranslation() {
      google.script.run.withSuccessHandler(onSuccess).translate(document.getElementById('textetrad').value);
    }

    function onSuccess(data) {
      document.getElementById('translated-text').value = data;
    }
  </script>

  <body>
    <textarea id="textetrad" rows="5"></textarea>
    <textarea id="translated-text" rows="5"></textarea>
    <button id="run-translation" onclick="runTranslation();">Translate</button>
  </body>

</html>

Code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function translate(textValue){
  // automatically identify the language, then translate to spanish
  return LanguageApp.translate(textValue, '', 'es');
}

Process:

  • upon onclick, execute runTranslation.
  • when translate function (in Code.gs) runs with no issue, proceed with onSuccess
  • passing the translated data, assign it to the other element

Output:

output

Reference:

user_161186860
Related