Uso de servicios conectados en Visual Studio para conectarse a Computer Vision APIUse Connected Services in Visual Studio to connect to the Computer Vision API

En este artículo y sus artículos complementarios se proporcionan detalles sobre el uso de la característica Servicio conectado de Visual Studio para Computer Vision API de Cognitive Services.This article and its companion articles provide details for using the Visual Studio Connected Service feature for Cognitive Services Computer Vision API. La funcionalidad está disponible en Visual Studio 2017 15.7 o posterior, con la extensión Cognitive Services instalada.The capability is available in both Visual Studio 2017 15.7 or later, with the Cognitive Services extension installed.

Requisitos previosPrerequisites

  • Una suscripción de Azure.An Azure subscription. Si no tiene, puede registrarse para obtener una cuenta gratuita.If you do not have one, you can sign up for a free account.
  • Visual Studio 2017, versión 15.7 o posterior, con la carga de trabajo Desarrollo web instalada.Visual Studio 2017 version 15.7 or later with the Web Development workload installed. Descárguelo ahora.Download it now.

Instalar la extensión de Cognitive Services VSIXInstall the Cognitive Services VSIX Extension

  1. Después de abrir el proyecto web en Visual Studio, elija la pestaña Servicios conectados. La pestaña está disponible en la página principal que aparece al abrir un nuevo proyecto.With your web project open in Visual Studio, choose the Connected Services tab. The tab is available on the welcome page that appears when you open a new project. Si no ve la pestaña, seleccione Servicios conectados en el proyecto en el Explorador de soluciones.If you don't see the tab, select Connected Services in your project in Solution Explorer.

    Captura de pantalla de la pestaña Servicios conectados

  2. Desplácese hasta la parte inferior de la lista de servicios y seleccione Find more services (Buscar más servicios).Scroll down to the bottom of the list of services, and select Find more services.

    Captura de pantalla del vínculo Find more services (Buscar más servicios)

    Aparecerá el cuadro de diálogo Extensiones y actualizaciones.The Extensions and Updates dialog box appears.

  3. En el cuadro de diálogo Extensiones y actualizaciones, busque Cognitive Services y, luego, descargue e instale el paquete Cognitive Services VSIX.In the Extensions and Updates dialog box, search for Cognitive Services, and then download and install the Cognitive Services VSIX package.

    Captura de pantalla del cuadro de diálogo Extensiones y actualizaciones

    La instalación de una extensión requiere un reinicio del entorno de desarrollo integrado (IDE).Installing an extension requires a restart of the integrated development environment (IDE).

  4. Reinicie Visual Studio.Restart Visual Studio. La extensión se instala cuando cierra Visual Studio y está disponible la próxima vez que inicia el IDE.The extension installs when you close Visual Studio, and is available next time you launch the IDE.

Adición de compatibilidad al proyecto para Computer Vision API de Cognitive ServicesAdd support to your project for Cognitive Services Computer Vision API

  1. Cree un proyecto web ASP.NET Core.Create a new ASP.NET Core web project. Use la plantilla de proyecto Vacío.Use the Empty project template.

  2. En el Explorador de soluciones, elija Agregar > Servicio conectado.In Solution Explorer, choose Add > Connected Service. Aparece la página del servicio conectado con los servicios que puede agregar al proyecto.The Connected Service page appears with services you can add to your project.

    Menú contextual en un proyecto de Visual Studio: Agregar > Servicio conectado

  3. En el menú de servicios disponibles, elija Cognitive Services Computer Vision API.In the menu of available services, choose Cognitive Services Computer Vision API.

    Se describe el menú Servicios conectados: Analizar imágenes...

    Si ha iniciado sesión en Visual Studio y tiene una suscripción de Azure asociada a su cuenta, aparece una página con una lista desplegable con las suscripciones.If you've signed into Visual Studio, and have an Azure subscription associated with your account, a page appears with a dropdown list with your subscriptions.

    Ventana de Computer Vision API con la lista desplegable de suscripciones resaltada

  4. Seleccione la suscripción que desea utilizar y, a continuación, elija un nombre para Computer Vision API, o elija el vínculo Editar para modificar el nombre generado automáticamente, elija el grupo de recursos y el plan de tarifa.Select the subscription you want to use, and then choose a name for the Computer Vision API, or choose the Edit link to modify the automatically generated name, choose the resource group, and the Pricing Tier.

    Edición de detalles del servicio conectado

    Siga el vínculo para obtener más información sobre los planes de tarifa.Follow the link for details on the pricing tiers.

  5. Elija Agregar para agregar compatibilidad con el servicio conectado.Choose Add to add supported for the Connected Service. Visual Studio modifica su proyecto para agregar paquetes NuGet, las entradas del archivo de configuración y otros cambios para admitir una conexión con Computer Vision API.Visual Studio modifies your project to add the NuGet packages, configuration file entries, and other changes to support a connection the Computer Vision API. La Ventana de salida muestra el registro de lo que sucede en el proyecto.The Output Window shows the log of what is happening to your project. Debe ver algo parecido a lo siguiente:You should see something like the following:

    [4/26/2018 5:15:31.664 PM] Adding Computer Vision API to the project.
    [4/26/2018 5:15:32.084 PM] Creating new ComputerVision...
    [4/26/2018 5:15:32.153 PM] Creating new Resource Group...
    [4/26/2018 5:15:40.286 PM] Installing NuGet package 'Microsoft.Azure.CognitiveServices.Vision.ComputerVision' version 2.1.0.
    [4/26/2018 5:15:44.117 PM] Retrieving keys...
    [4/26/2018 5:15:45.602 PM] Changing appsettings.json setting: ComputerVisionAPI_ServiceKey=<service key>
    [4/26/2018 5:15:45.606 PM] Changing appsettings.json setting: ComputerVisionAPI_ServiceEndPoint=https://australiaeast.api.cognitive.microsoft.com/vision/v2.1
    [4/26/2018 5:15:45.609 PM] Changing appsettings.json setting: ComputerVisionAPI_Name=WebApplication-Core-ComputerVision_ComputerVisionAPI
    [4/26/2018 5:15:46.747 PM] Successfully added Computer Vision API to the project.
    

Uso de Computer Vision API para detectar los atributos de una imagenUse the Computer Vision API to detect attributes of an image

  1. Agregue lo siguiente usando las instrucciones de Startup.cs.Add the following using statements in Startup.cs.

    using System.IO;
    using System.Text;
    using Microsoft.Extensions.Configuration;
    using System.Net.Http;
    using System.Net.Http.Headers;
    
  2. Agregue un campo de configuración y después un constructor que inicializa el campo de configuración de la clase Startup para habilitar la configuración del programa.Add a configuration field, and add a constructor that initializes the configuration field in the Startup class to enable configuration in your program.

       private IConfiguration configuration;
    
       public Startup(IConfiguration configuration)
       {
           this.configuration = configuration;
       }
    
  3. En la carpeta wwwroot del proyecto, agregue una carpeta de imágenes y agregue un archivo de imagen a la carpeta wwwroot.In the wwwroot folder in your project, add an images folder, and add an image file to your wwwroot folder. Por ejemplo, puede usar una de las imágenes en esta página de Computer Vision API.As an example, you can use one of the images on this Computer Vision API page. Haga clic con el botón derecho en una de las imágenes, guárdela en la unidad de disco duro local y, a continuación, en el Explorador de soluciones, haga clic con el botón derecho en la carpeta imágenes y seleccione Agregar > Elemento existente para agregarlo al proyecto.Right-click on one of the images, save to your local hard drive, then in Solution Explorer, right-click on the images folder, and choose Add > Existing Item to add it to your project. El proyecto debe tener un aspecto similar al siguiente en el Explorador de soluciones:Your project should look something like this in Solution Explorer:

    Captura de pantalla de la vista del explorador de soluciones con un archivo de imagen seleccionado

  4. Haga clic con el botón derecho en el archivo de imagen, elija Propiedades y luego seleccione Copiar si es posterior.Right-click on the image file, choose Properties, and then choose Copy if newer.

    Ventana de propiedades de imagen; Copiar en el directorio de salida establecido en Copiar si es posterior

  5. Reemplace el método de configuración con el código siguiente para acceder a Computer Vision API y probar una imagen.Replace the Configure method with the following code to access the Computer Vision API and test an image.

     // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
     public void Configure(IApplicationBuilder app, IHostingEnvironment env)
     {
         // TODO: Change this to your image's path on your site. 
         string imagePath = @"images/subway.png";
    
         // Enable static files such as image files. 
         app.UseStaticFiles();
    
         string visionApiKey = this.configuration["ComputerVisionAPI_ServiceKey"];
         string visionApiEndPoint = this.configuration["ComputerVisionAPI_ServiceEndPoint"];
    
         HttpClient client = new HttpClient();
    
         // Request headers.
         client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", visionApiKey);
    
         // Request parameters. A third optional parameter is "details".
         string requestParameters = "visualFeatures=Categories,Description,Color&language=en";
    
         // Assemble the URI for the REST API Call.
         string uri = visionApiEndPoint + "/analyze" + "?" + requestParameters;
    
         HttpResponseMessage response;
    
         // Request body. Posts an image you've added to your site's images folder. 
         var fileInfo = env.WebRootFileProvider.GetFileInfo(imagePath);
         byte[] byteData = GetImageAsByteArray(fileInfo.PhysicalPath);
    
         string contentString = string.Empty;
         using (ByteArrayContent content = new ByteArrayContent(byteData))
         {
             // This example uses content type "application/octet-stream".
             // The other content types you can use are "application/json" and "multipart/form-data".
             content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    
             // Execute the REST API call.
             response = client.PostAsync(uri, content).Result;
    
             // Get the JSON response.
             contentString = response.Content.ReadAsStringAsync().Result;
         }
    
         if (env.IsDevelopment())
         {
             app.UseDeveloperExceptionPage();
         }
    
         app.Run(async (context) =>
         {
             await context.Response.WriteAsync("<h1>Cognitive Services Demo</h1>");
             await context.Response.WriteAsync($"<p><b>Test Image:</b></p>");
             await context.Response.WriteAsync($"<div><img src=\"" + imagePath + "\" /></div>");
             await context.Response.WriteAsync($"<p><b>Computer Vision API results:</b></p>");
             await context.Response.WriteAsync("<p>");
             await context.Response.WriteAsync(JsonPrettyPrint(contentString));
             await context.Response.WriteAsync("<p>");
         });
     }
    

    Este código construye una solicitud HTTP con el URI y la imagen como contenido binario de una llamada a Computer Vision API de REST.The code here constructs a HTTP request with the URI and the image as binary content for a call to the Computer Vision REST API.

  6. Agregue las funciones auxiliares GetImageAsByteArray y JsonPrettyPrint.Add the helper functions GetImageAsByteArray and JsonPrettyPrint.

     /// <summary>
     /// Returns the contents of the specified file as a byte array.
     /// </summary>
     /// <param name="imageFilePath">The image file to read.</param>
     /// <returns>The byte array of the image data.</returns>
     static byte[] GetImageAsByteArray(string imageFilePath)
     {
         FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
         BinaryReader binaryReader = new BinaryReader(fileStream);
         return binaryReader.ReadBytes((int)fileStream.Length);
     }
    
     /// <summary>
     /// Formats the given JSON string by adding line breaks and indents.
     /// </summary>
     /// <param name="json">The raw JSON string to format.</param>
     /// <returns>The formatted JSON string.</returns>
     static string JsonPrettyPrint(string json)
     {
         if (string.IsNullOrEmpty(json))
             return string.Empty;
    
         json = json.Replace(Environment.NewLine, "").Replace("\t", "");
    
         string INDENT_STRING = "    ";
         var indent = 0;
         var quoted = false;
         var sb = new StringBuilder();
         for (var i = 0; i < json.Length; i++)
         {
             var ch = json[i];
             switch (ch)
             {
                 case '{':
                 case '[':
                     sb.Append(ch);
                     if (!quoted)
                     {
                         sb.AppendLine();
                     }
                     break;
                 case '}':
                 case ']':
                     if (!quoted)
                     {
                         sb.AppendLine();
                     }
                     sb.Append(ch);
                     break;
                 case '"':
                     sb.Append(ch);
                     bool escaped = false;
                     var index = i;
                     while (index > 0 && json[--index] == '\\')
                         escaped = !escaped;
                     if (!escaped)
                         quoted = !quoted;
                     break;
                 case ',':
                     sb.Append(ch);
                     if (!quoted)
                     {
                         sb.AppendLine();
                     }
                     break;
                 case ':':
                     sb.Append(ch);
                     if (!quoted)
                         sb.Append(" ");
                     break;
                 default:
                     sb.Append(ch);
                     break;
             }
         }
         return sb.ToString();
     }
    
  7. Ejecute la aplicación web y vea qué encontró Computer Vision API en la imagen.Run the web application and see what Computer Vision API found in your image.

    Imagen de Computer Vision API y resultados con formato

Limpieza de recursosClean up resources

Cuando ya no necesite el grupo de recursos, elimínelo.When no longer needed, delete the resource group. De esta forma, se eliminan la instancia de Cognitive Services y los recursos relacionados.This deletes the cognitive service and related resources. Para eliminar el grupo de recursos mediante el portal:To delete the resource group through the portal:

  1. Escriba el nombre del grupo de recursos en el cuadro de búsqueda de la parte superior del portal.Enter the name of your resource group in the Search box at the top of the portal. Cuando vea el grupo de recursos que se utiliza en esta guía de inicio rápido en los resultados de búsqueda, selecciónelo.When you see the resource group used in this quickstart in the search results, select it.
  2. Seleccione Eliminar grupo de recursos.Select Delete resource group.
  3. En el cuadro ESCRIBA EL NOMBRE DEL GRUPO DE RECURSOS: escriba el nombre del grupo de recursos y seleccione Eliminar.In the TYPE THE RESOURCE GROUP NAME: box type in the name of the resource group and select Delete.

Pasos siguientesNext steps

Para más información sobre Computer Vision API, lea la documentación de Computer Vision API.Learn more about the Computer Vision API by reading the Computer Vision API documentation.