Блог посвящен внедрению Google Vision в приложение Android / iOS с использованием платформы Ionic 4. Приложение поддерживает различные функции, включая, помимо прочего, обнаружение объектов, маркировку изображений, распознавание текста, обнаружение лиц с помощью Google Vision API.

Вступление

Ионный каркас

Ionic Framework - это набор инструментов пользовательского интерфейса с открытым исходным кодом для создания эффективных, высококачественных мобильных и настольных приложений с использованием веб-технологий (HTML, CSS и JavaScript). Ionic Framework в основном сосредоточен на интерфейсе пользователя или взаимодействии с пользовательским интерфейсом приложения (элементы управления, взаимодействия, жесты, анимация).

Ionic Framework существует около 5 лет, и за эти 5 лет Ionic Framework стал очень популярен среди разработчиков благодаря простоте использования над Swift / Java. Также в Ionic 4 вы можете сохранить единый исходный код для приложений Android и iOS. Что еще может пожелать разработчик!

Ionic 4 - это последняя версия (на момент написания этого поста) Ionic, которая намного надежнее и надежнее предыдущих версий.

API Google Vision

Google Vision API также известен как Cloud Vision API.

Cloud Vision API позволяет разработчикам легко интегрировать в приложения функции распознавания зрения, включая маркировку изображений, распознавание лиц и ориентиров, оптическое распознавание символов (OCR) и тегирование явного содержимого.

Cloud Vision API предлагает следующие функции, которые можно применить к изображениям:
Обнаружение меток;
Обнаружение текста;
Обнаружение безопасного поиска (явного содержания);
Обнаружение лиц
Обнаружение ориентира
Обнаружение логотипа
Свойства изображения
Подсказки по кадрированию
Обнаружение веб-страниц
Обнаружение текста документа
Локализатор объекта

Для получения дополнительной информации о Google Vision API нажмите ЗДЕСЬ.

Краткая история машинного обучения

Артур Сэмюэл, пионер в области искусственного интеллекта и компьютерных игр, ввел термин «машинное обучение». Он определил машинное обучение как - «Область обучения, которая дает компьютерам возможность учиться, не будучи явно запрограммированной».
Говоря простым языком, машинное обучение (ML) можно объяснить как автоматизацию и улучшение процесса обучения компьютеров на основе их опыта без фактического программирования, то есть без какой-либо помощи человека. Процесс начинается с подачи данных хорошего качества, а затем обучения наших машин (компьютеров) путем построения моделей машинного обучения с использованием данных и различных алгоритмов.

ML - одна из самых впечатляющих технологий, с которыми когда-либо приходилось сталкиваться.

ML против традиционного программирования

  • Традиционное программирование: мы вводим ДАННЫЕ (ввод) + ПРОГРАММА (логика), запускаем их на машине и получаем результат.
  • Машинное обучение: в машинном обучении мы загружаем ДАННЫЕ (т. е. ввод) + вывод, запускаем их на модели машинного обучения во время обучения, и модель машинного обучения создает свою собственную программу (логику ), которые можно оценить при тестировании.

Внедрение Google Vision в Ionic 4

Google Cloud Vision API предлагает надежные предварительно обученные модели машинного обучения с помощью REST и RPC API. Он присваивает изображениям ярлыки и быстро классифицирует их по миллионам предопределенных классов или категорий. Он может обнаруживать объекты и лица, читать напечатанный или рукописный текст и встраивать ценные метаданные в ваш каталог изображений.

Чтобы внедрить Google Vision в свое приложение Ionic 4, вы можете перейти по данной ссылке или выполнить определенные шаги:

  1. Установите Ionic CLI, следуя инструкциям здесь.
  2. Войдите в свою учетную запись Google.
  3. Выберите или создайте Проект Google Cloud Platform.
    Убедитесь, что для вашего проекта Google Cloud Platform включена оплата. Чтобы включить биллинг, следуйте процедуре, описанной в данной ссылке.
    N.B .: Вы не сможете получить ответ от API, пока не включите биллинг.
  4. Чтобы включить Cloud Vision API.
    a. Сначала выберите проект.
    б. После выбора проекта нажмите кнопку Перейти к обзору API.
    c. Нажмите Включить API и службы,
    d. Найдите Cloud Vision API.
    e. Нажмите кнопку включения.
    f. Чтобы использовать этот API, нажмите Создать учетные данные.
    g. Выберите Cloud Vision API из списка.
    h. Нажмите Да, я использую один или оба и продолжайте.
    i. Нажмите кнопку "Готово".
    j. Нажмите Создать учетные данные.
    k. Нажмите Ключ API из вариантов.
    l. Скопируйте появившийся API-ключ и сохраните его в более безопасном месте. Это не должно предаваться огласке.
    m. Нажмите кнопку закрытия.
    Поздравляем, ваш ключ API создан.
  5. Создайте ионный проект, используя следующую команду в командной строке.
$ ionic start IonVision blank

Он просто создаст новый пустой проект Ionic 4 с именем IonVision.

По завершении просто перейдите во вновь созданную папку и установите некоторые из необходимых зависимостей.

$ cd ./IonVision

Установите необходимый плагин камеры, используя следующий код.

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

Приведенный выше код добавит в наш проект плагин камеры Cordova и библиотеку Ionic Native.

Запустите редактор кода и отредактируйте src / app / app.module.ts. Импортируйте Камеру и добавьте ее в массив провайдеров:

import { Camera } from '@ionic-native/camera/ngx';
import { HttpModule } from '@angular/http';
...
providers: [
StatusBar,
SplashScreen,
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]
...

Теперь давайте создадим файл для хранения деталей нашей конфигурации.

$ touch ./src/environment.ts

и добавьте эту конструкцию во вновь созданный файл

export const environment = {};

Теперь создайте сервис GoogleCloudVisionService с помощью Ionic CLI:

$ ionic g service GoogleCloudVisionService

Теперь откройте только что созданный файл (/src/app/google-cloud-vision-service/google-cloud-vision-service.service.ts) и добавьте следующее:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { environment } from '../environment';
@Injectable({
providedIn: 'root'
})
export class GoogleCloudVisionServiceService {
constructor(public http: Http) { }
getLabels(base64Image,feature) {
const body = {
"requests": [
{
"features": [
{
"type": feature.value,
"maxResults": 10
}],
"image": {
"content": base64Image
}}]}
return this.http.post('https://vision.googleapis.com/v1/images:annotate?key=' + environment.googleCloudVisionAPIKey, body);
}}

В этом проекте мы создадим приложение, которое может предоставить возможность выбора любой из функций. Вы можете ознакомиться со всеми доступными функциями.

Ваш редактор кода может жаловаться на нашу ссылку googleCloudVisionAPIKey. Давайте добавим его в наш файл environment.ts, указав ключ API, сгенерированный вами ранее:

googleCloudVisionAPIKey: ""

Теперь у нас есть полностью настроенное приложение, нам нужно просто щелкнуть новую фотографию с помощью камеры, проанализировать ее и показать результат. На домашней странице мы предложим пользователю выбрать функцию, которую нужно применить, и щелкнуть фотографию.

[главная страница фото]

Мы создадим еще одну страницу, чтобы показать изображение и ответы в приложении.

$ ionic generate page showclass

Здесь showclass - это имя страницы.

Теперь в /src/app/home/home.page.ts мы добавим следующий код, чтобы получить изображение, отправить его в google vision и отправить ответ на страницу showclass.

Мы можем получить изображение из двух источников, то есть из Camera и также из Gallary.

Итак, сначала мы создаем метод для камеры.

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { GoogleCloudVisionServiceService } from '../google-cloud-vision-service.service';
import { Router, NavigationExtras } from '@angular/router';
import { LoadingController } from '@ionic/angular';
...
constructor(
...
private camera: Camera,
private vision: GoogleCloudVisionServiceService,
private route : Router,
public loadingController: LoadingController,
){}
async takePhoto() {
const options: CameraOptions = {
quality: 100,
targetHeight: 500,
targetWidth: 500,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
// correctOrientation: true
}
this.camera.getPicture(options).then(async (imageData) => {
const loading = await this.loadingController.create({
message: 'Getting Results...',
translucent: true
});
await loading.present();
this.vision.getLabels(imageData,this.selectedfeature).subscribe(async (result) => {
console.log(result.json())
let navigationExtras: NavigationExtras = {
queryParams: {
special: JSON.stringify(imageData),
result : JSON.stringify(result.json()),
feature : JSON.stringify(this.selectedfeature)
}};
this.route.navigate(["showclass"],navigationExtras)
await loading.dismiss()
}, err => {
console.log(err);
});
}, err => {
console.log(err);
});
}

Здесь мы создали контроллер загрузки, чтобы показать загрузчик во время интервала отправки изображения в Google Vision и отправки ответа.

Теперь давайте создадим метод для Gallary.

async selectPhoto(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}
this.camera.getPicture(options).then(async (imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
const loading = await this.loadingController.create({
message: 'Getting Results...',
translucent: true
});
await loading.present();
this.vision.getLabels(imageData,this.selectedfeature).subscribe(async (result) => {
let navigationExtras: NavigationExtras = {
queryParams: {
special: JSON.stringify(imageData),
result : JSON.stringify(result.json()),
feature : JSON.stringify(this.selectedfeature)
}};
this.route.navigate(["showclass"],navigationExtras)
await loading.dismiss()
}, err => {
console.log(err);
});
}, (err) => {
console.log(err)
})
}

Теперь предложите пользователю выбрать фотографию из галереи или щелкнуть новую фотографию из камеры. Для этого мы создадим контроллер предупреждений для выбора опции камеры или галереи.

import { AlertController } from '@ionic/angular';
...
constructor(
...
public alertController: AlertController){}
...
async presentAlertConfirm() {
const alert = await this.alertController.create({
header: 'Select one option ',
message: 'Take Photo or Select from Galary!!!',
buttons: [
{
text: 'Camera',
role: 'camera',
handler: () => {
this.takePhoto();
}
}, {
text: 'Gallary',
role: 'gallary',
handler: () => {
this.selectPhoto();
}
}
]
});
await alert.present();
}

Теперь мы создали оповещение для выбора камеры или галереи. После этого мы создали отдельную функцию для Галлэрии и Камеры. После получения ответа мы переместили этот ответ на страницу showclass.

Теперь давайте создадим функцию, которая будет устанавливать значения функции с помощью переключателя. Для хранения значения функции мы также объявим переменную класса.

export class HomePage {
selectedfeature:"LABEL_DETECTION"
...
radioGroupChange(event)
{
this.selectedfeature = event.detail;
}
...
}

Теперь нам нужно переключить HTML-страницу, чтобы отредактировать /src/app/home/home.page.html

На данный момент мы завершили создание домашней страницы.

Теперь давайте примем параметры на странице showclass. Для этого мы добавим следующие строки кода в /src/app/showclass/showclass.page.ts.

import { ActivatedRoute, Router } from '@angular/router';
...
constructor(private route: ActivatedRoute, private router: Router) { }

Теперь создайте три переменные класса для хранения значений. Мы распаковываем параметры, полученные с домашней страницы, и сохраняем результат в соответствии с функцией.

image:any
result:any
feature:any
...

ngOnInit() {
this.route.queryParams.subscribe(params => {
if (params && params.special && params.result && params.feature ) {
this.image = JSON.parse(params.special);
this.result = JSON.parse(params.result);
this.feature = JSON.parse(params.feature);
}
switch(this.feature.value){
case "TEXT_DETECTION":{
this.result = this.result.responses[0].textAnnotations
break;
}
case "FACE_DETECTION":{
this.result = this.result.responses
break;
}
case "OBJECT_LOCALIZATION":{
this.result = this.result.responses[0].localizedObjectAnnotations
break;
}
case "LANDMARK_DETECTION":{
this.result = this.result.responses[0].landmarkAnnotations
break;
}
case "LOGO_DETECTION":{
this.result = this.result.responses[0].logoAnnotations
break;
}
case "WEB_DETECTION":{
this.result = this.result.responses[0].webDetection.webEntities
break;
}
case "SAFE_SEARCH_DETECTION":{
this.result = this.result.responses
break;
}
case "IMAGE_PROPERTIES":{
this.result = this.result.responses[0].imagePropertiesAnnotation.dominantColors.colors
break;
}
case "CROP_HINTS":{
this.result = this.result.responses[0].cropHintsAnnotation.cropHints
break;
}
case "DOCUMENT_TEXT_DETECTION":{
this.result = this.result = this.result.responses[0].textAnnotations
break;
}
default:{
this.result = this.result.responses[0].labelAnnotations
}
}
console.log(this.result)
});
}

Теперь мы сохранили наше изображение, название функции и результат. Давайте отобразим ответ с помощью HTML и CSS на странице showclass.

Теперь отредактируйте /src/app/showclass/showclass.page.html

Я уверен, что вам не хватает некоторых изменений пользовательского интерфейса. Для этого мы отредактируем /src/app/showclass/showclass.page.scss

img{
height: 70vh !important;
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: auto !important;
margin-top:10px;
display: block !important;
border: 1px solid #000;
padding: 5px;
border-radius: 4px;
}
.itemSection{
display: flex;
justify-content:center;
align-items: center;
width: 100%;
}
ion-content{
background: #eee;
}

Если вы разработчик, работающий над проектом, и хотите добавить в свой проект Google Vision. Вы можете просто купить Google Vision API Starter в нашем Магазине по минимальной цене. Купив этот стартер, вы сэкономите сотни драгоценных часов разработки для своего проекта Ionic 4. Этот стартер можно использовать в таких приложениях, как приложение Food Detector, приложение Place Finder и т. Д.



Начальное приложение Google Vision (Ionic 4) - Ion Vision
Команда разработчиков Enappd предоставляет бесплатные стартовые программы для новичков и экспертов, которые помогут им начать разработку. Вы можете найти… store.enappd.com



Для видео анализа данных или визуализации данных, проверьте плейлист ниже:



Кишан Шарма
Этот канал показывает страницы в виде прикладного питона. Видео на этом канале не содержат голоса. Это ИИ… www.youtube.com



Ура..!! 👻 Вы почти закончили. Теперь вы успешно внедрили Google Vision в Ionic 4.

Эта статья изначально была размещена на Enappd.