はじめに
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
のアプリ上に記述します。
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ツールを探索し、あなたのアプリケーションに統合してみてください。未来のテクノロジーを今日から活用し、競争力を高める第一歩となるはずです。