Фреймфорк

Работая над приложением, связанным с финансовыми операциями, возникла необходимость распознать и выделить суммы на чеках. Начиная с 13-ой версии в IOS-разработке появился нативный фреймворк Vision, который позволяет распознавать различные объекты на изображениях, без задействования сторонних сервисов.
В данной статье представлен личный опыт разработки приложения, использующего Vision.

Что такое Vision

Из документации Apple: "Vision применяет алгоритмы "компьютерного зрения" для выполнения множества задач с входными изображениями и видео. Фреймворк Vision выполняет распознание лиц, обнаружение текста, распознавание штрих-кодов, регистрацию изображений. Vision также позволяет использовать пользовательские модели CoreML для таких задач, как классификация или обнаружение объектов."
Анализируя документацию Apple, можно предположить, что Vision - это один из этапов подготовки таких продуктов как Apple glasses или шлем смешанной реальности. Забегая вперед, следует подчеркнуть, что данный фреймворк потребляет изрядное количество ресурсов. Обработка статичного изображения может занимать десятки секунд, следовательно, работа с видео в реальном времени будет предельно ресурсоемким процессом, над оптимизацией которого инженерам Apple еще предстоит поработать.
В рамках поставленной задачи, необходимо было решить следующую проблему: распознание блоков текста с помощью Vision.

Разработка

Проект построен на UIKit, который в данной статье детально рассматриваться не будет. Основное внимание уделяется блокам кода, связанным с фреймворком Vision. Приведенные листинги снабжены комментариями, позволяющими разработчикам детальнее понять принцип работы с фреймворком.
В MainViewController, который будет взаимодействовать с фреймворком Vision, нужно объявить две переменные:

//Recognition queuelet textRecognitionWorkQueue = DispatchQueue(label: "TextRecognitionQueue", qos: .userInitiated, attributes: [], autoreleaseFrequency: .workItem)//Request for text recognitionvar textRecognitionRequest: VNRecognizeTextRequest?

1. Очередь для задач Vision не вызывает никаких затруднений у разработчиков. Именно в ней будут выполняться все задачи фреймворка.

2. Объявляется переменная типа VNRecognizeTextRequet. Инициализируется объект из ViewDidLoad (или из init), так как он должен быть активен на протяжении всей жизни ViewController. Этот объект отвечает за работу с Vision, поэтому необходимо разобрать его инициализацию подробнее:

//Set textRecognitionRequest from ViewDidLoadfunc setTextRequest() {    textRecognitionRequest = VNRecognizeTextRequest { request, error in        guard let observations = request.results as? [VNRecognizedTextObservation] else {            return        }        var detectedText = ""        self.textBlocks.removeAll()                    for observation in observations {            guard let topCandidate = observation.topCandidates(1).first else { continue }            detectedText += "\(topCandidate.string)\n"                        //Text block specific for this project            if let recognizedBlock = self.getRecognizedDoubleBlock(topCandidate: topCandidate.string, observationBox: observation.boundingBox) {                self.textBlocks.append(recognizedBlock)            }        }                    DispatchQueue.main.async {            self.textView.text = detectedText            self.removeLoader()            self.drawRecognizedBlocks()        }    }            //Individual recognition request settings    textRecognitionRequest!.minimumTextHeight = 0.011 // Lower = better quality    textRecognitionRequest!.recognitionLevel = .accurate}

Настройки объекта textRecognitionRequest. Описание всех доступных настроек можно найти в документации. Наиболее важным является параметр minimumTextHeight. Именно этот параметр отвечает за сочетание быстродействия и точности распознания текста. Для каждого проекта необходимо найти индивидуальное значение данного параметра, оно зависит от того, какие данные будет обрабатывать приложение.
Так как основной поставленной задачей являлось считывание текста с квитанций, для вычисления значения параметра minimumTextHeight в приложение были добавлены различные типы квитанций в различном состоянии (в том числе и основательно помятые). В результате тестирования было определено значение равное 0.011. В случае распознания текста с квитанций, это значение лучшим образом сочетает в себе быстродействие и точность. Однако нужно отметить, что текст с одного изображения распознается в среднем за пять секунд. Подобной скорости недостаточно для обработки информации в реальном времени и ее следует значительно оптимизировать инженерам Apple.
На основе представленного кода можно сделать вывод, что после операции распознания, объект типа VNRecognizeTextRequet получает блоки текста. Именно с ними и ведется дальнейшая работа, в зависимости от функций приложения. В рассматриваемом примере, каждый распознанный фрагмент текста был внесен в текстовое поле. Так как особенностью задействованного приложения является выделение суммы на квитанции, следовательно, сохранялись только блоки текста, которые можно преобразовать в тип Double. Помимо распознанного текстового значения сохраняются и координаты блока текста на изображении.
Представленный ниже метод отвечает за запуск работы запроса на распознание:

//Call text recognition request handlerfunc recognizeImage(cgImage: CGImage) {    textRecognitionWorkQueue.async {        let requestHandler = VNImageRequestHandler(cgImage: cgImage, options: [:])        do {            try requestHandler.perform([self.textRecognitionRequest!])        } catch {            DispatchQueue.main.async {                self.removeLoader()                print(error)            }        }    }}

В метод передается объект CGImage, в котором необходимо распознать текст. Вся работа по распознанию ведется в созданной для этого очереди. Создается объект VNImageRequestHandler, в который передается распознаваемый объект CGImage. В блоке do/try/catch запускается работа инициализированного объекта типа VNRecognizeTextRequet.
Описанные выше функции отвечают за распознание текста в приложении. Однако стоит еще остановится на методах, связанных с выделением нужных блоков текста.

func drawRecognizedBlocks() {    guard let image = invoiceImage?.image else  { return }        //transform from documentation    let imageTransform = CGAffineTransform.identity.scaledBy(x: 1, y: -1).translatedBy(x: 0, y: -image.size.height).scaledBy(x: image.size.width, y: image.size.height)            //drawing rects on cgimage    UIGraphicsBeginImageContextWithOptions(image.size, false, 1.0)    let context = UIGraphicsGetCurrentContext()!    image.draw(in: CGRect(origin: .zero, size: image.size))    context.setStrokeColor(CGColor(srgbRed: 1, green: 0, blue: 0, alpha: 1))    context.setLineWidth(4)        for index in 0 ..< textBlocks.count {        let optimizedRect = textBlocks[index].recognizedRect.applying(imageTransform)        context.addRect(optimizedRect)        textBlocks[index].imageRect = optimizedRect    }    context.strokePath()            let result = UIGraphicsGetImageFromCurrentImageContext()    UIGraphicsEndImageContext()    invoiceImage?.image = result}

В данной статье рисование на изображении не рассматривается, так как при работе с разделом рисование у разработчиков не возникает никаких трудностей. При этом, стоит обратить внимание на особенности работы с координатами распознанных блоков текста. Для сохранения необходимых данных была использована следующая структура:

struct RecognizedTextBlock {    let doubleValue: Double    let recognizedRect: CGRect    var imageRect: CGRect = .zero}

При распознании блоков текста фреймворк Vision вычисляет ряд важных параметров в объекте VNRecognizedTextObservation. Для нужд рассматриваемого проекта необходимо было получить только значение типа Double и его координаты на изображении, сохраняемые в константе recognizedRect.
Для выделения блока текста на изображении, следует применить трансформацию к координатам из константы recognizedRect. Полученные координаты так же сохраняются в объекте RecognizedTextBlock в переменной imageRect, необходимой для обработки нажатий на выделенные блоки текста.
После сохранения точных координат выделяемых блоков на изображении, обработку нажатий на выделенные области можно осуществить несколькими способами:

• Добавить необходимое количество невидимых кнопок на изображение, при помощи трансформации сохраненного объекта imageRect;

• При каждом нажатии на изображение проверять массив блоков текста и искать совпадение координат нажатия с сохраненным объектом imageRect и др.

Чтобы не перегружать ViewController дополнительными элементами, был использован второй способ.

//UIImageView tap listener@objc func onImageViewTap(sender: UITapGestureRecognizer) {    guard let invoiceImage = invoiceImage, let image = invoiceImage.image else {        return    }            //get tap coordinates on image    let tapX = sender.location(in: invoiceImage).x    let tapY = sender.location(in: invoiceImage).y    let xRatio = image.size.width / invoiceImage.bounds.width    let yRatio = image.size.height / invoiceImage.bounds.height    let imageXPoint = tapX * xRatio    let imageYPoint = tapY * yRatio    //detecting if one of text blocks tapped    for block in textBlocks {        if block.imageRect.contains(CGPoint(x: imageXPoint, y: imageYPoint)) {            showTapAlert(doubleValue: block.doubleValue)            break        }    }}

Использование представленного метода позволяет вычислить координаты нажатия на объект ImageView с сохранением его пропорций и поиска полученных координат в массиве сохранных распознанных блоков текста.

Выводы

Представленная статья позволяет разработчикам IOS-приложений ознакомиться с фреймворком Vision, прежде всего с его функцией распознания текста. Тестовое приложение, полученное в результате работы с распознанием текста в Vision, является ключом к пониманию работы с такими возможностями фреймворка как распознание лиц, текста, штрих-кодов и др.
Cкриншоты полученного приложения для распознавания цифровых значений на различных изображениях представлены ниже:

Для ознакомления проект можно скачать из репозитория.

Где-то около 8 лет назад мне потребовалось определиться с PHP фреймворком для реализации одного проекта. Из фреймворков я знал только понаслышке zend, и ModX Revo с Bitrix. Последние-то и фреймворком трудно было назвать - это были полноценные CMS, которых на тот момент было огромное множество, и они были на пике популярности. В то время не искали разработчиков Laravel или Symfony, тогда нужны были администраторы/модераторы/разработчики Bitrix, Drupal и т.д.

И я принял тогда решение писать свой фреймворк с "0". Задача стояла простая - нужна была работа с БД и RESTful API интерфейс.

Итак - начинаем собирать двухколесный.

"Ленивому и в будни праздник"

БД

Началось, что я немного ленив и писать SQL запросы напрямую к БД мне не хотелось совсем, тем более что я "наглотался" этого в предыдущих проектах.

Это привело меня к поиску чего-то готового, и я наткнулся на тогда еще молодой фреймворк Medoo.in, и это оказалось открытием 1. Немного "доработав" фреймворк, проблема с БД была решена.

Приступаем к RESTful API интерфейсу

Что это такое? - Это просто запросы GET, POST, PUT, DELETE от клиента к серверу. Как бы не пытались вложить в это слово "REST" огромный смысл.

С REST'ом были тоже различные мелкие фреймворки которые пытались мне помочь, но меня всё не устраивало. Какие-то роуты, какие-то адресации в общем - трудно, и в другой бы ситуации может быть и помогло но не в этой.

Благо у меня был опыт работы с MODX и тогда мне очень заинтересовал их подход к реализации friendly(дружественных) наименований страниц, отвечал за него небольшой файлик (.htaccess) для Apache. Коротко, со следующим содержанием:

RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ /index.php?q=$1 [L,QSA]

Коротко о том, что здесь написано:
Если вы обращаетесь к серверу и на сервере нет такого файла или папки, запрос переадресуется в файл index.php и уже там сами разбирайтесь, что от вас хотел пользователь, при этом никаких 4хх ошибок не будет, ну если вы сами не захотите их сделать.

И запрос http://мойдомен.ру/я/хочу/что-то/необычное будет автоматически отредиректен сюда http://мойдомен.ру/index.php?q=я/хочу/что-то/необычное

И это полностью решало вопрос редиректа! Но не решало вопроса Роутинга, приступим.

Роутим!!!

С роутами мне показалось слишком сложной реализация в предыдущих фреймворках, и любому программисту должно быть сразу понятно куда "бежать", взглянув только на строку запроса, не ища её описания в огромных списках, а то и хуже в phpdocs.

В общем - роутинг банален, первое значение роута - это всегда класс для обработки, 2-е значение - это public функция. И не к чему какие-то сложности. Для исключения я придумал функцию Init в которую передаются все параметры о роуте.

Как к вам обращаются через GET, POST, и т.д. можно всегда узнать из $SERVER["METHOD"], если не унаследовались от нужного класса.

Так обращение к http://domen.com/users/list/10/30 переадресует пользователя в класс users.controller.php функция public function list($params) {}

По-моему, ничего прозрачнее придумать уже невозможно.

Собственно на этом можно было бы и остановиться, и так и было. Всё было сделано по канонам MVC - модель/выдача/контроллер - построена, но без View.

5 лет, система работала как часы, 250 тыс. REST запросов в сутки, независимо от версии php, от нахождения сервера, сервер не нагружался в пики и до 15% на самом слабом железе - всё работало!

Вот ссылка

Пока не захотелось в случае ошибки открывать на сервере страничку с описанием ошибки, а может быть и хелп какой...

А для этого я его не проектировал...

"Всякому овощу свое время"

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

И тут видимо я сам стал на себя не похож и решил, что я отлично сгожусь в роли революционера, и быстро сделаю класс для рендеринга, или как говорят "отличники" VIEW часть фреймворка.

В общем не вдаваясь в подробности существующий тогда TWIG - разбил все мои начинания в пыль! Я реализовал почти аналогию TWIGа и когда увидел его, мне потребовалось не мало мужества принять, то, что данный инструмент - в 100 раз "гибче", "удобнее", и т.д, моего.

С точки зрения ядра мне оставалось всего лишь определять что возвращает мне класс, и если он возвращал мне объект(object), то я не задумываясь, и по всем принципам SOLID (сейчас слюна у отличников потекла) отправлял его рендерить и выводить на экран!

Вот ссылка с твигом

Юхуууу! Где мой пина-колада, я отдыхать!
...
Почти
...
Как подкралось не пойми от куда, и кто его придумал - ТЕСТИРОВАНИЕ!!!

"Бага с возу - релизу легче"

Тут я даже не стал долго думать. Есть отличные инструменты по типу CODECEPTION.
Добавил через Composer - поднастроил - пользуйся! Фреймворк позволяет подключать вендорные(vendors) модули.

Если кто-то поможет настроить SILENIUM на CODECEPTION - буду рад, у меня пока не получилось.

И ссылка с Codeception

Теперь точно пошел пить свой "Куба-Либре"!

В следующий раз расскажу и сравню одно и тоже задание на 4-х популярных фреймворках - это Laravel, Symfony, Yii2 и Phalcon, попробую рассказать о их "+" и "-" на простом примере с какими проблемами я сам столкнулся и как их решил.

Спасибо, не унывайте!