How to Call Google API Detect Label with Ext JS and Sencha Architect
No matter how you look at it, Detect Labels is one of the most awesome Google APIs out there. It is the gateway to a full array of information that can be added to any picture. With it, you can read tags for almost everything you see in a given image, from its location to the products and activities you see within. Is there an animal in the image? If the answer is yes, you can even tag the species. Needless to say, there is endless potential in the Detect Label API. That’s why today we are going to create a project using Detect Labels to scan images in Sencha Architect. Starting with Sencha Architect Before you start, you are going to need to configure and open Sencha Architect on your machine. If it asks for them, install and update Sencha CMD and the Ext JS SDK as well. Creating a project Once everything is current, you can start by clicking on New Project on the Sencha Architect main screen: You will see a number of project options, for our purposes we will start with the Blank Project template. Select it and click on Create: This creates a new blank project ready for you to start selecting and dragging things into. Creating and configuring the view The first thing you want to do is select and drag a Form Panel from the right-side tool box. Drag it into your project and give it a title in the configurations panel on the bottom right of the Sencha Architect window. Let’s name it Detect Labels: Next, you will want to add a toolbar with a button at the bottom of the form. Call the button Run. We can assign the button an action later. Now it gets interesting, let’s add some fields that we will use to dynamically change our request parameters. You can rename them as you go by double-clicking on the name field. Add fields for API URL, API Key, Max. Results, Image URL, and Response. Now, let’s transform the Max. Results field to a Number field and disable the decimal flag because there will be an integer value for it. Configuring the View Model Now that you have created your view, it is time to work on the View Model. Here we connect the fields with values from the model using bind. To do this go to the tree files on the left panel, and select MyFormViewModel. Next, in the configuration panel, find config data and click on its value. This will change it in the code. This will also open the Architect code editor. To define the data for the view model we will enter our URL and parameters to call the Detect Labels API using an Ext Ajax request. As an example, we will use the image used on the API blog post. Don’t forget to change your Google API Key key as well! data: { apiUrl: ‘https://vision.googleapis.com/v1/images:annotate’, apiKey: ‘yourGoogleApiKey’, imageUri: ‘gs://cloud-samples-data/vision/label/setagaya.jpeg’, maxResults: 5, response: null } Binding the fields Once you are done, it is time to connect the data to our fields. To do this, head back to your form view on the Editor tab, select each field, and find the value property on the configurations panel. Make sure the option View Model Binding is […]
