Flowise を使用した汎用 Web チャットボットの構築 - Container Service for Kubernetes

概要

2024-10-23_10-02-54 (1)

このソリューションでは、Web ページに青いフローティングチャットボタンを埋め込みます。ユーザーは Web サイトにアクセスした際に、このボタンをクリックしてチャットボットと対話できます。

汎用チャットボットは、次の 3 つのステップで設定します。

Flowise コンポーネントのインストール：Container Service for Kubernetes (ACK) を使用して ACK クラスターを作成し、Flowise コンポーネントをインストールします。
汎用チャットボットワークフローの構築：Flowise サービスでチャットボットを作成します。
パーソナライズされた会話フローのオーケストレーション：Q&A モデルとプロンプトテンプレートを設定し、それらをチェーンモデルに接続します。

flowise

1. Flowise コンポーネントのインストール

Flowise は、大規模言語モデル (LLM) アプリケーションを構築するためのオープンソースのローコードフレームワークです。ドラッグアンドドロップの UI が、プロトタイピングから本番環境への LangChain ベースのワークフロー作成を簡素化します。

1.1 前提条件

バージョン 1.22 以降の ACK Pro クラスターが作成されていること。詳細については、「ACK マネージドクラスターの作成」および「クラスターのアップグレード」をご参照ください。
kubectl がクラスターに接続されていること。詳細については、「クラスターの kubeconfig ファイルを取得し、kubectl を使用してクラスターに接続する」をご参照ください。

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

Flowise コンポーネントをインストールしてデプロイします。
1. ACKコンソールにログインします。左側のナビゲーションウィンドウで、[クラスター] をクリックします。
2. 対象のクラスターをクリックします。図の番号付きの手順に従って、Flowise コンポーネントをインストールします。
  
  [アプリケーション名] と [名前空間] は空のままにします。⑤ [次へ] をクリックし、次に [はい] をクリックしてデフォルト (flowise/flowise-system) を使用します。
3. [Chart Version] を最新バージョンに設定し、[OK] をクリックします。
  
  [パラメーター] タブで、カスタムの [username] と [password] を設定します。

Flowise コンポーネントが正常に実行されていることを確認します。

flowise-system 名前空間のポッドが Running 状態であることを確認します:

kubectl get pod -n flowise-system

期待される出力：

NAME                       READY   STATUS    RESTARTS   AGE
flowise-596fb8bf88-7zdlr   1/1     Running   0          3h
flowise-postgresql-0       1/1     Running   0          3h

2. ワークフローオーケストレーションテンプレートの作成

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

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

本番環境では、データを保護するために [アクセス制御] を有効にします。
設定後、Flowise コンポーネントの [外部 IP] を見つけます。この IP をブラウザーに入力して、Flowise サービスにアクセスします。
Flowise サービスにアクセスします。

[外部 IP] アドレスを開き、[ユーザー名] と [パスワード] を入力します。

インストール時にカスタムの [ユーザー名] または [パスワード] が設定されなかった場合は、デフォルトの Username=flowiseuser と Password=flowisepassword を使用してください。

2.2 Chatflows の作成

Flowise はフローをツールに変換できます。メインフローはタスク固有のツールフローを調整し、各ツールフローは特定のタスク用に設計されています。

各子フローは独自のメモリで独立して実行されます。最終的なエージェントがすべての出力を要約し、より高品質な結果を生成します。

Chatflow を作成するには：

Flowise サービスにログインします。
[ChatFlows] > [新規追加] をクリックします。

3. パーソナライズされた会話フローのオーケストレーション

3.1 チャットモデルの設定

Flowise は、ノードを接続することで LLM アプリケーションをオーケストレーションします。これらのノードは、LangChain や LlamaIndex などのフレームワークから抽象化されており、エージェント、チェーン、チャットモデルなどのタイプが含まれます。

[チャットモデル] パネルで、[ChatOpenAI Custom] ノードをドラッグします。[認証情報に接続] > [新規作成] をクリックし、通義千問の API キーを入力します。
[接続資格情報] で、[Tongyi Qianwen] を選択します。[モデル名] を [qwen-turbo] に設定し、[Temperature] を [0.9] に設定します。[追加パラメーター] ページで、[BasePath] を https://dashscope.aliyuncs.com/compatible-mode/v1 に設定します。

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

[プロンプト] パネルで、[プロンプトテンプレート] ノードをドラッグし、[テンプレート] を次のように設定します。

Question: {question}
Answer: Let's think step by step.

3.3 LLM チェーンの設定

[チェーン] パネルで、[LLM チェーン] ノードをドラッグします。
ノードを接続して、チャットボットのオーケストレーションを完了します。

3.4 結果の検証

Chatflow のオーケストレーション後、右上の [保存] をクリックします。[メッセージ] ボタンを使用して、チャットボットをデバッグします。

まとめ

本番環境に適用

チャットボットを本番環境にデプロイするには、2 つの方法があります。

会話フローをフロントエンドアプリケーションの API として使用します。

Flowise は、すべてのアプリケーションに BaaS スタイルの API を提供し、フロントエンドアプリケーションでの LLM アクセスを可能にします。詳細については、「API を使用した開発」をご参照ください。
Web サイトにチャットボットを埋め込みます。

埋め込みコードを HTML ファイルにコピーします。

Flowise を使用してチャットボットを作成し、Web サイトに埋め込みます。詳細については、「Web サイトへの埋め込み」をご参照ください。

例：AI アプリケーションの Web サイトへの埋め込み

以下の手順に従って、LLM アプリケーションを Web サイトに埋め込みます。

この例はデモンストレーションのみを目的としています。本番環境では、データを保護するために [アクセス制御] を有効にしてください。

Flowise コンポーネントのインターネットアクセスを有効にし、ブラウザーで外部 IP を開きます。詳細については、「Flowise サービスへのアクセス」をご参照ください。
ACK クラスターでシンプルな Web アプリケーションを構築し、チャットボットをデバッグします。

ACK クラスターに Web アプリケーションをデプロイして、Flowise LLM アプリケーションをホストします。
1. Flowise サービスコードを取得します。
  
  埋め込み方法を選択し、コードを Web サイトにコピーします。
2. ACK クラスターで、Deployment と Service を作成して、Web アプリケーションを実行および公開します。
  
  次の YAML は、静的 HTML を持つ Nginx サーバーをデプロイします。
  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>The simplest website service</title> </head> <body> <h1>Welcome to my website!</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. 結果を表示します。

継続的な改善

詳細については、「Dify を使用した Web サイト向けのカスタマイズされたAI Q&Aアシスタントの構築」をご参照ください。

Dify を使用すると、ナレッジベースを LLM アプリケーションに統合して、ビジネス向けのカスタマイズされた AI Q&A ソリューションを構築できます。

課金

この機能では、ACK Pro クラスターの管理手数料と、使用される Alibaba Cloud リソースの料金が課金されます。この機能に関わる Alibaba Cloud 製品には、Elastic Compute Service (ECS)、Server Load Balancer (SLB)、Elastic IP アドレス (EIP)、Apsara File Storage NAS が含まれます。使用したリソースに対して、各製品の課金ルールに基づいて課金されます。クラスター管理手数料とリソース料金の詳細については、「課金の概要」をご参照ください。