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()

2
install_models.py Normal file → Executable file
View file

@ -1,3 +1,5 @@
#!/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__":

8
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,6 +35,12 @@ def langs():
@app.route("/translate", methods=['POST']) @app.route("/translate", methods=['POST'])
def translate(): def translate():
if request.is_json:
json = request.get_json()
q = json.get('q')
source_lang = json.get('source')
target_lang = json.get('target')
else:
q = request.values.get("q") q = request.values.get("q")
source_lang = request.values.get("source") source_lang = request.values.get("source")
target_lang = request.values.get("target") target_lang = request.values.get("target")

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

213
static/index.html
View file

@ -8,8 +8,23 @@
<!-- 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
textarea.materialize-textarea{height: 6rem;} 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> </style>
</head> </head>
<body> <body>
@ -28,6 +43,27 @@
</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">
@ -37,35 +73,36 @@
<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>
</div>
<div class="input-field col s5">
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @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>Target</label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="input-field col s6"> <div class="input-field col s6">
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea> <textarea id="textarea1" class="materialize-textarea" v-model="inputText" @input="handleInput" ref="inputTextarea"></textarea>
<label for="textarea1">Input Text</label> <label for="textarea1">Input Text</label>
</div> </div>
<div class="input-field col s6"> <div class="input-field col s6">
<div class="progress"> <div>
<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 class="indeterminate"></div>
</div></label>
</div> </div>
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea>
<label for="textarea1">Translated Text</label>
</div> </div>
</div> </div>
</form> </form>
@ -84,13 +121,16 @@
<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">
<p>Response</p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(output)">
</code></pre>
</div> </div>
</div> </div>
@ -102,16 +142,18 @@
</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>
<p><a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html">License: AGPLv3</a></p>
</div> </div>
<div class="col l4 offset-l2 s12"> <div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5> <!-- <h5 class="white-text">Links</h5>
@ -131,22 +173,34 @@
</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: {
BaseUrl: BaseUrl,
loading: true, loading: true,
error: "", error: "",
langs: [], langs: [],
sourceLang: "", sourceLang: "",
targetLang: "" targetLang: "",
loadingTranslation: false,
inputText: "",
translatedText: "",
output: ""
}, },
mounted: function(){ mounted: function(){
var self = this; var self = this;
@ -157,8 +211,23 @@ document.addEventListener('DOMContentLoaded', 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);
if (self.langs.length === 0){
self.loading = false;
self.error = "No languages available. Did you install the models correctly?"
return;
}
self.sourceLang = self.langs[0].code; self.sourceLang = self.langs[0].code;
self.targetLang = self.langs[1].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;
@ -175,6 +244,104 @@ document.addEventListener('DOMContentLoaded', function(){
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);
}
} }
}); });