Identify Objects And Faces With Machine Learning AI And Javascript
Here we go with one more post about the power of Artificial Intelligence (AI) and Machine Learning (ML) using object and facial recognition! Today we are going to implement a really awesome application that can Identify objects and faces through your webcam. The application will teach the machine to save aspects of an object or face to and then tell you what or who it sees on camera. That’s incredible! We will be working based on this Google lab post using TensorFlow.js. and, of course, applying Ext JS best practice as usual. How can I get Getting Started with Sencha CMD? If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed you can make sure you have it properly installed and configured by running this command on terminal/shell: If it returns the sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. How can I create the Sencha application? The first thing you want to do is create your project structure. Sencha CMD can do this for you easily–all you need to do is run this command. If you have any questions, take a look at the bullet points below. They explain what everything in the command does and what you will need to change to personalize your application. sencha -sdk /Users/fabio/sencha-sdks/ext-7.4.0/ generate app modern TeachableMachine ./teachable-machine-extjs /Users/fabio/sencha-sdks/ext-7.4.0/ is where your Ext JS folder is. TeachableMachine is the name of our application and the namespace for our classes. ./teachable-machine-extjs is the path for our project structure and the necessary files. modern is the toolkit for our application. Make sure when you run this command there is no error on the output. If there is no error, and everything runs correctly, you have successfully created your project structure. To be sure, however, let’s run our application with the initial structure. To do this, first navigate to your project folder: $ cd teachable-machine-extjs/ Then, run the command to open the server on a specific port: The output of this command will return the URL where your app is available. In this case, it is running on http://localhost:1841/. When you open it on your browser you will see a screen like this: How can I clean up the Sencha project? Once you have your basic project running, you can clean it up by removing the files and components that you don’t need. Use the command shown below to delete your unwanted files. While deleting, keep another terminal open and have the Sencha app running because it will update the application automatically: $ rm app/model/* app/store/* app/view/main/List.* With that done, let’s clean up our classes in app/view/main. Make sure your three classes look like this: Main.js: /** * This class is the main view for the application. It is specified in app.js as the * “mainView” property. That setting causes an instance of this class to be created and * added to the Viewport container. */ Ext.define(‘TeachableMachine.view.main.Main’, { extend: ‘Ext.Panel’, xtype: ‘app-main’, controller: ‘main’, viewModel: ‘main’ }); MainController.js: /** * This class is the controller for the main view for the application. It is specified as * the “controller” of the Main view class. */ Ext.define(‘TeachableMachine.view.main.MainController’, { extend: […]
