diff --git a/.gitignore b/.gitignore index a02f2e1..1802d91 100644 --- a/.gitignore +++ b/.gitignore @@ -70,8 +70,7 @@ web_modules/ # dotenv environment variables file .env -.env.test - +*.env # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache diff --git a/README.md b/README.md index 040701c..9eba8e3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Image Classification with Coligo and Visual Recognition +# Image Classification with Code Engine and Visual Recognition :warning: WORK IN PROGRESS diff --git a/backend/package-lock.json b/backend/package-lock.json index 8d090f4..b1a7d42 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -1,5 +1,5 @@ { - "name": "coligo-object-detection-backend", + "name": "codeengine-image-classification-backend", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/backend/package.json b/backend/package.json index f385273..a11f94d 100644 --- a/backend/package.json +++ b/backend/package.json @@ -1,7 +1,7 @@ { - "name": "coligo-object-detection-backend", + "name": "codeengine-image-classification-backend", "version": "1.0.0", - "description": "Backend server for Coligo Image Classification", + "description": "Backend server for Code Engine Image Classification", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/backend/server.js b/backend/server.js index 5ea339d..6897a8a 100644 --- a/backend/server.js +++ b/backend/server.js @@ -13,125 +13,220 @@ const cors = require("cors"); app.use(cors()); const port = process.env.PORT || 3001; +/** + *Define Cloud OBject Storage client configuration + * + * @return {*} cosCLient + */ +function getCosClient() { + var config = { + endpoint: + process.env.COS_ENDPOINT || + "s3.us-south.cloud-object-storage.appdomain.cloud", + apiKeyId: process.env.COS_SECRET_APIKEY, + ibmAuthEndpoint: "https://iam.cloud.ibm.com/identity/token", + serviceInstanceId: process.env.COS_SECRET_RESOURCE_INSTANCE_ID, + }; - -function getCosClient(){ - var config = { - endpoint: - process.env.COS_ENDPOINT || - "s3.us-south.cloud-object-storage.appdomain.cloud", - apiKeyId: process.env.COS_SECRET_APIKEY, - ibmAuthEndpoint: "https://iam.cloud.ibm.com/identity/token", - serviceInstanceId: process.env.COS_SECRET_RESOURCE_INSTANCE_ID, -}; - -var cosClient = new myCOS.S3(config); -return cosClient; + //console.log(process.env); + var cosClient = new myCOS.S3(config); + return cosClient; } -// To upload files to Cloud Object Storage +/** + * Upload images to COS Bucket + * + * @param {*} req + * @param {*} res + * @param {*} next + */ function uploadFilesToCOS(req, res, next) { -var upload = multer({ - storage: multerS3({ - s3: getCosClient(), - bucket: process.env.COS_BUCKETNAME+'/images', - metadata: function (req, file, cb) { - cb(null, { fieldName: file.fieldname }); - }, - key: function (req, file, cb) { - cb(null, file.originalname); - }, - }), -}).array("files", 10); + var upload = multer({ + storage: multerS3({ + s3: getCosClient(), + bucket: process.env.COS_BUCKETNAME + "/images", + metadata: function (req, file, cb) { + cb(null, { fieldName: file.fieldname }); + }, + key: function (req, file, cb) { + cb(null, file.originalname); + }, + }), + }).array("files", 10); upload(req, res, function (err) { if (err) { - next(err); + return next(err); } - if (req.files.length > 1) { - res.send( - "Successfully uploaded " + req.files.length + " files to Object Storage" + if (req.files.length === 0) { + return res.send("Upload an image..."); + } else if (req.files.length > 1) { + return res.send( + "Successfully uploaded " + req.files.length + " images to Object Storage" + ); + } else { + return res.send( + "Successfully uploaded " + req.files.length + " image to Object Storage" ); - } - else{ - res.send( - "Successfully uploaded " + req.files.length + " file to Object Storage" - ); } }); } - -function getBucketContents(req, res, next) { +/** + *Get COS bucket contents (images) + * + * @param {*} req + * @param {*} res + * @param {*} next + * @param {*} prefix + * @return {*} result dictionary + */ +async function getBucketContents(req, res, next, prefix) { + try { let cos = getCosClient(); let bucketName = process.env.COS_BUCKETNAME; var resultDict = {}; var result; console.log(`Retrieving bucket contents from: ${bucketName}`); - return cos.listObjects( - {Bucket: bucketName, - Prefix: 'results'}, - ).promise() - .then(async (data) => { - if (data != null && data.Contents != null) { - for (var i = 0; i < data.Contents.length; i++) { - var itemKey = data.Contents[i].Key; - var itemSize = data.Contents[i].Size; - console.log(`Item: ${itemKey} (${itemSize} bytes).`) - result = await getItem(bucketName, itemKey); - resultDict[itemKey] = result; - } - res.send(resultDict); - } - }) - .catch((e) => { - console.error(`ERROR: ${e.code} - ${e.message}\n`); - }); - + + const data = await cos + .listObjects({ + Bucket: bucketName, + Prefix: prefix, + }) + .promise(); + if (data != null && data.Contents != null) { + for (var i = 0; i < data.Contents.length; i++) { + var itemKey = data.Contents[i].Key; + var itemSize = data.Contents[i].Size; + console.log(`Item: ${itemKey} (${itemSize} bytes).`); + result = await getItem(bucketName, itemKey, prefix); + resultDict[itemKey] = result; + } + res.send(resultDict); + } + } catch (e) { + console.error(`ERROR: ${e.code} - ${e.message}\n`); + return next(e.message); + } +} +/** + * Get each item in a COS Bucket + * + * @param {*} bucketName + * @param {*} itemName + * @param {*} prefix + * @return {*} + */ +async function getItem(bucketName, itemName, prefix) { + let cos = getCosClient(); + console.log(`Retrieving item from bucket: ${bucketName}, key: ${itemName}`); + try { + const data = await cos + .getObject({ + Bucket: bucketName, + Key: itemName, + }) + .promise(); + if (data != null) { + if (prefix === "results") { + return JSON.parse(data.Body); + } else { + return Buffer.from(data.Body).toString("base64"); + } + } + } catch (e) { + console.error(`ERROR: ${e.code} - ${e.message}\n`); + } } -function getItem(bucketName, itemName) { - let cos = getCosClient(); - let result; - console.log(`Retrieving item from bucket: ${bucketName}, key: ${itemName}`); - return cos.getObject({ - Bucket: bucketName, - Key: itemName - }).promise() - .then((data) => { - if (data != null) { - //console.log('File Contents: ' + Buffer.from(data.Body).toString()); - return JSON.parse(data.Body); - } - }) - .catch((e) => { - console.error(`ERROR: ${e.code} - ${e.message}\n`); - }); +async function deleteItem(req, res, next, bucketName, itemName, prefix) { + let cos = getCosClient(); + let bucketname = process.env.COS_BUCKETNAME; + itemName = prefix + "/" + itemName; + if (prefix === "results") { + itemName = itemName + ".json"; + } + console.log(`Deleting item: ${itemName}`); + try { + await cos + .deleteObject({ + Bucket: bucketname, + Key: itemName, + }) + .promise(); + console.log(`Item: ${itemName} deleted!`); + res.send(`Item: ${itemName} deleted!`); + } catch (e) { + console.error(`ERROR: ${e.code} - ${e.message}\n`); + } } + /* * Default route for the web app */ -app.get("/", function (req, res) { +app.get("/", function (req, res, next) { res.send("Hello World! from backend"); }); + +app.get("/items", async (req, res, next) => { + try { + var prefix = req.query.prefix; + // console.log(prefix); + await getBucketContents(req, res, next, prefix); + } catch (error) { + // Passes errors into the error handler + return next(error); + } +}); /* * Upload an image for Image classification */ -app.post("/images", uploadFilesToCOS, function(req, res, next) { - next(); +app.post("/images", uploadFilesToCOS, function (req, res, next) {}); + +/** +* Get the JSON from the results folder of COS Bucket + */ +app.post("/results", async (req, res, next) => { + try { + await getBucketContents(req, res, next, "results"); + } catch (error) { + // Passes errors into the error handler + console.log(error); + return next(error); + } }); -app.post("/results", getBucketContents, function(req, res, next) { - next(); +/** +* Delete an item from the COS Bucket + */ +app.delete("/item", async (req, res, next) => { + var itemName = req.query.filename; + console.log(itemName); + await deleteItem(req, res, next, null, itemName, "images"); + await deleteItem(req, res, next, null, itemName, "results"); }); -app.all("*", function (req, res, next) { - var err = new Error("Route not supported. Please check your backend URL"); - next(err); +/** +* Middleware to handle not supported routes + */ +app.use((req, res, next) => { + const error = new Error("Not found"); + error.status = 404; + next(error); }); -app.use(function (error, req, res, next) { +// error handler middleware +app.use((error, req, res, next) => { console.log(error); - res.status(500).send("Oops!! An error occurred. Check the logs for more info. This is a message from your BACKEND"); + if (res.headersSent) { + return next(error); + } + res.status(error.status || 500).send({ + error: { + status: error.status || 500, + message: error.message || "Internal Server error", + }, + }); }); app.listen(port, () => console.log(`App listening on port ${port}!`)); diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..43c405e --- /dev/null +++ b/deploy.sh @@ -0,0 +1,15 @@ +#!/bin/bash +# declare an array called array and define 3 vales +declare -a folders=( "frontend" "backend" "jobs" ) +for folder in "${folders[@]}" +do + echo $folder + cd $folder + if [ $folder == "jobs" ] + then + docker build . -t ibmcom/backend-job && docker push ibmcom/backend-job + else + docker build . -t ibmcom/$folder && docker push ibmcom/$folder + fi + cd .. +done diff --git a/frontend/app.js b/frontend/app.js index 340af02..8467580 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -27,12 +27,34 @@ app.get('/', function(req, res) { res.sendFile(__dirname + "/public/index.html"); } }); + +app.get('/items', async(req, res) => { + req.pipe( + await request.get( + { + url: backendURL+"/items?prefix=images", + agentOptions: { + rejectUnauthorized: false + } + }, + function(error, resp, body) { + if (error) { + res.status(400).send(error.message); + } + else{ + //console.log(body); + res.send({ data: body }); + } + } + ) + ); +}); /* * Upload an image for Image classification */ -app.post("/uploadimage", function(req, res) { +app.post("/uploadimage", async(req, res) => { req.pipe( - request.post( + await request.post( { url: backendURL+"/images", gzip: true, @@ -42,6 +64,7 @@ app.post("/uploadimage", function(req, res) { }, function(error, resp, body) { if (error) { + console.log(error); res.status(400).send(error.message); } else{ @@ -54,9 +77,9 @@ app.post("/uploadimage", function(req, res) { }); -app.post("/classifyimage", function(req, res) { - req.pipe( - request.post( +app.post("/classifyimage", async(req, res) => { + req.pipe( + await request.post( { url: backendURL+"/results", agentOptions: { @@ -65,6 +88,7 @@ app.post("/classifyimage", function(req, res) { }, function(error, resp, body) { if (error) { + console.log(error); res.status(400).send(error.message); } else{ @@ -77,6 +101,31 @@ app.post("/classifyimage", function(req, res) { }); +app.delete("/image", async (req, res) => { + var itemName = req.query.filename; + req.pipe( + await request.delete( + { + url: backendURL+"/item?filename="+itemName, + agentOptions: { + rejectUnauthorized: false + } + }, + function(error, resp, body) { + if (error) { + console.log(error); + res.status(400).send(error.message); + } + else{ + //console.log(body); + res.send({ data: body }); + } + } + ) + ); + +}); + app.use(function(error, req, res, next) { res.status(500).send(error.message); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c78cb80..d9a0f31 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,5 +1,5 @@ { - "name": "coligo-object-detection", + "name": "codeengine-image-classification", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/frontend/package.json b/frontend/package.json index 8c4c393..b639573 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { - "name": "coligo-object-detection", + "name": "codeengine-image-classification", "version": "1.0.0", - "description": "Image Classification with Coligo and Watson Visual Recognition", + "description": "Image Classification with Code Engine and Watson Visual Recognition", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/frontend/public/501.html b/frontend/public/501.html index 25e506a..8f2341a 100644 --- a/frontend/public/501.html +++ b/frontend/public/501.html @@ -4,7 +4,7 @@ - Image classification with Coligo and Watson Visual Recognition + Image classification with Code Engine

- Image Classification with Coligo + Image Classification with Code Engine

@@ -36,13 +36,14 @@

- - + + Code-Engine + +

@@ -50,8 +51,8 @@

- - Tutorial + + Solution-tutorial

diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css index d841fdd..dfb2d3e 100644 --- a/frontend/public/css/style.css +++ b/frontend/public/css/style.css @@ -23,12 +23,162 @@ body { inset 7px 7px 20px 0 rgba(0, 0, 0, 0.2); } -.card { - border-radius: 9px; - background: #eaf1f3; - box-shadow: 5px 5px 8px #bec3c5, -5px -5px 8px #ffffff; -} - .tag, .table{ font-family: 'IBM Plex Mono'; +} + +button { + margin-left:15px; +} + +.card-footer-item { + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; +} + +/*Loader*/ +.loader-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: #fff; + opacity: 0; + z-index: -1; + transition: opacity 0.3s; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; +} +.loader-wrapper .loader { + height: 80px; + width: 80px; +} +.loader-wrapper.is-active { + opacity: 1; + z-index: 1; +} +.is-loading { + position: relative; +} + +/*NOTIFICATION*/ + +.notifications { + position: fixed; + z-index: 9999; + top: 75px; + right: 15px; + width: auto; +} + +.notification { + position: relative; + top: 0; + min-width: 100px; + padding: 1rem 1.25rem 1rem 1.25rem; + transition: .3s; + text-align: center; + box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1); +} + +.notification:hover { + cursor: pointer; + transition: .3s; + box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .2); +} + +@-webkit-keyframes slideInRight { + from { + visibility: visible; + -webkit-transform: translate3d(150%, 0, 0); + transform: translate3d(150%, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInRight { + from { + visibility: visible; + -webkit-transform: translate3d(150%, 0, 0); + transform: translate3d(150%, 0, 0); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; + -webkit-animation-duration: .3s; + animation-duration: .3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(150%, 0, 0); + transform: translate3d(150%, 0, 0); + } +} + +@keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(150%, 0, 0); + transform: translate3d(150%, 0, 0); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; + -webkit-animation-duration: .3s; + animation-duration: .3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +/*** LEGEND **/ +.fieldset{ + background-color: #fff; + border-radius: 6px; + box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02); + color: #4a4a4a; + display: block; + padding: 1.25rem; + border: 1px solid #ccc +} +.fieldset > legend{ + color: #363636; + display: block; + font-size: 1rem; + font-weight: 700; + background-color: #fff; + padding: 0 5px; + width: max-content; + border: 0 none } \ No newline at end of file diff --git a/frontend/public/index.html b/frontend/public/index.html index dad8ac6..e29495a 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -4,7 +4,7 @@ - Image classification with Coligo and Watson Visual Recognition + Image classification with Code Engine - -
+
- + +
+
+
+
+
+
+
+
+
+
+ +
@@ -143,6 +101,7 @@

diff --git a/frontend/public/index_old.html b/frontend/public/index_old.html new file mode 100644 index 0000000..71c5300 --- /dev/null +++ b/frontend/public/index_old.html @@ -0,0 +1,157 @@ + + + + + + + Image classification with Code Engine and Watson Visual Recognition + + + + + + + +
+
+ +
+
+
+
+
+

+ Image Classification +

+

+ powered by Code Engine and Visual Recognition +

+
+
+
+ +
+
+
+ + +
+

+
+
+

+
+
+
+
+

Image preview

+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + + + + diff --git a/frontend/public/js/index.js b/frontend/public/js/index.js index 10e0c81..3f7248d 100644 --- a/frontend/public/js/index.js +++ b/frontend/public/js/index.js @@ -1,87 +1,205 @@ $(document).ready(function () { - $("p.error").text(""); - $("p.success").text(""); - $("#uploadbtn").attr("disabled", true); + $('.loader-wrapper').addClass('is-active'); + getUploadedImages(); + $("#classifybtn").attr("disabled", true); + $("#uploadbtn").click(function(e){ + $("#file").click(); + e.preventDefault(); + }); $("#file").change(function () { - $("#column-multiline").empty(); - showUploadedImage(this); - $("#uploadbtn").removeAttr("disabled"); + $("#uploadbtn").submit(); }); + $("#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 connection to cloud services","is-danger"); + console.log(data); $("#uploadbtn").removeClass("is-loading"); - $("#uploadbtn").attr("disabled", true); + $('.loader-wrapper').removeClass('is-active'); }, success: function (response) { - console.log(response.data); - $("p.success").text(response.data); + // // console.log("i am here too"); + // console.log(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; }); - $("#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") + +/** + * Show notification - error, success, info + * + * @param {*} data + * @param {*} cssclass + */ +function showNotification(data,cssclass) +{ + $('.notifications').empty(); + notify(data, cssclass, 7000); + $(".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; +}); +/** + * Generate a unique identifier for each notification + * + * @param {*} len + * @return {*} + */ +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; +} +/** + * Send a notification to the UI with Unique ID + * + * @param {*} msg + * @param {*} mode + * @param {*} duration + */ +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 an image + * + * @param {*} filename + */ +function deleteImage(filename){ + $("#classifybtn").attr("disabled", true); + $.ajax({ + type: "DELETE", + url: "/image?filename="+filename, + success: function (response) { + showNotification("Image deleted successfully...","is-primary"); + }, + error: function (data) { + console.log(data); + } + }); +} +function addClickToDelete(){ + $(".card-content").on("click","a", function (){ + var filename=$(this).attr("id"); + deleteImage(filename); + getUploadedImages(); + $("#column-multiline").remove($(this).parents(".card")); + }); + return false; +} +/** + * Toggle the results table + * + */ +function toggleTable(){ + $('.table-toggle').each(function (index){ + $(this).on("click", function(){ + $(this).parent().siblings(".table").toggleClass('is-hidden'); + }); + + }); +} +/** + * Read the results from the COS Bucket + * JSON output post Job run + * + */ +function readResults(){ + $.ajax({ + type: "POST", + url: "/classifyimage", + success: function (response) { + $("#classifybtn").removeAttr("disabled"); + //console.log(response); + var data = JSON.parse(response.data); + //console.log(data); + $("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(Object.keys(data).length); + if (Object.keys(data).length !== 0 && data.hasOwnProperty(value)) { + 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 + + "" ); - - 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); - } - }); + parent.siblings().children(".card-content").children(".tag").text("Classified"); + parent.siblings().children(".card-content").children("span").toggleClass("is-info"); + $('.loader-wrapper').removeClass('is-active'); + } + } + else { + $('.loader-wrapper').removeClass('is-active'); + } + }); + toggleTable(); + }, + error: function (data) { + //$("p.error").text(data.statusText + ":" + "Check logs for more info"); + console.log(data); + $("#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 @@ -90,58 +208,84 @@ $(document).ready(function () { $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); +/** + * Get the Uploaded Images from the COS Bucket + * + * @return {*} + */ +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); + if(response.data.includes("error") ) { + showNotification("An error occurred, check your backend connection to cloud services", "is-danger"); + $("#classifybtn").attr("disabled", true); + $('.loader-wrapper').removeClass('is-active'); + return false; + } + var data = JSON.parse(response.data); + //console.log(data); - // 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; + if(Object.keys(data).length === 0) { + showNotification("Upload an image...", "is-info"); + $('.loader-wrapper').removeClass('is-active'); + return false; } - $("#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); + 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 + ":" + "An error occurred while uploading, check your backend logs."; + console.log(data); + showNotification(error, "is-danger"); + $("#classifybtn").attr("disabled", true); + $('.loader-wrapper').removeClass('is-active'); } - } + }); + return false; } }); 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); + } + } + } +}); diff --git a/jobs/analyze_images.yaml b/jobs/analyze_images.yaml index 6eaad3a..17df4a8 100644 --- a/jobs/analyze_images.yaml +++ b/jobs/analyze_images.yaml @@ -1,22 +1,21 @@ -apiVersion: coligo.cloud.ibm.com/v1alpha1 +apiVersion: codeengine.cloud.ibm.com/v1beta1 kind: JobRun metadata: generateName: classify-images- spec: - arraySize: 1 - retryLimit: 2 jobDefinitionSpec: - containers: - - name: coligo-jobs - image: ibmcom/backend-job - envFrom: - - secretRef: - name: cos-job-secret - - secretRef: - name: vr-secret - - configMapRef: - name: backend-configuration - resources: - requests: - memory: "128Mi" - cpu: "1" \ No newline at end of file + arraySpec: "1" + retryLimit: 2 + template: + containers: + - name: codeengine-jobs + image: ibmcom/backend-job + envFrom: + - secretRef: + name: backend-job-job-binding-request + - configMapRef: + name: backend-configuration + resources: + requests: + memory: "128Mi" + cpu: "1" \ No newline at end of file diff --git a/jobs/index.js b/jobs/index.js index f1a2fd7..ff8cb47 100644 --- a/jobs/index.js +++ b/jobs/index.js @@ -8,9 +8,9 @@ const VisualRecognitionV3 = require("ibm-watson/visual-recognition/v3"); const { IamAuthenticator } = require("ibm-watson/auth"); const visualRecognition = new VisualRecognitionV3({ - url: process.env.VR_URL, + url: process.env.VR_JOB_SECRET_URL, version: process.env.VR_VERSION || '2018-03-19', - authenticator: new IamAuthenticator({ apikey: process.env.VR_APIKEY }), + authenticator: new IamAuthenticator({ apikey: process.env.VR_JOB_SECRET_APIKEY }), }); var config = { @@ -24,6 +24,12 @@ var config = { var cosClient = new myCOS.S3(config); getBucketContents(process.env.COS_BUCKETNAME); +/** + * Get contents of a COS Bucket + * + * @param {*} bucketName + * @return {*} + */ function getBucketContents(bucketName) { console.log(`Retrieving bucket contents from: ${bucketName}`); return cosClient @@ -43,7 +49,13 @@ function getBucketContents(bucketName) { console.error(`ERROR: ${e.code} - ${e.message}\n`); }); } - +/** + * Get an Item from a COS Bucket + * + * @param {*} bucketName + * @param {*} itemName + * @return {*} + */ function getItem(bucketName, itemName) { console.log(`Retrieving item from bucket: ${bucketName}, key: ${itemName}`); return cosClient @@ -61,7 +73,7 @@ function getItem(bucketName, itemName) { visualRecognition .classify(params) .then((response) => { - //console.log(JSON.stringify(response.result, null, 2)); + console.log(JSON.stringify(response.result, null, 2)); createJsonFile(bucketName+'/results',itemName.split('/')[1]+'.json',JSON.stringify(response.result, null, 2)); }) .catch((err) => { @@ -75,7 +87,14 @@ function getItem(bucketName, itemName) { console.error(`ERROR: ${e.code} - ${e.message}\n`); }); } - +/** + * Create a JSON file from the Visual Recognition results + * + * @param {*} bucketName + * @param {*} itemName + * @param {*} fileText + * @return {*} + */ function createJsonFile(bucketName, itemName, fileText) { console.log(`Creating new item: ${itemName}`); return cosClient.putObject({