Voila

-·2022년 1월 10일
0

강의정리 - MLOps

목록 보기
4/18

네이버 부스트캠프 ai tech 변성윤 강사님의 mlops강의를 정리한 글입니다 :)
문제나, 틀린부분이 있다면 말씀해주세요 !

Voila의 장점

  • Jupyter Notebook결과를 쉽게 웹 형태로 띄울 수 있음
  • ipywidget, ipyleaflect 등 사용가능
  • Jupyter Notebook의 Extension 있음(=노트북에서 바로 대시보드로 변환 가능)
  • Python, Julia, C++코드 지원
  • 고유한 템플릿 생성 가능
  • 너무 쉬운 러닝커브

Voila 사용하기 !

pip install voila 

jupyterLab 사용한다면
jupyter labextension install @jupyter-voila/jupyterlab-preview


jupyter Notebook이나 Jupyter Server를 사용한다면
jupyter serverextension enable voila --sys-prefix

소스를 같이 보고싶다 ( 출력물만이 아니라 )
--strip_source=False 와 함께 실행하면 Voila에서 코드도 보임(직접 실행은 불가능)
eg)
voila voila_basic.ipynb --strip_sources=False

Voila는 유저별로 새로운 Notebook Kernel을 실행시키는 구조
Voila 노트북을 사용하지 않을 때 자동으로 종료해야 함
Jupyter Notebook의 Config에서 cull 옵션을 확인할 수 있음

idle 상태인 경우 cull (끄는 행위)
cull_interval : idle커널을 확인할 간격(초)
cull_idle_timeout: 커널을 idle 상태로 판단할 기준(초). 이 시간동안 이벤트가 없으면 idle로 판단 

voila voila_basic.ipynb --MappingKernelManager.cull_interval=60 
						--MappingKernelManager.cull_idle_timeout=300
                        
Voila 사용시 Tip
Voila 셀 타임아웃 제한
- 아무설정하지 않으면 하나의 Cell이 30초 이상 진행되면 Timeout Error를 발생
무거운 연산 (전처리, 예측)등에서 이슈
Voila 실행시 인자를 주어서 타임아웃 제한 시간을 늘릴 수 있음
voila --ExecutePreprocessor.timeout=180

JupyterNotebook 실행할때 다음과 같이 인자를 설정할 수 있음
jupyter notebook --ExecutePreprocessor.timeout=180


보안에 신경쓰는 습관을 가져야 함

- Jupyter Notebook의 passwd를 사용해 암호를 지정할 수 있음

1. Jupyter Notebook의 설정 파일 생성하기(있다면 Skip)

jupyter notebook --generate-config
경로에 config파일이 저장된걸 보여줌.

터미널에서 python 실행후 아래 코드 실행
from IPython.lib.import passwd
passwd()
sha1로 된 암호가 나타남. 'sha1~~'값 복사 

아까 생성된 jupyter notebook config로 진입 
vi ~/.jupyter/jupyter_notebook_config.py

c.NotebookApp.password를 찾아서 우측에 복사한 sha1값을 붙여넣기
ESC :wq로 저장하고 나오기 

이제 암호를 입력해야 함
암호를 입력한 후 Voila에 접근할 수 있음

# ipywidget
인터랙티브한 효과를 줄 수 있음
https://ipywidgets.readthedocs.io/en/stable/

ipywidget도 Notebook 프로젝트
다양한 Widget을 보면서 "어떤것을 만들 수 있을 것 같다" 라는 생각 해보기 !!

ipywidget코드 


import ipywidgets as widgets
from IPython.display import display 
# display : Python Object를 보여주는 함수 
#Widget
#IntSlider : 정수형 슬라이더

widgets.IntSlider()

int_slider = widgets.IntSlider()
display(int_slider)

#IntSlider의 인자(FloatSlider 등도 유사)
valuer : Default값
min
max
step : 한번에 이동할 단계
orientation : 수직, 수평선 'vertical', horizontal'
description : Slider의 Label

#IntRangeSlider
widgets.IntRangeSlider(
	value=[3,5],
    min=0,
    max=10,
    step=1,
    description="Int Range : " )
    
#slider의 객체를 만든 후 
# int_widget.value를 출력하면 값이 보임
# int_widget.value = 8을 할 경우 값이 변경 됨 

#Slider가 아닌 Input입력
#- Bounded : 범위가 주어진 Text
#마찬가지로 .value로 값에 접근 가능

#String Text위젯

widgets.Text(
	value="hello world",
    placeholder="Type something",
	description="String",
    )
widgets.Textarea(
	value='Hello World",
    placeholder= "Type something",
    description = 'String',
widgets.Password(
	value='password',
    placeholder='Enter password',
    description='Password'
    )
    
 
#Boolean Widget
#Toglle Button
# - button_style : 버튼의 스타일 -> 색깔 바뀜 
# - icon : 사용하는 아이콘 

widgets.ToggleButton(
	value=False,
    description= 'click me',
    button_style = '', #'success', 'info', 'warning', 'danger', ''
    tooltip='Description',
    icon = 'check' #FontAwesome에서 확인할 수 있음 # 'at', 'battery-3',...,
    
widgets.Checkbox(
	value=False,
    description='Check me',
    indent =False
    )
    
    
##Selection Widget

#Dropdown

widgets.Dropdown(
	options=['1','2','3'], #options = [('One',1),('Two',2),], #(key,value)형태 가능 
    value = '2',
    description='Number',
    disabled=False,
    )
 
#RadioButtons

widgets.RadioButtons(
	options=['pepperoni','pineapple','anchovies'],
    dexcription='Topping:',
    )

# Upload Widget
#파일을 업로드하는 Widget

widgets.FileUpload(
	accept='', #허용할 확장자 ''은 모든걸 허용하겠다 !
    multiple=False #여러 파일을 업로드하고 싶으면 True, 단일 파일은 False
    )
    
#Image Widget

file = open("JODONG2.png","rb")
image = file.read()
widgets.Image(
	value=image,
    format='png',
    width=300,
    height=400,
	)

#Date Picker Widget
#Date를 선택하는 widget
#Date,Time,DateTime도 있음
widgets.DatePicker(
	description='Pick a Date',
    disabled=False,
    )
    
#Widget Events(on_click)
#버튼이 클릭되었을 때, 어떤 함수가 동작하길 원하는 경우
# on_click인자에 함수를 넘겨주면 됨

button = widgets.Button(description="click Me!")
output = widgets.Output()

display(button, output)

def on_button_clicked(button):
	with output:
    	print("Hello world!")

button.on_click(on_button_clicked) #위에서 선언한 button변수

#Widget Events(observe)
#위젯의 값이 변경되는 것을 감지해서 특정 함수를 실행하고 싶은 경우
#observe인자에 함수를 넘기면 됨

int_range = widgets.IntSlider()
output2= widgets.Output()

display(int_range, output2)

def on_value_change(change):
	with output2:
    	print(change['new'])

int_range.observe(on_value_change, names='value')

#interact Decorator
# @interact 데코레이터를 사용하면 UI 컨트롤러가 생성
# 함수의 인자를 받아서 UI가 생성됨
# 아래의 예시에서 자동으로 x는 체크박스 y는 FloatRangeSlider생성

from ipywidgets import interact

@interact(x=True,y=1.0)
def g(x,y):
	return(x,y)


#만약 함수의 인자 중 하나는 고정하고 싶고, UI에서 나타나는 것을 원하지 않는 경우 fixed를 사용할 수 있음
#아래의 예시에서 z는 UI로 보여지지않고 10이라는 값이 사용됨
from ipywidgets import interact, fixed

@interact(x=True, y=1.0, z=fixed(10))
def g(x,y,z):
	return (x,y,z)

#Layout(HBox,VBox)
#위젯의 레이아웃을 구성하고 싶은 경우 HBox, VBox를 사용
# - VBox:수직으로 구성(세로)
# - HBox:수평으로 구성(가로)

Voila 실습 !

num slider

위와 같이 실행할 경우 float_slider를 보여주는 가장 위의 슬라이더와 가장 아래의 슬라이더는 같이 움직이게 된다. value를 코드를 통해 조절할때 min과 max의 range를 벗어나면 오류를 날려줄까 싶었지만 1900~2022의 범위에서 1000을 넣어줘도 1900을 출력해주었다.

text

text를 받고 수정할 수 있다. 마지막에 조금 짤렸는데
string_Textarea.value= "Hello Text area!!!!"

셀이 있다. 실행시키니 Textarea박스 내의 문자열이 변경되는것을 확인할 수 있었다.

다음은 비밀번호처럼 모자이크된 text를 보여준다. string_pw.value로 접근하게 되면 당연하겠지만 모자이크 없이 string의 value를 확인할 수 있다.
string_pw.value를 수정하는것 또한 가능하다.

button

위의 글과 참고하여 보면 button_style, icon 등은 종류가 다양하다. 일반적인 클래스처럼 Drop_down.disabled , Drop_down.options를 통해 접근이 가능하다. display를 다시 실행시켜보면 변경된 값으로 보여진다. 라디오버튼을 만들수도 있다. 세로로 보이는것이 이상하여 파라미터로 orientation이 있을까 싶어 해봤지만 변경되지는 않았다.

FileUpload

정채연의 사진을 올린게 잘못중 하나였다. 한글을 통한 접근이,.., 안되는걸까 나의 실수였을까. 아무튼 업로드된 파일은

'파일이름.확장자':
	metadata : 
        	name:
           	type:
           	size:
           	lastModified:
        content:
       
    

로 구성되어 있다. content에 해당하는 부분이 이미지이다.

해당 이미지에 접근하기위해

위와 같이 접근했다. 보다 간결한 코드는 다음 실습영상을 정리하는 글에서 다시 한 번 정리하겠다. 내 기억엔 보다 간결한 코드를,,설명해주신다. 역시 한 번만 보면 안돼,,

on_click, observe

observe, on_click 을 통해 버튼, 입력값등이 변했을때 함수를 실행할 수 있다. 다음 정리할때는 출력을 초기화하고 새로 출력하는 것을 찾아봐야겠다.
슬라이드 한 번 슥 긁었더니 출력이 백만개나와서 당황했다.

다음과 같이 interactive 데코레이터를 사용하면 변수에 맞는 알맞은 ui를 보여준다.
내가 만든 모델보다 이게 오히려 인공지능같은데?.., 멋지다.
profile
-

0개의 댓글