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
540
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
TypeScriptでJupyter
s2terminal
0
73
NiceGUI is Nice
s2terminal
0
550
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
130
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
38
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
40
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
2
140
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
46
Microsoft Azureで 女子力を生成する
s2terminal
0
54
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
42
Other Decks in Technology
See All in Technology
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
360
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
CDK Vibe Coding Fes
tomoki10
1
530
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
350
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
980
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
180
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Building an army of robots
kneath
306
45k
The Invisible Side of Design
smashingmag
301
51k
Navigating Team Friction
lara
187
15k
Typedesign – Prime Four
hannesfritz
42
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf 2023
tenderlove
30
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Raft: Consensus for Rubyists
vanstee
140
7k
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