Azure AI Agent学習記録

Microsoft Azureについて調べたことを発信しています。

シンプルなエージェントの作成 〜 その9 : Webアプリの検討(Streamlitのセットアップ) - Azure AI Agent

前回は、ナレッジに「AI Search」を追加したときの補足を紹介しました。

これまで試してきたナレッジを活用すれば、イベントの情報は提供できそうです。

azure-ai-agent.hatenablog.com

そのため、今回は、UI側を考えてみたいと思います。

AI エージェントのUI

プレイグラウンドでの利用はAzure AI Foundryで十分ですが、外部顧客向けとなるとWeb UIが求められます。

AIエージェントのUIについて、いくつかのサイトを見ましたが、以下の説明がわかりやすかったです。

GitHub CopilotのUIが例として紹介されていました。

zenn.dev

PythonのWebフレームワーク「Streamlit」

今回は、シンプルなチャット機能を実装します。

これまでPythonで検証してきたため、Pythonで人気のあるStreamlit(ストリームリット)を利用することにします。

↓Streamlit公式サイト。

streamlit.io

↓導入方法の紹介

gihyo.jp

Streamlitの導入(Mac)

Streamlitの導入を行います。

# venvの有効化 / 3.12.x系を使用
# $ python -m venv .venv
$ python3.12 -m venv .venv
$ source ./.venv/bin/activate

# streamlitのインストール
$ pip install streamlit

メインフォルダにapp.pyというファイルを作成します。

import streamlit as st

st.title('Streamlitで作成したアプリ')
st.write('こんにちは。Streamlit で作成しました。')

テスト起動します。

# ローカルで、起動
$streamlit run app.py

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.168.11.11:8501

  For better performance, install the Watchdog module:

ブラウザで動作を確認します。

ローカルで動かしたstreamlit

非常に簡単です。

Azure App Service へのPythonアプリのデプロイ

次に、デプロイを行います。

ここでは、GitHubにPushして、GitHubから自動連携(CI/CD)します。

その前に、以下のコマンドで依存するパッケージをrequirements.txtに出力します。

$ pip freeze > requirements.txt

note.nkmk.me

VS CodeでGitHubへプッシュします。

VS Codeでのファイル構成

PythonアプリケーションをAzure Web Appへデプロイする方法は、こちらをご覧ください。

learn.microsoft.com

今回は、Learnドキュメントよりも簡易的なサンプルなので、以下の手順でWeb App Serviceを作成します。

Web App Service

デプロイセンターで、GitHubと接続します。

CI/CDの設定

ログを確認し、正しくデプロイできたか検証します。

デプロイログ

Pythonサーバーを起動するため、構成で起動コマンドを設定します。

python -m streamlit run app.py --server.port 8000 --server.address 0.0.0.0

構成で、streamlitを起動

Azure上で動作することを確認できました。

Web Appsで起動

以上、Web側のUIの準備として、Streamlitのセットアップを行いました。

--

次回は、StreamlitでのUI変更と、Azure AI Agentと連携できるか試していきたいと思います。