Translation

#Translation API samples

Translate text

This example shows the use of the /translation/translate api to translate a text from one language to another.

Demo

Source code

jQuery(function($) {
  'use strict';

  // Function to call the SYSTRAN Translate Api translate/
  function translate(source, target, content, callback) {
    $.ajax({
      method:'GET',
      url: 'https://api-platform.systran.net/translation/text/translate?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      dataType: 'text',
      data: {
        source: source,
        target: target,
        input: content
      },
      success: function(data) {
        if (typeof data === 'string')
          try {
            data = JSON.parse(data);
          } catch (exp) {

          }

        var err;

        if (data && data.outputs && Array.isArray(data.outputs)) {
          data = data.outputs[0];

          if (data && data.output)
            data = data.output;

          if (data && data.error)
            err = data.error;
        }

        callback(err, data);
      },
      error: function(xhr, status, err) {
        callback(err);
      }
    });
  }

  function getTextFromHtml(content) {
    content = content.replace(/<div>(?:<br>)?/gi, '\n').replace(/<\/div>/gi, '');
    content = content.replace(/<p>&nbsp;<\/p>/gi, '\n').replace(/<p>/gi, '').replace(/\n*<\/p>/gi, '\n');
    content = content.replace(/<br[ \/]*>/gi, '\n');
    content = content.replace(/&nbsp;/gi, ' ');
    content = content.replace(/<([^> ]*)[^>]*>/gi, '');  //clean html markup
    content = content.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">"); //unescape some entities
    return content;
  }

  var $inputTextEditor = $('#inputTextEditor');
  var $outputTextEditor = $('#outputTextEditor');
  var $translating = $('#translating');
  var $source = $('#source');
  var $target = $('#target');

  function launchTranslation() {
    $translating.removeClass('hidden');
    //Extract text to translate
    var toTranslate = getTextFromHtml($inputTextEditor.html());
    translate($source.val(), $target.val(), toTranslate, function(err, result) {
      $translating.addClass('hidden');
      if (!err) {
        //Show result
        $outputTextEditor.text(result);
      } else {
        if (console.log)
          console.log('Error while doing translation: ' + err);
      }
    });
  }

  $('#translateButton').click(launchTranslation);
  launchTranslation();
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Translation demo</title>
    <link href="translate.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="translate.js"></script>
</head>
<body>
    <div class="controls">
        <select id="source">
            <option value="en" data-t selected>English</option>
        </select>
        <select id="target">
            <option value="fr" data-t selected>French</option>
            <option value="ru" data-t>Russian</option>
            <option value="ja" data-t>Japanese</option>
            <option value="ko" data-t>Korean</option>
            <option value="zh" data-t>Chinese</option>
        </select>
        <button type="button" id="translateButton" data-t>Translate</button>
        <div id="translating" class="hidden" data-t>Translating...</div>
    </div>
    <table id="translationBox">
        <tr>
            <td id="inputBox">
                <div id="inputTextEditor" contenteditable="true" class="textEditor">
                    This is a test.
                </div>
            </td>
            <td id="outputBox">
                <div id="outputTextEditor" class="textEditor">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
#source, #target, #translateButton {
    height: 31px;
    width: 90px;
}

#translationBox {
    width: 100%;
}

#inputBox, #outputBox {
    width: 50%;
}

.textEditor {
    overflow: auto;
    font-family: monospace;
    font-size: 14px;
    padding: 10px;
    line-height: normal;
    height: 100%;
    min-height: 100px;
    max-height: 400px;
}

#inputTextEditor {
    margin-right: 2px;
    border: 1px solid #ddd;
}

#outputTextEditor {
    margin-left: 2px;
    border: 1px solid whitesmoke;
    background: whitesmoke;
}

#translating {
    color: #428bca;
    font-style: italic;
    display: inline-block;
    margin-left: 15px;
}

#translating.hidden {
    display:none;
}

.controls {
    margin: 5px 20px 5px 2px;
}