How Can Computer Vision Help You Stay Ahead Of The Competition?
Who loves AI algorithms? The Read service is an API that identifies any visible text, printed and handwritten on images or PDF files. The API returns the words on results with confidence percentual of that text found on the image/PDF. Using it, you can extract any texts from images/PDF even if someone wrote by hand. If is there any word, it can identify. Now let’s create our Javascript Ext JS application using best practices and applying this awesome API to scan images to extract texts from it. Incorporating computer vision into your Javascript applications like this can really help you stay ahead of the competition. Let’s get started! Prerequisites Before you start, there are some prerequisites to follow to access the API. You can follow the steps here to create a Computer Vision resource on Microsoft Azure to get your keys to access the API. Starting with Sencha CMD If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed make sure it was installed and configured properly, running this command on terminal/shell: If it returns 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. Creating the application The first thing you want to do is create your project structure and Sencha CMD can do it for you easily, just by running this command: sencha -sdk /Users/fabio/sencha-sdks/ext-7.3.1/ generate app modern ReadTextImage ./read-text-image-extjs /Users/fabio/sencha-sdks/ext-7.3.1/ is where your Ext JS SDK folder is. ReadTextImage is the name of our application that will be our namespace for our classes. ./read-text-image-extjs is the path where it will create our project structure with the needed files. modern is the toolkit selected for our application. Make sure when you run this command there is no error on the output. If everything was running correctly, it created your project structure. Let’s run our application with the initial structure. First navigate to your project folder: $ cd read-text-image-extjs/ Then, run the command that will up the server on a specific port: The output of this command will show you the URL where your app will be available. For our case, it is available on http://localhost:1841/. Open it on your browser and you will see a screen like this: Cleaning up Once we have our basic project running, we can remove from it the files and components that will not use. You can delete these files with the command bellow (open other terminal and keep sencha app running because it will update the application automatically): $ rm app/model/* app/store/* app/view/main/List.* Now let’s clean up our classes that are on app/view/main. Make sure your three classes are 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(‘ReadTextImage.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(‘ReadTextImage.view.main.MainController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.main’ }); MainModel.js: /** * This class is the view […]
