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
AIをWebアプリに実装するための便利なPythonライブラリ
Search
s2terminal
December 01, 2023
Technology
0
390
AIをWebアプリに実装するための便利なPythonライブラリ
2023-12-01
Qiita Night~AI、機械学習~
https://increments.connpass.com/event/300470/
s2terminal
December 01, 2023
Tweet
Share
More Decks by s2terminal
See All by s2terminal
NiceGUI is Nice
s2terminal
0
390
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
43
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
18
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
20
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
2
86
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
24
Microsoft Azureで 女子力を生成する
s2terminal
0
34
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
21
Other Decks in Technology
See All in Technology
Qdrant を用いた検索改善施策の紹介 / Search Engineering Tech Talk 2024 Summer
visional_engineering_and_design
1
240
SageMaker学習のツボ / The Key Points of Learning SageMaker
cmhiranofumio
0
230
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
180
What a Good Platform Looks Like and How to Get There @ Large Financial Organization, Oct 2024
mfpais
PRO
0
110
業務ヒアリングと知識の呪い
tamai_63
0
300
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
240
品質マネジメントで抑えておきたい2つのリスクを見分けて未来に備えよう #yapcjapan
makky_tyuyan
0
130
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
300
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
120
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
14k
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
310
Featured
See All Featured
Docker and Python
trallard
40
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Bash Introduction
62gerente
608
210k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
KATA
mclloyd
28
13k
It's Worth the Effort
3n
183
27k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Documentation Writing (for coders)
carmenintech
65
4.4k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Transcript
© 2023 Ateam Inc. AIをWebアプリに実装するための 便利なPythonライブラリ 2023-12-01 Qiita Night Suzuki
Shuto (Twitter @s2terminal_tech) / Ateam LifeDesign Inc.
© 2023 Ateam Inc. はじめに 機械学習モデルを使って貰う⽅法 • 機械学習モデルを作ったら、使ってもらう必要がある • 機械学習プロジェクトは、段階によって必ずしも
アプリケーションの開発⼈員をアサインできるとは限らない • Pythonだけで簡単にWebアプリを開発できる 便利なライブラリを 3つ 紹介 2
© 2023 Ateam Inc. Streamlit 3
© 2023 Ateam Inc. Streamlit Streamlitとは • データアプリケーションをすばやく作るための オープンソースのフレームワークと、デプロイ先のクラウド ◦
ここではオープンソース部分のみについて話します • 2022年にSnowflakeによって買収された • 動作を⾒たほうが早い 4
© 2023 Ateam Inc. Streamlit Streamlitの使い⽅ • $ pip install
streamlit • Pythonコードを書く(後述) • $ streamlit run main.py • localhost:8501 • Webアプリが動く! 5
© 2023 Ateam Inc. Streamlit Streamlitの使い⽅ 6 ▲Pythonソースコード Webブラウザ上の画⾯▼
© 2023 Ateam Inc. Streamlit 豊富なコンポーネント • データフレームなど様々なデータを良い感じに表⽰ 7
© 2023 Ateam Inc. Streamlit リアルタイムでの反映 • Streamlitはフォームに⼊⼒すると⾃動でコードが再実⾏され、 値がリアルタイムで反映される •
インタラクティブなアプリを簡単に作れる 8
© 2023 Ateam Inc. Streamlit リアルタイムでの反映 9
© 2023 Ateam Inc. Streamlit 機械学習モデルの実装 • 簡単な例として、⾝⻑を⼊⼒し体重を予測する 線形回帰モデルを構築 10
© 2023 Ateam Inc. Streamlit 機械学習モデルの実装 11
© 2023 Ateam Inc. Gradio 12
© 2023 Ateam Inc. Gradio Gradioとは • 機械学習アプリの構築と共有のための オープンソースのPythonフレームワーク 13
© 2023 Ateam Inc. Gradio Gradioの使い⽅ • $ pip install
gradio • Pythonコードを書く(後述) • $ gradio main.py • localhost:7860 • Webアプリが動く! Streamlitとだいたい同じ 14
© 2023 Ateam Inc. Gradio Gradioの使い⽅ 15
© 2023 Ateam Inc. Gradio Gradioの使い⽅ • コードの書き⽅が少し違う ◦ Streamlitに⽐べて、UIの定義と処理が分離しやすい構造
◦ そのぶん少し⻑くなる 16 ▼Streamlit ▼Gradio
© 2023 Ateam Inc. Gradio Gradioの共有機能 • スクリプトにしてlocalhostで Webアプリとして⽴ち上げる他に、 Jupyter
Notebookでも利⽤できる ◦ 右図はGoogle Colaboratory • localhostなどで⽴ち上げたアプリに `share=True`付与するだけで ⼀定時間有効なシェア⽤のURLを発⾏ ◦ 誰でもアクセスできるので注意は必要 17
© 2023 Ateam Inc. Gradio StreamlitとGradioの違い • 簡単なシェア ◦ 開発中のJupyter
Notebookからも直接起動できる • ⾃動でコードが実⾏されない ◦ 処理の重いモデルやコストの掛かる推論などの 実⾏タイミングを制御しやすい • 機械学習アプリケーションにより適している 18
© 2023 Ateam Inc. NiceGUI 19
© 2023 Ateam Inc. NiceGUI NiceGUI • 機械学習以外にも様々なアプリケーションの開発に向く オープンソースのPythonフレームワーク •
歴史は浅く、GitHubスター数もStreamlitやGradioと⽐べて少ない 20
© 2022 Ateam Inc. 21 • 画像はGitHub Star Historyより •
https://star-history.com/#zauberzeug/nicegui&streamlit/streamlit&gradio-app/gradio&Date Streamlit
© 2023 Ateam Inc. NiceGUI NiceGUIの使い⽅ • $ pip install
nicegui • コードを書く(後述) • $ python main.py • localhost:8080 • Webアプリが動く! StreamlitやGradioとほとんど同じ 22
© 2023 Ateam Inc. NiceGUI NiceGUIの使い⽅ 23
© 2023 Ateam Inc. NiceGUI NiceGUIとStreamlitの違い • Streamlitは⾊々な事を”魔法”のようにやってくれるが • 複雑な使い⽅すると、引っかかる事もある
• たとえば... ◦ 初期状態が外部から取得したデータなど常に変化する時 ◦ ボタンを押したら⼊⼒欄を増やすなど動的に定義したい時 24
© 2023 Ateam Inc. NiceGUI 意図通り動かないStreamlitのコード • コードはNiceGUIのGitHub Issuesより引⽤ •
https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651 25
© 2023 Ateam Inc. NiceGUI ⼊⼒フォームを動的に増減させるGradioのコード • コードはGradioの公式ドキュメントより引⽤ • https://www.gradio.app/guides/controlling-layout#variable-number-of-outputs
26
© 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIのTodoリストのデモ ◦ ユーザ操作によってフォームを増減させるような
動的な操作が⾃然に開発できる ◦ 通常のアプリケーションの中に推論を統合して 使ってもらいたいような時に作りやすい 27
© 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIは、より”素直に”動く ◦ 処理が意図せず実⾏されるような事が少ない
◦ フォームを動的に増減させる等が簡単にできる ◦ フロントエンドのVue(Quasar)やTailwind CSSの機能が露出しており Web開発の抽象度が⽐較的低くなっている • NiceGUIはデータサイエンスや機械学習だけでなく より⼀般的なアプリケーション開発に適応しやすい 28
© 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIとStreamlitの使い⽅は似ている ◦ NiceGUIの公式サイトにも「We
like Streamlit」とある • NiceGUIには、⼊⼒のリアルタイム反映などのような • Streamlitが持つ"魔法"のような機能は少なくなっている • NiceGUIはデータサイエンスや機械学習よりも • より⼀般的なアプリケーション開発に向く 29
© 2023 Ateam Inc. まとめ 30
© 2023 Ateam Inc. おわりに まとめ 31 Streamlit 入力をもとに自動で処理を実行し反映する →データアプリケーションが得意
Gradio APIの発行やJupyter(Colab)上での実行ができる →機械学習アプリケーションが得意 NiceGUI 動的なUIフォームの定義が可能 →より一般的なアプリケーション構築が得意 • 使い分けるとより便利に!
© 2023 Ateam Inc. おわりに 参考 • Streamlit ◦ https://github.com/streamlit/streamlit
• Gradio ◦ https://github.com/gradio-app/gradio • NiceGUI ◦ https://github.com/zauberzeug/nicegui 32
None