Download as PDF, PPTX
![16静的ファイルの配信● 実際にはAPIの提供だけではなく、静的ファイル配信も担当gzip対応● バンドル済みJSや画像は、gzip圧縮したものもsdistに同梱● Accept-Encodingヘッダーを確認して適宜返却静的ファイルの配信from bottle import request, response, static_filedef 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_filenamereturn static_file(filename, root=STATIC_DIR)...optuna_dashboard/_app.py (一部簡略化)](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2foptunadashboard-221206085312-5164e6c0%2f75%2fOptuna-Dashboard-2022-12-10-Optuna-Meetup-2-16-2048.jpg&f=jpg&w=240)
Uploaded byPreferred Networks
PDF, PPTX9,964 views
Optuna Dashboardの紹介と設計解説 - 2022/12/10 Optuna Meetup #2
Optuna Dashboardの基本的な使い方や最近入った新機能の紹介、設計や内部実装に関する解説を行います。イベントサイト: https://optuna.connpass.com/event/260301/
![[DL輪読会]ドメイン転移と不変表現に関するサーベイ](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f20190614iwasawa-190614005939-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![SSII2021 [OS2-01] 転移学習の基礎：異なるタスクの知識を利用するための機械学習の方法](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fos2-02final-210610091211-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[DL輪読会]Revisiting Deep Learning Models for Tabular Data (NeurIPS 2021) 表形式デー...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fdl20220318dlfin-220322065433-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
More from Preferred Networks
Optuna Dashboardの紹介と設計解説 - 2022/12/10 Optuna Meetup #2
- 1.Optuna Dashboardの紹介と設計解説2022/12/10 OptunaMeetup #2Masashi Shibata（GitHub: @c-bata）
- 2.2Masashi 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.
- 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.
- 7.7使い方$ pip installoptuna-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を利用するimportoptunafrom optuna_dashboard import run_serverdef objective(trial):x = trial.suggest_float("x", -100, 100)return x**2storage = 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 RDBStoragefrom optuna_dashboard import wsgistorage = RDBStorage("sqlite:///db.sqlite3")application = wsgi(storage)main.py$ gunicorn --workers 4 main:applicationGunicornによる起動$ uwsgi --http :8080 --workers 4 --wsgi-filemain.pyuWSGIによる起動
- 10.
- 11.11構成要素● API ServerとSPA(SinglePageApplication)の大きく2つ● 以降のスライドでそれぞれ解説特徴● API Endpointは6つ、Webページは2つと小さく実装● APIポーリングで準リアルタイムにグラフを更新全体感と構成要素
- 12.
- 13.
- 14.
- 15.15軽量なWSGIフレームワークであるBottleを使って実装● 中心となるコードを右に示す(一部簡略化して掲載)● create_app関数は、ストレージを受け取りBottleオブジェクト(WSGIapplication)を返す● それぞれのAPI View関数で適宜ストレージAPIを呼び出し、その結果をJSONで返すJSON APIサーバーの実装from bottle import Bottle, responsedef 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 appoptuna_dashboard/_app.py (一部簡略化)
- 16.16静的ファイルの配信● 実際にはAPIの提供だけではなく、静的ファイル配信も担当gzip対応● バンドル済みJSや画像は、gzip圧縮したものもsdistに同梱●Accept-Encodingヘッダーを確認して適宜返却静的ファイルの配信from bottle import request, response, static_filedef 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_filenamereturn static_file(filename, root=STATIC_DIR)...optuna_dashboard/_app.py (一部簡略化)
- 17.17高速化のための工夫● インメモリキャッシュ：OptunaではCompleteやFailなど終了したTrialの情報は変更できないのでそれをもとにTrial情報をキャッシュ● SlowQuery Log Profiler：sqlalchemy.eventを使った独自のプロファイラを実装。SQLレベルのボトルネックが手軽に発見可能。● Cythonによる高速な重要度計算（後のスライドで紹介）複数のOptunaバージョンのサポート● BaseStorageはOptunaの利用者が直接呼び出すことを想定しておらず、破壊的変更が入るためその差異を吸収。その他の工夫
- 18.
- 19.19概要● Optuna/Goptunaの両方で使えるようにSPA(Single PageApplication)として実装●主な処理はStudyやTrialをJSON APIから取得してPlotlyで可視化その他の主な使用ライブラリ (詳細な技術解説は割愛)● MUI：各種ボタンや表などのコンポーネントを使用● Recoil：React.jsの状態管理に使用● React Router：クライアントサイドルーティングに使用● Axios：HTTPクライアントとして使用● Webpack/ts-loader等：TypeScriptのコンパイルやbundle.jsの生成Webフロントエンドの実装概要
- 20.20Plotlyとは● optuna.visualization モジュールが提供する可視化関数はPlotlyで実装(matplotlib実装も存在)● Optuna DashboardではOptunaに実装された8つの可視化関数をすべてTypeScriptに移植● TypeScriptで再実装したことでインタラクティブな操作が可能Plotlyによる可視化
- 21.21Optunaoptuna.visualizationPlotly (JavaScript)実装上の課題● Optunaに比べて開発者が少なく考慮漏れが起きやすいPlotDataレベルでの比較●Plotly (Python)の描画処理は、Plotly(JavaScript)を使用● どちらの可視化関数も共通してPlotDataオブジェクトを出力→ PlotDataレベルで比較が可能可視化機能の品質向上 by @keisuke-umezawaplotly.PlotDataオブジェクトOptuna DashboardPlotData(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データ取得StoreRecoil AtomsAPI ServerViewReactコンポーネントplotlyのPlotData④ ⑤②
- 23.23なぜユニットテストが難しいか● Plotly.jsによる可視化機能は、Assertionが非自明● 可視化関数の入力であるTrial情報は構造が複雑で手動で用意するとテストが冗長になるどのように解決したか●pyppeteerを使った独自のツールを作成。PRレビューコストも大幅に削減。テスト / QA戦略様々な目的関数についてOptunaを実行し、Headless Chromeでスクリーンショットを撮影
- 24.
- 25.25開発に興味を持っていただけた方へ● 各種LinterやFormatter、ユニットテストの実行方法、JSのビルド方法等は CONTRIBUTING.mdにまとまっています。● 興味はあるけど何を実装したらいいか知りたい方は、 contributionwelcomeラベルのついたGitHub Issuesをご確認ください。具体的なタスク例● React v18対応 (Issue #240)● 不要なRe-renderingの解消による速度向上 (Issue #242)● パレートフロント解を求めるアルゴリズムの高速化 (Issue #63)開発への参加
- 26.
- 27.27高速な重要度計算https://github.com/optuna/optuna-fast-fanova● n_trials >=1000 のStudyは、画面の表示に1分半以上かかる● 重要度の計算アルゴリズム(fANOVA)をCythonで高速化● 1分半から約8秒に短縮● evaluatorを差し替えるだけ。Dashboard以外でも利用可能。ハイパーパラメータ重要度計算のCythonによる高速化import optunafrom optuna.importance import get_param_importancesfrom optuna_fast_fanova import FanovaImportanceEvaluatorstudy = optuna.load_study(...)importance = get_param_importances(study, evaluator=FanovaImportanceEvaluator())print(importance)
- 28.28CLS: Cumulative LayoutShift累積レイアウトシフト● 画像等の読み込みが遅延して画面がガクッとずれる問題 (誤タップを誘発するなどUXが低下)● Dashboardには多くのグラフが表示されるため、以前は大きなレイアウトシフトが発生● 各要素の縦横比固定で大幅改善(Lighthouse: 0.434→0.005)Cumulative Layout Shift 対策
- 29.29機能紹介● Study詳細ページ最下部に自由にメモを残すことができます。● 学習時の設定等をメモするのにご利用ください。細部の作り込み●バージョン管理により、誤って内容を上書きするのを防止。● 内部ではstudy.system_attrsに格納。RDBStorageでは、長さに制限があるため分割して保存。メモ機能
- 30.30Contour Plot● パラメーター間の関係を把握する際に有用な等高線図が追加。●optuna.visualization.plot_contour() 関数に相当します。● @RE-yura さんの貢献によりサポートされました！等高線図 (Contour Plot)
- 31.
- 32.32Reactのアプリケーションが読み込まれるまでの、ほんの一瞬だけ表示されています (視認はやや困難)。● “Optuna:A Next GenerationHyperparamter OptimizationFramework” の冒頭で登場したアニメーションを再現https://youtu.be/-UeC4MR3PHM● ロゴ画像からSVG pathを抽出、CSSアニメーションで実装。読み込み時のアニメーション
- 33.
- 34.34本発表で話したこと● Optuna Dashboardの使い方●JSON APIサーバーやWebフロントエンドの設計解説● 最近入った機能の紹介最後におねがい● 非常に手軽に使えるので、ぜひお試しください！● なにかご要望があればGitHub Issueの作成をお願いします！● PR大歓迎です！おわりに
- 35.Making the realworld computable