Optuna Dashboardの紹介と設計解説 - 2022/12/10 Optuna Meetup #2
0 likes9,936 views
Optuna Dashboardの基本的な使い方や最近入った新機能の紹介、設計や内部実装に関する解説を行います。 イベントサイト: https://optuna.connpass.com/event/260301/
![16
静的ファイルの配信
● 実際にはAPIの提供だけではな
く、静的ファイル配信も担当
gzip対応
● バンドル済みJSや画像は、gzip
圧縮したものもsdistに同梱
● Accept-Encodingヘッダーを確
認して適宜返却
静的ファイルの配信
from bottle import request, response, static_file
def create_app(storage: BaseStorage) -> Bottle:
...
# Accept any following paths for client-side routing
@app.get("/dashboard<:re:(/.*)?>")
def dashboard():
return static_file("index.html", ...)
@app.get("/static/<filename:path>")
def send_static(filename: str):
if "gzip" in request.headers["Accept-Encoding"]:
gz_filename = filename.strip("/") + ".gz"
if os.path.exists(...):
filename = gz_filename
return static_file(filename, root=STATIC_DIR)
...
optuna_dashboard/_app.py (一部簡略化)](https://image.slidesharecdn.com/optunadashboard-221206085312-5164e6c0/85/Optuna-Dashboard-2022-12-10-Optuna-Meetup-2-16-320.jpg)
Optuna Dashboardの紹介と設計解説 - 2022/12/10 Optuna Meetup #2
- 1. Optuna Dashboard の紹介と設計解説 2022/12/10 Optuna Meetup #2 Masashi Shibata（GitHub: @c-bata）
- 2. 2 Masashi Shibata / @c-bata ● Preferred Networks, Inc. / エンジニア ● Optunaコミッター ● Optuna Dashboard, CyberAgentAILab/cmaes, Goptuna 作者 ● Kubeflow/Katibレビュアー ● 共訳書「エキスパートPythonプログラミング 改訂2版/改訂3版 (KADOKAWA) 」 、著書「実践Django (翔泳社) 」 ● 前回の発表：CMA-ESサンプラーによるハイパーパラメータ最適化 - Optuna Meetup #1
- 4. 4 概要 ● Optunaの試行結果を手軽に確認できるWebアプリケーション ● 当初はGoptuna (https://github.com/c-bata/goptuna)のために実装。 その後Optunaからも使えるようにAPIサーバーをPythonで再実装。 ● GitHub: https://github.com/optuna/optuna-dashboard 主な機能・特徴 1. Plotlyによる最適化履歴やハイパーパラメーターの重要度の可視化 2. APIポーリングによる準リアルタイム同期 3. 試行結果の閲覧だけでなく、Studyの作成や削除等も可能 Optuna Dashboardとは？
- 5. 5 アジェンダ 1. Optuna Dashboardの使い方 2. 設計解説 3. 最近入った機能の紹介 ゴール ● Optuna Dashboardを使いこなせるようになる ● Optuna Dashboardのコードリーディングを進められるようになり、 開発に興味を持っていただく 本発表の内容
- 7. 7 使い方 $ pip install optuna-dashboard $ optuna-dashboard sqlite:///db.sqlite3 $ docker run -it --rm -p 8080:8080 -v `pwd`:/app -w /app ghcr.io/optuna/optuna-dashboard sqlite:///db.sqlite3 基本的な使い方 次のようにコマンドを2つ実行して、表示されるURLにアクセスする。 Dockerを使用する 公式のDockerイメージを利用することで、Pythonの環境構築は不要。
- 8. 8 発展的な使い方① Python APIを利用する import optuna from optuna_dashboard import run_server def objective(trial): x = trial.suggest_float("x", -100, 100) return x**2 storage = optuna.storages.InMemoryStorage() study = optuna.create_study(study_name="Demo", storage=storage) study.optimize(objective, n_trials=100) run_server(storage, host="localhost", port=8800) InMemoryStorageも利用可能 RDBStorage以外のストレージについては、Python APIが利用可能
- 9. 9 自分だけが閲覧するのではなく第三 者に提供する場合 ● セキュリティや性能の観点から GunicornやuWSGIの利用を推奨 ● デフォルトのwsgirefサーバーは あくまで個人での利用にとどめ てください ● optuna_dashboard.wsgi関数は WSGIエントリーポイントを提供 発展的な使い方② 第三者向けにホスティングする from optuna.storages import RDBStorage from optuna_dashboard import wsgi storage = RDBStorage("sqlite:///db.sqlite3") application = wsgi(storage) main.py $ gunicorn --workers 4 main:application Gunicornによる起動 $ uwsgi --http :8080 --workers 4 --wsgi-file main.py uWSGIによる起動
- 10. 10 設計解説
- 11. 11 構成要素 ● API ServerとSPA(Single Page Application)の大きく2つ ● 以降のスライドでそれぞれ解説 特徴 ● API Endpointは6つ、Webペー ジは2つと小さく実装 ● APIポーリングで準リアルタイ ムにグラフを更新 全体感と構成要素
- 12. 12 APIサーバーの実装
- 15. 15 軽量なWSGIフレームワークである Bottleを使って実装 ● 中心となるコードを右に示す (一部簡略化して掲載) ● create_app関数は、ストレージ を受け取りBottleオブジェクト (WSGI application)を返す ● それぞれのAPI View関数で適宜 ストレージAPIを呼び出し、そ の結果をJSONで返す JSON APIサーバーの実装 from bottle import Bottle, response def create_app(storage: BaseStorage) -> Bottle: app = Bottle() @app.get("/api/studies") def list_study_summaries(): studies = storage.get_all_studies() serialized = serialize_studies(...) response.content_type = "application/json" return {"study_summaries": serialized} @app.delete("/api/studies/<study_id:int>") def delete_study(study_id: int): storage.delete_study(study_id) ... return app optuna_dashboard/_app.py (一部簡略化)
- 16. 16 静的ファイルの配信 ● 実際にはAPIの提供だけではな く、静的ファイル配信も担当 gzip対応 ● バンドル済みJSや画像は、gzip 圧縮したものもsdistに同梱 ● Accept-Encodingヘッダーを確 認して適宜返却 静的ファイルの配信 from bottle import request, response, static_file def create_app(storage: BaseStorage) -> Bottle: ... # Accept any following paths for client-side routing @app.get("/dashboard<:re:(/.*)?>") def dashboard(): return static_file("index.html", ...) @app.get("/static/<filename:path>") def send_static(filename: str): if "gzip" in request.headers["Accept-Encoding"]: gz_filename = filename.strip("/") + ".gz" if os.path.exists(...): filename = gz_filename return static_file(filename, root=STATIC_DIR) ... optuna_dashboard/_app.py (一部簡略化)
- 17. 17 高速化のための工夫 ● インメモリキャッシュ：OptunaではCompleteやFailなど終了したTrial の情報は変更できないのでそれをもとにTrial情報をキャッシュ ● Slow Query Log Profiler：sqlalchemy.eventを使った独自のプロファ イラを実装。SQLレベルのボトルネックが手軽に発見可能。 ● Cythonによる高速な重要度計算（後のスライドで紹介） 複数のOptunaバージョンのサポート ● BaseStorageはOptunaの利用者が直接呼び出すことを想定しておら ず、破壊的変更が入るためその差異を吸収。 その他の工夫
- 18. 18 Webフロントエンドの実装
- 19. 19 概要 ● Optuna/Goptunaの両方で使えるようにSPA(Single Page Application)として実装 ● 主な処理はStudyやTrialをJSON APIから取得してPlotlyで可視化 その他の主な使用ライブラリ (詳細な技術解説は割愛) ● MUI：各種ボタンや表などのコンポーネントを使用 ● Recoil：React.jsの状態管理に使用 ● React Router：クライアントサイドルーティングに使用 ● Axios：HTTPクライアントとして使用 ● Webpack/ts-loader等：TypeScriptのコンパイルやbundle.jsの生成 Webフロントエンドの実装概要
- 20. 20 Plotlyとは ● optuna.visualization モジュール が提供する可視化関数はPlotlyで 実装 (matplotlib実装も存在) ● Optuna DashboardではOptuna に実装された8つの可視化関数を すべてTypeScriptに移植 ● TypeScriptで再実装したことで インタラクティブな操作が可能 Plotlyによる可視化
- 21. 21 Optuna optuna.visualization Plotly (JavaScript) 実装上の課題 ● Optunaに比べて開発者が少なく 考慮漏れが起きやすい PlotDataレベルでの比較 ● Plotly (Python)の描画処理は、 Plotly(JavaScript)を使用 ● どちらの可視化関数も共通して PlotDataオブジェクトを出力 → PlotDataレベルで比較が可能 可視化機能の品質向上 by @keisuke-umezawa plotly.PlotData オブジェクト Optuna Dashboard PlotData (JSON) Plotly (Python) Plotly (JavaScript) PlotData (JSON)
- 22. 22 可視化用Reactコンポーネントの一連の流れ 1. StudyやTrial一覧を読み込むため、データ取得のActionを発火 (準リアルタイムに結果を反映するため定期的に発行) 2. APIサーバーにStudyやTrial一覧を問い合わせ 3. APIの結果をStore（Recoil Atoms）に書き込み 4. Storeから描画に必要な情報を取得して、plotlyのPlotDataを生成 5. PlotDataをPlotly.jsに渡し、ブラウザ上に描画 ① ③ Action データ取得 Store Recoil Atoms API Server View Reactコンポーネント plotlyの PlotData ④ ⑤ ②
- 23. 23 なぜユニットテストが難しいか ● Plotly.jsによる可視化機能は、 Assertionが非自明 ● 可視化関数の入力であるTrial情 報は構造が複雑で手動で用意す るとテストが冗長になる どのように解決したか ● pyppeteerを使った独自のツール を作成。PRレビューコストも大 幅に削減。 テスト / QA戦略 様々な目的関数についてOptunaを実行し、 Headless Chromeでスクリーンショットを撮影
- 24. 24 開発への参加
- 25. 25 開発に興味を持っていただけた方へ ● 各種LinterやFormatter、ユニットテストの実行方法、JSのビルド方法 等は CONTRIBUTING.md にまとまっています。 ● 興味はあるけど何を実装したらいいか知りたい方は、 contribution welcomeラベルのついたGitHub Issuesをご確認ください。 具体的なタスク例 ● React v18対応 (Issue #240) ● 不要なRe-renderingの解消による速度向上 (Issue #242) ● パレートフロント解を求めるアルゴリズムの高速化 (Issue #63) 開発への参加
- 27. 27 高速な重要度計算 https://github.com/optuna/optuna-fast-fanova ● n_trials >= 1000 のStudyは、 画面の表示に1分半以上かかる ● 重要度の計算アルゴリズム (fANOVA)をCythonで高速化 ● 1分半から約8秒に短縮 ● evaluatorを差し替えるだけ。 Dashboard以外でも利用可能。 ハイパーパラメータ重要度計算のCythonによる高速化 import optuna from optuna.importance import get_param_importances from optuna_fast_fanova import FanovaImportanceEvaluator study = optuna.load_study(...) importance = get_param_importances( study, evaluator=FanovaImportanceEvaluator() ) print(importance)
- 28. 28 CLS: Cumulative Layout Shift 累積レイアウトシフト ● 画像等の読み込みが遅延して画 面がガクッとずれる問題 (誤タッ プを誘発するなどUXが低下) ● Dashboardには多くのグラフが 表示されるため、以前は大きな レイアウトシフトが発生 ● 各要素の縦横比固定で大幅改善 (Lighthouse: 0.434→0.005) Cumulative Layout Shift 対策
- 29. 29 機能紹介 ● Study詳細ページ最下部に自由に メモを残すことができます。 ● 学習時の設定等をメモするのに ご利用ください。 細部の作り込み ● バージョン管理により、誤って内 容を上書きするのを防止。 ● 内部ではstudy.system_attrsに 格納。RDBStorageでは、長さに 制限があるため分割して保存。 メモ機能
- 30. 30 Contour Plot ● パラメーター間の関係を把握す る際に有用な等高線図が追加。 ● optuna.visualization.plot_cont our() 関数に相当します。 ● @RE-yura さんの貢献によりサ ポートされました！ 等高線図 (Contour Plot)
- 32. 32 Reactのアプリケーションが読み込 まれるまでの、ほんの一瞬だけ表示 されています (視認はやや困難)。 ● “Optuna: A Next Generation Hyperparamter Optimization Framework” の冒頭で登場した アニメーションを再現 https://youtu.be/-UeC4MR3PHM ● ロゴ画像からSVG pathを抽出、 CSSアニメーションで実装。 読み込み時のアニメーション
- 33. 33 まとめ
- 34. 34 本発表で話したこと ● Optuna Dashboardの使い方 ● JSON APIサーバーやWebフロントエンドの設計解説 ● 最近入った機能の紹介 最後におねがい ● 非常に手軽に使えるので、ぜひお試しください！ ● なにかご要望があればGitHub Issueの作成をお願いします！ ● PR大歓迎です！ おわりに
- 35. Making the real world computable