Skip to content

Commit

Permalink
Formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@motin
motin committed Feb 15, 2021
1 parent da56501 commit 1e94d78
Showing 1 changed file with 114 additions and 114 deletions.
228 changes: 114 additions & 114 deletions wasm/test_page/bergamot.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<!doctype html>
<html>
<head>
<head>
<link rel="icon" href="data:,">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
<style>
</head>
<style>
body, html, div {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
padding-left:1%;
padding-right:1%;
padding-bottom:1%;
padding-top:1%;
}
margin-left: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
padding-top: 1%;
}

textarea, #to, #from {
textarea, #to, #from {
width: 100%;
max-width: 100%;
}
}

div {
div {
float: left;
width: 80%;
}
</style>
<body>
}
</style>
<body>

<div id="divradios">
<div id="divradios">
<label>Choose the model to use</label>
<input type="radio" name="modellang" value="enes" checked/><label>English to Spanish</label>
<input type="radio" name="modellang" value="esen"/><label>Spanish to English</label>
<input type="button" id="load" value="Load Model"/>
</div>
</div>

<div id="divtranslation">
<div id="divtranslation">
<label for="from">From</label>
<textarea id="from" name="from">
hello world
Expand All @@ -46,113 +46,113 @@
<textarea id="to" name="to" readonly></textarea>
<br><br>
<input type="button" id="translate" value="Translate"/>
</div>
</div>

<div id="divlog">
<div id="divlog">
<label for="log">Log:</label><br>
<textarea id="log" name="log" rows="50" cols="75"></textarea>
</div>
</div>

<script>
<script>

var model, request, input = undefined;
const loadModel = (lang) => {
// Set the Model Configuration as YAML formatted string.
// For available configuration options, please check: https://marian-nmt.github.io/docs/cmd/marian-decoder/
// This example captures the most relevant options: model file, vocabulary files and shortlist file
// var modelConfig = "{\"models\":[\"/model.enes.npz\"],\"vocabs\":[\"/vocab.esen.spm\"],\"beam-size\":1}";//,\"shortlist\":[\"/lex.s2t\"]
const modelConfig = `{\"models\":[\"/model.${lang}.npz\"],\"vocabs\":[\"/vocab.esen.spm\",\"/vocab.esen.spm\"],\"beam-size\":1,\"shortlist\":[\"/lex.${lang}.s2t\"]}`;
var model, request, input = undefined;
const loadModel = (lang) => {
// Set the Model Configuration as YAML formatted string.
// For available configuration options, please check: https://marian-nmt.github.io/docs/cmd/marian-decoder/
// This example captures the most relevant options: model file, vocabulary files and shortlist file
// var modelConfig = "{\"models\":[\"/model.enes.npz\"],\"vocabs\":[\"/vocab.esen.spm\"],\"beam-size\":1}";//,\"shortlist\":[\"/lex.s2t\"]
const modelConfig = `{\"models\":[\"/model.${lang}.npz\"],\"vocabs\":[\"/vocab.esen.spm\",\"/vocab.esen.spm\"],\"beam-size\":1,\"shortlist\":[\"/lex.${lang}.s2t\"]}`;

// Instantiate the TranslationModel
if (model) model.delete();
model = new Module.TranslationModel(modelConfig);
// Instantiate the TranslationModel
if (model) model.delete();
model = new Module.TranslationModel(modelConfig);
}

const translate = (sentences) => {

// Instantiate the arguments of translate() API i.e. TranslationRequest and input (vector<string>)
var request = new Module.TranslationRequest();
let input = new Module.VectorString;

// Initialize the input
sentences.forEach(sentence => {
// prevent empty sentences - it breaks the translation
if (sentence.trim() === "") {
return;
}
input.push_back(sentence.trim())
})
// Access input (just for debugging)
console.log('Input size=', input.size());
/*
for (let i = 0; i < input.size(); i++) {
console.log(' val:' + input.get(i));
}
*/

// Translate the input; the result is a vector<TranslationResult>
let result = model.translate(input, request);
// Access original and translated text from each entry of vector<TranslationResult>
//console.log('Result size=', result.size(), ' - TimeDiff - ', (Date.now() - start)/1000);
const translatedSentences = [];
for (let i = 0; i < result.size(); i++) {
translatedSentences.push(result.get(i).getTranslatedText());
}
console.log({ translatedSentences });
request.delete();
input.delete();
return translatedSentences;
}

document.querySelector("#load").addEventListener("click", () => {
const lang = document.querySelector('input[name="modellang"]:checked').value;
let start = Date.now();
loadModel(lang)
log(`model ${lang} loaded in ${(Date.now() - start) / 1000} secs`);
//log('Model Alignment:', model.isAlignmentSupported());
});

const translateCall = () => {
const text = document.querySelector('#from').value;
const sentences = text.split("\n");
let wordCount = 0;
sentences.forEach(sentence => {
wordCount += sentence.trim().split(" ").filter(word => word.trim() !== "").length;
})
const start = Date.now();
const translatedSentences = translate(sentences);
const secs = (Date.now() - start) / 1000;
log(`Translation of ${translatedSentences.length} sentences (wordCount ${wordCount}) took ${secs} secs (${Math.round(wordCount / secs)} words per second)`);

const translate = (sentences) => {

// Instantiate the arguments of translate() API i.e. TranslationRequest and input (vector<string>)
var request = new Module.TranslationRequest();
let input = new Module.VectorString;

// Initialize the input
sentences.forEach(sentence => {
// prevent empty sentences - it breaks the translation
if (sentence.trim() === "") {
return;
}
input.push_back(sentence.trim())
})
// Access input (just for debugging)
console.log('Input size=', input.size());
/*
for (let i = 0; i < input.size(); i++) {
console.log(' val:' + input.get(i));
}
*/

// Translate the input; the result is a vector<TranslationResult>
let result = model.translate(input, request);
// Access original and translated text from each entry of vector<TranslationResult>
//console.log('Result size=', result.size(), ' - TimeDiff - ', (Date.now() - start)/1000);
const translatedSentences = [];
for (let i = 0; i < result.size(); i++) {
translatedSentences.push(result.get(i).getTranslatedText());
}
console.log({translatedSentences});
request.delete();
input.delete();
return translatedSentences;
document.querySelector('#to').value = translatedSentences.join("\n");
}

document.querySelector("#load").addEventListener("click", () => {
const lang = document.querySelector('input[name="modellang"]:checked').value;
let start = Date.now();
loadModel(lang)
log(`model ${lang} loaded in ${(Date.now() - start)/1000} secs`);
//log('Model Alignment:', model.isAlignmentSupported());
});

const translateCall = () => {
const text = document.querySelector('#from').value;
const sentences = text.split("\n");
let wordCount = 0;
sentences.forEach(sentence => {
wordCount += sentence.trim().split(" ").filter(word => word.trim() !== "").length;
})
const start = Date.now();
const translatedSentences = translate(sentences);
const secs = (Date.now() - start) / 1000;
log(`Translation of ${translatedSentences.length} sentences (wordCount ${wordCount}) took ${secs} secs (${Math.round(wordCount / secs)} words per second)`);

document.querySelector('#to').value = translatedSentences.join("\n");
}
document.querySelector("#translate").addEventListener("click", () => {
translateCall();
});

document.querySelector("#translate").addEventListener("click", () => {
document.querySelector("#from").addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
translateCall();
});
}
});

document.querySelector("#from").addEventListener('keyup', function (event) {
if (event.keyCode === 13) {
translateCall();
}
});
const log = (message) => {
document.querySelector("#log").value += message + "\n";
}

const log = (message) => {
document.querySelector("#log").value += message + "\n";
const start = Date.now();
let moduleLoadStart;
var Module = {
preRun: [function() {
log(`Time until Module.preRun: ${(Date.now() - start) / 1000} secs`);
moduleLoadStart = Date.now();
}],
onRuntimeInitialized: function() {
log(`Wasm Runtime initialized (preRun -> onRuntimeInitialized) in ${(Date.now() - moduleLoadStart) / 1000} secs`);
}

const start = Date.now();
let moduleLoadStart;
var Module = {
preRun: [function() {
log(`Time until Module.preRun: ${(Date.now() - start)/1000} secs`);
moduleLoadStart = Date.now();
}],
onRuntimeInitialized: function() {
log(`Wasm Runtime initialized (preRun -> onRuntimeInitialized) in ${(Date.now() - moduleLoadStart)/1000} secs`);
}
};
</script>
<script src="bergamot-translator-worker.js"></script>
};
</script>
<script src="bergamot-translator-worker.js"></script>
</body>
</html>

0 comments on commit 1e94d78

Please sign in to comment.