inmt/templates/gpt.html

671 строка
24 KiB
HTML

{% load static %}
<html>
<link type="text/css" rel="stylesheet" href="{% static 'materialize.css' %}" media="screen,projection"/>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="/static/js/pramukhime.js"></script>
<script type="text/javascript" src="/static/js/pramukhindic.js"></script>
<script type="text/javascript" src="/static/js/pramukhime-common.js"></script> -->
<script type="text/javascript" src="{% static 'materialize.js' %}"></script>
<script type="text/javascript">
// focus on textbox
// document.getElementById('typingarea').focus();
// Setup pramukhIME
// Add the keyboard plugin
// pramukhIME.addKeyboard("PramukhIndic");
// pramukhIME.addLanguage(PramukhIndic);
// pramukhIME.enable();
// // pramukhIME.onLanguageChange(scriptChangeCallback);
// pramukhIME.setLanguage("hindi","pramukhindic");
// Register call back (PRO VERSION ONLY)
// pramukhIME.on('languagechange', languageChangeCallback);
// Enable on whole page
</script>
<script type=text/javascript>
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
function resetcolors(elem, nums) {
for (i=0; i<nums; i++) {
$(elem + i).css({"background-color": "transparent"})
}
}
// function sharedStart(array){
// var A= array.concat().sort(),
// a1= A[0], a2= A[A.length-1], L= a1.length, i= 0;
// while(i<L && a1.charAt(i)=== a2.charAt(i)) i++;
// return a1.substring(0, i);
// }
function sharedStart(feed, partial) {
// console.log(partial, "||")
// var textlist = partial.split(" ")
// console.log(textlist)
// var part2text = textlist.pop()
// var part1text = textlist.join(" ")
// Implement algo which checks
lastspace = partial.lastIndexOf(" ")
part1text = partial.substring(0, lastspace)
part2text = partial.substring(lastspace+1)
// console.log(part1text, "|" , part2text)
var count = 0
if (part1text) {
newfeed = feed.replace(part1text + " ", '')
} else {
newfeed = feed
}
for (i=0; i<part2text.length; i++) {
if(part2text[i] === newfeed[i]){
count = count + 1;
} else {
break;
}
}
newfeedpre = newfeed.substring(0, count)
newfeedsuf = newfeed.substring(count)
if (newfeedpre == "" && newfeedsuf == "") {
return ""
}
return '<b>' + newfeedpre + '</b>' + newfeedsuf
}
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
function endsWithSpace(str) {
var endSpace = /\s$/;
if (endSpace.test(str)) {
return true
} else {
return false
}
}
function inputSpan(str) {
var strlist = str.split(" ");
var container = ""
for (k=0; k<strlist.length; k++) {
container += '<span class="hin_inp_part hin_inp_part' + k + '">' + strlist[k] + '</span> '
}
return container
}
function sentokenind(src, tgt, numsent) {
var regex = /[!?।|.]+(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/gi , result, srcindices = [], tgtindices = [];
var curspos = window.getSelection().getRangeAt(0).startOffset
var newsrc, newtgt;
var newsrcind, newtgtind;
while ( (result = regex.exec(src)) ) {
srcindices.push(result.index);
}
while ( (result = regex.exec(tgt)) ) {
tgtindices.push(result.index);
}
srcindices.unshift(0);
tgtindices.unshift(0);
console.log(srcindices, tgtindices)
var tgtbehindcurs = tgtindices.filter(function(ind) {
return (ind <= curspos);
})
console.log(curspos)
if (tgtbehindcurs.length >= numsent) {
newtgtind = tgtbehindcurs.slice(-1*numsent)[0]
newsrcind = srcindices.slice(tgtbehindcurs.length).slice(-1*numsent)[0]
} else {
newtgtind = 0;
newsrcind = 0;
}
newsrc = src.substring(newsrcind, srcindices[newsrcind + numsent])
newtgt = tgt.substring(newtgtind, curspos)
return [newsrc, newtgt]
}
function getCursor() {
console.log(window.getSelection().getRangeAt(0).startOffset)
}
// function spanner(stri) {
// return stri.replace(/[\s]{2,}/gi, " ")
// }
var numsent = 1;
$(document).ready(function(){
var searchRequest = null;
var debounceTimeout = null;
var searchInput = $("#partial");
var result = '';
var selecte = 0;
var outputs = [];
var highlight = $("#highlight").is(':checked');
var textlist = []
var part2text = ""
var part1text = ""
var searchEvents = function(partial){
if (searchRequest)
searchRequest.abort()
searchRequest = $.post('/gpt/follow', {
text: partial.clone().children().remove().end().text(),
csrfmiddlewaretoken: '{{ csrf_token }}',
}, function(data) {
// $("#result").text(data.result);
result = data.result.split("\n")
partialret = data.partial
selecte = 0;
finale = []
for(var i = 1; i < result.length; i++) {
finale.push(partial.clone().children().remove().end().text() + result[i])
}
result = finale
// All to do with the user input
if (selecte >= result.length) {
selecte = 0;
}
if (result[selecte].includes(partial.text())) {
partial.closest('.bmo').find('.suggest').text(result[selecte])
partial.closest('.bmo').find('.suggest').scrollTop(partial.scrollTop());
}
var container = $('<div />');
var countcontainer = 0
finalresult = []
for(var i = 0; i < result.length; i++) {
var repres = sharedStart(result[i], partialret)
// console.log(repres)
if (repres !== "") {
container.append('<span id="res'+countcontainer+'" class="res'+countcontainer+' spanres"> ' + repres + '</span>');
countcontainer += 1;
finalresult.push(result[i])
// console.log(countcontainer, finalresult)
}
}
partial.closest('.bmo').find('.dropdown').html(container);
resetcolors('.res', $('.spanres').length)
$('.res' + selecte).css({"background-color": "#eee"})
if (countcontainer>1) {
partial.closest('.bmo').find('.dropdown').css('visibility', 'visible');
}
// All to do with the source sentence
if (highlight == true) {
var attn = data.attn
$("span[class^='hin_inp_part']").css("background-color", "transparent");
for (m=0; m<attn.length; m++) {
if (attn[m] != 0) {
partial.closest('.bmo').find('.hin_inp_part' + m).css('background-color', 'rgba(255,0,0,' + attn[m] + ')')
}
else {
partial.closest('.bmo').find('.hin_inp_part' + m).css('background-color', 'rgba(0,255,0,0.5)')
}
}
}
});
}
$(".partial").on('keydown', function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var partial = $(this).clone().children().remove().end().text().split(" ").filter(function(v){return v!==''})
var step = partial.length
var res = result[selecte].split(" ")[step-1]
if (result[selecte].split(" ")[step-1] == partial[step-1]) {
res = result[selecte].split(" ")[step]
} else {
partial.pop()
}
partial.push(res)
$(this).html(partial.join(" ") + " ")
$(this).closest('.bmo').find('.suggest').text(result[selecte])
placeCaretAtEnd($(this).get(0))
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden')
} else
if (keyCode == 13) {
e.preventDefault();
$(this).html(result[selecte])
$(this).closest('.bmo').find('.suggest').text(result[selecte])
placeCaretAtEnd($(this).get(0))
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden')
} else
if (keyCode == 40) {
e.preventDefault();
if (selecte < $('.spanres').length - 1 )
selecte = selecte + 1;
resetcolors('.res', $('.spanres').length)
$('.res' + selecte).css({"background-color": "#ddd"})
$(this).closest('.bmo').find('.suggest').text(result[selecte])
} else
if (keyCode == 38) {
e.preventDefault();
if (selecte > 0)
selecte = selecte - 1;
resetcolors('.res', $('.spanres').length)
$('.res' + selecte).css({"background-color": "#ddd"})
$(this).closest('.bmo').find('.suggest').text(result[selecte])
} else
if (keyCode == 34) {
e.preventDefault();
// searchEvents($(this));
$(this).closest('.bmo').next().find('.partial').focus()
} else
if (keyCode == 33) {
e.preventDefault();
// searchEvents($(this));
$(this).closest('.bmo').prev().find('.partial').focus()
} else
if (keyCode == 35) {
e.preventDefault();
// searchEvents($(this));
$(".partial").each(function() {
outputs.push([$(this).closest('.bmo').find('.hin_inp').text(), $(this).text()])
})
// console.log(JSON.stringify({'ops': outputs}))
$.ajax({
url: '/para/pushoutput',
data: {'ops': JSON.stringify(outputs)},
traditional: true,
success: function(result) {
// console.log(result.result);
window.location.href='/para/end';
}
});
// $.getJSON('/pushoutput', {
// ops: outputs,
// }, function(data) {
// console.log(data.result)
// })
} else
if ((e.ctrlKey && keyCode == 67)|| (e.ctrlKey && keyCode == 65)) {
} else {
$(this).closest('.bmo').find('.suggest').text('')
}
})
$('.transtext').one('focus', function() {
$(this).html('');
});
$('.partial').focusin(function() {
$(this).closest('.bmo').removeClass('bmo--blur');
$('.partial').closest('.bmo').not($(this).closest('.bmo')).addClass('bmo--blur');
// $(this).closest('.bmo').css('filter', '');
// $('.partial').closest('.bmo').not($(this).closest('.bmo')).css('filter', 'blur(3px)');
// $(this).closest('.bmo').css('filter', '');
searchEvents($(this));
var dropdown = $(this).parent().parent().children('.dropdown');
dropdown.css('visibility', 'visible')
var firsttext = $(this).text()
textlist = firsttext.split(" ")
part2text = textlist.pop()
part1text = textlist.join(" ") + " "
$(this).html(part1text + '<div id="dummy"></div>' + part2text)
if (firsttext) {
dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+7);
} else {
dropdown.css('left', $('#dummy')[0].offsetLeft-5).css('top', $('#dummy')[0].offsetTop+7);
}
// if ($('#dummy')[0].offsetLeft <= 10) {
// dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+24);
// } else {
// dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+7);
// }
$(this).html(firsttext)
$(this).closest('.bmo').find('.suggest').css('visibility', 'visible');
placeCaretAtEnd($(this).get(0))
});
$(".partial").on('focusout',function() {
var dropdown = $(this).closest('.bmo').find('.dropdown');
dropdown.css('visibility', 'hidden')
$(this).closest('.bmo').find('.suggest').css('visibility', 'hidden')
})
$(".partial").on('scroll', function() {
$(this).closest('.bmo').find('.suggest').scrollTop($(this).scrollTop());
})
$(".partial").keyup(function(e){
var keyCode = e.keyCode || e.which;
// console.log(!(e.ctrlKey && keyCode == 65))
if (keyCode != 40 && keyCode != 38 && keyCode != 37 && keyCode != 39 && keyCode != 17 && !(e.ctrlKey && keyCode == 65) && keyCode != 35 ) {
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden');
var dropdown = $(this).parent().parent().children('.dropdown');
var firsttext = $(this).text()
textlist = firsttext.split(" ")
part2text = textlist.pop()
part1text = textlist.join(" ")
$(this).html(part1text + '<div id="dummy"></div>' + part2text)
if (firsttext) {
dropdown.css('left', $('#dummy')[0].offsetLeft + 2).css('top', $('#dummy')[0].offsetTop+7);
} else {
dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+24);
}
$(this).html(firsttext)
placeCaretAtEnd($(this).get(0))
// var hin = new RegExp('([^\s\u0900-\u097F])');
// if (firsttext && hin.text(firsttext.slice(-1))) {
// indic = $.ajax({
// url: '/para/indic',
// data: {'lang': 'hindi', 'inString': part2text},
// type: 'GET',
// traditional: true,
// success: function(result) {
// console.log(result['twords']['0']['options']);
// }
// });
// }
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(searchEvents($(this)), 5);
}
});
$(".hin_inp").focusout(function(){
// $('#hin_inp').html(strip($('#hin_inp').html()))
searchEvents($(this));
})
$("#highlight").change(function(){
// $('#hin_inp').html(strip($('#hin_inp').html()))
highlight = $(this).is(':checked')
if (highlight == false) {
$("span[class^='hin_inp_part']").css("background-color", "transparent");
}
})
});
// var inputs = ['आज थका देने वाला दिन था','चलिए आज हम एक फिल्म के लिए चलते हैं','यह मेरा मूड फ्रेश कर देगा','मैं कल अपने काम पर ध्यान केंद्रित कर सकता हूं'];
// var inputs = ['मुझे कल एक ट्रेन पकड़नी है']
// .css('filter', '');
</script>
<div class="container">
<div class="row">
<div class="pad-top"></div>
</div>
<div class="card">
<div class="card-title center ttt">
Real-time Writing Assistance
</div>
<div class="switch">
<label>
Highlight?
<input id="highlight" type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="row">
<div class="pad-top"></div>
</div>
<div id="cardscoll">
<div class="card bmo">
<div class="card-content">
<div class="row">
<div class="col s12">
<div class="hin_inp transtext" contenteditable="false"></div>
</div>
</div>
<!-- <div class="row"> -->
<!-- <div class="col s1 m1">
<br>
<img src="{% static 'forward.png' %}" style="height:15px">
</div> -->
<!-- </div> -->
<div class="row">
<div class="col s12">
<div class="dropcontainer">
<div class="partcontainer">
<div class="suggest transtext" contenteditable="false"></div>
<div class=" partial transtext" contenteditable="true" onclick="getCursor()"></div>
</div>
<div class="dropdown">
</div>
</div>
<div class="perinstr">
| &nbsp; &nbsp; Select &#8645; Tab &#8594; Enter &#8608; &nbsp; &nbsp; | &nbsp; &nbsp; Page Down &#8609; Page Up &#8607; &nbsp; &nbsp; |
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row bottom">
<div class="col s12">
<img src="{% static 'microsoft_white.png' %}" height=70px>
</div>
</div>
</div>
</body>
<style>
body {
background: url(data:image/png;base64,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) fixed;
background-color: #404040;
}
.bmo {
transition: all 0.12s ease-out;
}
.bmo--blur {
filter: blur(3px);
background-color: #ddd !important;
}
.ttt {
padding:15px;
}
.pad-top {
height: 4vh;
}
.card-title {
color: #404040;
height: 8vh;
}
#result {
color: #404040;
text-align: left;
}
.card {
/* min-height: 15vh; */
background-color: #fff;
}
.bottom {
position: fixed;
bottom:0;
right:10;
}
#drop {
/* display: none; */
color: #404040;
position: absolute;
background-color: #ddd;
text-align: left;
padding: 10px;
}
.transtext {
/* -moz-appearance: textfield-multiline;
-webkit-appearance: textarea; */
/* overflow: auto;
white-space: nowrap; */
/* word-break: break-all; */
padding: 5px;
}
.hin_inp {
padding: 10px;
/* word-wrap: break-word; */
/* width: 100%; */
}
.hin_inp_part {
padding: 2px;
border-radius: 4px;
}
.partial {
/* border-top: 1px solid #eee;
border-bottom: 1px solid #eee; */
background-color: rgba(209, 209, 209, 0.274);
}
#result {
padding: 20px;
}
.partcontainer {
position: relative;
width: 100%;
/* overflow-x: hidden;
overflow-y: auto; */
}
.dropcontainer {
position: relative;
width: 100%;
height: 100px;
}
.suggest,.partial {
width: 100%;
position: absolute;
top: 0;
left: 0;
/* padding: 10px; */
white-space: pre-wrap;
overflow-x:hidden;
overflow-y:auto;
height: 100px;
}
.partial {
z-index: 10;
}
.suggest {
color: #999;
overflow-x:hidden;
overflow-y:auto;
/* overflow : hidden; */
}
.res0 {
display: none !important;
}
.dropdown {
position: absolute;
top: 0;
left: 0;
background-color: #eee;
border: 1px solid rgba(0, 0, 255, 0.25);
/* border-color: #ddd; */
/* padding: 5px; */
/* padding-top: 1px; */
/* padding-left: 1px; */
/* padding-right: 5px; */
/* padding-bottom: 5px; */
z-index: 20;
/* border:1px solid rgb(97, 97, 197); */
visibility: hidden;
}
#dummy {
display: inline-block;
}
.spanres {
padding-right: 7px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
border: 1px solid rgba(0, 0, 255, 0.25);
display: block;
}
.perinstr {
font-size: 12px;
bottom: 10;
right: 10;
position: absolute;
}
.switch {
padding: 15px;
}
</style>
</html>