deji_demo/main.js

import { onchangeSize,initDate,setScrollPosition,addBackItemText,addItemImg,addAvdi,addItemSmallImg,addItemBigImg,addredHot,addBackItemAction,addWrapper,addClickItemImg } from "./util.js";
import { btnStatus,recorder,getWebSocketUrl,connectWebSocket } from "./recorder.js"

import { createAlova } from 'alova';
import adapterFetch from 'alova/fetch';

const alovaInstance = createAlova({
  requestAdapter: adapterFetch(),
  responded: response => response.json()
});

window.cli = null
window.woNode = null
window.woVoice = null

window.onload = () => {
    onchangeSize();
    window.addEventListener("resize",onchangeSize);
    initDate();  //初始化时间
    setScrollPosition();  //自动滚动到底部
    document.addEventListener("click",()=>{
        window.playOver();
    });
}

let addMy = () => {
    window.woNode = document.createElement("li");
    window.woNode.className = "right"
    window.woNode.innerHTML="<span>我</span>";
    document.getElementById("cont").appendChild(window.woNode);

    window.woVoice = document.createElement("li");
    window.woVoice.className = "right"
    document.getElementById("cont").appendChild(window.woVoice);
    window.cli = document.createElement("div");
    window.woVoice.appendChild(window.cli);
}

window.audioStart = () => {
    window.stopTTS();
    //开始识别
    if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
        connectWebSocket();
        document.getElementById("stopBnt").style.display = "block";
        document.getElementById("startBnt").style.display = "none";
        addMy();  //添加我气泡
        setScrollPosition();
    }

    // addBackItemText("思考中...","ing",false)
    // setScrollPosition();
    // let res = {
    //     code:200,
    //     data: {
    //         "type": "member",
    //         "value": {
    //             "text":"德基美术馆",
    //             "content":[{"logo":"/assets/act.png"},{"logo":"/assets/act1.png"},{"logo":"/assets/act2.png"},{"logo":"/assets/act3.png"}]
    //         }
    //     }
    // }
    // callBack(res);
}

function delMy(){
    if(window.cli && !window.cli.innerText){
        window.woVoice.remove();
        window.woNode.remove();
        window.woNode = null;
        window.cli = null;
        window.woVoice = null;
    }
}

//接收模型回复处理内容
function callBack(str){
    document.getElementById("ing").remove();
    console.log(str);
    let obj = str;
    if(obj.code == 200){
        if(obj.data.value){
            addredHot();
        }
        switch(obj.data.type){
            case "shopList" :
                if(typeof obj.data.value.length == "number"){
                    obj.data.value.forEach((item, index)=>{
                        addBackItemAction(item);
                    });
                }else{
                    addBackItemText(obj.data.value.text || "为您推荐以下店铺");
                    obj.data.value.content.forEach((item, index)=>{
                        addBackItemAction(item);
                    });
                }
                break;
            case "activity" :
                if(typeof obj.data.value.length == "number"){
                    obj.data.value.forEach((item, index)=>{
                        addBackItemAction(item);
                    });
                }else{
                    addBackItemText(obj.data.value.text || "为您推荐以下活动");
                    obj.data.value.content.forEach((item, index)=>{
                        addBackItemAction(item);
                    });
                }
                break;
            case "shop" :
                try{
                    if(typeof obj.data.value.length == "number"){
                        addBackItemText(`${obj.data.value[0].name}位于商场 ${obj.data.value[0].house_number},\n下方为您推荐导航线路`);
                        addItemImg("./assets/map.png");
                    }else{
                        addBackItemText(`${obj.data.value.name}位于商场 ${obj.data.value.house_number},\n下方为您推荐导航线路`);
                        addItemImg("./assets/map.png");
                    }
                }catch(e){

                }
                break;
            case "facility" :
                if(typeof obj.data.value.length == "number"){
                    addBackItemText(`下方为您推荐导航到${obj.data.value}的线路`);
                    addItemImg("./assets/map1.png");
                }else{
                    addBackItemText(`下方为您推荐导航到${obj.data.value}的线路`);
                    addItemImg("./assets/map1.png");
                }
                break;
            case "weather" :
                addBackItemText(`${obj.data.value.city}今天天气${obj.data.value.dayweather}，最高温度${obj.data.value.daytemp_float}`);
                break;
            case "member" :    //会员等级
                addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    let div = addWrapper();
                    obj.data.value.content.forEach((item, index)=>{
                        addClickItemImg(div, item.logo, 200, 200, null);
                    });
                }
                break;
            case "qrcode" :    //二维码
                addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    addItemSmallImg(obj.data.value.content[0].logo);
                }      
                break;
            case "coupon" :    //优惠券
                addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    let div = addWrapper();
                    obj.data.value.content.forEach((item)=>{
                        addClickItemImg(div, item.logo, 165, 120, window.clickCoupon);
                    });
                }
                break;
            case "video" :    //视频
                addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    addItemBigImg(obj.data.value.content[0].logo, window.clickVideo);
                }
                break;
            default :
                addBackItemText(obj.data.value);
                break;
        }
    }
    setScrollPosition();
}

//点击优惠券弹窗
window.clickCoupon = function(event){
    console.log(event);
}
window.clickVideo = function(event){
    console.log(event);
}

let getAiData = async (msg) => {
    const response = await alovaInstance.Post('http://dify.123.1000my.com:59222/v1/workflows/run', {
        inputs: {
            "question": msg
        },
        response_mode: 'blocking',
        user: 'djdemo'
      },{
        headers: {
          'Authorization': 'Bearer app-DjzwAeiecJhqdavo6Xev0fUr'
        }
      });
    console.log(response)
    let res = {
        code:200,
        data: {
            "type": response.data?.outputs?.type,
            "value": response.data?.outputs?.value
        }
    }
    callBack(res)
}

function callAiModel(msg){
    console.log(msg)
    // 调用模型
    addBackItemText("思考中...","ing",false)
    setScrollPosition();
    // 调用api
    getAiData(msg); 
}

//停止识别后动作
window.audioStop = () => {
    console.log("audioStop")
    //停止识别
    if (btnStatus === "CONNECTING" || btnStatus === "OPEN") {
        // 结束录音
        recorder.stop();
    }else if (btnStatus === "CLOSED"){
        document.getElementById("stopBnt").style.display = "none";
        document.getElementById("startBnt").style.display = "block";
        delMy();  //没有收到语音，删除空气泡
        // 调用模型
        callAiModel(window.cli.innerText)
    }
}
//语音播放完成
window.playOver=()=>{
    document.getElementById("bgVideo").style.display = "";
    document.getElementById("hVideo").style.display = "none";
    document.getElementById("aVideo").style.display = "none";
    window.hello();
}
window.timer=-1;
window.hello=()=>{
    clearTimeout(window.timer);
    window.timer = setTimeout(()=>{
        clearTimeout(window.timer);
        window.isHello=true;
        window.startTTS("您好呀，我是德基广场数字客服小德，请问有什么需要帮助的吗？");
    },60000);
}
window.isHello=true;
window.changeVideo=()=>{
    document.getElementById("bgVideo").style.display = "none";
    document.getElementById("hVideo").style.display = window.isHello ? "" : "none";
    document.getElementById("aVideo").style.display = !window.isHello ? "" : "none";
}