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
460
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
470
段階的なシステムリプレースを実現するデータ同期技術
s2terminal
0
81
1年でモダンなフロントエンドに追いついた話 2019-08-22 Mix Leap Joint #26
s2terminal
0
31
20190706 BCU30 事業を変えるシステムリプレース
s2terminal
0
27
Cognitive Complexity でコードの複雑さを定量的に計測しよう
s2terminal
2
110
MySQLオンラインマイグレーションツールgh-ostで深夜メンテナンスを無くした話
s2terminal
0
28
Microsoft Azureで 女子力を生成する
s2terminal
0
44
かんたん機械学習はじめの1歩AzureMachineLearningでTweetをレコメンド
s2terminal
0
26
Other Decks in Technology
See All in Technology
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
250
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか?
shinichiro_joya
2
780
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
My small contributions - Fujiwara Tech Conference 2025
ijin
0
1.5k
あなたの知らないクラフトビールの世界
miura55
0
160
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
6
360
インフラコストとセキュリティ課題解決のためのリアーキテクチャリング / srekaigi2025
hgsgtk
0
210
Windows Server 2025 へのアップグレードではまった話
tamaiyutaro
1
100
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
260
財務データを題材に、 ETLとは何であるかを考える
shoe116
3
1.6k
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
150
AWSマルチアカウント統制環境のすゝめ / 20250115 Mitsutoshi Matsuo
shift_evolve
0
120
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
Bash Introduction
62gerente
610
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Practical Orchestrator
shlominoach
186
10k
Making the Leap to Tech Lead
cromwellryan
133
9k
It's Worth the Effort
3n
184
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cult of Friendly URLs
andyhume
78
6.1k
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