diff --git a/index.html b/index.html
index b87fea8..4da4301 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
-
+
+
diff --git a/main.js b/main.js
index 407d22b..9830bb3 100644
--- a/main.js
+++ b/main.js
@@ -4,7 +4,7 @@ import { btnStatus,recorder,getWebSocketUrl,connectWebSocket } from "./recorder.
import { createAlova } from 'alova';
import adapterFetch from 'alova/fetch';
-let { onchangeSize,initDate,setScrollPosition,addBackItemText,addItemImg,addItemSmallImg,addItemBigImg,addredHot,addBackItemAction,addWrapper,addClickItemImg } = QMUtil;
+let { onchangeSize,initDate,setScrollPosition,addBackItemText,addItemImg,addItemSmallImg,addItemBigImg,addredHot,addBackItemAction,addBackShopAction,addWrapper,addClickItemImg,addClickWCList,addQRCode, washroom } = QMUtil;
const alovaInstance = createAlova({
requestAdapter: adapterFetch(),
@@ -14,6 +14,7 @@ const alovaInstance = createAlova({
window.cli = null
window.woNode = null
window.woVoice = null
+window.isSearch=false;
window.onload = () => {
onchangeSize();
@@ -40,14 +41,17 @@ let addMy = () => {
}
window.audioStart = () => {
- window.stopTTS();
//开始识别
- if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
- connectWebSocket();
- document.getElementById("stopBnt").style.display = "block";
- document.getElementById("startBnt").style.display = "none";
- addMy(); //添加我气泡
- setScrollPosition();
+ if(!window.isSearch){
+ window.stopTTS();
+ if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
+ connectWebSocket();
+ document.getElementById("stopBnt").style.display = "block";
+ document.getElementById("startBnt").style.display = "none";
+ addMy(); //添加我气泡
+ setScrollPosition();
+ }
+ //callAiModel("电影院在哪里");
}
}
@@ -65,6 +69,7 @@ window.content = [{"logo":"./assets/con1.png","img":"./assets/conDail.png"},{"lo
//接收模型回复处理内容
function callBack(str){
+ window.isSearch = false;
document.getElementById("ing").remove();
console.log(str);
let obj = str;
@@ -73,48 +78,111 @@ function callBack(str){
addredHot();
}
switch(obj.data.type){
+ case "shopNotFound" :
+ addredHot();
+ addBackItemText("此品牌在我商场未入驻。");
+ break;
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);
- });
- }
+ if(obj.data.value.text){
+ addBackItemText(obj.data.value.text);
+ }else{
+ if(obj.data.value.content && obj.data.value.content.length>0){
+ let opt = {
+ value:"",
+ txt:"为您推荐以下店铺"
+ }
+ obj.data.value.content.sort((a,b)=>{
+ if(a.buildingOrder != b.buildingOrder){
+ return a.buildingOrder - b.buildingOrder;
+ }else{
+ return a.floorOrder - b.floorOrder;
+ }
+ });
+ obj.data.value.content.forEach((item,index)=>{
+ let floor=item.building+item.floor+"楼";
+ if(!opt.value){
+ opt.value = floor;
+ opt.txt += floor+item.name+", ";
+ }else{
+ if(opt.value == floor){
+ opt.txt += item.name+", ";
+ }else{
+ opt.txt += floor+item.name+", ";
+ }
+ }
+ })
+ opt.txt = opt.txt.substring(0, opt.txt.length-2);
+ addBackItemText(opt.txt);
+ }
+ }
+ if(obj.data.value.content && obj.data.value.content.length>0){
+ let div = addWrapper();
+ addBackShopAction(div, obj.data.value.content, null);
+ }
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);
- });
- }
+ 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");
+ if(typeof obj.data.value != "string"){
+ if(obj.data.value.length !=0){
+ let opt = {
+ value:"",
+ txt:""
+ }
+ obj.data.value.sort((a,b)=>{
+ if(a.buildingOrder != b.buildingOrder){
+ return a.buildingOrder - b.buildingOrder;
+ }else{
+ return a.floorOrder - b.floorOrder;
+ }
+ });
+ obj.data.value.forEach((item,index)=>{
+ let floor=item.building+item.floor+"楼";
+ if(!opt.value){
+ opt.value = floor;
+ opt.txt += floor+", ";
+ }else{
+ if(opt.value != floor){
+ opt.txt += floor+", ";
+ }
+ }
+ })
+ opt.txt = opt.txt.substring(0, opt.txt.length-2);
+ if(obj.data.value.length === 1){
+ addBackItemText(`${obj.data.value[0].name} 位于商场 ${opt.txt},\n下方为您推荐导航路线`);
+ addItemImg("./assets/map.png");
+ addQRCode();
+ if(obj.data.recommend && obj.data.recommend.length>0){
+ addBackItemText("相关品牌推荐:","",false);
+ let div = addWrapper();
+ addBackShopAction(div, obj.data.recommend, null);
+ }
+ }else{
+ addBackItemText(`${obj.data.query} 位于商场 ${opt.txt}`);
+ let div = addWrapper();
+ addBackShopAction(div, obj.data.value, null);
+ }
+ }else{
+ addBackItemText(`您的问题我还在持续学习中.`);
+ }
}else{
- addBackItemText(`您的问题我还在持续学习中.`);
+ addBackItemText(obj.data.value);
}
break;
case "facility" :
- if(typeof obj.data.value.length == "number"){
- addBackItemText(`下方为您推荐导航到${obj.data.value}的线路`);
- addItemImg("./assets/map1.png");
+ if(obj.data.value === "服务台"){
+ addBackItemText(`客服中心在二期七楼,下方为您推荐导航到${obj.data.value}的路线`);
}else{
- addBackItemText(`下方为您推荐导航到${obj.data.value}的线路`);
- addItemImg("./assets/map1.png");
+ addBackItemText(`下方为您推荐导航到最近${obj.data.value}的路线`);
}
+ addItemImg("./assets/map1.png");
+ addQRCode();
break;
case "weather" :
addBackItemText(`${obj.data.value.city}今天天气${obj.data.value.dayweather},最高温度${obj.data.value.daytemp_float}`);
@@ -129,20 +197,35 @@ function callBack(str){
}
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);
- }
+ if(obj.data.value.text || obj.data.value.content){
+ 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);
+ }
+ }else{
+ addBackItemText("您的问题我还在持续学习中.");
+ }
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);
- });
+ if(obj.data.value.text || window.content.length>0){
+ obj.data.value.text && addBackItemText(obj.data.value.text);
+ if(window.content.length>0){
+ let div = addWrapper();
+ window.content.forEach((item)=>{
+ addClickItemImg(div, item.logo, item.img, 165, 212, window.clickCoupon);
+ });
+ }
+ }else{
+ addBackItemText("您的问题我还在持续学习中.");
}
break;
+ case "washroom" : //洗手间
+ addBackItemText(`下方为您推荐导航到最近洗手间的路线`);
+ addItemImg("./assets/map1.png");
+ addQRCode();
+ addBackItemText(`网红洗手间推荐:`,"",false);
+ addClickWCList(addWrapper(),window.clickWashroom);
+ break;
case "video" : //视频
obj.data.value.text && addBackItemText(obj.data.value.text);
if(obj.data.value.content && obj.data.value.content.length>0){
@@ -195,6 +278,32 @@ window.clickVideo = function(event){
window.hello();
})
}
+//点击洗手间
+window.clickWashroom = function(event){
+ console.log(event.target.dataset.floor);
+ window.isplayHello = false; //停止播放招呼语音
+ window.stopTTS();
+ let mark = document.getElementById("mark");
+ mark.style.display = "flex";
+
+ let div = document.createElement("div");
+ div.className = "wcdail";
+ div.innerHTML = `
+

+
+
洗手间-${event.target.dataset.name}
+
${event.target.dataset.floor}
+
+
+

`;
+ mark.appendChild(div);
+ mark.addEventListener("click", ()=>{
+ div.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', {
@@ -207,22 +316,34 @@ let getAiData = async (msg) => {
headers: {
'Authorization': 'Bearer app-Fzon9DlAGNVwJSSrjF1gCiw4'
}
+ }).catch(error => {
+ let res = {
+ code:200,
+ data: {
+ "type": "other",
+ "value": "您的问题我还在持续学习中."
+ }
+ }
+ callBack(res)
+ return;
});
console.log(response)
let res = {
code:200,
data: {
"type": response.data?.outputs?.type,
- "value": response.data?.outputs?.value
+ "value": response.data?.outputs?.value,
+ "recommend": response.data?.outputs?.recommend,
+ "query": response.data?.outputs?.query
}
}
callBack(res)
}
function callAiModel(msg){
- console.log(msg)
+ window.isSearch = true;
// 调用模型
- addBackItemText("思考中...","ing",false)
+ addBackItemText("思考中...","ing",false);
setScrollPosition();
// 调用api
getAiData(msg);
@@ -230,7 +351,6 @@ function callAiModel(msg){
//停止识别后动作
window.audioStop = () => {
- console.log("audioStop")
//停止识别
if (btnStatus === "CONNECTING" || btnStatus === "OPEN") {
// 结束录音
@@ -257,8 +377,8 @@ window.hello=()=>{
clearTimeout(window.timer);
if(window.isplayHello){
window.isHello=true;
- window.startTTS("您好呀,我是德基广场数字客服小德,请问有什么需要帮助的吗?");
- document.getElementById("cont").innerHTML = `
小德您好呀,有什么需要帮助的吗?
`;
+ window.startTTS("您好呀,我是德基广场数字客服小红帽,请问有什么需要帮助的吗?");
+ document.getElementById("cont").innerHTML = `
小红帽您好呀,有什么需要帮助的吗?
`;
}
},60000);
}
diff --git a/public/style.css b/public/style.css
index 99735d1..2f98e6b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -106,4 +106,98 @@ li.right div {
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
-}
\ No newline at end of file
+}
+
+.hotroom{
+ display: flex;
+ padding: 0px 101px 48px 48px;
+ align-items: flex-end;
+ gap: 50px;
+ align-self: stretch;
+ border-radius: 12px 12px 0px 0px;
+ border-bottom: 1px solid #D4D4D4;
+ background: #F2F2F2;
+ height: 190px;
+}
+
+.wctitle{
+ color: rgba(0, 0, 0, 0.80);
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+}
+
+.wcaddress{
+ color: rgba(0, 0, 0, 0.80);
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 44px;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ gap: 20px;
+}
+
+.wcdail{
+ display: flex;
+ width: 930px;
+ flex-direction: column;
+ border-radius: 12px;
+}
+
+.wccontent{
+ display: flex;
+ padding-left: 305px;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.shop-list{
+ background: #FFF;
+ position: relative;
+ width: 150px;
+ height: 150px;
+ display: inline-flex;
+ flex-direction: column;
+ padding: 10px 10px 2px 10px;
+ align-items: center;
+ gap: 10px;
+ border-radius: 4px;
+ margin-right: 12px;
+}
+.shop-item{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-self: stretch;
+ align-items: center;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 22px;
+}
+.shop-name{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 95px;
+}
+.shop-add{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: clip;
+ max-width: 65px;
+ color:rgba(0, 0, 0, 0.60);
+}
+.shop-tip{
+ padding: 4px 8px;
+ border-radius: 2px;
+ background: linear-gradient(90deg, #9A7C4D 0%, #CFA876 100%), #B59362;
+ height: 23px;
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ color: #FFF;
+}
diff --git a/public/tts/index.js b/public/tts/index.js
index 5bad454..96326ca 100644
--- a/public/tts/index.js
+++ b/public/tts/index.js
@@ -58,10 +58,9 @@ function connectWebSocket(str) {
aue: "raw",
auf: "audio/L16;rate=16000",
vcn: "x4_mengmengneutral",
- speed: 50, //语速
+ speed: 60, //语速
volume: 80, //音量
pitch: 50, //音高
- bgs: 1,
tte:"UTF8",
},
data: {
diff --git a/util.js b/util.js
index a2e6731..dd18a83 100644
--- a/util.js
+++ b/util.js
@@ -66,22 +66,22 @@ var QMUtil = {
},200);
},
- addAvdi:function (){
- let wli = document.createElement("li");
- wli.className = "left"
- wli.innerHTML="
更多精彩内容请关注德基广场小程序
";
- document.getElementById("cont").appendChild(wli);
+ addQRCode:function (){
+ let wli1 = document.createElement("li");
+ wli1.className = "left"
+ wli1.innerHTML="
扫描下方二维码查看详细路线
";
+ document.getElementById("cont").appendChild(wli1);
+
let wli2 = document.createElement("li");
wli2.className = "left"
- wli2.innerHTML='
';
+ wli2.innerHTML='
';
document.getElementById("cont").appendChild(wli2);
- setScrollPosition();
},
addredHot:function (){
let aili = document.createElement("li");
aili.className = "left"
- aili.innerHTML="
小德";
+ aili.innerHTML="
小红帽";
document.getElementById("cont").appendChild(aili);
},
//活动
@@ -101,10 +101,24 @@ var QMUtil = {
${obj.intro}
`;
},
+ //店铺
+ addBackShopAction:function (div,list,clickFun){
+ list.forEach((item, index)=>{
+ let all = document.createElement("div");
+ all.className="shop-list";
+ all.innerHTML = `