✨

StreamlitでマルチモーダルなChatアプリを作る

takekawa tomoki

2024/06/04に公開

やること

前回、Streamlitで簡単なWebアプリを作成した。
今回は、StreamlitでマルチモーダルなChatアプリを作る。

参考資料

前提

Azure Open AI Service上にGPT-4oをデプロイ済みであること
Keyとendpointを取得済みであること

環境

python:3.10.12
openai:1.30.3

手順

以下のコマンドを実行する

mkdir streamlit
cd streamlit
python -m venv myenv
myenv\Scripts\activate
pip install streamlit openai
code .

以下のコードを書いたファイル（app.py）を作成

import streamlit as st
from openai import AzureOpenAI
import base64

client = AzureOpenAI(
    api_version="2023-05-15",
    api_key="<key>",
    azure_endpoint="<endpoint>"
)

# Streamlitの設定
st.title("Chat with Azure OpenAI")
st.write("Enter your message below and get a response from the model!")

# ユーザー入力
user_input = st.text_input("You: ", "")

# 画像アップロードとOCR機能
def encode_image(image):
    return base64.b64encode(image.read()).decode("utf-8")

uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])

if uploaded_file is not None:
    base64_image = encode_image(uploaded_file)
    user_input = "Describe this image:"

if st.button("Send"):
    if user_input:
        if uploaded_file is not None:
            messages = [
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": [
                    {"type": "text", "text": user_input},
                    {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{base64_image}"}}
                ]}
            ]
        else:
            messages = [
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": user_input},
            ]

        # API呼び出し
        response = client.chat.completions.create(
            model="gpt-4o",
            messages=messages
        )
        # レスポンスを表示
        assistant_response = response.choices[0].message.content
        st.write(f"Assistant: {assistant_response}")
    else:
        st.write("Please enter a message.")