你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：识别照片中的 Azure 服务徽标

项目
09/03/2024

在本教程中，你将了解在大型方案中使用自定义视觉的示例应用。 AI Visual Provision 应用（一款适用于移动平台的 Xamarin.Forms 应用程序）将分析 Azure 服务徽标的照片，然后将这些服务部署到用户的 Azure 帐户。你将在本文中了解如何配合其他组件使用自定义视觉来提供有用的端到端应用程序。可以自行运行整个应用方案，也可以只完成设置的自定义视觉部分，并探索应用如何使用它。

本教程演示如何：

创建自定义对象检测器用于识别 Azure 服务徽标。
将应用连接到 Azure AI 视觉和自定义视觉。
创建一个 Azure 服务主体帐户以从应用部署 Azure 服务。

如果没有 Azure 订阅，请在开始之前创建一个免费帐户。

先决条件

Visual Studio 2017 或更高版本
适用于 Visual Studio 的 Xamarin 工作负荷（请参阅安装 Xamarin）
适用于 Visual Studio 的 iOS 或 Android 仿真器

注意

你将需要 macOS 设备来运行 iOS 仿真器。
（可选）Azure CLI

获取源代码

如果要使用提供的 Web 应用，请从 GitHub 上的 AI Visual Provision 存储库克隆或下载该应用的源代码。在 Visual Studio 中打开 Source/VisualProvision.sln 文件。稍后，你可以编辑其中一些项目文件，以便自己运行该应用。

创建对象检测器

登录到自定义视觉 Web 门户并创建新项目。指定对象检测项目，并使用“徽标”域；这可以让服务使用针对徽标检测进行优化的算法。

上传和标记图像

接下来，通过上传 Azure 服务徽标图像并手动标记这些图像来训练徽标检测算法。 AIVisualProvision 存储库包含一组可用的训练图像。在网站上，选择“训练图像”选项卡上的“添加图像”按钮。然后转到存储库的 Documents/Images/Training_DataSet 文件夹。需要手动标记每个图像中的徽标，因此，如果只是测试此项目，则可能只要上传一部分图像。上传计划使用的每个标记的至少 15 个实例。

上传训练图像之后，选择屏幕上的第一个图像。此时会出现标记窗口。针对每个图像中的每个徽标绘制方框并分配标记。

应用配置为使用特定标记字符串。你会在 Source\VisualProvision\Services\Recognition\RecognitionService.cs 文件中找到定义：

private const string TAG_ACTIVE_DIRECTORY = "ACTIVE_DIRECTORY";
private const string TAG_APP_SERVICE = "APP_SERVICE";
private const string TAG_NOTIFICATION_HUBS = "NOTIFICATION_HUBS";
private const string TAG_MOBILE_APPS = "MOBILE_APPS";
private const string TAG_AZURE_SEARCH = "AZURE_SEARCH";
private const string TAG_AZURE_CDN = "CDN";
private const string TAG_AZURE_MACHINE_LEARNING = "MACHINE_LEARNING";
private const string TAG_AZURE_STORAGE = "STORAGE";
private const string TAG_IOT_EDGE = "IOT_EDGE";
private const string TAG_COSMOS_DB = "COSMOS_DB";
private const string TAG_COGNITIVE_SERVICES = "COGNITIVE_SERVICES";
private const string TAG_SQL_DATABASE = "SQL_DATABASE";
private const string TAG_MYSQL_CLEARDB_DATABASE = "MYSQL_CLEARDB_DATABASE";
private const string TAG_REDIS_CACHE = "REDIS_CACHE";
private const string TAG_APP_INSIGHTS = "APPLICATION_INSIGHTS";
private const string TAG_AZURE_FUNCTIONS = "AZURE_FUNCTIONS";

标记图像之后，转到右侧以标记下一个图像。完成后，关闭标记窗口。

训练对象检测器

在左窗格中，将“标记”开关设置为“已标记”以显示图像。然后选择页面顶部的绿色按钮以训练模型。该算法将训练识别新图像中的相同标记。它还会基于现有的某些图像测试模型，以生成准确度评分。

获取预测 URL

训练模型之后，可将其集成到应用中。需要获取终结点 URL（应用将要查询的模型地址）和预测密钥（向应用授予预测请求的访问权限）。在“性能”选项卡中，选择页面顶部的“预测 URL”按钮。

将终结点 URL 和 Prediction-Key 值复制到 Source\VisualProvision\AppSettings.cs 文件中的相应字段：

// Custom Vision
public const string CustomVisionPredictionUrl = "INSERT YOUR COMPUTER VISION API URL HERE FOR MAGNETS RECOGNITION";
public const string CustomVisionPredictionKey = "INSERT YOUR COMPUTER VISION PREDICTION KEY HERE FOR MAGNETS RECOGNITION";

了解自定义视觉的用法

打开 Source/VisualProvision/Services/Recognition/CustomVisionService.cs 文件，以查看应用如何使用自定义视觉密钥和终结点 URL。 PredictImageContentsAsync 方法采用图像文件的字节流以及取消标记（用于异步任务管理），调用自定义视觉预测 API，然后返回预测结果。

public async Task<PredictionResult> PredictImageContentsAsync(Stream imageStream, CancellationToken cancellationToken)
{
    var client = new HttpClient();
    client.DefaultRequestHeaders.Add("Prediction-key", AppSettings.CustomVisionPredictionKey);

    byte[] imageData = StreamToByteArray(imageStream);

    HttpResponseMessage response;
    using (var content = new ByteArrayContent(imageData))
    {
        content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        response = await client.PostAsync(AppSettings.CustomVisionPredictionUrl, content);
    }

    var resultJson = await response.Content.ReadAsStringAsync();
    return JsonConvert.DeserializeObject<PredictionResult>(resultJson);
}

此结果采用 PredictionResult 实例的格式，该实例本身包含预测实例的列表。预测包含检测到的标记及其边框在图像中的位置。

public class Prediction
{
    public double Probability { get; set; }

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

若要了解有关应用如何处理此数据的详细信息，请从 GetResourcesAsync 方法开始。此方法在 Source/VisualProvision/Services/Recognition/RecognitionService.cs 文件中定义。

添加文本识别

本教程的自定义视觉部分已完成。如果要运行应用，还需要集成 Azure AI 视觉服务。应用使用 Azure AI 视觉光学字符识别功能对徽标检测过程进行补充。 Azure 徽标可以通过其外观或其附近打印的文本进行识别。与自定义视觉模型不同，Azure AI 视觉经过预先训练，可针对图像或视频执行特定的操作。

订阅 Azure AI 视觉服务即可获取密钥和终结点 URL。有关此步骤的帮助信息，请参阅“创建 Azure AI 服务资源”。

接下来，打开 Source\VisualProvision\AppSettings.cs 文件，并使用正确的值填充 ComputerVisionEndpoint 和 ComputerVisionKey 变量。

// Computer Vision
public const string ComputerVisionEndpoint = "INSERT COMPUTER VISION ENDPOINT HERE FOR HANDWRITING";
public const string ComputerVisionKey = "INSERT YOUR COMPUTER VISION KEY HERE FOR HANDWRITING";

创建服务主体

应用需要通过一个 Azure 服务主体帐户将检测到的 Azure 服务部署到 Azure 订阅。可以使用 Azure 基于角色的访问控制通过服务主体向应用委托特定的权限。若要了解详细信息，请参阅服务主体指南。

可以使用 Azure Cloud Shell 或 Azure CLI 创建服务主体（如下所示）。若要开始，请登录并选择要使用的订阅。

az login
az account list
az account set --subscription "<subscription name or subscription id>"

然后创建服务主体。（此过程可能需要一些时间才能完成。）

az ad sp create-for-rbac --name <servicePrincipalName> --role Contributor --scopes /subscriptions/<subscription_id> --password <yourSPStrongPassword>

成功完成后，应会看到以下包括所需凭据的 JSON 输出。

{
  "clientId": "(...)",
  "clientSecret": "(...)",
  "subscriptionId": "(...)",
  "tenantId": "(...)",
  ...
}

记下 clientId 和 tenantId 值。将其添加到 Source\VisualProvision\AppSettings.cs 文件中的相应字段。

/* 
 * Service principal
 *
 * Note: This settings will only be used in Debug mode to avoid developer having to enter
 * ClientId and TenantId keys each time application is deployed.
 * In Release mode, all credentials will be introduced using UI input fields.
 */
public const string ClientId = "INSERT YOUR CLIENTID HERE";
public const string TenantId = "INSERT YOUR TENANTID HERE";

运行应用

现在，你已向应用授予以下对象的访问权限：

训练的自定义视觉模型
Azure AI 视觉服务
服务主体帐户

遵循以下步骤运行应用：

在 Visual Studio 解决方案资源管理器中，选择 VisualProvision.Android 项目或 VisualProvision.iOS 项目。从主工具栏上的下拉菜单中选择对应的仿真器或连接的移动设备。然后运行应用。
在第一个屏幕中，输入服务主体客户端 ID、租户 ID 和密码。选择“登录”按钮。
注意

在某些仿真器上，执行此步骤时，“登录”按钮可能未激活。如果发生这种情况，请停止应用，打开 Source/VisualProvision/Pages/LoginPage.xaml 文件，找到标有 LOGIN BUTTON 的 Button 元素，删除以下行，然后再次运行应用。
```
IsEnabled="{Binding IsValid}"
```
在下一个屏幕上，从下拉菜单中选择 Azure 订阅。（此菜单应包含所有服务主体有权访问的所有订阅。）选择“继续”按钮。此时，应用可能会提示你向设备授予对相机和照片存储的访问权限。授予访问权限。
设备上的相机将会激活。拍摄所训练的某个 Azure 服务徽标的照片。部署窗口应会提示你选择新服务的区域和资源组（就像从 Azure 门户部署时一样）。