feat(api): add api call for solving equations based on image data

Adds API interaction infrastructure and a single call to solve image data. Also configures
commitizen and transmits image data from the PhotoCaptureComponent to the HomePageComponent.

Author: jamesmann99

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -29,10 +29,11 @@
     "@angular-devkit/build-angular": "~0.1001.0",
     "@angular/cli": "~10.1.0",
     "@angular/compiler-cli": "~10.1.0",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "cz-conventional-changelog": "^3.3.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
@@ -44,5 +45,10 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.0.2"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

package.json

@@ -0,0 +1,7 @@
+{
+    "/": {
+        "target": "http://159.89.90.18:5000",
+        "secure": false,
+        "changeOrigin": true
+    }
+}

proxy.conf.json

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SiteHomeModule } from '../lib/site-home/site-home.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -12,7 +13,8 @@ import { SiteHomeModule } from '../lib/site-home/site-home.module';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    SiteHomeModule
+    SiteHomeModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -1,11 +1,14 @@
-<div *ngIf="homePageState|async as State">
-    <div *ngIf="!State.takingPhoto">
-    James is best teacher.
-    <Button (click)="startTakingPhoto()"> </Button>
-    
-    </div>
-
+<div *ngIf="homePageState|async as state">
+    <div *ngIf="!state.takingPhoto">
+        <h2>MLM</h2>
+        <h1 class="home-page__title">Math Learning Machine</h1>
+        <p class="home-page__description">A tool that harnesses the power of Machine Learning and Optical Character
+            recognition to solve hand written
+            math problems, both simple and complex. Just write it out and snap a picture!</p>
 
-
-<app-photo-capture *ngIf="State.takingPhoto"></app-photo-capture>
+        <button class="home-page__capture-button" (click)="startTakingPhoto()">Capture</button>
+        <p>Created by Grant Williams, James Mann, Raj Kapadia, Spencer Brown, and Steven Kemp *in order of the alphabet,
+            not of importance*</p>
+    </div>
+    <app-photo-capture *ngIf="state.takingPhoto" (imageDataUpdated)="sendImage($event)"></app-photo-capture>
 </div>

src/lib/site-home/components/home-page/home-page.component.html

@@ -1,21 +1,35 @@
 import { Component, OnInit } from '@angular/core';
-import { HomePageService} from '../../services/home-page.service';
+import { HomePageService } from '../../services/home-page/home-page.service';
+import { MathLearningMachineApiService } from '../../services/math-learning-machine-api/math-learning-machine-api.service';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss']
 })
 export class HomePageComponent implements OnInit {
-  homePageState = this.homepageservice.getState();
+  homePageState = this.homePageService.getState();
 
-  constructor(private homepageservice:HomePageService) { }
+  constructor(private homePageService: HomePageService, private mathLearningMachineApiService: MathLearningMachineApiService) { }
 
   ngOnInit(): void {
   }
 
-  startTakingPhoto(){
-    this.homepageservice.updateState({takingPhoto:true});
+  startTakingPhoto() {
+    this.homePageService.setTakingPhoto(true);
   }
 
+  sendImage(imageData) {
+    this.mathLearningMachineApiService.solveImage(imageData).subscribe({
+      next: (res) => {
+        console.log(res);
+        this.homePageService.setTakingPhoto(false);
+      },
+      error: (e) => {
+        console.log(e);
+        this.homePageService.setTakingPhoto(false);
+      }
+    });
+    this.homePageService.setTakingPhoto(false);
+  }
 }

src/lib/site-home/components/home-page/home-page.component.ts

@@ -1,14 +1,14 @@
-<div class="container vh-100">
-    <div class="d-flex flex-column align-items-center">
-        <div class="p-1">
-            <video #video class="app-photo-capture__video-feed" autoplay></video>
-        </div>
-        <div class="pb-2">
-            <button mat-fab theme="" color="primary" class="app-photo-capture__capture-button"
-                (click)="capture()"></button>
-        </div>
-    </div>
-    <div class="p-1">
-        <canvas #canvas class="app-photo-capture__video-feed"></canvas>
+<div class="app-photo-capture">
+    <video #video [class]="!(photoCaptured | async)? 'app-photo-capture__video-feed' : 'app-photo-capture__hidden'"
+        autoplay></video>
+    <button mat-fab theme="" color="primary"
+        [class]="!(photoCaptured | async)? 'app-photo-capture__capture-button' : 'app-photo-capture__hidden'"
+        (click)="capture()">
+    </button>
+    <canvas #canvas
+        [class]="(photoCaptured | async)? 'app-photo-capture__photo' : 'app-photo-capture__hidden'"></canvas>
+    <div *ngIf="photoCaptured | async">
+        <button mat-button color="primary" (click)="retake()">Retake</button>
+        <button mat-button color="primary" (click)="acceptImage()">Accept</button>
     </div>
 </div>

src/lib/site-home/components/photo-capture/photo-capture.component.html

@@ -1,12 +1,28 @@
 .app-photo-capture{
+    height: 100vh;
+    width: 100vw;
+    background: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
     &__video-feed {
         height: 100%;
         width: 100%;
     }
 
+    &__photo {
+        width: 100%;
+    }
+
     &__capture-button {
         position: absolute;
-        bottom: 2rem;
+        bottom: 1rem;
         left: calc(50% - 52px);
     }
+
+    &__hidden{
+        display: none;
+    }
 }

src/lib/site-home/components/photo-capture/photo-capture.component.scss

@@ -1,15 +1,15 @@
-import { Component, OnInit, ViewChild, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Renderer2, Output, EventEmitter, AfterViewInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-photo-capture',
   templateUrl: './photo-capture.component.html',
   styleUrls: ['./photo-capture.component.scss']
 })
-export class PhotoCaptureComponent implements OnInit {
-  @ViewChild('video', { static: true }) videoElement: ElementRef;
-  @ViewChild('canvas', { static: true }) canvas: ElementRef;
-  @Output() imageData = new EventEmitter<string>();
+export class PhotoCaptureComponent implements AfterViewInit {
+  @ViewChild('video', { static: false }) videoElement: ElementRef;
+  @ViewChild('canvas', { static: false }) canvas: ElementRef;
+  @Output() imageDataUpdated = new EventEmitter<string>();
 
   constraints: object = {
     video: {
@@ -22,11 +22,11 @@ export class PhotoCaptureComponent implements OnInit {
   videoHeight: number = 0;
   videoWidth: number = 0;
 
-  photoCaptureState = new BehaviorSubject<boolean>(false);
+  photoCaptured = new BehaviorSubject<boolean>(false);
 
   constructor(private renderer: Renderer2) { }
 
-  ngOnInit(): void {
+  ngAfterViewInit() {
     this.startCamera();
   }
 
@@ -35,7 +35,7 @@ export class PhotoCaptureComponent implements OnInit {
     if ((navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
       navigator.mediaDevices.getUserMedia(this.constraints).then(this.attachVideo.bind(this)).catch(this.handleError.bind(this));
     }
-     else {
+    else {
       alert('Sorry, camera not available.');
     }
   }
@@ -59,11 +59,15 @@ export class PhotoCaptureComponent implements OnInit {
     this.renderer.setProperty(this.canvas.nativeElement, 'width', this.videoWidth);
     this.renderer.setProperty(this.canvas.nativeElement, 'height', this.videoHeight);
     this.canvas.nativeElement.getContext('2d').drawImage(this.videoElement.nativeElement, 0, 0);
-    this.photoCaptureState.next(true);
+    this.photoCaptured.next(true);
+  }
+
+  retake() {
+    this.photoCaptured.next(false);
   }
 
   acceptImage() {
     const canvasElement = this.canvas.nativeElement as HTMLCanvasElement;
-    this.imageData.emit(canvasElement.toDataURL());
+    this.imageDataUpdated.emit(canvasElement.toDataURL());
   }
 }

src/lib/site-home/components/photo-capture/photo-capture.component.ts

@@ -1,21 +1,26 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { iHomePageState } from '../interfaces/home-page.interface';
+import { iHomePageState } from '../../interfaces/home-page.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class HomePageService {
   defaultStateStatus = {
-    takingPhoto:false
+    takingPhoto: false
   }
   homePageState = new BehaviorSubject<iHomePageState>(this.defaultStateStatus);
 
-  getState(){
+  getState() {
     return this.homePageState.asObservable();
   }
-  updateState(newState){
+
+  updateState(newState) {
     const currState = this.homePageState.getValue();
-    this.homePageState.next({...currState,...newState})
+    this.homePageState.next({ ...currState, ...newState })
+  }
+
+  setTakingPhoto(value: boolean) {
+    this.updateState({ takingPhoto: value })
   }
 }

src/lib/site-home/services/home-page.service.spec.ts src/lib/site-home/services/home-page/home-page.service.spec.ts

@@ -1,9 +1,14 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class MathLearningMachineApiService {
+  constructor(private httpClient: HttpClient) { }
 
-  constructor() { }
+  solveImage(imageData: string): Observable<any> {
+    return this.httpClient.post('/solve-image', { b64_img: imageData.substring(22) });
+  }
 }

src/lib/site-home/services/home-page.service.ts src/lib/site-home/services/home-page/home-page.service.ts

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+html,body{
+    margin: 0;
+    padding: 0;
+}