Resources

#Resource Management API samples

Lookup

This example shows the use of the /resources/lookup/lookup api to lookup a text from one language in another.

Demo

Source code

/*global jQuery, Handlebars*/
jQuery(function($) {
  'use strict';

  $('body').on('click', 'a[data-toggle=collapse]', function() {
    $(this).find('i').first().toggleClass('fa-caret-square-o-down fa-caret-square-o-right');
  });

  // generate an unique Id to identify collapse links
  function generateId () {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
  }

  // Function to call the SYSTRAN Resources Api
  function lookup(source, target, content, callback) {
    $.ajax({
      method:'GET',
      url: 'https://api-platform.systran.net/resources/dictionary/lookup?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) {

          }

        if(data && data.outputs && data.outputs.length && data.outputs[0] && data.outputs[0].output)
          data = data.outputs[0].output;

        if (!data || !data.matches || !Array.isArray(data.matches)) {
          callback(data || 'error');
          return;
        }

        data.sDictSearch = true;

        for (var i = 0; i < data.matches.length; ++i) {
          var ele = data.matches[i];
          ele.id = generateId();
          if (ele.targets) {
            for (var j = 0; j < ele.targets.length; ++j) {
              var target = ele.targets[j];
              target.lemma = target.lemma.split(/,\s|,/);
            }
          }
        }

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

  var $outputLookupResult = $('#outputLookupResult');
  var $lookupProgress = $('#lookupProgress');
  var $source = $('#source');
  var $target = $('#target');

  var sDictResultTemplate = Handlebars.compile($('#sDictResultTemplate').html());

  function launchLookup() {
    $lookupProgress.removeClass('hidden');
    //Extract text to translate
    var toTranslate = $('#inputTextEditor').val();
    lookup($source.val(), $target.val(), toTranslate, function(err, data) {
      $lookupProgress.addClass('hidden');
      if (!err) {
        //Show result
        if(!data || (data.matches && !data.matches.length)) {
          return;
        }

        data.source = $source.val();
        data.target = $target.val();
        data.srcLanguage = $source.val();
        data.tgtLanguage = $target.val();
        data.term = toTranslate;
        $outputLookupResult.html(sDictResultTemplate(data));
      } else {
        if (console.log)
          console.log('Error while doing lookup: ', err);
      }
    });
  }

  $('#lookupButton').click(launchLookup);
  launchLookup();
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Lookup demo</title>
    <link href="lookup.css" rel="stylesheet">
    <link href="/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/components/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/components/Font-Awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="/components/bootstrap/js/bootstrap.min.js"></script>
    <script src="/components/handlebars/handlebars.js"></script>
    <script src="lookup.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>
        <input id="inputTextEditor" class="form-control" placeholder="word" value="test">
        <button type="button" id="lookupButton" data-t>Lookup</button>
        <div id="lookupProgress" class="hidden" data-t>Lookup...</div>
    </div>
    <div id="outputLookupResult">
    </div>

    <script type="text/x-handlebars-template" id="sDictResultTemplate">
        {{#if autoComplete}}
        <div class="autoCompleteDiv">Did you mean:</div>
        {{#each matches}}
        <div class="meaning">
            <a href="javascript:void(0)" data-source="{{../source}}" data-target="{{../target}}" data-word="{{source.lemma}}">{{source.lemma}}</a>
        </div>
        {{/each}}
        {{else}}
        {{#each matches}}
        <div class="sDictResult">
            <div class="sDictResultHeader">
                <a data-toggle="collapse" data-target="#lookupResult_{{id}}" href="javascript:void(0)" class="block">
                    <i class="fa fa-caret-square-o-down"></i>&nbsp;
                    <span class="sourceWord {{../source}}">{{source.lemma}}</span>
                    {{#if source.phonetic}}
                    <span class="phon">/{{source.phonetic}}/</span>
                    {{/if}}
                    <span class="pos">{{source.pos}}{{#if source.info}}, {{source.info}}{{/if}}</span>
                    <span class="inflection">{{source.inflection}}</span>
                </a>
            </div>
            <div id="lookupResult_{{id}}" class="collapse in entryresults">
                {{#each targets}}
                {{#if lemma}}
                <div>
                    <a data-toggle="collapse" data-target="#lookupResult_{{../../id}}_{{lemma}}" href="javascript:void(0)">
                        <i class="fa fa-caret-square-o-down"></i>
                    </a>
                    <div class="lemmainfo {{#each origin}}{{dictId}} {{/each}}">
                        {{#if domain}}<span class="domain">[{{domain}}]</span>{{/if}}
                        {{#if context}}<span class="context">({{context}})</span>{{/if}}
                        {{#if synonym}}<span class="synonym">(={{synonym}})</span>{{/if}}
                        <span class="lemma meaning {{../../../target}}">
                            {{#each lemma}}
                            <a href="javascript:void(0)" data-source="{{../../../../target}}" data-target="{{../../../../source}}" data-word="{{this}}" class="lemma-link">{{this}}</a>
                            {{#if @last}}{{else}}, {{/if}}
                            {{/each}}
                            {{#if variant}}
                            <span class="lemma variant">
                                <a href="javascript:void(0)" data-source="{{../../../source}}" data-target="{{../../../target}}" data-word="{{variant}}" class="variant-link">{{variant}}</a>
                            </span>
                            {{/if}}
                        </span>
                        {{#if info}}<span class="targetinfo">({{info}})</span>{{/if}}
                        {{#if rank}}
                        <div title="{{rank}}%" class="rank">
                            <div style="width: {{rank}}%;" class="rankprogress"></div>
                        </div>
                        {{/if}}
                    </div>
                    <div id="lookupResult_{{../../id}}_{{lemma}}" class="collapse in meanings">
                        <div class="meaning itemBlock">
                            {{#if invmeanings}}
                            <div class="invmeaning">
                                (↬ {{#each invmeanings}}
                                <a href='javascript:void(0)' data-source='{{../../../../../source}}' data-target='{{../../../../../target}}' data-word='{{this}}' class='{{../../../../../source}} invmeaning-link'>{{this}}</a>
                                {{#unless @last}}, {{/unless}}{{/each}} )
                            </div>
                            {{/if}}
                            {{#if expressions}}
                            <table class="expressions">
                                {{#each expressions}}
                                <tr class="expression">
                                    <td class="esource">{{source}}</td>
                                    <td class="etarget">{{target}}</td>
                                </tr>
                                {{/each}}
                            </table>
                            {{/if}}
                        </div>
                    </div>
                </div>
                {{/if}}
                {{/each}}
                {{#if other_expressions.length}}
                <a data-toggle="collapse" data-target="#lookupResult_{{id}}_oexpr" href="javascript:void(0)" class="otherexpression">
                    <i class="fa fa-caret-square-o-right"></i>
                    <div class="lemma">Other Expressions</div>
                </a>
                <div id="lookupResult_{{id}}_oexpr" class="collapse">
                    <table class="expressions">
                        {{#each other_expressions}}
                        <tr class="expression">
                            <td class="esource {{#each origin}}{{dictId}} {{/each}}">{{source}}</td>
                            <td class="etarget">{{target}}</td>
                        </tr>
                        {{/each}}
                    </table>
                </div>
                {{/if}}
            </div>
        </div>
        {{/each}}
        {{/if}}
    </script>

</body>
</html>
#source, #target, #lookupButton {
    height: 31px;
    width: 90px;
}

#inputTextEditor {
    display: inline-block;
    width: initial;
    height: 32px;
}

#outputLookupResult {
    margin-left: 2px;
    border: 1px solid whitesmoke;
    background: whitesmoke;
    overflow: auto;
    font-size: 14px;
    padding: 10px;
    line-height: normal;
    max-height: 500px;
}

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

#lookupProgress.hidden {
    display:none;
}

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


.sDictResultHeader {
    margin: 5px;
    padding: 0 5px;
    background-color: #eaeaea;
}


.entryresults,
.meanings {
    margin: 5px 5px 5px 15px;
}

.lemma.variant {
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}
.lemma {
    font-weight: bold;
    color: #000;
}

.lemmainfo {
    display: inline;
}

.lemmainfo span {
    margin: 0 3px 0 0;
}

.gdict:after {
    margin-left: 5px;
    font-family: FontAwesome;
    content: "\f007";
}

.rank {
    display: inline-block;
    height: 10px;
    width: 54px;
    background-color: white;
    border: solid 1px;
}

.rankprogress {
    background-color: #71EE8D;
    height: 100%;
}

.invmeaning-link, .lemma-link {
    font-weight: 700;
}

.invmeaning-link {
    font-size: 0.9em;
}

.expressions {
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
}

.expression {
    padding: 0 0 0 5px;
}

.otherexpression .lemma {
    display: inline;
    color: #000000;
    font-weight: normal;
    text-decoration: underline;
}

.esource {
    font-weight: bold;
    color: #000;
    padding: 0 10px;
    border-left: solid 2px #ccc;
}

.etarget {
    font-weight: normal;
    color: #444;
    padding: 0 0 0 5px;
}

.phon {
    font-weight: normal;
    color: #30a3e4;
    font-size: 0.9em;
    margin-right: 5px;
}

.pos {
    color: #07cf1f;
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
    margin-right: 5px;
}

.targetinfo {
    font-style: italic;
    font-size: 0.9em;
    color: #a7029a;
}

.inflection {
    color: tomato;
    font-weight: normal;
    font-size: 0.9em;
}

.sourceWordHeader {
    font-weight: bold;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1px;
}

.lookupHeader div {
    display: inline-block;
    vertical-align: middle;
}

.sourceWord {
    margin: 0 3px 0 0;
    font-weight: bold;
    font-size: 1.2em;
    color: #000;
}

.itemBlock {
    display: block;
}

.sDictHref:hover {
    text-decoration: none;
}

.sDictHref {
    margin-top: 10px;
    margin-left: 5px;
}

.domain {
    color: #6A0101;
    font-variant: small-caps;
}

.synonym,
.context {
    font-style: italic;
    font-size: 0.9em;
    color: #016a18;
}

/* No italic for ko, ja, zh */
.context.ko, .context.zh, .context.ja {
    font-style: normal;
}

.lookupHeader {
    background-color: #D7E4F0;
    padding: 5px;
}

Corpus List

This example shows the use of the /resources/corpus/list api to retrieve the list of corpus.

Demo

Source code

/*global jQuery, Handlebars*/
jQuery(function($) {
  'use strict';

  // Function to call the SYSTRAN Resources Api
  function listCorpus(source, target, prefix, callback) {
    var data = {};
    if (source)
      data.source = source;
    if (target)
      data.target = target;
    if (prefix)
      data.prefix = prefix;

    $.ajax({
      method:'GET',
      url: 'https://api-platform.systran.net/resources/corpus/list?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      dataType: 'text',
      data: data,
      success: function(data) {
        if (typeof data === 'string')
          try {
            data = JSON.parse(data);
          } catch (exp) {

          }

        if (!data || !data.output || !data.output.files || !Array.isArray(data.output.files))
          callback(data || 'error');
        else
          callback(null, data.output.files);
      },
      error: function(xhr, status, err) {
        callback(err);
      }
    });
  }

  var $listCorpusResult = $('#listCorpusResult');
  var $listCorpusSubmitButton = $('#listCorpusSubmitButton');

  var listCorpusTableTemplate = Handlebars.compile($('#listCorpusTableTemplate').html());

  $listCorpusSubmitButton.click(function(e) {
    e.preventDefault();
    var source = $('#listCorpusSource').val();
    var target = $('#listCorpusTarget').val();
    var prefix = $('#listCorpusPrefix').val();

    listCorpus(source, target, prefix, function(err, data) {
      if (data)
        $listCorpusResult.html(listCorpusTableTemplate(data));
    });
  });

  $listCorpusSubmitButton.trigger('click');
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>List Corpus demo</title>
    <link href="corpus.css" rel="stylesheet">
    <link href="/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="/components/bootstrap/js/bootstrap.min.js"></script>
    <script src="/components/handlebars/handlebars.js"></script>
    <script src="corpus.js"></script>
</head>
<body>
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="listCorpusSource" placeholder="Source">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="listCorpusTarget" placeholder="Target">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="listCorpusPrefix" placeholder="Prefix">
        </div>
        <button type="submit" class="btn btn-default" id="listCorpusSubmitButton" data-t>Submit</button>
    </form>

    <div id="listCorpusResult">
    </div>

    <script id="listCorpusTableTemplate" type="text/x-handlebars-template">
        <table class="table table-bordered table-fixed">
            <thead>
                <th data-t>Id</th>
                <th data-t>Name</th>
                <th data-t>Source</th>
                <th data-t>Target</th>
                <th data-t>Format</th>
                <th data-t>createdAt</th>
            </thead>
            <tbody>
                {{#each this}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{filename}}</td>
                    <td>{{sourceLanguage}}</td>
                    <td>{{targetLanguages}}</td>
                    <td>{{format}}</td>
                    <td>{{createdAt}}</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </script>
</body>
</html>
#listCorpusResult {
    margin-top: 10px;
    border: 1px solid whitesmoke;
    overflow: auto;
    font-size: 14px;
    padding: 0;
    line-height: normal;
    max-height: 500px;
}

Corpus Match

This example shows the use of the /resources/corpus/match api to find sentences in the corpus that match a text.

Demo

Source code

/*global jQuery*/
jQuery(function($) {
  'use strict';

  // Function to call the SYSTRAN Resources Api
  function launchCorpusMatch(corpusId, source, target, input, callback) {
    var data = {
      corpusId: corpusId,
      source: source,
      target: target,
      input: input,
      threshold: 0.4
    };

    $.ajax({
      method:'GET',
      url: 'https://api-platform.systran.net/resources/corpus/match?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      dataType: 'text',
      data: data,
      success: function(data) {
        if (typeof data === 'string')
          try {
            data = JSON.parse(data);
          } catch (exp) {
            console.log('error while parsing result:' + exp);
          }

        if (!data || !data.output || !data.output.outputs || !Array.isArray(data.output.outputs))
          callback(data || 'error');
        else
          callback(null, data.output.outputs);
      },
      error: function(xhr, status, err) {
        callback(err);
      }
    });
  }

  var resultContainer = $('#corpusMatchResult');

  $('#corpusMatchSubmitButton').click(function(e) {
    e.preventDefault();

    resultContainer.html('');
    var corpusId = $('#corpusMatchId').val();
    var source = $('#corpusMatchSource').val();
    var target = $('#corpusMatchTarget').val();
    var input = $('#corpusMatchInput').val();

    launchCorpusMatch(corpusId, source, target, input, function(err, data) {
      if (data) {
        var html = input;
        data.forEach(function(output) {
          if(!output.matches || !Array.isArray(output.matches)) {
            return;
          }

          output.matches.forEach(function(match) {
            html = html.replace(match.source, '<span class="matchItem">' + match.target + '</span>')
          });
        });

        resultContainer.html(html);
      }
    });
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Corpus Match demo</title>
    <link href="corpus-match.css" rel="stylesheet">
    <link href="/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="/components/bootstrap/js/bootstrap.min.js"></script>
    <script src="corpus-match.js"></script>
</head>
<body>
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="corpusMatchId" placeholder="Corpus Id">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="corpusMatchSource" placeholder="Source">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="corpusMatchTarget" placeholder="Target">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="corpusMatchInput" placeholder="Input" size="80" value="SYSTRAN provides a set of RESTful APIs. Our services are ..." />
        </div>
        <button type="submit" class="btn btn-default" id="corpusMatchSubmitButton" data-t>Submit</button>
    </form>

    <div id="corpusMatchResult">
    </div>
</body>
</html>
#corpusMatchResult {
    border: 1px solid #DDDDDD;
    font-size: 14px;
    line-height: normal;
    margin-top: 30px;
    margin-right: 10px;
    padding: 10px;
    background-color: #F5F5F5;
    overflow: auto;
    max-height: 500px;
}

.matchItem {
    font-weight: bold;
    color: #0071B3;
    font-style: italic;
    box-shadow: 4px 4px 4px #888;
    padding-left: 5px;
    padding-right: 5px;
}