Руководство по JavaScript: отправка и анализ файла с помощью Функций Azure и Хранилища BLOB-объектов

В этом руководстве описано, как отправить образ в Хранилище BLOB-объектов Azure и обработать его с помощью Функции Azure, Компьютерное зрение и Cosmos DB. В рамках этого процесса вы также узнаете, как реализовать триггеры и привязки функции Azure. Вместе эти службы анализируют отправленное изображение, содержащее текст, извлекает из него текст, а затем храните текст в строке базы данных для последующего анализа или других целей.

Хранилище BLOB-объектов Azure — это решение корпорации Майкрософт для хранения масштабируемых объектов в облаке. Хранилище BLOB-объектов предназначено для хранения изображений и документов, потоковой передачи мультимедийных файлов, управления данными резервного копирования и архивирования, а также многого другого. Дополнительные сведения о Хранилище BLOB-объектов см. на странице обзора.

Azure Cosmos DB — это полностью управляемая база данных NoSQL и реляционная база данных для современной разработки приложений.

Функции Azure — это бессерверное компьютерное решение, которое позволяет создавать и запускать небольшие блоки кода в виде функций с высоким уровнем масштабируемости, без сервера, управляемых событиями. Дополнительные сведения о Функциях Azure см. на странице обзора.

Из этого руководства вы узнаете, как:

Необходимые компоненты

• Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно .
• Установленный экземпляр Visual Studio Code.
  • Расширение Функций Azure для развертывания и настройки приложения-функции.
  • Расширение службы хранилища Azure.
  • Расширение "Базы данных Azure"
  • Расширение ресурсов Azure.

Создание учетной записи и контейнера

Первым шагом является создание учетной записи хранения, которая будет содержать отправленные данные больших двоичных объектов, которые в этом сценарии будут изображениями, содержащими текст. Учетная запись хранения предлагает несколько различных служб, но в этом руководстве используется только хранилище BLOB-объектов.

Создание службы "Визуальное распознавание ИИ Azure"

Затем создайте учетную запись службы распознавания искусственного интеллекта Azure, которая будет обрабатывать отправленные файлы. Визуальное распознавание является частью служб ИИ Azure и предлагает различные функции для извлечения данных из изображений. Дополнительные сведения о Azure AI Vision см. на странице обзора.

Создание учетной записи службы Cosmos DB

Создайте учетную запись службы Cosmos DB для хранения анализа файлов. Azure Cosmos DB — это полностью управляемая база данных NoSQL и реляционная база данных для современной разработки приложений. Дополнительные сведения о Cosmos DB и его API-интерфейсах поддержки можно узнать для нескольких различных отраслевых баз данных.

Хотя в этом руководстве указывается API при создании ресурса, привязки функций Azure для Cosmos DB настраиваются одинаково для всех API Cosmos DB.

Скачивание и настройка примера проекта

Код функции Azure, используемой в этом руководстве, можно найти в этом репозитории GitHub в подкаталоге JavaScript-v4 . Вы также можете клонировать проект с помощью приведенной ниже команды.

git clone https://github.com/Azure-Samples/msdocs-storage-bind-function-service.git \
cd msdocs-storage-bind-function-service/javascript-v4 \
code .

Пример проекта выполняет следующие задачи:

• Извлекает переменные среды для подключения к учетной записи хранения, Компьютерное зрение и службе Cosmos DB.
• Принимает отправленный файл в качестве параметра большого двоичного объекта.
• Анализирует большой двоичный объект с помощью службы "Компьютерное зрение".
• Вставка проанализированного текста изображения в виде объекта JSON в Cosmos DB с помощью выходных привязок

После скачивания и открытия проекта нужно уяснить несколько основных понятий.

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

Триггер BLOB-объекта хранилища входных данных

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

// ...preceding code removed for brevity

app.storageBlob('process-blob-image', { 
    path: 'images/{name}',                // Storage container name: images, Blob name: {name}
    connection: 'StorageConnection',      // Storage account connection string
    handler: async (blob, context) => {

// ... function code removed for brevity

• app.storageBlob — триггер ввода BLOB-объектов хранилища используется для привязки функции к событию отправки в хранилище BLOB-объектов. Триггер имеет два обязательных параметра:
  • path: путь, который триггер отслеживает на предмет событий. Путь содержит имя контейнера images и подстановочную переменную для имени большого двоичного объекта. Это имя большого двоичного объекта извлекается из свойства name.
  • {name}: имя отправляемого большого двоичного объекта. blob — имя параметра большого двоичного объекта, передаваемого в функцию. Не меняйте значение blob.
  • connection: строка подключения учетной записи хранения. Значение StorageConnection совпадает с именем в файле при локальной local.settings.json разработке.

Триггер Вывода Cosmos DB

После завершения функции функция использует возвращаемый объект в качестве данных для вставки в Cosmos DB.

// ... function definition object
app.storageBlob('process-blob-image', { 
    
        // removed for brevity    
        
        // Data to insert into Cosmos DB
        const id = uuidv4().toString();
        const analysis = await analyzeImage(blobUrl);
        
        // `type` is the partition key 
        const dataToInsertToDatabase = {
                id,
                type: 'image',
                blobUrl,
                blobSize: blob.length,
                analysis,
                trigger: context.triggerMetadata
            }

        return dataToInsertToDatabase;
    }),

    // Output binding for Cosmos DB
    return: output.cosmosDB({
        connection: 'CosmosDBConnection',
        databaseName:'StorageTutorial',
        containerName:'analysis'
    })
});

Для контейнера в этой статье приведены следующие обязательные свойства:

• id: идентификатор, необходимый для Cosmos DB для создания новой строки.

• /type: ключ секции, указанный в контейнере, был создан.

• output.cosmosDB — триггер вывода Cosmos DB используется для вставки результата функции в Cosmos DB.

  • connection: строка подключения учетной записи хранения. Значение StorageConnection соответствует имени в файле local.settings.json.
  • databaseName: база данных Cosmos DB для подключения.
  • containerName: имя таблицы для записи текстового значения изображения, возвращаемого функцией. Таблица должна существовать.

Код функции Azure

Ниже приведен полный код функции.

const { app, input, output } = require('@azure/functions');
const { v4: uuidv4 } = require('uuid');
const { ApiKeyCredentials } = require('@azure/ms-rest-js');
const { ComputerVisionClient } = require('@azure/cognitiveservices-computervision');
const sleep = require('util').promisify(setTimeout);

const STATUS_SUCCEEDED = "succeeded";
const STATUS_FAILED = "failed"

const imageExtensions = ["jpg", "jpeg", "png", "bmp", "gif", "tiff"];

async function analyzeImage(url) {

    try {

        const computerVision_ResourceKey = process.env.ComputerVisionKey;
        const computerVision_Endpoint = process.env.ComputerVisionEndPoint;

        const computerVisionClient = new ComputerVisionClient(
            new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': computerVision_ResourceKey } }), computerVision_Endpoint);

        const contents = await computerVisionClient.analyzeImage(url, {
            visualFeatures: ['ImageType', 'Categories', 'Tags', 'Description', 'Objects', 'Adult', 'Faces']
        });

        return contents;

    } catch (err) {
        console.log(err);
    }
}
app.storageBlob('process-blob-image', { 
    path: 'images/{name}',
    connection: 'StorageConnection',
    handler: async (blob, context) => {

        context.log(`Storage blob 'process-blob-image' url:${context.triggerMetadata.uri}, size:${blob.length} bytes`);

        const blobUrl = context.triggerMetadata.uri;
        const extension = blobUrl.split('.').pop();

        if(!blobUrl) {
            // url is empty
            return;
        } else if (!extension || !imageExtensions.includes(extension.toLowerCase())){
            // not processing file because it isn't a valid and accepted image extension
            return;
        } else {
            //url is image
            const id = uuidv4().toString();
            const analysis = await analyzeImage(blobUrl);
            
            // `type` is the partition key 
            const dataToInsertToDatabase = {
                    id,
                    type: 'image',
                    blobUrl,
                    blobSize: blob.length,
                    ...analysis,
                    trigger: context.triggerMetadata
                }

            return dataToInsertToDatabase;
        }

        
    },
    return: output.cosmosDB({
        connection: 'CosmosDBConnection',
        databaseName:'StorageTutorial',
        containerName:'analysis'
    })
});

Этот код также извлекает важные значения конфигурации из переменных среды, таких как строка подключения Хранилища BLOB-объектов и ключ Компьютерного зрения. Эти переменные среды добавляются в среду функций Azure после ее развертывания.

Функция по умолчанию также использует второй метод AnalyzeImage. Этот код использует конечную точку URL-адреса и ключ учетной записи Компьютерного зрения для запроса к службе компьютерного зрения на обработку изображения. Запрос возвращает весь текст, обнаруженный на изображении. Этот текст записывается в Cosmos DB с помощью исходящей привязки.

Настройка локальных параметров

Чтобы запустить проект локально, укажите переменные среды в файле ./local.settings.json. Подставьте вместо заполнителей те значения, которые вы сохранили ранее при создании ресурсов Azure.

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

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "",
    "StorageConnection": "STORAGE-CONNECTION-STRING",
    "StorageAccountName": "STORAGE-ACCOUNT-NAME",
    "StorageContainerName": "STORAGE-CONTAINER-NAME",
    "ComputerVisionKey": "COMPUTER-VISION-KEY",
    "ComputerVisionEndPoint":  "COMPUTER-VISION-ENDPOINT",
    "CosmosDBConnection": "COSMOS-DB-CONNECTION-STRING"
  }
}

Создание приложения-функции Azure

Теперь вы готовы развернуть приложение в Azure с помощью расширения Visual Studio Code.

1. В Visual Studio Code нажмите клавиши SHIFT + ALT + A, чтобы открыть Azure Explorer.

2. В разделе Функции найдите и щелкните подписку правой кнопкой мыши и выберите Создать приложение-функцию в Azure (дополнительно).

3. Чтобы создать ресурс функции, используйте таблицу ниже.

   Параметр	Значение
   Имя	Введите msdocsprocessimage или что-то подобное.
   Стек среды выполнения	Выберите версию Node.js LTS.
   Модель программирования	Выберите версию 4.
   ОС	Щелкните Linux.
   Группа ресурсов	Выберите группу ресурсов msdocs-storage-function, созданную ранее.
   Местонахождение	Выберите тот же регион, что указан для группы ресурсов.
   Тип плана	Выберите Потребление.
   Хранилище Azure	Выберите учетную запись хранения, созданную ранее.
   Application Insights	пока пропустить.

4. Azure начнет подготовку запрошенных ресурсов, что займет несколько минут.

Развертывание приложения-функции Azure

1. Когда создание ресурсов будет завершено, щелкните правой кнопкой мыши новый ресурс в разделе Функции Azure Explorer и выберите Развернуть в приложении-функцию.
2. Если появится запрос Действительно развернуть..., выберите Развернуть.
3. По завершении процесса появится уведомление, которое включает параметры отправки. Выберите этот параметр. При этом значения из файла local.settings.json будут скопированы в приложение-функцию Azure. Если уведомление исчезло, прежде чем вы успели выбрать соответствующий параметр, перейдите к следующему разделу.

Добавление параметров приложения для хранилища и компьютерного зрения

Если вы выбрали Параметры отправки в уведомлении, пропустите этот раздел.

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

1. Найдите свой ресурс в разделе Функции Azure Explorer, щелкните правой кнопкой мыши пункт Параметры приложения и выберите Добавить новый параметр.

2. Введите новый параметр приложения для указанных ниже секретов. Скопируйте и вставьте значения секретов из локального проекта в файле local.settings.json.

   Параметр
   StorageConnection
   Имя_учетной_записи_хранения
   StorageContainerName
   ComputerVisionKey
   ComputerVisionEndPoint
   CosmosDBConnection

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

Передача изображения в Хранилище BLOB-объектов

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

1. В Azure Explorer в Visual Studio Code найдите и разверните ресурс хранилища в разделе Служба хранилища.
2. Разверните пункт Контейнеры BLOB-объектов и щелкните правой кнопкой мыши имя контейнера images, а затем выберите Отправить файлы.
3. Вы можете найти несколько примеров изображений в папке изображения в корне примера проекта для скачивания или использовать свои собственные.
4. Для каталога назначения оставьте значение по умолчанию /.
5. Подождите, пока файлы не будут отправлены и не появятся в контейнере.

Просмотр анализа текста изображения

Затем можно убедиться, что отправка активировала функцию Azure, а текст в изображении был проанализирован и сохранен в Cosmos DB должным образом.

1. В Visual Studio Code в Azure Explorer в узле Azure Cosmos DB выберите ресурс и разверните его, чтобы найти базу данных, StorageTutorial.

2. Разверните узел базы данных.

3. Теперь должен быть доступен контейнер анализа . Выберите узел "Документы контейнера", чтобы просмотреть данные внутри. Вы увидите запись для обработанного текста изображения из отправленного файла.

   {
       "id": "3cf7d6f0-a362-421e-9482-3020d7d1e689",
       "type": "image",
       "blobUrl": "https://msdocsstoragefunction.blob.core.windows.net/images/presentation.png",
       "blobSize": 1383614,
       "analysis": {  ... details removed for brevity ...
           "categories": [],
           "adult": {},
           "imageType": {},
           "tags": [],
           "description": {},
           "faces": [],
           "objects": [],
           "requestId": "eead3d60-9905-499c-99c5-23d084d9cac2",
           "metadata": {},
           "modelVersion": "2021-05-01"
       },
       "trigger": { 
           "blobTrigger": "images/presentation.png",
           "uri": "https://msdocsstorageaccount.blob.core.windows.net/images/presentation.png",
           "properties": {
               "lastModified": "2023-07-07T15:32:38+00:00",
               "createdOn": "2023-07-07T15:32:38+00:00",
               "metadata": {},
               ... removed for brevity ...
               "contentLength": 1383614,
               "contentType": "image/png",
               "accessTier": "Hot",
               "accessTierInferred": true,
           },
           "metadata": {},
           "name": "presentation.png"
       },
       "_rid": "YN1FAKcZojEFAAAAAAAAAA==",
       "_self": "dbs/YN1FAA==/colls/YN1FAKcZojE=/docs/YN1FAKcZojEFAAAAAAAAAA==/",
       "_etag": "\"7d00f2d3-0000-0700-0000-64a830210000\"",
       "_attachments": "attachments/",
       "_ts": 1688743969
   }
   

Поздравляем! Вам удалось обработать изображение, которое было отправлено в Хранилище BLOB-объектов с помощью Функций Azure и Компьютерного зрения.

Устранение неполадок

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

Вопросы безопасности

Это решение, как руководство по началу работы, не демонстрирует безопасные методики по умолчанию. Это намеренно позволяет успешно развертывать решение. Следующий шаг после успешного развертывания — обеспечить безопасность ресурсов. В этом решении используются три службы Azure, каждая из которых имеет собственные функции безопасности и рекомендации по настройке по умолчанию:

• Функции Azure - Защита Функции Azure
• служба хранилища Azure - Рекомендации по безопасности для хранилища BLOB-объектов
• Службы Azure Cognitive Services — функции безопасности служб искусственного интеллекта Azure

Пример кода

• пример кода Функции Azure

Очистка ресурсов

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

1. Выберите Группы ресурсов в Azure Explorer.
2. Найдите в списке и щелкните правой кнопкой мыши группу ресурсов msdocs-storage-function.
3. Выберите команду Удалить. На удаление группы ресурсов может потребоваться несколько минут.

Связанный контент

• Создание приложения-функции, которое подключается к службам Azure с помощью удостоверений вместо секретов
• Исправление анонимного общедоступного доступа на чтение для данных BLOB-объектов