0 streamlitを使った 数理最適化ダッシュボード 2024-01-12 第74回NearMe技術勉強会 Yuta OKAMOTO

1 目次 1. なぜ作ろうと思ったのか？ 2. 今回作ったダッシュボード

2 1.なぜ作ろうと思ったのか - 理由 以下のような経験から，プログラムの実行結果を可視化したいと思っ たから ● シミュレーションをエンジニア以外の人もできるようにしたい ● 案件の提案段階でプロトタイプが必要 プログラムの実行結果が可視化できれば ● 非エンジニアに対する正確な情報共有に役立ちそう ● （ついでにデバッグに役立ちそう）

3 1.なぜ作ろうと思ったのか - 比較 参考 : ● https://docs.kanaries.net/ja/topics/Streamlit/streamlit-vs-dash ● https://qiita.com/OgawaHideyuki/items/f2b7aef8b8d61051f382 方法 利点 欠点 Streamlit (https://streamlit.io/) ● 構築がとても簡単 ● プロトタイプ作成に向いている ● 大規模なプロジェクトには不向 き？ Dash (https://dash.plotly.com/) ● 構築が簡単 ● 複雑なプロジェクトに向いてい る ● Streamlitに比べて細かく作ら なければならない Panel (https://panel.holoviz.org/) ● 構築が簡単 ● Streamlitと互換性あり ● Streamlit，Dashに比べてまだ 新しいのでコミュニティでのナ レッジ不足の不安 Google Colaboratoryなどノート ブック形式 ● 構築が簡単 ● インターフェースやや難

4 2.今回作ったダッシュボード - 作ったもの 特定の最適化問題（今回はシンプルTSP）について， ● ノード数を変更して求解 ● 求解結果を可視化して表示する というもの https://gist.github.com/yutaokamoto/15bdb6b2e9eab6c02 051f89e67b27e05

5 2.今回作ったダッシュボード - 使い方 セットアップ $ pip install streamlit adjustText $ streamlit run tsp_dashboard.py 使い方 1. ノード数を変更 2. 問題例の作成ボタン → 問題例を作成・問題例タブに表示 3. 解の計算ボタン → 解を計算・解タブに表示

6 2.今回作ったダッシュボード - コード解説 サイドバーの設定

7 2.今回作ったダッシュボード - コード解説 サイドバーの設定

8 2.今回作ったダッシュボード - コード解説 問題例の作成

9 2.今回作ったダッシュボード - コード解説 問題例の描画

10 2.今回作ったダッシュボード - コード解説 問題例の描画

11 2.今回作ったダッシュボード - コード解説 解の計算

12 2.今回作ったダッシュボード - コード解説 解の計算

13 2.今回作ったダッシュボード - コード解説 解の描画

14 2.今回作ったダッシュボード - コード解説 解の描画

15 2.今回作ったダッシュボード - はまった点 はまったところ ● 再実行の際の変数の保存 ○ アプリ上のウィジェットを操作するとプログラムが再実行される ○ プログラムを再実行すると変数などが全てリセットされる ○ st.session_stateを使う ■ 辞書型のオブジェクト ■ pythonのDictと同じ使い心地

16 2.今回作ったダッシュボード - 今後の展望 ● 実際の地理データを使って問題例作成・求解・描画 →Streamlit-foliumの利用

17 Thank you