The new age of Jupyter widgets -번역

Jupyter 위젯의 새로운 시대

NPM을 사용하여 Python으로 Jupyter 위젯을 빌드 할 수 있다면 어떨까요?

Photo by Myriam Jessier on Unsplash

노트북은 항상 소프트웨어 아이디어의 점진적 개발을위한 도구였습니다.데이터 과학자는 Jupyter를 사용하여 작업을 저널링하고, 새로운 알고리즘을 탐색 및 실험하고, 새로운 접근 방식을 빠르게 스케치하고, 결과를 즉시 관찰합니다.

이러한 상호 작용이 Jupyter를 매력적으로 만드는 이유입니다.한 단계 더 나아가 데이터 과학자는 Jupyter 위젯을 사용하여 결과를 시각화하거나 콘텐츠 탐색을 용이하게하거나 사용자 상호 작용을 장려하는 미니 웹 앱을 만듭니다.

하나,IPyWidgets아니항상 작업하기 쉽습니다.이들은 프런트 엔드 개발자가 개척 한 선언적 디자인 원칙을 따르지 않으며 결과 구성 요소는 브라우저 환경에서 그대로 전송할 수 없습니다.또한 개발자는 대부분 데이터 과학자의 시각화 요구 사항을 충족하기 위해 이러한 라이브러리를 만들었습니다.따라서 React 및 Vue와 같은 인기있는 프런트 엔드 프레임 워크가 제공하는 기능이 부족합니다.

다음 단계를 밟아야 할 때입니다.이 스토리에서는 대화 형 웹 페이지를 정의 및 제어하거나 시각적 Jupyter 구성 요소를 만들기위한 라이브러리 집합 인 IDIOM을 소개합니다.후자에 대해 논의 할 것입니다.

학습률AI와 MLOps의 세계에 대해 궁금한 사람들을위한 뉴스 레터입니다.매주 금요일 최신 AI 뉴스 및 기사에 대한 업데이트와 의견을 들으실 수 있습니다. ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ구독여기!

IDOM : Python의 React 디자인 패턴

이제 IDOM을 시작하겠습니다.React에 익숙한 사람들은 IDOM이 작업하는 방식에서 많은 유사점을 찾을 수 있습니다.

Jupyter 내에서 간단한 TODO 애플리케이션을 만들 것입니다.예, 이것이 데이터 과학자에게 어떻게 도움이 될지 모르겠습니다.하지만 제가하려는 것은 IDOM의 능력을 보여주는 것입니다. ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ데이터 과학 사용 사례를 찾으면 댓글에 남겨주세요!

첫째, 코드입니다.그런 다음 작동 방식을 이해하기 위해 한 번에 한 줄씩 살펴 보겠습니다.

그만큼idom.component데코레이터는구성 요소건설자.이 구성 요소는 그 아래에있는 함수를 사용하여 화면에서 렌더링됩니다 (예 :할 것()).그런 다음이를 표시하려면이 함수를 호출하고 끝에이 구성 요소의 인스턴스를 만들어야합니다.

이제이 함수의 기능에 대해 알아 보겠습니다.첫째,use_state ()기능은.이 메서드를 호출하면 현재 상태 값과이 상태를 업데이트하는 데 사용할 수있는 함수의 두 가지가 반환됩니다.우리의 경우 현재 상태는 빈 목록 일뿐입니다.

그런 다음 내부에서 업데이트 기능을 사용할 수 있습니다.add_new_task ()우리가 원하는 것을 할 수있는 방법.이 함수는 이벤트를 가져 와서 키보드를 눌러 이벤트가 생성되었는지 확인합니다.시작하다키.사실이면 이벤트 값을 검색하여 작업 목록에 추가합니다.

사용자가 생성 한 작업을 저장하기 위해 별도의작업간단한 삭제 버튼과 함께 Python 목록.삭제 버튼을 누르면remove_task ()함수는 다음과 같이 상태를 업데이트합니다.add_new_task ()함수.그러나 현재 상태에 새 항목을 추가하는 대신 선택한 항목을 제거합니다.

마지막으로 TODO 작업을 생성하기위한 input 요소와이를 보유 할 HTML 테이블 요소를 생성합니다.마지막 단계에서는divHTML 태그.

좋아진다

여태까지는 그런대로 잘됐다.그러나 IDOM이 제공하는 힘은 HTML 요소를 표시하는 데 국한되지 않습니다.IDOM의 진정한 힘은 모든 React 생태계 구성 요소를 원활하게 설치하고 사용할 수있는 능력에서 비롯됩니다.

이 예에서는승리, 모듈 식 차트 및 데이터 시각화를위한 일련의 React 구성 요소입니다.승리를 설치하기 위해 IDOM CLI를 사용할 수 있습니다.

! idom 설치 승리

그런 다음 코드에서 사용하겠습니다.

축하합니다!방금 다음을 사용하여 원형 차트를 만들었습니다.승리Jupyter 노트북에서!물론 기존 JavaScript 모듈을 가져 와서 사용하는 것도 간단합니다.방법보기선적 서류 비치.

결론

데이터 과학자는 Jupyter 위젯을 사용하여 결과를 시각화하거나 콘텐츠 탐색을 용이하게하거나 사용자 상호 작용을 장려하는 미니 웹 앱을 만듭니다.

하나,IPyWidgets작업하기가 항상 쉬운 것은 아닙니다.또한 몇 가지 단점이 있습니다. 선언적 설계 원칙을 따르지 않고 결과 구성 요소를 브라우저 환경에서 그대로 전송할 수 없습니다.

다음 단계를 밟아야 할 때입니다.이 스토리에서는 대화 형 웹 페이지를 정의 및 제어하거나 시각적 Jupyter 구성 요소를 만들기위한 라이브러리 집합 인 IDIOM을 살펴 보았습니다.

IDIOM API는선적 서류 비치.또한idom-jupyter의 위에접합재, 설치하기 전에.

저자에 대하여

내 이름은디미트리 스 풀로 풀 로스, 저는 기계 학습 엔지니어로Arrikto.저는 European Commission, Eurostat, IMF, European Central Bank, OECD 및 IKEA와 같은 주요 고객을 위해 AI 및 소프트웨어 솔루션을 설계하고 구현했습니다.

Machine Learning, Deep Learning, Data Science 및 DataOps에 대한 더 많은 게시물을 읽고 싶다면 저를 팔로우하십시오.매질,LinkedIn, 또는뿡뿡트위터에서.또한자원내 웹 사이트의 페이지, 훌륭한 책과 최고 등급의 코스를위한 곳으로, 자신 만의 데이터 과학 커리큘럼을 구축하기 시작하세요!

Leave a Comment