AI Microsoft

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

2023年11月14日

こんにちは。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へお問合せください。

  • この記事を書いた人
  • 最新記事

神内 惇一郎 (Junichiro Jinnai)

Microsoft製品を日頃、触っています。 セキュリティコンサルティング、クラウドアーキテクトの仕事が得意です。 以前の企業ではMicrosoft365とAzureの設計導入を担当していました。 最近はAIの開発を主に対応しております。

-AI, Microsoft
-, , ,