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
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Lazy application authentication with Tailscale
bluehatbrit
0
210
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Code Reviewing Like a Champion
maltzj
524
40k
Building an army of robots
kneath
306
45k
Writing Fast Ruby
sferik
628
62k
Side Projects
sachag
455
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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で完結するのでは?? - 今後の改善に期待 まとめ