KyungHyun Lim

KyungHyun Lim

ML/AI/SW Developer

© 2023

Dark Mode

프로토타이핑 - Notebook 베이스(Voila)
Dec 6, 2021
  • ML_AI
  • Serving

0. 강의 소개

Part2에 오신 것을 환영합니다!
Part1에서는 전체적인 내용에 대해서 개념적으로 훑어보는 시간을 가졌다면, Part2부터는 실질적으로 프로그래밍을 하게됩니다.
이번 강의에서는 저희가 가장 익숙한 노트북 환경에서 간단하게 프로토타이핑을 할 수 있는 Voila에 대해서 배워보도록 하겠습니다.

1. Voila

1.1 프로토타입이 중요한 이유

  • 라이브러리의 의존성, 테스트를 위해 추가 환경 설정이 필요
  • 개발을 잘 모르는 분에게 테스트 요청할 경우 어려움이 있을 수 있음
  • HTML로 추출할 수 있지만, … 용량에 따라 느려질 수 있음
  • 이 모델이 어떤 결과를 반환할지 테스트 가능
    • 익숙한 노트북에서 진행시 시간절약 가능
    • ipywidget을 통해 간단한 대시보드 구축 가능
    • 실행시 저장된 Notebook 파일이 순차적으로 실행
  • 이럴때, 사용할 수 있는 도구 -> Voila

1.2 Voila

  • https://github.com/voila-dashboards/voila
  • 예시
  • 다양한 도구들이 존재
    • Superset, Metabase, Redash, Tableau
    • 다만 위 도구는 모두 서버에 제품을 설치한 후 연동이 필요
    • 대부분 SQL 베이스의 시각화
  • Notebook에서 별도의 코드 추가 없이 실행할 수 있는 점이 Voila의 강점
    1. Jupyter Notebook 결과를 쉽게 웹 형태로 띄울 수 있음
    2. Ipywidget, Ipyleaflet 등 사용 가능
    3. Jupyter Notebook의 Extension 있음(=노트북에서 바로 대시보드로 변환 가능)
    4. Python, Julia, C++ 코드 지원
    5. 고유한 템플릿 생성 가능
    6. 너무 쉬운 러닝커브
  • 참고
    • https://blog.jupyter.org/voil%C3%A0-is-now-an-official-jupyter-subproject-87d659583490

1.3 Voila 사용하기

  • 설치하기
    • 라이브러리 설치 
        pip install voila
    • Jupyter lab을 사용한다면
      jupyter labextension install @jupyter-voila/jupyterlab-preview

  # Notebook이나 Server를 사용하면 
  jupyter serverextension enable voila --sys-prefix
    • nbextension도 사용 가능하도록 하고 싶다면 다음과 같이 설정
      voila --enable_nbextensions=True
  jupyter notebook --VoilaConfiguration.enable_nbextensions=True
  • Jupyter Lab을 실행시키고 좌측 아래 버튼을 확인하면 Enable이 보임

2. ipywidget

2.1 ipywidget 사용법

  • ipywidget과 같이 사용하면 인터랙티브한 효과를 줄 수 있음
    • ipywidget도 Notebook 프로젝트
  • 참고
  • widget 종류
    • import 부분
    • 정수형 슬라이더(FloatSlider, IntRangeSlider)
      • value : Default 값
      • step : 한번에 이동할 단계
      • orientation : 수직, 수평선
      • description : Slider의 Label
    • Bounded : 범위가 주어진 Text
    • String Text 위젯
    • ToggleButton
      • button_style : 버튼의 스타일
      • icon : 사용하는 아이콘
    • CheckBox
    • Dropdown, RadioButtons
    • 파일을 업로드하는 Widget
    • Image를 보여주는 Widget
    • Date를 선택하는 Widget
  • 특수 이벤트
    • 버튼이 클릭되었을 때, 어떤 함수가 동작하길 원하는 경우, on_click 인자에 함수를 넘겨주면 됨
    • 위젯의 값이 변경되는 것을 감지해서 특정 함수를 실행하고 싶은 경우, observe 인자에 함수를 넘기면 됨
    • @interact 데코레이터를 사용하면 UI 컨트롤러가 생성
      • 만약 함수의 인자 중 하나는 고정하고 싶고, UI에서 나타나는 것을 원하지 않는 경우 fixed를 사용할 수 있음
  • Layout
    • 위젯의 레이아웃을 구성하고 싶은 경우 HBox, VBox를 사용
      • VBox : 수직으로 구성(세로)
      • HBox : 수평으로 구성(가로)

2.2 ipywidget + Voila

  • ipywidget에서 Voila를 클릭하면 렌더링이 된 화면을 볼 수 있음

3. Special Mission

  1. Jupyter Notebook으로 만든 마스크 분류 모델을 Voila로 띄워보기
  2. ipywidget 공식 문서 읽어보기
  3. 데이터 시각화 파트에서 배운 내용과 ipywidget을 사용해 인터랙티브한 대시보드 만들기

Reference

  • AI boot camp 2기 서빙 강의