[Azure AI] Azure AI 앱 서비스 사용해보기 - Language Service (3)

지난 포스팅에서,

2024.11.04 - [Backend] - [Azure AI] Azure AI 앱 서비스 사용해보기 - Language Service (1)

[Azure AI] Azure AI 앱 서비스 사용해보기 - Language Service (1)

 

에서 추가 기능 선택: "사용자 지정 질문 답변" 기능을 선택했었었다.

 

오늘은 이 사용자 지정 질문 답변을 하는 시간이다.

 

language service app 을 생성하면 리소스가 생기는데, 자동으로 생기는 검색 서비스는 돈이 드니까 지워야한다. (사용 하나도 안했는데 하루동안 냅뒀더니 과금 3850원가량 나감ㅎ)

 

---

laguage studio 접속

아래 주소로 접속을 한다.

https://language.cognitive.azure.com/home

---

새 프로젝트 생성

로그인 후, Create new 선택

 

 

 

Custom question answering 선택

 

 

언어와 프로젝트 이름을 설정해준다.

 

 

 

다되었을 때

 

---

Manage sources: 소스 추가

 

그러면 이제 이 화면이 나타난다. Add source > Files 선택

 

 

Add file 선택

 

 

업로드할 파일 선택 (미리 있어야함)

 

 

 

Source name을 지정해주고, Add all 버튼 선택

 

 

 

그러면 아래와 같이 파일이 잘 업로드된 화면이 나타난다.

원래 docx 파일은 왼쪽처럼 생겼는데 업로드하면 우측 화면처럼 자기가 질문/응답을 다 인식해서 리스트처럼 생성된다.

 

 

Test (실험)

실험도구 아이콘을 눌러서 테스트를 할 수 있는 창도 있다. 테스트를 해준다. 잘 되는지

 

Sample Question Answer Pairing

샘플 Question answer pair를 추가할수도 있다.

 

---

배포

이제 좌측 아이콘에서 배포 버튼을 눌러준다. (Deply knowledge base 말풍선)

 

Deploy 버튼을 눌러준다.

 

 

배포가 다 되면 아래와 같이 뜬다. 이제 Get prediction URL을 눌러보자.

 

 

모달창이 뜰것이다. endpoint 복사하고, request 샘플을 잘 참고해서 Postman에서 테스트를 해줄것이다.

 

 

---

Postman API test

Get prediction URL에서의 endpoint URL을 붙여넣는다. 요청하기를 눌렀을 때 아래와 같이 응답이 잘 나타나면 성공이다.

 

request 의 "top"은 정확도순으로, "top":3은  제일 정확한 순서대로 3개를 보여달라는 말

---

JavaScript에서 API 요청

JavaScript 코드는 난이도가 낮아서 생략한다. 2분 안에 짤 수 있다.

const axios = require("axios");
require("dotenv").config();
const fs = require("fs");
const endpoint = `${process.env.LANGUAGE_ENDPOINT}/language/:query-knowledgebases?projectName=qna&api-version=2021-10-01&deploymentName=production`;
const apiKey = process.env.LANGUAGE_APIKEY;

const headers = {
  "Ocp-Apim-Subscription-Key": apiKey,
  "Content-Type": "application/json"
};

const question = { "top": 3, "question": "how can i book a flight?" }

function getAnswerfromQnA() {
  // 음성 파일 읽어서 binary 데이터로 변환

  axios
    .post(endpoint, question, {
      headers,
    })
    .then((res) => {
      console.log("Answer: ", res.data);
    })
    .catch((error) => {
      console.log(error);
    });
}

getAnswerfromQnA();
// console.log(endpoint);

 

결과

 

지저분해서 answer만 나오게 하고 싶을것이다.

const axios = require("axios");
require("dotenv").config();
const fs = require("fs");
const endpoint = `${process.env.LANGUAGE_ENDPOINT}/language/:query-knowledgebases?projectName=qna&api-version=2021-10-01&deploymentName=production`;
const apiKey = process.env.LANGUAGE_APIKEY;

const question = "how can i book a flight?"

const headers = {
  "Ocp-Apim-Subscription-Key": apiKey,
  "Content-Type": "application/json",
};

const body = {
    question: question,
    top: 3,
    confidenceScoreThreshold: 0.3
}

const option = {
    method: 'POST',
    url: endpoint,
    headers,
    data: body
}


function getAnswerfromQnA() {
    axios(option)
        .then((res) => { })
        .catch(() => { })

 

answers 는 [] 에 담겨져있으므로, forEach로 가져온다.

 

const axios = require("axios");
require("dotenv").config();
const fs = require("fs");
const endpoint = `${process.env.LANGUAGE_ENDPOINT}/language/:query-knowledgebases?projectName=qna&api-version=2021-10-01&deploymentName=production`;
const apiKey = process.env.LANGUAGE_APIKEY;

const question = "how can i book a flight?"

const headers = {
  "Ocp-Apim-Subscription-Key": apiKey,
  "Content-Type": "application/json",
};

const body = {
    question: question,
    top: 3,
    confidenceScoreThreshold: 0.3
}

const option = {
    method: 'POST',
    url: endpoint,
    headers,
    data: body
}


function getAnswerfromQnA() {
    axios(option)
      .then((res) => {
        const answers = res.data.answers;
        answers.forEach((answer, index) => {
          console.log(`${index}: ${answer.answer}`);
        });
      })
      .catch((error) => {
        console.log(error);
      });

}

getAnswerfromQnA();
// console.log(endpoint);

 

0밖에 안나왔다면, threshold를 0.01로 조정해준다.

그러면 결과 3개가 다 나온다.