Face API 사용해보기

Microsoft의 Cognitive Service에는 여러가지 신기한 서비스가 있습니다만, 그 중에서 이번에 Face API에 대한 포스트를 만들어 보도록 하겠습니다.

0. Face API 소개

Microsoft Face API는 클라우드 기반의 얼굴 인식 서비스 입니다. Face API는 크게 얼굴 디텍팅과, 얼굴 인식의 2가지 기능이 있습니다. 더 자세한 사항은 Face API Overview 페이지를 참고 하시면 됩니다.

2016/09/28 일자 내용 입니다.

현재 공개되어있는 예제는 WPF용 예제 뿐이라서 UWP용 예제로 만드는데 시간이 좀 걸렸습니다. UWP 앱 개발에 관심있는 분들에게 도움이 되었으면 좋겠네요.

UWP Target version Windows 10 Anniversary Edition (10.0; Build 14393)

1. 참고

Get Started with Face API in C#

2. 준비

우선 비주얼 스튜디오 2015가 필요합니다. 그리고, Microsoft Cognitive Services에 가입을 해야 합니다. 가입을 하면 어떤 서비스를 사용할지 물어보고 subscription을 하라고 하는데, 저는 모두 선택 했습니다. 물론 Face API만 선택해도 상관 없습니다~.

Face - Preview는 한달에 3만건, 1분에 20번 호출하는 것이 무료이기 때문에 연습용으로 사용하시는데는 문제가 없을 것으로 생각됩니다.

3. 시작하기

1) 비주얼 스튜디오 2015 실행

2) New Project를 선택하고, Universal을 선택하고, Blank UWP app으로 만들어 봅니다.

3) 이름은 FaceSample으로 지정하시구요.. 저는 Target 버전을 Windows 10 Anniversary Edition 10.0; Build 14393)으로 지정 했습니다.

4) Newtonsoft.Json과 WriteableBitmapEx 2개의 NuGet Package를 설치하세요. WriteableBitmapEx는 이미지 파일에 얼굴 표시를 하기 위해서 반드시 필요한 것입니다.

5) MainPage.xaml을 열어서 아래의 코드 Grid안에 입력하세용, BrowserButton_Click 이벤트 핸들러는 Ctrl+. 을 눌러서 메뉴에서 나오는 Create event handler를 선택하시면, 자동으로 MainPage.xaml.cs에 이벤트 핸들러가 추가 됩니다.

        <Image x:Name="FacePhoto" Stretch="Uniform" Margin="0,0,0,30"/>
        <Button x:Name="BrowseButton" Margin="20,5" Height="20"        
                VerticalAlignment="Bottom" Content="Browse..."               
                Click="BrowseButton_Click"/>

6) BrowserButton_Click 이벤트 핸들러에 아래의 코드를 우선 추가 합니다.

        private async void BrowseButton_Click(object sender, RoutedEventArgs e)
        {
            //FileOpePicker 설정
            var openDlg = new FileOpenPicker();
            openDlg.FileTypeFilter.Add(".jpg");
            openDlg.FileTypeFilter.Add(".jpeg");
            openDlg.FileTypeFilter.Add(".png");
            //파일 선택 창 출력
            var result = await openDlg.PickSingleFileAsync();
            if (result == null || !result.IsAvailable) return;

            var file = await StorageFile.GetFileFromPathAsync(result.Path);
            var property = await file.Properties.GetImagePropertiesAsync();
            //이미지 크기 만큼 비트맵 생성
            var writeableBmp = BitmapFactory.New((int) property.Width, (int) property.Height);
            using (writeableBmp.GetBitmapContext())
            {
                //선택한 파일 이미지로 불러오기
                using (var fileStream = await file.OpenAsync(FileAccessMode.Read))
                {
                    writeableBmp = await BitmapFactory.New(1, 1).FromStream(fileStream, BitmapPixelFormat.Bgra8);
                }
            }
            FacePhoto.Source = writeableBmp;

        }

7) 실행 한 후에 이미지를 불러오 보아요~

요즘 핫한 우주소녀 성소입니다.~ 캬캬. 이미지가 잘 불러와 지면 다음으로 넘어가지요~

4. Face API 클라이언트 라이브러리 설정

Face API는 HTTPS 요청에 의해 호출되는 클라우드 API이며, 사용하기 쉽게 라이브러리를 제공합니다. 라이브러리를 사용하기 위해서는 다음과 같은 순서를 따라하시면 됩니다.

1) Solution Explorer에서 마우스 오른쪽 버튼을 눌러서 Manage NuGet Packages를 선택합니다.

2) Browse에서 projectoxford를 입력한 후 face를 선택해서 Install 버튼을 눌러 설치합니다.

3) MainPage.xaml.cs에 아래의 코드를 복사해서 붙여 넣습니다.

private readonly IFaceServiceClient faceServiceClient = new FaceServiceClient("Your subscription key");

Your subscription key에는 https://www.microsoft.com/cognitive-services/en-US/subscriptions 페이지에 들어가서 Face preview에 해당하는 곳에서 Copy를 클릭해서 Key를 복사하고 붙여 넣습니다.

여기까지 진행하면 Face API를 호출할 준비가 완료된 것입니다.

4) 이제 나머지 코드를 추가하도록 하겠습니다. 이전 코드 중간에 굵은색 글씨의 코드를 추가하면 됩니다.

                //선택한 파일 이미지로 불러오기
                using (var fileStream = await file.OpenAsync(FileAccessMode.Read))
                {
                    writeableBmp = await BitmapFactory.New(1, 1).FromStream(fileStream, BitmapPixelFormat.Bgra8);
                }

                //Face API이 DetectAsync를 이용해서 얼굴 찾기
                using (var imageFileStream = await file.OpenStreamForReadAsync())
                {
                    var faces = await faceServiceClient.DetectAsync(imageFileStream);
                    if (faces == null) return;
                    //얼굴 위치 표시
                    foreach (var face in faces)
                    {
                        writeableBmp.DrawRectangle(face.FaceRectangle.Left, face.FaceRectangle.Top,
                            face.FaceRectangle.Left + face.FaceRectangle.Width,
                            face.FaceRectangle.Top + face.FaceRectangle.Height, Colors.Red);
                    }
                }

5) 이제 최종 화면을 보도록 하겠습니다.~

아래와 같이 붉은색으로 얼굴을 찾아서 표시 했습니다. 음..약간 흐리고, 뭉개진 얼굴도 찾아주는 군요..후후

몇가지 더 찾아 볼까요?

5. 소스

소스에 API 키는 포함되어있지 않습니다~

FaceSample.zip