AIをWebアプリに実装するための便利なPythonライブラリ

2023-12-01
Qiita Night～AI、機械学習～ https://increments.connpass.com/event/300470/

Transcript

1. © 2023 Ateam Inc. AIをWebアプリに実装するための 便利なPythonライブラリ 2023-12-01 Qiita Night Suzuki Shuto (Twitter @s2terminal_tech) / Ateam LifeDesign Inc.
2. © 2023 Ateam Inc. はじめに 機械学習モデルを使って貰う⽅法 • 機械学習モデルを作ったら、使ってもらう必要がある • 機械学習プロジェクトは、段階によって必ずしも アプリケーションの開発⼈員をアサインできるとは限らない • Pythonだけで簡単にWebアプリを開発できる 便利なライブラリを 3つ 紹介 2
3. © 2023 Ateam Inc. Streamlit 3
4. © 2023 Ateam Inc. Streamlit Streamlitとは • データアプリケーションをすばやく作るための オープンソースのフレームワークと、デプロイ先のクラウド ◦ ここではオープンソース部分のみについて話します • 2022年にSnowflakeによって買収された • 動作を⾒たほうが早い 4
5. © 2023 Ateam Inc. Streamlit Streamlitの使い⽅ • $ pip install streamlit • Pythonコードを書く（後述） • $ streamlit run main.py • localhost:8501 • Webアプリが動く！ 5
6. © 2023 Ateam Inc. Streamlit Streamlitの使い⽅ 6 ▲Pythonソースコード Webブラウザ上の画⾯▼
7. © 2023 Ateam Inc. Streamlit 豊富なコンポーネント • データフレームなど様々なデータを良い感じに表⽰ 7
8. © 2023 Ateam Inc. Streamlit リアルタイムでの反映 • Streamlitはフォームに⼊⼒すると⾃動でコードが再実⾏され、 値がリアルタイムで反映される • インタラクティブなアプリを簡単に作れる 8
9. © 2023 Ateam Inc. Streamlit リアルタイムでの反映 9
10. © 2023 Ateam Inc. Streamlit 機械学習モデルの実装 • 簡単な例として、⾝⻑を⼊⼒し体重を予測する 線形回帰モデルを構築 10
11. © 2023 Ateam Inc. Streamlit 機械学習モデルの実装 11
12. © 2023 Ateam Inc. Gradio 12
13. © 2023 Ateam Inc. Gradio Gradioとは • 機械学習アプリの構築と共有のための オープンソースのPythonフレームワーク 13
14. © 2023 Ateam Inc. Gradio Gradioの使い⽅ • $ pip install gradio • Pythonコードを書く（後述） • $ gradio main.py • localhost:7860 • Webアプリが動く！ Streamlitとだいたい同じ 14
15. © 2023 Ateam Inc. Gradio Gradioの使い⽅ 15
16. © 2023 Ateam Inc. Gradio Gradioの使い⽅ • コードの書き⽅が少し違う ◦ Streamlitに⽐べて、UIの定義と処理が分離しやすい構造 ◦ そのぶん少し⻑くなる 16 ▼Streamlit ▼Gradio
17. © 2023 Ateam Inc. Gradio Gradioの共有機能 • スクリプトにしてlocalhostで Webアプリとして⽴ち上げる他に、 Jupyter Notebookでも利⽤できる ◦ 右図はGoogle Colaboratory • localhostなどで⽴ち上げたアプリに `share=True`付与するだけで ⼀定時間有効なシェア⽤のURLを発⾏ ◦ 誰でもアクセスできるので注意は必要 17
18. © 2023 Ateam Inc. Gradio StreamlitとGradioの違い • 簡単なシェア ◦ 開発中のJupyter Notebookからも直接起動できる • ⾃動でコードが実⾏されない ◦ 処理の重いモデルやコストの掛かる推論などの 実⾏タイミングを制御しやすい • 機械学習アプリケーションにより適している 18
19. © 2023 Ateam Inc. NiceGUI 19
20. © 2023 Ateam Inc. NiceGUI NiceGUI • 機械学習以外にも様々なアプリケーションの開発に向く オープンソースのPythonフレームワーク • 歴史は浅く、GitHubスター数もStreamlitやGradioと⽐べて少ない 20
21. © 2022 Ateam Inc. 21 • 画像はGitHub Star Historyより • https://star-history.com/#zauberzeug/nicegui&streamlit/streamlit&gradio-app/gradio&Date Streamlit
22. © 2023 Ateam Inc. NiceGUI NiceGUIの使い⽅ • $ pip install nicegui • コードを書く（後述） • $ python main.py • localhost:8080 • Webアプリが動く！ StreamlitやGradioとほとんど同じ 22
23. © 2023 Ateam Inc. NiceGUI NiceGUIの使い⽅ 23
24. © 2023 Ateam Inc. NiceGUI NiceGUIとStreamlitの違い • Streamlitは⾊々な事を”魔法”のようにやってくれるが • 複雑な使い⽅すると、引っかかる事もある • たとえば... ◦ 初期状態が外部から取得したデータなど常に変化する時 ◦ ボタンを押したら⼊⼒欄を増やすなど動的に定義したい時 24
25. © 2023 Ateam Inc. NiceGUI 意図通り動かないStreamlitのコード • コードはNiceGUIのGitHub Issuesより引⽤ • https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651 25
26. © 2023 Ateam Inc. NiceGUI ⼊⼒フォームを動的に増減させるGradioのコード • コードはGradioの公式ドキュメントより引⽤ • https://www.gradio.app/guides/controlling-layout#variable-number-of-outputs 26
27. © 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIのTodoリストのデモ ◦ ユーザ操作によってフォームを増減させるような 動的な操作が⾃然に開発できる ◦ 通常のアプリケーションの中に推論を統合して 使ってもらいたいような時に作りやすい 27
28. © 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIは、より”素直に”動く ◦ 処理が意図せず実⾏されるような事が少ない ◦ フォームを動的に増減させる等が簡単にできる ◦ フロントエンドのVue（Quasar）やTailwind CSSの機能が露出しており Web開発の抽象度が⽐較的低くなっている • NiceGUIはデータサイエンスや機械学習だけでなく より⼀般的なアプリケーション開発に適応しやすい 28
29. © 2023 Ateam Inc. NiceGUI NiceGUIの特徴 • NiceGUIとStreamlitの使い⽅は似ている ◦ NiceGUIの公式サイトにも「We like Streamlit」とある • NiceGUIには、⼊⼒のリアルタイム反映などのような • Streamlitが持つ"魔法"のような機能は少なくなっている • NiceGUIはデータサイエンスや機械学習よりも • より⼀般的なアプリケーション開発に向く 29
30. © 2023 Ateam Inc. まとめ 30
31. © 2023 Ateam Inc. おわりに まとめ 31 Streamlit 入力をもとに自動で処理を実行し反映する →データアプリケーションが得意 Gradio APIの発行やJupyter（Colab）上での実行ができる →機械学習アプリケーションが得意 NiceGUI 動的なUIフォームの定義が可能 →より一般的なアプリケーション構築が得意 • 使い分けるとより便利に！
32. © 2023 Ateam Inc. おわりに 参考 • Streamlit ◦ https://github.com/streamlit/streamlit • Gradio ◦ https://github.com/gradio-app/gradio • NiceGUI ◦ https://github.com/zauberzeug/nicegui 32