Руководство по JavaScript: загрузка и анализ файла с помощью Функций Azure и хранилища Blob

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

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

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

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

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

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

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

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

Создайте учетную запись службы 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 в контейнер изображений. Функция активируется для любого имени объекта 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 и подстановочную переменную для имени большого двоичного объекта. Это имя BLOB извлекается из свойства name.
  • {name}: имя загруженного большого двоичного объекта. Использование blob означает имя параметра для большого двоичного объекта, передаваемого в функцию. Не меняйте значение blob.
  • connection: строка подключения учетной записи хранения. Значение StorageConnection совпадает с именем в файле при разработке на локальной машине.

После завершения функции функция использует возвращаемый объект в качестве данных для вставки в 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: имя таблицы, в которую записывается текстовое значение изображения, возвращаемое функцией. Таблица должна уже существовать.

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

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'
    })
});

Этот код также извлекает важные значения конфигурации из переменных среды, таких как строка подключения Хранилища блобов и ключ компьютерного зрения. Эти переменные среды добавляются в среду функций 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 с помощью расширения 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 начнет подготовку запрошенных ресурсов, что займет несколько минут.

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

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

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

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

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

   Развернуть таблицу

   Настройка
   StorageConnection
   Имя_учетной_записи_хранения
   ИмяКонтейнераХранилища
   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-данных