FEConf 2021

해당 문서는 B6, 딥러닝으로 확장하는 프론트엔드 현주소 영상을 보고 정리한 글입니다.

도입부

먼저, FE deep learning의 경우 SIFT, SURF 등 영상처리 algorithm에 대해 알 필요는 없습니다.

Keypoint Detector -> Feature Detector -> Feature Matching 의 과정의 결과가 어떤지 집중해야 합니다.

고로, 우린 적당한 모델을 찾아 input shape을 정하고, output feature 결과를 잘 가져다 쓰는게 맞다고 생각했습니다.
그러기 위해서 서치해본 결과, pre-trained model을 제공하는 WebGL을 활용하기로 했습니다.

그렇게 만들어진 것은 사진을 입력받아 닮은 포켓몬을 반환해주는 하나의 Web-App 입니다.

결과물 : pokemon-ai.com

IDEA

1. feature model 선별, 약 700 마리의 Poketmon feature
2. 비교적 가벼운 모델, MobileNet v2 선택
3. 모델을 ts.js 포맷으로 추출하고, Client에서 ts.js로 model 로딩
4. kNN query를 위해 feature indexing
5. 선택 기능을 구현, 모델을 추론해 해당 이미지 feature 추출

WebGL

• GPU 가속을 활용한 자바스크립트 딥러닝 라이브러리
• 문서화가 잘 되어있으나, 처음 딥러닝 프레임워크를 사용한다면 러닝커브가 있음
• 직접 학습이 아닌 pre-trained model을 제공하고 있어 좋다.
• Python keras model load 가능 -> ts.js model 추출이 가능한 이유

TF.js

Backend

• CPU Backend : Pure-JS(node)
• WebGL Backend : 다른 Backend에 비해 지원하는 항목이 많다.
• WASM Backend : 자료 부족 / 지원 범위가 좁다
• WebGPU Backend : 자료 부족 / 지원 범위가 좁다
• Node Backend
• React Native : Expo

model 추출

1. Python code로 model 추출 : inputShape 지정
2. json 형태 model async load
3. image (HTML elements) -> crop()으로 inpuShape 일치
4. (H, W, C) 형태의 inputShape 에 대해 squeeze -> GlobalAveragePooling2D() 사용

추론 결과

첫 회고

1. 배경이 있어 원하는 결과가 나오지 않았다.
2. 얼굴만 crop해보는건 어떨까?
   • Smartcrop.js, Pico.js, etc...
3. 얼굴 segmentation도 TF.js가 해주는건 어떨까?
   • BodyPix Segmentation 모델을 사용해보자!

어차피 tf.js 쓸거면 얼굴 seg도 tf.js보고 맡기자.
마찬가지로 성능보다 빠른 속도가 우선이니, 경량화된 Model(MobileNet V1)을 사용하자.

24가지 신체 부위에 대한 Seg 중, 왼쪽 얼굴과 오른쪽 얼굴만 분할하기로 결정했다.

Person Segmentation with Body-Pix

얼굴만 뽑아서 했더니 비교적 덜 칙칙한 포켓몬이 나와 만족스러웠다.

Deployment

Architecture

• AWS S3
• AWS Cloudfront
• AWS ACM
• AWS Route53

결과적으로 Realtime Crop이 가능했고, 속도도 꽤나 잘 나왔다.
닮은 포켓몬을 미리 load했던 시연 영상이지만, 실제 loading도 1~2초 정도 지연시간만을 가진다.

WebGL이 아닌 CPU 가속 러닝이었다면 10초 정도 걸린다.

얼굴이 여러개라면

• 실제로 얼굴이 2개인 포켓몬이 나타날 수도 있다.

  • Feature vector에서 형태를 잘 찾는 것 같다.

• 사진 내 얼굴이 여러개일 경우 전부 feature로 잡아 또가스 같은 포켓몬이 나오기도 한다.

모바일 지원

문제

• 데스크탑에서는 잘 지원되나, 모바일에서는 빈번하게 죽었다.
• GPU memory를 많이 잡아먹는게 아닐까?
  1. 이미지 선택
  2. 얼굴 Seg
  3. (224, 224, 3) resize
  4. feature vector 추출

flow 디버깅 결과 이미지를 선택한 후 얼굴 Seg할 때 메모리가 터지는 현상이 빈번했다.

해상도가 큰 이미지를 Seg할 때 Body-Pix model running 중에 터졌다.

• 해상도 변경 없어 메모리 이슈 발생, 입력 이미지의 해상도 변경.
• 이후 안정성은 향상되었으나, memory 누수가 존재.

tf.Tensor를 활용할 때는 메모리 관리를 명시적으로 해줘야한다는 docs 내용을 발견했다.

• tf.memory(), tf.dispose()를 사용해 메모리를 명시적으로 관리하기로 했다.
• GPU memory Ran out 발생 시, CPU Backend로 변경하도록 수정했다.

test case는 80명 정도로, 문제가 재발할 수도 있다.

개선사항

1. Imagenet pre-trained model이라 feature를 잘 추출하지는 못한다.
2. kNN query를 활용해서 5개 중 가장 귀여운 포켓몬을 보여주는 방식을 선택했다.

Medical AI with tf.js (응용사례)

안저이미지 분류

Vuno(발표자 회사)에는 눈의 이상소견을 찾아주는 deep learning classification 제품이 있다.
제품 모델은 GPU Server에 두고, 좌안, 우안 구분을 업로드 시점에 FE에서 처리해보는건 어떨까

결과적으로 꽤나 괜찮았다.

그러나 100%는 아니었고, 해당 기능 배포를 위해서는 전용 UX가 필요하겠다는 결과를 얻었다.

모달리티 분류

의료영상에는 Pixel Array 뿐 아니라, 환자정보, 영상 메타정보 등이 있다.

해당 영상이 어느 부위의 어느 축을 기준으로 촬영한 영상이다 등의 정보 = 모달리티

비표준, 누락, 익명화 등에 의해 메타정보 신뢰도가 떨어진다.

회사 프로젝트에 실제로 적용해보도록 했다.

FE deep learning

장점

• 서버와 통신할 필요 없어 dektop Web App의 경우 FE에서만 추출이 가능해서 빠르다.
• Client GPU resource 사용이 가능하다.
• 기존 백엔 모델 포팅이 간편하다.
• 간편한 모델이 많이 있다. (Ex. Body-Pix)

단점

• 딥러닝 모델이 노출되어 회사 자산이 외부에 공개된다.
• tfjs 의 경우 고수준의 API가 아닌 webgl tensor를 만든 경우 gc가 돌지 않는다.
• 모바일의 경우 적은 리소스로 메모리 터지는 경우가 빈번하다.
• tfjs의 경우 webgpu, wasm backend가 안정적이지 않다.

결론

FE에서 딥러닝을 한다는 것은 해결할 문제가 더 많아진다는 것이며,
수동 작업을 반자동으로 향상시킬 수 있었습니다.
경우에 따라 서버 리소스 사용이 줄어든다.
딥러닝 모델이 노출되고, 클라이언트 사양과 서버 리소스 트레이드 오프가 필요하다.

작성자 결론

기존 영상처리 및 Deep learning 실무에서 사용하던 성능 높은 모델은 아직 FE에서 사용하기에는 부담이 되는 것 같다.
Client의 GPU memory를 사용하기에 memory 최적화가 어느 수준으로 이루어져야 할지도 난관이라고 생각한다.

그러나 python으로만 가능하던 기존의 deep learning을 javascript에서도 활용할 수 있다는 점이 보다 javascript community의 힘을 강하게 해줄 수 있다고 생각한다.

한줄평 : 시간이 된다면 tf.js도 한 번 해보자.