網頁瀏覽器集成智能對話機器人大模型問答

效果展示

概覽

1. 調用ApplyForStreamAccessToken接口。參考文檔：ApplyForStreamAccessToken - 獲取流式調用的連接信息

2. ApplyForStreamAccessToken接口，返回的連接簽名信息有效期2小時，必須在到期前重新獲取

3. 接收到用戶發(fā)送的消息，并調用自定義的代理SSE接口

4. 計算會話接口簽名。參考文檔：會話接口簽名

5. 調用會話接口，監(jiān)聽SSE事件，獲取大模型流式輸出。參考文檔：流式會話接口

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

示例

示例工程代碼

java-example.zip

如何運行

1. 本示例工程的運行環(huán)境要求為JDK 8，參考文檔：在Windows安裝JDK

2. 根據(jù)智能對話機器人配置操作完成后，獲取示例工程中的參數(shù)中的參數(shù)

3. 將上面提到的參數(shù)填寫到示例工程的application.properties配置文件中

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

5. 瀏覽器打開 http://localhost:8080/ 即可進行對話問答

示例工程中的參數(shù)

智能對話機器人配置

1. 進入智能對話機器人控制臺，https://chatbot.console.aliyun.com

2. 機器人創(chuàng)建，獲取機器人id，發(fā)布機器人（如無發(fā)布按鈕則跳過本步驟）

   

3. 獲取業(yè)務空間AgentKey，地址：業(yè)務空間管理

   

4. 阿里云賬號AKSK獲取，地址：AccessKey

前端SDK使用常見問題

1. 如何支持Post請求

   1. requests.send方法中寫請求處理，返回Promise結果，Promise結果要求將對話機器人的返回結果原樣返回，注意首字母要保持大寫。

2. 對頭像等樣式不滿意，如何自定義樣式

   1. 通過css選擇器對頭像等進行樣式覆蓋

3. 頭像沒有展示

   1. ChatSDK的config.avatarWhiteList參數(shù)需要配置下要展示頭像的卡片列表

4. 點贊點踩沒有展示

   1. ChatSDK需要配置requests.evaluate請求方法，并且檢查下答案經過isvParser轉換后的數(shù)據(jù)的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;
   }