predictionary
Version:
JavaScript dictionary-based word prediction library.
187 lines (175 loc) • 7.61 kB
HTML
<html lang="en">
<head>
<title>Predictionary Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="Ms_y5HqnQoFb0qKLvbuU5UxHMNmbY4CNbpkQk2bgy4w"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="custom.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
<script src="../dist/predictionary.min.js"></script>
</head>
<body>
<div id="app">
<h1>Predictionary</h1>
<h2>General information</h2>
<div class="row">
<p class="ten columns">
Predictionary is a simple JavaScript dictionary-based word prediction library with self-learning abilities.
This page shows a simple demo of Predictionary in use, where words are suggested and the dictionary is refined
as there is text typed in the textarea.
</p>
</div>
<div class="row">
<p class="ten columns">
For more information about Predictionary visit:<br/>
<a href="https://github.com/asterics/predictionary">Github project</a><br/>
<a href="https://asterics.github.io/predictionary/docs/Predictionary.html">API Documentation</a>
</p>
</div>
<h2>Demo</h2>
<div class="row">
<label for="selectLang" class="two columns">Use dictionaries: </label>
<select id="selectLang" class="four columns" @change="useDictionaries(event.target.value)">
<option selected value='["DICT_EN", "DICT_DE"]'>German + English</option>
<option value='["DICT_EN"]'>English</option>
<option value='["DICT_DE"]'>German</option>
<option value='[]'>No Dictionaries</option>
</select>
</div>
<div class="row">
<label for="inputNumber" class="two columns">Number of suggestions: </label>
<input type="number" id="inputNumber" class="four columns" v-model="nrOfSuggestions" min="1" max="30"
@change="refreshSuggestions"/>
</div>
<div class="row">
<div class="nine columns offset-by-two">
<input type="checkbox" id="chklearnFromChosen" v-model="learnFromChosen" style="display: inline"/>
<label for="chklearnFromChosen" style="display: inline">learn from chosen suggestions</label>
</div>
</div>
<div class="row">
<div class="nine columns offset-by-two">
<input type="checkbox" id="chklearnFromType" v-model="learnFromType" style="display: inline"/>
<label for="chklearnFromType" style="display: inline">learn from typing</label>
</div>
</div>
<br/>
<span>Type in the textfield, use arrow keys [Up], [Down] and [Enter] in order to choose suggestions:</span>
<div class="row">
<textarea id="textarea" class="six columns" v-model="input" @input="updateText"
@keyup.enter="choose" @keyup.up="choosePrev" @keyup.down="chooseNext"></textarea>
</div>
<div>
<span>Suggestions: </span>
<div class="row" v-for="(suggestion, index) in suggestions">
<button v-if="index === predictionIndex" @click="add(suggestion)" class="two columns chosen">
{{suggestion}}
</button>
<button v-if="index !== predictionIndex" @click="add(suggestion)" class="two columns">{{suggestion}}
</button>
</div>
</div>
</div>
<script>
let predictionary = Predictionary.instance();
let DICT_DE = 'DICT_DE';
let DICT_EN = 'DICT_EN';
let startTime = new Date().getTime();
$.get('words_de.txt').then(function (result) {
parseWords(result, DICT_DE);
console.log('finish DE after: ' + (new Date().getTime() - startTime))
});
$.get('words_en.txt').then(function (result) {
parseWords(result, DICT_EN);
console.log('finish EN after: ' + (new Date().getTime() - startTime))
});
function parseWords(string, dictionaryKey) {
predictionary.parseWords(string, {
elementSeparator: '\n',
rankSeparator: ' ',
wordPosition: 2,
rankPosition: 0,
addToDictionary: dictionaryKey
});
}
let vueApp = new Vue({
el: '#app',
data: {
input: '',
suggestions: [],
nrOfSuggestions: 10,
predictionIndex: null,
learnFromType: true,
learnFromChosen: true,
timeoutHandler: null
},
methods: {
updateText: function () {
let thiz = this;
if (thiz.learnFromType) {
predictionary.learnFromInput(thiz.input);
}
clearTimeout(thiz.timeoutHandler);
thiz.timeoutHandler = setTimeout(function () {
thiz.refreshSuggestions();
}, 300);
},
add: function (suggestion) {
this.input = predictionary.applyPrediction(this.input, suggestion, {
dontLearn: !this.learnFromChosen
});
$('#textarea').focus();
this.predictionIndex = null;
this.refreshSuggestions();
if (this.learnFromType) {
predictionary.learnFromInput(this.input);
}
},
choose: function () {
if (this.predictionIndex === null) {
return;
}
if (this.input[this.input.length - 1] === '\n') this.input = this.input.slice(0, -1);
this.add(this.suggestions[this.predictionIndex]);
},
chooseNext: function (event) {
setCursorToLastPosition();
if (this.predictionIndex === null) {
this.predictionIndex = 0;
} else {
this.predictionIndex = (this.predictionIndex < this.suggestions.length - 1) ? this.predictionIndex + 1 : null;
}
},
choosePrev: function (event) {
setCursorToLastPosition();
if (this.predictionIndex === null) {
this.predictionIndex = this.suggestions.length - 1;
} else {
this.predictionIndex = this.predictionIndex > 0 ? this.predictionIndex - 1 : null;
}
},
useDictionaries: function (keys) {
predictionary.useDictionaries(JSON.parse(keys));
this.refreshSuggestions();
},
refreshSuggestions: function () {
this.suggestions = predictionary.predict(this.input, {maxPredictions: this.nrOfSuggestions});
if (this.suggestions.length === 1) {
this.predictionIndex = 0;
} else {
this.predictionIndex = null;
}
}
}
});
function setCursorToLastPosition() {
let val = $('#textarea').val();
$('#textarea').val("").val(val).focus();
}
setCursorToLastPosition();
</script>
</body>
</html>