diff --git a/src/main/webapp/css/custom.css b/src/main/webapp/css/custom.css
index 5bf3612..4479259 100644
--- a/src/main/webapp/css/custom.css
+++ b/src/main/webapp/css/custom.css
@@ -125,6 +125,19 @@ pre {
cursor: pointer;
}
+.green-button {
+ margin: 10px;
+ background-color: #4CAF50;
+ color: white;
+ padding: 0.6rem;
+ 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;
+}
+
#reset-upload {
color: white;
background-color: #4CAF50;
@@ -210,4 +223,77 @@ select {
.float-right-div {
float: right;
margin-left: 10px;
-}
\ No newline at end of file
+}
+
+.left-side {
+ float: left;
+ width: 78%;
+ border: 1px solid silver;
+ height: 60vh;
+ margin: 2px;
+}
+
+.right-side {
+ float: left;
+ width: 20%;
+ border: 1px solid silver;
+ height: 60vh;
+ margin: 2px;
+}
+
+.right-side::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.header-side {
+ float: left;
+ width: 100%;
+ margin-top: 1px;
+ margin-bottom: 1px;
+ padding: 5px;
+}
+
+@media (max-width: 600px) {
+ .left-side {
+ width: 100%;
+ height: 100%;
+ }
+ .right-side {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+/*
+input[type="checkbox"]:not(:checked){
+ position: unset !important;
+ opacity: unset !important;
+ padding: 3px;
+}
+
+input[type="checkbox"]:checked {
+ position: unset !important;
+ opacity: unset !important;
+ padding: 3px;
+}
+*/
+
+.input-field label {
+ pointer-events: auto;
+}
+
+/*
+#result-params-div input[type="checkbox"]:not(:checked){
+ position: unset !important;
+ opacity: unset !important;
+ padding: 3px;
+}
+
+#result-params-div input[type="checkbox"]:checked {
+ position: unset !important;
+ opacity: unset !important;
+ padding: 3px;
+}
+*/
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 9c4f8c5..de213a7 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -28,9 +28,9 @@
var pageGreen = "#4CAF50";
var pageGray = "#A0A0A0";
var savedAnnotations = "";
+ var jsonContent = null;
+ var named = null;
- $("#execute-button").css("background-color", pageGray);
-
// ------------------------------------------------------------------------------------------------------
// Starting point: get the csv file with algorithm parameters and set the page with valid algs info.
// ------------------------------------------------------------------------------------------------------
@@ -42,13 +42,43 @@
async : true,
contentType : "text/plain; charset=utf-8",
success : function(data, stato) {
+ $("#ner-result-container").hide();
+
+ // --------------------
+ // the following 2 lines are only for develop
+ //$("#ner-result-container").show();
+ //$("#ner-ui").hide();
+ // --------------------
var lineTokens = manageCsvData(data);
getAlgorithms(lineTokens);
buildAnnotationsAndLanguages();
resizeTable();
resizeLogo();
buildLanguageList();
-
+ $("#back-ner-ui-button").click(function() {
+ $("#ner-result-container").hide();
+ $("#ner-ui").show();
+ });
+
+ // the following line is only for develop
+
+ var devData = "{\"link\":\"http://data.d4science.org/Wm5XY1p0TlFIM3NXZnZ1SkhLRlRMK3l6N05jVFhiSXFHbWJQNStIS0N6Yz0\",\"output\":"
+ + "{\"text\":\"yes, we can do it tomorrow in the evening.\",\"annotations\":\"Date,Sentence\",\"language\":\"English\",\"result\":"
+ + "[{\"algorithm\":\"ENGLISH_NAMED_ENTITY_RECOGNIZER\",\"entities\":[{\"Date\":[{\"indices\":[18,26],\"ruleFinal\":\"DateOnlyFinal\",\"kind\":\"date\",\"rule\":\"GazDateWords\"}]},{\"Sentence\":[{\"indices\":[0,42]}]}]}]}}";
+
+ devData = "{\"link\":\"http://data.d4science.org/dXZ5L3RrRjYyTWNXZnZ1SkhLRlRMeXZzd1prOVFqWDFHbWJQNStIS0N6Yz0\",\"output\":"
+ + "{\"text\":\"In the 1970s, Iraq under Baath Party dictator Brigadier General Ahmad Hassan al-Bakr had grown close to the Soviet Union, "
+ + "with which it signed a treaty of friendship in 1972 and from which it began importing arms. In 1973, al-Bakr supported the Syrians in their war with Israel.\","
+ + "\"annotations\":\"Date,Person\",\"language\":\"English\",\"result\": [{\"algorithm\":\"ENGLISH_NAMED_ENTITY_RECOGNIZER\",\"entities\":[{\"Date\":[{\"indices\":[3,12],"
+ + "\"ruleFinal\":\"DateOnlyFinal\",\"kind\":\"date\",\"rule\":\"YearSpan1\"},{\"indices\":[169,173],\"ruleFinal\":\"DateOnlyFinal\",\"kind\":\"date\",\"rule\":\"YearContext1\"},"
+ + "{\"indices\":[217,221],\"ruleFinal\":\"YearOnlyFinal\",\"kind\":\"date\",\"rule\":\"TempYear2\"}]},{\"Person\":[{\"indices\":[46,76],\"firstName\":\"Ahmad\",\"ruleFinal\":\""
+ + "PersonFinal\",\"gender\":\"unknown\",\"surname\":\"Hassan\",\"kind\":\"personName\",\"rule\":\"PersonTitleGenderUnknown\",\"title\":\"Brigadier\"},{\"indices\":[77,84],\"firstName\":"
+ + "\"al\",\"ruleFinal\":\"PersonFinal\",\"gender\":\"male\",\"surname\":\"Bakr\",\"kind\":\"fullName\",\"rule\":\"PersonFull\"},{\"indices\":[223,230],\"firstName\":\"al\",\"ruleFinal\":\"PersonFinal\",\"gender\":\"male\",\"surname\":\"Bakr\",\"kind\":\"fullName\",\"rule\":\"PersonFull\"}]}]}]}}";
+
+ showResult(devData);
+
+ // --------------------------------------
+
$("#execute-button").css("background-color", pageGray);
$("#upload-button")
@@ -67,16 +97,29 @@
onLoad : function(obj) {
$("#file-info").remove();
$("#reset-upload").remove();
- $("#fu-container").append("");
- $("#right-child").append("");
- $("#right-child").append("Cancel
");
+ $("#fu-container")
+ .append(
+ "");
+ $("#right-child")
+ .append(
+ "");
+ $("#right-child")
+ .append(
+ "Cancel
");
$("#reset-upload").hide();
- $("#reset-upload").click(function() {
- resetExecuteButton();
- $("#file-info").empty();
- $("#reset-upload").css("display", "none");
- textAreaEnable(true);
- });
+ $("#reset-upload")
+ .click(
+ function() {
+ resetExecuteButton();
+ $("#file-info")
+ .empty();
+ $(
+ "#reset-upload")
+ .css(
+ "display",
+ "none");
+ textAreaEnable(true);
+ });
savedAnnotations = "";
setEventListeners();
},
@@ -86,7 +129,8 @@
},
onSuccess : function(files, data, xhr) {
hideProgress();
- $("#reset-upload").css("display", "inline");
+ $("#reset-upload").css("display",
+ "inline");
console.log("files: " + files);
$("#file-info").empty();
$("#file-info")
@@ -271,17 +315,17 @@
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);
+ 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");
+ $(".hidden-div").css("display", "none");
}
-
+
launchAlgorithm = function() {
if (publicLink == null) {
alert("No input text available for the service.");
@@ -318,8 +362,7 @@
var jsonOut = getOutputJson(data.message);
} else if (typeof (data.error) != 'undefined') {
alert(data.message);
- }
- else {
+ } else {
alert("Unexpected response");
}
resetExecuteButton();
@@ -352,17 +395,117 @@
async : true,
success : function(data, stato) {
console.log(data);
+ $("#reset-upload").hide();
+ savedAnnotations = "";
+ publicLink = null;
+ showResult(data);
},
error : function(richiesta, stato, errori) {
+ $("#reset-upload").hide();
+ savedAnnotations = "";
+ publicLink = null;
alert("Unexpected Error");
}
});
-
- $("#reset-upload").hide();
- savedAnnotations = "";
- publicLink = null;
}
-
+
+ showResult = function(data) {
+ $("#ner-ui").hide();
+ $("#ner-result-container").show();
+
+ jsonContent = JSON.parse(purgeJson(data));
+
+ $("#result-header").empty();
+ $("#result-params-div").empty();
+ $("#result-text-div").empty();
+
+ $("#result-header")
+ .append(
+ "You can download the result file from here
");
+ $("#result-text-div").append("" + jsonContent.output.text + "
");
+
+ showAnnotationList(jsonContent.output.annotations);
+ }
+
+ showAnnotationList = function(list) {
+ /*var colors = [ "ef2c23", "9c62de", "61de6c", "de61d2", "dec062",
+ "23efde", "232bde" ];*/
+
+ var colors = [];
+ var annotations = list.split(",");
+ for(var i=0; i");
+ for (var i = 0; i < annotations.length; i++) {
+ var cb = "";
+ cb += "
";
+ $("#colored-annotations").append(cb);
+ }
+ $("#colored-annotations :radio").change(function() {
+ if (this.checked) {
+ rewriteText(this.getAttribute("named"), "#" + this.value);
+ }
+ });
+ }
+
+ rewriteText = function(annotation, color) {
+ console.log(annotation + " " + color);
+ var complement = "#" + (0xFFFFFF - eval("0x" + color.substring(1))).toString(16);
+ complement = "#FAFAFA";
+ var indices = getIndices(annotation);
+ var indexedText = "";
+
+ if (indices.length == 0)
+ return;
+ var t = 0;
+ for (var i = 0; i < indices.length; i++) {
+ var index = indices[i];
+ var start = index[0];
+ var end = index[1];
+ indexedText += jsonContent.output.text.substring(t, start);
+ var colored = ""
+ + jsonContent.output.text.substring(start, end) + "";
+ indexedText += colored;
+ t = end;
+ }
+ if (t < jsonContent.output.text.length)
+ indexedText += jsonContent.output.text.substring(t);
+ $("#result-text-div").empty();
+ $("#result-text-div").append("" + indexedText + "
");
+ }
+
+ getIndices = function(annotation) {
+ var indices = [];
+ // get indices
+ for (var i = 0; i < jsonContent.output.result.length; i++) {
+ var entities = jsonContent.output.result[i].entities;
+ for (var j = 0; j < entities.length; j++) {
+ a = entities[j][annotation];
+ if (typeof a != 'undefined') {
+ indices[i] = [];
+ for (var k = 0; k < a.length; k++) {
+ var index = a[k].indices;
+ indices[i][k] = index;
+ }
+ }
+ }
+ }
+
+ return mergeIndices(indices);
+ }
+
+ mergeIndices = function(indices) {
+ // GESTIONE MULTIDIMENSIONALE DA FARE !!!!
+ var newIndices = []
+ if (indices.length == 1)
+ newIndices = indices[0];
+ return newIndices;
+ }
+
resetExecuteButton = function() {
publicLink = null;
$("#execute-button").css("background-color", pageGray);
@@ -435,14 +578,26 @@
$("#language-select").append(opt);
}
}
-
+
textAreaEnable = function(enable) {
- if(enable == true)
+ if (enable == true)
$("#input-textarea").prop('disabled', false);
- else
+ else
$("#input-textarea").prop('disabled', true);
}
+ purgeJson = function(json) {
+ return json.replace("\n", "");
+ }
+
+ randomRGB = function() {
+ var letters = '0123456789ABCDEF';
+ var color = '';
+ for (var i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ }
@@ -464,74 +619,78 @@
-
Name Entity Recognition
-
-
-