Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

s2terminal
December 01, 2023

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

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

s2terminal

December 01, 2023
Tweet

More Decks by s2terminal

Other Decks in Technology

Transcript

  1. © 2023 Ateam Inc.
    AIをWebアプリに実装するための
    便利なPythonライブラリ
    2023-12-01 Qiita Night
    Suzuki Shuto (Twitter @s2terminal_tech) / Ateam LifeDesign Inc.

    View full-size slide

  2. © 2023 Ateam Inc.
    はじめに
    機械学習モデルを使って貰う⽅法
    ● 機械学習モデルを作ったら、使ってもらう必要がある
    ● 機械学習プロジェクトは、段階によって必ずしも
    アプリケーションの開発⼈員をアサインできるとは限らない
    ● Pythonだけで簡単にWebアプリを開発できる
    便利なライブラリを 3つ 紹介
    2

    View full-size slide

  3. © 2023 Ateam Inc.
    Streamlit
    3

    View full-size slide

  4. © 2023 Ateam Inc.
    Streamlit
    Streamlitとは
    ● データアプリケーションをすばやく作るための
    オープンソースのフレームワークと、デプロイ先のクラウド
    ○ ここではオープンソース部分のみについて話します
    ● 2022年にSnowflakeによって買収された
    ● 動作を⾒たほうが早い
    4

    View full-size slide

  5. © 2023 Ateam Inc.
    Streamlit
    Streamlitの使い⽅
    ● $ pip install streamlit
    ● Pythonコードを書く(後述)
    ● $ streamlit run main.py
    ● localhost:8501
    ● Webアプリが動く!
    5

    View full-size slide

  6. © 2023 Ateam Inc.
    Streamlit
    Streamlitの使い⽅
    6
    ▲Pythonソースコード
    Webブラウザ上の画⾯▼

    View full-size slide

  7. © 2023 Ateam Inc.
    Streamlit
    豊富なコンポーネント
    ● データフレームなど様々なデータを良い感じに表⽰
    7

    View full-size slide

  8. © 2023 Ateam Inc.
    Streamlit
    リアルタイムでの反映
    ● Streamlitはフォームに⼊⼒すると⾃動でコードが再実⾏され、
    値がリアルタイムで反映される
    ● インタラクティブなアプリを簡単に作れる
    8

    View full-size slide

  9. © 2023 Ateam Inc.
    Streamlit
    リアルタイムでの反映
    9

    View full-size slide

  10. © 2023 Ateam Inc.
    Streamlit
    機械学習モデルの実装
    ● 簡単な例として、⾝⻑を⼊⼒し体重を予測する
    線形回帰モデルを構築
    10

    View full-size slide

  11. © 2023 Ateam Inc.
    Streamlit
    機械学習モデルの実装
    11

    View full-size slide

  12. © 2023 Ateam Inc.
    Gradio
    12

    View full-size slide

  13. © 2023 Ateam Inc.
    Gradio
    Gradioとは
    ● 機械学習アプリの構築と共有のための
    オープンソースのPythonフレームワーク
    13

    View full-size slide

  14. © 2023 Ateam Inc.
    Gradio
    Gradioの使い⽅
    ● $ pip install gradio
    ● Pythonコードを書く(後述)
    ● $ gradio main.py
    ● localhost:7860
    ● Webアプリが動く!
    Streamlitとだいたい同じ
    14

    View full-size slide

  15. © 2023 Ateam Inc.
    Gradio
    Gradioの使い⽅
    15

    View full-size slide

  16. © 2023 Ateam Inc.
    Gradio
    Gradioの使い⽅
    ● コードの書き⽅が少し違う
    ○ Streamlitに⽐べて、UIの定義と処理が分離しやすい構造
    ○ そのぶん少し⻑くなる
    16
    ▼Streamlit
    ▼Gradio

    View full-size slide

  17. © 2023 Ateam Inc.
    Gradio
    Gradioの共有機能
    ● スクリプトにしてlocalhostで
    Webアプリとして⽴ち上げる他に、
    Jupyter Notebookでも利⽤できる
    ○ 右図はGoogle Colaboratory
    ● localhostなどで⽴ち上げたアプリに
    `share=True`付与するだけで
    ⼀定時間有効なシェア⽤のURLを発⾏
    ○ 誰でもアクセスできるので注意は必要
    17

    View full-size slide

  18. © 2023 Ateam Inc.
    Gradio
    StreamlitとGradioの違い
    ● 簡単なシェア
    ○ 開発中のJupyter Notebookからも直接起動できる
    ● ⾃動でコードが実⾏されない
    ○ 処理の重いモデルやコストの掛かる推論などの
    実⾏タイミングを制御しやすい
    ● 機械学習アプリケーションにより適している
    18

    View full-size slide

  19. © 2023 Ateam Inc.
    NiceGUI
    19

    View full-size slide

  20. © 2023 Ateam Inc.
    NiceGUI
    NiceGUI
    ● 機械学習以外にも様々なアプリケーションの開発に向く
    オープンソースのPythonフレームワーク
    ● 歴史は浅く、GitHubスター数もStreamlitやGradioと⽐べて少ない
    20

    View full-size slide

  21. © 2022 Ateam Inc. 21
    ● 画像はGitHub Star Historyより
    ● https://star-history.com/#zauberzeug/nicegui&streamlit/streamlit&gradio-app/gradio&Date
    Streamlit

    View full-size slide

  22. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIの使い⽅
    ● $ pip install nicegui
    ● コードを書く(後述)
    ● $ python main.py
    ● localhost:8080
    ● Webアプリが動く!
    StreamlitやGradioとほとんど同じ
    22

    View full-size slide

  23. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIの使い⽅
    23

    View full-size slide

  24. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIとStreamlitの違い
    ● Streamlitは⾊々な事を”魔法”のようにやってくれるが
    ● 複雑な使い⽅すると、引っかかる事もある
    ● たとえば...
    ○ 初期状態が外部から取得したデータなど常に変化する時
    ○ ボタンを押したら⼊⼒欄を増やすなど動的に定義したい時
    24

    View full-size slide

  25. © 2023 Ateam Inc.
    NiceGUI
    意図通り動かないStreamlitのコード
    ● コードはNiceGUIのGitHub Issuesより引⽤
    ● https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651
    25

    View full-size slide

  26. © 2023 Ateam Inc.
    NiceGUI
    ⼊⼒フォームを動的に増減させるGradioのコード
    ● コードはGradioの公式ドキュメントより引⽤
    ● https://www.gradio.app/guides/controlling-layout#variable-number-of-outputs
    26

    View full-size slide

  27. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIの特徴
    ● NiceGUIのTodoリストのデモ
    ○ ユーザ操作によってフォームを増減させるような
    動的な操作が⾃然に開発できる
    ○ 通常のアプリケーションの中に推論を統合して
    使ってもらいたいような時に作りやすい
    27

    View full-size slide

  28. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIの特徴
    ● NiceGUIは、より”素直に”動く
    ○ 処理が意図せず実⾏されるような事が少ない
    ○ フォームを動的に増減させる等が簡単にできる
    ○ フロントエンドのVue(Quasar)やTailwind CSSの機能が露出しており
    Web開発の抽象度が⽐較的低くなっている
    ● NiceGUIはデータサイエンスや機械学習だけでなく
    より⼀般的なアプリケーション開発に適応しやすい
    28

    View full-size slide

  29. © 2023 Ateam Inc.
    NiceGUI
    NiceGUIの特徴
    ● NiceGUIとStreamlitの使い⽅は似ている
    ○ NiceGUIの公式サイトにも「We like Streamlit」とある
    ● NiceGUIには、⼊⼒のリアルタイム反映などのような
    ● Streamlitが持つ"魔法"のような機能は少なくなっている
    ● NiceGUIはデータサイエンスや機械学習よりも
    ● より⼀般的なアプリケーション開発に向く
    29

    View full-size slide

  30. © 2023 Ateam Inc.
    まとめ
    30

    View full-size slide

  31. © 2023 Ateam Inc.
    おわりに
    まとめ
    31
    Streamlit 入力をもとに自動で処理を実行し反映する
    →データアプリケーションが得意
    Gradio APIの発行やJupyter(Colab)上での実行ができる
    →機械学習アプリケーションが得意
    NiceGUI 動的なUIフォームの定義が可能
    →より一般的なアプリケーション構築が得意
    ● 使い分けるとより便利に!

    View full-size slide

  32. © 2023 Ateam Inc.
    おわりに
    参考
    ● Streamlit
    ○ https://github.com/streamlit/streamlit
    ● Gradio
    ○ https://github.com/gradio-app/gradio
    ● NiceGUI
    ○ https://github.com/zauberzeug/nicegui
    32

    View full-size slide