一、概述

1. 案例介绍

 华为开发者空间是为全球开发者打造的专属云上成长空间,深度整合昇腾AI、鸿蒙、鲲鹏等华为根技术。开发者空间在HDC2025上迎来全面升级,新增AI原生应用引擎、AI Notebook、鸿蒙云手机、FunctionGraph云函数、Astro低代码等核心能力,并在算力、模型、平台、应用层实现全方位优化,助力开发者高效完成从编码到调测的全流程,打造智能AI应用开发新体验。

智能助手模板是基于AI大模型定制化的智能助手解决方案,旨在为企业和开发者提供灵活、高效、智能的交互体验。通过对接先进的AI大模型,能够实现多场景、多领域的智能化应用,满足不同业务的需求,助力企业实现数字化转型和效率提升。随着AI技术的不断进步,智能助手模板将进一步扩展应用场景,为企业创造更大的价值。

案例优势

  • 智能助手模板支持无缝对接主流AI大模型,通过灵活的模型调用和优化机制,实现多场景、多领域的智能适配,满足不同业务需求。
  • 智能助手模板提供高度可定制化的前端配置能力,支持根据具体场景需求,灵活调整交互逻辑、功能模块及品牌视觉风格,打造贴合用户需求的智能化解决方案。

本案例将通过 华为开发者空间-低代码应用开发平台对接AI开发平台 ModelArts,并以其中的DeepSeek-V3-32K服务模型为例,实现智能助手对话界面的搭建及后端功能开发。

2. 适用对象

  • 企业
  • 个人开发者
  • 高校学生

3. 案例时间

本案例总时长预计90分钟。

4. 案例流程

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro

说明:

  1. 领取华为开发者空间,登录 华为开发者空间-低代码应用开发平台,新建低代码应用工程,进入Astro轻应用服务控制台主页,开发应用。
  2. 登录ModelArts平台,领取免费服务tokens,配置DeepSeek-V3-32K服务模型。
  3. 完成Deepseek智能助手低代码应用开发,发布应用。

5. 资源总览

本案例预计花费0元。

资源名称

规格

单价(元)

时长(分钟)

 华为开发者空间-低代码应用开发平台

系统标配

免费

90

ModelArts

免费体验版

免费

90

最新案例动态,请查阅 《基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面》。小伙伴快来领取华为开发者空间,进入低代码应用开发平台实操吧!

二、华为开发者空间-低代码应用开发平台

1. 平台简介

 华为开发者空间-低代码应用开发平台是华为云推出的一款可视化应用开发平台,旨在通过"拖拽式"组件和模板化设计,降低开发门槛,提升企业数字化应用构建效率。平台主要特点包括:

  • 可视化开发:通过图形化界面和预置组件,无需编写复杂代码即可快速搭建应用;
  • 全场景支持:覆盖Web、移动端、大屏等多终端应用开发;
  • 高效集成:内置连接器可快速对接华为云及其他主流企业系统;
  • 智能辅助:提供AI辅助开发能力,如智能表单生成、流程自动化等;
  • 企业级能力:具备权限管理、数据安全、高可用等企业所需特性。

Astro平台特别适合业务人员与开发者协同创新,能大幅缩短应用交付周期,典型适用于OA审批、数据看板、轻量级业务系统等场景。

登录 华为开发者空间,在左侧菜单列表选择华为开发者空间 -> 开发平台 -> 低代码应用,进入 华为开发者空间-低代码应用开发平台

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_02

2. 创建低代码应用

  1.  华为开发者空间-低代码应用开发平台页面点击新建低代码应用,在弹出的新建低代码应用对话框中,选择标准应用,点击确定按钮。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_03

  1. 在右侧弹出的新建空白应用配置页签中,配置应用名称标签均为AstroChat

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_04

注:命名空间为租户数据唯一标识,为免重复,首次创建或使用工程时需定义命名空间。请务必慎重,一旦定义,不可修改,推荐使用公司前缀。本案例中使用pro_man作为命名空间。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_05

  1. 点击右下角确认按钮,平台会自动打开一个新的页面:Astro轻应用服务控制台

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_06

在点击确认后,在Astro轻应用管理页会同时新增一条刚才创建的名称为pro_man__AstroChat的应用,点击编辑同样可以进入Astro轻应用服务控制台

新建应用的名称,输入标签值后单击该参数的输入框,系统会自动生成应用的名称,同时自动在名称前添加命名空间__,本案例中pro_man__即为系统自动添加的命名空间。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_07

三、智能助手后端功能开发

1. 创建智能助手模板自定义组件

获取智能助手模板自定义组件,在华为云Astro轻应用的环境配置中,上传已获取的组件。

1.1 获取智能助手模板自定义组件

智能助手模板自定义组件用于实现对话框聊天室功能和缓存聊天记录。单击 agent-ui-0.1.0.zip,获取智能助手模板自定义组件。

1.2 上传智能助手模板自定义组件
  1. 在应用开发页面,单击页面左上角的菜单图标,选择环境管理 > 环境配置,进入环境配置页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_08

  1. 在环境配置页面

Astro轻应用环境配置页面,单击页面顶部主菜单中的维护。在左侧导航栏中,选择全局元素 > 页面资产管理 > 自定义组件

在标准页面自定义组件编辑页面,点击新建,选择在步骤“1.1 获取智能助手模板自定义组件”下载的agent-ui-0.1.0.zip压缩包,点击打开,完成智能助手模板自定义组件的上传。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_09

组件上传成功后,在标准页面自定义组件列表中,可查看到已上传的组件。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_10

2. 创建自定义连接器并编排对接DeepSeek

在智能助手模板应用中,创建一个自定义连接器和服务编排,用于对接DeepSeek。

2.1 登录ModelArts平台,领取免费服务tokens

本实践以华为ModelArts中部署的DeepSeek体验示例为例,实际使用时请根据实际模型部署情况,获取接口地址和参数。

  1. 登录 ModelArts首页 ,区域选择“西南-贵阳一”。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_11

  1. 在ModelArts首页左侧菜单栏,选择模型推理 -> 在线推理,进入在线推理页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_12

进入在线推理页面,选择预置服务 -> 免费服务,在服务列表中选择DeepSeek-V3-32K,点击服务后面的领取额度

2.2 获取模型部署接口地址和参数

在服务列表中点击DeepSeek-V3-32K后面的调用说明,弹出调用说明界面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_13

在调用说明界面,选择Rest API,这里,我们可以获取三个重要信息:API地址模型名称调用示例

示例:

API地址:
https://maas-cn-southwest-2.modelarts-maas.com/v1/infers/271c9332-xxxx-xxxx-xxxx-0cf8bd94c394/v1/chat/completions

模型名称:DeepSeek-V3
  • 1.
  • 2.
  • 3.
  • 4.

调用示例代码中,可以看到通过接口调用DeepSeek的请求消息结构以及各个参数的作用(截图仅展示请求参数,返回参数在操作中下拉即可阅读)。

headers = {
        'Content-Type': 'application/json',
        'Authorization': f'Bearer {api_key}' 
}
  • 1.
  • 2.
  • 3.
  • 4.

根据业务需求,此处仅需要请求参数中的model(模型名称)和messages(请求内容,后续自定义),请求地址url即API地址,Authorization为Bearer+ApiKey(二者之间需有一个空格)。

2.3 创建API Key,获取密钥

在ModelArts页面左侧菜单栏选择管理与统计 -> API Key管理,进入API Key管理页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_14

在API Key管理页面点击右上角的创建API Key。在创建API Key编辑对话框中填写标签和描述为AstroChat,点击确定

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_15

在弹出的“您的密钥”对话框中,点击右侧的复制按钮,将密钥保存至本地。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_16

点击关闭按钮,此时API Key管理列表中新政一条API Key。

3. 创建自定义连接器

3.1 创建自定义连接器

在Astro轻应用服务控制台,左侧工具栏选择集成 -> 连接器 -> 连接器实例

在连接器实例配置界面,来源选择全部,类型选择自定义连接器 -> 自定义连接器

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_17

在右侧自定义连接器列表界面,点击上方的“+”,按钮,进入创建自定义连接器界面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_18

在创建自定义连接器界面,将标签设置为ds,名称设置为命名空间__ds(命名空间无需填写,系统自动生成),点击保存。

参数说明

参数

说明

示例

标签

自定义连接器的标签,创建后可修改。取值范围:1~64个字符。

ds

名称

自定义连接器的名称,名称是连接器在系统中的唯一标识,创建后不可修改。命名要求:1)长度不能超过64个字符,包括前缀命名空间的长度。名称前的内容为命名空间,在华为云Astro轻应用中为了避免不同租户间数据的重名,租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间,创建后不支持修改。2)必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。

ds

3.2 编辑连接器动作参数

在已创建连接器ds的动作页签,单击新建,开始设置动作基本信息。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_19

  1. 基本信息设置

设置基本信息参数,标签设置为ds,名称设置为命名空间__ds,URL为步骤“2.2 获取模型部署接口地址和参数”中获取到的API地址,方法设置为POST,内容类型和返回类型均设置为application/json,超时时间选择自定义,50秒。鼠标滚轮下滑,点击界面最下方的下一步

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_20

参数说明

参数

说明

示例

标签

新建动作的标签名,用于在页面显示。取值范围:1~64个字符。

ds

名称

新建动作的名称,名称是动作在系统中的唯一标识。命名要求如下:长度不能超过64个字符,包括前缀命名空间的长度。名称前的内容为命名空间,在华为云Astro轻应用中为了避免不同租户间数据的重名,租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间,创建后不支持修改。必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。

ds

URL

第三方提供的,协议服务的URL地址。例如,/path/test (认证信息需要配置主机地址)、 http://www.域名.com或者http://系统参数。

步骤“2.2 获取模型部署接口地址和参数”中获取到的API地址

方法

在下拉框中,选择请求的方法。GET:获取资源。POST:创建资源。PUT:更新资源。PATCH:用于更新资源的部分内容。DELETE:删除资源。OPTIONS:用于获取当前URL所支持的方法。方法选择“PUT”或“POST”时,可自定义输入消息体参数。当第三方入参为数组或非JSON类型时,需要在定义输入参数设置为“键-值”形式。勾选后系统会引入一个通用的入参变量“

in”中,变成“键-值”格式传入到Rest Action中。

POST

内容类型

输入内容的类型,该值取决于第三方支持哪种类型,是在HTTP标准协议中定义的。application/json、application/x-www-form-urlencoded、application/xml、multipart/form-data、text/html、text/plain

application/jso

返回类型

取值为“application/json”时,表示会忽略第三方实际返回的“content-type”,使用第三方配置的“content-type”来解析第三方返回的内容。如果该参数取值为空,表示使用http返回中的“content-type”,来解析第三方返回的内容。

application/json

超时时间

当超出该参数设定的时间,第三方没有返回结果时系统报错。单位:秒。

自定义,50秒

  1. 消息头入参

在消息头入参界面,点击默认配置的消息头操作栏的删除图标,删除消息头,点击下一步。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_22

  1. 输入参数

列表上方,消息体格式选择键-值

设置输入参数,标签和名称设置为model,参数位置选择消息体,数据类型选择字符串,拖动列表滚轴,拉到最右侧,勾选为必填项

点击列表下方“+”,新增输入参数,设置标签和名称设置为messages,参数位置选择消息体,数据类型选择键值对(Map),拖动列表滚轴,拉到最右侧,勾选必填项集合。点击下一步。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_23

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_24

参数说明

参数

说明

示例

标签

输入参数的标签名,用于在页面显示。

model、messages

名称

新建输入参数的名称,名称是输入参数在系统中的唯一标识。

model、messages

参数位置

设置输入参数的位置,取值如下:消息体、URL查询参数、URL路径参数

消息体

数据类型

设置输入参数的数据类型,取值如下:日期:日期类型,精度到天。日期/时间:时间类型,精度到秒。数字:数字类型。字符串:字符串类型。布尔值:布尔类型,取值为“true”和“false”。全局结构体。键值对(Map):Map集合类型。对象:对象标识类型。敏感文本,如姓名、手机号等。

字符串、键值对(Map)

必填

输入参数是否设置为必填。

勾选

集合

输入参数是否设置为数组类型。

仅输入参数messages,勾选集合

  1. 输出参数

列表上方,消息体格式选择。数据类型选择键值对(Map),单击保存

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_25

3.3 编辑连接器认证信息

在已创建连接器ds的认证信息页签,单击新建,开始设置认证信息。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_26

在添加认证信息界面,标签设置为ds,名称设置为命名空间__ds

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_27

在可选设置中,勾选鉴权设置,并将鉴权协议选择为简单消息头

设置消息头的键为Authorization,值为步骤“2.3 创建API Key,获取密钥”中获取的API Key,填写格式为Bearer+API Key(两者之间需要有一个空格)。最后单击保存

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_28

参数说明

参数

说明

示例

标签

认证的标签名,用于在页面显示。取值范围:1~64个字符。

ds

名称

认证的名称,名称是认证在系统中的唯一标识。命名要求如下:长度不能超过64个字符,包括前缀命名空间的长度。名称前的内容为命名空间,在华为云Astro轻应用中为了避免不同租户间数据的重名,租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间,创建后不支持修改。必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。

ds

鉴权设置

鉴权协议:设置鉴权协议,支持OAuth、简单消息头和JWT(JSON Web Tokens)三种。

简单消息头

消息头属性

定义调用业务接口时,所用的消息头的映射规则。当使用获取的token,去返回具体rest action时,按照OAuth2的标准一般是将token放到请求头上。例如,Authorization: Bearer ${access_token}。

消息头的键为Authorization,值为步骤“2.3 创建API Key,获取密钥”中获取的API Key,填写格式为Bearer+API Key(两者之间需要有一个空格)

至此自定义连接器创建完成,最后返回自定义连接器的动作页签,在动作列表中,将之前创建好的pro_man__ds设置为on,启用该动作。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_29

4. 新建服务编排

4.1 新建服务编排

在Astro轻应用服务控制台,左侧工具栏选择逻辑,点击编排后面的“+” 。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_30

在添加服务编排界面,选择创建一个新的服务编排,标签设置为dss,名称设置为命名空间__dss,类型选择Autolaunched Flow,点击添加

4.2 添加变量

在服务编排设计器中,单击全局上下文图标,进入全局上下文页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_31

点击变量后面的“+”,新增变量result,点击变量后面的“...”,选择设置。在变量界面,修改数据类型为任意,点击保存

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_32

新增变量messages,点击变量后面的“...”,选择设置。在变量界面,修改数据类型为任意,并勾选是否为数组,点击保存

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_33

参数说明

变量名

数据类型

是否为数组

result

任意

messages

任意

4.2 设置图元
  1. 新增自定义拦截器图元

在服务编排设计器的连接器 > 自定义中,拖拽“3. 创建自定义连接器”中创建的自定义连接器ds到画布中。

注:如果此处选择不到连接器,请确认“3. 创建自定义连接器”中创建的自定义连接器ds是否已启用。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_34

  1. 配置图元参数

选中开始图元,点击右侧的参数图标,为开始图元设置入参和出参。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_35

选中连接器图元,点击连接器图标,动作选择之前创建的的自定义连接器pro_man__ds。

  • 新增输入参数model,并设置其源为“2.2 获取模型部署接口地址和参数”中获取到的模型名称DeepSeek-V3
  • 新增输入参数messages,在全局上下文中拖曳“4.2 添加变量”中创建的变量messages至源一栏中。
  • 新增输出参数,选择源为$out,在全局上下文中拖曳“4.2 添加变量”中创建的变量result至目标一栏中。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_36

  1. 配置连线

连接开始图元和连接器图元。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_37

单击服务编排设计器上方的保存按钮,保存服务编排。

5. 运行服务编排

5.1 运行服务编排

点击服务编排设计器上方的运行按钮,运行服务编排,系统自定进入Flow run页面。输入参数可自定义,运行速度取决于大模型返回的速度。

输入参数示例:

{
  "messages": [
    {
      "role": "user",
      "content": "介绍一下南京,200字内"
    }
  ]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_38

点击下方的运行按钮,得到运行结果:

{
  "interviewId": "002N000001O7Y77VK2eO",
  "outputs": {
    "result": {
      "choices": [
        {
          "finish_reason": "stop",
          "index": 0,
          "logprobs": null,
          "message": {
            "content": "南京,江苏省省会,中国四大古都之一,有2500多年建城史,素有“六朝古都”“十朝都会”之称。地处长江下游,山水城林交融,紫金山、玄武湖等自然景观与明孝陵、中山陵等历史遗迹相映生辉。夫子庙、秦淮河承载千年文脉,民国建筑群见证近代风云。南京大屠杀遇难同胞纪念馆铭记历史伤痛。现代南京是长三角重要中心城市,高校云集(如南京大学),经济活跃,以电子信息、生物医药等产业为支柱。鸭血粉丝汤、盐水鸭为特色美食,梧桐树荫下的城市兼具厚重底蕴与宜居活力。(199字)",
            "reasoning_content": null,
            "role": "assistant",
            "tool_calls": []
          },
          "stop_reason": null
        }
      ],
      "created": 1751336631,
      "id": "chat-90d8175aac3b41058a02db5c079bf1b9",
      "model": "DeepSeek-V3",
      "object": "chat.completion",
      "prompt_logprobs": null,
      "usage": {
        "completion_tokens": 147,
        "prompt_tokens": 9,
        "total_tokens": 156
      }
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_39

5.2 启用服务编排

点击服务编排设计器上方的启用按钮,启用服务编排。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_40

四、智能助手对话界面开发

1. 创建智能助手对话界面

在Astro轻应用服务控制台,左侧工具栏选择界面,点击页面后面的“+” 。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_41

在添加标准页面,选择空白,设置标签为chat,名称为命名空间__chat。点击添加。

参数说明

参数

说明

示例

标签

输入标准页面的标签名,用于在页面显示,创建后可修改。取值范围:1~64个字符。

chat

名称

输入标准页面的名称,名称是标准页面在系统中的唯一标识,创建后不可修改。命名要求如下:长度不能超过64个字符,包括前缀命名空间的长度。名称前的内容为命名空间,在华为云Astro轻应用中为了避免不同租户间数据的重名,租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间,创建后不支持修改。必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。

chat

在标准页面的扩展组件中,拖拽"三、智能助手后端功能开发"中“1. 创建智能助手模板自定义组件”中上传的组件至页面中。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_42

2. 设置agent-ui组件属性

2.1 创建模型

选中agent-ui组件,在属性 > 数据绑定中单击齿轮图标,进入选择模型页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_43

单击新建模型,在基本信息中输入模型名称message,来源选择自定义,单击下一步

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_44

在设置中,不做任何修改,点击下一步

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_45

在方法中,不做任何修改,点确定

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_46

按照上述方法,单击新建模型,创建模型loading。、

选中message模型,单击确定,返回标准页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_47

2.2 属性值绑定

单击属性值绑定后的“+”,属性选择加载状态,单击模型字段中的齿轮图标。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_48

在弹出的选择模型界面,勾选上一步创建的loading模型。点击确定

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_49

2.3 基本属性设置

属性 > 基本属性中,可根据自身需要设置品牌名、logo、背景图和对话头像等内容。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_50

2.4 配置事件

在事件页签中,单击发送消息后的“+”,进入添加动作页面。

将下面这段代码复制到自定义JS代码中。

// 当前组件
const _component = context.$component.current;
//创建数组存储组件内对话记录
let conversationHistory =[];
conversationHistory = _component.getMessages();
//将组件内对话记录转化成deepseek需要的参数格式
const formattedHistory = conversationHistory.length === 0 
  ? [] 
  : conversationHistory.map((message, index) => ({
      role: index % 2 === 0 ? 'user' : 'assistant',
      content: message.content
    }));
$model.ref('loading').setData(true);//这里的loading为属性值绑定中创建绑定的模型
// 初始化Flow
var _flow = context.flow("命名空间__dss");//这里为创建的编排名称
// 设置Flow版本号
_flow.version("1.0.1");
// 运行Flow编排调用deepseek
_flow.run({ messages: formattedHistory}).then(function (res) {
    //获取deepseek的回答结果
    var ans =res["result"][0]["result"]["choices"][0]["message"]["content"];//这里的result为编排中创建的出参变量
    //去除回答结果中的思考过程
   var ans1 =ans.replace(/<think>[\s\S]*?<\/think>\n*/, "");
    $model.ref('message').setData(ans1);//这里的message为数据绑定中创建绑定的模型
    $model.ref('loading').setData(false);//这里的loading为属性值绑定中创建绑定的模型
    // TODO: Your business logic
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_51

注:

  • 代码var _flow = context.flow("命名空间__dss");中需要替换“三、智能助手后端功能开发”的“4. 新建服务编排”步骤中创建的服务编排的名称。
  • 代码_flow.version("1.0.1");中版本号参数可以在“三、智能助手后端功能开发”的“4. 新建服务编排”步骤中创建的服务编排详情中找到。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_52

3. 对话测试

单击页面上方的保存按钮,保存标准页面,保存成功后单击预览按钮,进入预览页面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_53

在预览页面中,输入问题“介绍一下南京,200字内”。

继续输入问题“我想去南京旅游,帮我推荐一下南京有哪些值得去的旅游景点”。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_Astro_54

五、智能助手模板应用个性化设置

为智能助手模板应用添加一个菜单项,保存并预览应用。

  1. 在Astro轻应用服务控制台左侧工具栏中选择开始,再单击应用导航设置

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_55

在主导航设置页签,单击新建

设置菜单名称为华为开发者空间 - 案例中心小助手、唯一标识为AstroChat,页面选择“四、智能助手对话界面开发”中创建的标准页面,单击保存

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_56

保存成功后点击运行,选择立即运行。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_57

进入AsroChat运行界面。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_华为开发者空间_58

输入问题测试,运行成功。

基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手界面_低代码_59

至此,基于基于华为开发者空间Astro低代码应用平台,构建Deepseek智能助手案例结束。