Saving off finished ML stuff

tjvantoll · Oct 11, 2019 · 23b4427 · 23b4427
1 parent 8a78e22
commit 23b4427
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 4 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -3,12 +3,13 @@ import { Routes } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 
 const routes: Routes = [
-    { path: "", redirectTo: "/text", pathMatch: "full" },
+    { path: "", redirectTo: "/bluetooth", pathMatch: "full" },
     { path: "animations", loadChildren: () => import("./animations/animations.module").then(mod => mod.AnimationsModule) },
     { path: "ar", loadChildren: () => import("./ar/ar.module").then(mod => mod.ARModule) },
     { path: "appsync", loadChildren: () => import("./appsync/appsync.module").then(mod => mod.AppSyncModule) },
     { path: "biometric", loadChildren: () => import("./biometric/biometric.module").then(mod => mod.BiometricModule) },
     { path: "bluetooth", loadChildren: () => import("./bluetooth/bluetooth.module").then(mod => mod.BluetoothModule) },
+    { path: "image", loadChildren: () => import("./image/image.module").then(mod => mod.ImageModule) },
     { path: "maps", loadChildren: () => import("./maps/maps.module").then(mod => mod.MapsModule) },
     { path: "sharing", loadChildren: () => import("./sharing/sharing.module").then(mod => mod.SharingModule) },
     { path: "text", loadChildren: () => import("./text/text.module").then(mod => mod.TextModule) }

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -43,6 +43,11 @@
                     <Label col="1" text="Face Tracking" class="p-r-10"></Label>
                 </GridLayout>
 
+                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/image')" (tap)="onNavItemTap('/image')">
+                    <Label col="0" text="&#xf03e;" class="fa"></Label>
+                    <Label col="1" text="Image Processing" class="p-r-10"></Label>
+                </GridLayout>
+
                 <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/maps')" (tap)="onNavItemTap('/maps')">
                     <Label col="0" text="&#xf279;" class="fa"></Label>
                     <Label col="1" text="Maps & Geolocation" class="p-r-10"></Label>

diff --git a/src/app/bluetooth/bluetooth.component.ts b/src/app/bluetooth/bluetooth.component.ts
@@ -1,6 +1,11 @@
 import { Component, OnInit } from "@angular/core";
+import { MLKitImageLabelingCloudResult } from "nativescript-plugin-firebase/mlkit/imagelabeling";
+import { MLKitLandmarkRecognitionCloudResult } from "nativescript-plugin-firebase/mlkit/landmarkrecognition";
 import { RadSideDrawer } from "nativescript-ui-sidedrawer";
 import * as app from "tns-core-modules/application";
+import { fromUrl, ImageSource } from "tns-core-modules/image-source";
+
+const firebase = require("nativescript-plugin-firebase");
 
 @Component({
     selector: "Bluetooth",
@@ -9,13 +14,58 @@ import * as app from "tns-core-modules/application";
     templateUrl: "./bluetooth.component.html"
 })
 export class BluetoothComponent implements OnInit {
+    landmarkURL = "https://www.novinite.com/media/images/2011-11/photo_verybig_134080.jpg";
+    landmarkRenderedURL = "";
+    landmarkResults = "";
+
+    labelURL = "https://s.abcnews.com/images/US/world-cup-ap-0200-jpo-190707_hpMain_4x3_992.jpg";
+    labelRenderedURL = "";
+    labelResults = "";
+
+    constructor() { }
+
+    ngOnInit(): void { }
 
-    constructor() {}
+    detectLandmarks() {
+        this.landmarkRenderedURL = this.landmarkURL;
 
-    ngOnInit(): void {}
+        fromUrl(this.landmarkURL).then((imageSource: ImageSource) => {
+            firebase.mlkit.landmarkrecognition.recognizeLandmarksCloud({
+                image: imageSource,
+                modelType: "latest", // either "latest" or "stable" (default "stable")
+                maxResults: 8 // default 10
+            })
+            .then((result: MLKitLandmarkRecognitionCloudResult) => {
+                this.landmarkResults = JSON.stringify(result.landmarks);
+                console.log(this.landmarkResults);
+            })
+            .catch((errorMessage) => {
+                console.log("ML Kit error: " + errorMessage)
+            });
+        });
+    }
+
+    labelImage() {
+        this.labelRenderedURL = this.labelURL;
+
+        fromUrl(this.labelURL).then((imageSource: ImageSource) => {
+            firebase.mlkit.imagelabeling.labelImageCloud({
+                image: imageSource,
+                modelType: "stable", // either "latest" or "stable" (default "stable")
+                maxResults: 5 // default 10
+            })
+            .then((result: MLKitImageLabelingCloudResult) => {
+                this.labelResults = JSON.stringify(result.labels);
+                console.log(this.labelResults);
+            })
+            .catch((errorMessage) => {
+                console.log("ML Kit error: " + errorMessage);
+            });
+        });
+    }
 
     onDrawerButtonTap(): void {
         const sideDrawer = <RadSideDrawer>app.getRootView();
         sideDrawer.showDrawer();
     }
-}
+}
diff --git a/src/app/image/image-routing.module.ts b/src/app/image/image-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { Routes } from "@angular/router";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+
+import { ImageComponent } from "./image.component";
+
+const routes: Routes = [
+    { path: "", component: ImageComponent }
+];
+
+@NgModule({
+    imports: [NativeScriptRouterModule.forChild(routes)],
+    exports: [NativeScriptRouterModule]
+})
+export class ImageRoutingModule { }
diff --git a/src/app/image/image.component.html b/src/app/image/image.component.html
@@ -0,0 +1,35 @@
+<ActionBar class="action-bar">
+    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
+    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
+        ios.position="left">
+    </ActionItem>
+    <Label class="action-bar-title" text="Image Processing"></Label>
+</ActionBar>
+
+<GridLayout class="page">
+    <ScrollView>
+        <StackLayout class="p-20">
+            <Label class="h1" text="Landmark Recognition"></Label>
+            <Label class="m-y-20" textWrap="true" text="Enter a URL of an image that contains a landmark."></Label>
+
+            <GridLayout height="40" columns="*, auto" class="form" orientation="horizontal">
+                <TextField col="0" class="input input-border" [text]="landmarkURL"></TextField>
+                <Button col="1" class="btn btn-primary btn-rounded-sm" text="Render" (tap)="detectLandmarks()"></Button>
+            </GridLayout>
+            <Image *ngIf="landmarkRenderedURL" class="m-y-20" height="200" [src]="landmarkRenderedURL"></Image>
+            <Label textWrap="true" [text]="landmarkResults"></Label>
+
+            <StackLayout class="hr hr-light m-y-20"></StackLayout>
+
+            <Label class="h1" text="Image Labeling"></Label>
+            <Label class="m-y-20" textWrap="true" text="Enter a URL of an image that you would like labeled."></Label>
+
+            <GridLayout height="40" columns="*, auto" class="form" orientation="horizontal">
+                <TextField col="0" class="input input-border" [text]="labelURL"></TextField>
+                <Button col="1" class="btn btn-primary btn-rounded-sm" text="Render" (tap)="labelImage()"></Button>
+            </GridLayout>
+            <Image *ngIf="labelRenderedURL" class="m-y-20" height="200" [src]="labelRenderedURL"></Image>
+            <Label textWrap="true" [text]="labelResults"></Label>
+        </StackLayout>
+    </ScrollView>
+</GridLayout>
diff --git a/src/app/image/image.component.ts b/src/app/image/image.component.ts
@@ -0,0 +1,71 @@
+import { Component, OnInit } from "@angular/core";
+import { MLKitImageLabelingCloudResult } from "nativescript-plugin-firebase/mlkit/imagelabeling";
+import { MLKitLandmarkRecognitionCloudResult } from "nativescript-plugin-firebase/mlkit/landmarkrecognition";
+import { RadSideDrawer } from "nativescript-ui-sidedrawer";
+import * as app from "tns-core-modules/application";
+import { fromUrl, ImageSource } from "tns-core-modules/image-source";
+
+const firebase = require("nativescript-plugin-firebase");
+
+@Component({
+    selector: "ImageProcessing",
+    moduleId: module.id,
+    styleUrls: ["./image.component.css"],
+    templateUrl: "./image.component.html"
+})
+export class ImageComponent implements OnInit {
+    landmarkURL = "https://www.novinite.com/media/images/2011-11/photo_verybig_134080.jpg";
+    landmarkRenderedURL = "";
+    landmarkResults = "";
+
+    labelURL = "https://s.abcnews.com/images/US/world-cup-ap-0200-jpo-190707_hpMain_4x3_992.jpg";
+    labelRenderedURL = "";
+    labelResults = "";
+
+    constructor() { }
+
+    ngOnInit(): void { }
+
+    detectLandmarks() {
+        this.landmarkRenderedURL = this.landmarkURL;
+
+        fromUrl(this.landmarkURL).then((imageSource: ImageSource) => {
+            firebase.mlkit.landmarkrecognition.recognizeLandmarksCloud({
+                image: imageSource,
+                modelType: "latest", // either "latest" or "stable" (default "stable")
+                maxResults: 8 // default 10
+            })
+            .then((result: MLKitLandmarkRecognitionCloudResult) => {
+                this.landmarkResults = JSON.stringify(result.landmarks);
+                console.log(this.landmarkResults);
+            })
+            .catch((errorMessage) => {
+                console.log("ML Kit error: " + errorMessage)
+            });
+        });
+    }
+
+    labelImage() {
+        this.labelRenderedURL = this.labelURL;
+
+        fromUrl(this.labelURL).then((imageSource: ImageSource) => {
+            firebase.mlkit.imagelabeling.labelImageCloud({
+                image: imageSource,
+                modelType: "stable", // either "latest" or "stable" (default "stable")
+                maxResults: 5 // default 10
+            })
+            .then((result: MLKitImageLabelingCloudResult) => {
+                this.labelResults = JSON.stringify(result.labels);
+                console.log(this.labelResults);
+            })
+            .catch((errorMessage) => {
+                console.log("ML Kit error: " + errorMessage);
+            });
+        });
+    }
+
+    onDrawerButtonTap(): void {
+        const sideDrawer = <RadSideDrawer>app.getRootView();
+        sideDrawer.showDrawer();
+    }
+}
diff --git a/src/app/image/image.module.ts b/src/app/image/image.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+
+import { ImageRoutingModule } from "./image-routing.module";
+import { ImageComponent } from "./image.component";
+
+@NgModule({
+    imports: [
+        NativeScriptCommonModule,
+        ImageRoutingModule
+    ],
+    declarations: [
+        ImageComponent
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+export class ImageModule { }