Tensorflow.js를 사용하여 프런트 엔드에서 이미지 분석

안녕하세요, YAMAP에서 프런트 엔드 엔지니어로 일하는 SHiMPAY입니다.
YAMAP 엔지니어 Advent Calendar 2019 의 21일째의 기사가 됩니다.

롱 타임 아고, 기계 학습을 공부하려고 했습니다만, 내 수학력이 너무 가난해서,
이것은 공부해도 머리가 좋은 사람은 전세계에 있기 때문에 같은 흙바다로 싸우는 것은 무리다. 포기하려고 결심했습니다 🧟‍♂️

그런 다음 시간이 지나면서 머신 러닝에서 벗어나는 동안 웹 브라우저에서 실행 가능한 라이브러리로 TensorFlow.js가 2018 년에 공개되었습니다 🙌

프런트 엔드 측에서 사용할 수 있다면 이것을 만질 가치가 있습니다!
뭔가 서비스에 이용할 수 없을까 생각해 실제로 만져 보았습니다.

TensorFlow.js란? 🧠

TensorFlow는 기계 학습을 위해 개발된 엔드 투 엔드 오픈 소스 플랫폼이지만,
TensorFlow.js는 브라우저 및 Node.js에서 모델을 교육하고 배포하는 JavaScript 라이브러리입니다.

사전 훈련된 모델이 다수 준비되어 있으므로 즉시 실행할 수 있습니다.

모델

YAMAP에서는 사용자가 활동 일기 형태로 등산 기록을 일기처럼 저장할 수 있습니다.
활동 일기는 태그를 붙일 수 있습니다만, 업로드한 사진으로부터 자동적으로 태그를 붙일 수 있으면 편리할 것 같다.
라고 개인적으로 생각했습니다.

거기서 이번은 COCO-SSD 라고 하는 모델을 이용해 화상으로부터 오브젝트 검출을 실시했습니다

이미지에서 객체를 감지하고 태그를 추천해 보자는 전략입니다 🧐

분석 대상 이미지

이번에는 빨리 시도하고 싶었으므로 CDN을 사용하고 있습니다.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

NPM

npm i @tensorflow-models/coco-ssd

코드

const tags = document.querySelector('.tags')
const images = document.querySelectorAll('img')

const startAnalyse = () => {
    images.forEach(image => {
        analyseImage(image)
    })
}

const onClickAnalyseButton = () => {
    startAnalyse()
}

const analyseImage = async image => {
    await cocoSsd.load().then(model => {
        model.detect(image).then(predictions => {
            console.log(predictions)
            const analyseClass = predictions.map(prediction => prediction.class)
            if (analyseClass.length > 0) {
                const data = document.createElement('span')
                data.innerText = analyseClass
                tags.appendChild(data)
            }
        })
    })
}

결과...

YAMAP의 생명인 산이 검출되지 않는다 😭😭😭

うまそうなラーメン -> ボウル 
ベンチで疲れてる女の子 -> ベンチ
ネコと山 -> ネコ
リナックスチョットデキルおじさん -> 人・一緒に写ってるペットボトル

제대로 태그 첨부로 사용할 수 있을 것 같은 고양이만... 😹
그래서, 이 모델은 어떻게 객체를 검출해, 정의하고 있는지 제대로 조사했습니다.
플러그인의 이름의 유래대로 coco dataset 로부터 검출하고 있는 것 같습니다.

COCO is a large-scale object detection, segmentation, and captioning dataset.

그리고 있기 때문에 대략적인 개체의 세그멘테이션을하고 있습니다.
90 종류의 클래스 객체에서 발견되는 것처럼 여기에 산이 정의되지 않았습니다 here

소감

대략적인 세그먼트(segment)는 할 수 있어도, 역시 자사 서비스에 특화한 클래스 검출은 자사에서 구현할 필요가 있을 것 같다.

Tensorflow.js는 바삭바삭하게 구현할 수 있으므로 진입 장벽을 낮춘다.

산의 이미지는 검출할 수 없었지만, 이미지로부터 특정의 오브젝트를 검출하는 것이 이렇게 간단하게 할 수 있는 것은 굉장하다고 생각했습니다.

데이터 분석 팀의 힘을 빌리면 실현 가능한 미래도 있는지 느꼈습니다 ⛰

이번은 기계 학습의 진짜 입구입니다만 학습할 수 있었습니다. 이전에는 책에서 개념을 배우려고 단념했지만,
학술적인 것에서 배우는 것보다 실제로 손을 움직여 거기에서 내용을 찾아가는 흐름은 개인적으로 기계 학습의 서투른 의식이 내려간 것 같아서 좋았습니다.

Tensorflow.js에는 다른 사전 훈련 된 모델이 있으므로 시도하고 싶습니다 (특히 PoseNet Model이 걱정됩니다)

테크놀로지의 힘을 이용하여 더 산 업데이트를 실시하고 싶었습니다!

오시마