AI 助理
备案控制台
文档
输入文档关键字查找
首页 容器服务 Kubernetes 版 ACK 云原生AI套件 实践教程 AI应用构建与编排实践 基于Flowise构建网页通用聊天助手

基于Flowise构建网页通用聊天助手

更新时间：
产品详情
我的收藏

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

方案概览

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

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

  1. 安装flowise组件：通过容器服务创建一个ACK集群，并安装flowise组件。

  2. 构建通用聊天助手工作流：通过访问Flowise服务，创建通用聊天助手。

  3. 编排个性化聊天流程：最后可以通过设置问答模型和提示词模板，并使用链式模型将其连接。

flowise

1. 安装flowise组件

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

1.1 环境准备

  1. 已创建ACK Pro集群，且集群版本为1.22及以上。具体操作，请参见创建ACK托管集群、升级集群。

  2. 已通过kubectl工具连接Kubernetes集群。具体操作，请参见获取集群KubeConfig并通过kubectl工具连接集群。

1.2 组件部署

  1. 安装部署flowise组件。

    1. 登录容器服务管理控制台，在左侧导航栏选择集群。

    2. 单击目标集群，进入集群详情页面，如下图所示，按照序号依次单击，为目标集群配置flowise组件。

      您无需为组件配置应用名和命名空间，单击⑤下一步后会出现一个请确认弹框，单击是，即可使用默认的应用名（flowise）和命名空间（flowise-system）。

      image

    3. 选择Chart 版本为最新版本，单击确定即可完成flowise组件安装。

      在参数配置页签，配置自定义的username和password。

  2. 校验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服务

  1. 为flowise组件开启公网访问功能。

    如果您使用的是生产环境，为了您的应用数据安全，建议您开启访问控制功能。image

  2. 配置完成后，您会看到flowise组件的外部IP地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Flowise服务。

    image

  3. 访问Flowise服务。

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

    image

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

2.2 创建Chatflows

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

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

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

  1. 输入username和password登录Flowise服务平台。

  2. 创建新的Chatflow。

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

    image

3. 编排个性化聊天流程

3.1 配置问答模型Chat Models

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

  1. 单击进入Chat Models面板，拖拽创建ChatOpenAI Custom节点。然后依次单击Connect Credential下拉选框 > Create New，输入通义千问的API Key创建新的Connect Credential。

    image

  2. 先将Model Name设置为qwen-turbo。然后在Additional Parameters页面将BasePath设置为https://dashscope.aliyuncs.com/compatible-mode/v1。

    image

3.2 设置提示词模板Prompt Template

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

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

image

3.3 设置链式模型LLM Chain

  1. 进入Chains面板，拖拽创建LLM Chain节点。

    image

  2. 将创建完成的模板的节点连接，即可完成通用型聊天助手的编排。

    image

3.3 验证效果

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

image

总结

应用到生产环境

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

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

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

  2. 您也可以在您的个人或业务网站上嵌入通用聊天助手。

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

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

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

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

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

  1. 已为flowise组件开启公网访问功能，将该外部IP地址输入浏览器地址栏即可访问Flowise服务。更多操作，请参见访问Flowise服务。

    image

  2. 在ACK集群中快速构建简单的Web应用来调试您的通用聊天助手。

    下面是一个在ACK集群中部署Web应用的示例，它会在您的ACK集群上运行，您可以嵌入在Flowise服务中开发的LLM应用。

    1. 获取Flowise服务代码。

      如下图所示，选择一种方式将聊天应用的对应的代码嵌入到您的网站中。

      image

    2. 在ACK集群中，创建一个Deployment来运行您的Web应用，并创建Service来暴露应用。

      以下是一个简单的YAML示例，展示如何部署一个包含静态HTML的Nginx服务器。

      1. 登录容器服务管理控制台，在配置项页面，选择命名空间为default，然后单击使用YAML创建资源，将下方YAML内容复制到模板中，并将③处的内容替换成您上一步骤获取的Flowise服务代码。

        image

        具体代码信息，请参考下方示例。

        展开查看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. 成功部署截图如下所示：

        image

      3. 为已部署的服务开启公网访问。

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

        image

        配置完成后，您会看到web-service服务的外部IP地址（External IP），将该外部IP地址输入浏览器地址栏即可访问Web服务。

        image

        重要

        • 如果您想让其他设备访问，请确保您的集群防火墙或安全组中设置允许流量通过80端口。具体操作，请参见添加安全组规则。

        • 确保您的代码和第三方代码是安全的，避免可能的XSS或恶意代码嵌入。给您提供了一个基本示例以供演示，您可以根据自己的需求进行扩展和修改。

      4. 结果展示。

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

持续改进

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

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

计费相关

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

上一篇：基于Dify构建网页定制化AI问答助手下一篇：Slurm最佳实践
文档推荐