StreamlitによるChatUIでChatGPTのようなタイピング風エフェクトを追加する

2023年11月14日 2024年1月11日

こんにちは。Jinnaiです。

小ネタの記事になりますが、当社ではチャットボットのデモや検証用のUIとして、StreamlitのChatUI機能を利用することがあります。
最近では、Llamaindexなどを組み合わせてドキュメント検索も行えるようにするなど、生成AI活用案件を受注することが多くなりました。

そこでデモや検証用でもモチベーションが上がるよう、回答時にChatGPTのようなタイピング風にしてみようと思います。
一部コード部分を省略していますが、以下が実際のコード例です。

~~~~~~省略~~~~~~~~
#display typing effect
def display_typing_effect(message, placeholder):
    full_message = ""
    for char in message:
        full_message += char
        placeholder.markdown(full_message + "●")
        time.sleep(0.02)  # タイピングの速度を調整
        placeholder.empty()
    placeholder.markdown(full_message.rstrip('●'))

~~~~~~省略~~~~~~~~

placeholder = st.empty()
                display_typing_effect(content, placeholder)
                placeholder.empty()

~~~~~~省略~~~~~~~~

概要レベルではありますが、簡単に解説するとmessageの各文字をfull_messageに追加し、placeholder.markdown(full_message + "●")の部分で、現在までのメッセージとキャレット（“●”）をプレースホルダーに表示しています。

以下は、Llamaindexを活用して社内ドキュメントをあらかじめ読み込ませ、ベクトルデータ化した内容をもとに適切な回答をするデモアプリです。実際に回答内容を見てみます。

うまく、ChatGPTのようなタイピング風エフェクトを再現できました！

当社では、Microsoft 365、Microsoft Azureのほか、生成AIを活用したシステム開発も請け負っておりますので、開発相談、協業に関しては是非お気軽にHPへお問合せください。