ChainlitでGPT-4oと会話する

やること

Chainlitでブラウザ上で動くチャットボットを作る

Chainlitとは

Chainlitはチャットボットや対話型アプリケーションの開発に特化したPythonのライブラリで、チャット画面を簡単に作成できます。

https://github.com/Chainlit/docs

前提

Azure上でGPT-4oをデプロイ済み。以下の記事を参考にしました。
https://zenn.dev/headwaters/articles/9d4410846fd6b9#前提

依存ライブラリ

pip install chainlit dotenv openai

最小限のアプリ

まず手始めにブラウザ上で動く最小限のものを作ってみました。

１　以下のPythonスクリプトを書く

chat1.py

import chainlit as cl

# チャットが開始されたときに実行される関数
@cl.on_chat_start 
async def on_chat_start():
    await cl.Message(content="The application has been activated! Please enter your message!").send() # 初期表示されるメッセージを送信する

# メッセージが送信されたときに実行される関数
@cl.on_message 
async def on_message(input_message):
    print("入力されたメッセージ: " + input_message.content)
    await cl.Message(content="Hello!").send() # チャットボットからの返答を送信する

２　アプリを起動する

chainlit run chat1.py

３　実行結果
無事に動きました！

会話機能を追加

次にAzureからGPT-4oを呼び出して会話できるチャットボットを作ってみました。

１　以下のPythonスクリプトを書く

import os
from dotenv import load_dotenv
from openai import AzureOpenAI
import chainlit as cl

# .envファイルから環境変数を読み込む
load_dotenv()

# 環境変数からAzure OpenAIサービスのエンドポイントとAPIキーを取得
api_key = os.getenv("AZURE_OPENAI_API_KEY")
api_endpoint = os.getenv("AZURE_OPENAI_ENDPOINT")

# AzureOpenAIクライアントを初期化
client = AzureOpenAI(
    api_key=api_key,
    azure_endpoint=api_endpoint,
    api_version="2023-05-15"
)

def generate_response(user_message):
    response = client.chat.completions.create(
       model="test2-gpt4o",  
       messages=[
          {"role": "system", "content": "You are a capable assistant."},
          {"role": "user", "content": user_message},
       ]
    )
    return response.choices[0].message.content

# チャットが開始されたときに実行される関数
@cl.on_chat_start  
async def on_chat_start():
    await cl.Message(content="Azure OpenAIチャットボットが起動しました！メッセージを入力してください！").send()

# メッセージが送信されたときに実行される関数
@cl.on_message  
async def on_message(input_message):
    user_message = input_message.content
    print("入力されたメッセージ: " + user_message)

    bot_response = generate_response(user_message)
    await cl.Message(content=bot_response).send()

２　アプリを起動して、会話してみた

コメントなど

openai関連はコードスタイルがよく更新されているということもありデバッグに苦労しましたが、なんとか当初の目標を達成しました！本当は日本語で表示させる方法もあるはずなんですが、それは次の課題ということにします。