add file Q&A page

apps/99_streamlit_llm_examples/README.md

@@ -0,0 +1,34 @@
+# Streamlit のサンプル実装集
+
+このアプリには、Streamlit を利用したサンプル実装が含まれています。
+
+## 前提条件
+
+- Python 3.11+ がインストールされていること
+- Azure OpenAI Service が利用できること
+- Azure OpenAI Service の API キーが取得できていること
+
+## 手順
+
+1. Azure OpenAI Service の API キーを取得する
+1. [.env.template](../../.env.template) をコピーして `.env` ファイルを作成する
+1. `.env` ファイルに API キーを設定する
+1. [main.py](./main.py) を実行する
+
+```shell
+# 仮想環境を作成してライブラリをインストールする
+python -m venv .venv
+
+# 仮想環境を有効化する
+source .venv/bin/activate
+
+# ライブラリをインストールする
+pip install -r requirements.txt
+
+# スクリプトを実行する
+streamlit run ./apps/99_streamlit_llm_examples/main.py
+```
+
+### 実行例
+
+http://localhost:8501 にアクセスして、サイドバーから実行したいサンプルを選択してください。

apps/99_streamlit_llm_examples/main.py

@@ -0,0 +1,4 @@
+import streamlit as st
+
+st.title("Stremlit を利用したサンプル集")
+st.info("サイドバーからアプリを選択してください")

apps/99_streamlit_llm_examples/pages/1_File_Q&A.py

@@ -0,0 +1,86 @@
+from os import getenv
+
+import streamlit as st
+from dotenv import load_dotenv
+from openai import AzureOpenAI
+
+load_dotenv()
+
+with st.sidebar:
+    azure_openai_endpoint = st.text_input(
+        label="AZURE_OPENAI_ENDPOINT",
+        value=getenv("AZURE_OPENAI_ENDPOINT"),
+        key="AZURE_OPENAI_ENDPOINT",
+        type="default",
+    )
+    azure_openai_api_key = st.text_input(
+        label="AZURE_OPENAI_API_KEY",
+        value=getenv("AZURE_OPENAI_API_KEY"),
+        key="AZURE_OPENAI_API_KEY",
+        type="password",
+    )
+    azure_openai_api_version = st.text_input(
+        label="AZURE_OPENAI_API_VERSION",
+        value=getenv("AZURE_OPENAI_API_VERSION"),
+        key="AZURE_OPENAI_API_VERSION",
+        type="default",
+    )
+    azure_openai_gpt_model = st.text_input(
+        label="AZURE_OPENAI_GPT_MODEL",
+        value=getenv("AZURE_OPENAI_GPT_MODEL"),
+        key="AZURE_OPENAI_GPT_MODEL",
+        type="default",
+    )
+    "[Go to Azure Portal to get an Azure OpenAI API key](https://portal.azure.com/)"
+    "[Go to Azure OpenAI Studio](https://oai.azure.com/resource/overview)"
+    "[View the source code](https://github.com/ks6088ts-labs/workshop-azure-openai/blob/main/apps/4_streamlit_chat_history/main.py)"
+
+st.title("File Q&A")
+st.info("ファイルをアップロードして質問をすると、AI が回答します")
+
+uploaded_file = st.file_uploader("Upload an article", type=("txt", "md"))
+question = st.text_input(
+    "アップロードしたファイルについて質問してください",
+    placeholder="簡潔な要約を作成してください",
+    disabled=not uploaded_file,
+)
+
+if uploaded_file and question:
+    if (
+        not azure_openai_api_key
+        or not azure_openai_endpoint
+        or not azure_openai_api_version
+        or not azure_openai_gpt_model
+    ):
+        st.info("サイドバーに Azure OpenAI の設定を入力してください")
+        st.stop()
+
+    article = uploaded_file.read().decode()
+
+    client = AzureOpenAI(
+        api_key=azure_openai_api_key,
+        api_version=azure_openai_api_version,
+        azure_endpoint=azure_openai_endpoint,
+    )
+
+    prompt = f"""参考資料:\n\n<article>
+    {article}\n\n</article>\n\n質問: {question}"""
+
+    # st.chat_message("user").write(prompt)
+    print(prompt)
+    response = client.chat.completions.create(
+        model=azure_openai_gpt_model,
+        messages=[
+            {
+                "role": "assistant",
+                "content": "あなたはアップロードされたファイルについての質問に回答する AI です",
+            },
+            {
+                "role": "user",
+                "content": prompt,
+            },
+        ],
+    )
+    msg = response.choices[0].message.content
+    st.write("### 回答")
+    st.chat_message("assistant").write(msg)