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..9f4c061 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.61f417ab.chunk.js", + "main.js.map": "/static/js/main.61f417ab.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.5d140d7f91c9496b466e4d7fe645d3d1.js": "/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.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.61f417ab.chunk.js" ] } \ No newline at end of file diff --git a/build/index.html b/build/index.html index b02433c..182f11c 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.5d140d7f91c9496b466e4d7fe645d3d1.js similarity index 72% rename from build/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js rename to build/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js index 5000000..3c42fa7 100644 --- a/build/precache-manifest.3ba30e27b344a17b673f921ef3ae68c3.js +++ b/build/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.js @@ -1,10 +1,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "fc5053c5b172f036ad1236418ef11709", + "revision": "3f37104934cf407ed9018a902566f671", "url": "/index.html" }, { - "revision": "5fab1104440967891040", + "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": "5fab1104440967891040", - "url": "/static/js/main.d735c621.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 1b8f33f..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.3ba30e27b344a17b673f921ef3ae68c3.js" + "/precache-manifest.5d140d7f91c9496b466e4d7fe645d3d1.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.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.d735c621.chunk.js b/build/static/js/main.d735c621.chunk.js deleted file mode 100644 index 1b97b43..0000000 --- a/build/static/js/main.d735c621.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.d735c621.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.d735c621.chunk.js.map deleted file mode 100644 index 37f64d6..0000000 --- a/build/static/js/main.d735c621.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":"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","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 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/src/App.js b/src/App.js index 31706e6..466e943 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import Launch16 from '@carbon/icons-react/lib/launch/16'; import LogoGithub24 from '@carbon/icons-react/lib/logo--github/24'; import './styles/main.scss'; +import useScript from './hooks/useScript'; import Header from './components/Header'; import ServiceContainer from './components/ServiceContainer'; import { description, title } from './data/input.json'; @@ -56,15 +57,21 @@ const HEADER_LINKS = [ , ]; -export const App = () => ( -
-
- -
-); +export const App = () => { + useScript( + 'https://cdn.jsdelivr.net/gh/watson-developer-cloud/watson-developer-cloud.github.io@master/analytics.js', + ); + + return ( +
+
+ +
+ ); +} export default App; \ No newline at end of file diff --git a/src/components/ImagePicker/_Image-picker.scss b/src/components/ImagePicker/_image-picker.scss similarity index 100% rename from src/components/ImagePicker/_Image-picker.scss rename to src/components/ImagePicker/_image-picker.scss diff --git a/src/hooks/useScript.js b/src/hooks/useScript.js new file mode 100644 index 0000000..de84b70 --- /dev/null +++ b/src/hooks/useScript.js @@ -0,0 +1,18 @@ +import { useEffect } from 'react'; + +const useScript = url => { + useEffect(() => { + const script = document.createElement('script'); + + script.src = url; + script.async = true; + + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, [url]); +}; + +export default useScript; \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..0f1334b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,3 @@ +// react-testing-library renders your components to document.body, +// this adds jest-dom's custom assertions +import '@testing-library/jest-dom/extend-expect'; \ No newline at end of file