gCubeSystem
/
nlphub
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/data-analysis/nlphub@164503 82a268e6-3cf1-43bd-a215-b396298e98cf

This commit is contained in:
Erik Perrone 2018-02-21 13:05:45 +00:00
parent 7bfc647ed8
commit 6e6649f1f8
2 changed files with 242 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/main/webapp/css/custom.css
View File

@ -116,7 +116,6 @@ pre {
#execute-button { #execute-button {
margin: 10px; margin: 10px;
color: white; color: white;
/*background-color: #4CAF50 !important;*/
padding: 0.6rem; padding: 0.6rem;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
@ -126,6 +125,18 @@ pre {
cursor: pointer; cursor: pointer;
} }
#reset-upload {
color: white;
background-color: #4CAF50;
padding: 0.2rem;
text-transform: uppercase;
vertical-align: middle;
border-radius: 2px;
display: inline-block;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
}
.ajax-file-upload-statusbar { .ajax-file-upload-statusbar {
height: 1.3em; height: 1.3em;
width: 100% !important; width: 100% !important;
@ -139,8 +150,8 @@ pre {
} }
#file-info { #file-info {
float: right; /*float: right;
margin-left: 10px; margin-left: 10px;*/
} }
.ajax-file-upload-progress { .ajax-file-upload-progress {
@ -176,4 +187,27 @@ pre {
select { select {
display: block; display: block;
visibility: visible; visibility: visible;
}
.hidden-div {
display: none;
}
.progress-circular-div {
position: absolute;
z-index: 100;
border: solid 1px gray;
padding: 10px;
background: white;
}
#progress-caption {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
}
.float-right-div {
float: right;
margin-left: 10px;
} }

349
src/main/webapp/index.jsp
View File

@ -30,6 +30,7 @@
var savedAnnotations = ""; var savedAnnotations = "";
$("#execute-button").css("background-color", pageGray); $("#execute-button").css("background-color", pageGray);
// ------------------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------------------
// Starting point: get the csv file with algorithm parameters and set the page with valid algs info. // Starting point: get the csv file with algorithm parameters and set the page with valid algs info.
// ------------------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------------------
@ -47,40 +48,67 @@
resizeTable(); resizeTable();
resizeLogo(); resizeLogo();
buildLanguageList(); buildLanguageList();
setEventListeners();
$("#execute-button").css("background-color", pageGray);
$("#upload-button").uploadFile({ $("#execute-button").css("background-color", pageGray);
url : "/nlphub/nlphub-uploader-servlet",
fileName : "mytxtfile", $("#upload-button")
maxFileCount : 100, .uploadFile(
multiple : false, {
maxFileSize : 1024 * 1000 * 6.14, url : "/nlphub/nlphub-uploader-servlet",
showFileCounter : false, fileName : "mytxtfile",
showCancel : true, maxFileCount : 100,
dragDropStr : "<img class='img-prompt' src='img/upload.png' width='60px' height='60px' style='display:block; margin:auto; padding: 10px'>", multiple : false,
extErrorStr : "Error. Text file only", maxFileSize : 1024 * 1000 * 6.14,
sizeErrorStr : "Error. Max size: 6 Mb", showFileCounter : false,
onLoad : function(obj) { showCancel : true,
$("#file-info").remove(); dragDropStr : "<img class='img-prompt' src='img/upload.png' width='60px' height='60px' style='display:block; margin:auto; padding: 10px'>",
$("#fu-container").append("<div id=\"file-info\"></div>"); extErrorStr : "Error. Text file only",
savedAnnotations = ""; sizeErrorStr : "Error. Max size: 6 Mb",
}, onLoad : function(obj) {
onSuccess : function(files, data, xhr) { $("#file-info").remove();
console.log("files: " + files); $("#reset-upload").remove();
$("#file-info").empty(); $("#fu-container").append("<div id=\"right-child\" class=\"float-right-div\"></div>");
$("#file-info").append("Uploaded: <span style=\"color:#4CAF50; letter-spacing: 1px; font-weight: bold;\">" + files + "</span>"); $("#right-child").append("<div id=\"file-info\" class=\"centered\"></div>");
publicLink = data.message; $("#right-child").append("<div id=\"reset-upload\" class=\"centered\">Cancel</div>");
$("#execute-button").css("background-color", pageGreen); $("#reset-upload").hide();
if(publicLink == null) { $("#reset-upload").click(function() {
alert("Error uploading file."); resetExecuteButton();
} $("#file-info").empty();
}, $("#reset-upload").css("display", "none");
onError : function(files, status, textAreaEnable(true);
errMsg, pd) { });
alert(errMsg); savedAnnotations = "";
} setEventListeners();
}); },
onSelect : function(files) {
showProgress();
textAreaEnable(false);
},
onSuccess : function(files, data, xhr) {
hideProgress();
$("#reset-upload").css("display", "inline");
console.log("files: " + files);
$("#file-info").empty();
$("#file-info")
.append(
"Uploaded: <span style=\"color:#4CAF50; letter-spacing: 1px; font-weight: bold;\">"
+ files
+ "</span>");
publicLink = data.message;
$("#execute-button").css(
"background-color",
pageGreen);
if (publicLink == null) {
alert("Error uploading file.");
}
},
onError : function(files, status,
errMsg, pd) {
hideProgress();
textAreaEnable(true);
alert(errMsg);
}
});
}, },
error : function(richiesta, stato, errori) { error : function(richiesta, stato, errori) {
alert("Unexpected Error"); alert("Unexpected Error");
@ -187,135 +215,158 @@
} }
} }
setEventListeners = function() { setEventListeners = function() {
$("#input-textarea").on("keyup", function() { $("#input-textarea").on("keyup", function() {
if($("#input-textarea").val() == "") if ($("#input-textarea").val() == "")
$("#execute-button").css("background-color", pageGray); $("#execute-button").css("background-color", pageGray);
else else
$("#execute-button").css("background-color", pageGreen); $("#execute-button").css("background-color", pageGreen);
}); });
$("#execute-button").click(function() {
if((publicLink == null) && ($("#input-textarea").val() == "")) {
alert("You must upload a file or paste some text in the text area before submit a request.");
return;
}
// if some text has been written in the text area, then a corresponding text file $("#execute-button")
// must be written in the workspace and the public link is set. .click(
if($("#input-textarea").val().length > 0) { function() {
freeText = $("#input-textarea").val(); if ((publicLink == null)
$ && ($("#input-textarea").val() == "")) {
.ajax({ alert("You must upload a file or write some text in the text area before submit a request.");
url : "/nlphub/nlphub-uploader-servlet?freetext=" + encodeURI(freeText), return;
type : "POST", }
async : true,
contentType : "text/plain; charset=utf-8", showProgress();
success : function(data, stato) { // if some text has been written in the text area, then a corresponding text file
publicLink = data.message; // must be written in the workspace and the public link is set.
if(publicLink == null) { if ($("#input-textarea").val().length > 0) {
alert("Error uploading file."); freeText = $("#input-textarea").val();
} $
launchAlgorithm(); .ajax({
}, url : "/nlphub/nlphub-uploader-servlet?freetext="
error : function(richiesta, stato, errori) { + encodeURI(freeText),
alert("Unexpected Error"); type : "POST",
} async : true,
}); contentType : "text/plain; charset=utf-8",
} success : function(data, stato) {
publicLink = data.message;
else { if (publicLink == null) {
launchAlgorithm(); alert("Error uploading file.");
} }
}); launchAlgorithm();
},
error : function(richiesta, stato,
errori) {
alert("Unexpected Error");
hideProgress();
textAreaEnable(true);
$("#file-info").empty();
}
});
}
else {
launchAlgorithm();
}
});
}
showProgress = function() {
var width = $(".progress-circular-div").width();
var height = $(".progress-circular-div").height();
var left = parseInt((window.innerWidth - width)/2);
var top = parseInt((window.innerHeight - height)/2);
$(".progress-circular-div").css("left", left);
$(".progress-circular-div").css("top", top);
$(".hidden-div").css("display", "block");
}
hideProgress = function() {
$(".hidden-div").css("display","none");
} }
launchAlgorithm = function() { launchAlgorithm = function() {
if(publicLink == null) { if (publicLink == null) {
alert("No input text available for the service."); alert("No input text available for the service.");
return; return;
} }
var list = buildInputAnnotationList(); var list = buildInputAnnotationList();
var annList = ""; var annList = "";
for(i in list) { for (i in list) {
annList += list[i] + ","; annList += list[i] + ",";
} }
annList = annList.substring(0, annList.length-1); annList = annList.substring(0, annList.length - 1);
savedAnnotations = annList; savedAnnotations = annList;
var algList = ""; var algList = "";
for(j in algorithms) { for (j in algorithms) {
algList += encodeURI(algorithms[j].id) + ","; algList += encodeURI(algorithms[j].id) + ",";
} }
algList = algList.substring(0, algList.length-1); algList = algList.substring(0, algList.length - 1);
var parameters = "annotations=" + annList;
var parameters = "annotations=" + annList;
parameters += "&lang=" + $("#language-select").val(); parameters += "&lang=" + $("#language-select").val();
parameters += "&plink=" + encodeURI(publicLink); parameters += "&plink=" + encodeURI(publicLink);
parameters += "&algs=" + algList; parameters += "&algs=" + algList;
$ $.ajax({
.ajax({
url : "/nlphub/nlphub-servlet?" + parameters, url : "/nlphub/nlphub-servlet?" + parameters,
type : "POST", type : "POST",
async : true, async : true,
success : function(data, stato) { success : function(data, stato) {
if(typeof(data.response) != 'undefined') { hideProgress();
textAreaEnable(true);
$("#file-info").empty();
if (typeof (data.response) != 'undefined') {
var jsonOut = getOutputJson(data.message); var jsonOut = getOutputJson(data.message);
} } else if (typeof (data.error) != 'undefined') {
else if (typeof(data.error) != 'undefined')
alert(data.message); alert(data.message);
else }
else {
alert("Unexpected response"); alert("Unexpected response");
}
resetExecuteButton();
}, },
error : function(richiesta, stato, errori) { error : function(richiesta, stato, errori) {
hideProgress();
textAreaEnable(true);
alert("Unexpected Error"); alert("Unexpected Error");
resetExecuteButton();
} }
}); });
//publicLink = null;
} }
getOutputJson = function(message) { getOutputJson = function(message) {
var tobemap = ""; var tobemap = "";
for(var i=0; i<message.length; i++) { for (var i = 0; i < message.length; i++) {
tobemap += message[i] + "|"; tobemap += message[i] + "|";
} }
tobemap = tobemap.substring(0, tobemap.length-1); tobemap = tobemap.substring(0, tobemap.length - 1);
var parameters = "annotations=" + savedAnnotations; var parameters = "annotations=" + savedAnnotations;
parameters += "&plink=" + encodeURI(publicLink); parameters += "&plink=" + encodeURI(publicLink);
parameters += "&lang=" + $("#language-select").val(); parameters += "&lang=" + $("#language-select").val();
parameters += "&tobemap=" + encodeURI(tobemap); parameters += "&tobemap=" + encodeURI(tobemap);
$ $.ajax({
.ajax({
url : "/nlphub/nlphub-mapper-servlet?" + parameters, url : "/nlphub/nlphub-mapper-servlet?" + parameters,
type : "POST", type : "POST",
async : true, async : true,
success : function(data, stato) { success : function(data, stato) {
console.log(data); console.log(data);
/*
if(typeof(data.response) != 'undefined') {
var jsonOut = getOutputJson(data.message);
}
else if (typeof(data.error) != 'undefined')
alert(data.message);
else
alert("Unexpected response");*/
}, },
error : function(richiesta, stato, errori) { error : function(richiesta, stato, errori) {
alert("Unexpected Error"); alert("Unexpected Error");
} }
}); });
$("#reset-upload").hide();
savedAnnotations = ""; savedAnnotations = "";
publicLink = null; publicLink = null;
} }
resetExecuteButton = function() {
publicLink = null;
$("#execute-button").css("background-color", pageGray);
}
resizeTable = function() { resizeTable = function() {
// resize the annotation table // resize the annotation table
@ -345,32 +396,32 @@
$("#" + rowId).append("<td>" + annotationElement + "</td>"); $("#" + rowId).append("<td>" + annotationElement + "</td>");
} }
} }
resizeLogo = function() { resizeLogo = function() {
if(window.innerWidth < 200) if (window.innerWidth < 200)
$("#logo-image").width(window.innerWidth-10); $("#logo-image").width(window.innerWidth - 10);
} }
buildInputAnnotationList = function() { buildInputAnnotationList = function() {
var list = []; var list = [];
for (var i = 0; i < annotations.length; i++) { for (var i = 0; i < annotations.length; i++) {
if($("#check-" + i).is(":Checked")) if ($("#check-" + i).is(":Checked"))
list[list.length] = $("#check-" + i).val(); list[list.length] = $("#check-" + i).val();
} }
return list; return list;
} }
// event handlers // event handlers
window.onresize = function(event) { window.onresize = function(event) {
resizeTable(); resizeTable();
resizeLogo(); resizeLogo();
}; };
$(".ajax-file-upload-abort").on("DOMAttrModified", function (event) { $(".ajax-file-upload-abort").on("DOMAttrModified", function(event) {
$(".ajax-file-upload-abort").css("display", "none"); $(".ajax-file-upload-abort").css("display", "none");
if(event.attributeName == "display") { // which attribute you want to watch for changes if (event.attributeName == "display") { // which attribute you want to watch for changes
$(".ajax-file-upload-abort").css("display", "none"); $(".ajax-file-upload-abort").css("display", "none");
} }
}); });
buildLanguageList = function() { buildLanguageList = function() {
@ -384,29 +435,22 @@
$("#language-select").append(opt); $("#language-select").append(opt);
} }
} }
// $("#upload-button").click(function() {
// $("#upload-input").click();
// });
// $("#upload-input").change(
// function() {
// $("#upload-button")
// .text(
// $("#upload-input").val().substring(
// $("#upload-input").val().lastIndexOf(
// "\\") + 1));
// });
textAreaEnable = function(enable) {
if(enable == true)
$("#input-textarea").prop('disabled', false);
else
$("#input-textarea").prop('disabled', true);
}
</script> </script>
</head> </head>
<body style="padding: 0 15px;"> <body style="padding: 0 15px;">
<div class="logo"><img id="logo-image" src="img/nlphub-logo-3.png"></div> <div class="logo">
<!-- <div class="title-box"><h3>Natural Language Processing</h3></div> --> <img id="logo-image" src="img/nlphub-logo-3.png">
</div>
<!-- the "main-div" contains all tabs and contents --> <!-- the "main-div" contains all tabs and contents -->
<div class="main-div"> <div class="main-div">
@ -420,7 +464,7 @@
<!-- "ner" div: contains the name entity recognizer interface --> <!-- "ner" div: contains the name entity recognizer interface -->
<div id="ner"> <div id="ner">
<p class="flow-text">Name Entity Recognition</p> <p class="flow-text">Name Entity Recognition</p>
<fieldset> <fieldset>
<legend>Language selection</legend> <legend>Language selection</legend>
<div class="row"> <div class="row">
@ -442,15 +486,15 @@
<div class="row"> <div class="row">
<div class="clearfix"> <div class="clearfix">
<div class="column margin-right-10px"> <div class="column margin-right-10px">
<p>Use the button to upload a text file or drag and drop a file in the upload area; or paste a text in <p>To upload a text file you can use the button or drag a
the text area.</p> file on the "upload arrow". Otherwise, write some text in the text area.</p>
</div> </div>
<div class="column margin-left-10px"> <div class="column margin-left-10px">
<div class="centered full-width" id="fu-container"> <div class="centered full-width" id="fu-container">
<!-- <div class="waves-effect waves-light btn green darken-1" <!-- <div class="waves-effect waves-light btn green darken-1"
id="upload-button">Upload text file</div>--> id="upload-button">Upload text file</div>-->
<div class="waves-effect waves-light darken-1" <div class="waves-effect waves-light darken-1"
id="upload-button">Upload text file</div> id="upload-button">Upload text file</div>
</div> </div>
</div> </div>
</div> </div>
@ -474,9 +518,9 @@
<div class="progress" id="progressBar" style="visibility: hidden;"> <div class="progress" id="progressBar" style="visibility: hidden;">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<div style="text-align: center; padding: 5px;"> <div style="text-align: center; padding: 5px;">
<!-- <a class="waves-effect waves-light btn green darken-1" --> <!-- <a class="waves-effect waves-light btn green darken-1" -->
<a id="execute-button">Execute</a> <a id="execute-button">Execute</a>
</div> </div>
<div id="result-container" style="margin-top: -20px;"> <div id="result-container" style="margin-top: -20px;">
<div id="downloadLink" style="display: inline;"></div> <div id="downloadLink" style="display: inline;"></div>
@ -488,6 +532,23 @@
<div id="#other"></div> <div id="#other"></div>
<div class="hidden-div progress-circular-div">
<div class="preloader-wrapper big 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 id="progress-caption">In progress</div>
</div>
</div> </div>
<!-- end "#main-div" --> <!-- end "#main-div" -->