1. 추천 파일 구조
├── app.py # 플라스크 실행 파일
├── static # css 파일 구조 ( css 파일 출처 : https://github.com/cbernet/jupyter_web )
│ └── css
│ ├── main.css
│ ├── notebook.css
│ └── pygments
│ └── notebook
│ └── colorful.css
└── templates # html 파일 디렉션
├── jupyter # 주피터노트북 구동 디렉션
│ ├── Untitled.html # 주피터노트북 html 로 저장
│ └── Untitled.ipynb # html 파일
└── main.html # main 페이지 html 파일
2. 주피터 노트북파일을 html 파일로 저장
- jupter 디렉션에서 아래 명령어를 입력하면 ipynb 파일을 html 파일로 전환 할 수 있습니다.
(터미널 실행)
jupyter nbconvert --execute --template basic Untitled.ipynb --to html!! 주의 !! : template 옵션을 basic으로 주면 아무 스타일 없이 아래 그림처럼 html 파일이 저장 됩니다.
즉 ! css 파일을 새로 구성하여 스타일을 입혀주어야 합니다.
3. main.html 파일 작성
- static 경로에 있는 css 파일도 html 파일과 연동시키고,
(css 를 일일이 구성할 수 없어 https://github.com/cbernet/jupyter_web 에서 css 파일을 가져왔습니다)
- jinja 2 명령어를 이용하여 Untitled.html 파일을 main.html 파일에 끼워넣습니다.
- 아래 코드는 main.html 파일 코드 입니다.
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/notebook.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/pygments/notebook/colorful.css') }}">
<link rel="stylesheet" href=" {{ url_for('static', filename='css/main.css') }}">
</head>
<div>
<h2>hello flask</h2>
{% include "/jupyter/Untitled.html"%}
</div>
4. 플라스크를 실행하는 app.py 파일은 아애롸 같이 작성합니다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def main():
return render_template("main.html")
if __name__ == '__main__':
app.run('0.0.0.0',port=8081,debug=True)
5. python app.py 를 통해 웹서비스를 수행하면 아래와 같이 hello flask 밑에 주피터 노트북 html 파일이 끼워 들어간 것을 확인할 수 있습니다.
[참고 사이트]
https://thedatafrog.com/en/articles/jupyter-notebooks-web-pages/
Jupyter Notebooks in Web Pages
Learn how to integrate jupyter notebooks in a web page, and how to highlight code and show nice equations.
thedatafrog.com
'python web framework' 카테고리의 다른 글
| flask render_template, flask html 파일 연동 (0) | 2023.04.21 |
|---|---|
| 플라스크 시작하기 flask hello world, hello flask, hellp python (0) | 2023.04.06 |
| 플라스크(flask) session을 이용한 로그인 / 로그아웃 (0) | 2023.03.29 |
| flask 폴더에 있는 이미지 불러오기 html (0) | 2023.03.22 |
| flask css 파일 연동 하기 / 플라스크 css 파일 적용하기 (0) | 2023.03.21 |
댓글