rafaelcaricio/LibreTranslate
1
0
Fork 0
forked from mirrors/LibreTranslate
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI mostly working

Browse source
This commit is contained in:
Piero Toffanin 2020-12-20 11:55:56 -05:00
parent 1062ef2713
commit e9609ddd64
6 changed files with 300 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/init.py
View file

@ -1,10 +1,13 @@
import os import os
from argostranslate import translate from pathlib import Path
import os, glob, shutil, zipfile from argostranslate import settings
INSTALLED_MODELS_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "installed_models")) INSTALLED_MODELS_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "installed_models"))
os.environ["ARGOS_TRANSLATE_PACKAGES_DIR"] = INSTALLED_MODELS_DIR os.environ["ARGOS_TRANSLATE_PACKAGES_DIR"] = INSTALLED_MODELS_DIR
settings.package_dirs = [Path(INSTALLED_MODELS_DIR)]
from argostranslate import translate
import os, glob, shutil, zipfile
def boot(): def boot():
check_and_install_models() check_and_install_models()

4
install_models.py Normal file → Executable file
View file

@ -1,4 +1,6 @@
#!/usr/bin/env python
from app.init import check_and_install_models from app.init import check_and_install_models
if __name__ == "__main__": if __name__ == "__main__":
check_and_install_models(force=True) check_and_install_models(force=True)

14
main.py
View file

@ -1,7 +1,7 @@
from app.init import boot
import argparse import argparse
from flask import Flask, render_template, jsonify, request, abort, send_from_directory from flask import Flask, render_template, jsonify, request, abort, send_from_directory
from app.language import languages from app.language import languages
from app.init import boot
parser = argparse.ArgumentParser(description='LibreTranslate - Free and Open Source Translation API') parser = argparse.ArgumentParser(description='LibreTranslate - Free and Open Source Translation API')
parser.add_argument('host', type=str, parser.add_argument('host', type=str,
@ -35,9 +35,15 @@ def langs():
@app.route("/translate", methods=['POST']) @app.route("/translate", methods=['POST'])
def translate(): def translate():
q = request.values.get("q") if request.is_json:
source_lang = request.values.get("source") json = request.get_json()
target_lang = request.values.get("target") q = json.get('q')
source_lang = json.get('source')
target_lang = json.get('target')
else:
q = request.values.get("q")
source_lang = request.values.get("source")
target_lang = request.values.get("target")
if not q: if not q:
abort(400, description="Invalid request: missing q parameter") abort(400, description="Invalid request: missing q parameter")

2
models

@ -1 +1 @@
Subproject commit 0492a7619847d74f3ec6e7e2b6707e00103eebd0 Subproject commit 3d5ca0a2c3c302287339b2944329f767ac1673f4

2
requirements.txt
View file

@ -1,2 +1,2 @@
argostranslate==1.0.3 argostranslate==1.0.3
Flask==1.1.2

391
static/index.html
View file

@ -6,162 +6,231 @@
<title>LibreTranslate - Free and Open Source Translation API</title> <title>LibreTranslate - Free and Open Source Translation API</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Compiled and minified CSS --> <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
textarea.materialize-textarea{height: 6rem;}
</style> <style type="text/css">
textarea.materialize-textarea{height: 120px;}
.code{
font-size: 90%;
border-radius: 4px;
padding: 4px;
border: 1px solid #9e9e9e;
background: #fbfbfb;
overflow: auto;
font-family: monospace;
min-height: 280px;
}
.progress.translate{
position: absolute;
}
</style>
</head> </head>
<body> <body>
<nav class="blue lighten-1" role="navigation"> <nav class="blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo"><i class="material-icons">translate</i> LibreTranslate</a> <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo"><i class="material-icons">translate</i> LibreTranslate</a>
<ul class="right hide-on-med-and-down"> <ul class="right hide-on-med-and-down">
<li><a href="https://github.com/uav4geo/LibreTranslate">Documentation</a></li> <li><a href="https://github.com/uav4geo/LibreTranslate">Documentation</a></li>
<li><a href="https://github.com/uav4geo/LibreTranslate">GitHub</a></li> <li><a href="https://github.com/uav4geo/LibreTranslate">GitHub</a></li>
</ul> </ul>
<ul id="nav-mobile" class="sidenav"> <ul id="nav-mobile" class="sidenav">
<li><a href="https://github.com/uav4geo/LibreTranslate">Documentation</a></li> <li><a href="https://github.com/uav4geo/LibreTranslate">Documentation</a></li>
<li><a href="https://github.com/uav4geo/LibreTranslate">GitHub</a></li> <li><a href="https://github.com/uav4geo/LibreTranslate">GitHub</a></li>
</ul> </ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a> <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div> </div>
</nav> </nav>
<div id="app"> <div 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>
</div>
</div>
</div>
<div v-else-if="error">
{{ error }}: TODO
</div>
<div v-else>
<div class="section no-pad-bot"> <div class="section no-pad-bot">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<h3 class="header center">Translation API</h3> <h3 class="header center">Translation API</h3>
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<form class="col s12"> <form class="col s12">
<div class="row"> <div class="row">
<div class="input-field col s6"> <div class="input-field col s5">
<select v-model="sourceLang" ref="sourceLangDropdown"> <select class="browser-default" v-model="sourceLang" ref="sourceLangDropdown"@change="handleInput">
<template v-for="option in langs"> <template v-for="option in langs">
<option :value="option.code">{{ option.name }}</option> <option :value="option.code">{{ option.name }}</option>
</template> </template>
</select> </select>
<label>Source</label>
</div> </div>
<div class="input-field col s6"> <div class="col s2 center">
<select v-model="targetLang" ref="targetLangDropdown"> <a href="javascript:void(0)" @click="swapLangs" class="waves-effect waves-teal btn-flat btn-large"><i class="material-icons">swap_horiz</i></a>
<template v-for="option in langs">
<option :value="option.code">{{ option.name }}</option>
</template>
</select>
<label>Target</label>
</div> </div>
</div> <div class="input-field col s5">
<div class="row"> <select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<div class="input-field col s6"> <template v-for="option in langs">
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea> <option :value="option.code">{{ option.name }}</option>
<label for="textarea1">Input Text</label> </template>
</div> </select>
<div class="input-field col s6"> </div>
<div class="progress"> </div>
<div class="indeterminate"></div> <div class="row">
</div> <div class="input-field col s6">
<textarea id="textarea1" class="materialize-textarea" v-model="inputText" @input="handleInput" ref="inputTextarea"></textarea>
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea> <label for="textarea1">Input Text</label>
<label for="textarea1">Translated Text</label> </div>
</div> <div class="input-field col s6">
</div> <div>
</form> <textarea id="textarea2" class="materialize-textarea" v-model="translatedText" ref="translatedTextarea"></textarea>
<label for="textarea2"><div class="progress translate" v-if="loadingTranslation">
<div class="indeterminate"></div>
</div></label>
</div>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section no-pad-bot" id="index-banner"> <div class="section no-pad-bot" id="index-banner">
<div class="container"> <div class="container">
<div class="row center"> <div class="row center">
<div class="col s12 m12"> <div class="col s12 m12">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<div class="row center"> <div class="row center">
<div class="col s12 m6"> <div class="col s12 m6 left-align">
<p><pre>{{ sourceLang }}</pre></p> <p>Request</p>
</div> <p>
<div class="col s12 m6"> <pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
<div class="progress"> </code></pre></p>
<div class="indeterminate"></div> </div>
</div> <div class="col s12 m6 left-align">
</div> <p>Response</p>
</div> <pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(output)">
</code></pre>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<footer class="page-footer blue darken-3"> <footer class="page-footer blue darken-3">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col l6 s12"> <div class="col l6 s12">
<h5 class="white-text">LibreTranslate</h5> <h5 class="white-text">LibreTranslate</h5>
<p class="grey-text text-lighten-4">Free and Open Source Translation API, licensed under the <a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a></p> <p class="grey-text text-lighten-4">Free and Open Source Translation API</p>
<p class="grey-text text-lighten-4"> <p class="grey-text text-lighten-4">
Made with ❤ by <a class="grey-text text-lighten-3" href="https://uav4geo.com">UAV4GEO</a> and powered by <a class="grey-text text-lighten-3" href="https://github.com/argosopentech/argos-translate/">Argos Translate</a> Made with ❤ by <a class="grey-text text-lighten-3" href="https://uav4geo.com">UAV4GEO</a> and powered by <a class="grey-text text-lighten-3" href="https://github.com/argosopentech/argos-translate/">Argos Translate</a>
</p> </p>
</div> <p><a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html">License: AGPLv3</a></p>
<div class="col l4 offset-l2 s12"> </div>
<!-- <h5 class="white-text">Links</h5> <div class="col l4 offset-l2 s12">
<ul> <!-- <h5 class="white-text">Links</h5>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li> <ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li> <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li> <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
</ul> --> <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
<div class="container"> </ul> -->
</div> <div class="container">
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="footer-copyright center"> <div class="footer-copyright center">
</div> </div>
</footer> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" ></script>
<script> <script>
// API host/endpoint // API host/endpoint
var BaseUrl = ''; var BaseUrl = window.location.protocol + "//" + window.location.host;
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
// var elems = document.querySelectorAll('select'); var elems = document.querySelectorAll('.sidenav');
// var instances = M.FormSelect.init(elems); var instances = M.Sidenav.init(elems);
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
loading: true, BaseUrl: BaseUrl,
error: "", loading: true,
langs: [], error: "",
sourceLang: "", langs: [],
targetLang: "" sourceLang: "",
targetLang: "",
loadingTranslation: false,
inputText: "",
translatedText: "",
output: ""
}, },
mounted: function(){ mounted: function(){
var self = this; var self = this;
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', BaseUrl + '/languages', true); request.open('GET', BaseUrl + '/languages', true);
request.onload = function() { request.onload = function() {
if (this.status >= 200 && this.status < 400) { if (this.status >= 200 && this.status < 400) {
// Success! // Success!
self.langs = JSON.parse(this.response); self.langs = JSON.parse(this.response);
self.sourceLang = self.langs[0].code; if (self.langs.length === 0){
self.targetLang = self.langs[1].code; self.loading = false;
self.error = "No languages available. Did you install the models correctly?"
return;
}
self.sourceLang = self.langs[0].code;
self.targetLang = self.langs[1].code;
// Set Spanish
for (var i = 1; i < self.langs.length; i++){
if (self.langs[i].code === "es"){
self.targetLang = "es";
}
}
self.loading = false;
} else { } else {
self.error = "Cannot load /languages"; self.error = "Cannot load /languages";
self.loading = false; self.loading = false;
} }
}; };
@ -173,8 +242,106 @@ document.addEventListener('DOMContentLoaded', function(){
request.send(); request.send();
}, },
updated: function(){ updated: function(){
M.FormSelect.init(this.$refs.sourceLangDropdown); M.FormSelect.init(this.$refs.sourceLangDropdown);
M.FormSelect.init(this.$refs.targetLangDropdown); M.FormSelect.init(this.$refs.targetLangDropdown);
if (this.inputText === ""){
this.$refs.inputTextarea.style.height = 150 + "px";
this.$refs.translatedTextarea.style.height = 150 + "px";
}else{
this.$refs.inputTextarea.style.height = Math.max(150, this.$refs.inputTextarea.scrollHeight) + "px";
this.$refs.translatedTextarea.style.height = Math.max(150, this.$refs.translatedTextarea.scrollHeight) + "px";
}
},
computed: {
requestCode: function(){
return ['const res = await fetch("' + this.BaseUrl + '/translate", {',
' method: "POST",',
' body: JSON.stringify({',
' q: "' + this.$options.filters.escape(this.inputText) + '",',
' source: "' + this.$options.filters.escape(this.sourceLang) + '",',
' target: "' + this.$options.filters.escape(this.targetLang) + '"',
' }),',
' headers: {',
' "Content-Type": "application/json"',
' });',
'',
'console.log(await res.json());'].join("\n");
}
},
filters: {
escape: function(v){
return v.replace('"', '\\\"');
},
highlight: function(v){
return Prism.highlight(v, Prism.languages.javascript, 'javascript');
}
},
methods: {
abortPreviousTransRequest: function(){
if (this.transRequest){
this.transRequest.abort();
this.transRequest = null;
}
},
swapLangs: function(){
var t = this.sourceLang;
this.sourceLang = this.targetLang;
this.targetLang = t;
this.inputText = this.translatedText;
this.translatedText = "";
this.handleInput();
},
handleInput: function(e){
if (this.timeout) clearTimeout(this.timeout);
this.timeout = null;
if (this.inputText === ""){
this.translatedText = "";
this.output = "";
this.abortPreviousTransRequest();
this.loadingTranslation = false;
return;
}
var self = this;
self.loadingTranslation = true;
this.timeout = setTimeout(function(){
self.abortPreviousTransRequest();
var request = new XMLHttpRequest();
self.transRequest = request;
var data = new FormData();
data.append("q", self.inputText);
data.append("source", self.sourceLang);
data.append("target", self.targetLang);
request.open('POST', BaseUrl + '/translate', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var res = JSON.parse(this.response);
if (res.translatedText !== undefined){
self.translatedText = res.translatedText;
self.loadingTranslation = false;
}
self.output = JSON.stringify(res, null, 4);
} else {
self.error = "Cannot call /translate";
self.loadingTranslation = false;
}
};
request.onerror = function() {
self.error = "Error while calling /translate";
self.loadingTranslation = false;
};
request.send(data);
}, 300);
}
} }
}); });