OCR을 사용해보고 싶어 열심히 카메라를 사용해보았으니,
이제 google vision API에 대해 알아보려고 합니다.
지난번 포스팅에서 카메라로 사진을 찍고 이걸 64base로 인코딩하여 callGoogleVIsionApi라는 함수에 인자로 보내준 것까지 내용을 담았습니다.
그럼 오늘은 callGoogleVIsionApi 함수에 대해 설명하려고 합니다!
react-native OCR 관련 라이브러리도 있는 것 같았지만, 구글 API를 이용해보고 싶어 아래의 사이트를 참조했습니다.
처음 1000개까지 무료라고 하니 제게는 충분했어요 ㅎㅎ
Vision AI | 머신러닝을 통한 이미지 정보 도출 | Cloud Vision API | Google Cloud
AutoML Vision을 사용하여 클라우드나 에지 이미지에서 유용한 정보를 도출하거나 선행 학습된 Vision API 모델을 사용하여 감정, 텍스트 등을 인식합니다.
cloud.google.com
cloud.google.com/vision/docs/quickstarts
빠른 시작 | Cloud Vision API | Google Cloud
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trade
cloud.google.com
빠른 시작을 보면 구글에선 클라이언트 라이브러리 사용 방법을 가장 추천한다는데,
저는 사진을 저장할 생각이 없었기 때문에 vision API로 진행했습니다.
우선 제가 구현하고자 하는 것은 라벨을 찍으면 라벨의 텍스트를 불러오는 것입니다.
https://vision.googleapis.com/v1/images:annotate?key=YOUR_API_KEY 로 base64로 인코딩한 내용 혹은 사진을 보내주면 됩니다.
만약 사진을 직접 보내면 image { content : - } 부분의 content를 source로 바꾸면 됩니다. 자세한 내용의 아래를 참고해주세요!
https://cloud.google.com/vision/docs/reference/rest/v1/AnnotateImageRequest#Image
AnnotateImageRequest | Cloud Vision API | Google Cloud
content string (bytes format) Image content, represented as a stream of bytes. Note: As with all bytes fields, protobuffers use a pure binary representation, whereas JSON representations use base64.A base64-encoded string.
cloud.google.com
callGoogleVIsionApi = async (base64: String) => {
let url: string = googleCloud.api + googleCloud.apiKey;
await fetch(url, {
method: 'POST',
body: JSON.stringify({
requests: [
{
image: {
content: base64,
},
features: [
{ type: 'LABEL_DETECTION', maxResults: 10 },
{ type: 'TEXT_DETECTION', maxResults: 5 },
{ type: 'DOCUMENT_TEXT_DETECTION', maxResults: 5 },
{ type: 'WEB_DETECTION', maxResults: 5 },
],
},
],
}),
})
.then((res) => res.json())
.then((data) => {
this.setState({
fullTextAnnotation: data.responses[0].fullTextAnnotation.text,
});
})
.catch((err) => console.log('error : ', err));
};그리고 features에서는 필요한 내용들을 넣으면 되는데, 저는 우선 저렇게 4개를 넣어봤습니다.
WEB_DETECATION도 필요가 없어서 나중에 뺄거 같아요,
저렇게 fetch를 하고 초반에 계속 403에러가 나서 api의 문제인가 한참을 찾아봤는데,
알고보니 google cloud를 안해서 였더라구요.
신규고객에게 300$의 크레딧을 준다니까 우선 사용해보도록 합니다.
google cloud 시작하기만 했을뿐인데 결과물이 제대로 돌아옵니다!
제가 받은 결과물 중에 라벨과 관련된 부분을 일부 공유하자면 아래와 같습니다.
"labelAnnotations": [
{
"description": "Bottle",
"mid": "/m/04dr76w",
"score": 0.95155406,
"topicality": 0.95155406
},
]
가장 필요한 전체 text는 저 위의 callGoogleVIsionApi 함수내의 부분에서 보이는
data.responses[0].fullTextAnnotation.text 에 담겨 오더라구요.
생각보다 OCR을 이용하는 게 쉽고 구글덕에 편했던것 같습니다!
제가 찍는 것들마다 텍스트를 추출하는게 재밌더라구요 ㅎ.ㅎ
프로젝트를 혼자 진행하니 공유할 사람이 없어서 약간 재미가 없나 싶었는데,
새로운 것들도 사용해보고 구현하고 싶었던 것들을 성공하면서 역시 재밌네요ㅎㅎㅎㅎ
google vision API에 대한 오늘의 블로깅 끝 !