QnAMaker를 사용하여 이미지와 함께 답변을 반환했습니다.

소개

QnAmaker에서 QA와 묶은 이미지를 돌려보자는 이야기입니다.
※bot 자체의 구현은 AzureBotServiceV3.0 C# botFramework를 이용하고 있습니다.
※QnAmaker, AzureBotService의 개요는 생략하고 있습니다.

메커니즘

이미지를 표시하려면 QnAMaker의 Metadata를 사용합니다. *1Metadata의 본래의 사용법은 아닙니다만, Metadata에 화상의 URL을 설정해, 어플리케이션으로부터 액세스 해 사용하는 수법입니다.

QnAMaker에 QA를 설정합니다.

먼저 QnAMaker에 QA를 추가합니다.
오른쪽 상단 기어 버튼을 누르면 품질관리에 메타데이터를 추가할 수 있습니다.
메타데이터는 {Key, value} 세트로 등록할 수 있습니다.
이번에는 {key : picurl} {value : 이미지 URL (파일 이름)}
라는 형태로 등록해 갑니다.

이미지 저장

이번에는 Azure의 blob 스토리지에 이미지를 저장합니다.
컨테이너를 만듭니다. 공용 액세스 레벨은 '컨테이너'입니다.


방금 QA에 등록한 파일명의 이미지를 Blob에 업로드합니다.

이미지 가져오기

QnAmaker에서 얻은 답변 metadata를 사용하여 BLOB 스토리지에서 이미지를 검색합니다.

QnAmaker에서 얻은 응답문과 metadata 값(이미지의 파일 이름)을 인수로 사용합니다.

ReplayPicture.cs

private IMessageActivity ReplayPicture(IDialogContext context, string Answer, string picurl)
        {

            i = 0;

            StringBuilder replayanswer = new StringBuilder();
            // blob の情報を取得します
            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(@"DefaultEndpointsProtocol=XXXXXXXXXXXXXXXXXXXXXXX");
            CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
            CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference("コンテナ―名");
            CloudBlockBlob blob = cloudBlobContainer.GetBlockBlobReference(picurl + ".png");

            // SAS キーを取得します (キーの有効期間を 15 分、アクセス許可を読み取りに設定しています)
            var sasContraints = new SharedAccessBlobPolicy();
            sasContraints.SharedAccessStartTime = DateTime.UtcNow.AddMinutes(-5);
            sasContraints.SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(15);
            sasContraints.Permissions = SharedAccessBlobPermissions.Read;

            var sasBlobToken = blob.GetSharedAccessSignature(sasContraints, null, null);

            string extension = ".png";

            string attachedUrl = BlobUrl + picurl + extension + sasBlobToken;

            ...

위의 attachedUrl 에 이미지에 액세스하기 위한 URL을 얻을 수 있었습니다.

그리고는 이 URL을 사용해, 이미지를 꽂은 메세지를 작성해 갑니다.

이미지가 있는 메시지 만들기

위에서 BLOB의 URL을 취득하면, 나머지는 이미지 첨부 메세지를 작성해 갑니다.

이미지가 있는 메시지를 만들려면 Hero Card를 사용하는 방법도 있지만, Card의 경우 이미지는 문장 밖에 넣을 수 없기 때문에 이번에는 *2 markdown을 사용합니다.

botframework에서 이미지가 포함된 답변 콘텐츠를 만들려면 텍스트 형식을 markdown으로 지정하고 markdown 방식으로 만들 수 있습니다.

            //markdownを指定します
            replay.TextFormat = "markdown";

            //回答を作成      
            replay.Text = "回答の文章を入れる"![](" + 画像URL + ")"";

위를 사용하면 이미지를 넣을 수 있지만 이미지를 답변 텍스트의 어느 부분에 넣을지 결정해야합니다.

방금 QnAmaker에 등록한 품질보증을 편집합니다.


위의 이미지에서는 attachedimg 를 이미지를 넣는 장소의 표시로 하고 있습니다.

프로그램 측에서는 다음과 같이 구현합니다. (ReplayPicture.cs 계속됨)

ReplayPicture.cs

   ...

            var spanswer = Regex.Split(Answer, "attachedimg");

            foreach(var addanswer in spanswer)
            {
                replayanswer.Append(addanswer);

                if (i == 0)
                {
                    replayanswer.Append("![](" + attachedUrl + ")");
                }

                i++;
            }

            Activity replay = ((Activity)context.Activity).CreateReply();

            //markdownを指定します
            replay.TextFormat = "markdown";


            replay.Text = replayanswer.ToString();

            return replay;

처리 내용은 간단하고 답변 문장을 attachedimg 로 구분하여 이미지의 URL에 덧붙여 응답 콘텐츠를 작성하고 있습니다.

동작 확인

bot에서는 다음과 같이 표시됩니다.

참고 doc

*1 QnA maker 메타데이터
htps : // / cs. 미 c 로소 ft. 코 m / 자 jp / 아즈레 / 코 g 치 ゔ ぇ - r ゔ ぃ 세 s / q 나마 케 r / 호 w - / 메타 타타 - 게 네라 앙스 ぇ 루 우사게

*2 botframework markdown:
htps : // bgs. msd 응. 미 c 로소 ft. 코 m / 쟈미에다 l 톤 / 2016/08/22 / 보 tf 라메를 rk 마 rk 도 w