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
NiceGUI is Nice
Search
s2terminal
October 28, 2023
Technology
0
310
NiceGUI is Nice
s2terminal
October 28, 2023
Tweet
Share
More Decks by s2terminal
See All by s2terminal
AIをWebアプリに実装するための便利なPythonライブラリ
s2terminal
0
350
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
33
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
17
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
17
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
1
79
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
22
Microsoft Azureで 女子力を生成する
s2terminal
0
25
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
19
Other Decks in Technology
See All in Technology
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
エンジニア向け会社紹介資料
caddi_eng
14
230k
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Building an army of robots
kneath
301
42k
The Invisible Customer
myddelton
117
13k
Making Projects Easy
brettharned
111
5.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Ruby is Unlike a Banana
tanoku
96
10k
It's Worth the Effort
3n
181
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Transcript
Suzuki Shuto / Twitter @s2terminal_tech NiceGUI is Nice 1 1
Suzuki Shuto / Twitter @s2terminal_tech NiceGUI を知っていますか? Do you know
NiceGUI? 2 2
Suzuki Shuto / Twitter @s2terminal_tech NiceGUIとは • https://github.com/zauberzeug/nicegui/ • PythonだけでWebアプリをすぐ作れるフレームワーク
• StreamlitやGradioに似ている • Streamlitの特徴を述べたあと、NiceGUIとの違いを説明します ◦ Gradioについては触れないが、下記が詳しい ▪ 【Streamlitよりいいかも?】機械学習系のデモアプリ作成に最適!Gradio解説 - 学習する天然ニューラルネット https://aotamasaki.hatenablog.com/entry/gradio-explanation 3 3
Suzuki Shuto / Twitter @s2terminal_tech Streamlitの特徴 • pip installして コードを書いて
$ pythonで起動して localhost開けば Webアプリが動く • 簡単!便利! 4 4
Suzuki Shuto / Twitter @s2terminal_tech Streamlit is nice. 5 5
Suzuki Shuto / Twitter @s2terminal_tech Streamlitの弱点 • Streamlitは色々な事を”魔法”のようにやってくれるが 複雑な使い方すると、引っかかる事もある •
たとえば... ◦ 初期状態が外部から取得したデータなど常に変化する時 ◦ ボタンを押したら入力欄を増やすなど動的に定義したい時 6 6
Suzuki Shuto / Twitter @s2terminal_tech NiceGUIの特徴 • NiceGUIの使い方は Streamlitと似ている •
pip installして コード書いて起動したら Webアプリが動く • 簡単!便利! 7 7
Suzuki Shuto / Twitter @s2terminal_tech 8 画像はGitHub Star Historyより https://star-history.com/#zauberzeug/nicegui&streamlit/streamlit&gradio-app/gradio&Date
Suzuki Shuto / Twitter @s2terminal_tech NiceGUIとStreamlitの違い • NiceGUIは、より”素直に”動く ◦ 処理が意図せず実行されるような事が少ない
◦ フォームを動的に増減させる等が簡単にできる ◦ Vue(Quasar)やTailwind CSSの機能が露出しており Web開発の抽象度が比較的低くなっている 9 9
Suzuki Shuto / Twitter @s2terminal_tech NiceGUIとStreamlitの違い • 意図通り動かないStreamlitのコード 10 10
コードはNiceGUIのGitHub Issuesより引用 https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651
Suzuki Shuto / Twitter @s2terminal_tech NiceGUIとStreamlitの違い • NiceGUIとStreamlitの使い方は似ている ◦ NiceGUIの公式サイトにも「We
like Streamlit」とある • NiceGUIには、入力のリアルタイム反映などのような Streamlitが持つ"魔法"のような機能は少なくなっている • NiceGUIはデータサイエンスや機械学習よりも より一般的なアプリケーション開発に向く 11 11
Suzuki Shuto / Twitter @s2terminal_tech まとめ Streamlit 入力をもとに自動で処理を実行し反映する →データアプリケーションが得意 Gradio
(ここでは触れてない) APIの発行やJupyter(Colab)上での実行ができる →機械学習アプリケーションが得意 NiceGUI 動的なUIフォームの定義が可能 →柔軟なアプリケーション構築が得意 12 12 • 適切に使い分けることで、より便利に!
Suzuki Shuto / Twitter @s2terminal_tech References • Streamlit ◦ https://github.com/streamlit/streamlit
• Gradio ◦ https://github.com/gradio-app/gradio • NiceGUI ◦ https://github.com/zauberzeug/nicegui/ 13