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
480
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
490
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
86
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
35
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
27
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
2
110
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
30
Microsoft Azureで 女子力を生成する
s2terminal
0
47
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
27
Other Decks in Technology
See All in Technology
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
FastConnect の冗長性
ocise
1
9.6k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Code Review Best Practice
trishagee
66
17k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Site-Speed That Sticks
csswizardry
3
370
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Being A Developer After 40
akosma
89
590k
The Pragmatic Product Professional
lauravandoore
32
6.4k
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