【集成示例】网页端

网页浏览器集成智能对话机器人大模型问答

效果展示

概览

1. 调用ApplyForStreamAccessToken接口。参考文档：ApplyForStreamAccessToken - 获取流式调用的连接信息

2. ApplyForStreamAccessToken接口，返回的连接签名信息有效期2小时，必须在到期前重新获取

3. 接收到用户发送的消息，并调用自定义的代理SSE接口

4. 计算会话接口签名。参考文档：会话接口签名

5. 调用会话接口，监听SSE事件，获取大模型流式输出。参考文档：流式会话接口

6. 大模型流式接口会多次返回，由前端SDK解析并渲染大模型的回复。前端SDK

示例

示例工程代码

java-example.zip

如何运行

1. 本示例工程的运行环境要求为JDK 8，参考文档：在Windows安装JDK

2. 根据智能对话机器人配置操作完成后，获取示例工程中的参数中的参数

3. 将上面提到的参数填写到示例工程的application.properties配置文件中

4. 运行com.aliyun.chatbot.channel.WebApplication

5. 浏览器打开 http://localhost:8080/ 即可进行对话问答

示例工程中的参数

智能对话机器人配置

1. 进入智能对话机器人控制台，https://chatbot.console.aliyun.com

2. 机器人创建，获取机器人id，发布机器人（如无发布按钮则跳过本步骤）

   

3. 获取业务空间AgentKey，地址：业务空间管理

   

4. 阿里云账号AKSK获取，地址：AccessKey

前端SDK使用常见问题

1. 如何支持Post请求

   1. requests.send方法中写请求处理，返回Promise结果，Promise结果要求将对话机器人的返回结果原样返回，注意首字母要保持大写。

2. 对头像等样式不满意，如何自定义样式

   1. 通过css选择器对头像等进行样式覆盖

3. 头像没有展示

   1. ChatSDK的config.avatarWhiteList参数需要配置下要展示头像的卡片列表

4. 点赞点踩没有展示

   1. ChatSDK需要配置requests.evaluate请求方法，并且检查下答案经过isvParser转换后的数据的meta.evaluable是否为true

      

4. 假如返回结果经过后端处理，将首字母改为了小写，则isvParser处理前需要先将首字母改为大写，处理代码参考

   function upperCaseBotMsg(msg) {
     let newMsg = msg;
     if (msg instanceof Array) {
       newMsg = msg.map((item) => {
         return upperCaseBotMsg(item);
       });
     } else if (typeof msg == 'object' && msg) {
       newMsg = {};
       for (const key in msg) {
         newMsg[key.substring(0, 1).toUpperCase() + key.substring(1)] = upperCaseBotMsg(msg[key]);
       }
     }
     return newMsg;
   }