Streamlit ChatGPT Harness やーる

# はじめに

こちらのリポジトリは、Azure OpenAI ServiceのChatGPTを使うためのStreamlitアプリ開発ツールになります。

https://github.com/microsoft/az-oai-chatgpt-streamlit-harness

# 開発環境
- Windows 10 PC
- Python 3.11
- Azure OpenAI Service 

# 導入

1．クローンする
$ git clone https://github.com/microsoft/az-oai-chatgpt-streamlit-harness.git

2．ディレクトリを移動
$ cd az-oai-chatgpt-streamlit-harness

3．ライブラリのインストール
$ pip install -r requirements.txt

4．example.envを複製し、ファイル名を「.env」に変更、内容を編集（Azure OpenAI Serviceにデプロイしたgpt-4o-miniを用いました）

~~~.env
AZURE_OPENAI_ENDPOINT="https://xxxx.openai.azure.com/"
AZURE_OPENAI_KEY=""
AZURE_OPENAI_API_VERSION="2024-07-01-preview"
AZURE_OPENAI_CHATGPT_DEPLOYMENT="gpt-4o-mini"
~~~

5．app.pyを編集

~~~app.py
import streamlit as st
from streamlit_chat import message
import dotenv
import json
from openai import AzureOpenAI


# region ENV + SDK SETUP

# Load environment variables
ENV = dotenv.dotenv_values(".env")
with st.sidebar.expander("Environment Variables"):
    st.write(ENV)

# Set up the Open AI Client

# openai.api_type = "azure"
# openai.api_base = ENV["AZURE_OPENAI_ENDPOINT"]
# openai.api_version = ENV["AZURE_OPENAI_API_VERSION"]
# openai.api_key = ENV["AZURE_OPENAI_KEY"]
# endregion

# region PROMPT SETUP

default_prompt = """
You are an AI assistant  that helps users write concise\
 reports on sources provided according to a user query.\
 You will provide reasoning for your summaries and deductions by\
 describing your thought process. You will highlight any conflicting\
 information between or within sources. Greet the user by asking\
 what they'd like to investigate.
"""

system_prompt = st.sidebar.text_area("System Prompt", default_prompt, height=200)
seed_message = {"role": "system", "content": system_prompt}
# endregion

# region SESSION MANAGEMENT
# Initialise session state variables
if "generated" not in st.session_state:
    st.session_state["generated"] = []
if "past" not in st.session_state:
    st.session_state["past"] = []
if "messages" not in st.session_state:
    st.session_state["messages"] = [seed_message]
if "model_name" not in st.session_state:
    st.session_state["model_name"] = []
if "cost" not in st.session_state:
    st.session_state["cost"] = []
if "total_tokens" not in st.session_state:
    st.session_state["total_tokens"] = []
if "total_cost" not in st.session_state:
    st.session_state["total_cost"] = 0.0
# endregion

# region SIDEBAR SETUP

counter_placeholder = st.sidebar.empty()
counter_placeholder.write(
    f"Total cost of this conversation: ${st.session_state['total_cost']:.5f}"
)
clear_button = st.sidebar.button("Clear Conversation", key="clear")

if clear_button:
    st.session_state["generated"] = []
    st.session_state["past"] = []
    st.session_state["messages"] = [seed_message]
    st.session_state["number_tokens"] = []
    st.session_state["model_name"] = []
    st.session_state["cost"] = []
    st.session_state["total_cost"] = 0.0
    st.session_state["total_tokens"] = []
    counter_placeholder.write(
        f"Total cost of this conversation: £{st.session_state['total_cost']:.5f}"
    )


download_conversation_button = st.sidebar.download_button(
    "Download Conversation",
    data=json.dumps(st.session_state["messages"]),
    file_name=f"conversation.json",
    mime="text/json",
)

# endregion


# OpenAIクライアントの設定（グローバルスコープで行う）
client = AzureOpenAI(
    api_key=ENV["AZURE_OPENAI_KEY"],
    api_version=ENV["AZURE_OPENAI_API_VERSION"],
    azure_endpoint=ENV["AZURE_OPENAI_ENDPOINT"]
)

def generate_response(prompt):
    st.session_state["messages"].append({"role": "user", "content": prompt})
    try:
        completion = client.chat.completions.create(
            model=ENV["AZURE_OPENAI_CHATGPT_DEPLOYMENT"],
            messages=st.session_state["messages"],
        )
        response = completion.choices[0].message.content
        st.session_state["messages"].append({"role": "assistant", "content": response})

        total_tokens = completion.usage.total_tokens
        prompt_tokens = completion.usage.prompt_tokens
        completion_tokens = completion.usage.completion_tokens
        return response, total_tokens, prompt_tokens, completion_tokens
    except Exception as e:
        error_response = f"The API could not handle this content: {str(e)}"
        st.write(error_response)
        return error_response, 0, 0, 0

st.title("Streamlit ChatGPT Demo")

# container for chat history
response_container = st.container()
# container for text box
container = st.container()

with container:
    with st.form(key="my_form", clear_on_submit=True):
        user_input = st.text_area("You:", key="input", height=100)
        submit_button = st.form_submit_button(label="Send")

    if submit_button and user_input:
        output, total_tokens, prompt_tokens, completion_tokens = generate_response(
            user_input
        )
        st.session_state["past"].append(user_input)
        st.session_state["generated"].append(output)
        st.session_state["model_name"].append(ENV["AZURE_OPENAI_CHATGPT_DEPLOYMENT"])
        st.session_state["total_tokens"].append(total_tokens)

        # from https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/#pricing
        cost = total_tokens * 0.001625 / 1000

        st.session_state["cost"].append(cost)
        st.session_state["total_cost"] += cost


if st.session_state["generated"]:
    with response_container:
        for i in range(len(st.session_state["generated"])):
            message(
                st.session_state["past"][i],
                is_user=True,
                key=str(i) + "_user",
                avatar_style="shapes",
            )
            message(
                st.session_state["generated"][i], key=str(i), avatar_style="identicon"
            )
        counter_placeholder.write(
            f"Total cost of this conversation: ${st.session_state['total_cost']:.5f}"
        )
~~~

# 実行
1．Streamlitアプリを起動
$ streamlit run app.py

2．http://localhost:8501/ にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5ea6b310-45a8-6230-42ed-3ef3cb655580.png)

お疲れ様でした