From 8827f8456ed5a44c4bae6bb4c9ed6d800346536a Mon Sep 17 00:00:00 2001 From: Mamoon Raja Date: Mon, 20 Jan 2020 16:51:09 -0500 Subject: [PATCH 1/2] feat: add support for analytics --- README.md | 4 ++-- build/asset-manifest.json | 8 ++++---- build/index.html | 2 +- ...precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js} | 8 ++++---- build/service-worker.js | 4 ++-- .../js/{main.d735c621.chunk.js => main.63e16f74.chunk.js} | 2 +- ...n.d735c621.chunk.js.map => main.63e16f74.chunk.js.map} | 2 +- public/index.html | 2 ++ 8 files changed, 17 insertions(+), 15 deletions(-) rename build/{precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js => precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js} (72%) rename build/static/js/{main.d735c621.chunk.js => main.63e16f74.chunk.js} (99%) rename build/static/js/{main.d735c621.chunk.js.map => main.63e16f74.chunk.js.map} (99%) diff --git a/README.md b/README.md index 7190e23..ea80790 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@

-✨ **Demo:** https://visual-recognition-code-pattern.mybluemix.net/ ✨ +✨ **Demo:** https://visual-recognition-code-pattern.ng.bluemix/ ✨ ### Flow @@ -20,7 +20,7 @@ 1. User sends messages to the application (running locally, in the IBM Cloud). 1. The application sends the user message to IBM Watson Visual Recognition service. -1. Watson Visual Recognition processes the text or url and extract features such us keywords, concepts, categories. The service can be provisioned on IBM Cloud. +1. Watson Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, text, and other subjects. The service can be provisioned on IBM Cloud. ## Prerequisites diff --git a/build/asset-manifest.json b/build/asset-manifest.json index 5483d35..44cb428 100644 --- a/build/asset-manifest.json +++ b/build/asset-manifest.json @@ -1,14 +1,14 @@ { "files": { "main.css": "/static/css/main.b357d245.chunk.css", - "main.js": "/static/js/main.d735c621.chunk.js", - "main.js.map": "/static/js/main.d735c621.chunk.js.map", + "main.js": "/static/js/main.63e16f74.chunk.js", + "main.js.map": "/static/js/main.63e16f74.chunk.js.map", "runtime-main.js": "/static/js/runtime-main.52a78ae3.js", "runtime-main.js.map": "/static/js/runtime-main.52a78ae3.js.map", "static/js/2.f3856bd2.chunk.js": "/static/js/2.f3856bd2.chunk.js", "static/js/2.f3856bd2.chunk.js.map": "/static/js/2.f3856bd2.chunk.js.map", "index.html": "/index.html", - "precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js": "/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js", + "precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js": "/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js", "service-worker.js": "/service-worker.js", "static/css/main.b357d245.chunk.css.map": "/static/css/main.b357d245.chunk.css.map", "static/js/2.f3856bd2.chunk.js.LICENSE": "/static/js/2.f3856bd2.chunk.js.LICENSE" @@ -17,6 +17,6 @@ "static/js/runtime-main.52a78ae3.js", "static/js/2.f3856bd2.chunk.js", "static/css/main.b357d245.chunk.css", - "static/js/main.d735c621.chunk.js" + "static/js/main.63e16f74.chunk.js" ] } \ No newline at end of file diff --git a/build/index.html b/build/index.html index b02433c..be1e4db 100644 --- a/build/index.html +++ b/build/index.html @@ -1 +1 @@ -Visual Recognition
\ No newline at end of file +Visual Recognition
\ No newline at end of file diff --git a/build/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js b/build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js similarity index 72% rename from build/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js rename to build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js index 5000000..358b96b 100644 --- a/build/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js +++ b/build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js @@ -1,10 +1,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "fc5053c5b172f036ad1236418ef11709", + "revision": "f1df6cd937096cc885257f968f1bcc11", "url": "/index.html" }, { - "revision": "5fab1104440967891040", + "revision": "047d301e496bf7329a8e", "url": "/static/css/main.b357d245.chunk.css" }, { @@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/static/js/2.f3856bd2.chunk.js.LICENSE" }, { - "revision": "5fab1104440967891040", - "url": "/static/js/main.d735c621.chunk.js" + "revision": "047d301e496bf7329a8e", + "url": "/static/js/main.63e16f74.chunk.js" }, { "revision": "d996e3999a440231bd2a", diff --git a/build/service-worker.js b/build/service-worker.js index 1b8f33f..1a528c1 100644 --- a/build/service-worker.js +++ b/build/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js" + "/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js" ); self.addEventListener('message', (event) => { @@ -35,5 +35,5 @@ workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), { - blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/], + blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/], }); diff --git a/build/static/js/main.d735c621.chunk.js b/build/static/js/main.63e16f74.chunk.js similarity index 99% rename from build/static/js/main.d735c621.chunk.js rename to build/static/js/main.63e16f74.chunk.js index 1b97b43..72966c9 100644 --- a/build/static/js/main.d735c621.chunk.js +++ b/build/static/js/main.63e16f74.chunk.js @@ -1,2 +1,2 @@ (this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]=this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]||[]).push([[0],{14:function(e){e.exports=JSON.parse('{"b":"Watson Visual Recognition","a":"The Visual Recognition service uses deep learning algorithms to analyze images for scenes, objects, text, and other subjects."}')},16:function(e,t,a){},23:function(e){e.exports=JSON.parse('[{"url":"/images/classify/small/tweed_jacket.jpg","alt":"tweed jacket"},{"url":"/images/classify/small/computer_chip.jpg","alt":"computer-chip"},{"url":"/images/classify/small/soy_sauce.jpg","alt":"kodak-film"}]')},24:function(e){e.exports=JSON.parse('[{"classifier_id":"default","name":"default","classes":[{"class":"fabric","score":0.959},{"class":"gray color","score":0.946},{"class":"Harris Tweed (jacket)","score":0.87,"type_hierarchy":"/fabric/Harris Tweed (jacket)"},{"class":"clothing","score":0.8},{"class":"tweed","score":0.791,"type_hierarchy":"/fabric/tweed"},{"class":"garment","score":0.518},{"class":"overgarment","score":0.517},{"class":"coat","score":0.509},{"class":"Norfolk jacket","score":0.5,"type_hierarchy":"/garment/overgarment/coat/Norfolk jacket"}],"display":"General Model","description":"Quickly understand objects, actions, scenes, and colors within an image."},{"classifier_id":"food","name":"food","classes":[{"class":"non-food","score":0.998}],"display":"Food Model","description":"Identify meals and food items with enhanced accuracy."},{"classifier_id":"explicit","name":"explicit","classes":[{"class":"not explicit","score":0.991}],"display":"Explicit Model","description":"Determine if an image contains nudity or other inappropriate content."}]')},33:function(e,t,a){e.exports=a(41)},41:function(e,t,a){"use strict";a.r(t);var n=a(0),c=a.n(n),i=a(18),r=a.n(i),o=(a(16),a(48)),s=a(42),l=a(25),m=a.n(l),u=a(26),d=a.n(u),p=a(29),f=a.n(p),g=a(28),E=a.n(g),h=a(27),v=a.n(h),b=a(44),k=function(e){var t=e.description,a=e.links,n=e.title;return c.a.createElement(b.b,{className:"header"},c.a.createElement("div",{className:"title-container"},c.a.createElement("h2",{className:"header-title"},n),c.a.createElement("p",null,t)),c.a.createElement("div",{className:"link-container"},c.a.createElement("div",{className:"link-wrapper"},a.map((function(e){return e})))))};k.defaultProps={description:"",links:[],title:""};var _=k,y=a(19),N=a.n(y),w=a(4),j=function(e){var t=e.images,a=e.onClick;return t.map((function(e,t){return c.a.createElement("div",{key:t,className:"image-picker--section__tile"},c.a.createElement(b.a,{id:"tile-".concat(t),handleClick:function(){a(t)}},c.a.createElement("img",{className:"image-picker--section__image",src:e.url,alt:e.alt})))}))},C=function(e){var t=e.loadingMessage;return c.a.createElement("span",{className:"loader"},c.a.createElement("div",{className:"loader-container"},c.a.createElement("div",{className:"loader-dots"}),t?c.a.createElement("div",{className:"loader-message"},c.a.createElement("p",{className:"ibm-type-a"},t)):null))};C.defaultProps={loadingMessage:null};var S=C,O=a(30),B=a(21),W=a.n(B),I=function(e){var t=e.onUpload;return c.a.createElement("div",{className:"image-picker--section__tile"},c.a.createElement(b.a,{id:"123",handleClick:function(){}},c.a.createElement(O.a,{multiple:!1,onDrop:function(e){t(e)}},(function(e){var t=e.getRootProps,a=e.getInputProps;return c.a.createElement("div",Object.assign({},t(),{className:"upload-image"}),c.a.createElement("input",a()),c.a.createElement(W.a,null),c.a.createElement("p",{className:"upload-text"},"Select or drag an image"))}))))},x=function(e){var t=e.showLoader,a=e.viewerImage,n=e.pickerImages,i=e.onSelectTile,r=e.onUpload;return c.a.createElement("div",{className:"main-image-picker__container"},c.a.createElement("div",{className:"main-image-picker"},c.a.createElement("div",null,c.a.createElement("img",{className:"main-image-picker__image",src:a,alt:"main"}),t?c.a.createElement(S,null):null)),c.a.createElement("div",{className:"image-selection__container"},c.a.createElement("div",{className:"image-picker__tiles"},c.a.createElement(j,{images:n,onClick:function(e){i(e)}}),c.a.createElement(I,{onUpload:function(e){r(e)}}))))};x.defaultProps={viewerType:"image"};var D=x,P=function(e){var t=e.images,a=e.onSubmitImage,i=e.handleUnsupportedFormats,r=e.isClassifying,o="";t[0]&&t[0].url&&(o=t[0].url);var s=Object(n.useState)(o),l=Object(w.a)(s,2),m=l[0],u=l[1];return c.a.createElement(b.b,{className:"input-container"},c.a.createElement("h4",{className:"container-title"},"Input"),c.a.createElement(D,{showLoader:r,viewerImage:m,pickerImages:t,onSelectTile:function(e){!function(e){var n=t[e].url;a({image_file:n}),u(n)}(e)},onUpload:function(e){!function(e){var t=e[0];if(["image/gif","image/png","image/jpg","image/jpeg"].includes(t.type)){var n=new FileReader;n.onabort=function(){return console.log("file reading was aborted")},n.onerror=function(){return console.log("file reading has failed")},n.onload=function(){var e=n.result;u(e),a({image_data:e})},n.readAsDataURL(t)}else i()}(e)}}),c.a.createElement("h4",{className:"container-footer"},"Select An Image to Analyze"))},A=a(50),F=a(45),T=a(46),R=a(49);function M(e){var t,a=e.progress;return c.a.createElement("div",{className:"bar-container"},c.a.createElement("div",{className:"bar-full"},c.a.createElement("div",{className:"bar",style:{width:"".concat((t=a,Math.abs(Math.round(100*t))),"%")}})),c.a.createElement("div",{className:"progress"},function(e){return(Math.round(100*e)/100).toFixed(2)}(a)))}M.defaultProps={progress:0};var U=M,J=a(22),H=a.n(J),G=function(e){var t=e.classifyResults,a=Object(n.useState)("table"),i=Object(w.a)(a,2),r=i[0],o=i[1];return c.a.createElement(b.b,{className:"output-container"},c.a.createElement("h3",{className:"output-container__title"},"Output"),c.a.createElement("div",{className:"output-container__control-panel"},c.a.createElement(A.a,{className:"output-container__content-switch",onChange:function(e){o(e.name)},selectedIndex:"table"===r?0:1},c.a.createElement(F.a,{name:"table",text:"Table"}),c.a.createElement(F.a,{name:"json",text:"JSON"}))),c.a.createElement(T.a,{legendText:"Result"},"table"===r?c.a.createElement(R.a,null,c.a.createElement("div",{className:"output-container__accordian-header"},c.a.createElement("p",null,"Top Classes"),c.a.createElement("p",null,"Score")),t.map((function(e){return c.a.createElement("div",{key:e.class,className:"output-container__accordian-item"},c.a.createElement("p",null,e.class),c.a.createElement(U,{progress:e.score}))}))):c.a.createElement(H.a,{name:!1,enableClipboard:!1,displayDataTypes:!1,displayObjectSize:!1,collapsed:2,collapseStringsAfterLength:20,theme:"monokai",style:{lineHeight:"1.3em"},src:t})))};G.defaultProps={classifyResults:null};var L=G,q=a(47),z=function(e){var t=e.caption,a=e.children,i=e.className,r=e.hideAfterFirstDisplay,o=e.hideCloseButton,s=e.iconDescription,l=e.kind,m=e.lowContrast,u=e.onCloseButtonClick,d=e.role,p=e.subtitle,f=e.timeout,g=e.title,E=Object(n.useState)(),h=Object(w.a)(E,2),v=h[0],b=h[1],k=Object(n.useState)(!1),_=Object(w.a)(k,2),y=_[0],N=_[1];return Object(n.useEffect)((function(){b(Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15))}),[]),Object(n.useEffect)((function(){var e=document.querySelector(".custom-toast-".concat(v));e&&(e.className+="enter")}),[v]),Object(n.useEffect)((function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&"true"===window.localStorage.getItem("notificationHasBeenSeen")&&N(!0)}),[r]),y?null:c.a.createElement(q.a,{caption:t,className:"custom-toast-".concat(v," ").concat(i),hideCloseButton:o,iconDescription:s,kind:l,lowContrast:m,onCloseButtonClick:function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&window.localStorage.setItem("notificationHasBeenSeen","true"),u()},role:d,subtitle:p,timeout:f,title:g},a)};z.defaultProps={caption:"",children:null,className:"",hideAfterFirstDisplay:!0,hideCloseButton:!1,iconDescription:"closes notification",kind:"error",lowContrast:!1,onCloseButtonClick:function(){},role:"alert",subtitle:"",timeout:0,title:""};var Q=z,V=a(23),K=a(24),X=function(){var e,t=Object(n.useState)(!1),a=Object(w.a)(t,2),i=a[0],r=a[1],o=Object(n.useState)(K),s=Object(w.a)(o,2),l=s[0],m=s[1],u=Object(n.useState)(null),d=Object(w.a)(u,2),p=d[0],f=d[1];return c.a.createElement("div",{className:"service-container"},c.a.createElement(Q,{kind:"info",subtitle:"This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679."}),p&&c.a.createElement(Q,{kind:"error",title:p.title,subtitle:p.description,hideAfterFirstDisplay:!1,timeout:5e3,onCloseButtonClick:function(){return f(null)}}),c.a.createElement(P,{onSubmitImage:function(e){!function(e){N.a.async((function(t){for(;;)switch(t.prev=t.next){case 0:r(!0),fetch("/api/classify",{method:"POST",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(e)}).then((function(e){return e.json()})).then((function(e){console.log(e),e.error?f(e.error):m(e.result.images[0].classifiers)})).catch((function(e){f({title:e.message,description:e.message})})).finally((function(){return r(!1)}));case 2:case"end":return t.stop()}}))}(e)},isClassifying:i,images:V,handleUnsupportedFormats:function(){f({title:"Invalid file format:",description:"Only JPGs, PNGs, and GIFs are supported"})}}),c.a.createElement(L,{classifyResults:(e=l,e[0].classes.sort((function(e,t){return t.score-e.score})).slice(0,10))}))},Y=a(14),$=[c.a.createElement(o.a,{className:"link",key:"api-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/apidocs/visual-recognition"},c.a.createElement("p",{className:"link-text"},"API reference"),c.a.createElement(m.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"docs-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/docs/services/visual-recognition?topic=visual-recognition-getting-started-tutorial"},c.a.createElement("p",{className:"link-text"},"Documentation"),c.a.createElement(d.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"github-link",target:"_blank",rel:"noopener noreferrer",href:"https://github.com/watson-developer-cloud/visual-recognition-code-pattern"},c.a.createElement("p",{className:"link-text"},"GitHub"),c.a.createElement(v.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link getting-started",key:"ibm-cloud-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/registration?target=%2Fcatalog%2Fservices%2Fvisual-recognition%3FhideTours%3Dtrue%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmca1%3D000000OF%26cm_mmca2%3D10000409&_ga=2.158846578.918027017.1572271296-1405764752.1539884377&_gac=1.250083700.1571850605.Cj0KCQjw3JXtBRC8ARIsAEBHg4m4g1PSkKQRoI6YUe4A-6ysul0ziiWU0DVbqlbWAQpq3721u-bxkd0aAkV3EALw_wcB&cm_mc_uid=83381689395615475202389&cm_mc_sid_50200000=82214471572470185115&cm_mc_sid_52640000=21949701572470185117&cm_mmc=Earned-_-Watson%20Core%20-%20Platform-_-WW_WW-_-intercom&cm_mmca1=000000OF&cm_mmca2=10000409"},c.a.createElement(s.a,{className:"link-button",kind:"tertiary",renderIcon:E.a},"Start for free on IBM Cloud"),c.a.createElement(f.a,{className:"link-icon"}))],Z=function(){return c.a.createElement("div",{className:"app-container"},c.a.createElement(_,{description:Y.a,links:$,title:Y.b}),c.a.createElement(X,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));r.a.render(c.a.createElement(Z,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}},[[33,1,2]]]); -//# sourceMappingURL=main.d735c621.chunk.js.map \ No newline at end of file +//# sourceMappingURL=main.63e16f74.chunk.js.map \ No newline at end of file diff --git a/build/static/js/main.d735c621.chunk.js.map b/build/static/js/main.63e16f74.chunk.js.map similarity index 99% rename from build/static/js/main.d735c621.chunk.js.map rename to build/static/js/main.63e16f74.chunk.js.map index 37f64d6..6b1af0e 100644 --- a/build/static/js/main.d735c621.chunk.js.map +++ b/build/static/js/main.63e16f74.chunk.js.map @@ -1 +1 @@ -{"version":3,"sources":["components/Header/Header.js","components/Header/index.js","components/ImagePicker/ImagePicker.js","components/Loader/Loader.js","components/UploadImage/UploadImage.js","components/ImagePanel/ImagePanel.js","components/ImageContainer/index.js","components/ImageContainer/ImageContainer.js","components/ProgressBar/ProgressBar.js","components/ProgressBar/index.js","components/OutputContainer/OutputContainer.js","components/Toast/Toast.js","components/Toast/index.js","components/ServiceContainer/index.js","components/ServiceContainer/ServiceContainer.js","components/ServiceContainer/utils.js","App.js","serviceWorker.js","index.js"],"names":["Header","description","links","title","Tile","className","map","link","defaultProps","ImagePicker","images","onClick","image","i","key","id","handleClick","src","url","alt","Loader","loadingMessage","UploadImage","onUpload","multiple","onDrop","acceptedFiles","getRootProps","getInputProps","ImagePanel","showLoader","viewerImage","pickerImages","onSelectTile","files","viewerType","ImageContainer","onSubmitImage","handleUnsupportedFormats","isClassifying","defaultImageUrl","useState","mainDisplayImage","setMainDisplayImage","tileId","selectedImage","image_file","submitSampleImage","includes","type","reader","FileReader","onabort","console","log","onerror","onload","imageData","result","image_data","readAsDataURL","submitUserImage","ProgressBar","num","progress","style","width","Math","abs","round","toFixed","formatNumber","OutputContainer","classifyResults","outputType","setOutputType","ContentSwitcher","onChange","e","name","selectedIndex","Switch","text","FormGroup","legendText","Accordion","item","class","score","enableClipboard","displayDataTypes","displayObjectSize","collapsed","collapseStringsAfterLength","theme","lineHeight","Toast","caption","children","hideAfterFirstDisplay","hideCloseButton","iconDescription","kind","lowContrast","onCloseButtonClick","role","subtitle","timeout","setId","hideToast","setHideToast","useEffect","random","toString","substring","element","document","querySelector","undefined","window","localStorage","getItem","setItem","ServiceContainer","setIsClassifying","defaultResponse","results","setResults","error","setError","a","async","fetch","method","headers","body","JSON","stringify","then","response","json","data","classifiers","catch","err","message","finally","onClassify","sampleImages","classes","sort","b","slice","HEADER_LINKS","Link","target","rel","href","Button","renderIcon","Launch16","App","Boolean","location","hostname","match","ReactDOM","render","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"m4DAIaA,EAAS,SAAC,GAAD,IAAGC,EAAH,EAAGA,YAAaC,EAAhB,EAAgBA,MAAOC,EAAvB,EAAuBA,MAAvB,OACpB,kBAACC,EAAA,EAAD,CAAMC,UAAU,UACd,yBAAKA,UAAU,mBACb,wBAAIA,UAAU,gBAAgBF,GAC9B,2BAAIF,IAEN,yBAAKI,UAAU,kBACb,yBAAKA,UAAU,gBAAgBH,EAAMI,KAAI,SAAAC,GAAI,OAAIA,SAWvDP,EAAOQ,aAAe,CACpBP,YAAa,GACbC,MAAO,GACPC,MAAO,IAGMH,IC3BAA,ED2BAA,E,wBEWAS,EAjCY,SAAC,GAGrB,IAFLC,EAEI,EAFJA,OACAC,EACI,EADJA,QAOA,OACED,EAAOJ,KAAI,SAACM,EAAOC,GACjB,OACE,yBAAKC,IAAKD,EAAGR,UAAU,+BACrB,kBAAC,IAAD,CACEU,GAAE,eAAUF,GACZG,YAAa,WATrBL,EAS0CE,KAElC,yBAAKR,UAAU,+BACbY,IAAKL,EAAMM,IACXC,IAAKP,EAAMO,YCtBnBC,EAAS,SAAC,GAAD,IAAGC,EAAH,EAAGA,eAAH,OACb,0BAAMhB,UAAU,UACd,yBAAKA,UAAU,oBACb,yBAAKA,UAAU,gBACbgB,EACA,yBAAKhB,UAAU,kBACb,uBAAGA,UAAU,cAAcgB,IAE3B,QASVD,EAAOZ,aAAe,CACpBa,eAAgB,MAGHD,Q,yBCcAE,EA9BY,SAAC,GAErB,IADLC,EACI,EADJA,SAEA,OACE,yBAAKlB,UAAU,+BACb,kBAAC,IAAD,CACEU,GAAG,MACHC,YAAa,cAEb,kBAAC,IAAD,CACEQ,UAAU,EACVC,OAAQ,SAACC,GAAoBH,EAASG,MAErC,gBAAEC,EAAF,EAAEA,aAAcC,EAAhB,EAAgBA,cAAhB,OACC,yCAASD,IAAT,CAAyBtB,UAAU,iBACjC,0BAAWuB,KACX,kBAAC,IAAD,MACA,uBAAGvB,UAAU,eAAb,kCCnBRwB,EAAa,SAAC,GAMb,IALLC,EAKI,EALJA,WACAC,EAII,EAJJA,YACAC,EAGI,EAHJA,aACAC,EAEI,EAFJA,aACAV,EACI,EADJA,SAEA,OACE,yBAAKlB,UAAU,gCACb,yBAAKA,UAAU,qBACb,6BACE,yBAAKA,UAAU,2BACbY,IAAKc,EACLZ,IAAI,SAELW,EACC,kBAAC,EAAD,MACE,OAGR,yBAAKzB,UAAU,8BACb,yBAAKA,UAAU,uBACb,kBAAC,EAAD,CACEK,OAAQsB,EACRrB,QAAS,SAACI,GAASkB,EAAalB,MAElC,kBAAC,EAAD,CACEQ,SAAU,SAACW,GAAYX,EAASW,UAiB5CL,EAAWrB,aAAe,CACxB2B,WAAY,SAGCN,QCrDAO,ECMe,SAAC,GAKxB,IAJL1B,EAII,EAJJA,OACA2B,EAGI,EAHJA,cACAC,EAEI,EAFJA,yBACAC,EACI,EADJA,cAEIC,EAAkB,GAClB9B,EAAO,IAAMA,EAAO,GAAGQ,MACzBsB,EAAkB9B,EAAO,GAAGQ,KAH1B,MAK4CuB,mBAASD,GALrD,mBAKGE,EALH,KAKqBC,EALrB,KAgCJ,OACE,kBAACvC,EAAA,EAAD,CAAMC,UAAU,mBACd,wBAAIA,UAAU,mBAAd,SACA,kBAAC,EAAD,CACEyB,WAAYS,EACZR,YAAaW,EACbV,aAActB,EACduB,aAAc,SAACW,IAhCK,SAACA,GACzB,IAAMC,EAAgBnC,EAAOkC,GAAQ1B,IACrCmB,EAAc,CAAES,WAAYD,IAC5BF,EAAoBE,GA6BYE,CAAkBH,IAC9CrB,SAAU,SAACb,IA3BO,SAACA,GACvB,IAAME,EAAQF,EAAO,GAErB,GAD2B,CAAC,YAAY,YAAY,YAAY,cACxCsC,SAASpC,EAAMqC,MAGlC,CACH,IAAMC,EAAS,IAAIC,WACnBD,EAAOE,QAAU,kBAAMC,QAAQC,IAAI,6BACnCJ,EAAOK,QAAU,kBAAMF,QAAQC,IAAI,4BACnCJ,EAAOM,OAAS,WACd,IAAMC,EAAYP,EAAOQ,OACzBf,EAAoBc,GACpBpB,EAAc,CAAEsB,WAAYF,KAE9BP,EAAOU,cAAchD,QAXrB0B,IAuB0BuB,CAAgBnD,MAE1C,wBAAIL,UAAU,oBAAd,gC,gCChDN,SAASyD,EAAT,GAAoC,IAFhBC,EAEGC,EAAY,EAAZA,SACrB,OACE,yBAAK3D,UAAU,iBACb,yBAAKA,UAAU,YACb,yBAAKA,UAAU,MAAM4D,MAAO,CAAEC,MAAM,GAAD,QANvBH,EAMwCC,EANjCG,KAAKC,IAAID,KAAKE,MAAY,IAANN,KAMJ,SAErC,yBAAK1D,UAAU,YATA,SAAA0D,GAAG,OAAKI,KAAKE,MAAY,IAANN,GAAa,KAAKO,QAAQ,GASjCC,CAAaP,KAS9CF,EAAYtD,aAAe,CACzBwD,SAAU,GAGGF,ICxBAA,EDwBAA,E,iBEbFU,EAAkB,SAAC,GAEzB,IADLC,EACI,EADJA,gBACI,EACgChC,mBAAS,SADzC,mBACGiC,EADH,KACeC,EADf,KAOJ,OACE,kBAACvE,EAAA,EAAD,CAAMC,UAAU,oBACd,wBAAIA,UAAU,2BAAd,UACA,yBAAKA,UAAU,mCACb,kBAACuE,EAAA,EAAD,CACEvE,UAAU,mCACVwE,SAVmB,SAAAC,GACzBH,EAAcG,EAAEC,OAUVC,cAA8B,UAAfN,EAAyB,EAAI,GAE5C,kBAACO,EAAA,EAAD,CAAQF,KAAK,QAAQG,KAAK,UAC1B,kBAACD,EAAA,EAAD,CAAQF,KAAK,OAAOG,KAAK,WAG7B,kBAACC,EAAA,EAAD,CAAWC,WAAW,UACJ,UAAfV,EACC,kBAACW,EAAA,EAAD,KACA,yBAAKhF,UAAU,sCACb,0CACA,qCAEDoE,EAAgBnE,KAAI,SAAAgF,GAAI,OAErB,yBAAKxE,IAAKwE,EAAKC,MAAOlF,UAAU,oCAC9B,2BAAIiF,EAAKC,OACT,kBAAC,EAAD,CAAavB,SAAUsB,EAAKE,aAMlC,kBAAC,IAAD,CACET,MAAM,EACNU,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,EACnBC,UAAW,EACXC,2BAA4B,GAC5BC,MAAM,UACN7B,MAAO,CAAE8B,WAAY,SACrB9E,IAAKwD,OAYjBD,EAAgBhE,aAAe,CAC7BiE,gBAAiB,MAGJD,Q,QCtEFwB,EAAQ,SAAC,GAcf,IAbLC,EAaI,EAbJA,QACAC,EAYI,EAZJA,SACA7F,EAWI,EAXJA,UACA8F,EAUI,EAVJA,sBACAC,EASI,EATJA,gBACAC,EAQI,EARJA,gBACAC,EAOI,EAPJA,KACAC,EAMI,EANJA,YACAC,EAKI,EALJA,mBACAC,EAII,EAJJA,KACAC,EAGI,EAHJA,SACAC,EAEI,EAFJA,QACAxG,EACI,EADJA,MACI,EACgBsC,qBADhB,mBACG1B,EADH,KACO6F,EADP,OAE8BnE,oBAAS,GAFvC,mBAEGoE,EAFH,KAEcC,EAFd,KAiCJ,OA7BAC,qBAAU,WACRH,EACEzC,KAAK6C,SACFC,SAAS,IACTC,UAAU,EAAG,IACd/C,KAAK6C,SACFC,SAAS,IACTC,UAAU,EAAG,OAEnB,IAEHH,qBAAU,WACR,IAAMI,EAAUC,SAASC,cAAT,wBAAwCtG,IACpDoG,IACFA,EAAQ9G,WAAa,WAEtB,CAACU,IAEJgG,qBAAU,WAENZ,QACkBmB,WAAXC,aACwBD,WAAxBC,OAAOC,cAC8C,SAA5DD,OAAOC,aAAaC,QA3CS,4BA6C7BX,GAAa,KAEd,CAACX,IAEGU,EAAY,KACjB,kBAAC,IAAD,CACEZ,QAASA,EACT5F,UAAS,uBAAkBU,EAAlB,YAAwBV,GACjC+F,gBAAiBA,EACjBC,gBAAiBA,EACjBC,KAAMA,EACNC,YAAaA,EACbC,mBAAoB,WAEhBL,QACkBmB,WAAXC,aACwBD,WAAxBC,OAAOC,cAEdD,OAAOC,aAAaE,QA/DK,0BA+D+B,QAE1DlB,KAEFC,KAAMA,EACNC,SAAUA,EACVC,QAASA,EACTxG,MAAOA,GAEN+F,IAqBPF,EAAMxF,aAAe,CACnByF,QAAS,GACTC,SAAU,KACV7F,UAAW,GACX8F,uBAAuB,EACvBC,iBAAiB,EACjBC,gBAAiB,sBACjBC,KAAM,QACNC,aAAa,EACbC,mBAAoB,aACpBC,KAAM,QACNC,SAAU,GACVC,QAAS,EACTxG,MAAO,IAGM6F,IC/GAA,ED+GAA,E,gBEhHA2B,ECWiB,WAAO,ICZNlD,EDYK,EACMhC,oBAAS,GADf,mBAC7BF,EAD6B,KACdqF,EADc,OAENnF,mBAASoF,GAFH,mBAE7BC,EAF6B,KAEpBC,EAFoB,OAGVtF,mBAAS,MAHC,mBAG7BuF,EAH6B,KAGtBC,EAHsB,KAkCpC,OACE,yBAAK5H,UAAU,qBACb,kBAAC,EAAD,CAAOiG,KAAK,OAAOI,SAtCvB,yRAuCKsB,GACC,kBAAC,EAAD,CACE1B,KAAK,QACLnG,MAAO6H,EAAM7H,MACbuG,SAAUsB,EAAM/H,YAChBkG,uBAAuB,EACvBQ,QAAS,IACTH,mBAAoB,kBAAMyB,EAAS,SAGvC,kBAAC,EAAD,CACE5F,cAAe,SAACzB,IAvCH,SAAOA,GAAP,EAAAsH,EAAAC,OAAA,gDACjBP,GAAiB,GACjBQ,MAAM,gBAAiB,CACrBC,OAAQ,OACRC,QAAS,CACP,OAAU,mBACV,eAAgB,oBAElBC,KAAMC,KAAKC,UAAU7H,KAEtB8H,MAAK,SAACC,GAAD,OAAcA,EAASC,UAC5BF,MAAK,SAAAG,GACJxF,QAAQC,IAAIuF,GACRA,EAAKb,MACPC,EAASY,EAAKb,OAEdD,EAAiCc,EC9BfnF,OAAOhD,OAAO,GAAGoI,gBDiCtCC,OAAM,SAACC,GACJf,EAAS,CAAE9H,MAAO6I,EAAIC,QAAShJ,YAAa+I,EAAIC,aAEnDC,SAAQ,kBAAMtB,GAAiB,MAtBf,qCAuCeuB,CAAWvI,IACvC2B,cAAeA,EACf7B,OAAQ0I,EACR9G,yBA9C2B,WAC/B2F,EAAS,CAAE9H,MAAO,uBAAwBF,YAAa,+CA+CrD,kBAAC,EAAD,CACEwE,iBClEyBA,EDkESqD,ECjElBrD,EAAgB,GAAG4E,QACPC,MAAK,SAACpB,EAAGqB,GAAJ,OAAUA,EAAE/D,MAAQ0C,EAAE1C,SAC1CgE,MAAM,EAAE,S,QCUvBC,EAAe,CACnB,kBAACC,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,WACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,oDAEL,uBAAGxJ,UAAU,aAAb,iBACA,kBAAC,IAAD,CAAQA,UAAU,eAEpB,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,YACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,4GAEL,uBAAGxJ,UAAU,aAAb,iBACA,kBAAC,IAAD,CAAYA,UAAU,eAExB,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,cACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,6EAEL,uBAAGxJ,UAAU,aAAb,UACA,kBAAC,IAAD,CAAcA,UAAU,eAE1B,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,uBACVS,IAAI,iBACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,urBAEL,kBAACC,EAAA,EAAD,CAAQzJ,UAAU,cAAciG,KAAK,WAAWyD,WAAYC,KAA5D,+BAGA,kBAAC,IAAD,CAAY3J,UAAU,gBAeX4J,EAXI,kBACjB,yBAAK5J,UAAU,iBACb,kBAAC,EAAD,CACEJ,YAAaA,IACbC,MAAOuJ,EACPtJ,MAAOA,MAET,kBAAC,EAAD,QCrDgB+J,QACW,cAA7B3C,OAAO4C,SAASC,UAEe,UAA7B7C,OAAO4C,SAASC,UAEhB7C,OAAO4C,SAASC,SAASC,MACvB,2DCZNC,IAASC,OAAO,kBAAC,EAAD,MAASnD,SAASoD,eAAe,SD6H3C,kBAAmBC,WACrBA,UAAUC,cAAcC,MAAMjC,MAAK,SAAAkC,GACjCA,EAAaC,kB","file":"static/js/main.d735c621.chunk.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Tile } from 'carbon-components-react';\n\nexport const Header = ({ description, links, title }) => (\n \n
\n

{title}

\n

{description}

\n
\n
\n
{links.map(link => link)}
\n
\n \n);\n\nHeader.propTypes = {\n description: PropTypes.string,\n links: PropTypes.arrayOf(PropTypes.object),\n title: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: '',\n links: [],\n title: '',\n};\n\nexport default Header;\n","import Header from './Header';\nexport default Header;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n SelectableTile\n} from 'carbon-components-react';\n\nexport const ImagePicker = ({\n images,\n onClick,\n}) => {\n\n const onImageClick = (id) => {\n onClick(id);\n }\n\n return (\n images.map((image, i) => {\n return (\n
\n { onImageClick(i); }}\n >\n {image.alt}\n\n \n
\n );\n })\n );\n}\n\nImagePicker.propTypes = {\n images: PropTypes.array.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default ImagePicker;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Loader = ({ loadingMessage }) => (\n \n
\n
\n {(loadingMessage) ? (\n
\n

{loadingMessage}

\n
\n ) : null}\n
\n \n);\n\nLoader.propTypes = {\n loadingMessage: PropTypes.string,\n};\n\nLoader.defaultProps = {\n loadingMessage: null,\n};\n\nexport default Loader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport {\n SelectableTile\n} from 'carbon-components-react';\nimport Upload32 from '@carbon/icons-react/lib/upload/32';\n\nexport const UploadImage = ({\n onUpload,\n}) => {\n return (\n
\n {}}\n >\n { onUpload(acceptedFiles); }}\n >\n {({getRootProps, getInputProps}) => (\n
\n \n \n

Select or drag an image

\n
\n )}\n \n \n
\n);\n}\n\nUploadImage.propTypes = {\n onUpload: PropTypes.func.isRequired,\n};\n\nexport default UploadImage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImagePicker from '../ImagePicker/ImagePicker';\nimport Loader from '../Loader/Loader';\nimport UploadImage from '../UploadImage/UploadImage';\n\nconst ImagePanel = ({\n showLoader,\n viewerImage,\n pickerImages,\n onSelectTile,\n onUpload,\n}) => {\n return (\n
\n
\n
\n \"main\"\n\n {showLoader ? (\n \n ) : null}\n
\n
\n
\n
\n { onSelectTile(id); }}\n />\n { onUpload(files); }}\n />\n
\n
\n
\n );\n};\n\nImagePanel.propTypes = {\n showLoader: PropTypes.bool.isRequired,\n viewerImage: PropTypes.string.isRequired,\n pickerImages: PropTypes.array.isRequired,\n onSelectTile: PropTypes.func.isRequired,\n onUpload: PropTypes.func.isRequired,\n viewerType: PropTypes.string,\n};\n\nImagePanel.defaultProps = {\n viewerType: 'image',\n};\n\nexport default ImagePanel;\n","import ImageContainer from './ImageContainer';\nexport default ImageContainer;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Tile,\n} from 'carbon-components-react';\nimport ImagePanel from '../ImagePanel/ImagePanel';\n\nexport const ImageContainer = ({\n images,\n onSubmitImage,\n handleUnsupportedFormats,\n isClassifying,\n}) => {\n let defaultImageUrl = '';\n if (images[0] && images[0].url) {\n defaultImageUrl = images[0].url;\n }\n const [mainDisplayImage, setMainDisplayImage] = useState(defaultImageUrl);\n\n const submitSampleImage = (tileId) => {\n const selectedImage = images[tileId].url;\n onSubmitImage({ image_file: selectedImage });\n setMainDisplayImage(selectedImage);\n }\n\n const submitUserImage = (images) => {\n const image = images[0];\n const acceptedImageTypes = ['image/gif','image/png','image/jpg','image/jpeg'];\n if (!acceptedImageTypes.includes(image.type)) {\n handleUnsupportedFormats();\n }\n else {\n const reader = new FileReader();\n reader.onabort = () => console.log('file reading was aborted');\n reader.onerror = () => console.log('file reading has failed');\n reader.onload = () => {\n const imageData = reader.result;\n setMainDisplayImage(imageData);\n onSubmitImage({ image_data: imageData });\n }\n reader.readAsDataURL(image);\n }\n };\n\n return (\n \n

Input

\n { submitSampleImage(tileId); }}\n onUpload={(images) => { submitUserImage(images); }}\n />\n

Select An Image to Analyze

\n \n );\n}\n\nImageContainer.propTypes = {\n onSubmitImage: PropTypes.func.isRequired,\n handleUnsupportedFormats: PropTypes.func.isRequired,\n isClassifying: PropTypes.bool.isRequired,\n images: PropTypes.array.isRequired,\n};\n\nexport default ImageContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst formatNumber = num => (Math.round(num * 100) / 100).toFixed(2);\nconst widthNumber = num => Math.abs(Math.round(num * 100));\n\nfunction ProgressBar({ progress }) {\n return (\n
\n
\n
\n
\n
{formatNumber(progress)}
\n
\n );\n}\n\nProgressBar.propTypes = {\n progress: PropTypes.number,\n};\n\nProgressBar.defaultProps = {\n progress: 0,\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\nexport default ProgressBar;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Accordion,\n Tile,\n FormGroup,\n ContentSwitcher,\n Switch,\n} from 'carbon-components-react';\nimport ProgressBar from '../ProgressBar';\nimport ReactJson from 'react-json-view';\n\nexport const OutputContainer = ({\n classifyResults\n}) => {\n const [outputType, setOutputType] = useState('table');\n\n const onOutputTypeChange = e => {\n setOutputType(e.name);\n };\n\n return (\n \n

Output

\n
\n \n \n \n \n
\n \n {outputType === 'table' ? (\n \n
\n

Top Classes

\n

Score

\n
\n {classifyResults.map(item =>\n (\n
\n

{item.class}

\n \n
\n )\n )}\n \n ) : (\n \n )}\n \n \n );\n}\n\nOutputContainer.propTypes = {\n classifyResults: PropTypes.array.isRequired,\n};\n\nOutputContainer.defaultProps = {\n classifyResults: null,\n};\n\nexport default OutputContainer;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ToastNotification } from 'carbon-components-react';\n\nconst NOTIFICATION_HAS_BEEN_SEEN = 'notificationHasBeenSeen';\n\nexport const Toast = ({\n caption,\n children,\n className,\n hideAfterFirstDisplay,\n hideCloseButton,\n iconDescription,\n kind,\n lowContrast,\n onCloseButtonClick,\n role,\n subtitle,\n timeout,\n title,\n}) => {\n const [id, setId] = useState();\n const [hideToast, setHideToast] = useState(false);\n\n useEffect(() => {\n setId(\n Math.random()\n .toString(36)\n .substring(2, 15) +\n Math.random()\n .toString(36)\n .substring(2, 15),\n );\n }, []);\n\n useEffect(() => {\n const element = document.querySelector(`.custom-toast-${id}`);\n if (element) {\n element.className += 'enter';\n }\n }, [id]);\n\n useEffect(() => {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined &&\n window.localStorage.getItem(NOTIFICATION_HAS_BEEN_SEEN) === 'true'\n ) {\n setHideToast(true);\n }\n }, [hideAfterFirstDisplay]);\n\n return hideToast ? null : (\n {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined\n ) {\n window.localStorage.setItem(NOTIFICATION_HAS_BEEN_SEEN, 'true');\n }\n onCloseButtonClick();\n }}\n role={role}\n subtitle={subtitle}\n timeout={timeout}\n title={title}\n >\n {children}\n \n );\n};\n\nToast.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n hideAfterFirstDisplay: PropTypes.bool,\n hideCloseButton: PropTypes.bool,\n iconDescription: PropTypes.string,\n kind: PropTypes.string,\n lowContrast: PropTypes.bool,\n onCloseButtonClick: PropTypes.func,\n role: PropTypes.string,\n subtitle: PropTypes.string,\n timeout: PropTypes.number,\n title: PropTypes.string,\n};\n\nToast.defaultProps = {\n caption: '',\n children: null,\n className: '',\n hideAfterFirstDisplay: true,\n hideCloseButton: false,\n iconDescription: 'closes notification',\n kind: 'error',\n lowContrast: false,\n onCloseButtonClick: () => {},\n role: 'alert',\n subtitle: '',\n timeout: 0,\n title: '',\n};\n\nexport default Toast;","import Toast from './Toast';\n\nexport default Toast;","import ServiceContainer from './ServiceContainer';\nexport default ServiceContainer;\n","import React, { useState } from 'react';\nimport ImageContainer from '../ImageContainer';\nimport OutputContainer from '../OutputContainer/OutputContainer';\nimport Toast from '../Toast';\nimport { parseClassifyResponse, getTopTenClasses } from './utils';\n\nimport sampleImages from '../../data/sampleImages.json';\nimport defaultResponse from '../../data/mockClassifyResponse.json';\n\nconst GDPR_DISCLAIMER =\n 'This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679.';\n\nexport const ServiceContainer = () => {\n const [isClassifying, setIsClassifying] = useState(false);\n const [results, setResults] = useState(defaultResponse);\n const [error, setError] = useState(null);\n\n const handleUnsupportedFormats = () => {\n setError({ title: 'Invalid file format:', description: 'Only JPGs, PNGs, and GIFs are supported' });\n }\n\n const onClassify = async (image) => {\n setIsClassifying(true);\n fetch('/api/classify', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(image),\n })\n .then((response) => response.json())\n .then(data => {\n console.log(data);\n if (data.error) {\n setError(data.error);\n } else {\n setResults(parseClassifyResponse(data));\n }\n })\n .catch((err) => {\n setError({ title: err.message, description: err.message });\n })\n .finally(() => setIsClassifying(false));\n };\n\n return (\n
\n \n {error && (\n setError(null)}\n />\n )}\n { onClassify(image); }}\n isClassifying={isClassifying}\n images={sampleImages}\n handleUnsupportedFormats={handleUnsupportedFormats}\n />\n \n
\n );\n};\n\nexport default ServiceContainer;\n","export const getTopTenClasses = (classifyResults) => {\n const unsortedItems = classifyResults[0].classes;\n const sortedItems = unsortedItems.sort((a, b) => b.score - a.score);\n return sortedItems.slice(0,10);\n}\n\nexport const parseClassifyResponse = (classifyResponse) => {\n return classifyResponse.result.images[0].classifiers;\n}\n","import React from 'react';\nimport { Button, Link } from 'carbon-components-react';\nimport { default as Api124 } from '@carbon/icons-react/lib/API--1/24';\nimport Document24 from '@carbon/icons-react/lib/document/24';\nimport IbmCloud24 from '@carbon/icons-react/lib/ibm-cloud/24';\nimport Launch16 from '@carbon/icons-react/lib/launch/16';\nimport LogoGithub24 from '@carbon/icons-react/lib/logo--github/24';\n\nimport './styles/main.scss';\nimport Header from './components/Header';\nimport ServiceContainer from './components/ServiceContainer';\nimport { description, title } from './data/input.json';\n\nconst HEADER_LINKS = [\n \n

API reference

\n \n ,\n \n

Documentation

\n \n ,\n \n

GitHub

\n \n ,\n \n \n \n ,\n];\n\nexport const App = () => (\n
\n \n \n
\n);\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/main.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["components/Header/Header.js","components/Header/index.js","components/ImagePicker/ImagePicker.js","components/Loader/Loader.js","components/UploadImage/UploadImage.js","components/ImagePanel/ImagePanel.js","components/ImageContainer/index.js","components/ImageContainer/ImageContainer.js","components/ProgressBar/ProgressBar.js","components/ProgressBar/index.js","components/OutputContainer/OutputContainer.js","components/Toast/Toast.js","components/Toast/index.js","components/ServiceContainer/index.js","components/ServiceContainer/ServiceContainer.js","components/ServiceContainer/utils.js","App.js","serviceWorker.js","index.js"],"names":["Header","description","links","title","Tile","className","map","link","defaultProps","ImagePicker","images","onClick","image","i","key","id","handleClick","src","url","alt","Loader","loadingMessage","UploadImage","onUpload","multiple","onDrop","acceptedFiles","getRootProps","getInputProps","ImagePanel","showLoader","viewerImage","pickerImages","onSelectTile","files","viewerType","ImageContainer","onSubmitImage","handleUnsupportedFormats","isClassifying","defaultImageUrl","useState","mainDisplayImage","setMainDisplayImage","tileId","selectedImage","image_file","submitSampleImage","includes","type","reader","FileReader","onabort","console","log","onerror","onload","imageData","result","image_data","readAsDataURL","submitUserImage","ProgressBar","num","progress","style","width","Math","abs","round","toFixed","formatNumber","OutputContainer","classifyResults","outputType","setOutputType","ContentSwitcher","onChange","e","name","selectedIndex","Switch","text","FormGroup","legendText","Accordion","item","class","score","enableClipboard","displayDataTypes","displayObjectSize","collapsed","collapseStringsAfterLength","theme","lineHeight","Toast","caption","children","hideAfterFirstDisplay","hideCloseButton","iconDescription","kind","lowContrast","onCloseButtonClick","role","subtitle","timeout","setId","hideToast","setHideToast","useEffect","random","toString","substring","element","document","querySelector","undefined","window","localStorage","getItem","setItem","ServiceContainer","setIsClassifying","defaultResponse","results","setResults","error","setError","a","async","fetch","method","headers","body","JSON","stringify","then","response","json","data","classifiers","catch","err","message","finally","onClassify","sampleImages","classes","sort","b","slice","HEADER_LINKS","Link","target","rel","href","Button","renderIcon","Launch16","App","Boolean","location","hostname","match","ReactDOM","render","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"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","file":"static/js/main.63e16f74.chunk.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Tile } from 'carbon-components-react';\n\nexport const Header = ({ description, links, title }) => (\n \n
\n

{title}

\n

{description}

\n
\n
\n
{links.map(link => link)}
\n
\n \n);\n\nHeader.propTypes = {\n description: PropTypes.string,\n links: PropTypes.arrayOf(PropTypes.object),\n title: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: '',\n links: [],\n title: '',\n};\n\nexport default Header;\n","import Header from './Header';\nexport default Header;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n SelectableTile\n} from 'carbon-components-react';\n\nexport const ImagePicker = ({\n images,\n onClick,\n}) => {\n\n const onImageClick = (id) => {\n onClick(id);\n }\n\n return (\n images.map((image, i) => {\n return (\n
\n { onImageClick(i); }}\n >\n {image.alt}\n\n \n
\n );\n })\n );\n}\n\nImagePicker.propTypes = {\n images: PropTypes.array.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default ImagePicker;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Loader = ({ loadingMessage }) => (\n \n
\n
\n {(loadingMessage) ? (\n
\n

{loadingMessage}

\n
\n ) : null}\n
\n \n);\n\nLoader.propTypes = {\n loadingMessage: PropTypes.string,\n};\n\nLoader.defaultProps = {\n loadingMessage: null,\n};\n\nexport default Loader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport {\n SelectableTile\n} from 'carbon-components-react';\nimport Upload32 from '@carbon/icons-react/lib/upload/32';\n\nexport const UploadImage = ({\n onUpload,\n}) => {\n return (\n
\n {}}\n >\n { onUpload(acceptedFiles); }}\n >\n {({getRootProps, getInputProps}) => (\n
\n \n \n

Select or drag an image

\n
\n )}\n \n \n
\n);\n}\n\nUploadImage.propTypes = {\n onUpload: PropTypes.func.isRequired,\n};\n\nexport default UploadImage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImagePicker from '../ImagePicker/ImagePicker';\nimport Loader from '../Loader/Loader';\nimport UploadImage from '../UploadImage/UploadImage';\n\nconst ImagePanel = ({\n showLoader,\n viewerImage,\n pickerImages,\n onSelectTile,\n onUpload,\n}) => {\n return (\n
\n
\n
\n \"main\"\n\n {showLoader ? (\n \n ) : null}\n
\n
\n
\n
\n { onSelectTile(id); }}\n />\n { onUpload(files); }}\n />\n
\n
\n
\n );\n};\n\nImagePanel.propTypes = {\n showLoader: PropTypes.bool.isRequired,\n viewerImage: PropTypes.string.isRequired,\n pickerImages: PropTypes.array.isRequired,\n onSelectTile: PropTypes.func.isRequired,\n onUpload: PropTypes.func.isRequired,\n viewerType: PropTypes.string,\n};\n\nImagePanel.defaultProps = {\n viewerType: 'image',\n};\n\nexport default ImagePanel;\n","import ImageContainer from './ImageContainer';\nexport default ImageContainer;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Tile,\n} from 'carbon-components-react';\nimport ImagePanel from '../ImagePanel/ImagePanel';\n\nexport const ImageContainer = ({\n images,\n onSubmitImage,\n handleUnsupportedFormats,\n isClassifying,\n}) => {\n let defaultImageUrl = '';\n if (images[0] && images[0].url) {\n defaultImageUrl = images[0].url;\n }\n const [mainDisplayImage, setMainDisplayImage] = useState(defaultImageUrl);\n\n const submitSampleImage = (tileId) => {\n const selectedImage = images[tileId].url;\n onSubmitImage({ image_file: selectedImage });\n setMainDisplayImage(selectedImage);\n }\n\n const submitUserImage = (images) => {\n const image = images[0];\n const acceptedImageTypes = ['image/gif','image/png','image/jpg','image/jpeg'];\n if (!acceptedImageTypes.includes(image.type)) {\n handleUnsupportedFormats();\n }\n else {\n const reader = new FileReader();\n reader.onabort = () => console.log('file reading was aborted');\n reader.onerror = () => console.log('file reading has failed');\n reader.onload = () => {\n const imageData = reader.result;\n setMainDisplayImage(imageData);\n onSubmitImage({ image_data: imageData });\n }\n reader.readAsDataURL(image);\n }\n };\n\n return (\n \n

Input

\n { submitSampleImage(tileId); }}\n onUpload={(images) => { submitUserImage(images); }}\n />\n

Select An Image to Analyze

\n \n );\n}\n\nImageContainer.propTypes = {\n onSubmitImage: PropTypes.func.isRequired,\n handleUnsupportedFormats: PropTypes.func.isRequired,\n isClassifying: PropTypes.bool.isRequired,\n images: PropTypes.array.isRequired,\n};\n\nexport default ImageContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst formatNumber = num => (Math.round(num * 100) / 100).toFixed(2);\nconst widthNumber = num => Math.abs(Math.round(num * 100));\n\nfunction ProgressBar({ progress }) {\n return (\n
\n
\n
\n
\n
{formatNumber(progress)}
\n
\n );\n}\n\nProgressBar.propTypes = {\n progress: PropTypes.number,\n};\n\nProgressBar.defaultProps = {\n progress: 0,\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\nexport default ProgressBar;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Accordion,\n Tile,\n FormGroup,\n ContentSwitcher,\n Switch,\n} from 'carbon-components-react';\nimport ProgressBar from '../ProgressBar';\nimport ReactJson from 'react-json-view';\n\nexport const OutputContainer = ({\n classifyResults\n}) => {\n const [outputType, setOutputType] = useState('table');\n\n const onOutputTypeChange = e => {\n setOutputType(e.name);\n };\n\n return (\n \n

Output

\n
\n \n \n \n \n
\n \n {outputType === 'table' ? (\n \n
\n

Top Classes

\n

Score

\n
\n {classifyResults.map(item =>\n (\n
\n

{item.class}

\n \n
\n )\n )}\n \n ) : (\n \n )}\n \n \n );\n}\n\nOutputContainer.propTypes = {\n classifyResults: PropTypes.array.isRequired,\n};\n\nOutputContainer.defaultProps = {\n classifyResults: null,\n};\n\nexport default OutputContainer;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ToastNotification } from 'carbon-components-react';\n\nconst NOTIFICATION_HAS_BEEN_SEEN = 'notificationHasBeenSeen';\n\nexport const Toast = ({\n caption,\n children,\n className,\n hideAfterFirstDisplay,\n hideCloseButton,\n iconDescription,\n kind,\n lowContrast,\n onCloseButtonClick,\n role,\n subtitle,\n timeout,\n title,\n}) => {\n const [id, setId] = useState();\n const [hideToast, setHideToast] = useState(false);\n\n useEffect(() => {\n setId(\n Math.random()\n .toString(36)\n .substring(2, 15) +\n Math.random()\n .toString(36)\n .substring(2, 15),\n );\n }, []);\n\n useEffect(() => {\n const element = document.querySelector(`.custom-toast-${id}`);\n if (element) {\n element.className += 'enter';\n }\n }, [id]);\n\n useEffect(() => {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined &&\n window.localStorage.getItem(NOTIFICATION_HAS_BEEN_SEEN) === 'true'\n ) {\n setHideToast(true);\n }\n }, [hideAfterFirstDisplay]);\n\n return hideToast ? null : (\n {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined\n ) {\n window.localStorage.setItem(NOTIFICATION_HAS_BEEN_SEEN, 'true');\n }\n onCloseButtonClick();\n }}\n role={role}\n subtitle={subtitle}\n timeout={timeout}\n title={title}\n >\n {children}\n \n );\n};\n\nToast.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n hideAfterFirstDisplay: PropTypes.bool,\n hideCloseButton: PropTypes.bool,\n iconDescription: PropTypes.string,\n kind: PropTypes.string,\n lowContrast: PropTypes.bool,\n onCloseButtonClick: PropTypes.func,\n role: PropTypes.string,\n subtitle: PropTypes.string,\n timeout: PropTypes.number,\n title: PropTypes.string,\n};\n\nToast.defaultProps = {\n caption: '',\n children: null,\n className: '',\n hideAfterFirstDisplay: true,\n hideCloseButton: false,\n iconDescription: 'closes notification',\n kind: 'error',\n lowContrast: false,\n onCloseButtonClick: () => {},\n role: 'alert',\n subtitle: '',\n timeout: 0,\n title: '',\n};\n\nexport default Toast;","import Toast from './Toast';\n\nexport default Toast;","import ServiceContainer from './ServiceContainer';\nexport default ServiceContainer;\n","import React, { useState } from 'react';\nimport ImageContainer from '../ImageContainer';\nimport OutputContainer from '../OutputContainer/OutputContainer';\nimport Toast from '../Toast';\nimport { parseClassifyResponse, getTopTenClasses } from './utils';\n\nimport sampleImages from '../../data/sampleImages.json';\nimport defaultResponse from '../../data/mockClassifyResponse.json';\n\nconst GDPR_DISCLAIMER =\n 'This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679.';\n\nexport const ServiceContainer = () => {\n const [isClassifying, setIsClassifying] = useState(false);\n const [results, setResults] = useState(defaultResponse);\n const [error, setError] = useState(null);\n\n const handleUnsupportedFormats = () => {\n setError({ title: 'Invalid file format:', description: 'Only JPGs, PNGs, and GIFs are supported' });\n }\n\n const onClassify = async (image) => {\n setIsClassifying(true);\n fetch('/api/classify', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(image),\n })\n .then((response) => response.json())\n .then(data => {\n console.log(data);\n if (data.error) {\n setError(data.error);\n } else {\n setResults(parseClassifyResponse(data));\n }\n })\n .catch((err) => {\n setError({ title: err.message, description: err.message });\n })\n .finally(() => setIsClassifying(false));\n };\n\n return (\n
\n \n {error && (\n setError(null)}\n />\n )}\n { onClassify(image); }}\n isClassifying={isClassifying}\n images={sampleImages}\n handleUnsupportedFormats={handleUnsupportedFormats}\n />\n \n
\n );\n};\n\nexport default ServiceContainer;\n","export const getTopTenClasses = (classifyResults) => {\n const unsortedItems = classifyResults[0].classes;\n const sortedItems = unsortedItems.sort((a, b) => b.score - a.score);\n return sortedItems.slice(0,10);\n}\n\nexport const parseClassifyResponse = (classifyResponse) => {\n return classifyResponse.result.images[0].classifiers;\n}\n","import React from 'react';\nimport { Button, Link } from 'carbon-components-react';\nimport { default as Api124 } from '@carbon/icons-react/lib/API--1/24';\nimport Document24 from '@carbon/icons-react/lib/document/24';\nimport IbmCloud24 from '@carbon/icons-react/lib/ibm-cloud/24';\nimport Launch16 from '@carbon/icons-react/lib/launch/16';\nimport LogoGithub24 from '@carbon/icons-react/lib/logo--github/24';\n\nimport './styles/main.scss';\nimport Header from './components/Header';\nimport ServiceContainer from './components/ServiceContainer';\nimport { description, title } from './data/input.json';\n\nconst HEADER_LINKS = [\n \n

API reference

\n \n ,\n \n

Documentation

\n \n ,\n \n

GitHub

\n \n ,\n \n \n \n ,\n];\n\nexport const App = () => (\n
\n \n \n
\n);\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/main.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();"],"sourceRoot":""} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 3924df4..4d91a39 100644 --- a/public/index.html +++ b/public/index.html @@ -36,5 +36,7 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + \ No newline at end of file +Visual Recognition
\ No newline at end of file diff --git a/build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js b/build/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js similarity index 72% rename from build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js rename to build/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js index 358b96b..3c42fa7 100644 --- a/build/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js +++ b/build/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js @@ -1,10 +1,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "f1df6cd937096cc885257f968f1bcc11", + "revision": "3f37104934cf407ed9018a902566f671", "url": "/index.html" }, { - "revision": "047d301e496bf7329a8e", + "revision": "f339e4ee0d05df38b0bb", "url": "/static/css/main.b357d245.chunk.css" }, { @@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/static/js/2.f3856bd2.chunk.js.LICENSE" }, { - "revision": "047d301e496bf7329a8e", - "url": "/static/js/main.63e16f74.chunk.js" + "revision": "f339e4ee0d05df38b0bb", + "url": "/static/js/main.61f417ab.chunk.js" }, { "revision": "d996e3999a440231bd2a", diff --git a/build/service-worker.js b/build/service-worker.js index 1a528c1..ea2924c 100644 --- a/build/service-worker.js +++ b/build/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/precache-manifest.4df557ba9c167e0e22e6f4fa33d0c690.js" + "/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js" ); self.addEventListener('message', (event) => { diff --git a/build/static/js/main.61f417ab.chunk.js b/build/static/js/main.61f417ab.chunk.js new file mode 100644 index 0000000..d1e2e1b --- /dev/null +++ b/build/static/js/main.61f417ab.chunk.js @@ -0,0 +1,2 @@ +(this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]=this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]||[]).push([[0],{14:function(e){e.exports=JSON.parse('{"b":"Watson Visual Recognition","a":"The Visual Recognition service uses deep learning algorithms to analyze images for scenes, objects, text, and other subjects."}')},16:function(e,t,a){},23:function(e){e.exports=JSON.parse('[{"url":"/images/classify/small/tweed_jacket.jpg","alt":"tweed jacket"},{"url":"/images/classify/small/computer_chip.jpg","alt":"computer-chip"},{"url":"/images/classify/small/soy_sauce.jpg","alt":"kodak-film"}]')},24:function(e){e.exports=JSON.parse('[{"classifier_id":"default","name":"default","classes":[{"class":"fabric","score":0.959},{"class":"gray color","score":0.946},{"class":"Harris Tweed (jacket)","score":0.87,"type_hierarchy":"/fabric/Harris Tweed (jacket)"},{"class":"clothing","score":0.8},{"class":"tweed","score":0.791,"type_hierarchy":"/fabric/tweed"},{"class":"garment","score":0.518},{"class":"overgarment","score":0.517},{"class":"coat","score":0.509},{"class":"Norfolk jacket","score":0.5,"type_hierarchy":"/garment/overgarment/coat/Norfolk jacket"}],"display":"General Model","description":"Quickly understand objects, actions, scenes, and colors within an image."},{"classifier_id":"food","name":"food","classes":[{"class":"non-food","score":0.998}],"display":"Food Model","description":"Identify meals and food items with enhanced accuracy."},{"classifier_id":"explicit","name":"explicit","classes":[{"class":"not explicit","score":0.991}],"display":"Explicit Model","description":"Determine if an image contains nudity or other inappropriate content."}]')},33:function(e,t,a){e.exports=a(41)},41:function(e,t,a){"use strict";a.r(t);var n=a(0),c=a.n(n),i=a(18),r=a.n(i),o=(a(16),a(48)),s=a(42),l=a(25),m=a.n(l),u=a(26),d=a.n(u),p=a(29),f=a.n(p),g=a(28),h=a.n(g),E=a(27),v=a.n(E),b=function(e){Object(n.useEffect)((function(){var t=document.createElement("script");return t.src=e,t.async=!0,document.body.appendChild(t),function(){document.body.removeChild(t)}}),[e])},k=a(44),_=function(e){var t=e.description,a=e.links,n=e.title;return c.a.createElement(k.b,{className:"header"},c.a.createElement("div",{className:"title-container"},c.a.createElement("h2",{className:"header-title"},n),c.a.createElement("p",null,t)),c.a.createElement("div",{className:"link-container"},c.a.createElement("div",{className:"link-wrapper"},a.map((function(e){return e})))))};_.defaultProps={description:"",links:[],title:""};var y=_,N=a(19),w=a.n(N),j=a(4),C=function(e){var t=e.images,a=e.onClick;return t.map((function(e,t){return c.a.createElement("div",{key:t,className:"image-picker--section__tile"},c.a.createElement(k.a,{id:"tile-".concat(t),handleClick:function(){a(t)}},c.a.createElement("img",{className:"image-picker--section__image",src:e.url,alt:e.alt})))}))},S=function(e){var t=e.loadingMessage;return c.a.createElement("span",{className:"loader"},c.a.createElement("div",{className:"loader-container"},c.a.createElement("div",{className:"loader-dots"}),t?c.a.createElement("div",{className:"loader-message"},c.a.createElement("p",{className:"ibm-type-a"},t)):null))};S.defaultProps={loadingMessage:null};var O=S,B=a(30),W=a(21),I=a.n(W),x=function(e){var t=e.onUpload;return c.a.createElement("div",{className:"image-picker--section__tile"},c.a.createElement(k.a,{id:"123",handleClick:function(){}},c.a.createElement(B.a,{multiple:!1,onDrop:function(e){t(e)}},(function(e){var t=e.getRootProps,a=e.getInputProps;return c.a.createElement("div",Object.assign({},t(),{className:"upload-image"}),c.a.createElement("input",a()),c.a.createElement(I.a,null),c.a.createElement("p",{className:"upload-text"},"Select or drag an image"))}))))},D=function(e){var t=e.showLoader,a=e.viewerImage,n=e.pickerImages,i=e.onSelectTile,r=e.onUpload;return c.a.createElement("div",{className:"main-image-picker__container"},c.a.createElement("div",{className:"main-image-picker"},c.a.createElement("div",null,c.a.createElement("img",{className:"main-image-picker__image",src:a,alt:"main"}),t?c.a.createElement(O,null):null)),c.a.createElement("div",{className:"image-selection__container"},c.a.createElement("div",{className:"image-picker__tiles"},c.a.createElement(C,{images:n,onClick:function(e){i(e)}}),c.a.createElement(x,{onUpload:function(e){r(e)}}))))};D.defaultProps={viewerType:"image"};var P=D,A=function(e){var t=e.images,a=e.onSubmitImage,i=e.handleUnsupportedFormats,r=e.isClassifying,o="";t[0]&&t[0].url&&(o=t[0].url);var s=Object(n.useState)(o),l=Object(j.a)(s,2),m=l[0],u=l[1];return c.a.createElement(k.b,{className:"input-container"},c.a.createElement("h4",{className:"container-title"},"Input"),c.a.createElement(P,{showLoader:r,viewerImage:m,pickerImages:t,onSelectTile:function(e){!function(e){var n=t[e].url;a({image_file:n}),u(n)}(e)},onUpload:function(e){!function(e){var t=e[0];if(["image/gif","image/png","image/jpg","image/jpeg"].includes(t.type)){var n=new FileReader;n.onabort=function(){return console.log("file reading was aborted")},n.onerror=function(){return console.log("file reading has failed")},n.onload=function(){var e=n.result;u(e),a({image_data:e})},n.readAsDataURL(t)}else i()}(e)}}),c.a.createElement("h4",{className:"container-footer"},"Select An Image to Analyze"))},F=a(50),T=a(45),R=a(46),M=a(49);function U(e){var t,a=e.progress;return c.a.createElement("div",{className:"bar-container"},c.a.createElement("div",{className:"bar-full"},c.a.createElement("div",{className:"bar",style:{width:"".concat((t=a,Math.abs(Math.round(100*t))),"%")}})),c.a.createElement("div",{className:"progress"},function(e){return(Math.round(100*e)/100).toFixed(2)}(a)))}U.defaultProps={progress:0};var J=U,H=a(22),G=a.n(H),L=function(e){var t=e.classifyResults,a=Object(n.useState)("table"),i=Object(j.a)(a,2),r=i[0],o=i[1];return c.a.createElement(k.b,{className:"output-container"},c.a.createElement("h3",{className:"output-container__title"},"Output"),c.a.createElement("div",{className:"output-container__control-panel"},c.a.createElement(F.a,{className:"output-container__content-switch",onChange:function(e){o(e.name)},selectedIndex:"table"===r?0:1},c.a.createElement(T.a,{name:"table",text:"Table"}),c.a.createElement(T.a,{name:"json",text:"JSON"}))),c.a.createElement(R.a,{legendText:"Result"},"table"===r?c.a.createElement(M.a,null,c.a.createElement("div",{className:"output-container__accordian-header"},c.a.createElement("p",null,"Top Classes"),c.a.createElement("p",null,"Score")),t.map((function(e){return c.a.createElement("div",{key:e.class,className:"output-container__accordian-item"},c.a.createElement("p",null,e.class),c.a.createElement(J,{progress:e.score}))}))):c.a.createElement(G.a,{name:!1,enableClipboard:!1,displayDataTypes:!1,displayObjectSize:!1,collapsed:2,collapseStringsAfterLength:20,theme:"monokai",style:{lineHeight:"1.3em"},src:t})))};L.defaultProps={classifyResults:null};var q=L,z=a(47),Q=function(e){var t=e.caption,a=e.children,i=e.className,r=e.hideAfterFirstDisplay,o=e.hideCloseButton,s=e.iconDescription,l=e.kind,m=e.lowContrast,u=e.onCloseButtonClick,d=e.role,p=e.subtitle,f=e.timeout,g=e.title,h=Object(n.useState)(),E=Object(j.a)(h,2),v=E[0],b=E[1],k=Object(n.useState)(!1),_=Object(j.a)(k,2),y=_[0],N=_[1];return Object(n.useEffect)((function(){b(Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15))}),[]),Object(n.useEffect)((function(){var e=document.querySelector(".custom-toast-".concat(v));e&&(e.className+="enter")}),[v]),Object(n.useEffect)((function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&"true"===window.localStorage.getItem("notificationHasBeenSeen")&&N(!0)}),[r]),y?null:c.a.createElement(z.a,{caption:t,className:"custom-toast-".concat(v," ").concat(i),hideCloseButton:o,iconDescription:s,kind:l,lowContrast:m,onCloseButtonClick:function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&window.localStorage.setItem("notificationHasBeenSeen","true"),u()},role:d,subtitle:p,timeout:f,title:g},a)};Q.defaultProps={caption:"",children:null,className:"",hideAfterFirstDisplay:!0,hideCloseButton:!1,iconDescription:"closes notification",kind:"error",lowContrast:!1,onCloseButtonClick:function(){},role:"alert",subtitle:"",timeout:0,title:""};var V=Q,K=a(23),X=a(24),Y=function(){var e,t=Object(n.useState)(!1),a=Object(j.a)(t,2),i=a[0],r=a[1],o=Object(n.useState)(X),s=Object(j.a)(o,2),l=s[0],m=s[1],u=Object(n.useState)(null),d=Object(j.a)(u,2),p=d[0],f=d[1];return c.a.createElement("div",{className:"service-container"},c.a.createElement(V,{kind:"info",subtitle:"This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679."}),p&&c.a.createElement(V,{kind:"error",title:p.title,subtitle:p.description,hideAfterFirstDisplay:!1,timeout:5e3,onCloseButtonClick:function(){return f(null)}}),c.a.createElement(A,{onSubmitImage:function(e){!function(e){w.a.async((function(t){for(;;)switch(t.prev=t.next){case 0:r(!0),fetch("/api/classify",{method:"POST",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(e)}).then((function(e){return e.json()})).then((function(e){console.log(e),e.error?f(e.error):m(e.result.images[0].classifiers)})).catch((function(e){f({title:e.message,description:e.message})})).finally((function(){return r(!1)}));case 2:case"end":return t.stop()}}))}(e)},isClassifying:i,images:K,handleUnsupportedFormats:function(){f({title:"Invalid file format:",description:"Only JPGs, PNGs, and GIFs are supported"})}}),c.a.createElement(q,{classifyResults:(e=l,e[0].classes.sort((function(e,t){return t.score-e.score})).slice(0,10))}))},$=a(14),Z=[c.a.createElement(o.a,{className:"link",key:"api-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/apidocs/visual-recognition"},c.a.createElement("p",{className:"link-text"},"API reference"),c.a.createElement(m.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"docs-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/docs/services/visual-recognition?topic=visual-recognition-getting-started-tutorial"},c.a.createElement("p",{className:"link-text"},"Documentation"),c.a.createElement(d.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"github-link",target:"_blank",rel:"noopener noreferrer",href:"https://github.com/watson-developer-cloud/visual-recognition-code-pattern"},c.a.createElement("p",{className:"link-text"},"GitHub"),c.a.createElement(v.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link getting-started",key:"ibm-cloud-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/registration?target=%2Fcatalog%2Fservices%2Fvisual-recognition%3FhideTours%3Dtrue%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmca1%3D000000OF%26cm_mmca2%3D10000409&_ga=2.158846578.918027017.1572271296-1405764752.1539884377&_gac=1.250083700.1571850605.Cj0KCQjw3JXtBRC8ARIsAEBHg4m4g1PSkKQRoI6YUe4A-6ysul0ziiWU0DVbqlbWAQpq3721u-bxkd0aAkV3EALw_wcB&cm_mc_uid=83381689395615475202389&cm_mc_sid_50200000=82214471572470185115&cm_mc_sid_52640000=21949701572470185117&cm_mmc=Earned-_-Watson%20Core%20-%20Platform-_-WW_WW-_-intercom&cm_mmca1=000000OF&cm_mmca2=10000409"},c.a.createElement(s.a,{className:"link-button",kind:"tertiary",renderIcon:h.a},"Start for free on IBM Cloud"),c.a.createElement(f.a,{className:"link-icon"}))],ee=function(){return b("https://cdn.jsdelivr.net/gh/watson-developer-cloud/watson-developer-cloud.github.io@master/analytics.js"),c.a.createElement("div",{className:"app-container"},c.a.createElement(y,{description:$.a,links:Z,title:$.b}),c.a.createElement(Y,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));r.a.render(c.a.createElement(ee,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}},[[33,1,2]]]); +//# sourceMappingURL=main.61f417ab.chunk.js.map \ No newline at end of file diff --git a/build/static/js/main.61f417ab.chunk.js.map b/build/static/js/main.61f417ab.chunk.js.map new file mode 100644 index 0000000..9c84d52 --- /dev/null +++ b/build/static/js/main.61f417ab.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["hooks/useScript.js","components/Header/Header.js","components/Header/index.js","components/ImagePicker/ImagePicker.js","components/Loader/Loader.js","components/UploadImage/UploadImage.js","components/ImagePanel/ImagePanel.js","components/ImageContainer/index.js","components/ImageContainer/ImageContainer.js","components/ProgressBar/ProgressBar.js","components/ProgressBar/index.js","components/OutputContainer/OutputContainer.js","components/Toast/Toast.js","components/Toast/index.js","components/ServiceContainer/index.js","components/ServiceContainer/ServiceContainer.js","components/ServiceContainer/utils.js","App.js","serviceWorker.js","index.js"],"names":["useScript","url","useEffect","script","document","createElement","src","async","body","appendChild","removeChild","Header","description","links","title","Tile","className","map","link","defaultProps","ImagePicker","images","onClick","image","i","key","id","handleClick","alt","Loader","loadingMessage","UploadImage","onUpload","multiple","onDrop","acceptedFiles","getRootProps","getInputProps","ImagePanel","showLoader","viewerImage","pickerImages","onSelectTile","files","viewerType","ImageContainer","onSubmitImage","handleUnsupportedFormats","isClassifying","defaultImageUrl","useState","mainDisplayImage","setMainDisplayImage","tileId","selectedImage","image_file","submitSampleImage","includes","type","reader","FileReader","onabort","console","log","onerror","onload","imageData","result","image_data","readAsDataURL","submitUserImage","ProgressBar","num","progress","style","width","Math","abs","round","toFixed","formatNumber","OutputContainer","classifyResults","outputType","setOutputType","ContentSwitcher","onChange","e","name","selectedIndex","Switch","text","FormGroup","legendText","Accordion","item","class","score","enableClipboard","displayDataTypes","displayObjectSize","collapsed","collapseStringsAfterLength","theme","lineHeight","Toast","caption","children","hideAfterFirstDisplay","hideCloseButton","iconDescription","kind","lowContrast","onCloseButtonClick","role","subtitle","timeout","setId","hideToast","setHideToast","random","toString","substring","element","querySelector","undefined","window","localStorage","getItem","setItem","ServiceContainer","setIsClassifying","defaultResponse","results","setResults","error","setError","a","fetch","method","headers","JSON","stringify","then","response","json","data","classifiers","catch","err","message","finally","onClassify","sampleImages","classes","sort","b","slice","HEADER_LINKS","Link","target","rel","href","Button","renderIcon","Launch16","App","Boolean","location","hostname","match","ReactDOM","render","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"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","file":"static/js/main.61f417ab.chunk.js","sourcesContent":["import { useEffect } from 'react';\n\nconst useScript = url => {\n useEffect(() => {\n const script = document.createElement('script');\n\n script.src = url;\n script.async = true;\n\n document.body.appendChild(script);\n\n return () => {\n document.body.removeChild(script);\n };\n }, [url]);\n};\n\nexport default useScript;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Tile } from 'carbon-components-react';\n\nexport const Header = ({ description, links, title }) => (\n \n
\n

{title}

\n

{description}

\n
\n
\n
{links.map(link => link)}
\n
\n \n);\n\nHeader.propTypes = {\n description: PropTypes.string,\n links: PropTypes.arrayOf(PropTypes.object),\n title: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: '',\n links: [],\n title: '',\n};\n\nexport default Header;\n","import Header from './Header';\nexport default Header;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n SelectableTile\n} from 'carbon-components-react';\n\nexport const ImagePicker = ({\n images,\n onClick,\n}) => {\n\n const onImageClick = (id) => {\n onClick(id);\n }\n\n return (\n images.map((image, i) => {\n return (\n
\n { onImageClick(i); }}\n >\n {image.alt}\n\n \n
\n );\n })\n );\n}\n\nImagePicker.propTypes = {\n images: PropTypes.array.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default ImagePicker;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Loader = ({ loadingMessage }) => (\n \n
\n
\n {(loadingMessage) ? (\n
\n

{loadingMessage}

\n
\n ) : null}\n
\n \n);\n\nLoader.propTypes = {\n loadingMessage: PropTypes.string,\n};\n\nLoader.defaultProps = {\n loadingMessage: null,\n};\n\nexport default Loader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport {\n SelectableTile\n} from 'carbon-components-react';\nimport Upload32 from '@carbon/icons-react/lib/upload/32';\n\nexport const UploadImage = ({\n onUpload,\n}) => {\n return (\n
\n {}}\n >\n { onUpload(acceptedFiles); }}\n >\n {({getRootProps, getInputProps}) => (\n
\n \n \n

Select or drag an image

\n
\n )}\n \n \n
\n);\n}\n\nUploadImage.propTypes = {\n onUpload: PropTypes.func.isRequired,\n};\n\nexport default UploadImage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImagePicker from '../ImagePicker/ImagePicker';\nimport Loader from '../Loader/Loader';\nimport UploadImage from '../UploadImage/UploadImage';\n\nconst ImagePanel = ({\n showLoader,\n viewerImage,\n pickerImages,\n onSelectTile,\n onUpload,\n}) => {\n return (\n
\n
\n
\n \"main\"\n\n {showLoader ? (\n \n ) : null}\n
\n
\n
\n
\n { onSelectTile(id); }}\n />\n { onUpload(files); }}\n />\n
\n
\n
\n );\n};\n\nImagePanel.propTypes = {\n showLoader: PropTypes.bool.isRequired,\n viewerImage: PropTypes.string.isRequired,\n pickerImages: PropTypes.array.isRequired,\n onSelectTile: PropTypes.func.isRequired,\n onUpload: PropTypes.func.isRequired,\n viewerType: PropTypes.string,\n};\n\nImagePanel.defaultProps = {\n viewerType: 'image',\n};\n\nexport default ImagePanel;\n","import ImageContainer from './ImageContainer';\nexport default ImageContainer;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Tile,\n} from 'carbon-components-react';\nimport ImagePanel from '../ImagePanel/ImagePanel';\n\nexport const ImageContainer = ({\n images,\n onSubmitImage,\n handleUnsupportedFormats,\n isClassifying,\n}) => {\n let defaultImageUrl = '';\n if (images[0] && images[0].url) {\n defaultImageUrl = images[0].url;\n }\n const [mainDisplayImage, setMainDisplayImage] = useState(defaultImageUrl);\n\n const submitSampleImage = (tileId) => {\n const selectedImage = images[tileId].url;\n onSubmitImage({ image_file: selectedImage });\n setMainDisplayImage(selectedImage);\n }\n\n const submitUserImage = (images) => {\n const image = images[0];\n const acceptedImageTypes = ['image/gif','image/png','image/jpg','image/jpeg'];\n if (!acceptedImageTypes.includes(image.type)) {\n handleUnsupportedFormats();\n }\n else {\n const reader = new FileReader();\n reader.onabort = () => console.log('file reading was aborted');\n reader.onerror = () => console.log('file reading has failed');\n reader.onload = () => {\n const imageData = reader.result;\n setMainDisplayImage(imageData);\n onSubmitImage({ image_data: imageData });\n }\n reader.readAsDataURL(image);\n }\n };\n\n return (\n \n

Input

\n { submitSampleImage(tileId); }}\n onUpload={(images) => { submitUserImage(images); }}\n />\n

Select An Image to Analyze

\n \n );\n}\n\nImageContainer.propTypes = {\n onSubmitImage: PropTypes.func.isRequired,\n handleUnsupportedFormats: PropTypes.func.isRequired,\n isClassifying: PropTypes.bool.isRequired,\n images: PropTypes.array.isRequired,\n};\n\nexport default ImageContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst formatNumber = num => (Math.round(num * 100) / 100).toFixed(2);\nconst widthNumber = num => Math.abs(Math.round(num * 100));\n\nfunction ProgressBar({ progress }) {\n return (\n
\n
\n
\n
\n
{formatNumber(progress)}
\n
\n );\n}\n\nProgressBar.propTypes = {\n progress: PropTypes.number,\n};\n\nProgressBar.defaultProps = {\n progress: 0,\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\nexport default ProgressBar;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Accordion,\n Tile,\n FormGroup,\n ContentSwitcher,\n Switch,\n} from 'carbon-components-react';\nimport ProgressBar from '../ProgressBar';\nimport ReactJson from 'react-json-view';\n\nexport const OutputContainer = ({\n classifyResults\n}) => {\n const [outputType, setOutputType] = useState('table');\n\n const onOutputTypeChange = e => {\n setOutputType(e.name);\n };\n\n return (\n \n

Output

\n
\n \n \n \n \n
\n \n {outputType === 'table' ? (\n \n
\n

Top Classes

\n

Score

\n
\n {classifyResults.map(item =>\n (\n
\n

{item.class}

\n \n
\n )\n )}\n \n ) : (\n \n )}\n \n \n );\n}\n\nOutputContainer.propTypes = {\n classifyResults: PropTypes.array.isRequired,\n};\n\nOutputContainer.defaultProps = {\n classifyResults: null,\n};\n\nexport default OutputContainer;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ToastNotification } from 'carbon-components-react';\n\nconst NOTIFICATION_HAS_BEEN_SEEN = 'notificationHasBeenSeen';\n\nexport const Toast = ({\n caption,\n children,\n className,\n hideAfterFirstDisplay,\n hideCloseButton,\n iconDescription,\n kind,\n lowContrast,\n onCloseButtonClick,\n role,\n subtitle,\n timeout,\n title,\n}) => {\n const [id, setId] = useState();\n const [hideToast, setHideToast] = useState(false);\n\n useEffect(() => {\n setId(\n Math.random()\n .toString(36)\n .substring(2, 15) +\n Math.random()\n .toString(36)\n .substring(2, 15),\n );\n }, []);\n\n useEffect(() => {\n const element = document.querySelector(`.custom-toast-${id}`);\n if (element) {\n element.className += 'enter';\n }\n }, [id]);\n\n useEffect(() => {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined &&\n window.localStorage.getItem(NOTIFICATION_HAS_BEEN_SEEN) === 'true'\n ) {\n setHideToast(true);\n }\n }, [hideAfterFirstDisplay]);\n\n return hideToast ? null : (\n {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined\n ) {\n window.localStorage.setItem(NOTIFICATION_HAS_BEEN_SEEN, 'true');\n }\n onCloseButtonClick();\n }}\n role={role}\n subtitle={subtitle}\n timeout={timeout}\n title={title}\n >\n {children}\n \n );\n};\n\nToast.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n hideAfterFirstDisplay: PropTypes.bool,\n hideCloseButton: PropTypes.bool,\n iconDescription: PropTypes.string,\n kind: PropTypes.string,\n lowContrast: PropTypes.bool,\n onCloseButtonClick: PropTypes.func,\n role: PropTypes.string,\n subtitle: PropTypes.string,\n timeout: PropTypes.number,\n title: PropTypes.string,\n};\n\nToast.defaultProps = {\n caption: '',\n children: null,\n className: '',\n hideAfterFirstDisplay: true,\n hideCloseButton: false,\n iconDescription: 'closes notification',\n kind: 'error',\n lowContrast: false,\n onCloseButtonClick: () => {},\n role: 'alert',\n subtitle: '',\n timeout: 0,\n title: '',\n};\n\nexport default Toast;","import Toast from './Toast';\n\nexport default Toast;","import ServiceContainer from './ServiceContainer';\nexport default ServiceContainer;\n","import React, { useState } from 'react';\nimport ImageContainer from '../ImageContainer';\nimport OutputContainer from '../OutputContainer/OutputContainer';\nimport Toast from '../Toast';\nimport { parseClassifyResponse, getTopTenClasses } from './utils';\n\nimport sampleImages from '../../data/sampleImages.json';\nimport defaultResponse from '../../data/mockClassifyResponse.json';\n\nconst GDPR_DISCLAIMER =\n 'This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679.';\n\nexport const ServiceContainer = () => {\n const [isClassifying, setIsClassifying] = useState(false);\n const [results, setResults] = useState(defaultResponse);\n const [error, setError] = useState(null);\n\n const handleUnsupportedFormats = () => {\n setError({ title: 'Invalid file format:', description: 'Only JPGs, PNGs, and GIFs are supported' });\n }\n\n const onClassify = async (image) => {\n setIsClassifying(true);\n fetch('/api/classify', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(image),\n })\n .then((response) => response.json())\n .then(data => {\n console.log(data);\n if (data.error) {\n setError(data.error);\n } else {\n setResults(parseClassifyResponse(data));\n }\n })\n .catch((err) => {\n setError({ title: err.message, description: err.message });\n })\n .finally(() => setIsClassifying(false));\n };\n\n return (\n
\n \n {error && (\n setError(null)}\n />\n )}\n { onClassify(image); }}\n isClassifying={isClassifying}\n images={sampleImages}\n handleUnsupportedFormats={handleUnsupportedFormats}\n />\n \n
\n );\n};\n\nexport default ServiceContainer;\n","export const getTopTenClasses = (classifyResults) => {\n const unsortedItems = classifyResults[0].classes;\n const sortedItems = unsortedItems.sort((a, b) => b.score - a.score);\n return sortedItems.slice(0,10);\n}\n\nexport const parseClassifyResponse = (classifyResponse) => {\n return classifyResponse.result.images[0].classifiers;\n}\n","import React from 'react';\nimport { Button, Link } from 'carbon-components-react';\nimport { default as Api124 } from '@carbon/icons-react/lib/API--1/24';\nimport Document24 from '@carbon/icons-react/lib/document/24';\nimport IbmCloud24 from '@carbon/icons-react/lib/ibm-cloud/24';\nimport Launch16 from '@carbon/icons-react/lib/launch/16';\nimport LogoGithub24 from '@carbon/icons-react/lib/logo--github/24';\n\nimport './styles/main.scss';\nimport useScript from './hooks/useScript';\nimport Header from './components/Header';\nimport ServiceContainer from './components/ServiceContainer';\nimport { description, title } from './data/input.json';\n\nconst HEADER_LINKS = [\n \n

API reference

\n \n ,\n \n

Documentation

\n \n ,\n \n

GitHub

\n \n ,\n \n \n \n ,\n];\n\nexport const App = () => {\n useScript(\n 'https://cdn.jsdelivr.net/gh/watson-developer-cloud/watson-developer-cloud.github.io@master/analytics.js',\n );\n\n return (\n
\n \n \n
\n );\n}\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/main.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();"],"sourceRoot":""} \ No newline at end of file diff --git a/build/static/js/main.63e16f74.chunk.js b/build/static/js/main.63e16f74.chunk.js deleted file mode 100644 index 72966c9..0000000 --- a/build/static/js/main.63e16f74.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]=this["webpackJsonp@ibm-watson/visual-recognition-code-pattern"]||[]).push([[0],{14:function(e){e.exports=JSON.parse('{"b":"Watson Visual Recognition","a":"The Visual Recognition service uses deep learning algorithms to analyze images for scenes, objects, text, and other subjects."}')},16:function(e,t,a){},23:function(e){e.exports=JSON.parse('[{"url":"/images/classify/small/tweed_jacket.jpg","alt":"tweed jacket"},{"url":"/images/classify/small/computer_chip.jpg","alt":"computer-chip"},{"url":"/images/classify/small/soy_sauce.jpg","alt":"kodak-film"}]')},24:function(e){e.exports=JSON.parse('[{"classifier_id":"default","name":"default","classes":[{"class":"fabric","score":0.959},{"class":"gray color","score":0.946},{"class":"Harris Tweed (jacket)","score":0.87,"type_hierarchy":"/fabric/Harris Tweed (jacket)"},{"class":"clothing","score":0.8},{"class":"tweed","score":0.791,"type_hierarchy":"/fabric/tweed"},{"class":"garment","score":0.518},{"class":"overgarment","score":0.517},{"class":"coat","score":0.509},{"class":"Norfolk jacket","score":0.5,"type_hierarchy":"/garment/overgarment/coat/Norfolk jacket"}],"display":"General Model","description":"Quickly understand objects, actions, scenes, and colors within an image."},{"classifier_id":"food","name":"food","classes":[{"class":"non-food","score":0.998}],"display":"Food Model","description":"Identify meals and food items with enhanced accuracy."},{"classifier_id":"explicit","name":"explicit","classes":[{"class":"not explicit","score":0.991}],"display":"Explicit Model","description":"Determine if an image contains nudity or other inappropriate content."}]')},33:function(e,t,a){e.exports=a(41)},41:function(e,t,a){"use strict";a.r(t);var n=a(0),c=a.n(n),i=a(18),r=a.n(i),o=(a(16),a(48)),s=a(42),l=a(25),m=a.n(l),u=a(26),d=a.n(u),p=a(29),f=a.n(p),g=a(28),E=a.n(g),h=a(27),v=a.n(h),b=a(44),k=function(e){var t=e.description,a=e.links,n=e.title;return c.a.createElement(b.b,{className:"header"},c.a.createElement("div",{className:"title-container"},c.a.createElement("h2",{className:"header-title"},n),c.a.createElement("p",null,t)),c.a.createElement("div",{className:"link-container"},c.a.createElement("div",{className:"link-wrapper"},a.map((function(e){return e})))))};k.defaultProps={description:"",links:[],title:""};var _=k,y=a(19),N=a.n(y),w=a(4),j=function(e){var t=e.images,a=e.onClick;return t.map((function(e,t){return c.a.createElement("div",{key:t,className:"image-picker--section__tile"},c.a.createElement(b.a,{id:"tile-".concat(t),handleClick:function(){a(t)}},c.a.createElement("img",{className:"image-picker--section__image",src:e.url,alt:e.alt})))}))},C=function(e){var t=e.loadingMessage;return c.a.createElement("span",{className:"loader"},c.a.createElement("div",{className:"loader-container"},c.a.createElement("div",{className:"loader-dots"}),t?c.a.createElement("div",{className:"loader-message"},c.a.createElement("p",{className:"ibm-type-a"},t)):null))};C.defaultProps={loadingMessage:null};var S=C,O=a(30),B=a(21),W=a.n(B),I=function(e){var t=e.onUpload;return c.a.createElement("div",{className:"image-picker--section__tile"},c.a.createElement(b.a,{id:"123",handleClick:function(){}},c.a.createElement(O.a,{multiple:!1,onDrop:function(e){t(e)}},(function(e){var t=e.getRootProps,a=e.getInputProps;return c.a.createElement("div",Object.assign({},t(),{className:"upload-image"}),c.a.createElement("input",a()),c.a.createElement(W.a,null),c.a.createElement("p",{className:"upload-text"},"Select or drag an image"))}))))},x=function(e){var t=e.showLoader,a=e.viewerImage,n=e.pickerImages,i=e.onSelectTile,r=e.onUpload;return c.a.createElement("div",{className:"main-image-picker__container"},c.a.createElement("div",{className:"main-image-picker"},c.a.createElement("div",null,c.a.createElement("img",{className:"main-image-picker__image",src:a,alt:"main"}),t?c.a.createElement(S,null):null)),c.a.createElement("div",{className:"image-selection__container"},c.a.createElement("div",{className:"image-picker__tiles"},c.a.createElement(j,{images:n,onClick:function(e){i(e)}}),c.a.createElement(I,{onUpload:function(e){r(e)}}))))};x.defaultProps={viewerType:"image"};var D=x,P=function(e){var t=e.images,a=e.onSubmitImage,i=e.handleUnsupportedFormats,r=e.isClassifying,o="";t[0]&&t[0].url&&(o=t[0].url);var s=Object(n.useState)(o),l=Object(w.a)(s,2),m=l[0],u=l[1];return c.a.createElement(b.b,{className:"input-container"},c.a.createElement("h4",{className:"container-title"},"Input"),c.a.createElement(D,{showLoader:r,viewerImage:m,pickerImages:t,onSelectTile:function(e){!function(e){var n=t[e].url;a({image_file:n}),u(n)}(e)},onUpload:function(e){!function(e){var t=e[0];if(["image/gif","image/png","image/jpg","image/jpeg"].includes(t.type)){var n=new FileReader;n.onabort=function(){return console.log("file reading was aborted")},n.onerror=function(){return console.log("file reading has failed")},n.onload=function(){var e=n.result;u(e),a({image_data:e})},n.readAsDataURL(t)}else i()}(e)}}),c.a.createElement("h4",{className:"container-footer"},"Select An Image to Analyze"))},A=a(50),F=a(45),T=a(46),R=a(49);function M(e){var t,a=e.progress;return c.a.createElement("div",{className:"bar-container"},c.a.createElement("div",{className:"bar-full"},c.a.createElement("div",{className:"bar",style:{width:"".concat((t=a,Math.abs(Math.round(100*t))),"%")}})),c.a.createElement("div",{className:"progress"},function(e){return(Math.round(100*e)/100).toFixed(2)}(a)))}M.defaultProps={progress:0};var U=M,J=a(22),H=a.n(J),G=function(e){var t=e.classifyResults,a=Object(n.useState)("table"),i=Object(w.a)(a,2),r=i[0],o=i[1];return c.a.createElement(b.b,{className:"output-container"},c.a.createElement("h3",{className:"output-container__title"},"Output"),c.a.createElement("div",{className:"output-container__control-panel"},c.a.createElement(A.a,{className:"output-container__content-switch",onChange:function(e){o(e.name)},selectedIndex:"table"===r?0:1},c.a.createElement(F.a,{name:"table",text:"Table"}),c.a.createElement(F.a,{name:"json",text:"JSON"}))),c.a.createElement(T.a,{legendText:"Result"},"table"===r?c.a.createElement(R.a,null,c.a.createElement("div",{className:"output-container__accordian-header"},c.a.createElement("p",null,"Top Classes"),c.a.createElement("p",null,"Score")),t.map((function(e){return c.a.createElement("div",{key:e.class,className:"output-container__accordian-item"},c.a.createElement("p",null,e.class),c.a.createElement(U,{progress:e.score}))}))):c.a.createElement(H.a,{name:!1,enableClipboard:!1,displayDataTypes:!1,displayObjectSize:!1,collapsed:2,collapseStringsAfterLength:20,theme:"monokai",style:{lineHeight:"1.3em"},src:t})))};G.defaultProps={classifyResults:null};var L=G,q=a(47),z=function(e){var t=e.caption,a=e.children,i=e.className,r=e.hideAfterFirstDisplay,o=e.hideCloseButton,s=e.iconDescription,l=e.kind,m=e.lowContrast,u=e.onCloseButtonClick,d=e.role,p=e.subtitle,f=e.timeout,g=e.title,E=Object(n.useState)(),h=Object(w.a)(E,2),v=h[0],b=h[1],k=Object(n.useState)(!1),_=Object(w.a)(k,2),y=_[0],N=_[1];return Object(n.useEffect)((function(){b(Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15))}),[]),Object(n.useEffect)((function(){var e=document.querySelector(".custom-toast-".concat(v));e&&(e.className+="enter")}),[v]),Object(n.useEffect)((function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&"true"===window.localStorage.getItem("notificationHasBeenSeen")&&N(!0)}),[r]),y?null:c.a.createElement(q.a,{caption:t,className:"custom-toast-".concat(v," ").concat(i),hideCloseButton:o,iconDescription:s,kind:l,lowContrast:m,onCloseButtonClick:function(){r&&void 0!==typeof window&&void 0!==typeof window.localStorage&&window.localStorage.setItem("notificationHasBeenSeen","true"),u()},role:d,subtitle:p,timeout:f,title:g},a)};z.defaultProps={caption:"",children:null,className:"",hideAfterFirstDisplay:!0,hideCloseButton:!1,iconDescription:"closes notification",kind:"error",lowContrast:!1,onCloseButtonClick:function(){},role:"alert",subtitle:"",timeout:0,title:""};var Q=z,V=a(23),K=a(24),X=function(){var e,t=Object(n.useState)(!1),a=Object(w.a)(t,2),i=a[0],r=a[1],o=Object(n.useState)(K),s=Object(w.a)(o,2),l=s[0],m=s[1],u=Object(n.useState)(null),d=Object(w.a)(u,2),p=d[0],f=d[1];return c.a.createElement("div",{className:"service-container"},c.a.createElement(Q,{kind:"info",subtitle:"This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679."}),p&&c.a.createElement(Q,{kind:"error",title:p.title,subtitle:p.description,hideAfterFirstDisplay:!1,timeout:5e3,onCloseButtonClick:function(){return f(null)}}),c.a.createElement(P,{onSubmitImage:function(e){!function(e){N.a.async((function(t){for(;;)switch(t.prev=t.next){case 0:r(!0),fetch("/api/classify",{method:"POST",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(e)}).then((function(e){return e.json()})).then((function(e){console.log(e),e.error?f(e.error):m(e.result.images[0].classifiers)})).catch((function(e){f({title:e.message,description:e.message})})).finally((function(){return r(!1)}));case 2:case"end":return t.stop()}}))}(e)},isClassifying:i,images:V,handleUnsupportedFormats:function(){f({title:"Invalid file format:",description:"Only JPGs, PNGs, and GIFs are supported"})}}),c.a.createElement(L,{classifyResults:(e=l,e[0].classes.sort((function(e,t){return t.score-e.score})).slice(0,10))}))},Y=a(14),$=[c.a.createElement(o.a,{className:"link",key:"api-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/apidocs/visual-recognition"},c.a.createElement("p",{className:"link-text"},"API reference"),c.a.createElement(m.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"docs-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/docs/services/visual-recognition?topic=visual-recognition-getting-started-tutorial"},c.a.createElement("p",{className:"link-text"},"Documentation"),c.a.createElement(d.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link",key:"github-link",target:"_blank",rel:"noopener noreferrer",href:"https://github.com/watson-developer-cloud/visual-recognition-code-pattern"},c.a.createElement("p",{className:"link-text"},"GitHub"),c.a.createElement(v.a,{className:"link-icon"})),c.a.createElement(o.a,{className:"link getting-started",key:"ibm-cloud-link",target:"_blank",rel:"noopener noreferrer",href:"https://cloud.ibm.com/registration?target=%2Fcatalog%2Fservices%2Fvisual-recognition%3FhideTours%3Dtrue%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmca1%3D000000OF%26cm_mmca2%3D10000409&_ga=2.158846578.918027017.1572271296-1405764752.1539884377&_gac=1.250083700.1571850605.Cj0KCQjw3JXtBRC8ARIsAEBHg4m4g1PSkKQRoI6YUe4A-6ysul0ziiWU0DVbqlbWAQpq3721u-bxkd0aAkV3EALw_wcB&cm_mc_uid=83381689395615475202389&cm_mc_sid_50200000=82214471572470185115&cm_mc_sid_52640000=21949701572470185117&cm_mmc=Earned-_-Watson%20Core%20-%20Platform-_-WW_WW-_-intercom&cm_mmca1=000000OF&cm_mmca2=10000409"},c.a.createElement(s.a,{className:"link-button",kind:"tertiary",renderIcon:E.a},"Start for free on IBM Cloud"),c.a.createElement(f.a,{className:"link-icon"}))],Z=function(){return c.a.createElement("div",{className:"app-container"},c.a.createElement(_,{description:Y.a,links:$,title:Y.b}),c.a.createElement(X,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));r.a.render(c.a.createElement(Z,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}},[[33,1,2]]]); -//# sourceMappingURL=main.63e16f74.chunk.js.map \ No newline at end of file diff --git a/build/static/js/main.63e16f74.chunk.js.map b/build/static/js/main.63e16f74.chunk.js.map deleted file mode 100644 index 6b1af0e..0000000 --- a/build/static/js/main.63e16f74.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["components/Header/Header.js","components/Header/index.js","components/ImagePicker/ImagePicker.js","components/Loader/Loader.js","components/UploadImage/UploadImage.js","components/ImagePanel/ImagePanel.js","components/ImageContainer/index.js","components/ImageContainer/ImageContainer.js","components/ProgressBar/ProgressBar.js","components/ProgressBar/index.js","components/OutputContainer/OutputContainer.js","components/Toast/Toast.js","components/Toast/index.js","components/ServiceContainer/index.js","components/ServiceContainer/ServiceContainer.js","components/ServiceContainer/utils.js","App.js","serviceWorker.js","index.js"],"names":["Header","description","links","title","Tile","className","map","link","defaultProps","ImagePicker","images","onClick","image","i","key","id","handleClick","src","url","alt","Loader","loadingMessage","UploadImage","onUpload","multiple","onDrop","acceptedFiles","getRootProps","getInputProps","ImagePanel","showLoader","viewerImage","pickerImages","onSelectTile","files","viewerType","ImageContainer","onSubmitImage","handleUnsupportedFormats","isClassifying","defaultImageUrl","useState","mainDisplayImage","setMainDisplayImage","tileId","selectedImage","image_file","submitSampleImage","includes","type","reader","FileReader","onabort","console","log","onerror","onload","imageData","result","image_data","readAsDataURL","submitUserImage","ProgressBar","num","progress","style","width","Math","abs","round","toFixed","formatNumber","OutputContainer","classifyResults","outputType","setOutputType","ContentSwitcher","onChange","e","name","selectedIndex","Switch","text","FormGroup","legendText","Accordion","item","class","score","enableClipboard","displayDataTypes","displayObjectSize","collapsed","collapseStringsAfterLength","theme","lineHeight","Toast","caption","children","hideAfterFirstDisplay","hideCloseButton","iconDescription","kind","lowContrast","onCloseButtonClick","role","subtitle","timeout","setId","hideToast","setHideToast","useEffect","random","toString","substring","element","document","querySelector","undefined","window","localStorage","getItem","setItem","ServiceContainer","setIsClassifying","defaultResponse","results","setResults","error","setError","a","async","fetch","method","headers","body","JSON","stringify","then","response","json","data","classifiers","catch","err","message","finally","onClassify","sampleImages","classes","sort","b","slice","HEADER_LINKS","Link","target","rel","href","Button","renderIcon","Launch16","App","Boolean","location","hostname","match","ReactDOM","render","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"m4DAIaA,EAAS,SAAC,GAAD,IAAGC,EAAH,EAAGA,YAAaC,EAAhB,EAAgBA,MAAOC,EAAvB,EAAuBA,MAAvB,OACpB,kBAACC,EAAA,EAAD,CAAMC,UAAU,UACd,yBAAKA,UAAU,mBACb,wBAAIA,UAAU,gBAAgBF,GAC9B,2BAAIF,IAEN,yBAAKI,UAAU,kBACb,yBAAKA,UAAU,gBAAgBH,EAAMI,KAAI,SAAAC,GAAI,OAAIA,SAWvDP,EAAOQ,aAAe,CACpBP,YAAa,GACbC,MAAO,GACPC,MAAO,IAGMH,IC3BAA,ED2BAA,E,wBEWAS,EAjCY,SAAC,GAGrB,IAFLC,EAEI,EAFJA,OACAC,EACI,EADJA,QAOA,OACED,EAAOJ,KAAI,SAACM,EAAOC,GACjB,OACE,yBAAKC,IAAKD,EAAGR,UAAU,+BACrB,kBAAC,IAAD,CACEU,GAAE,eAAUF,GACZG,YAAa,WATrBL,EAS0CE,KAElC,yBAAKR,UAAU,+BACbY,IAAKL,EAAMM,IACXC,IAAKP,EAAMO,YCtBnBC,EAAS,SAAC,GAAD,IAAGC,EAAH,EAAGA,eAAH,OACb,0BAAMhB,UAAU,UACd,yBAAKA,UAAU,oBACb,yBAAKA,UAAU,gBACbgB,EACA,yBAAKhB,UAAU,kBACb,uBAAGA,UAAU,cAAcgB,IAE3B,QASVD,EAAOZ,aAAe,CACpBa,eAAgB,MAGHD,Q,yBCcAE,EA9BY,SAAC,GAErB,IADLC,EACI,EADJA,SAEA,OACE,yBAAKlB,UAAU,+BACb,kBAAC,IAAD,CACEU,GAAG,MACHC,YAAa,cAEb,kBAAC,IAAD,CACEQ,UAAU,EACVC,OAAQ,SAACC,GAAoBH,EAASG,MAErC,gBAAEC,EAAF,EAAEA,aAAcC,EAAhB,EAAgBA,cAAhB,OACC,yCAASD,IAAT,CAAyBtB,UAAU,iBACjC,0BAAWuB,KACX,kBAAC,IAAD,MACA,uBAAGvB,UAAU,eAAb,kCCnBRwB,EAAa,SAAC,GAMb,IALLC,EAKI,EALJA,WACAC,EAII,EAJJA,YACAC,EAGI,EAHJA,aACAC,EAEI,EAFJA,aACAV,EACI,EADJA,SAEA,OACE,yBAAKlB,UAAU,gCACb,yBAAKA,UAAU,qBACb,6BACE,yBAAKA,UAAU,2BACbY,IAAKc,EACLZ,IAAI,SAELW,EACC,kBAAC,EAAD,MACE,OAGR,yBAAKzB,UAAU,8BACb,yBAAKA,UAAU,uBACb,kBAAC,EAAD,CACEK,OAAQsB,EACRrB,QAAS,SAACI,GAASkB,EAAalB,MAElC,kBAAC,EAAD,CACEQ,SAAU,SAACW,GAAYX,EAASW,UAiB5CL,EAAWrB,aAAe,CACxB2B,WAAY,SAGCN,QCrDAO,ECMe,SAAC,GAKxB,IAJL1B,EAII,EAJJA,OACA2B,EAGI,EAHJA,cACAC,EAEI,EAFJA,yBACAC,EACI,EADJA,cAEIC,EAAkB,GAClB9B,EAAO,IAAMA,EAAO,GAAGQ,MACzBsB,EAAkB9B,EAAO,GAAGQ,KAH1B,MAK4CuB,mBAASD,GALrD,mBAKGE,EALH,KAKqBC,EALrB,KAgCJ,OACE,kBAACvC,EAAA,EAAD,CAAMC,UAAU,mBACd,wBAAIA,UAAU,mBAAd,SACA,kBAAC,EAAD,CACEyB,WAAYS,EACZR,YAAaW,EACbV,aAActB,EACduB,aAAc,SAACW,IAhCK,SAACA,GACzB,IAAMC,EAAgBnC,EAAOkC,GAAQ1B,IACrCmB,EAAc,CAAES,WAAYD,IAC5BF,EAAoBE,GA6BYE,CAAkBH,IAC9CrB,SAAU,SAACb,IA3BO,SAACA,GACvB,IAAME,EAAQF,EAAO,GAErB,GAD2B,CAAC,YAAY,YAAY,YAAY,cACxCsC,SAASpC,EAAMqC,MAGlC,CACH,IAAMC,EAAS,IAAIC,WACnBD,EAAOE,QAAU,kBAAMC,QAAQC,IAAI,6BACnCJ,EAAOK,QAAU,kBAAMF,QAAQC,IAAI,4BACnCJ,EAAOM,OAAS,WACd,IAAMC,EAAYP,EAAOQ,OACzBf,EAAoBc,GACpBpB,EAAc,CAAEsB,WAAYF,KAE9BP,EAAOU,cAAchD,QAXrB0B,IAuB0BuB,CAAgBnD,MAE1C,wBAAIL,UAAU,oBAAd,gC,gCChDN,SAASyD,EAAT,GAAoC,IAFhBC,EAEGC,EAAY,EAAZA,SACrB,OACE,yBAAK3D,UAAU,iBACb,yBAAKA,UAAU,YACb,yBAAKA,UAAU,MAAM4D,MAAO,CAAEC,MAAM,GAAD,QANvBH,EAMwCC,EANjCG,KAAKC,IAAID,KAAKE,MAAY,IAANN,KAMJ,SAErC,yBAAK1D,UAAU,YATA,SAAA0D,GAAG,OAAKI,KAAKE,MAAY,IAANN,GAAa,KAAKO,QAAQ,GASjCC,CAAaP,KAS9CF,EAAYtD,aAAe,CACzBwD,SAAU,GAGGF,ICxBAA,EDwBAA,E,iBEbFU,EAAkB,SAAC,GAEzB,IADLC,EACI,EADJA,gBACI,EACgChC,mBAAS,SADzC,mBACGiC,EADH,KACeC,EADf,KAOJ,OACE,kBAACvE,EAAA,EAAD,CAAMC,UAAU,oBACd,wBAAIA,UAAU,2BAAd,UACA,yBAAKA,UAAU,mCACb,kBAACuE,EAAA,EAAD,CACEvE,UAAU,mCACVwE,SAVmB,SAAAC,GACzBH,EAAcG,EAAEC,OAUVC,cAA8B,UAAfN,EAAyB,EAAI,GAE5C,kBAACO,EAAA,EAAD,CAAQF,KAAK,QAAQG,KAAK,UAC1B,kBAACD,EAAA,EAAD,CAAQF,KAAK,OAAOG,KAAK,WAG7B,kBAACC,EAAA,EAAD,CAAWC,WAAW,UACJ,UAAfV,EACC,kBAACW,EAAA,EAAD,KACA,yBAAKhF,UAAU,sCACb,0CACA,qCAEDoE,EAAgBnE,KAAI,SAAAgF,GAAI,OAErB,yBAAKxE,IAAKwE,EAAKC,MAAOlF,UAAU,oCAC9B,2BAAIiF,EAAKC,OACT,kBAAC,EAAD,CAAavB,SAAUsB,EAAKE,aAMlC,kBAAC,IAAD,CACET,MAAM,EACNU,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,EACnBC,UAAW,EACXC,2BAA4B,GAC5BC,MAAM,UACN7B,MAAO,CAAE8B,WAAY,SACrB9E,IAAKwD,OAYjBD,EAAgBhE,aAAe,CAC7BiE,gBAAiB,MAGJD,Q,QCtEFwB,EAAQ,SAAC,GAcf,IAbLC,EAaI,EAbJA,QACAC,EAYI,EAZJA,SACA7F,EAWI,EAXJA,UACA8F,EAUI,EAVJA,sBACAC,EASI,EATJA,gBACAC,EAQI,EARJA,gBACAC,EAOI,EAPJA,KACAC,EAMI,EANJA,YACAC,EAKI,EALJA,mBACAC,EAII,EAJJA,KACAC,EAGI,EAHJA,SACAC,EAEI,EAFJA,QACAxG,EACI,EADJA,MACI,EACgBsC,qBADhB,mBACG1B,EADH,KACO6F,EADP,OAE8BnE,oBAAS,GAFvC,mBAEGoE,EAFH,KAEcC,EAFd,KAiCJ,OA7BAC,qBAAU,WACRH,EACEzC,KAAK6C,SACFC,SAAS,IACTC,UAAU,EAAG,IACd/C,KAAK6C,SACFC,SAAS,IACTC,UAAU,EAAG,OAEnB,IAEHH,qBAAU,WACR,IAAMI,EAAUC,SAASC,cAAT,wBAAwCtG,IACpDoG,IACFA,EAAQ9G,WAAa,WAEtB,CAACU,IAEJgG,qBAAU,WAENZ,QACkBmB,WAAXC,aACwBD,WAAxBC,OAAOC,cAC8C,SAA5DD,OAAOC,aAAaC,QA3CS,4BA6C7BX,GAAa,KAEd,CAACX,IAEGU,EAAY,KACjB,kBAAC,IAAD,CACEZ,QAASA,EACT5F,UAAS,uBAAkBU,EAAlB,YAAwBV,GACjC+F,gBAAiBA,EACjBC,gBAAiBA,EACjBC,KAAMA,EACNC,YAAaA,EACbC,mBAAoB,WAEhBL,QACkBmB,WAAXC,aACwBD,WAAxBC,OAAOC,cAEdD,OAAOC,aAAaE,QA/DK,0BA+D+B,QAE1DlB,KAEFC,KAAMA,EACNC,SAAUA,EACVC,QAASA,EACTxG,MAAOA,GAEN+F,IAqBPF,EAAMxF,aAAe,CACnByF,QAAS,GACTC,SAAU,KACV7F,UAAW,GACX8F,uBAAuB,EACvBC,iBAAiB,EACjBC,gBAAiB,sBACjBC,KAAM,QACNC,aAAa,EACbC,mBAAoB,aACpBC,KAAM,QACNC,SAAU,GACVC,QAAS,EACTxG,MAAO,IAGM6F,IC/GAA,ED+GAA,E,gBEhHA2B,ECWiB,WAAO,ICZNlD,EDYK,EACMhC,oBAAS,GADf,mBAC7BF,EAD6B,KACdqF,EADc,OAENnF,mBAASoF,GAFH,mBAE7BC,EAF6B,KAEpBC,EAFoB,OAGVtF,mBAAS,MAHC,mBAG7BuF,EAH6B,KAGtBC,EAHsB,KAkCpC,OACE,yBAAK5H,UAAU,qBACb,kBAAC,EAAD,CAAOiG,KAAK,OAAOI,SAtCvB,yRAuCKsB,GACC,kBAAC,EAAD,CACE1B,KAAK,QACLnG,MAAO6H,EAAM7H,MACbuG,SAAUsB,EAAM/H,YAChBkG,uBAAuB,EACvBQ,QAAS,IACTH,mBAAoB,kBAAMyB,EAAS,SAGvC,kBAAC,EAAD,CACE5F,cAAe,SAACzB,IAvCH,SAAOA,GAAP,EAAAsH,EAAAC,OAAA,gDACjBP,GAAiB,GACjBQ,MAAM,gBAAiB,CACrBC,OAAQ,OACRC,QAAS,CACP,OAAU,mBACV,eAAgB,oBAElBC,KAAMC,KAAKC,UAAU7H,KAEtB8H,MAAK,SAACC,GAAD,OAAcA,EAASC,UAC5BF,MAAK,SAAAG,GACJxF,QAAQC,IAAIuF,GACRA,EAAKb,MACPC,EAASY,EAAKb,OAEdD,EAAiCc,EC9BfnF,OAAOhD,OAAO,GAAGoI,gBDiCtCC,OAAM,SAACC,GACJf,EAAS,CAAE9H,MAAO6I,EAAIC,QAAShJ,YAAa+I,EAAIC,aAEnDC,SAAQ,kBAAMtB,GAAiB,MAtBf,qCAuCeuB,CAAWvI,IACvC2B,cAAeA,EACf7B,OAAQ0I,EACR9G,yBA9C2B,WAC/B2F,EAAS,CAAE9H,MAAO,uBAAwBF,YAAa,+CA+CrD,kBAAC,EAAD,CACEwE,iBClEyBA,EDkESqD,ECjElBrD,EAAgB,GAAG4E,QACPC,MAAK,SAACpB,EAAGqB,GAAJ,OAAUA,EAAE/D,MAAQ0C,EAAE1C,SAC1CgE,MAAM,EAAE,S,QCUvBC,EAAe,CACnB,kBAACC,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,WACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,oDAEL,uBAAGxJ,UAAU,aAAb,iBACA,kBAAC,IAAD,CAAQA,UAAU,eAEpB,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,YACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,4GAEL,uBAAGxJ,UAAU,aAAb,iBACA,kBAAC,IAAD,CAAYA,UAAU,eAExB,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,OACVS,IAAI,cACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,6EAEL,uBAAGxJ,UAAU,aAAb,UACA,kBAAC,IAAD,CAAcA,UAAU,eAE1B,kBAACqJ,EAAA,EAAD,CACErJ,UAAU,uBACVS,IAAI,iBACJ6I,OAAO,SACPC,IAAI,sBACJC,KAAK,urBAEL,kBAACC,EAAA,EAAD,CAAQzJ,UAAU,cAAciG,KAAK,WAAWyD,WAAYC,KAA5D,+BAGA,kBAAC,IAAD,CAAY3J,UAAU,gBAeX4J,EAXI,kBACjB,yBAAK5J,UAAU,iBACb,kBAAC,EAAD,CACEJ,YAAaA,IACbC,MAAOuJ,EACPtJ,MAAOA,MAET,kBAAC,EAAD,QCrDgB+J,QACW,cAA7B3C,OAAO4C,SAASC,UAEe,UAA7B7C,OAAO4C,SAASC,UAEhB7C,OAAO4C,SAASC,SAASC,MACvB,2DCZNC,IAASC,OAAO,kBAAC,EAAD,MAASnD,SAASoD,eAAe,SD6H3C,kBAAmBC,WACrBA,UAAUC,cAAcC,MAAMjC,MAAK,SAAAkC,GACjCA,EAAaC,kB","file":"static/js/main.63e16f74.chunk.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Tile } from 'carbon-components-react';\n\nexport const Header = ({ description, links, title }) => (\n \n
\n

{title}

\n

{description}

\n
\n
\n
{links.map(link => link)}
\n
\n \n);\n\nHeader.propTypes = {\n description: PropTypes.string,\n links: PropTypes.arrayOf(PropTypes.object),\n title: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: '',\n links: [],\n title: '',\n};\n\nexport default Header;\n","import Header from './Header';\nexport default Header;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n SelectableTile\n} from 'carbon-components-react';\n\nexport const ImagePicker = ({\n images,\n onClick,\n}) => {\n\n const onImageClick = (id) => {\n onClick(id);\n }\n\n return (\n images.map((image, i) => {\n return (\n
\n { onImageClick(i); }}\n >\n {image.alt}\n\n \n
\n );\n })\n );\n}\n\nImagePicker.propTypes = {\n images: PropTypes.array.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default ImagePicker;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Loader = ({ loadingMessage }) => (\n \n
\n
\n {(loadingMessage) ? (\n
\n

{loadingMessage}

\n
\n ) : null}\n
\n \n);\n\nLoader.propTypes = {\n loadingMessage: PropTypes.string,\n};\n\nLoader.defaultProps = {\n loadingMessage: null,\n};\n\nexport default Loader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Dropzone from 'react-dropzone';\nimport {\n SelectableTile\n} from 'carbon-components-react';\nimport Upload32 from '@carbon/icons-react/lib/upload/32';\n\nexport const UploadImage = ({\n onUpload,\n}) => {\n return (\n
\n {}}\n >\n { onUpload(acceptedFiles); }}\n >\n {({getRootProps, getInputProps}) => (\n
\n \n \n

Select or drag an image

\n
\n )}\n \n \n
\n);\n}\n\nUploadImage.propTypes = {\n onUpload: PropTypes.func.isRequired,\n};\n\nexport default UploadImage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImagePicker from '../ImagePicker/ImagePicker';\nimport Loader from '../Loader/Loader';\nimport UploadImage from '../UploadImage/UploadImage';\n\nconst ImagePanel = ({\n showLoader,\n viewerImage,\n pickerImages,\n onSelectTile,\n onUpload,\n}) => {\n return (\n
\n
\n
\n \"main\"\n\n {showLoader ? (\n \n ) : null}\n
\n
\n
\n
\n { onSelectTile(id); }}\n />\n { onUpload(files); }}\n />\n
\n
\n
\n );\n};\n\nImagePanel.propTypes = {\n showLoader: PropTypes.bool.isRequired,\n viewerImage: PropTypes.string.isRequired,\n pickerImages: PropTypes.array.isRequired,\n onSelectTile: PropTypes.func.isRequired,\n onUpload: PropTypes.func.isRequired,\n viewerType: PropTypes.string,\n};\n\nImagePanel.defaultProps = {\n viewerType: 'image',\n};\n\nexport default ImagePanel;\n","import ImageContainer from './ImageContainer';\nexport default ImageContainer;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Tile,\n} from 'carbon-components-react';\nimport ImagePanel from '../ImagePanel/ImagePanel';\n\nexport const ImageContainer = ({\n images,\n onSubmitImage,\n handleUnsupportedFormats,\n isClassifying,\n}) => {\n let defaultImageUrl = '';\n if (images[0] && images[0].url) {\n defaultImageUrl = images[0].url;\n }\n const [mainDisplayImage, setMainDisplayImage] = useState(defaultImageUrl);\n\n const submitSampleImage = (tileId) => {\n const selectedImage = images[tileId].url;\n onSubmitImage({ image_file: selectedImage });\n setMainDisplayImage(selectedImage);\n }\n\n const submitUserImage = (images) => {\n const image = images[0];\n const acceptedImageTypes = ['image/gif','image/png','image/jpg','image/jpeg'];\n if (!acceptedImageTypes.includes(image.type)) {\n handleUnsupportedFormats();\n }\n else {\n const reader = new FileReader();\n reader.onabort = () => console.log('file reading was aborted');\n reader.onerror = () => console.log('file reading has failed');\n reader.onload = () => {\n const imageData = reader.result;\n setMainDisplayImage(imageData);\n onSubmitImage({ image_data: imageData });\n }\n reader.readAsDataURL(image);\n }\n };\n\n return (\n \n

Input

\n { submitSampleImage(tileId); }}\n onUpload={(images) => { submitUserImage(images); }}\n />\n

Select An Image to Analyze

\n \n );\n}\n\nImageContainer.propTypes = {\n onSubmitImage: PropTypes.func.isRequired,\n handleUnsupportedFormats: PropTypes.func.isRequired,\n isClassifying: PropTypes.bool.isRequired,\n images: PropTypes.array.isRequired,\n};\n\nexport default ImageContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst formatNumber = num => (Math.round(num * 100) / 100).toFixed(2);\nconst widthNumber = num => Math.abs(Math.round(num * 100));\n\nfunction ProgressBar({ progress }) {\n return (\n
\n
\n
\n
\n
{formatNumber(progress)}
\n
\n );\n}\n\nProgressBar.propTypes = {\n progress: PropTypes.number,\n};\n\nProgressBar.defaultProps = {\n progress: 0,\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\nexport default ProgressBar;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Accordion,\n Tile,\n FormGroup,\n ContentSwitcher,\n Switch,\n} from 'carbon-components-react';\nimport ProgressBar from '../ProgressBar';\nimport ReactJson from 'react-json-view';\n\nexport const OutputContainer = ({\n classifyResults\n}) => {\n const [outputType, setOutputType] = useState('table');\n\n const onOutputTypeChange = e => {\n setOutputType(e.name);\n };\n\n return (\n \n

Output

\n
\n \n \n \n \n
\n \n {outputType === 'table' ? (\n \n
\n

Top Classes

\n

Score

\n
\n {classifyResults.map(item =>\n (\n
\n

{item.class}

\n \n
\n )\n )}\n \n ) : (\n \n )}\n \n \n );\n}\n\nOutputContainer.propTypes = {\n classifyResults: PropTypes.array.isRequired,\n};\n\nOutputContainer.defaultProps = {\n classifyResults: null,\n};\n\nexport default OutputContainer;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ToastNotification } from 'carbon-components-react';\n\nconst NOTIFICATION_HAS_BEEN_SEEN = 'notificationHasBeenSeen';\n\nexport const Toast = ({\n caption,\n children,\n className,\n hideAfterFirstDisplay,\n hideCloseButton,\n iconDescription,\n kind,\n lowContrast,\n onCloseButtonClick,\n role,\n subtitle,\n timeout,\n title,\n}) => {\n const [id, setId] = useState();\n const [hideToast, setHideToast] = useState(false);\n\n useEffect(() => {\n setId(\n Math.random()\n .toString(36)\n .substring(2, 15) +\n Math.random()\n .toString(36)\n .substring(2, 15),\n );\n }, []);\n\n useEffect(() => {\n const element = document.querySelector(`.custom-toast-${id}`);\n if (element) {\n element.className += 'enter';\n }\n }, [id]);\n\n useEffect(() => {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined &&\n window.localStorage.getItem(NOTIFICATION_HAS_BEEN_SEEN) === 'true'\n ) {\n setHideToast(true);\n }\n }, [hideAfterFirstDisplay]);\n\n return hideToast ? null : (\n {\n if (\n hideAfterFirstDisplay &&\n typeof window !== undefined &&\n typeof window.localStorage !== undefined\n ) {\n window.localStorage.setItem(NOTIFICATION_HAS_BEEN_SEEN, 'true');\n }\n onCloseButtonClick();\n }}\n role={role}\n subtitle={subtitle}\n timeout={timeout}\n title={title}\n >\n {children}\n \n );\n};\n\nToast.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n hideAfterFirstDisplay: PropTypes.bool,\n hideCloseButton: PropTypes.bool,\n iconDescription: PropTypes.string,\n kind: PropTypes.string,\n lowContrast: PropTypes.bool,\n onCloseButtonClick: PropTypes.func,\n role: PropTypes.string,\n subtitle: PropTypes.string,\n timeout: PropTypes.number,\n title: PropTypes.string,\n};\n\nToast.defaultProps = {\n caption: '',\n children: null,\n className: '',\n hideAfterFirstDisplay: true,\n hideCloseButton: false,\n iconDescription: 'closes notification',\n kind: 'error',\n lowContrast: false,\n onCloseButtonClick: () => {},\n role: 'alert',\n subtitle: '',\n timeout: 0,\n title: '',\n};\n\nexport default Toast;","import Toast from './Toast';\n\nexport default Toast;","import ServiceContainer from './ServiceContainer';\nexport default ServiceContainer;\n","import React, { useState } from 'react';\nimport ImageContainer from '../ImageContainer';\nimport OutputContainer from '../OutputContainer/OutputContainer';\nimport Toast from '../Toast';\nimport { parseClassifyResponse, getTopTenClasses } from './utils';\n\nimport sampleImages from '../../data/sampleImages.json';\nimport defaultResponse from '../../data/mockClassifyResponse.json';\n\nconst GDPR_DISCLAIMER =\n 'This system is for demonstration purposes only and is not intended to process Personal Data. No Personal Data is to be entered into this system as it may not have the necessary controls in place to meet the requirements of the General Data Protection Regulation (EU) 2016/679.';\n\nexport const ServiceContainer = () => {\n const [isClassifying, setIsClassifying] = useState(false);\n const [results, setResults] = useState(defaultResponse);\n const [error, setError] = useState(null);\n\n const handleUnsupportedFormats = () => {\n setError({ title: 'Invalid file format:', description: 'Only JPGs, PNGs, and GIFs are supported' });\n }\n\n const onClassify = async (image) => {\n setIsClassifying(true);\n fetch('/api/classify', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(image),\n })\n .then((response) => response.json())\n .then(data => {\n console.log(data);\n if (data.error) {\n setError(data.error);\n } else {\n setResults(parseClassifyResponse(data));\n }\n })\n .catch((err) => {\n setError({ title: err.message, description: err.message });\n })\n .finally(() => setIsClassifying(false));\n };\n\n return (\n
\n \n {error && (\n setError(null)}\n />\n )}\n { onClassify(image); }}\n isClassifying={isClassifying}\n images={sampleImages}\n handleUnsupportedFormats={handleUnsupportedFormats}\n />\n \n
\n );\n};\n\nexport default ServiceContainer;\n","export const getTopTenClasses = (classifyResults) => {\n const unsortedItems = classifyResults[0].classes;\n const sortedItems = unsortedItems.sort((a, b) => b.score - a.score);\n return sortedItems.slice(0,10);\n}\n\nexport const parseClassifyResponse = (classifyResponse) => {\n return classifyResponse.result.images[0].classifiers;\n}\n","import React from 'react';\nimport { Button, Link } from 'carbon-components-react';\nimport { default as Api124 } from '@carbon/icons-react/lib/API--1/24';\nimport Document24 from '@carbon/icons-react/lib/document/24';\nimport IbmCloud24 from '@carbon/icons-react/lib/ibm-cloud/24';\nimport Launch16 from '@carbon/icons-react/lib/launch/16';\nimport LogoGithub24 from '@carbon/icons-react/lib/logo--github/24';\n\nimport './styles/main.scss';\nimport Header from './components/Header';\nimport ServiceContainer from './components/ServiceContainer';\nimport { description, title } from './data/input.json';\n\nconst HEADER_LINKS = [\n \n

API reference

\n \n ,\n \n

Documentation

\n \n ,\n \n

GitHub

\n \n ,\n \n \n \n ,\n];\n\nexport const App = () => (\n
\n \n \n
\n);\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/main.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();"],"sourceRoot":""} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3acc174..6cd9817 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3639,41 +3639,6 @@ "integrity": "sha512-3vgkdXJRgCViCrH3fLUdyAXo0I8wmohO6QETv7vWFx6yc7s+SirWFBSFL38zUx4MHtR8iTxIlLEzkeU6FlFtXg==", "dev": true }, - "carbon-themes": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/carbon-themes/-/carbon-themes-1.7.0.tgz", - "integrity": "sha1-ePTKt2ZHealEBCfuboU9f/359Fw=", - "dev": true, - "requires": { - "carbon-components": "^8.0.0" - }, - "dependencies": { - "carbon-components": { - "version": "8.23.1", - "resolved": "https://registry.npmjs.org/carbon-components/-/carbon-components-8.23.1.tgz", - "integrity": "sha512-HxfkCdIKMKvVWgUwvmblCHkFTzQOllEM5iL6YAsD6nlCCkEur0D3ALQ1DGLe0K6dME76Zd+dDpVCZ7Ono1o4Hg==", - "dev": true, - "requires": { - "carbon-icons": "^6.0.4", - "flatpickr": "2.6.3", - "lodash.debounce": "^4.0.8", - "warning": "^3.0.0" - } - }, - "carbon-icons": { - "version": "6.3.2", - "resolved": "https://registry.npmjs.org/carbon-icons/-/carbon-icons-6.3.2.tgz", - "integrity": "sha512-6c2xYOxvHP5iJGNsuqC/YclcWn0EpBHb+awmoQLgDcIyOThAtVB8RpIRYeLFB6PbJk4P0sqNpFggwY/o/cCj3g==", - "dev": true - }, - "flatpickr": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-2.6.3.tgz", - "integrity": "sha1-RXNXUy3rE189pktCW/RDVzeWFWQ=", - "dev": true - } - } - }, "case-sensitive-paths-webpack-plugin": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz", diff --git a/package.json b/package.json index a14e490..6e9357c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "carbon-components": "^10.9.0", "carbon-components-react": "^7.9.0", "carbon-icons": "^7.0.7", - "carbon-themes": "^1.7.0", "concurrently": "^5.0.2", "jest": "^24.9.0", "jest-puppeteer": "^4.4.0", diff --git a/public/index.html b/public/index.html index 4d91a39..3924df4 100644 --- a/public/index.html +++ b/public/index.html @@ -36,7 +36,5 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> -