알고리즘 시각화 라이브러리 ipytracer 개발기

ipytracer 개발기
이한
내 코드는 어떻게 동작하고 있을까?

발표자 소개
휴학중
sn0wle0pard
인턴

#1 Back To The Basic
처음 프로그래밍을 배울 때

Python REPL
Read Eval Print Loop
읽고 실행하고 반복출력하고

Print 프로그래머
콘솔, 로그, I/O 등등
텍스트

처음 프로그래밍을 배웠을때로 돌아가 보죠!

Print 제가 처음 배웠을 때

내 코드는 뭘 하고 있는 거지?

지금 이 배열의 값은 무었일까?

어디서 무슨 일이 일어나는지 보기 위해 Log를 사용한다

어느새 코드는 Print 범벅

하지만 여전히 까만건 배경이고 하얀건 글씨

{ }
Print 순서도
내 코드를 바로 순서도로 변환할 수는 없을까?

중학생때 처음시도
대학교 1학년때 pyqt를 보고 시도
그러나 너무나 어려웠던
실시간 코드 시각화
드래그로 GUI를 만들 수 있다고? 이건 신세계야!
이렇게 재미있는 파이썬으로 GUI를 만들수 있다고? 이건 신세계야!
Print 좀 더 화려하게!


브라우저 마다 조금 다르게 보인다

최신 사양은 언제쯤 쓸 수 있을까

이거 내 생각대로 보이는거 맞아?

세로 중앙 정렬!!!
그러나, 화려하고 복잡한 시각화를
비교적 쉽게 구현 가능
Print CSS

Print CSS와 친구들
코드 실행 과정을 웹으로 보여주자!

#2 로직과 데이터
시각화 방법을 찾았다, 그런데 무엇을 보여줄까?

tracer 시각화
순서도

논리를 한눈으로 확인하기는 좋음

하지만 코드에서 바로 순서도를 만드려면 ?

결국 뭐를 보여줘야 하지?

Algorithm Visualizer
parkjs814/AlgorithmVisualizer

tracer 시각화
나쁜 프로그래머는 코드에 대해 걱정하고,
좋은 프로그래머는 데이터 구조와 그들 사이의 관계를 걱정한다
리누스 토발즈
https://lwn.net/Articles/193245/
프로그램에서 주목할 것은 데이터의 흐름과 변화

tracer 프로그래밍
처음에는 로직에 집착

어떻게 하면 코드를 순서도로 바꿀 수 있을까?
데이터를 생각

대부분의 ‘로직’은 값을 만들고 가공한다

데이터의 변화가 일어날때 이벤트를 걸어준다면?

Python을 선택한 이유는 의사코드와 가장 유사하고,
C++나 Java와 같은 다른 언어에 비해 읽고 이해하기 쉬워서 이다.
마시모 디 피에로
파이썬으로 배우는 실전 알고리즘 中
간결한 문법, 연산자 오버로딩 지원, 데이터 처리에 유리
ipytracer Python


처음 파이썬을 배운 사람들도 쉽게 적응 할 수 있게 하자

list의 연산자 및 메소드를 최대한 그대로 쓰게 하자

코드의 큰 변경 없이도 시각화 할 수 있게 하자

파이썬 코드 실행 결과를 웹으로 보여주자
ipytracer 목표

ipytracer 소개
Algorithm Visualizer for Jupyter/IPython Notebook

Demo
https://github.com/sn0wle0pard/ipytracer

ipytracer 작동원리
foo = Tracer(data)
print(foo[0])
foo[0] = “I LOVE Py”
평범한 코드 내부에서 일어나는 일
class Tracer:
def __getitem__
def __setitem__

ipytracer 작동원리

데이터의 변화가 감지되면 보여주자
> getitem, setitem 이벤트가 발생하면 시각화

Ipytracer: 시각화 코드가 있는 list like 객체

파이썬 코드가 실행되면 웹으로 보여준다

#3 Jupyter Notebook
파이썬과 자바스크립트를 섞어 봅시다

jupyter 소개
Input column
터미널을 벗어나 웹에서 다양한 방법으로 실행 결과를 받아볼 수 있다
Output column

Repr, Str, Print, 연산 결과를 cell로 보여줌
HTML, JS, Markdown도 가능
jupyter 소개

jupyter 소개
다양한 프로토콜을 사용해 웹과 파이썬의 데이터를 동기화 해준다

jupyter 동기화
https://github.com/jupyter-widgets/ipywidgets

jupyter 동기화
class Tracer:
def __getitem__(self, index):
display(HTML(‘some code’))
return self.data[index]

ipywiget

시각화를 위한 JS/CSS파일을 읽고 올려야 하는데...

for loop 에서 값이 변할 때마다 HTML을 업데이트 하고 싶은데...

직접 통신은 어려운 일

Python, Web의 양방향 동기화 지원

Python 라이브러리와 JS라이브러리가 각각 있다

라이브러리를 만들 때는 둘 다 써서 작업해야 한다

from ipywidgets import DOMWidget
from traitlets import Unicode, Int
class MyWidget(DOMWidget):
_view_module = Unicode('mywidget').tag(sync=True)
_view_name = Unicode('MyWidgetView').tag(sync=True)
count = Int().tag(sync=True)
ipywidget Python

Jupyter은 __repr__또는 display 함수를 실행해 보여준다

DOMWidget은 _ipython_display 함수로 미리 처리 되어 있음

나만의 Widget을 만드려면 DOMWidget을 상속해야 한다

보여줄 JS View 이름과 ViewModel 이름도 정의 해야 한다

jupyter Json

당연히 Python Object를 JS Object로 직접 사용 불가

두 언어 모두 읽고 쓸 수 있는 JSON을 써서 동기화

즉 동기화할 데이터는 직렬화를 해줘야 함

traitlets 소개

https://github.com/ipython/traitlets

파이썬을 위한 타입체킹, 변화 감지확인 라이브러리

값의 변화, 타입체킹등에 콜백함수 등록이 가능하다

DOMWidget에서는 tag(sync=True)함수를 콜백에 등록해 동기화

이후 값이 변하면 자동으로 view_model에 동기화

타입체킹 라이브러리임에 유의
예: ipytracer의 경우 어떤 index가 변했는지도 동기화 하는데 슬라이싱을 할 경우 [:5] 빈 index에는
None이 들어가 문제가 생김

traitlets 발견한 문제점

Python 데이터가 변해도 가끔 동기화가 안된다

???

Immutable 한 변수는 문제 없음

Mutable 한 변수는 문제가 있음

저는 self.data = list(data) 처럼 해결

ipywidget ipytracer
class TracerView(DOMWidget):
data = List().tag(sync=True)
_view_module = Unicode('ipytracer').tag(sync=True)
_model_module = Unicode('ipytracer').tag(sync=True)
selected = Int(-1).tag(sync=True)
visited = Int(-1).tag(sync=True)
def __init__(self, data, **kwargs):
super(TracerView, self).__init__(**kwargs)
self.data = data
def update_data(self, data):
self.data = list(data)
def update_visited(self, index):
self.visited = index
class Tracer(object):
def __init__(self, data):
self.data = data
self.delay = 0.25
self.tracer = TracerView(self.data)
def __getitem__(self, key):
self.tracer.update_visited(key)
time.sleep(self.delay)
return self.data[key]
def __len__(self):
return len(self.data)
def _ipython_display_(self, **kwargs):
display(self.tracer)

import * as widgets from 'jupyter-js-widgets';
import * as _ from 'underscore';
export class TracerView extends widgets.DOMWidgetView {
render() {
super.render();
this.listenTo(this.model, 'change:data', this._data_change, this);
}
_data_change() {
this.el.textContent = this.model.get('data').length();
}
}
export var TracerModel = widgets.DOMWidgetModel.extend({
defaults: _.extend({}, widgets.DOMWidgetModel.prototype.defaults, {
_view_name: 'TracerView',
_model_name: 'TracerModel',
data: [],
})
});
ipywidget JavaScript

ipywidget JavaScript

Backbone.js 기반

webpack으로 번들링(css, js, etc)

AMD형식으로 만들어야 한다

상속 후 render함수를 만들면 된다

데이터 변화는 listenTo 함수에서 확인

보여줄 HTML은 this.el 을 변형!

ipywidget 개발

이걸 언제 다 설정하죠?
Cookie cutter가 있습니다.
https://github.com/jupyter-widgets/widget-cookiecutter

디버깅과 테스트는 어떻게 할까요?
Python은 column 에서 오류를 보여주고, JS는 개발자 도구를,
테스트는 ...

내가 원하는 시점에 widget을 보여주고 싶어요!
from ipython.core.display import display !

정리

특별한 함수를 쓰지 않고 getter, setter를 수정

덕분에 기존코드와 큰 차이 없음

Print 함수를 display 함수로 변경하면 끝!

파이썬도 시각화도 놓칠수 없다면? Jupyter

데이터 교환과 그에 따른 시각화? Ipywidget

다만, 동기화 할 때 쓰이는 traitlets 라이브러리에 주의

알고리즘 시각화 라이브러리 ipytracer 개발기

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 알고리즘 시각화 라이브러리 ipytracer 개발기

Similaire à 알고리즘 시각화 라이브러리 ipytracer 개발기 (20)

알고리즘 시각화 라이브러리 ipytracer 개발기