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

3.
3
Optuna Dashboardとは？
Study一覧表示、作成や削除・検索 表やグラフによる試行結果の可視化

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のコードリーディングを進められるようになり、
開発に興味を持っていただく
本発表の内容

6.
6
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サーバーの実装

13.
13
Optunaのストレージインターフェイス
RDBStorage
InMemoryStorage
JournalStorage
optuna.storages.BaseStorage
Studyの作成
storage.create_new_study()
Trial一覧の取得
storage.get_all_trials()
評価値の保存
storage.set_trial_state_values()
Optunaは共通のストレージインターフェイス(BaseStorage)を定義する
ことで試行結果の保存先をRDBやRedis、インメモリなど切り替え可能
DaskStorage
選択されたパラメーターの保存
storage.set_trial_param()
Optuna
Study
Trial
Sampler

14.
14
Optunaのストレージインターフェイス
RDBStorage
InMemoryStorage
JournalStorage
optuna.storages.BaseStorage
Study一覧の取得
storage.get_all_studies()
Trial一覧の取得
storage.get_all_trials()
Studyの削除
storage.delete_study()
Optuna DashboardのAPIサーバーは、BaseStorageのAPIを呼び出すこ
とで、Optunaの試行結果にアクセスし、Webフロントエンドに提供。
DaskStorage
Studyの作成
storage.create_new_study()
Optuna Dashboard
JSON API Server

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)
開発への参加

26.
26
最近入った機能の紹介
(2022.03~)

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)

31.
31
ダークモードのサポート
システム設定に応じて自動
的に選択されますが、
「月」「太陽」ボタンから
明示的に切り替え可能

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