{"version":3,"sources":["App.js","serviceWorker.js","index.js"],"names":["videoConstraints","width","height","makeRingBuffer","Array","from","length","App","props","state","idx","arts","texts","plants","picture","identification","webcamref","React","createRef","this","handleWebcam","current","getScreenshot","screenshot","ingestPicture","console","log","requestAnimationFrame","art","text","plant","millis","setState","startDate","Date","now","formdata","FormData","append","dataURLToBlob","fetch","method","body","infer","json","endDate","ingestStats","className","style","opacity","id","onChange","e","facingMode","target","value","audio","ref","screenshotFormat","highcharts","Highcharts","options","chart","title","series","name","data","yAxis","min","max","xAxis","plotOptions","area","marker","enabled","Component","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","message"],"mappings":"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","file":"static/js/main.b861164f.chunk.js","sourcesContent":["import React from 'react';\nimport './App.css';\nimport Webcam from 'react-webcam';\nimport { dataURLToBlob } from 'blob-util';\nimport HighchartsReact from 'highcharts-react-official';\nimport Highcharts from 'highcharts';\n\nconst INFERENCE_ENDPOINT = \"https://art-text-plant.onrender.com/identify\";\n\nconst videoConstraints = {\n  width: 256, //1280,\n  height: 256, //720,\n};\n\nconst ringBufferSize = 69  // ring buffers help u live in the moment\nconst makeRingBuffer = () => Array.from({length: ringBufferSize}, () => 1); // highcharts does not appreciate float32arrays coming in\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      idx: 0,\n      arts: makeRingBuffer(), texts: makeRingBuffer(), plants: makeRingBuffer(),\n      picture: null, identification: null\n    };\n    this.webcamref = React.createRef();\n  }\n  componentDidMount() {\n    this.handleWebcam();\n  }\n  handleWebcam() {\n    if(this.webcamref && this.webcamref.current && this.webcamref.current.getScreenshot) {\n      const screenshot = (this.webcamref.current.getScreenshot());\n      if(screenshot !== null) {\n        this.ingestPicture(screenshot);\n      } else {\n        console.log('screenshot is null');\n        requestAnimationFrame(() => this.handleWebcam());\n      }\n    }\n  }\n  ingestStats({art,text,plant,millis}) {\n    const {idx, arts, texts, plants} = this.state;\n    arts[idx] = art;\n    texts[idx] = text;\n    plants[idx] = plant;\n    this.setState({idx: (idx + 1) % ringBufferSize, millis});\n  }\n  async ingestPicture(picture) {\n    const startDate = Date.now();\n    this.setState({picture});\n    const formdata = new FormData();\n    formdata.append('image', dataURLToBlob(picture))\n    const infer = await fetch(INFERENCE_ENDPOINT, {\n      method: \"POST\",\n      body: formdata,\n    });\n    const identification = await infer.json();\n    const endDate = Date.now();\n    requestAnimationFrame(() => this.handleWebcam());\n    this.ingestStats({...identification, millis: endDate - startDate});\n  }\n  render() {\n    const {idx, arts, texts, plants} = this.state;\n    return <div className=\"App\">\n      <h1>\n        <span style={{opacity: arts[(idx + ringBufferSize - 1) % ringBufferSize] * 0.75 + 0.25}}>ART</span>\n        &nbsp;\n        <span style={{opacity: texts[(idx + ringBufferSize - 1) % ringBufferSize] * 0.75 + 0.25}}>TEXT</span>\n        &nbsp;\n        <span style={{opacity: plants[(idx + ringBufferSize - 1) % ringBufferSize] * 0.75 + 0.25}}>PLANT</span>\n      </h1>\n      <h2>via your&nbsp;\n        <select id=\"facingMode\" onChange={e => this.setState({facingMode: e.target.value})} value={this.state.facingMode}>\n          <option value=\"user\">selfie</option>\n          <option value=\"environment\">photo</option>\n          <option value=\"\"></option>\n        </select>&nbsp;<i>webcam!</i></h2>\n      <Webcam\n        audio={false}\n        height={videoConstraints.height}\n        ref={this.webcamref}\n        screenshotFormat=\"image/jpeg\"\n        width={videoConstraints.width}\n        videoConstraints={{...videoConstraints, facingMode: this.state.facingMode}}\n      />\n      {/* <div><img src={this.state.picture} /></div> */}\n      <div className=\"millis\">{this.state.millis} millis</div>\n        <HighchartsReact highcharts={Highcharts} options={\n          {\n            chart: {\"type\": \"area\", \"animation\": false,},\n            title: {text: \"predictions\"},\n            series: [\n              {name: \"art\", data: arts},\n              {name: \"text\", data: texts},\n              {name: \"plant\", data: plants},\n            ],\n            yAxis: {\n              min: 0,\n              max: 1,\n              title: \"certainty\",\n            },\n            xAxis: {\n              min: 0,\n              max: ringBufferSize,\n              title: \"point in time\",\n            },\n            plotOptions: {\n              area: {\n                marker: {\n                  enabled: false,\n                }\n              }\n            }\n          }\n        } />\n      </div>\n  }\n}\n\nexport default App;\n","// 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\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\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();\n"],"sourceRoot":""}