deji_demo/main.js

import QMUtil from "./util.js";
import { btnStatus,recorder,getWebSocketUrl,connectWebSocket } from "./recorder.js"

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

let { onchangeSize,initDate,setScrollPosition,addBackItemText,addItemImg,addItemSmallImg,addItemBigImg,addredHot,addBackItemAction,addWrapper,addClickItemImg } = QMUtil;

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();  //初始化时间
    window.setInterval(initDate,60000);
    setScrollPosition();  //自动滚动到底部
    document.addEventListener("click",()=>{
        window.hello();
    });
}

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();
    }
}

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

window.content = [{"logo":"./assets/con1.png","img":"./assets/conDail.png"},{"logo":"./assets/con2.png","img":"./assets/conDail.png"},{"logo":"./assets/con3.png","img":"./assets/conDail.png"},{"logo":"./assets/con4.png","img":"./assets/conDail.png"},{"logo":"./assets/con5.png","img":"./assets/conDail.png"}]

//接收模型回复处理内容
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 undefined:
                break;
            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" :
                if(obj.data.value.length !=0){
                    addBackItemText(`${obj.data.value[0].name}位于商场 ${obj.data.value[0].house_number},\n下方为您推荐导航线路`);
                    addItemImg("./assets/map.png");
                }else{
                    addBackItemText(`您的问题我还在持续学习中.`);
                }
                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" :    //会员等级
                obj.data.value.text && 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" :    //二维码
                obj.data.value.text && 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" :    //优惠券
                if(obj.data.value.text){
                    addBackItemText(obj.data.value.text);
                    let div = addWrapper();
                    window.content.forEach((item)=>{
                        addClickItemImg(div, item.logo, item.img, 165, 212, window.clickCoupon);
                    });
                }
                break;
            case "video" :    //视频
                obj.data.value.text && addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    addItemBigImg(obj.data.value.content[0].logo, obj.data.value.content[0].video, window.clickVideo);
                }
                break;
            default :
                obj.data.value && addBackItemText(obj.data.value);
                break;
        }
    }
    setScrollPosition();
}

//点击优惠券弹窗
window.clickCoupon = function(event){
    console.log(event.target.dataset.pop);
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    let video = document.createElement("img");
    video.src = event.target.dataset.pop;
    video.style.width = "700px";
    video.style.margin="auto";
    mark.appendChild(video);
    mark.addEventListener("click", ()=>{
        video.remove();
        mark.style.display = "none";
        window.isplayHello = true;
        window.hello();
    })
}
window.clickVideo = function(event){
    console.log(event.target.dataset.video);
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    let video = document.createElement("video");
    video.src = event.target.dataset.video;
    video.autoplay = true;
    video.style.width = "100%";
    video.style.height = "100%";
    mark.appendChild(video);
    mark.addEventListener("click", ()=>{
        video.remove();
        mark.style.display = "none";
        window.isplayHello = true;
        window.hello();
    })
}

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-Fzon9DlAGNVwJSSrjF1gCiw4'
        }
      });
    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=()=>{
    window.changeBg();
    window.hello();
    window.isplayHello=true;
}
window.timer=-1;
window.isplayHello=true;
window.hello=()=>{
    clearTimeout(window.timer);
    window.timer = setTimeout(()=>{
        clearTimeout(window.timer);
        if(window.isplayHello){
            window.isHello=true;
            window.startTTS("您好呀，我是德基广场数字客服小德，请问有什么需要帮助的吗？");
            document.getElementById("cont").innerHTML = `<li class="left"><span>小德</span></li><li class="left"><div>您好呀，有什么需要帮助的吗？</div></li>`;
        }
    },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";
}
window.changeBg=()=>{
    document.getElementById("bgVideo").style.display = "";
    document.getElementById("hVideo").style.display = "none";
    document.getElementById("aVideo").style.display = "none";
}