基于Flowise构建网页通用聊天助手-容器服务 Kubernetes 版 ACK(ACK)-阿里云帮助中心

\n \n \n

使用Flowise服务，您可以轻松编排个性化的对话流程。通过直观的图形界面和灵活的工作流设计，无论您是开发者还是非技术人员，都能轻松创建复杂的交互式聊天应用，并将其集成到业务场景中，从而提升日常研发和管理效率。此外，在ACK集群上部署服务，还支持根据业务需求的变化，实时且平滑地进行扩展，助力业务持续发展。

方案概览

\n \n \n \n \n \n

$\"2024-10-23_10-02-54$

配置一个通用聊天助手，只需3步：

\n
安装flowise组件：通过容器服务创建一个ACK集群，并安装flowise组件。
\n
\n
构建通用聊天助手工作流：通过访问Flowise服务，创建通用聊天助手。
\n
\n
编排个性化聊天流程：最后可以通过设置问答模型和提示词模板，并使用链式模型将其连接。
\n

\n \n \n \n \n

$\"flowise\"$

1. 安装flowise组件

\n \n \n

Flowise是一个开源且易于使用的框架，旨在帮助开发者快速而灵活地构建大型语言模型（LLM）应用程序。它通过低代码或无代码的操作方式，简化了 LangChain的使用。Flowise提供了一个直观的用户界面，允许用户通过拖拽可视化组件来构建工作流，从而轻松配置大语言模型的应用。这使得开发者能够更快地从测试阶段过渡到生产阶段。

1.1 环境准备

\n
已创建ACK Pro集群，且集群版本为1.22及以上。具体操作，请参见创建ACK托管集群和升级集群。
\n
\n
已通过kubectl工具连接Kubernetes集群。具体操作，请参见获取集群KubeConfig并通过kubectl工具连接集群。
\n

\n \n

1.2 组件部署

\n
安装部署flowise组件。
\n
1. 登录容器服务管理控制台，在左侧导航栏选择集群列表。
2. \n
  单击目标集群，进入集群详情页面，如下图所示，按照序号依次单击，为目标集群配置flowise组件。
  \n
  您无需为组件配置应用名和命名空间，单击⑤下一步后会出现一个请确认的弹框，单击是，即可使用默认的应用名（flowise）和命名空间（flowise-system）。
  \n
  $\"image\"$
  \n
3. \n
  选择Chart 版本为最新版本，单击确定即可完成flowise组件安装。
  \n
  在参数配置页签，配置自定义的username和password。
  \n
\n

校验flowise组件是否正常运行。

执行以下命令，查看flowise-system命名空间下的Pod是否为Running状态。

kubectl get pod -n flowise-system

预期输出如下，表明flowise组件已经安装成功。

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

\n \n

2. 创建工作流编排模板

2.1 访问Flowise服务

\n \n

\n
为flowise组件开启公网访问功能。
\n
如果您使用的是生产环境，为了您的应用数据安全，建议您开启访问控制功能。 $\"image\"$
\n
\n
配置完成后，您会看到flowise组件的外部 IP 地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Flowise服务。
\n
$\"image\"$
\n
\n
访问Flowise服务。
\n
访问外部 IP 地址（External IP），请根据页面提示输入自定义的Username和Password，来使用服务。
\n
$\"image\"$
\n
如果在安装flowise组件时，未自定义username和password的取值，则使用默认值Username=flowiseuser，Password=flowisepassword访问服务。
\n

2.2 创建Chatflows

Flowise的强大功能之一是您可以将流程转变为工具。例如有一个主要流程来协调何时使用哪些必要的工具，并且每个工具都旨在执行一项特定的任务。

首先每个子流程工具将独立执行，并具有单独的内存以提供更清晰的输出。其次每个子流程的详细输出汇总到最终代理，通常会产生更高质量的输出。

您可以通过以下方式创建Chatflow。

\n
输入username和password登录Flowise服务平台。
\n
\n
创建新的Chatflow。
\n
在Flowise服务平台页面，依次单击Chatflows > Add New创建新的Chatflow。
\n
$\"image\"$
\n

3. 编排个性化聊天流程

3.1 配置问答模型Chat Models

在Flowise服务中，可通过创建Node以及构建Node之间的联系来编排LLM应用。与积木类似，您可以利用Flowise服务中所有可用的Node，构建一个自定义的大语言模型编排流程、聊天机器人或智能代理等LLM应用。目前Flowise服务支持基于LangChain和LlamaIndex等框架概念，可以从中抽象出Agents、Chains、Chat Models等多种类型的Node。

\n
单击进入Chat Models面板，拖拽创建ChatOpenAI Custom节点。然后依次单击Connect Credential下拉选框 > Create New，输入千问的API Key创建新的Connect Credential。
\n
$\"image\"$
\n
\n
先将Model Name设置为qwen-turbo。然后在Additional Parameters页面将BasePath设置为https://dashscope.aliyuncs.com/compatible-mode/v1。
\n
$\"image\"$
\n

3.2 设置提示词模板Prompt Template

进入Prompts面板，拖拽创建Prompt Template节点，配置Template信息如下。

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

$\"image\"$

3.3 设置链式模型LLM Chain

\n
进入Chains面板，拖拽创建LLM Chain节点。
\n
$\"image\"$
\n
\n
将创建完成的模板的节点连接，即可完成通用型聊天助手的编排。
\n \n
$\"image\"$
\n

3.3 验证效果

完成Chatflow的编排后单击页面右上角保存按钮，然后可以通过页面右上角的Message按钮进行调试，效果如下。

$\"image\"$

总结

应用到生产环境

如果您想将开发的AI问答助手引入到您企业或个人的生产环境，可以通过以下2种方式操作。

\n
您可以将聊天流程作为API使用，并链接到前端应用程序。
\n
Flowise基于“后端即服务”理念为所有应用提供了API，开发者可以直接在前端应用中获取大型语言模型的强大能力，而无需关注复杂的后端架构和部署过程。详细操作，请参见基于API开发。
\n
\n
您也可以在您的个人或业务网站上嵌入通用聊天助手。
\n
只需将所提供的嵌入代码复制粘贴到您HTML文件的标签中。
\n
您首先可以使用Flowise服务在几分钟内制作属于您自己的通用聊天助手，并使用Flowise支持的功能将您的AI应用嵌入到业务网站中。详细操作，请参见嵌入网站。
\n

示例（将AI应用嵌入到网站）

下面将为您详细介绍如何将开发的LLM应用嵌入到您企业或个人网站，您可以按照以下示例进行操作。

\n \n

本示例作为演示，为了您的应用数据安全，建议您在生产环境同时开启访问控制功能。

\n
已为flowise组件开启公网访问功能，将该外部IP地址输入浏览器地址栏即可访问Flowise服务。更多操作，请参见访问Flowise服务。
\n
$\"image\"$
\n
\n
在ACK集群中快速构建简单的Web应用来调试您的通用聊天助手。
\n
下面是一个在ACK集群中部署Web应用的示例，它会在您的ACK集群上运行，您可以嵌入在Flowise服务中开发的LLM应用。
\n
\n
1. \n
  获取Flowise服务代码。
  \n
  如下图所示，选择一种方式将聊天应用的对应的代码嵌入到您的网站中。
  \n
  $\"image\"$
  \n
2. \n
  在ACK集群中，创建一个Deployment来运行您的Web应用，并创建Service来暴露应用。
  \n
  以下是一个简单的YAML示例，展示如何部署一个包含静态HTML的Nginx服务器。
  \n
  \n
  1. \n
    登录容器服务管理控制台，在配置管理 > 配置项页面，选择命名空间为default，然后单击使用YAML创建资源，将下方YAML内容复制到模板中，并将window.difyChatbotConfig、scr、id修改为已获取的Flowise服务代码。
    \n
    具体代码信息，请参考下方示例。
    \n
    \n
    展开查看YAML内容
    \n
    apiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: web-deployment\nspec:\n replicas: 2\n selector:\n matchLabels:\n app: web\n template:\n metadata:\n labels:\n app: web\n spec:\n containers:\n - name: web\n image: registry.openanolis.cn/openanolis/nginx:1.14.1-8.6\n ports:\n - containerPort: 80\n volumeMounts:\n - name: web-content\n mountPath: /usr/share/nginx/html\n volumes:\n - name: web-content\n configMap:\n name: web-config\n \n\n---\napiVersion: v1\nkind: Service\nmetadata:\n name: web-service\nspec:\n selector:\n app: web\n ports:\n - protocol: TCP\n port: 80\n targetPort: 80\n type: LoadBalancer\n\n\n---\napiVersion: v1\nkind: ConfigMap\nmetadata:\n name: web-config\ndata:\n index.html: |\n <!DOCTYPE html>\n <html lang=\"zh\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>最简单的网站服务</title>\n \n </head>\n <body>\n <h1>欢迎来到我的网站!</h1>\n \n \n <script type=\"module\">\n import Chatbot from \"https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js\"\n Chatbot.init({\n chatflowid: \"86c03xxx-de3a-4xx3-9xx2-f5d56xxxx0a4\",\n apiHost: \"http://127.xx.xx.1:8080\",\n })\n </script>\n\n\n\n </body>\n </html>
    \n
    \n
  2. \n
    成功部署截图如下所示：
    \n
    $\"image\"$
    \n
  3. \n
    为已部署的服务开启公网访问。
    \n
    为了您的应用数据安全，建议您在生产环境同时开启访问控制功能。
    \n
    $\"image\"$
    \n
    配置完成后，您会看到web-service服务的外部 IP 地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Web服务。
    \n
    $\"image\"$
    \n
    重要 \n
    \n
    \n
    如果您想让其他设备访问，请确保您的集群防火墙或安全组中设置允许流量通过80端口。具体操作，请参见添加安全组规则。
    \n
    \n
    \n
    确保您的代码和第三方代码是安全的，避免可能的XSS或恶意代码嵌入。给您提供了一个基本示例以供演示，您可以根据自己的需求进行扩展和修改。
    \n
    \n
    \n
    \n
  4. \n
    结果展示。
    \n
    $\"2024-10-23_10-02-54$
    \n
  \n
  \n
\n
\n

持续改进

\n \n

如果您想进一步了解如何集成定制化的LLM应用，请参见基于Dify构建网页定制化AI问答助手。

使用Dify服务您可以实现将企业或个人的知识库集成到大模型应用中，从而创建出深度定制化的AI问答解决方案，并且可将其集成到您的业务场景，助力您提升日常研发管理效能。

计费相关

使用本功能会收取ACK Pro集群管理费用和阿里云云产品资源费用。使用本功能涉及的阿里云云产品有：ECS云服务器、CLB负载均衡、EIP弹性公网IP、NAS文件存储等，您需要按照各云产品计费规则为使用的资源付费，费用由各云产品收取。关于集群管理费和云产品资源费用的更多信息，请参见计费概述。

方案概览

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

配置一个通用聊天助手，只需3步：

安装flowise组件：通过容器服务创建一个ACK集群，并安装flowise组件。
构建通用聊天助手工作流：通过访问Flowise服务，创建通用聊天助手。
编排个性化聊天流程：最后可以通过设置问答模型和提示词模板，并使用链式模型将其连接。

flowise

1. 安装flowise组件

1.1 环境准备

已创建ACK Pro集群，且集群版本为1.22及以上。具体操作，请参见创建ACK托管集群和升级集群。
已通过kubectl工具连接Kubernetes集群。具体操作，请参见获取集群KubeConfig并通过kubectl工具连接集群。

1.2 组件部署

安装部署flowise组件。
1. 登录容器服务管理控制台，在左侧导航栏选择集群列表。
2. 单击目标集群，进入集群详情页面，如下图所示，按照序号依次单击，为目标集群配置flowise组件。
  
  您无需为组件配置应用名和命名空间，单击⑤下一步后会出现一个请确认的弹框，单击是，即可使用默认的应用名（flowise）和命名空间（flowise-system）。
3. 选择Chart 版本为最新版本，单击确定即可完成flowise组件安装。
  
  在参数配置页签，配置自定义的username和password。

校验flowise组件是否正常运行。

执行以下命令，查看flowise-system命名空间下的Pod是否为Running状态。

kubectl get pod -n flowise-system

预期输出如下，表明flowise组件已经安装成功。

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 地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Flowise服务。
访问Flowise服务。

访问外部 IP 地址（External IP），请根据页面提示输入自定义的Username和Password，来使用服务。

如果在安装flowise组件时，未自定义username和password的取值，则使用默认值Username=flowiseuser，Password=flowisepassword访问服务。

2.2 创建Chatflows

Flowise的强大功能之一是您可以将流程转变为工具。例如有一个主要流程来协调何时使用哪些必要的工具，并且每个工具都旨在执行一项特定的任务。

首先每个子流程工具将独立执行，并具有单独的内存以提供更清晰的输出。其次每个子流程的详细输出汇总到最终代理，通常会产生更高质量的输出。

您可以通过以下方式创建Chatflow。

输入username和password登录Flowise服务平台。
创建新的Chatflow。

在Flowise服务平台页面，依次单击Chatflows > Add New创建新的Chatflow。

3. 编排个性化聊天流程

3.1 配置问答模型Chat Models

单击进入Chat Models面板，拖拽创建ChatOpenAI Custom节点。然后依次单击Connect Credential下拉选框 > Create New，输入千问的API Key创建新的Connect Credential。
先将Model Name设置为qwen-turbo。然后在Additional Parameters页面将BasePath设置为https://dashscope.aliyuncs.com/compatible-mode/v1。

3.2 设置提示词模板Prompt Template

进入Prompts面板，拖拽创建Prompt Template节点，配置Template信息如下。

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

3.3 设置链式模型LLM Chain

进入Chains面板，拖拽创建LLM Chain节点。
将创建完成的模板的节点连接，即可完成通用型聊天助手的编排。

3.3 验证效果

完成Chatflow的编排后单击页面右上角保存按钮，然后可以通过页面右上角的Message按钮进行调试，效果如下。

总结

应用到生产环境

如果您想将开发的AI问答助手引入到您企业或个人的生产环境，可以通过以下2种方式操作。

您可以将聊天流程作为API使用，并链接到前端应用程序。

Flowise基于“后端即服务”理念为所有应用提供了API，开发者可以直接在前端应用中获取大型语言模型的强大能力，而无需关注复杂的后端架构和部署过程。详细操作，请参见基于API开发。
您也可以在您的个人或业务网站上嵌入通用聊天助手。

只需将所提供的嵌入代码复制粘贴到您HTML文件的标签中。

您首先可以使用Flowise服务在几分钟内制作属于您自己的通用聊天助手，并使用Flowise支持的功能将您的AI应用嵌入到业务网站中。详细操作，请参见嵌入网站。

示例（将AI应用嵌入到网站）

下面将为您详细介绍如何将开发的LLM应用嵌入到您企业或个人网站，您可以按照以下示例进行操作。

本示例作为演示，为了您的应用数据安全，建议您在生产环境同时开启访问控制功能。

已为flowise组件开启公网访问功能，将该外部IP地址输入浏览器地址栏即可访问Flowise服务。更多操作，请参见访问Flowise服务。
在ACK集群中快速构建简单的Web应用来调试您的通用聊天助手。

下面是一个在ACK集群中部署Web应用的示例，它会在您的ACK集群上运行，您可以嵌入在Flowise服务中开发的LLM应用。
1. 获取Flowise服务代码。
  
  如下图所示，选择一种方式将聊天应用的对应的代码嵌入到您的网站中。
2. 在ACK集群中，创建一个Deployment来运行您的Web应用，并创建Service来暴露应用。
  
  以下是一个简单的YAML示例，展示如何部署一个包含静态HTML的Nginx服务器。
  1. 登录容器服务管理控制台，在配置管理 > 配置项页面，选择命名空间为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="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>最简单的网站服务</title> </head> <body> <h1>欢迎来到我的网站!</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 地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Web服务。
    
    重要
    
    如果您想让其他设备访问，请确保您的集群防火墙或安全组中设置允许流量通过80端口。具体操作，请参见添加安全组规则。
    
    确保您的代码和第三方代码是安全的，避免可能的XSS或恶意代码嵌入。给您提供了一个基本示例以供演示，您可以根据自己的需求进行扩展和修改。
  4. 结果展示。

持续改进

如果您想进一步了解如何集成定制化的LLM应用，请参见基于Dify构建网页定制化AI问答助手。