Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Streamsyncの紹介(streamlitの代替になるのか?)
Search
karasu
March 01, 2025
Technology
0
90
Streamsyncの紹介(streamlitの代替になるのか?)
Pythonで簡単に分析系webアプリを作るのにstreamlit一強だと思いますが、他にもいくつかある中でStreamsyncを紹介しようと思います
karasu
March 01, 2025
Tweet
Share
More Decks by karasu
See All by karasu
Staiinlessの紹介
seiyeah78
0
23
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
310
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
700
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Why Our Code Smells
bkeepers
PRO
336
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
AI Streamsyncの紹介 2024.04.19 大内聖也 株式会社ディー・エヌ・エー + GO株式会社
AI 目次 • データ分析・可視化 ◦ なぜ流行るのか(主観多め) ◦ 有名どころとか • Streamsyncについて
◦ 特徴・使い方とか ◦ 良い点 • Demo(できたら) • 惜しいなと思う点 • まとめ
AI ▪ よく分析・可視化としてjupyter notebookが用いられる ▪ 一応の可視化は可能 ▪ 「データを変化させたときの動きを見たいね」 ▪ notebookだとコードを変更→再実行(を何度も行う)
▪ 容易な変化をビジュアライズするのは腰が重い。。。。 ▪ 「共有してみんなで使えるようにしたいよね」 ▪ notebook→分析特化なので、個人に留まりやすく使いにくい webアプリで可視化するには。。。 ▪ フロントエンドの知識 ▪ JavaScript(React、Angular….) ▪ サーバサイドの知識 ▪ API(Flask、FastAPI) ▪ APPサーバ、サーバレス。。。 データサイエンティストのスキルには無い知識が求められる(=時間がかかる) データサイエンティストが簡単に可視化できる世界
AI ▪ スキルがあったとしても、構築には時間がかかる ▪ 必要な技術スタックが最小限 ▪ 究極Pythonのみ ▪ 求められる可視化方法がある程度決まってる ▪
グラフ、スライダー、入力値を受け付けるボックスなどなど ▪ 容易な可視化をできる ▪ データ分析・業務に集中すべきで、アプリ構築は専念しないこと ▪ 様々なツールが登場(Streamlitと軽く比較) ▪ Streamlit(割愛) ▪ Gradio ▪ Plotly Dash ▪ Streamsync(今回はこれに触れます) データサイエンティストが簡単に可視化できる世界
AI ▪ 機械学習モデルを使ったWebアプリの構築を容易にしてくれる ▪ Streamlitは「データ分析、ダッシュボードによる可視化」に特化 ▪ モデルの入出力に応じた動的な変化をみたい場合 ▪ 入力値を推論させた結果を出力する、とか ▪
入力方法を変えて、推論させたい ▪ テキスト ▪ 手書き ▪ 画像,,,, ▪ モデル開発に特化したWebUIを構築したい、となったらこちらが良さそう ▪ 一方でStreamlitよりもUI構築周りは柔軟ではないので、複雑なUI構築は期待しないほ うがいいかも ▪ webサイトに簡単なデモがあるので、触ってみると良いかと思います Gradio: https://www.gradio.app/
AI ▪ Dashという、Pythonで書かれたオープンソースのフレームワークで、データ可視化と Webアプリの構築環境の提供(Flaskベース) ▪ 可視化・ビジュアル部分をPlotlyが担い、可視化用Webアプリの構築を実現 ▪ streamlitと比較すると ▪ 柔軟な画面開発
▪ htmlのコンポーネントをpythonモジュールで提供している ▪ 知識があれば大体のことはできそう ▪ CSSやJSもイケる ▪ 指定の場所に配置すると勝手に読み込んでくれる ▪ 後はそれを読み込むだけ ▪ 多少なりともフロント、サーバの知識が必要 ▪ 用意されてるhtmlモジュールを組み合わせるイメージ ▪ そのためviewを意識した開発が必要 ▪ MVCライクな開発 ▪ とっつきにくさはある(個人的にこれが好きですw) Plotly Dash: https://dash.plotly.com/
AI Stramsyncを選んだ理由 なぜStreamsync?
AI Streamlit←→Streamsync なぜStreamsync?
AI 名前が似ていた 最近ちょくちょく聞くようになってきた なぜStreamsync?
AI ▪ 特徴 ▪ 高速・非同期処理 ▪ streamlitのように、コードの変更によって1から読み直すことに よる待ちが発生しない(右上にRunning…がでるアレ) ▪ リアクティブ
▪ データバインディング(angularやvue.jsみたいな)による状態変 化駆動 ▪ Reactのようなstateが存在していて、「変化させたいデータ」を セットし、UIにバインドする→変更を検知して部分更新 ▪ UIのカスタマイズ性・容易性(Builder-Managed Component) ▪ 専用エディタで構築可能(UIのロジック分離) ▪ 変更は随時行われ、リアルタイムに確認しながら構築可能 ▪ JS、CSS統合も可能でフロントエンドの知識があれば更にカスタ マイズ可能 ▪ Streamsync: https://www.streamsync.cloud/
AI ▪ UIとロジックが分離しやすい ▪ Streamlitだと表示したいデータをコンポーネントを選んで、コードに 落とし込む ▪ やりたいことが増えればそれだけコードが増えて複雑化しやすい ▪ ロジック側はあくまでもデータの提供のみ注力
▪ streamsyncをinitする際に、必要なデータをバインド ▪ それを呼び出すだけ ▪ UI開発がユーザフレンドリー ▪ 一方でstreamsyncは、専用のエディタを立ち上げて構築する ▪ VSCodeライクなwebエディタも搭載! ▪ ブラウザ上でマウスでクリックして作り上げていく ▪ 「このコンポーネントはここ」みたいにドラッグで設定可能だっ たり。。。直感的な操作 ▪ カスタムコンポーネントをvue.jsで作れる 良い点
AI データバインディングとかUI構築とか DEMO
AI ▪ 専用エディタによるUI構築が意外と難しい ▪ 直感的であるが、「コードで書きたいな」と思う時がある ▪ streamlitと変わらない ▪ Pythonコードである程度やったので専用editorで構築 ▪
これができない。どちらかに依存する ▪ これができたら最高かも ▪ データバインディングが分かりにくい ▪ @counterみたいな変数で参照・更新だけど、ネストしてる場合は @{foo.counter}で書かないと反応しない ▪ 気付くのに時間がかかった 惜しいなと思う点
AI - Streamsyncの紹介 - UI構築をWeb側で完結させるアイディア - とはいえまだまだベータな感じで、今後変更もある - Pythonでも書けるので、最低限のUIやロジックはPythonで用意して、それ以外はWeb エディタで開発するとかアリかも
- Streamsync側で開発環境を用意してくれる - 環境構築しなくても良い - Loockerみたいに裏側にgit連携機能を乗せたらすべてwebで完結するのでは?? - 今後の改善に期待 まとめ