Streamsyncの紹介（streamlitの代替になるのか？）

Pythonで簡単に分析系webアプリを作るのにstreamlit一強だと思いますが、他にもいくつかある中でStreamsyncを紹介しようと思います

Transcript

1. AI Streamsyncの紹介 2024.04.19 大内聖也 株式会社ディー・エヌ・エー + GO株式会社
2. AI 目次 • データ分析・可視化 ◦ なぜ流行るのか（主観多め） ◦ 有名どころとか • Streamsyncについて ◦ 特徴・使い方とか ◦ 良い点 • Demo（できたら） • 惜しいなと思う点 • まとめ
3. AI ▪ よく分析・可視化としてjupyter notebookが用いられる ▪ 一応の可視化は可能 ▪ 「データを変化させたときの動きを見たいね」 ▪ notebookだとコードを変更→再実行（を何度も行う） ▪ 容易な変化をビジュアライズするのは腰が重い。。。。 ▪ 「共有してみんなで使えるようにしたいよね」 ▪ notebook→分析特化なので、個人に留まりやすく使いにくい webアプリで可視化するには。。。 ▪ フロントエンドの知識 ▪ JavaScript（React、Angular….） ▪ サーバサイドの知識 ▪ API（Flask、FastAPI） ▪ APPサーバ、サーバレス。。。 データサイエンティストのスキルには無い知識が求められる（=時間がかかる） データサイエンティストが簡単に可視化できる世界
4. AI ▪ スキルがあったとしても、構築には時間がかかる ▪ 必要な技術スタックが最小限 ▪ 究極Pythonのみ ▪ 求められる可視化方法がある程度決まってる ▪ グラフ、スライダー、入力値を受け付けるボックスなどなど ▪ 容易な可視化をできる ▪ データ分析・業務に集中すべきで、アプリ構築は専念しないこと ▪ 様々なツールが登場（Streamlitと軽く比較） ▪ Streamlit（割愛） ▪ Gradio ▪ Plotly Dash ▪ Streamsync（今回はこれに触れます） データサイエンティストが簡単に可視化できる世界
5. AI ▪ 機械学習モデルを使ったWebアプリの構築を容易にしてくれる ▪ Streamlitは「データ分析、ダッシュボードによる可視化」に特化 ▪ モデルの入出力に応じた動的な変化をみたい場合 ▪ 入力値を推論させた結果を出力する、とか ▪ 入力方法を変えて、推論させたい ▪ テキスト ▪ 手書き ▪ 画像,,,, ▪ モデル開発に特化したWebUIを構築したい、となったらこちらが良さそう ▪ 一方でStreamlitよりもUI構築周りは柔軟ではないので、複雑なUI構築は期待しないほ うがいいかも ▪ webサイトに簡単なデモがあるので、触ってみると良いかと思います Gradio: https://www.gradio.app/
6. AI ▪ Dashという、Pythonで書かれたオープンソースのフレームワークで、データ可視化と Webアプリの構築環境の提供（Flaskベース） ▪ 可視化・ビジュアル部分をPlotlyが担い、可視化用Webアプリの構築を実現 ▪ streamlitと比較すると ▪ 柔軟な画面開発 ▪ htmlのコンポーネントをpythonモジュールで提供している ▪ 知識があれば大体のことはできそう ▪ CSSやJSもイケる ▪ 指定の場所に配置すると勝手に読み込んでくれる ▪ 後はそれを読み込むだけ ▪ 多少なりともフロント、サーバの知識が必要 ▪ 用意されてるhtmlモジュールを組み合わせるイメージ ▪ そのためviewを意識した開発が必要 ▪ MVCライクな開発 ▪ とっつきにくさはある（個人的にこれが好きですw） Plotly Dash: https://dash.plotly.com/
7. AI Stramsyncを選んだ理由 なぜStreamsync？
8. AI Streamlit←→Streamsync なぜStreamsync？
9. AI 名前が似ていた 最近ちょくちょく聞くようになってきた なぜStreamsync？
10. AI ▪ 特徴 ▪ 高速・非同期処理 ▪ streamlitのように、コードの変更によって１から読み直すことに よる待ちが発生しない(右上にRunning…がでるアレ) ▪ リアクティブ ▪ データバインディング（angularやvue.jsみたいな）による状態変 化駆動 ▪ Reactのようなstateが存在していて、「変化させたいデータ」を セットし、UIにバインドする→変更を検知して部分更新 ▪ UIのカスタマイズ性・容易性（Builder-Managed Component） ▪ 専用エディタで構築可能（UIのロジック分離） ▪ 変更は随時行われ、リアルタイムに確認しながら構築可能 ▪ JS、CSS統合も可能でフロントエンドの知識があれば更にカスタ マイズ可能 ▪ Streamsync: https://www.streamsync.cloud/
11. AI ▪ UIとロジックが分離しやすい ▪ Streamlitだと表示したいデータをコンポーネントを選んで、コードに 落とし込む ▪ やりたいことが増えればそれだけコードが増えて複雑化しやすい ▪ ロジック側はあくまでもデータの提供のみ注力 ▪ streamsyncをinitする際に、必要なデータをバインド ▪ それを呼び出すだけ ▪ UI開発がユーザフレンドリー ▪ 一方でstreamsyncは、専用のエディタを立ち上げて構築する ▪ VSCodeライクなwebエディタも搭載！ ▪ ブラウザ上でマウスでクリックして作り上げていく ▪ 「このコンポーネントはここ」みたいにドラッグで設定可能だっ たり。。。直感的な操作 ▪ カスタムコンポーネントをvue.jsで作れる 良い点
12. AI データバインディングとかUI構築とか DEMO
13. AI ▪ 専用エディタによるUI構築が意外と難しい ▪ 直感的であるが、「コードで書きたいな」と思う時がある ▪ streamlitと変わらない ▪ Pythonコードである程度やったので専用editorで構築 ▪ これができない。どちらかに依存する ▪ これができたら最高かも ▪ データバインディングが分かりにくい ▪ @counterみたいな変数で参照・更新だけど、ネストしてる場合は @{foo.counter}で書かないと反応しない ▪ 気付くのに時間がかかった 惜しいなと思う点
14. AI - Streamsyncの紹介 - UI構築をWeb側で完結させるアイディア - とはいえまだまだベータな感じで、今後変更もある - Pythonでも書けるので、最低限のUIやロジックはPythonで用意して、それ以外はWeb エディタで開発するとかアリかも - Streamsync側で開発環境を用意してくれる - 環境構築しなくても良い - Loockerみたいに裏側にgit連携機能を乗せたらすべてwebで完結するのでは？？ - 今後の改善に期待 まとめ