이 글에서는 Deep Block API를 사용해 나만의 웹 앱을 만드는 방법을 알아보겠습니다.
옴니스랩스에서는 저희 AI 플랫폼인 Deep Block의 API 서비스를 출시했습니다. 웹캠에서 카메라 입력을 받아 이미지 분할을 수행하여 머리카락을 찾는 예제 프로젝트를 통해 Deep Block API의 사용법을 알아보도록 하겠습니다. 프로젝트 코드는 GitHub에서 보실 수 있습니다. 웹 사이트를 직접 사용해 보시려면 GitHub의 Readme 파일을 확인하세요.
Deep Block의 API를 사용하면 Deep Block에서 학습한 AI 모델을 내가 만드는 AI 애플리케이션에 활용할 수 있습니다.
API를 활용해 웹사이트나 앱을 만들기 전 먼저 https://app.deepblock.net/deepblock/console에서 프로젝트를 만들고 훈련을 시키거나 이미 만들어진 프로젝트를 https://app.deepblock.net/deepblock/store/project에서 포크해야 합니다. API를 이용해 콘솔의 어떤 프로젝트든 추론을 시작할 수 있습니다.
먼저 HTTP POST 요청을 통해 추론을 실행할 이미지를 업로드해야 합니다.
|
const takenPictureCanvas = document.getElementById("takenPicture"); const dataURL = takenPictureCanvas.toDataURL("image/jpeg"); const blob = dataURItoBlob(dataURL); const uploadTimestamp = Date.now().toString(); const fileName = `${uploadTimestamp}.jpeg`; const file = new File([blob], fileName); const uploadFormData = new FormData(); uploadFormData.append('files', file); const url = `https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/predict-files?store=false`; fetch(url, { method: "POST", headers: { Authorization: apiKey, timestamp: uploadTimestamp }, body: uploadFormData }) |
이렇게 하려면 이미지 데이터로 파일 object를 만들고 요청의 Body로 넣는 FormData object의 'files' 항목으로 만든 파일 object를 설정해야 합니다. 또한 프로젝트를 넣어야 합니다. 위와 같이 URL에사용할 특정 프로젝트의 ID도 매개변수로 넣어야 합니다. API 키와 현재 타임스탬프는 헤더로 지정해야 합니다.
지금 업로드한 이미지에 대해서만 추론을 실행하려면 먼저 프로젝트에 추론을 위해 이전에 업로드한 이미지가 포함되어 있지 않은지 확인해야 합니다. 이렇게 하려면 이미지를 업로드하기 전에 추론 파일 제거 API를 호출할 수 있습니다.
|
fetch(`https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/predict-files`, { method: "DELETE", headers: { Authorization: apiKey, timestamp: Date.now() }, }) |
그런 다음 업로드된 이미지에 대해 추론 실행을 시작하려면 다음 HTTP 요청을 사용해야 합니다.
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/predict/${thresholdScore}`, { method: "POST", headers: { Authorization: apiKey, timestamp: Date.now() }) |
여기서 thresholdScore은 모형의 예측에 필요한 신뢰 수준입니다. 0과 100 사이의 값이어야 합니다. 값이 클수록 신뢰도는 높아지지만 추론결과의 갯수는 적어집니다. 통상적으로 30과 70 사이의 값이 적절합니다.
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/project-status`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
상태가 0이면 추론이 완료되고 결과를 계속 가져올 수 있습니다.
|
fetch(`https://app.deepblock.net/master_api/projects/${projectID}/result`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
이렇게 하면 'images', 'annotations' 및 'categories' 항목이 있는 JSON 파일 형식으로 추론결과가 반환됩니다. 'annotations'에 있는 추론결과를 내가 만드는 웹사이트나 앱에서 사용할 수 있습니다! 또한 추론결과를 이미지에 시각화할 수 있는 쉬운 방법이 필요한 경우 다음과 같은 API 호출을 할 수 있습니다.
|
fetch(`https://app.deepblock.net/storage_api/file_system/image_segmentation/projects/${projectID}/visualized/base64/${imageID}`, { method: "GET", headers: { Authorization: apiKey, timestamp: Date.now() } }) |
이 작업을 수행하려면 시각화할 이미지의 ID인 imageID를 지정해야합니다. 추론결과로 받은 JSON 파일의 'images' 항목에서 찾을 수 있습니다. 이 HTTP 요청은 시각화 된 추론결과를 base64 인코딩 이미지로 반환합니다.
자세한 내용은 https://app.deepblock.net/document에서 각 API 호출에 대한 설명서를 참조하십시오.
