# 2.1 프로토타이핑 - Notebook 베이스(Voila)

> 실질적인 프로그래밍을 통한 Voila 익히기 

## 1. Voila

{% embed url="<https://github.com/voila-dashboards/voila>" %}

{% embed url="<https://voila-gallery.org>" %}

### 1.1. Voila 특징

* Voila의 본래 목적은 대시보드이다.
* 별도의 코드 추가없이 실행할 수 있다.
* Jupyter Notebook 결과를 쉽게 웹 형태로 띄울 수 있음
* Ipywidget, Ipyleaflet 등 사용 가능
* Jupyter Notebook의 Extension 있음(=노트북에서 바로 대시보드로 변환 가능)
* Python, Julia, C++ 코드 지원
* 고유한 템플릿 생성 가능
* 너무 쉬운 러닝커브

### 1.2. Installation

```
pip3 install voila

# nodejs 설치필요
apt-get install -y nodejs
apt-get install -y npm
npm install -g n
n latest
node -v

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

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

#nbextension도 사용 가능하도록 하고 싶다면 다음과 같이 설정
voila --enable_nbextensions=True
jupyter notebook --VoilaConfiguration.enable_nbextensions=True
```

## 2. ipywidget

## **Special Mission**

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lswkim322.gitbook.io/til/til-ml/boostcamp/p-stage-product-serving/part-2/2.1-notebook-voila.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.