@tilde-nlp/ngx-translate
v5.0.14
Published
Tilde Translate box - solution for machine translating text and documents. Built with angular, but also exposed as web component.
Downloads
2,388
Readme
@tilde-nlp/ngx-translate
Tilde translator package with translation window components and services for Tilde MT api. It includes text and file translation.
Tilde Translate box
It is possible to include translate box in any website as webcomponent. To do this, you need to add <tilde-translate-box> tag with necessary properties.
In order to <tilde-translate-box> tag to work, you need to include compiled js file and components stylesheet file.
To include javascript file, you need to add following part somewhere in your head or body (depends on your web app and goals):
<script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>. This tag references translate box javascript file.
Including stylesheet is pretty much the same as javacsript, you need to add link in your project <link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">.
// INFO about specific parts for translate box
Note @latest part in the urls - this means that your page will always load latest version of library, which means library can change at any day with some new updates. If major version is updated, it may even break. Please evaluate best scenario. It might be good also to set it to specific version, to do that just replace @latest with version number, for example @5.0.5.
Integrating translatebox from javascript
If you are integrating from javascript, you can add parameters by appending translateBox element with properties in camelCase, which means if param name below is x-api-key, when using it in javascript, you should use it as xApiKey. Full list of params is visible below.
<script>
// create element for tilde-translate-box
var translateBox = document.createElement('tilde-translate-box');
// set mandatory params
translateBox.xApiKey='MY-X-API-KEY';
// set optional params as needed
translateBox.language="en";
document.body.appendChild(translateBox);
</script>Integrating translatebox from html
If you are integrating from html, you can add parameters by appending <tilde-translate-box></tilde-translate-box> tag. For example, if the parameter name is x-api-key and your value for this parameter is MY-API-KEY, your tag after modification would look like this: <tilde-translate-box x-api-key="MY-API-KEY"></tilde-translate-box>. Full list of params is visible below.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing Tilde Translate Box</title>
<base href="/">
<link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">
</head>
<body>
<tilde-translate-box x-api-key="MY-X-API-KEY"></tilde-translate-box>
<script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>
</body>
</html>Input params
Translate box has some mandatory parameters and some optional configuration settings than can be set from html or javascript. See integration examples for usage of params.
Translate box has following input params:
Mandatory params
Params that are mandatory and whose default values are null.
x-api-key - client authentication key. Contact support to get one.
Optional params
Translate box will work with default values that are described below.
allowed-file-types-auth-user - allowed file formats for authorized user default value [".doc", ".docx", ".docm", ".xlsx", ".pptx", ".odt", ".odp", ".ods", ".txt", ".html", ".htm", ".xhtml", ".xht", ".tmx", ".xlf", ".xlif", ".xliff", ".sdlxliff", ".sdlxlf", ".ttx", ".rtf", ".pages", ".tex", ".xml", ".json", ".sxw", ".pdf", ".csv", ".ttl", ".srt", ".png", ".jpg", ".jpeg", ".bmp"];
language - UI language code. default value en
default-language - UI fallback language. default value en
show-extensions - Show allowed extensions. default value true
contact-support - Wether should show contact support in nontification messages. default value true
is-auto-language-detection-enabled - Enable or disable auto detection of source language. defult value true