1. 시작하기 전에
제품 이미지 검색 학습 과정의 앞부분에서 제품 카탈로그의 시각적으로 유사한 제품에 대해 Vision API 제품 검색으로 빌드된 제품 검색 백엔드를 호출하는 방법을 알아봤습니다.
이 Codelab에서는 비슷한 백엔드를 제품 카탈로그와 함께 빌드하는 방법을 알아봅니다.
학습할 내용
- Vision API 제품 검색으로 제품 검색 백엔드를 빌드하는 방법
- 모바일 앱에서 Vision API에 액세스하도록 API 키를 설정하는 방법
필요한 항목
- 결제가 사용 설정된 Google Cloud 계정 (무료 체험 계정일 수 있음)
2. Vision API 제품 검색 정보
Vision API 제품 검색은 소매업체가 일련의 관점에서 제품을 시각적으로 설명하는 참조 이미지를 포함하는 제품을 만들 수 있도록 지원하는 Google Cloud의 기능입니다. 소매 업체는 이러한 제품을 제품 세트에 추가 할 수 있습니다. 현재 Vision API 제품 검색은 가정 용품, 의류, 완구, 포장 제품, 일반 등의 제품 카테고리를 지원합니다.
사용자가 자신의 이미지로 제품 세트를 쿼리하면 Vision API 제품 검색이 머신러닝을 적용하여 사용자의 쿼리 이미지에 있는 제품을 소매 업체의 제품 세트에 있는 이미지와 비교한 다음 시각적 및 의미론적으로 유사한 결과의 순위 목록을 반환합니다.
3. Google Cloud로 백엔드 빌드
제품 이미지 검색 학습 과정의 앞부분에서 Vision API 제품 검색으로 빌드된 데모 제품 검색 백엔드를 사용했습니다. 이 튜토리얼에 따라 Google Cloud 계정에서 동일한 백엔드를 빌드합니다.
튜토리얼을 완료한 후 다음 단계에 따라 모바일 앱에서 백엔드를 호출할 API 키를 설정합니다.
4. API 키 설정
Vision API 제품 검색 빠른 시작에서는 쿼리 이미지를 가져와 시각적으로 유사한 제품을 반환할 수 있는 제품 검색 백엔드를 빌드했습니다. 모바일 앱에서 제품 검색 API를 호출하려면 승인되지 않은 사용을 방지하기 위해 API 키를 설정한 다음 API 키의 액세스를 자체 모바일 앱으로 제한해야 합니다.
API 키 만들기
- Cloud 콘솔 > API 및 서비스 > 사용자 인증 정보로 이동합니다. 이 URL을 클릭하고 제품 검색 빠른 시작에서 사용한 프로젝트를 선택할 수도 있습니다.
- 사용자 인증 정보 만들기 > API 키를 선택합니다. API 키가 생성되면 다음 대화상자가 표시됩니다.
이 API 키를 기록해 둡니다. 이 Codelab의 후반부에서 이 값을 사용합니다.
API 키 액세스 제한
위와 같은 메시지가 표시되면 키 제한을 선택합니다.
화면에 표시된 안내에 따라 다음과 같은 제한사항을 적용하세요.
- 애플리케이션 제한 > Android 앱
- API 제한 > 키 제한 > Cloud Vision API
5. 모바일 앱 다운로드 및 실행
데모 제품 검색 백엔드를 사용한 이전 Android 앱을 다운로드하고 방금 빌드한 새 백엔드를 사용하도록 변경할 수 있습니다.
코드 다운로드
다음 링크를 클릭하면 이 Codelab의 모든 코드를 다운로드할 수 있습니다.
다운로드한 ZIP 파일의 압축을 해제합니다. 그러면 필요한 모든 리소스가 포함된 루트 폴더 (odml-pathway-codelabs)가 압축 해제됩니다. 이 Codelab에서는 product-search/codelab2/android/final 하위 디렉터리의 소스만 필요합니다.
이 앱은 ML Kit 객체 감지 및 추적 API와 Vision API 제품 검색으로 빌드된 데모 제품 검색 백엔드를 사용하여 사용자가 사진을 찍고 데모 제품 카탈로그에서 시각적으로 유사한 제품을 검색할 수 있도록 합니다.
Android 스튜디오로 앱 가져오기
먼저 starter 앱을 Android 스튜디오로 가져옵니다.
Android 스튜디오로 이동하여 Import Project (Gradle, Eclipse ADT, etc.)를 선택하고 이전에 다운로드한 소스 코드에서 product-search/codelab2/android/final 폴더를 선택합니다.
시작 앱 실행
이제 Android 스튜디오로 프로젝트를 가져왔으므로 앱을 처음으로 실행할 수 있습니다.
USB를 통해 Android 기기를 호스트에 연결하거나 Android 스튜디오 에뮬레이터를 시작하고 Android 스튜디오 툴바에서 실행 ( 
)을 클릭합니다.
(이 버튼이 사용 중지된 경우 전체 저장소가 아닌 final/app/build.gradle만 가져왔는지 확인하세요.)
이제 Android 기기에서 앱이 실행됩니다. 이미 작동하고 있지만 Google에서 배포한 데모 제품 검색 백엔드를 사용합니다.
다음으로 이 Codelab의 앞부분에서 빌드한 백엔드를 사용하도록 앱을 업데이트합니다.
6. API 엔드포인트 업데이트
API 구성 변경하기
ProductSearchAPIClient 클래스로 이동하면 제품 검색 백엔드의 구성이 이미 정의되어 있습니다. 데모 백엔드의 구성을 주석 처리합니다.
// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
// const val VISION_API_URL =
"https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
// const val VISION_API_KEY = ""
// const val VISION_API_PROJECT_ID = "odml-codelabs"
// const val VISION_API_LOCATION_ID = "us-east1"
// const val VISION_API_PRODUCT_SET_ID = "product_set0"
그런 다음 구성으로 바꿉니다.
// Option 2: Go through the Vision API Product Search quickstart and deploy to your project.
// Fill in the const below with your project info.
const val VISION_API_URL = "https://vision.googleapis.com/v1"
const val VISION_API_KEY = "YOUR_API_KEY"
const val VISION_API_PROJECT_ID = "YOUR_PROJECT_ID"
const val VISION_API_LOCATION_ID = "YOUR_LOCATION_ID"
const val VISION_API_PRODUCT_SET_ID = "YOUR_PRODUCT_SET_ID"
- VISION_API_URL은 Cloud Vision API의 API 엔드포인트입니다.
- VISION_API_KEY는 이 Codelab에서 이전에 만든 API 키입니다.
- VISION_API_PROJECT_ID , VISION_API_LOCATION_ID , VISION_API_PRODUCT_SET_ID는 이 Codelab의 앞부분에 나오는 Vision API 제품 검색 빠른 시작에서 사용한 값입니다.
실행하기
이제 Android 스튜디오 툴바에서 Run ( )을 클릭합니다. 앱이 로드되면 사전 설정된 이미지를 탭하고, 감지된 객체를 선택하고, 검색 버튼을 탭하여 검색 결과를 확인합니다. 이제 앱에서 방금 만든 제품 검색 백엔드를 사용합니다.
7. 축하합니다.
Vision API 제품 검색을 사용하여 제품 검색 백엔드를 빌드하는 방법을 배웠습니다.
이것으로 모든 설정이 완료되었습니다.
학습한 내용
- 제품 카탈로그 및 Vision API 제품 검색을 사용하여 제품 검색 백엔드를 만드는 방법
- 모바일 앱에서 제품 검색 백엔드를 호출하도록 API 키를 설정하는 방법
- 모바일 앱에서 백엔드를 호출하는 방법
다음 단계
- Vision API 제품 검색을 사용하여 스마트 옷장을 빌드하는 방법을 설명하는 동영상을 시청하세요.
- 제품 검색 온디바이스 ML 학습 과정을 확인하여 제품 검색을 빌드하는 데 필요한 모든 단계를 알아보세요.
- 자체 앱에 학습한 내용 적용