More plantnet bugfixes. But working now
This commit is contained in:
@@ -8,6 +8,8 @@ const routes: Routes = [
|
|||||||
path: '',
|
path: '',
|
||||||
component: ClassifyPage
|
component: ClassifyPage
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<ion-header>
|
<ion-header>
|
||||||
<ion-toolbar>
|
<ion-toolbar>
|
||||||
<ion-title>Classify your image</ion-title>
|
<ion-title>Image classification</ion-title>
|
||||||
<ion-buttons slot="start">
|
<ion-buttons slot="start">
|
||||||
<ion-back-button defaultHref="home" icon="chevron-back-outline"></ion-back-button>
|
<ion-back-button defaultHref="home" icon="chevron-back-outline"></ion-back-button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
@@ -20,36 +20,14 @@
|
|||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label>Choose a class</ion-label>
|
Best match:
|
||||||
|
|
||||||
|
<ion-label>
|
||||||
|
{{result}}
|
||||||
<ion-select>
|
</ion-label>
|
||||||
<ion-select-option value="leaf">
|
|
||||||
Leaf
|
|
||||||
</ion-select-option>
|
|
||||||
<ion-select-option value="flower">
|
|
||||||
|
|
||||||
Flower
|
|
||||||
</ion-select-option>
|
|
||||||
<ion-select-option value="fruit">
|
|
||||||
Fruit
|
|
||||||
</ion-select-option>
|
|
||||||
|
|
||||||
<ion-select-option value="bark">
|
|
||||||
Bark
|
|
||||||
</ion-select-option>
|
|
||||||
<ion-select-option value="auto">
|
|
||||||
Automatic
|
|
||||||
</ion-select-option>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</ion-select>
|
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-button expand="block" (click)="submit_image_with_classification()">Submit</ion-button>
|
||||||
|
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@@ -1,13 +1,17 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import {ENV} from '../../../app.constant';
|
import { ENV } from '../../../app.constant';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
import { AuthService } from '../../../services/auth.service';
|
import { AuthService } from '../../../services/auth.service';
|
||||||
import { Auth, user } from '@angular/fire/auth';
|
import { Auth, user } from '@angular/fire/auth';
|
||||||
import { Storage } from '@ionic/storage-angular';
|
import { Storage } from '@ionic/storage-angular';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
import { Geolocation } from '@capacitor/geolocation';
|
import { Geolocation } from '@capacitor/geolocation';
|
||||||
|
|
||||||
import { Http } from '@capacitor-community/http';
|
import { Http } from '@capacitor-community/http';
|
||||||
|
import * as Parse from 'parse';
|
||||||
|
|
||||||
|
// debug purpose: Chrome without CORS on mac
|
||||||
|
// open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/Chrome dev session" --disable-web-security
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-classify',
|
selector: 'app-classify',
|
||||||
@@ -15,54 +19,154 @@ import { Http } from '@capacitor-community/http';
|
|||||||
styleUrls: ['./classify.page.scss'],
|
styleUrls: ['./classify.page.scss'],
|
||||||
})
|
})
|
||||||
export class ClassifyPage implements OnInit {
|
export class ClassifyPage implements OnInit {
|
||||||
PROJECT = 'all'; // try 'weurope' or 'canada'
|
PROJECT = 'all'; // try 'weurope' or 'canada'
|
||||||
API_URL = 'https://my-api.plantnet.org/v2/identify/' + this.PROJECT + '?api-key=';
|
API_URL = 'https://my-api.plantnet.org/v2/identify/' + this.PROJECT + '?api-key=';
|
||||||
API_PRIVATE_KEY = ENV.plantnetKey; // secret
|
API_PRIVATE_KEY = ENV.plantnetKey; // secret
|
||||||
API_SIMSEARCH_OPTION = '&include-related-images=true'; // optional: get most similar images
|
API_SIMSEARCH_OPTION = '&include-related-images=true'; // optional: get most similar images
|
||||||
API_LANG = '&lang=en'; // default: en
|
API_LANG = '&lang=en'; // default: en
|
||||||
|
// add result variabel for showing result to user
|
||||||
|
result = '';
|
||||||
|
|
||||||
uploadSuccess = false; // Add this line
|
parsefile: any;
|
||||||
image = '';
|
parsefileName: any;
|
||||||
user = null;
|
parsefileUrl: any;
|
||||||
language = '';
|
|
||||||
latitude: number;
|
uploadSuccess = false; // Add this line
|
||||||
longitude: number;
|
image = '';
|
||||||
altitude: number;
|
|
||||||
|
user = null;
|
||||||
|
language = '';
|
||||||
|
latitude: number;
|
||||||
|
longitude: number;
|
||||||
|
altitude: number;
|
||||||
constructor(
|
constructor(
|
||||||
|
private storage: Storage,
|
||||||
|
private authService: AuthService,
|
||||||
|
private afAuth: Auth,
|
||||||
|
private translateService: TranslateService,
|
||||||
|
private router: Router
|
||||||
|
|
||||||
private storage: Storage,
|
) {
|
||||||
private authService: AuthService,
|
user(this.afAuth).subscribe((response) => {
|
||||||
private afAuth: Auth,
|
|
||||||
private translateService: TranslateService,
|
|
||||||
private router: Router
|
|
||||||
|
|
||||||
) { user(this.afAuth).subscribe((response) => {
|
|
||||||
//fill the user to verify if someone is logged in
|
//fill the user to verify if someone is logged in
|
||||||
this.user = response;
|
this.user = response;
|
||||||
console.log(this.user.uid);
|
});
|
||||||
}); }
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
// get location
|
// get location
|
||||||
this.getLocation();
|
this.getLocation();
|
||||||
|
Parse.initialize(ENV.parseAppId, ENV.parseJSKey);
|
||||||
|
(Parse as any).serverURL = ENV.parseServerUrl; // use your server url
|
||||||
|
|
||||||
|
this.storage.create();
|
||||||
|
|
||||||
|
// get file out of storage and submit to parse
|
||||||
|
this.storage.get('plantnet_image').then((val) => { // get image from storage
|
||||||
|
this.image = val;
|
||||||
|
this.parsefile = new Parse.File('plantnet_image.jpg', { base64: this.image });
|
||||||
|
this.parsefile.save().then(
|
||||||
|
(response: any) => {
|
||||||
|
this.parsefileUrl = this.parsefile.toJSON().url;
|
||||||
|
this.parsefileName = this.parsefile.toJSON().name;
|
||||||
|
console.log('parsefileUrl', this.parsefileUrl);
|
||||||
|
console.log('parsefileName', this.parsefileName);
|
||||||
|
|
||||||
|
// call function to submit to plantnet
|
||||||
|
|
||||||
|
this.submit_to_plantnet();
|
||||||
|
|
||||||
|
|
||||||
// get image from local storage
|
|
||||||
this.storage.get('image').then((image) => {
|
|
||||||
console.log(image);
|
|
||||||
this.image = image;
|
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// add rose.jpg from assets directory for testing
|
|
||||||
const imageUri = 'assets/rose.jpg';
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
submit_image_with_classification() {
|
||||||
|
|
||||||
|
const plantnet_data_store = Parse.Object.extend('plantnet_data');
|
||||||
|
|
||||||
|
// create new instance of parse class
|
||||||
|
|
||||||
|
const plantnet_data = new plantnet_data_store();
|
||||||
|
|
||||||
|
// set value for parse clas
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
plantnet_data.set('user_uid', this.user.uid);
|
||||||
|
plantnet_data.set('name', this.user.displayName);
|
||||||
|
plantnet_data.set('email', this.user.email);
|
||||||
|
plantnet_data.set('image', this.parsefile);
|
||||||
|
plantnet_data.set('classification', this.result);
|
||||||
|
plantnet_data.set('latitude', this.latitude);
|
||||||
|
plantnet_data.set('longitude', this.longitude);
|
||||||
|
plantnet_data.set('altitude', this.altitude);
|
||||||
|
|
||||||
|
|
||||||
|
plantnet_data.save().then(
|
||||||
|
(result: any) => {
|
||||||
|
console.log(result);
|
||||||
|
},
|
||||||
|
(error: any) => {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// go to plantnet page
|
||||||
|
this.router.navigate(['/plantnet']);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async getLocation() {
|
||||||
|
const position = await Geolocation.getCurrentPosition({
|
||||||
|
enableHighAccuracy: true,
|
||||||
|
});
|
||||||
|
this.latitude = position.coords.latitude;
|
||||||
|
console.log(position.coords.latitude);
|
||||||
|
this.longitude = position.coords.longitude;
|
||||||
|
this.altitude = position.coords.altitude;
|
||||||
|
return position.coords;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
submit_to_plantnet() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const imageUri = this.parsefileUrl;
|
||||||
const imageType = 'image/jpeg';
|
const imageType = 'image/jpeg';
|
||||||
const imageName = 'rose.jpg';
|
const imageName = this.parsefileName;
|
||||||
|
|
||||||
fetch(imageUri)
|
fetch(imageUri)
|
||||||
.then(response => response.blob())
|
.then(response => response.blob())
|
||||||
@@ -91,87 +195,31 @@ private router: Router
|
|||||||
data: formData
|
data: formData
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
console.log(response.data);
|
console.log(response.data);
|
||||||
|
|
||||||
|
// show result on to user
|
||||||
|
|
||||||
|
this.result = response.data.results[0].species.scientificName;
|
||||||
|
|
||||||
|
console.log(this.result);
|
||||||
|
|
||||||
|
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error(error);
|
console.log ('error in response', error);
|
||||||
|
this.result = 'Species not found';
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// route to plantnet page
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
savetoParse() {
|
|
||||||
|
|
||||||
const plantnet_data_store = Parse.Object.extend('plantnet_data');
|
|
||||||
|
|
||||||
// create new instance of parse class
|
|
||||||
|
|
||||||
const plantnet_data = new plantnet_data_store();
|
|
||||||
|
|
||||||
// set value for parse clas
|
|
||||||
|
|
||||||
const file = new Parse.File('plantnet_image.jpg', { base64: this.image });
|
|
||||||
file.save().then(
|
|
||||||
(file) => {
|
|
||||||
console.log(file);
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// add location and clasiification
|
|
||||||
|
|
||||||
plantnet_data.set('user_uid', this.user.uid);
|
|
||||||
plantnet_data.set('name', this.user.displayName);
|
|
||||||
plantnet_data.set('email', this.user.email);
|
|
||||||
plantnet_data.set('image', file);
|
|
||||||
plantnet_data.set('latitude', this.latitude);
|
|
||||||
plantnet_data.set('longitude', this.longitude);
|
|
||||||
plantnet_data.set('altitude', this.altitude);
|
|
||||||
|
|
||||||
|
|
||||||
plantnet_data.save().then(
|
|
||||||
(result: any) => {
|
|
||||||
console.log(result);
|
|
||||||
},
|
|
||||||
(error: any) => {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async getLocation() {
|
|
||||||
const position = await Geolocation.getCurrentPosition({
|
|
||||||
enableHighAccuracy: true,
|
|
||||||
});
|
|
||||||
this.latitude = position.coords.latitude;
|
|
||||||
console.log(position.coords.latitude);
|
|
||||||
this.longitude = position.coords.longitude;
|
|
||||||
this.altitude = position.coords.altitude;
|
|
||||||
return position.coords;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,12 @@ const routes: Routes = [
|
|||||||
{
|
{
|
||||||
path: 'classify',
|
path: 'classify',
|
||||||
loadChildren: () => import('./classify/classify.module').then( m => m.ClassifyPageModule)
|
loadChildren: () => import('./classify/classify.module').then( m => m.ClassifyPageModule)
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: 'plantnet',
|
||||||
|
loadChildren: () => import('./plantnet.module').then( m => m.PlantnetPageModule)
|
||||||
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|||||||
Reference in New Issue
Block a user