Difyで作成したアプリをStreamlitに埋め込む方法

はじめに

ChatGPTをはじめとする生成AIは最近のホットトピックであり、様々な活用方法が模索されています。生成AIを活用したアプリケーション開発を独自に行っている企業も多く見受けられます。

そんな中、最近リリースされたDifyはノーコードでチャットアプリの開発ができるプラットフォームとして注目を集めています。 これにより、自前で構築するのは面倒なRAGやエージェント機能などを組み込んだアプリを容易に構築、公開することが可能です。

今回はDifyで作ったチャットアプリをStreamlitで作成したアプリ上に埋め込む方法を解説します。

必要なもの

• git
• Docker

(Difyのシステム要件)

• CPU ≧ 2コア
• RAM ≧ 4GB

方法

1. Difyをローカル環境で起動

$ git clone https://github.com/langgenius/dify.git
$ cd docker 
$ docker compose up -d

これによりDifyが起動されるのでhttp://localhost/installにアクセスし、各種設定を進めてください。
自前で起動した場合、メールアドレスやパスワード等が漏洩する恐れはありません。

2. Dify上でアプリを作成

Difyでのアプリ作成方法は、様々な方がわかりやすい記事を書かれているためそちらに譲ります。

3. Streamlitのアプリを作成

Streamlitでアプリを作成する前に、Difyアプリを埋め込むためのHTMLコードを取得します。

Difyの埋め込みは2パターン用意されています。
Case1は任意の場所にiframeとして埋め込む方法、Case2はwebページ右下に埋め込む方法です。
Streamlitの場合、Case1ではChatのリフレッシュができなかったため、Case2の利用を進めます。(やり方をご存じの方がいらっしゃればコメントください。)
取得したHTMLコードをStreamlitのアプリ上に記述します。

app.py

import streamlit as st
import streamlit.components.v1 as stc

st.title("Embedding Dify app in Streamlit")
# Case 1の場合
st.write("## Case 1.")
# iFrameのHTMLコード
html_code = """
<iframe
 src="http://localhost/chatbot/rPUgO3KU7eCYC9nJ"
 style="width: 100%; height: 100%; min-height: 700px; border: 2;"
 allow="microphone">
</iframe>
"""

# HTMLをStreamlitアプリに埋め込む
stc.html(html_code, height=800)

# Case 2の場合
st.write("## Case 2.")
# HTMLとJavaScriptを埋め込む
html_code = """
<script>
 window.difyChatbotConfig = {
  token: 'rPUgO3KU7eCYC9nJ',
  baseUrl: 'http://localhost'
 }
</script>
<script
 src="http://localhost/embed.min.js"
 id="rPUgO3KU7eCYC9nJ"
 defer>
</script>
"""

stc.html(html_code, height=700)

アプリを起動します。

streamlit run app.py

http://localhost:8501にアプリが展開されるので、ブラウザからアクセスします。

それぞれのCaseで、Difyで作成したチャットアプリを使えることが確認できました。
どちらのCaseを採用するかは、用途によって使い分けてください。

終わりに

Streamlit上にチャットアプリを埋め込む方法を紹介しましたが、同様の手法を使えば、ありとあらゆるアプリケーションにチャットボット機能を追加することができます。これにより、既存のアプリに簡単な変更を加えるだけで、ユーザーエクスペリエンスの向上に貢献することができます。

Difyによるチャットボットの普及は、生成AIの民主化の勢いを加速させています。技術が進化する中で、より多くの企業や開発者がAIを活用し、革新的なソリューションを生み出しています。将来的には、生成AIがさらに進化し、私たちの日常生活に深く浸透することが期待されます。

生成AIの可能性はまだ始まったばかりです。その進展を常に注視し、新しい機会を見逃さないことが重要です。
我々はその動向を注目し、未来の可能性に備えて行動していく必要があります。

是非、この機会にDifyやその他の生成AIツールを探索し、あなたのアプリケーションに統合してみてください。未来のテクノロジーを今日から活用し、競争力を高める第一歩となるはずです。