# 步骤五：创建智能助手模板对话界面
在智能助手模板应用中，创建一个标准页面，用于组装智能助手模板对话界面。
1. 在应用设计器的左侧导航栏中，选择"界面"。
2. 单击页面后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213628382.png)，设置标准页面的基本信息，单击"添加"。
   
   图1新建标准页面   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248748121.png "点击放大")
   表1标准页面参数说明 
   | 参数 | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 示例   |
   |:---|:---|:---|
   | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | chat |
   | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。   - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。   | chat |
      
   
   
3. 在标准页面的"扩展组件"中，拖拽[步骤三：上传智能助手模板自定义组件](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0039.html)中上传的组件至页面中。
   
   图2拖拽组件到页面中   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213788174.png "点击放大")
   
   
4. 选中agent-ui组件，在"属性 \> 数据绑定"中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248628213.png)，进入选择模型页面。
5. 单击"新建模型"，输入模型名称（如message），"来源"选择"自定义"，单击"下一步"。 
   图3设置模型基本信息   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213628402.png "点击放大")
   
   
6. 直接单击"下一步"，再单击"确定"，完成模型的创建。 
   图4查看已创建的message模型   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248748145.png "点击放大")
   
   
7. 按照上述方法，创建模型loading。 
   图5创建模型loading   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213788194.png "点击放大")
   
   
8. 选中message模型，单击"确定"，返回标准页面。 
   图6选中message模型   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248628245.png "点击放大")
   
   
9. 单击"属性值绑定"后的"+"，"属性"选择"加载状态"，单击"模型字段"中的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213628434.png)。
   
   图7添加属性值绑定   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248748173.png)
   
   
10. 选择loading模型，单击"确定"，返回标准页面。 
    图8选择loading模型   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213788226.png "点击放大")
    
    
11. 在"属性 \> 基本属性"中，可根据自身需要设置品牌名、logo、背景图和对话头像等内容。 
    图9设置基本属性   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248628273.png)
    
    
12. 在"事件"页签中，单击发送消息后的"+"，进入添加动作页面。 
    图10添加事件   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213628462.png "点击放大")
    
    
13. 将如下代码拷贝到自定义动作中，单击"创建"。 
    图11新建自定义动作   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248748197.png "点击放大")
    其中，"命名空间__dss"为服务编排的名称，请配置为[3](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0056.html#astrozero_bestpractice_0056__li1245125463010)中创建服务编排的名称。
    ```
    // 当前组件
    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("0.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
    });
    ```
    
    
14. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213788250.png "点击放大")，保存标准页面，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248628293.png)，进入预览页面。
    
    图12保存并预览页面   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002213628482.png "点击放大")
    
    
15. 发送对话进行测试验证。 
    图13功能测试   
    ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002248748221.png "点击放大")