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
440
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
450
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
68
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
27
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
27
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
2
100
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
27
Microsoft Azureで 女子力を生成する
s2terminal
0
38
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
26
Other Decks in Technology
See All in Technology
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
14k
MLOps の現場から
asei
6
650
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
20241220_S3 tablesの使い方を検証してみた
handy
4
590
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
Wantedly での Datadog 活用事例
bgpat
1
500
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
470
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
240
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.4k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
How GitHub (no longer) Works
holman
311
140k
Mobile First: as difficult as doing things right
swwweet
222
9k
Side Projects
sachag
452
42k
Code Reviewing Like a Champion
maltzj
520
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
KATA
mclloyd
29
14k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Visualization
eitanlees
146
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
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