どんな記事？
- Jupyter notebook出力で、HTML表現を扱ってみた
- ボタンクリックで処理が動くようにしてみた
動機
Jupyter notebookで書いた処理を、プロトタイプデモ用に見栄えをかっこよくしたかったわけです。
PySimpleGUIも立ち上げてみましたが、WSL環境ではディスプレイ出力周りが面倒で、手元環境以外で動かしてもらうのが大変そうに感じました。
ということでJupyter notebook上で完結させたく、
- 出力文字の大きさや太さを変える
- アイコン画像を差し込む
- ボタンで処理起動させる
をやってみました。
特にHTML表現をすれば良いと気づくまでに時間が掛かって、あまり情報が落ちてなかったので、記事にしてみました。
動作環境
- Python 3.6.9
- ipywidgets 7.6.3
- Jupyter Notebook 6.4.0
参考コード
code.py
import ipywidgets as widgets
from IPython.display import display, HTML, Image
def visualize(clicked_button: widgets.Button) -> None:
with output:
output.clear_output()
#making output text
text = 'Correct' if result == 1 else 'Wrong'
#display
display(HTML("<big><b>"+text+ "</b></big><br/>,so...<br/>"))
if result == 1:
display(Image(filename='いいねの手のアイコン.png', width = 100, height = 100))
else:
display(Image(filename='よくないねアイコン1.png', width = 100, height = 100))
#for debug
#result = 1 #Correct result
result = 0 #Wrong result
button = widgets.Button(description='Click me')
output = widgets.Output(layout={'border': '2px solid black'})
button.on_click(visualize)
display(button, output)
以下のように出力されます。
まとめ
-
display(HTML(~~))で囲めばHTML表現できるので、文字もいじれるし改行もできます -
display(Image(~~))で画像が読めます - ボタン実装は
ipywidgetsでできます