ai-identifiers/build/static/js/main.6b914a11.chunk.js

A React component running tensorflow and coco-ssd to detect objects in real-time using Webcam

(this["webpackJsonpai-identifiers"]=this["webpackJsonpai-identifiers"]||[]).push([[0],[,,,,,,,,,,,,,,function(e,t,n){e.exports=n(32)},,,,,function(e,t,n){},,,,,,function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var i=n(1),a=n.n(i),r=n(8),o=n.n(r),s=(n(19),n(9)),c=n(10),l=n(13),u=n(12),f=n(11),d=(n(33),n(31),[]),h=[],m=[],v=function(e){Object(l.a)(n,e);var t=Object(u.a)(n);function n(){var e;return Object(s.a)(this,n),(e=t.call(this)).videoRef=a.a.createRef(),e.canvasRef=a.a.createRef(),e.detectFrame=function(t,n){n.detect(t).then((function(i){e.renderPredictions(i),requestAnimationFrame((function(){e.detectFrame(t,n)}))}))},e.renderPredictions=function(t){var n=e.canvasRef.current.getContext("2d");n.clearRect(0,0,n.canvas.width,n.canvas.height);var i="16px sans-serif";n.font=i,n.textBaseline="top",t.forEach((function(e){var t=e.bbox[0],a=e.bbox[1],r=e.bbox[2],o=e.bbox[3];n.strokeStyle="#00FFFF",n.lineWidth=4,n.strokeRect(t,a,r,o),n.fillStyle="#00FFFF";var s=n.measureText(e.class).width,c=parseInt(i,10);n.fillRect(t,a,s+4,c+4)})),t.forEach((function(e){var t=e.bbox[0],i=e.bbox[1];n.fillStyle="#000000",n.fillText(e.class,t,i),(0===d.length||d[d.length-1]!==e.class)&&d.push(e.class),h=Array.from(new Set(d))}))},e.state={isResults:!1,isCartVisible:!1},e}return Object(c.a)(n,[{key:"componentDidMount",value:function(){var e=this;if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var t=navigator.mediaDevices.getUserMedia({audio:!1,video:{facingMode:"user"}}).then((function(t){return window.stream=t,e.videoRef.current.srcObject=t,new Promise((function(t,n){e.videoRef.current.onloadedmetadata=function(){t()}}))})),n=f.a();Promise.all([n,t]).then((function(t){e.detectFrame(e.videoRef.current,t[0])})).catch((function(e){console.error(e)}))}}},{key:"showResults",value:function(){this.setState({isResults:!this.state.isResults})}},{key:"addToCart",value:function(){(m=Array.from(new Set(m))).push(h[h.length-1]),this.setState({isCartVisible:!this.state.isCartVisible})}},{key:"render",value:function(){return a.a.createElement("div",null,a.a.createElement("video",{className:"size",autoPlay:!0,playsInline:!0,muted:!0,ref:this.videoRef,width:"600",height:"500"}),a.a.createElement("canvas",{className:"size",ref:this.canvasRef,width:"600",height:"500"}),a.a.createElement("button",{onClick:this.showResults.bind(this),style:{marginTop:"500px"}},"Show Results"),a.a.createElement("button",{onClick:this.addToCart.bind(this),style:{marginTop:"500px"}},"Add to cart"),this.state.isResults?h.map((function(e,t){return a.a.createElement("li",{key:t,style:{listStyleType:"none",marginLeft:"10px",float:"right"}},e)})):null,this.state.isCartVisible?m.map((function(e,t){return a.a.createElement("li",{key:t,style:{listStyleType:"none",marginLeft:"10px",float:"right"}},e)})):null)}}]),n}(a.a.Component);var b=function(){return a.a.createElement(v,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}$/));o.a.render(a.a.createElement(a.a.StrictMode,null,a.a.createElement(b,null)),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){console.error(e.message)}))}],[[14,1,2]]]);
//# sourceMappingURL=main.6b914a11.chunk.js.map