Skip to content
Snippets Groups Projects
Commit e9609ddd authored by Piero Toffanin's avatar Piero Toffanin
Browse files

UI mostly working

parent 1062ef27
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/init.py
+ 6
− 3
View file @ e9609ddd
import os
from argostranslate import translate
import os, glob, shutil, zipfile
from pathlib import Path
from argostranslate import settings
INSTALLED_MODELS_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "installed_models"))
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():
check_and_install_models()
......
install_models.py 100644 → 100755
+ 3
− 1
View file @ e9609ddd
#!/usr/bin/env python
from app.init import check_and_install_models
if __name__ == "__main__":
check_and_install_models(force=True)
\ No newline at end of file
check_and_install_models(force=True)
main.py
+ 10
− 4
View file @ e9609ddd
from app.init import boot
import argparse
from flask import Flask, render_template, jsonify, request, abort, send_from_directory
from app.language import languages
from app.init import boot
parser = argparse.ArgumentParser(description='LibreTranslate - Free and Open Source Translation API')
parser.add_argument('host', type=str,
......@@ -35,9 +35,15 @@ def langs():
@app.route("/translate", methods=['POST'])
def translate():
q = request.values.get("q")
source_lang = request.values.get("source")
target_lang = request.values.get("target")
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")
source_lang = request.values.get("source")
target_lang = request.values.get("target")
if not q:
abort(400, description="Invalid request: missing q parameter")
......
models @ 3d5ca0a2
Compare 0492a761...3d5ca0a2
Subproject commit 0492a7619847d74f3ec6e7e2b6707e00103eebd0
Subproject commit 3d5ca0a2c3c302287339b2944329f767ac1673f4
requirements.txt
+ 1
− 1
View file @ e9609ddd
argostranslate==1.0.3
Flask==1.1.2
static/index.html
+ 281
− 114
View file @ e9609ddd
......@@ -6,162 +6,231 @@
<title>LibreTranslate - Free and Open Source Translation API</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Compiled and minified 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">
<style type="text/css">
textarea.materialize-textarea{height: 6rem;}
</style>
<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://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
<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>
<body>
<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>
<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">GitHub</a></li>
</ul>
<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">GitHub</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
<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">
<li><a href="https://github.com/uav4geo/LibreTranslate">Documentation</a></li>
<li><a href="https://github.com/uav4geo/LibreTranslate">GitHub</a></li>
</ul>
<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">GitHub</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
<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="container">
<div class="row">
<h3 class="header center">Translation API</h3>
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<select v-model="sourceLang" ref="sourceLangDropdown">
<template v-for="option in langs">
<option :value="option.code">{{ option.name }}</option>
</template>
</select>
<label>Source</label>
<div class="container">
<div class="row">
<h3 class="header center">Translation API</h3>
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<form class="col s12">
<div class="row">
<div class="input-field col s5">
<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="input-field col s6">
<select v-model="targetLang" ref="targetLangDropdown">
<template v-for="option in langs">
<option :value="option.code">{{ option.name }}</option>
</template>
</select>
<label>Target</label>
<div class="col s2 center">
<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>
<div class="row">
<div class="input-field col s6">
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea>
<label for="textarea1">Input Text</label>
</div>
<div class="input-field col s6">
<div class="progress">
<div class="indeterminate"></div>
</div>
<textarea id="textarea1" rows="5" class="materialize-textarea"></textarea>
<label for="textarea1">Translated Text</label>
</div>
</div>
</form>
<div class="input-field col s5">
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<template v-for="option in langs">
<option :value="option.code">{{ option.name }}</option>
</template>
</select>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<textarea id="textarea1" class="materialize-textarea" v-model="inputText" @input="handleInput" ref="inputTextarea"></textarea>
<label for="textarea1">Input Text</label>
</div>
<div class="input-field col s6">
<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></label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row center">
<div class="container">
<div class="row center">
<div class="col s12 m12">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<div class="row center">
<div class="col s12 m6">
<p><pre>{{ sourceLang }}</pre></p>
</div>
<div class="col s12 m6">
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<div class="row center">
<div class="col s12 m6 left-align">
<p>Request</p>
<p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
</code></pre></p>
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue darken-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<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">
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>
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">LibreTranslate</h5>
<p class="grey-text text-lighten-4">Free and Open Source Translation API</p>
<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>
</p>
</div>
<div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</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 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul> -->
<div class="container">
</div>
</div>
</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>
<div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</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 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul> -->
<div class="container">
</div>
</div>
</div>
</div>
<div class="footer-copyright center">
</div>
</footer>
<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>
// API host/endpoint
var BaseUrl = '';
var BaseUrl = window.location.protocol + "//" + window.location.host;
document.addEventListener('DOMContentLoaded', function(){
// var elems = document.querySelectorAll('select');
// var instances = M.FormSelect.init(elems);
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
var app = new Vue({
el: '#app',
data: {
loading: true,
error: "",
langs: [],
sourceLang: "",
targetLang: ""
BaseUrl: BaseUrl,
loading: true,
error: "",
langs: [],
sourceLang: "",
targetLang: "",
loadingTranslation: false,
inputText: "",
translatedText: "",
output: ""
},
mounted: function(){
var self = this;
var request = new XMLHttpRequest();
var self = this;
var request = new XMLHttpRequest();
request.open('GET', BaseUrl + '/languages', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
self.langs = JSON.parse(this.response);
self.sourceLang = self.langs[0].code;
self.targetLang = self.langs[1].code;
// Success!
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.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 {
self.error = "Cannot load /languages";
self.loading = false;
self.error = "Cannot load /languages";
self.loading = false;
}
};
......@@ -173,8 +242,106 @@ document.addEventListener('DOMContentLoaded', function(){
request.send();
},
updated: function(){
M.FormSelect.init(this.$refs.sourceLangDropdown);
M.FormSelect.init(this.$refs.targetLangDropdown);
M.FormSelect.init(this.$refs.sourceLangDropdown);
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);
}
}
});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment