Image labeling

Image labeling

Get started with machine learning / artificial intelligence on Ionic apps

$5.00

Not yet rated
Purchase externally Login To Purchase
GKM

GKM

Member since 2016

Details

Version:
3
Size:
1mb
Ionic:
2.x,3.x,4.x
Platforms:
iOS, Android, Windows Phone
View ID:
7c547ca4
Released:
6 years ago
Updated:
4 years ago
Category:
Starters
Tags:
tensorflow, machine learning, image, AI, Image Recognition, classifier, classification, label, recognition

Instructions

This project shows how to integrate the MobileNet model for classifying images into an Ionic app.

I hope this starter project helps you get started with Tensorflowjs and write your first AI driven application.

If you buy externally via Paypal, the process to receiving the source code is not automated therefore it might take a few hours to receive the source code (depending on the timezone).

Requirements

  • Ionic 4
  • Cordova 8.1.2

Instructions

  • Download source code and run: npm install

  • Run the app ionic serve

Hey there! You'll need to log in before you can leave a comment here.

Marc Lassiter

Marc Lassiter   ·   6 years ago

Can you do face recognition too? Like if a uploaded a picture of a B list celebrity.

GKM

GKM   ·   6 years ago

Hi Marc, No, this is just a vanilla MobileNet model, here is a list of all the things it can classify. https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet/imagenet_classes.js Thanks,

GKM

GKM   ·   6 years ago

But you can still build your own model that recognizes celebrities and replace the one that comes with this start template.

Eric

Eric   ·   6 years ago

Can you please guide me to a tutorial that shows how to train and replace the models ?

eden

eden   ·   6 years ago

work on computer. doesn't work on mobile

GKM

GKM   ·   6 years ago

What error did you get?

eden

eden   ·   6 years ago

no error just loading and not showing the prediction array. at ionic cordova run browser run wonderfull. when install apk on device its eather loading or not showing the predictions.

GKM

GKM   ·   6 years ago

What device model are you using? I will try to replicate this issue tonight.

eden

eden   ·   6 years ago

samsung s7 edge. thank you ive been tryin to fix it forever

GKM

GKM   ·   6 years ago

I've found the problem, I will upload a new release soon with the fix. Thanks for reporting :)

eden

eden   ·   6 years ago

maybe you can share what the problem is. and i will try to fix it also

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pietro Santoro

Pietro Santoro   ·   6 years ago

Hi, after image upload, I receive an error (see below). How can I correct that? Thanks Pietro Runtime Error: Uncaught (in promise): Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] at Object.assert (http://localhost:8100/build/vendor.js:28405:4811) at http://localhost:8100/build/vendor.js:152774:87 at Array.forEach (<anonymous>) at GraphExecutor.checkInputShapeAndType (http://localhost:8100/build/vendor.js:152768:27) at GraphExecutor.execute (http://localhost:8100/build/vendor.js:152661:14) at FrozenModel.execute (http://localhost:8100/build/vendor.js:149206:36) at http://localhost:8100/build/main.js:171:52 at Object.e.tidy (http://localhost:8100/build/vendor.js:28405:73966) at HomePage.<anonymous> (http://localhost:8100/build/main.js:163:96) at step (http://localhost:8100/build/main.js:86:23) Stack: Error: Uncaught (in promise): Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] at Object.assert (http://localhost:8100/build/vendor.js:28405:4811) at http://localhost:8100/build/vendor.js:152774:87 at Array.forEach (<anonymous>) at GraphExecutor.checkInputShapeAndType (http://localhost:8100/build/vendor.js:152768:27) at GraphExecutor.execute (http://localhost:8100/build/vendor.js:152661:14) at FrozenModel.execute (http://localhost:8100/build/vendor.js:149206:36) at http://localhost:8100/build/main.js:171:52 at Object.e.tidy (http://localhost:8100/build/vendor.js:28405:73966) at HomePage.<anonymous> (http://localhost:8100/build/main.js:163:96) at step (http://localhost:8100/build/main.js:86:23) at c (http://localhost:8100/build/polyfills.js:3:19752) at new t (http://localhost:8100/build/polyfills.js:3:21532) at webpackJsonp.233.__awaiter (http://localhost:8100/build/main.js:57:12) at HomePage.webpackJsonp.233.HomePage.predict (http://localhost:8100/build/main.js:157:16) at HTMLImageElement._this.image224by224.nativeElement.onload [as __zone_symbol__ON_PROPERTYload] (http://localhost:8100/build/main.js:147:27) at HTMLImageElement.H (http://localhost:8100/build/polyfills.js:3:23950) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.9 Angular Core: 5.2.10 Angular Compiler CLI: 5.2.10 Node: 8.11.1 OS Platform: macOS High Sierra Navigator Platform: MacIntel User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

GKM

GKM   ·   6 years ago

Hi Pietro, Which image extension are you uploading?

Pietro Santoro

Pietro Santoro   ·   6 years ago

I tried with png and jpg. For example with https://i.imgur.com/9PSPH4r.png and https://www.florityfair.it/media/wysiwyg/flority-fair/fiori-a-km-0.jpg.

GKM

GKM   ·   6 years ago

I've tried in my phone and it works fine - I'm away until next Wednesday - I will take a deeper look at it by then.

Pietro Santoro

Pietro Santoro   ·   6 years ago

Does your version work also on phone? When I try to build a prod version (ionic cordova build android --prod --release) or a debug version (ionic cordova run android --device) I always receive the following error and it deploy nothing (I use a Nexus 5X with Android 8.1.0). Please, help me make it work :) ! (node:33695) UnhandledPromiseRejectionWarning: Error: spawn EACCES at _errnoException (util.js:1022:11) at ChildProcess.spawn (internal/child_process.js:323:11) at Object.exports.spawn (child_process.js:502:9) at Object.exports.spawn (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/cordova-common/src/superspawn.js:134:31) at GradleBuilder.runGradleWrapper (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/lib/builders/GradleBuilder.js:78:27) at /Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/lib/builders/GradleBuilder.js:177:21 at _fulfilled (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:854:54) at self.promiseDispatch.done (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:883:30) at Promise.promise.promiseDispatch (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:816:13) at /Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:570:49 (node:33695) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:33695) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Pietro Santoro

Pietro Santoro   ·   6 years ago

News: I tried to entirely "rebuild" the project, after an "ionic start AIonic2 blank", I installed libraries (@tensorflow/tfjs and so on), copied single files (models, imagenet-classes.ts) and modified home.ts and home.html. The error "Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3]" remains but now I can deploy on my android device without error.

GKM

GKM   ·   6 years ago

Hi Pietro, I've uploaded a new version 1.0.1 which will fix this issue - thanks for reporting :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Hello, I'm having trouble running on the android device. It opens and loads the image, soon after it is only in the screen of loading and it does not classify.

GKM

GKM   ·   5 years ago

Can you try the new 2.0 version?

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Yes, I'll try

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

in this version I could not install as dependencies used, to be more specific, the Angular

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

says that it is not possible to find the specific version in dependency

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

You can do an angular version change in the PACKET.JSON file, it worked in the web browser, but in the android device is only the blank screen.

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Hello, I managed to make android run. I had to change the angle version to 7.0.4 and its dependencies, before the npm install. After that I gave the command cordova platform add android and ionic cordova run android and worked correctly. Thank you. Another question that has arisen, Where is the model file? .pb? I want to do the substitution for a model that I trained but I'm not locating.

GKM

GKM   ·   5 years ago

We are using the model from https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

ernie

ernie   ·   5 years ago

Only works on Desktop -- not on mobile. He sent me version 1.0.1. Never heard from him.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

ernie

ernie   ·   5 years ago

Only works on Desktop -- not on mobile. He sent me version 1.0.1. Never heard from him.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Hello, I'm having trouble running on the android device. It opens and loads the image, soon after it is only in the screen of loading and it does not classify.

GKM

GKM   ·   5 years ago

Can you try the new 2.0 version?

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Yes, I'll try

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

in this version I could not install as dependencies used, to be more specific, the Angular

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

says that it is not possible to find the specific version in dependency

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

You can do an angular version change in the PACKET.JSON file, it worked in the web browser, but in the android device is only the blank screen.

vilmar ferreira gomes

vilmar ferreira gomes   ·   5 years ago

Hello, I managed to make android run. I had to change the angle version to 7.0.4 and its dependencies, before the npm install. After that I gave the command cordova platform add android and ionic cordova run android and worked correctly. Thank you. Another question that has arisen, Where is the model file? .pb? I want to do the substitution for a model that I trained but I'm not locating.

GKM

GKM   ·   5 years ago

We are using the model from https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pietro Santoro

Pietro Santoro   ·   6 years ago

Hi, after image upload, I receive an error (see below). How can I correct that? Thanks Pietro Runtime Error: Uncaught (in promise): Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] at Object.assert (http://localhost:8100/build/vendor.js:28405:4811) at http://localhost:8100/build/vendor.js:152774:87 at Array.forEach (<anonymous>) at GraphExecutor.checkInputShapeAndType (http://localhost:8100/build/vendor.js:152768:27) at GraphExecutor.execute (http://localhost:8100/build/vendor.js:152661:14) at FrozenModel.execute (http://localhost:8100/build/vendor.js:149206:36) at http://localhost:8100/build/main.js:171:52 at Object.e.tidy (http://localhost:8100/build/vendor.js:28405:73966) at HomePage.<anonymous> (http://localhost:8100/build/main.js:163:96) at step (http://localhost:8100/build/main.js:86:23) Stack: Error: Uncaught (in promise): Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3] at Object.assert (http://localhost:8100/build/vendor.js:28405:4811) at http://localhost:8100/build/vendor.js:152774:87 at Array.forEach (<anonymous>) at GraphExecutor.checkInputShapeAndType (http://localhost:8100/build/vendor.js:152768:27) at GraphExecutor.execute (http://localhost:8100/build/vendor.js:152661:14) at FrozenModel.execute (http://localhost:8100/build/vendor.js:149206:36) at http://localhost:8100/build/main.js:171:52 at Object.e.tidy (http://localhost:8100/build/vendor.js:28405:73966) at HomePage.<anonymous> (http://localhost:8100/build/main.js:163:96) at step (http://localhost:8100/build/main.js:86:23) at c (http://localhost:8100/build/polyfills.js:3:19752) at new t (http://localhost:8100/build/polyfills.js:3:21532) at webpackJsonp.233.__awaiter (http://localhost:8100/build/main.js:57:12) at HomePage.webpackJsonp.233.HomePage.predict (http://localhost:8100/build/main.js:157:16) at HTMLImageElement._this.image224by224.nativeElement.onload [as __zone_symbol__ON_PROPERTYload] (http://localhost:8100/build/main.js:147:27) at HTMLImageElement.H (http://localhost:8100/build/polyfills.js:3:23950) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.9 Angular Core: 5.2.10 Angular Compiler CLI: 5.2.10 Node: 8.11.1 OS Platform: macOS High Sierra Navigator Platform: MacIntel User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

GKM

GKM   ·   6 years ago

Hi Pietro, Which image extension are you uploading?

Pietro Santoro

Pietro Santoro   ·   6 years ago

I tried with png and jpg. For example with https://i.imgur.com/9PSPH4r.png and https://www.florityfair.it/media/wysiwyg/flority-fair/fiori-a-km-0.jpg.

GKM

GKM   ·   6 years ago

I've tried in my phone and it works fine - I'm away until next Wednesday - I will take a deeper look at it by then.

Pietro Santoro

Pietro Santoro   ·   6 years ago

Does your version work also on phone? When I try to build a prod version (ionic cordova build android --prod --release) or a debug version (ionic cordova run android --device) I always receive the following error and it deploy nothing (I use a Nexus 5X with Android 8.1.0). Please, help me make it work :) ! (node:33695) UnhandledPromiseRejectionWarning: Error: spawn EACCES at _errnoException (util.js:1022:11) at ChildProcess.spawn (internal/child_process.js:323:11) at Object.exports.spawn (child_process.js:502:9) at Object.exports.spawn (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/cordova-common/src/superspawn.js:134:31) at GradleBuilder.runGradleWrapper (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/lib/builders/GradleBuilder.js:78:27) at /Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/lib/builders/GradleBuilder.js:177:21 at _fulfilled (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:854:54) at self.promiseDispatch.done (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:883:30) at Promise.promise.promiseDispatch (/Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:816:13) at /Users/psantoro/Documents/workspace.ionic/AIonic/platforms/android/cordova/node_modules/q/q.js:570:49 (node:33695) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:33695) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Pietro Santoro

Pietro Santoro   ·   6 years ago

News: I tried to entirely "rebuild" the project, after an "ionic start AIonic2 blank", I installed libraries (@tensorflow/tfjs and so on), copied single files (models, imagenet-classes.ts) and modified home.ts and home.html. The error "Error: The shape of dict['input'] provided in model.execute(dict) must be [], but was [1,224,224,3]" remains but now I can deploy on my android device without error.

GKM

GKM   ·   6 years ago

Hi Pietro, I've uploaded a new version 1.0.1 which will fix this issue - thanks for reporting :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marc Lassiter

Marc Lassiter   ·   6 years ago

Can you do face recognition too? Like if a uploaded a picture of a B list celebrity.

GKM

GKM   ·   6 years ago

Hi Marc, No, this is just a vanilla MobileNet model, here is a list of all the things it can classify. https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet/imagenet_classes.js Thanks,

GKM

GKM   ·   6 years ago

But you can still build your own model that recognizes celebrities and replace the one that comes with this start template.

Eric

Eric   ·   6 years ago

Can you please guide me to a tutorial that shows how to train and replace the models ?

eden

eden   ·   6 years ago

work on computer. doesn't work on mobile

GKM

GKM   ·   6 years ago

What error did you get?

eden

eden   ·   6 years ago

no error just loading and not showing the prediction array. at ionic cordova run browser run wonderfull. when install apk on device its eather loading or not showing the predictions.

GKM

GKM   ·   6 years ago

What device model are you using? I will try to replicate this issue tonight.

eden

eden   ·   6 years ago

samsung s7 edge. thank you ive been tryin to fix it forever

GKM

GKM   ·   6 years ago

I've found the problem, I will upload a new release soon with the fix. Thanks for reporting :)

eden

eden   ·   6 years ago

maybe you can share what the problem is. and i will try to fix it also

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this starter yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}