Computer Vision API C# 자습서Computer Vision API C# Tutorial

Computer Vision API를 사용하여 OCR(광학 문자 인식)을 수행하고, 는 기본 Windows 응용 프로그램을 탐색하여 광학 문자 인식(OCR)을 수행하고, 스마트하게 잘리는 썸네일을 만들고, 이미지에서 얼굴을 비롯한 시각적 기능을 감지, 분류, 태그 지정 및 설명하는 기본 Windows 응용 프로그램을 탐색합니다.Explore a basic Windows application that uses Computer Vision API to perform optical character recognition (OCR), create smart-cropped thumbnails, plus detect, categorize, tag and describe visual features, including faces, in an image. 아래 예제에서는 이미지 URL 또는 로컬로 저장된 파일을 제출할 수 있습니다.The below example lets you submit an image URL or a locally stored file. .NET Framework의 일부인 WPF(Windows Presentation Foundation) 및 Vision API를 사용하여 고유한 Windows용 앱을 빌드하기 위한 템플릿으로 이 오픈 소스 예제를 사용할 수 있습니다.You can use this open source example as a template for building your own app for Windows using the Vision API and WPF (Windows Presentation Foundation), a part of .NET Framework.

필수 조건Prerequisites

플랫폼 요구 사항Platform requirements

아래 예제는 Visual Studio 2015 Community Edition을 사용하여 .NET Framework용으로 개발되었습니다.The below example has been developed for the .NET Framework using Visual Studio 2015, Community Edition.

Computer Vision API를 구독하고 구독 키를 받습니다.Subscribe to Computer Vision API and get a subscription key

예제를 만들기 전에 Microsoft Cognitive Services(이전의 Project Oxford)의 일부인 Computer Vision API를 구독해야 합니다.Before creating the example, you must subscribe to Computer Vision API which is part of the Microsoft Cognitive Services (formerly Project Oxford). 구독 및 키 관리 세부 정보는 구독을 참조하세요.For subscription and key management details, see Subscriptions. 이 자습서에서는 기본 키와 및 보조 키를 둘 다 사용할 수 있습니다.Both the primary and secondary key can be used in this tutorial.

참고

자습서는 westcentralus 지역의 구독 키를 사용하도록 작성되었습니다.The tutorial is designed to use subscription keys in the westcentralus region. Computer Vision 평가판에 생성된 구독 키는 westcentralus 지역을 사용하므로 올바르게 작동합니다.The subscription keys generated in the Computer Vision free trail use the westcentralus region, so they work correctly. https://azure.microsoft.com/을 통해 Azure 계정을 사용하여 구독 키를 생성한 경우 westcentralus 지역을 지정해야 합니다.If you generated your subscription keys using your Azure account through https://azure.microsoft.com/, you must specify the westcentralus region. westcentralus 지역 외부에서 생성된 키는 작동하지 않습니다.Keys generated outside the westcentralus region will not work.

클라이언트 라이브러리 및 예제 가져오기Get the client library and example

SDK를 통해 Computer Vision API 클라이언트 라이브러리 및 예제 응용 프로그램을 컴퓨터에 복제할 수 있습니다.You may clone the Computer Vision API client library and example application to your computer via SDK. ZIP으로 다운로드하면 안 됩니다.Don't download it as a ZIP.

1단계: 예제 설치Step 1: Install the example

GitHub 데스크톱에서 Sample-WPF\VisionAPI-WPF-Samples.sln을 엽니다.In your GitHub Desktop, open Sample-WPF\VisionAPI-WPF-Samples.sln.

2단계: 예제 빌드Step 2: Build the example

  • Ctrl+Shift+B를 누르거나, 리본 메뉴에서 빌드를 클릭하고 솔루션 빌드를 선택합니다.Press Ctrl+Shift+B, or click Build on the ribbon menu, then select Build Solution.

3단계: 예제 실행Step 3: Run the example

  1. 빌드가 완료된 후 F5 키를 누르거나, 리본 메뉴에서 시작을 클릭하여 예제를 실행합니다.After the build is complete, press F5 or click Start on the ribbon menu to run the example.
  2. “시작하려면 여기에 구독 키를 붙여넣으세요.” 텍스트 편집 상자가 있는 Computer Vision API 사용자 인터페이스 창을 찾습니다.Locate the Computer Vision API user interface window with the text edit box reading "Paste your subscription key here to start". “키 저장” 단추를 클릭하여 PC 또는 노트북에 구독 키를 유지하도록 선택할 수 있습니다.You can choose to persist your subscription key on your PC or laptop by clicking the "Save Key" button. 시스템에서 구독 키를 삭제하려면 “키 삭제”를 클릭하여 PC 또는 노트북에서 제거합니다.When you want to delete the subscription key from the system, click "Delete Key" to remove it from your PC or laptop.

    Vision 구독 키

  3. “시나리오 선택” 아래에서 6가지 시나리오 중 하나를 클릭하여 사용하고 화면에 표시되는 지침을 따르세요.Under "Select Scenario" click to use one of the six scenarios, then follow the instructions on the screen. Microsoft는 업로드되는 이미지를 수신하며, 해당 이미지를 사용하여 Computer Vision API 및 관련 서비스를 개선할 수 있습니다.Microsoft receives the images you upload and may use them to improve Computer Vision API and related services. 이미지를 제출하면 개발자 준수 사항을 따랐음을 확인하는 것입니다.By submitting an image, you confirm that you have followed our Developer Code of Conduct.

    이미지 분석 인터페이스

  4. 이 예제 응용 프로그램에서 사용할 예제 이미지가 있습니다.There are example images to be used with this example application. Face API Windows Github 리포지토리의 데이터 폴더에서 이러한 이미지를 찾을 수 있습니다.You can find these images on the Face API Windows Github repo, in the Data folder. 이러한 이미지는 계약 LICENSE-IMAGE에 의거하여 사용이 허가되었습니다.Please note the use of these images is licensed under agreement LICENSE-IMAGE.

검토 및 학습Review and Learn

이제 실행 중인 응용 프로그램이 있으므로 이 예제 앱이 Cognitive Services 기술과 어떻게 통합되는지를 살펴보겠습니다.Now that you have a running application, let us review how this example app integrates with Cognitive Services technology. 이렇게 하면 계속해서 이 앱에 빌드하거나 Microsoft Computer Vision API를 사용하여 고유한 앱을 개발하는 작업이 더 쉬워집니다.This will make it easier to either continue building onto this app or develop your own app using Microsoft Computer Vision API.

이 예제 앱은 Microsoft Computer Vision API용 씬 C# 클라이언트 래퍼인 Computer Vision API 클라이언트 라이브러리를 사용합니다.This example app makes use of the Computer Vision API Client Library, a thin C# client wrapper for the Microsoft Computer Vision API. 위에서 설명한 대로 예제 앱을 빌드한 경우 NuGet 패키지에서 클라이언트 라이브러리를 가져왔습니다.When you built the example app as described above, you got the Client Library from a NuGet package. Vision, Windows, 클라이언트 라이브러리 아래의 “ 클라이언트 라이브러리” 폴더에서, 위의 필수 조건에 언급된 다운로드된 파일 리포지토리의 일부인 클라이언트 라이브러리 소스 코드를 검토할 수 있습니다.You can review the Client Library source code in the folder titled “Client Library” under Vision, Windows, Client Library, which is part of the downloaded file repository mentioned above in Prerequisites.

솔루션 탐색기에서 클라이언트 라이브러리 코드를 사용하는 방법을 확인할 수도 있습니다. VisionAPI-WPF_Samples 아래의 AnalyzePage.xaml을 확장하여 이미지를 이미지 분석 끝점에 제출하는 데 사용되는 AnalyzePage.xaml.cs를 찾습니다.You can also find out how to use the Client Library code in Solution Explorer: Under VisionAPI-WPF_Samples, expand AnalyzePage.xaml to locate AnalyzePage.xaml.cs, which is used for submitting an image to the image analysis endpoint. .xaml.cs 파일을 두 번 클릭하여 Visual Studio의 새 창에서 엽니다.Double-click the .xaml.cs files to have them open in new windows in Visual Studio.

예제 앱에서 Vision 클라이언트 라이브러리가 어떻게 사용되는지를 검토하면서 AnalyzePage.xaml.cs의 두 코드 조각을 살펴보겠습니다.Reviewing how the Vision Client Library gets used in our example app, let's look at two code snippets from AnalyzePage.xaml.cs. 이 파일에는 아래에 재현된 코드 조각을 찾는 데 도움이 되도록 “KEY SAMPLE CODE STARTS HERE” 및 “KEY SAMPLE CODE ENDS HERE”를 표시하는 코드 주석이 포함되어 있습니다.The file contains code comments indicating “KEY SAMPLE CODE STARTS HERE” and “KEY SAMPLE CODE ENDS HERE” to help you locate the code snippets reproduced below.

분석 끝점은 이미지 URL 또는 이진 이미지 데이터(8진수 스트림 형식)를 입력으로 사용할 수 있습니다.The analyze endpoint is able to work with either an image URL or binary image data (in form of an octet stream) as input. 먼저, Vision 클라이언트 라이브러리를 사용할 수 있게 해주는 using 지시문을 찾습니다.First, you find a using directive, which lets you use the Vision Client Library.

                // ----------------------------------------------------------------------
                // KEY SAMPLE CODE STARTS HERE
                // Use the following namespace for VisionServiceClient 
                // ---------------------------------------------------------------------- 
                using Microsoft.ProjectOxford.Vision; 
                using Microsoft.ProjectOxford.Vision.Contract; 
                // ----------------------------------------------------------------------
                // KEY SAMPLE CODE ENDS HERE 
                // ----------------------------------------------------------------------

UploadAndAnalyzeImage(…) 이 코드 조각은 클라이언트 라이브러리를 사용하여 구독 키와 로컬로 저장된 이미지를 Computer Vision API 서비스의 분석 끝점에 제출하는 방법을 보여 줍니다.UploadAndAnalyzeImage(…) This code snippet shows how to use the Client Library to submit your subscription key and a locally stored image to the analyze endpoint of the Computer Vision API service.

    private async Task<AnalysisResult> UploadAndAnalyzeImage(string imageFilePath)
    {
        // -----------------------------------------------------------------------
        // KEY SAMPLE CODE STARTS HERE
        // -----------------------------------------------------------------------  
        //
        // Create Project Oxford Computer Vision API Service client
        //
        VisionServiceClient VisionServiceClient = new VisionServiceClient(SubscriptionKey);
        Log("VisionServiceClient is created");

        using (Stream imageFileStream = File.OpenRead(imageFilePath))
        {
            //
            // Analyze the image for all visual features
            //
            Log("Calling VisionServiceClient.AnalyzeImageAsync()...");
         VisualFeature[] visualFeatures = new VisualFeature[] { VisualFeature.Adult, VisualFeature.Categories, VisualFeature.Color, VisualFeature.Description, VisualFeature.Faces, VisualFeature.ImageType, VisualFeature.Tags };
            AnalysisResult analysisResult = await VisionServiceClient.AnalyzeImageAsync(imageFileStream, visualFeatures);
            return analysisResult;
        }

        // -----------------------------------------------------------------------
        // KEY SAMPLE CODE ENDS HERE
        // -----------------------------------------------------------------------
        }

AnalyzeUrl(…) 이 코드 조각은 클라이언트 라이브러리를 사용하여 구독 키와 사진 URL을 Computer Vision API 서비스의 분석 끝점에 제출하는 방법을 보여 줍니다.AnalyzeUrl(…) This code snippet shows how to use the Client Library to submit your subscription key and a photo URL to the analyze endpoint of the Computer Vision API service.

    private async Task<AnalysisResult> AnalyzeUrl(string imageUrl)
    {
        // -----------------------------------------------------------------------
        // KEY SAMPLE CODE STARTS HERE
        // -----------------------------------------------------------------------

        //
        // Create Project Oxford Computer Vision API Service client
        //
     VisionServiceClient VisionServiceClient = new VisionServiceClient(SubscriptionKey);
        Log("VisionServiceClient is created");

        //
        // Analyze the url for all visual features
        //
        Log("Calling VisionServiceClient.AnalyzeImageAsync()...");
        VisualFeature[] visualFeatures = new VisualFeature[] { VisualFeature.Adult, VisualFeature.Categories, VisualFeature.Color, VisualFeature.Description, VisualFeature.Faces, VisualFeature.ImageType, VisualFeature.Tags };
        AnalysisResult analysisResult = await VisionServiceClient.AnalyzeImageAsync(imageUrl, visualFeatures);
     return analysisResult;
    }
        // -----------------------------------------------------------------------
        // KEY SAMPLE CODE ENDS HERE
        // -----------------------------------------------------------------------

기타 페이지 및 끝점 Computer Vision API 서비스에서 노출하는 다른 끝점을 조작하는 방법은 샘플의 기타 페이지에서 확인할 수 있습니다. 예를 들어 OCR 끝점은 OCRPage.xaml.cs에 포함된 코드의 일부로 표시됩니다.Other pages and endpoints How to interact with the other endpoints exposed by the Computer Vision API service can be seen by looking at the other pages in the sample; for instance, the OCR endpoint is shown as part of the code contained in OCRPage.xaml.cs

관련 항목Related Topics