📁 refact: Computer Vison to isolated directory

src/Controllers/PredictedObjectCollectionController.ts

@@ -1,32 +0,0 @@
-import PredictedObject from "../Models/PredictedObject"
-import PredictedObjectCollection from "../Models/PredictedObjectCollection"
-import PredictedObjectView from "../Views/PredictedObjectView"
-
-class PredictedObjectCollectionController {
-  private model: PredictedObjectCollection
-
-  constructor () {
-    this.model = new PredictedObjectCollection()
-    this.renderView()
-  }
-
-  set predictedObjects (objects: PredictedObject[]) {
-    this.model.objects = objects
-    this.renderView()
-  }
-
-  public renderView = () => {
-    const existingPredictedObjectViews = document.querySelectorAll('.PredictedObject')
-    existingPredictedObjectViews.forEach(v => {
-      v.outerHTML = ''
-    })
-
-    const body = document.querySelector('body')!
-    this.model.objects.forEach((object: PredictedObject) => {
-      const predictedObjectView = new PredictedObjectView(object)
-      body.appendChild(predictedObjectView.element)
-    })
-  }
-}
-
-export default PredictedObjectCollectionController

src/Controllers/VideoController.ts

@@ -1,48 +0,0 @@
-import Video from "../Models/Video"
-import VideoView from '../Views/VideoView'
-
-class VideoController {
-  private defaultWidth: number = 640
-  private defaultHeight: number = 480
-  private userMediaConstraints = { video: true }
-  public model: Video
-  private view: VideoView
-
-  constructor (props: { width?: number, height?: number } = {}) {
-    this.model = new Video({
-      width: props.width || this.defaultWidth,
-      height: props.height || this.defaultHeight
-    })
-
-    this.view = new VideoView(this.model)
-    this.renderView()
-    this.enableCamera()
-  }
-
-  get imageData () {
-    if (!this.view.element.srcObject) return null
-
-    const canvas: HTMLCanvasElement = document.createElement('canvas')
-    canvas.width = this.model.width
-    canvas.height = this.model.height
-    const context = canvas.getContext('2d')!
-    context.drawImage(this.view.element, 0, 0, this.model.width, this.model.height)
-
-    return context.getImageData(0, 0, this.model.width, this.model.height)
-  }
-
-  private enableCamera = async () => {
-    const stream = await navigator.mediaDevices.getUserMedia(this.userMediaConstraints)
-    this.view.srcObject = stream
-  }
-
-  private renderView () {
-    const existingVideoView = document.querySelector('#videoView')
-    if (existingVideoView) existingVideoView.outerHTML = ''
-
-    const body = document.querySelector('body')!
-    body.appendChild(this.view.element)
-  }
-}
-
-export default VideoController

src/Vision/UseCases/Factories/makeObjectDetector.ts

@@ -3,7 +3,7 @@ import ObjectDetector from "../ObjectDetector"
 
 const defaultPredictions = [
   (prediction: DetectedObject) => prediction.score > 0.6,
-  (prediction: DetectedObject) => prediction.class === 'cat',
+  (prediction: DetectedObject) => prediction.class === 'person',
 ]
 
 function makeObjectDetector (filterPredicates?: Function[]): ObjectDetector {

webpack.config.js

@@ -1,10 +1,10 @@
 const path = require('path');
 
 module.exports = {
-  entry: './src/app.ts',
+  entry: './src/Vision/app.ts',
   devtool: 'inline-source-map',
   devServer: {
-    contentBase: './dist',
+    contentBase: './dist/Vision',
    hot: true,
   },
   module: {
@@ -21,6 +21,6 @@ module.exports = {
   },
   output: {
     filename: 'app.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'dist', 'Vision'),
   },
 };