diff --git a/frontend/app.js b/frontend/app.js index c0ae2c5..7c04c59 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -24,7 +24,7 @@ app.get('/', function(req, res) { // if user is not logged-in redirect back to login page // res.sendFile(__dirname + "/public/501.html"); } else{ - res.sendFile(__dirname + "/public/index2.html"); + res.sendFile(__dirname + "/public/index.html"); } }); diff --git a/frontend/public/index.html b/frontend/public/index.html index 10b0727..c88c41e 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -16,71 +16,33 @@ > - -
+
- + +
+
+
+
+
+
+
+
+
+
+ +
@@ -144,6 +101,7 @@

Image preview

diff --git a/frontend/public/index2.html b/frontend/public/index2.html deleted file mode 100644 index 84b35be..0000000 --- a/frontend/public/index2.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - - - Image classification with Coligo and Watson Visual Recognition - - - - - - -
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
- - - - - - diff --git a/frontend/public/index_old.html b/frontend/public/index_old.html new file mode 100644 index 0000000..10b0727 --- /dev/null +++ b/frontend/public/index_old.html @@ -0,0 +1,157 @@ + + + + + + + Image classification with Coligo and Watson Visual Recognition + + + + + + + +
+
+ +
+
+
+
+
+

+ Image Classification +

+

+ powered by Coligo and Visual Recognition +

+
+
+
+ +
+
+
+ + +
+

+
+
+

+
+
+
+
+

Image preview

+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + + + + diff --git a/frontend/public/js/index.js b/frontend/public/js/index.js index 10e0c81..27584b6 100644 --- a/frontend/public/js/index.js +++ b/frontend/public/js/index.js @@ -1,96 +1,259 @@ $(document).ready(function () { + $('.loader-wrapper').addClass('is-active'); + getUploadedImages(); $("p.error").text(""); $("p.success").text(""); - $("#uploadbtn").attr("disabled", true); + + $("#uploadbtn").click(function(e){ + $("#file").click(); + e.preventDefault(); + }); $("#file").change(function () { - $("#column-multiline").empty(); - showUploadedImage(this); - $("#uploadbtn").removeAttr("disabled"); + //$("#column-multiline").empty(); + // showUploadedImage(this); + //$("#uploadbtn").removeAttr("disabled"); + $("#uploadbtn").submit(); + console.log("i am here"); }); + $("#imageForm").submit(function () { + console.log("i am submitted"); $("#uploadbtn").addClass("is-loading"); $("#table tbody tr").remove(); $(this).ajaxSubmit({ error: function (data) { - $("p.error").text(data.statusText + ":" + "Check your BACKEND URL"); + showNotification(data.statusText + ":" + "Check your BACKEND URL","is-danger"); $("#uploadbtn").removeClass("is-loading"); - $("#uploadbtn").attr("disabled", true); }, success: function (response) { + console.log("i am here too"); console.log(response.data); - $("p.success").text(response.data); + //$("p.success").text(response.data); + showNotification(response.data,"is-primary"); $("#uploadbtn").removeClass("is-loading"); - $("#uploadbtn").attr("disabled", true); $("#classifybtn").removeAttr("disabled"); + getUploadedImages(); }, }); return false; }); + +/*************************************** +*********NOTIFICATIONS**************** +***************************************/ +function showNotification(data,cssclass) +{ + notify(data, cssclass, 5000); + $(".notification").text(data); + $(".notification").addClass(cssclass); + $(".notification").removeClass("is-hidden"); + //$(".notification").append(''); +} + + $(".notification").addClass('is-hidden'); + $(document).on('click', '.notification > button.delete', function() { + $(this).parent().addClass('is-hidden'); + return false; +}); + +function stringGen(len) { + var text = ""; + var charset = "abcdefghijklmnopqrstuvwxyz0123456789"; + for (var i = 0; i < len; i++) + text += charset.charAt(Math.floor(Math.random() * charset.length)); + return text; +} + +function notify(msg, mode, duration) { + var classy = stringGen(9); + $('.notifications').append(`
${msg}
`) + $('.notification').click(function() { + $(this).removeClass('slideInRight'); + $(this).addClass('slideOutRight'); + setTimeout(function() { + $(this).remove(); + }, 350); + }); + setTimeout(function() { + $(`#${classy}`).removeClass('slideInRight'); + $(`#${classy}`).addClass('slideOutRight'); + setTimeout(function() { + $(`#${classy}`).remove(); + }, 350); + }, duration); +} + +/* DELETE functionality*/ +function deleteImage(filename){ + $.ajax({ + type: "DELETE", + url: "/image?filename="+filename, + success: function (response) { + showNotification("Image deleted!!!","is-primary"); + }, + error: function (data) { + $("p.error").text( + data.statusText + ":" + "Check logs for more info" + ); + } + }); +} +function addClickToDelete(){ + $(".card-content").on("click","a", function (){ + console.log("Clicked!!") + var filename=$(this).attr("id"); + deleteImage(filename); + getUploadedImages(); + $("#column-multiline").remove($(this).parents(".card")); + }); + return false; +} + +function toggleTable(){ + console.log("toggled!"); + $('.table-toggle').each(function (index){ + $(this).on("click", function(){ + $(this).parent().siblings(".table").toggleClass('is-hidden'); + }); + + }); +} + +function readResults(){ + $.ajax({ + type: "POST", + url: "/classifyimage", + success: function (response) { + console.log(response); + var data = JSON.parse(response.data); + //console.log(data); + //var matched = $("#column-multiline footer").length; + $("p.card-footer-item").each(function (index) { + //console.log( index + ": " + $( this ).text() ); + var id = $(this).attr("id"); + //console.log(id); + var value = "results/" + id.toString() + ".json"; + //console.log(value); + if(data[value] !== undefined) { + var result = data[value].images[0].classifiers[0].classes.sort( + function (a, b) { + return b.score - a.score; + } + ); + console.log(result); + let parent = $(this).parent(".card-footer"); + if (result.length > 1) { + parent.append('show results
') + parent.after( + ''); + + for (var i = 0; i < result.length; i++) { + parent.siblings(".table") + .children("tbody") + .append( + "" + + result[i].class + + "" + + result[i].score + + "" + ); + } + parent.siblings().children(".card-content").children(".tag").text("Classified"); + parent.siblings().children(".card-content").children("span").toggleClass("is-info"); + $('.loader-wrapper').removeClass('is-active'); + } + } + }); + toggleTable(); + }, + error: function (data) { + $("p.error").text(data.statusText + ":" + "Check logs for more info"); + $("#classifybtn").attr("disabled", true); + $('.loader-wrapper').removeClass('is-active'); + }, + }); +} $("#classifybtn").click(function () { $("#classifybtn").attr("disabled", true); - $("p.success").text("classifying..."); $(".tag").text("classifying..."); + getUploadedImages(); + }); + + // Check for click events on the navbar burger icon + $(".navbar-burger").click(function () { + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + $(".navbar-burger").toggleClass("is-active"); + $(".navbar-menu").toggleClass("is-active"); + }); + + function getUploadedImages(){ + console.log("I am called"); + $('.loader-wrapper').addClass('is-active'); $.ajax({ - type: "POST", - url: "/classifyimage", + type: "GET", + url: "/items", success: function (response) { - //console.log(response.data); + $("#column-multiline").empty(); + //console.log(response); var data = JSON.parse(response.data); - //console.log(data); + console.log(data); //var matched = $("#column-multiline footer").length; - $("p.card-footer-item").each(function (index) { - //console.log( index + ": " + $( this ).text() ); - var id = $(this).attr("id"); - //console.log(id); - var value = "results/" + id.toString() + ".json"; - //console.log(value); - //console.log(data[value]); - var result = data[value].images[0].classifiers[0].classes.sort( - function (a, b) { - return b.score - a.score; - } + //var imageElem = document.createElement('img'); + // Just use the toString() method from your buffer instance + // to get date as base64 type + //imageElem.src = 'data:image/jpeg;base64,' + buf.toString('base64'); + console.log(Object.keys(data).length); + for (var i = 0; i < Object.keys(data).length; i++) { + var buffer = Object.values(data)[i]; + console.log(buffer); + let fileName = Object.keys(data)[i].split("/")[1]; + $("#column-multiline").append( + '
\ +
\ +
\ +
\ + placeholder\ +
\ +
\ + \ + Not classified\ + \ +
\ +
\ +
\ +

\ + ' + + fileName + + "\ +

\ + \ +
\ +
\ +
" ); - console.log(result); - if (result.length > 1) { - $(this) - .parent(".card-footer") - .append( - '
' - ); - - for (var i = 0; i < result.length; i++) { - $(this) - .parent(".card-footer") - .children(".table") - .children("tbody") - .append( - "" + - result[i].class + - "" + - result[i].score + - "" - ); - } - $(this).remove(); - $(".tag").text("classified"); - $("p.success").text(""); - } - }); + } + addClickToDelete(); + readResults(); }, error: function (data) { - $("p.error").text(data.statusText + ":" + "Check logs for more info"); - $("#classifybtn").attr("disabled", true); + let error= data.statusText + ":" + "Check your BACKEND URL"; + showNotification(error, "is-danger"); } }); - }); - - // Check for click events on the navbar burger icon - $(".navbar-burger").click(function () { - // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" - $(".navbar-burger").toggleClass("is-active"); - $(".navbar-menu").toggleClass("is-active"); - }); + return false; + } + // Shows the preview of uploaded image function showUploadedImage(fileInput) { var uploadbtn = document.getElementById("uploadbtn"); diff --git a/frontend/public/js/index2.js b/frontend/public/js/index2.js deleted file mode 100644 index 27584b6..0000000 --- a/frontend/public/js/index2.js +++ /dev/null @@ -1,310 +0,0 @@ -$(document).ready(function () { - $('.loader-wrapper').addClass('is-active'); - getUploadedImages(); - $("p.error").text(""); - $("p.success").text(""); - - $("#uploadbtn").click(function(e){ - $("#file").click(); - e.preventDefault(); - }); - $("#file").change(function () { - //$("#column-multiline").empty(); - // showUploadedImage(this); - //$("#uploadbtn").removeAttr("disabled"); - $("#uploadbtn").submit(); - console.log("i am here"); - }); - - $("#imageForm").submit(function () { - console.log("i am submitted"); - $("#uploadbtn").addClass("is-loading"); - $("#table tbody tr").remove(); - $(this).ajaxSubmit({ - error: function (data) { - showNotification(data.statusText + ":" + "Check your BACKEND URL","is-danger"); - $("#uploadbtn").removeClass("is-loading"); - }, - success: function (response) { - console.log("i am here too"); - console.log(response.data); - //$("p.success").text(response.data); - showNotification(response.data,"is-primary"); - $("#uploadbtn").removeClass("is-loading"); - $("#classifybtn").removeAttr("disabled"); - getUploadedImages(); - }, - }); - return false; - }); - -/*************************************** -*********NOTIFICATIONS**************** -***************************************/ -function showNotification(data,cssclass) -{ - notify(data, cssclass, 5000); - $(".notification").text(data); - $(".notification").addClass(cssclass); - $(".notification").removeClass("is-hidden"); - //$(".notification").append(''); -} - - $(".notification").addClass('is-hidden'); - $(document).on('click', '.notification > button.delete', function() { - $(this).parent().addClass('is-hidden'); - return false; -}); - -function stringGen(len) { - var text = ""; - var charset = "abcdefghijklmnopqrstuvwxyz0123456789"; - for (var i = 0; i < len; i++) - text += charset.charAt(Math.floor(Math.random() * charset.length)); - return text; -} - -function notify(msg, mode, duration) { - var classy = stringGen(9); - $('.notifications').append(`
${msg}
`) - $('.notification').click(function() { - $(this).removeClass('slideInRight'); - $(this).addClass('slideOutRight'); - setTimeout(function() { - $(this).remove(); - }, 350); - }); - setTimeout(function() { - $(`#${classy}`).removeClass('slideInRight'); - $(`#${classy}`).addClass('slideOutRight'); - setTimeout(function() { - $(`#${classy}`).remove(); - }, 350); - }, duration); -} - -/* DELETE functionality*/ -function deleteImage(filename){ - $.ajax({ - type: "DELETE", - url: "/image?filename="+filename, - success: function (response) { - showNotification("Image deleted!!!","is-primary"); - }, - error: function (data) { - $("p.error").text( - data.statusText + ":" + "Check logs for more info" - ); - } - }); -} -function addClickToDelete(){ - $(".card-content").on("click","a", function (){ - console.log("Clicked!!") - var filename=$(this).attr("id"); - deleteImage(filename); - getUploadedImages(); - $("#column-multiline").remove($(this).parents(".card")); - }); - return false; -} - -function toggleTable(){ - console.log("toggled!"); - $('.table-toggle').each(function (index){ - $(this).on("click", function(){ - $(this).parent().siblings(".table").toggleClass('is-hidden'); - }); - - }); -} - -function readResults(){ - $.ajax({ - type: "POST", - url: "/classifyimage", - success: function (response) { - console.log(response); - var data = JSON.parse(response.data); - //console.log(data); - //var matched = $("#column-multiline footer").length; - $("p.card-footer-item").each(function (index) { - //console.log( index + ": " + $( this ).text() ); - var id = $(this).attr("id"); - //console.log(id); - var value = "results/" + id.toString() + ".json"; - //console.log(value); - if(data[value] !== undefined) { - var result = data[value].images[0].classifiers[0].classes.sort( - function (a, b) { - return b.score - a.score; - } - ); - console.log(result); - let parent = $(this).parent(".card-footer"); - if (result.length > 1) { - parent.append('show results
') - parent.after( - ''); - - for (var i = 0; i < result.length; i++) { - parent.siblings(".table") - .children("tbody") - .append( - "" + - result[i].class + - "" + - result[i].score + - "" - ); - } - parent.siblings().children(".card-content").children(".tag").text("Classified"); - parent.siblings().children(".card-content").children("span").toggleClass("is-info"); - $('.loader-wrapper').removeClass('is-active'); - } - } - }); - toggleTable(); - }, - error: function (data) { - $("p.error").text(data.statusText + ":" + "Check logs for more info"); - $("#classifybtn").attr("disabled", true); - $('.loader-wrapper').removeClass('is-active'); - }, - }); -} - $("#classifybtn").click(function () { - $("#classifybtn").attr("disabled", true); - $(".tag").text("classifying..."); - getUploadedImages(); - }); - - // Check for click events on the navbar burger icon - $(".navbar-burger").click(function () { - // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" - $(".navbar-burger").toggleClass("is-active"); - $(".navbar-menu").toggleClass("is-active"); - }); - - function getUploadedImages(){ - console.log("I am called"); - $('.loader-wrapper').addClass('is-active'); - $.ajax({ - type: "GET", - url: "/items", - success: function (response) { - $("#column-multiline").empty(); - //console.log(response); - var data = JSON.parse(response.data); - console.log(data); - //var matched = $("#column-multiline footer").length; - //var imageElem = document.createElement('img'); - // Just use the toString() method from your buffer instance - // to get date as base64 type - //imageElem.src = 'data:image/jpeg;base64,' + buf.toString('base64'); - console.log(Object.keys(data).length); - for (var i = 0; i < Object.keys(data).length; i++) { - var buffer = Object.values(data)[i]; - console.log(buffer); - let fileName = Object.keys(data)[i].split("/")[1]; - $("#column-multiline").append( - '
\ -
\ -
\ -
\ - placeholder\ -
\ -
\ - \ - Not classified\ - \ -
\ -
\ -
\ -

\ - ' + - fileName + - "\ -

\ - \ -
\ -
\ -
" - ); - } - addClickToDelete(); - readResults(); - }, - error: function (data) { - let error= data.statusText + ":" + "Check your BACKEND URL"; - showNotification(error, "is-danger"); - } - }); - return false; - } - - - // Shows the preview of uploaded image - function showUploadedImage(fileInput) { - var uploadbtn = document.getElementById("uploadbtn"); - var files = fileInput.files; - if (files.length > 0) { - for (var i = 0; i < files.length; i++) { - var file = files[i]; - var imageType = /image.*/; - if (!file.type.match(imageType)) { - continue; - } - $("#column-multiline").append( - '
\ -
\ -
\ -
\ - placeholder\ -
\ -
\ - \ - Not classified\ - \ -
\ -
\ -
\ -

\ - ' + - file.name + - "\ -

\ -
\ -
\ -
" - ); - //const fileName = document.querySelector("#file-js-example .file-name"); - //files[i].name = 'image_'+i-1+file.type; - var img = document.getElementById(file.name + i); - img.file = file; - var reader = new FileReader(); - reader.onload = (function (aImg) { - return function (e) { - aImg.src = e.target.result; - }; - })(img); - reader.readAsDataURL(file); - } - } - } -}); diff --git a/frontend/public/js/index_old.js b/frontend/public/js/index_old.js new file mode 100644 index 0000000..10e0c81 --- /dev/null +++ b/frontend/public/js/index_old.js @@ -0,0 +1,147 @@ +$(document).ready(function () { + $("p.error").text(""); + $("p.success").text(""); + $("#uploadbtn").attr("disabled", true); + $("#file").change(function () { + $("#column-multiline").empty(); + showUploadedImage(this); + $("#uploadbtn").removeAttr("disabled"); + }); + $("#imageForm").submit(function () { + $("#uploadbtn").addClass("is-loading"); + $("#table tbody tr").remove(); + $(this).ajaxSubmit({ + error: function (data) { + $("p.error").text(data.statusText + ":" + "Check your BACKEND URL"); + $("#uploadbtn").removeClass("is-loading"); + $("#uploadbtn").attr("disabled", true); + }, + success: function (response) { + console.log(response.data); + $("p.success").text(response.data); + $("#uploadbtn").removeClass("is-loading"); + $("#uploadbtn").attr("disabled", true); + $("#classifybtn").removeAttr("disabled"); + }, + }); + return false; + }); + $("#classifybtn").click(function () { + $("#classifybtn").attr("disabled", true); + $("p.success").text("classifying..."); + $(".tag").text("classifying..."); + $.ajax({ + type: "POST", + url: "/classifyimage", + success: function (response) { + //console.log(response.data); + var data = JSON.parse(response.data); + //console.log(data); + //var matched = $("#column-multiline footer").length; + $("p.card-footer-item").each(function (index) { + //console.log( index + ": " + $( this ).text() ); + var id = $(this).attr("id"); + //console.log(id); + var value = "results/" + id.toString() + ".json"; + //console.log(value); + //console.log(data[value]); + var result = data[value].images[0].classifiers[0].classes.sort( + function (a, b) { + return b.score - a.score; + } + ); + console.log(result); + if (result.length > 1) { + $(this) + .parent(".card-footer") + .append( + '
' + ); + + for (var i = 0; i < result.length; i++) { + $(this) + .parent(".card-footer") + .children(".table") + .children("tbody") + .append( + "" + + result[i].class + + "" + + result[i].score + + "" + ); + } + $(this).remove(); + $(".tag").text("classified"); + $("p.success").text(""); + } + }); + }, + error: function (data) { + $("p.error").text(data.statusText + ":" + "Check logs for more info"); + $("#classifybtn").attr("disabled", true); + } + }); + }); + + // Check for click events on the navbar burger icon + $(".navbar-burger").click(function () { + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + $(".navbar-burger").toggleClass("is-active"); + $(".navbar-menu").toggleClass("is-active"); + }); + + // Shows the preview of uploaded image + function showUploadedImage(fileInput) { + var uploadbtn = document.getElementById("uploadbtn"); + var files = fileInput.files; + if (files.length > 0) { + for (var i = 0; i < files.length; i++) { + var file = files[i]; + var imageType = /image.*/; + if (!file.type.match(imageType)) { + continue; + } + $("#column-multiline").append( + '
\ +
\ +
\ +
\ + placeholder\ +
\ +
\ + \ + Not classified\ + \ +
\ +
\ + \ +
\ +
" + ); + //const fileName = document.querySelector("#file-js-example .file-name"); + //files[i].name = 'image_'+i-1+file.type; + var img = document.getElementById(file.name + i); + img.file = file; + var reader = new FileReader(); + reader.onload = (function (aImg) { + return function (e) { + aImg.src = e.target.result; + }; + })(img); + reader.readAsDataURL(file); + } + } + } +});