2020-12-19 17:40:37 -05:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2020-12-21 11:10:44 -05:00
< title > LibreTranslate - Free and Open Source Machine Translation API< / title >
2021-01-10 08:59:07 +00:00
< link rel = "shortcut icon" href = "{{ url_for('static', filename='favicon.ico') }}" >
2021-10-09 00:32:36 -04:00
< meta name = "description" content = "Free and Open Source Machine Translation API. 100% self-hosted, offline capable and easy to setup. Run your own API server in just a few minutes." >
2020-12-20 19:11:18 -05:00
< meta name = "keywords" content = "translation,api" >
2020-12-20 14:03:53 -05:00
2020-12-21 11:10:44 -05:00
< meta property = "og:title" content = "LibreTranslate - Free and Open Source Machine Translation API" / >
2020-12-20 19:11:18 -05:00
< meta property = "og:type" content = "website" / >
< meta property = "og:url" content = "https://libretranslate.com" / >
< meta property = "og:image" content = "https://user-images.githubusercontent.com/1951843/102724116-32a6df00-42db-11eb-8cc0-129ab39cdfb5.png" / >
2020-12-21 11:10:44 -05:00
< meta property = "og:description" name = "description" class = "swiftype" content = "Free and Open Source Machine Translation API. 100% self-hosted, no limits, no ties to proprietary services. Run your own API server in just a few minutes." / >
2020-12-20 14:03:53 -05:00
2021-05-16 10:42:58 -04:00
< script src = "{{ url_for('static', filename='js/vue@2.js') }}" > < / script >
2020-12-19 17:40:37 -05:00
<!-- Compiled and minified CSS -->
2021-05-16 10:42:58 -04:00
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/materialize.min.css') }}" >
2021-06-02 22:54:06 +02:00
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/material-icons.css') }}" / >
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/prism.min.css') }}" / >
2021-10-09 18:25:28 +02:00
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/main.css') }}?v={{ version }}" / >
2020-12-20 14:03:53 -05:00
{% if gaId %}
<!-- Global site tag (gtag.js) - Google Analytics -->
< script async src = "https://www.googletagmanager.com/gtag/js?id={{ gaId }}" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ gaId }}');
< / script >
2021-06-02 22:54:06 +02:00
{% endif %}
2020-12-19 17:40:37 -05:00
< / head >
2021-06-02 22:54:06 +02:00
2020-12-19 17:40:37 -05:00
< body >
2021-06-02 22:54:06 +02:00
< header >
< nav class = "blue lighten-1" role = "navigation" >
< div class = "nav-wrapper container" >
< a id = "logo-container" href = "/" class = "brand-logo" >
2021-06-12 12:18:21 -04:00
< img src = "{{ url_for('static', filename='icon.svg') }}" class = "logo" > LibreTranslate
2021-06-02 22:54:06 +02:00
< / a >
< ul class = "right hide-on-med-and-down" >
< li > < a href = "/docs" > API Docs< / a > < / li >
2021-06-12 12:18:21 -04:00
< li > < a href = "https://github.com/LibreTranslate/LibreTranslate" rel = "noopener noreferrer" > GitHub< / a > < / li >
2021-06-02 22:54:06 +02:00
{% if api_keys %}
< li > < a href = "javascript:setApiKey()" title = "Set API Key" > < i class = "material-icons" > vpn_key< / i > < / a > < / li >
{% endif %}
< / ul >
< ul id = "nav-mobile" class = "sidenav" >
< li > < a href = "/docs" > API Docs< / a > < / li >
2021-06-12 12:18:21 -04:00
< li > < a href = "https://github.com/LibreTranslate/LibreTranslate" rel = "noopener noreferrer" > GitHub< / a > < / li >
2021-06-02 22:54:06 +02:00
{% if api_keys %}
< li > < a href = "javascript:setApiKey()" title = "Set API Key" > < i class = "material-icons" > vpn_key< / i > < / a > < / li >
{% endif %}
< / ul >
< a href = "#" data-target = "nav-mobile" class = "sidenav-trigger" > < i class = "material-icons" > menu< / i > < / a >
< / div >
< / nav >
< / header >
< main id = "app" >
< div class = "section no-pad-bot center" v-if = "loading" >
< div class = "container" >
< div class = "row" >
< div class = "preloader-wrapper active" >
< div class = "spinner-layer spinner-blue-only" >
< div class = "circle-clipper left" >
< div class = "circle" > < / div >
< / div > < div class = "gap-patch" >
< div class = "circle" > < / div >
< / div > < div class = "circle-clipper right" >
< div class = "circle" > < / div >
< / div >
< / div >
< / div >
2020-12-20 11:55:56 -05:00
< / div >
< / div >
< / div >
2021-06-02 22:54:06 +02:00
< div v-else-if = "error" >
< div class = "section no-pad-bot" >
< div class = "container" >
< div class = "row" >
< div class = "col s12 m7" >
< div class = "card horizontal" >
< div class = "card-stacked" >
< div class = "card-content" >
< i class = "material-icons" > warning< / i > < p > [[ error ]]< / p >
< / div >
< div class = "card-action" >
< a href = "#" @ click = "dismissError" > Dismiss< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
2020-12-20 13:45:34 -05:00
< / div >
< / div >
2021-06-02 22:54:06 +02:00
< div v-else >
< div class = "section no-pad-bot" >
< div class = "container" >
< div class = "row" >
< h3 class = "header center" > Translation API< / h3 >
2021-10-24 12:53:52 +02:00
< div class = "col s12 mb-1" >
2021-10-24 13:15:36 +02:00
< button type = "button" class = "btn btn-switch-type" @ click = "switchType('text')" :class = "{'active': translationType === 'text'}" > < i class = "material-icons left" > title< / i > Translate text< / button >
< button type = "button" class = "btn btn-switch-type" @ click = "switchType('files')" :class = "{'active': translationType === 'files'}" > < i class = "material-icons left" > description< / i > Translate files< / button >
2021-10-24 12:53:52 +02:00
< / div >
2020-12-20 11:55:56 -05:00
< form class = "col s12" >
2021-06-02 22:54:06 +02:00
< div class = "row mb-0" >
< div class = "col s6 language-select" >
< span > Translate from< / span >
< select class = "browser-default" v-model = "sourceLang" ref = "sourceLangDropdown" @ change = "handleInput" >
< template v-for = "option in langs" >
< option :value = "option.code" > [[ option.name ]]< / option >
< / template >
< / select >
< / div >
< div class = "col s6 language-select" >
< a href = "javascript:void(0)" @ click = "swapLangs" class = "btn-switch-language" >
< i class = "material-icons" > swap_horiz< / i >
2021-06-12 11:28:35 -04:00
< / a >
2021-06-02 22:54:06 +02:00
< span > Translate into< / span >
2021-06-13 19:11:58 +02:00
< select class = "browser-default" v-model = "targetLang" ref = "targetLangDropdown" @ change = "handleInput" >
2021-06-02 22:54:06 +02:00
< template v-for = "option in langs" >
< option v-if = "option.code !== 'auto'" :value = "option.code" > [[ option.name ]]< / option >
< / template >
2021-10-08 19:02:30 +02:00
< / select >
2020-12-20 13:45:34 -05:00
< / div >
2020-12-20 11:55:56 -05:00
< / div >
2021-06-02 22:54:06 +02:00
2021-10-24 13:15:36 +02:00
< div class = "row" v-if = "translationType === 'text'" >
2021-06-02 22:54:06 +02:00
< div class = "input-field textarea-container col s6" >
2021-06-11 20:30:09 +02:00
< label for = "textarea1" class = "sr-only" >
Text to translate
2021-10-08 19:02:30 +02:00
< / label >
2021-09-04 13:24:05 +02:00
< textarea id = "textarea1" v-model = "inputText" @ input = "handleInput" ref = "inputTextarea" dir = "auto" > < / textarea >
2021-06-02 22:54:06 +02:00
< button class = "btn-delete-text" title = "Delete text" @ click = "deleteText" >
< i class = "material-icons" > close< / i >
2021-10-08 19:02:30 +02:00
< / button >
2021-06-02 22:54:06 +02:00
< div class = "characters-limit-container" v-if = "charactersLimit !== -1" >
< label > [[ inputText.length ]] / [[ charactersLimit ]]< / label >
< / div >
< / div >
< div class = "input-field textarea-container col s6" >
2021-06-11 20:30:09 +02:00
< label for = "textarea2" class = "sr-only" >
Translated text
2021-10-08 19:02:30 +02:00
< / label >
2021-10-09 15:45:58 +02:00
< textarea id = "textarea2" v-model = "translatedText" ref = "translatedTextarea" dir = "auto" v-bind:readonly = "suggestions && !isSuggesting" > < / textarea >
2021-10-08 18:36:24 +02:00
< div class = "actions" >
2021-10-09 15:45:58 +02:00
< button v-if = "suggestions && !loadingTranslation && inputText.length && !isSuggesting" class = "btn-action" @ click = "suggestTranslation" >
2021-10-08 18:36:24 +02:00
< i class = "material-icons" > edit< / i >
< / button >
2021-10-09 15:45:58 +02:00
< button v-if = "suggestions && !loadingTranslation && inputText.length && isSuggesting" class = "btn-action btn-blue" @ click = "closeSuggestTranslation" >
2021-10-08 19:02:30 +02:00
< span > Cancel< / span >
2021-10-08 18:36:24 +02:00
< / button >
2021-10-09 15:45:58 +02:00
< button v-if = "suggestions && !loadingTranslation && inputText.length && isSuggesting" :disabled = "!canSendSuggestion" class = "btn-action btn-blue" @ click = "sendSuggestion" >
2021-10-08 19:02:30 +02:00
< span > Send< / span >
< / button >
< button v-if = "!isSuggesting" class = "btn-action btn-copy-translated" @ click = "copyText" >
2021-10-08 18:36:24 +02:00
< span > [[ copyTextLabel ]]< / span > < i class = "material-icons" > content_copy< / i >
< / button >
< / div >
2021-10-08 19:02:30 +02:00
< div class = "position-relative" >
2021-06-11 20:30:09 +02:00
< div class = "progress translate" v-if = "loadingTranslation" >
< div class = "indeterminate" > < / div >
2021-10-08 19:02:30 +02:00
< / div >
2021-06-02 22:54:06 +02:00
< / div >
< / div >
2021-01-18 10:06:43 -05:00
< / div >
2021-10-24 13:15:36 +02:00
< div class = "row" v-if = "translationType === 'files'" >
2021-10-24 13:22:44 +02:00
< div class = "file-dropzone" >
2021-10-24 17:38:53 +02:00
< div v-if = "inputFile === false" class = "dropzone-content" >
2021-10-24 16:57:45 +02:00
< span > Supported file format: [[ supportedFilesFormatFormatted ]]< / span >
2021-10-24 13:22:44 +02:00
< form action = "#" >
< div class = "file-field input-field" >
< div class = "btn" >
< span > File< / span >
2021-10-24 17:41:29 +02:00
< input type = "file" :accept = "supportedFilesFormatFormatted" @ change = "handleInputFile" ref = "fileInputRef" >
2021-10-24 13:22:44 +02:00
< / div >
< div class = "file-path-wrapper hidden" >
< input class = "file-path validate" type = "text" >
< / div >
< / div >
< / form >
< / div >
2021-10-24 17:38:53 +02:00
< div v-if = "inputFile !== false" class = "dropzone-content" >
< div class = "card" >
< div class = "card-content" >
< div class = "row" >
< div class = "col s10" >
< p > [[ inputFile.name ]]< / p >
< / div >
< div class = "col s2" >
2021-10-24 19:14:09 +02:00
< button v-if = "loadingFileTranslation !== true" @ click = "removeFile" class = "btn-flat" >
2021-10-24 17:38:53 +02:00
< i class = "material-icons" > close< / i >
< / button >
< / div >
< / div >
< / div >
< / div >
2021-10-24 19:14:09 +02:00
< button @ click = "translateFile" v-if = "loadingFileTranslation === false" class = "btn" > Translate< / button >
< div class = "progress" v-if = "loadingFileTranslation" >
< div class = "indeterminate" > < / div >
< / div >
2021-10-24 17:38:53 +02:00
< / div >
2021-10-24 13:15:36 +02:00
< / div >
< / div >
2020-12-20 11:55:56 -05:00
< / form >
2021-06-02 22:54:06 +02:00
< / div >
< / div >
< / div >
2021-06-11 20:05:59 +02:00
< div class = "section no-pad-bot" >
2021-06-02 22:54:06 +02:00
< div class = "container" >
< div class = "row center" >
< div class = "col s12 m12" >
2020-12-20 11:55:56 -05:00
< div class = "row center" >
2020-12-20 13:45:34 -05:00
< div class = "col s12 m12 l6 left-align" >
2021-06-13 19:11:58 +02:00
< p class = "mb-0" > Request< / p >
< pre class = "code mt-0" > < code class = "language-javascript" v-html = "$options.filters.highlight(requestCode)" >
2021-06-02 22:54:06 +02:00
< / code > < / pre >
2020-12-20 11:55:56 -05:00
< / div >
2020-12-20 13:45:34 -05:00
< div class = "col s12 m12 l6 left-align" >
2021-06-13 19:11:58 +02:00
< p class = "mb-0" > Response< / p >
< pre class = "code mt-0" > < code class = "language-javascript" v-html = "$options.filters.highlight(output)" >
2021-06-02 22:54:06 +02:00
< / code > < / pre >
2020-12-20 11:55:56 -05:00
< / div >
< / div >
2021-06-02 22:54:06 +02:00
< / div >
2020-12-20 11:55:56 -05:00
< / div >
< / div >
2021-06-02 22:54:06 +02:00
< / div >
{% if web_version %}
2021-06-11 20:05:59 +02:00
< div class = "section no-pad-bot" >
2021-06-02 22:54:06 +02:00
< div class = "container" >
< div class = "row center" >
< div class = "col s12 m12" >
2021-10-09 00:32:36 -04:00
< h3 class = "header" > Open Source Machine Translation API< / h3 >
< h4 class = "header" > 100% Self-Hosted. Offline Capable. Easy to Setup.< / h4 >
2021-06-12 12:18:21 -04:00
< br / > < a class = "waves-effect waves-light btn btn-large" href = "https://github.com/LibreTranslate/LibreTranslate" rel = "noopener noreferrer" > < i class = "material-icons left" > cloud_download< / i > Download< / a >
2021-06-02 22:54:06 +02:00
< br / > < br / > < br / >
< / div >
< / div >
< / div >
< / div >
{% endif %}
2020-12-20 23:47:24 -05:00
< / div >
2021-06-02 22:54:06 +02:00
< / main >
< footer class = "page-footer blue darken-3" >
2020-12-20 11:55:56 -05:00
< div class = "container" >
2021-06-02 22:54:06 +02:00
< div class = "row" >
< div class = "col l12 s12" >
< h5 class = "white-text" > LibreTranslate< / h5 >
< p class = "grey-text text-lighten-4" > Free and Open Source Machine Translation API< / p >
2021-06-11 20:05:59 +02:00
< p > < a class = "grey-text text-lighten-4" href = "https://www.gnu.org/licenses/agpl-3.0.en.html" rel = "noopener noreferrer" > License: AGPLv3< / a > < / p >
2021-06-02 22:54:06 +02:00
< p > < a class = "grey-text text-lighten-4" href = "/javascript-licenses" rel = "jslicense" > JavaScript license information< / a > < / p >
{% if web_version %}
< p >
2021-06-12 12:22:43 -04:00
This public API should be used for testing, personal or infrequent use. If you're going to run an application in production, please < a href = "https://github.com/LibreTranslate/LibreTranslate" class = "grey-text text-lighten-4" style = "text-decoration: underline;" rel = "noopener noreferrer" > host your own server< / a > or < a class = "grey-text text-lighten-4" href = "https://github.com/LibreTranslate/LibreTranslate#mirrors" style = "text-decoration: underline;" rel = "noopener noreferrer" > get an API key< / a > .
2021-06-02 22:54:06 +02:00
< / p >
{% endif %}
< / div >
< / div >
2020-12-20 11:55:56 -05:00
< / div >
2021-06-02 22:54:06 +02:00
< div class = "footer-copyright center" >
< p >
2021-06-12 12:18:21 -04:00
Made with ❤ by < a class = "grey-text text-lighten-3" href = "https://github.com/LibreTranslate/LibreTranslate/graphs/contributors" rel = "noopener noreferrer" > LibreTranslate Contributors< / a > and powered by < a class = "grey-text text-lighten-3" href = "https://github.com/argosopentech/argos-translate/" rel = "noopener noreferrer" > Argos Translate< / a >
2021-06-02 22:54:06 +02:00
< / p >
< / div >
< / footer >
2021-01-10 08:07:56 +00:00
2021-06-02 22:54:06 +02:00
< script src = "{{ url_for('static', filename='js/materialize.min.js') }}" > < / script >
< script >
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109& dn=agpl-3.0.txt AGPL-3.0
window.Prism = window.Prism || {};
window.Prism.manual = true;
// @license-end
< / script >
2021-10-09 18:16:50 +02:00
< script src = "{{ url_for('static', filename='js/prism.min.js') }}" > < / script >
2021-10-09 18:25:28 +02:00
< script src = "{{ url_for('static', filename='js/app.js') }}?v={{ version }}" > < / script >
2020-12-19 17:40:37 -05:00
< / body >
2021-01-17 17:58:22 +01:00
< / html >
