목차

  • gradio란?
  • 사용법
  • 동작 방식
  • 어디서 든 내 모델을 사용할 수 있게 하기
  • 한계점

Gradio란?

Gradio는 Model을 웹으로 손쉽게 사용할 수 있게 해주는 라이브러리이자 플랫폼입니다.

각종 UI를 쉽게 그릴 수 있게 해주고, input을 받아 서버에서 inference 혹은 predict를 한 후 그 결과를 사용자들에게 돌려줍니다.

다른 웹 어플리케이션 서버들과 차별화된 점은 ML 모델이 자주 다루는 컴포넌트들이 이미 이쁜 UI로 구현이 돼 있다는 점이죠.

복잡한 커스터마이징은 어렵지만, 오디오, 비디오, 챗봇, 이미지, 텍스트, 확률 표시 등 머신러닝에서 자주 사용하는 기능들을 거의 코딩 없이 제공가능합니다.

사용법

먼저 gradio를 설치해 줍니다.

pip install gradio

아래가 기본적인 템플릿입니다.

 

 

이 템플릿을 실행 시켜보면 주소가 나오는데, 그 주소를 웹 브라우저에 복사 붙여넣기를 하면 다음과 같은 웹페이지가 뜹니다.

동작 방식

gradio는 기본적으로 fastapi를 기반으로 돌아갑니다.

복잡한 것들을 설명하기는 지면이 길어지니 주로 사용하는 예시들을 들어드리겠습니다.

12번째 줄은 함수가 들어갑니다. 정확히는 python의 callable이면 모두 들어갈 수 있습니다.

이에 대한 구체적인 구현은 4-7번째 줄에서 확인할 수 있습니다.

여기서 13번째 줄의 inputs 파라미터에는 어떤 종류를 넣을 것인지 결정할 수 있습니다.

여기서 inputs에 들어갈 수 있는 오브젝트들을 컴포넌트라고 합니다.

가장 기본적인 동작은 inference 함수의 parameter 명이 컴포넌트의 label 명이 됩니다.

즉 13번째 줄은 text 컴포넌트를 사용하겠다는 것이고, text의 label은 'my_input'이 됩니다.

조금더 자세히는 gr.components.Text 를 내부적으로 생성하게 되는데 자세한 설정을 하고 싶다면 이 컴포넌트를 직접 넘겨줘도 됩니다.

이왕이면 inference 함수의 parameter의 개수가 inputs의 개수가 일치하는게 좋습니다.

아래 예제를 보시면 더 이해가 쉽습니다.

 

 

이 코드는 아래와 같이 웹에서 랜더링 됩니다.

파라미터 명이 label이 되는 것을 확인할 수 있죠 (각 컴포넌트의 좌측 상단)

여러개의 output을 내보내고 싶다면 ,로 구분해서 (구체적으로는 tuple 형태로) return 해주면됩니다.

각 형의 어떤방식으로 랜더링할지는 outputs에 정해주면 됩니다.

구체적인 설정은 공식 document를 참고하시면 좋습니다.

https://gradio.app/docs/

 

Gradio Docs

Browse Gradio Documentation and Examples

gradio.app

어디서 든 내 모델을 사용할 수 있게 하기

아주 쉽습니다.

17 번 줄을 보시면 share=True 라는 코드가 있습니다.

이 코드를 입력하면 어디서든 접근 가능한 .gradio.live 로 끝나는 public url이 생성됩니다.

구체적으로는 터널링을 통해서 구현돼 있는데, 외부로 접근만 가능하다면 NAT 환경에서도 쉽게 사용이 가능합니다.

복잡한 것은 모르셔도 되지만, 그냥 어디서든 접근 가능하다 정도로 이해하시고 넘어가면 좋습니다.

한계점

유료 plan을 사용하지 않는 이상 저 URL은 3일정도만 유지 됩니다. 

직접 서버를 띄워서 사용하면 3일이상 사용할 수 있습니다.

클라우드에 EC2등에 띄워서 사용할 수 있습니다. 

하지만 EC2는 또 EC2 비용이 나가죠 ㅠㅠ

왜 디버깅하면서 이미지를 봐야하지?

제가 예전에 담당했던 업무중에 사람 얼굴의 특징점 (눈, 코, 입 등이라고생각하면 편하다) 가지고 기능을 짜야했던 적이 있었습니다. 지금도 그렇지만 그때는 텐서감수성이 떨어질 때라서, 현재 짜고 있는 코드가 맞게 동작하는지 잘 이해가 안가는 경우가 굉장히 많았습니다. 🙂

이미지 출처: https://towardsdatascience.com/facial-keypoints-detection-deep-learning-737547f73515?gi=529af36da233

이미지 출처: https://towardsdatascience.com/facial-keypoints-detection-deep-learning-737547f73515?gi=529af36da233

특히, 이게 단순 산술연산이 아니라 이미지상에서 어느 부분을 짜르거나, 어느 부분을 기준으로 뭔짓을 가해야하는 종류라면 정말 디버깅에 많은 시간이 걸립니다. (예를 들면 얼굴 부분만 자르기!)

짜도 그 이미지에 알맞게 적용됐는지, 머리속으로 상상은 해도 실제로 그렇게 짜졌는지 실행하기 전까지 불안에 떨어야 했죠.

따라서 디버깅 하면서 이미지를 보는 건 디버깅 시에 확실히 이점이 있습니다. 보면서 실수를 그때 그때 잡을 수 있으니까요. 특히 저 같은 뉴비 머신러닝러는 더더더더더더욱 그렇습니다.

이처럼 머신러닝, 특히 비전관련한 테스크를 하다보면 디버깅을 할 때 이미지 파일을 보면서 할 때 더편한 경우가 왕왕 있습니다.

대안들

중간중간 이미지를 보는 작업은 생각보다 편하지만, 단순하게 이미지를 로그처럼 찍는 방법은 생각보다 불편합니다. 이렇게 할 경우 폴더를 열어서 이미지를 켜봐야 하고, 코드에 삽입해서 작성함으로 그때 그때 모델을 실행해야하죠.

특히 후처리를 해야할 경우 매 실행마다 모델을 로드해야하기 때문에 더 오랜 시간이 걸리게 됩니다. 이것 때문에 코드하나 고치고 다시 재시작하고, 모델을 로드하는데 많은 시간을 소모하게 됩니다. 😢

다른 방법으로는 plt.show() 같은 짓을 코드에 삽입하는 겁니다. 그러면 scientific mode로 pycharm을 사용하면 되죠. 하지만 전 이 scientific mode를 좋아하지 않습니다. 솔직히 창도 번거롭게 많아지고 생각보다 기능이 불편했습니다. 제가 잘 사용하지 못하는걸까요.

플러그인

그래서 저는 주로 pycharm의 디버거를 사용하는데, 이 디버거에서 사용하기 매우 좋은 플로그인을 소개하고자 합니다.

바로 디버깅 중에 이미지를 보여주는 플러그인입니다.

https://plugins.jetbrains.com/plugin/14371-opencv-image-viewer

여기 들어가서 pycharm에 추가하면 파이참에서 dialog가 뜨는데 수락을하면 바로 pycharm에서 이 플러그인을 사용할 수 있습니다.

사용법

플러그인이 정상적으로 설치됐다면 디버깅을 원하는 지점에 break point를 등록 후 디버깅 모드로 실행합니다.

Watch에 등록된 image 형태의 numpy 배열을 우클릭했을 때, View as Image 라는 메뉴가 등록됐을 거에요.

image 형태의 numpy 배열이란 H x W x 1, H x W x 3 (BGR), H x W x 4 (BGRA) 형태의 배열입니다. $256 \times 256 \times 3$ 형태가 되겠죠.

근데 이 메뉴를 디버깅때마다 클릭하는 것은 좀 귀찮으니까 전 주로 단축키 alt+i 를 사용해서 디버깅합니다.

이미지 출처:  https://en.wikipedia.org/wiki/Image

그러면 이렇게 창이 뜨면서 디버깅중에 이미지를 볼 수 있습니다! 이렇게 이미지를 보면 그때 그때 이미지에 조작을 가하면서 프로그램이 정상동작하는지 볼 수 있습니다. 프로그램을 다시실행하지 않고도요!

기타 꿀팁

Color 변환

그런데 프레임워크별로 color format이 다릅니다. 예를들자면 matplotlib와 pillow의 경우, RGBA 형태로 로드하게됩니다. (PNG의 경우)

그러니까 이걸 그냥 그대로 보면 이렇게 원본 얼굴과 전혀 다른 형태로 이미지가 나오게 됩니다. pytorch도 RGB 형태로 BGR 형태로 바꿔줘야 올바른 색으로 볼 수 있죠.

즉 이런 경우 color foramt을 변경해줘야 하는데, cv2.cvtColor로 한줄코딩해주면 쉽게 변경해줄 수 있습니다.

matplotlib 으로 load한 경우

cv2.cvtColor(mat_image, cv2.COLOR_RGBA2BGRA) # matplotlib로 load한 경우

cv2 모듈의 색형식 변환 함수인 cvtColor를 통해서 변환해준 것입니다.

만약 Alpha channel이 필요없다면 cv2의 색형식 상수에서 A들을 빼주시면 됩니다.

pillow 로 load한 경우

cv2.cvtColor(np.array(pil_image), cv2.COLOR_RGBA2BGRA)  # pillow로 load한 경우

pillow가 return하는 image의 경우 numpy 형태가 아닙니다.

따라서 np.array로 변환해줘야 정상적으로 보입니다.

그리고 색변환을 수행해줘야하죠.

마무리

이게 뭐라고 상당히 글이 길어졌네요.

도움이 되셨으면 좋겠습니다.

다른 꿀팁이 있다면 공유해주시면 감사하겠습니다!

논문을 검색하고, 성능을 찾아보고, 또 비교하고 하는 작업은 사실 굉장히 피곤한 작업입니다.

특히 인력을 갈아 넣지 않는이상 혼자서 한 분야의 모든 논문을 서베이하고, 성능을 비교분석하는 것은 정말 어려운 일이죠. 

거기다 각종 지표들, 그리고 데이터셋들에 대해서 검색하고 읽을 만한 논문을 선정하는 작업자체가 굉장히 번거롭고 어렵습니다.

ML 계열에서 이런 것을 대신해줄 수 있는 사이트가 있습니다. 

 

 

Papers with Code - The latest in Machine Learning

Papers With Code highlights trending Machine Learning research and the code to implement it.

paperswithcode.com

해당 사이트에서는 각 영역별로 세부 task를 나누고

 

사이트에서 여러 데이터셋, 지표등을 활용해서 논문의 성능을 보여줍니다. 

뿐만아니라 여기 등록된 대부분의 paper는 코드까지 포함하고 있어서 쉽게 코드를 참고할 수 있어서 더욱 좋죠.

각 데이터셋 별로 최고의 SOTA를 달성한 논문과 코드를 리스트업해줍니다.

논문을 찾기 막막하거나, 완전히 새로운 도메인의 연구를 시작했다면 정말 큰 도움이 될 사이트입니다.

사실 이런사이트가 없었다면 서베이부터 읽어야 했을 것이고, 심지어 서베이가 나오지 않는다면 매번 새 논문들을 뒤적거려야 했겠죠... 

알맞는 지표나 데이터셋 차즌ㄴ데에도 활용할 수 있습니다.

다들 연구 화이팅

+ Recent posts