Container Service for Kubernetes:Flowise を使用して汎用 Web チャットボットを構築する

1.1 前提条件

1. バージョン 1.22 以降の ACK Pro マネージドクラスターが作成されていること。詳細については、「ACK マネージドクラスターの作成」および「クラスターのアップグレード」をご参照ください。

2. kubectl ツールを使用して Kubernetes クラスターに接続していること。詳細については、「クラスターの kubeconfig ファイルを取得し、kubectl を使用してクラスターに接続する」をご参照ください。

1.2 コンポーネントのデプロイ

2.1 Flowise サービスへのアクセス

1. Flowise コンポーネントのインターネットアクセスを有効にします。

   本番環境を使用している場合は、[アクセス制御] 機能を有効にして、アプリケーションデータが安全であることを確認してください。

2. 構成が完了したら、Flowise コンポーネントの [外部 IP] を表示できます。この外部 IP アドレスをブラウザのアドレスバーに入力して、Flowise サービスにアクセスします。

   

3. Flowise サービスにアクセスします。

   [外部 IP] アドレスに移動し、プロンプトに従ってカスタムの [ユーザー名] と [パスワード] を入力してサービスを使用します。

   

   Flowise コンポーネントのインストール時にカスタムの [ユーザー名] と [パスワード] を指定しなかった場合は、デフォルト値を使用してサービスにアクセスします: Username=flowiseuser および Password=flowisepassword。

2.2 Chatflows の作成

Flowise の強力な機能の 1 つは、フローをツールに変えることができることです。たとえば、必要なツールをいつ使用するかを調整するメインフローを持つことができ、各ツールは特定のタスクを実行するように設計されています。

各子フローツールは独立して実行され、より明確な出力を提供するために個別のメモリを持っています。各子フローからの詳細な出力は最終的なエージェントに要約され、通常はより高品質の出力を生成します。

Chatflow を作成するには、次の手順を実行します。

1. ユーザー名とパスワードを入力して、Flowise サービスプラットフォームにログインします。

2. 新しい Chatflow を作成します。

   Flowise サービスプラットフォームページで、[Chatflows] > [Add New] をクリックして新しい Chatflow を作成します。

   

3.1 チャットモデルの構成

Flowise サービスでは、ノードを作成し、それらの間に接続を構築することで、LLM アプリケーションをオーケストレーションできます。ビルディングブロックと同様に、Flowise サービスで利用可能なすべてのノードを使用して、LLM オーケストレーションフロー、チャットボット、またはインテリジェントエージェントなどのカスタム LLM アプリケーションを構築できます。Flowise サービスは現在、LangChain や LlamaIndex などのフレームワークの概念をサポートしており、そこからエージェント、チェーン、チャットモデルなど、さまざまな種類のノードを抽象化できます。

1. [Chat Models Panel] をクリックして入力し、ドラッグして [ChatOpenAI Custom Node] を作成します。次に、[Connect Credential] ドロップダウンリスト > [Create New] をクリックし、Tongyi Qianwen の API キーを入力して新しい Connect Credential を作成します。

   

2. [Model Name] を [qwen-turbo] に設定します。次に、[Additional Parameters] ページで、[BasePath] を https://dashscope.aliyuncs.com/compatible-mode/v1 に設定します。

   

3.2 プロンプトテンプレートの設定

[Prompts] パネルに移動し、ドラッグして [Prompt Template] ノードを作成し、[Template] 情報を次のように構成します。

質問: {question}
回答: 一歩ずつ考えましょう。

3.3 LLM チェーンの設定

1. [Chains] パネルに移動し、ドラッグして [LLM Chain] ノードを作成します。

   

2. 作成したテンプレートのノードを接続して、汎用チャットボットのオーケストレーションを完了します。

   

3.3 結果の確認

Chatflow をオーケストレーションした後、ページの右上隅にある [Save] ボタンをクリックします。次に、右上隅の [Message] ボタンを使用してチャットボットをデバッグできます。結果を次の図に示します。

本番環境への適用

開発した AI Q&A アシスタントを企業または個人の本番環境に導入する場合は、次の 2 つの方法のいずれかで導入できます。

例: AI アプリケーションを Web サイトに埋め込む

このセクションでは、開発した LLM アプリケーションを企業または個人の Web サイトに埋め込む方法について説明します。例の手順に従うことができます。

この例はデモンストレーションを目的としています。アプリケーションデータが安全であることを確認するには、本番環境で [アクセス制御] 機能を有効にします。

1. Flowise コンポーネントのインターネットアクセスを有効にします。ブラウザのアドレスバーに外部 IP アドレスを入力して、Flowise サービスにアクセスします。詳細については、「Flowise サービスへのアクセス」をご参照ください。

   

2. ACK クラスターでシンプルな Web アプリケーションを構築して、汎用チャットボットをデバッグします。

   次の例は、ACK クラスターに Web アプリケーションをデプロイする方法を示しています。ACK クラスター上で実行され、Flowise サービスで開発された LLM アプリケーションを埋め込むことができます。

   1. Flowise サービスコードを取得します。

      次の図に示すように、チャットアプリケーションの対応するコードを Web サイトに埋め込む方法を選択します。

      

   2. ACK クラスターで、デプロイメントを作成して Web アプリケーションを実行し、サービスを作成してアプリケーションを公開します。

      以下は、静的 HTML を含む Nginx サーバーをデプロイする方法を示す簡単な YAML の例です。

      1. ACK コンソールにログインします。[構成管理] > [ConfigMap] ページで、[default] 名前空間を選択し、[YAML から作成] をクリックします。次の YAML コンテンツをテンプレートにコピーし、window.difyChatbotConfig、scr、および id を取得した Flowise サービスコードに置き換えます。

         コードの詳細については、次の例をご参照ください。

         YAML コンテンツの表示

         apiVersion: apps/v1
         kind: Deployment
         metadata:
           name: web-deployment
         spec:
           replicas: 2
           selector:
             matchLabels:
               app: web
           template:
             metadata:
               labels:
                 app: web
             spec:
               containers:
               - name: web
                 image: registry.openanolis.cn/openanolis/nginx:1.14.1-8.6
                 ports:
                 - containerPort: 80
                 volumeMounts:
                 - name: web-content
                   mountPath: /usr/share/nginx/html
               volumes:
               - name: web-content
                 configMap:
                   name: web-config
           
         
         ---
         apiVersion: v1
         kind: Service
         metadata:
           name: web-service
         spec:
           selector:
             app: web
           ports:
             - protocol: TCP
               port: 80
               targetPort: 80
           type: LoadBalancer
         
         
         ---
         apiVersion: v1
         kind: ConfigMap
         metadata:
           name: web-config
         data:
           index.html: |
             <!DOCTYPE html>
             <html lang="en">
             <head>
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>最もシンプルな Web サイトサービス</title>
               
             </head>
             <body>
                 <h1>私の Web サイトへようこそ!</h1>
             
             
                 <script type="module">
             import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
             Chatbot.init({
                 chatflowid: "86c03xxx-de3a-4xx3-9xx2-f5d56xxxx0a4",
                 apiHost: "http://127.xx.xx.1:8080",
             })
                 </script>
         
         
         
             </body>
             </html>

      2. デプロイが成功すると、次の図のようになります:

         

      3. デプロイされたサービスのインターネットアクセスを有効にします。

         アプリケーションデータが安全であることを確認するには、本番環境で [アクセス制御] 機能を有効にします。

         

         構成が完了したら、web-service の [外部 IP] を表示できます。この外部 IP アドレスをブラウザのアドレスバーに入力して、Web サービスにアクセスします。

         

         重要

         • 他のデバイスがサービスにアクセスできるようにするには、クラスターのファイアウォールまたはセキュリティグループがポート 80 のトラフィックを許可していることを確認してください。詳細については、「セキュリティグループルールの追加」をご参照ください。

         • 潜在的なクロスサイトスクリプティング (XSS) や悪意のあるコードの挿入を防ぐために、コードとサードパーティのコードが安全であることを確認してください。このドキュメントは、デモンストレーションのための基本的な例を提供します。必要に応じて拡張および変更できます。

      4. 結果を表示します。

         

継続的な改善

カスタマイズされた LLM アプリケーションを統合する方法の詳細については、「Dify を使用して Web サイト用のカスタマイズされた AI Q&A アシスタントを構築する」をご参照ください。

Dify サービスを使用すると、企業または個人のナレッジベースを大規模モデルアプリケーションに統合できます。これにより、高度にカスタマイズされた AI Q&A ソリューションを作成し、それらをビジネスシナリオに統合して、日常の開発および管理効率を向上させることができます。