#24: Когнитивные услуги и SWA

Добро пожаловать на Неделю 4, день 3 из #30DaysOfSWA!!!

Мы продолжаем нашу неделю лучших практик, рассматривая еще один вариант интеграции служб Azure Services для вашего развертывания Azure Static Web Apps. Вчера мы говорили о добавлении поиска на ваш сайт с помощью предварительно обученных моделей Azure AI. Сегодня мы обсудим, как вы можете использовать службы Vision AI Services.


Что мы рассмотрим

  • Что такое службы Azure Vision Services
  • Как приступить к созданию приложений ИИ
  • Как использовать JavaScript AI SDKs
  • Как анализировать документ с помощью Form Recognizer
  • Как развернуть API и статическое веб-приложение (SWA).
  • Упражнение Создание и развертывание SWA для анализа изображений

Ресурсы

  • Azure Custom Vision — документация
  • Основы ИИ в Azure: Изучение компьютерного зрения — Учебный модуль
  • SWA Next.js — документация

Об авторе

Айшегюль Йёнет — старший специалист по облачным технологиям в команде JavaScript Advocacy в Microsoft. Она является сопредседателем
@W3C #ImmersiveWeb и экспертом Google Developer по веб-технологиям. Она увлечена WebXR, искусственным интеллектом и пространственными вычислениями — хотите узнать больше? Найдите ее @AysSomething или следите за ней на dev.to.

Yönet

Я увлекаюсь WebXR, искусственным интеллектом и пространственными вычислениями.

Что такое службы Azure Vision?

Azure AI Vision — это часть Azure Cognitive Services — облачных служб ИИ, которые дают вам способности, подобные Терминатору.

Вы можете сделать фотографию и проанализировать ее, чтобы описать изображение, обнаружить объекты, достопримечательности и известных людей или ваших пользователей, прочитать документы и отсканировать информацию на удостоверении личности или визитной карточке. Все эти суперспособности доступны вам — всего лишь вызов API — с помощью служб Cognitive и Applied AI Services в Azure. Давайте узнаем, что можно создать и что можно настроить.


Начните создавать приложения с искусственным интеллектом

Если вы планируете внедрить в свое приложение искусственный интеллект, в первую очередь вам нужно обратить внимание на наши службы прикладного искусственного интеллекта. Услуги прикладного ИИ решают наиболее распространенные задачи и строятся на базе наших когнитивных услуг. Что касается служб, связанных со зрением, у нас есть две службы прикладного ИИ: распознаватель форм и анализатор видео.

Azure Form Recognizer построен с использованием оптического распознавания символов (OCR), текстовой аналитики и пользовательского текста из Azure Cognitive Services и имеет специально обученные модели для таких вещей, как карты прививок, паспорта и налоговая документация. Если вы задаетесь вопросом, зачем вам нужен Form Recognizer, вы можете попробовать реинжиниринг некоторых его функций с помощью Cognitive Services.

Я не желаю этого никому из вас, поэтому вашей первой остановкой должна стать документация Applied AI Services, чтобы узнать, может ли ваша проблема быть решена с помощью какой-либо из этих служб. Если ваша проблема не решена или вам нужна большая гибкость, вы можете строить с помощью Cognitive Services, Computer Vision, Custom Vision или Face APIs.

Отличный способ начать играть с этими API и изучить конкретный случай использования — это предварительный просмотр Vision Studio или предварительный просмотр Form Recognizer Studio. Например, мне было интересно, можно ли распознавать устройства смешанной реальности с помощью компьютерного зрения. Поскольку эти устройства очень новые и пока не являются обычным объектом, они не распознавались нашей универсальной моделью обнаружения объектов. Прежде чем создавать приложение, я смог легко понять, что мне нужно обучить пользовательскую модель. Вы можете проверить и убедиться, что ваш логотип или продукт легко распознается, или начать обучение пользовательской модели в Studio без написания кода, найдя примеры кода прямо в Studio.

Если объект, который вы хотите обнаружить, не распознается, вы можете обучить пользовательскую модель через https://customvision.ai и развернуть ее. Вы получите пользовательскую конечную точку API для вызова, и реализация клиента не будет отличаться от использования любого другого сервиса. Существует несколько лучших практик для обучения пользовательской модели. Самое главное — вам нужны различные изображения в разных контекстах. Например, если вы хотите найти Уолдо, вы не можете просто тренироваться на фотографии профиля Уолдо, вам нужно также использовать его фотографии в толпе.

Вы можете прочитать, как я обучил свою пользовательскую модель и построил прототип No Code здесь, используя Power Apps AI Builder.


Как использовать JavaScript AI SDKs

Использование любого из этих API работает практически одинаково, если вы работаете с изображением, а не с видео для анализа:

  • Войдите в свою учетную запись Azure или зарегистрируйтесь для получения бесплатного кредита в размере 200 долларов.
  • Создайте ресурс службы Azure Cognitive Services или Specific и получите информацию о ключе и конечной точке.
  • Установите JavaScript SDK соответствующей службы и Azure Identity SDK.
  • Сделайте снимок или загрузите изображение.
  • Инициализируйте объект AzureCredentials с помощью ключа ресурса.
  • Инициализируйте объект Client с объектом Azure credentials & endpoint.
  • Используйте метод анализа клиента для вызова API, дождитесь ответа.

Имена классов и методов меняются, например DocumentAnalysisClient для распознавателя форм, PredictionAPIClient для Custom Vision или FaceClient для распознавания лиц. Если вы обучаете пользовательскую модель или используете определенную модель для распознавателя форм, вам придется выполнить несколько действий, но о самой важной части позаботится функциональность нашего SDK.

Как проанализировать документ с помощью Form Recognizer

Давайте посмотрим код в действии для Form Recognizer, используя их новый JavaScript SDK. Вы можете начать с выбранного вами шаблона Static Web Apps или добавить код в существующее приложение.

Нам нужно импортировать объекты SDK и переменные окружения:

import {
    AzureKeyCredential,
    DocumentAnalysisClient,
    DocumentField,
    FormRecognizerApiVersion,
    PrebuiltModels,
} from "@azure/ai-form-recognizer";

const key = process.env.FORM_RECOGNIZER_KEY || "";
const endpoint = process.env.FORM_RECOGNIZER_ENDPOINT || "";
Вход в полноэкранный режим Выйти из полноэкранного режима

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

async function Analyze() {
    const client = new DocumentAnalysisClient(endpoint, new AzureKeyCredential(key));

    const poller = await client.beginAnalyzeDocument("prebuilt-document", formUrl);

    const { keyValuePairs, entities } = await poller.pollUntilDone();

    //Do amazing things with the data.
}
Вход в полноэкранный режим Выход из полноэкранного режима

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


Развертывание вашего приложения в SWA

Если вы используете один из шаблонов SWA, все, что вам нужно сделать, это выложить свой код, чтобы поделиться им со словом.

Если вы не используете шаблон, вы можете использовать Azure Static Web Apps VS Code Extension или SWA CLI для развертывания вашего приложения на ресурсе SWA.

Если у вас много изображений и вы хотите выполнять пакетную обработку или если вы делаете несколько действий с изображением, например, обнаруживаете объекты, читаете текст на изображении и переводите его, вам может понадобиться приложение Azure Functions App. К счастью, создание API для вашего статического веб-приложения является одной из возможностей расширения VSCode.
Посмотрите мой видеоролик с пошаговыми инструкциями по развертыванию SWA с помощью Functions.

Я надеюсь, что вы вдохновились идеей улучшить свои приложения с помощью Azure Applied AI или Cognitive Services. Посмотрите доклад и демонстрацию Build AI, чтобы узнать, что еще можно сделать с помощью ИИ.

Свяжитесь со мной в twitter, если у вас есть вопросы, вы хотите поделиться своими разработками или обсудить свои идеи.


Упражнение

Хотите изучить интеграцию Azure Cognitive Service с вашим Azure Static Web App? Попробуйте пройти один из этих уроков, чтобы получить практический опыт разработки:

  • Создание и развертывание SWA для анализа изображений — создание React-приложения, анализирующего изображение с помощью Azure Cognitive Services (Computer Vision) — развертывание приложения в Azure Static Web Apps.
  • Machine Learning With Custom Vision — пройдите этот семинар, где вы научитесь строить модель для определения пород собак с помощью API Custom Vision, а затем развернете ее в Azure Static Web Apps с бэкендом Azure Functions.

Оцените статью
Procodings.ru
Добавить комментарий