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
96
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
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
130
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
100
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
340
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
120
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Featured
See All Featured
Bash Introduction
62gerente
613
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
314
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
We Have a Design System, Now What?
morganepeng
53
7.7k
Writing Fast Ruby
sferik
628
62k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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で完結するのでは?? - 今後の改善に期待 まとめ