assistant-robot
Version:
An assistant widget, have a 3D robot which can interact with user, have a simple LLM which can chat with user.
156 lines (149 loc) • 6.58 kB
JavaScript
;var A=Object.defineProperty;var E=(t,e,o)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o;var d=(t,e,o)=>(E(t,typeof e!="symbol"?e+"":e,o),o);const x={position:[0,0,0],rotation:[0,Math.PI,0],helloActionName:"hello",idleActionName:"idle",helloContent:"Hi, you can talk to me!"},f={backgroundColor:0,backgroundAlpha:0,camera:{fov:50,near:.1,far:10,position:[0,0,2],lookAt:[0,0,0]},ambientLight:{color:16777215,intensity:.5},directionalLight:{color:16777215,intensity:2,position:[10,10,0]}},I={big:{width:640,height:480},small:{width:360,height:270}},s="assistant-robot-model-container",n="assistant-robot-tip-container",C='<div class="assistant-robot-container ',N=`">
<style>
.assistant-robot-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.${s}{
flex: 1;
position:relative;
width:100%;
}
.${n}{
position: absolute;
top: 2px;
left: 50%;
min-width: 100px;
border: 1px solid #aaaaaa;
border-radius: 6px;
background: #fff;
transform: translate(-50%);
padding: 12px 20px;
text-align: center;
animation: fadeInOut 0.4s ease-in-out;
}
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
.${n}::after{
content: '';
display: block;
position: absolute;
bottom: -6px;
left: 50%;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
background: #fff;
}
</style>
<div class="${s}">
<div class="${n}">HI!</div>
</div>
<div>
`,g={openCamera:"To interactive with the assistant, we'd like to access your device's camera.Take it easy, your pictures and information won't be sent anywhere or be stored.",alreadyOpenCamera:"the camera have be opened"};var p=(t=>(t.openCamera="openCamera",t.hello="hello",t))(p||{});const O="assistant-robot-input",h="assistant-robot-btn",c="assistant-robot-operation-container",l="assistant-robot-menu-btn",a="assistant-robot-menu-list",S='<div class="assistant-robot-operationbox',m=`">
<style>
.assistant-robot-operationbox{
box-sizing: border-box;
width: 100%;
height: 52px;
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
align-items: center;
border-radius: 54px;
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
0 3px 6px 0 rgba(0, 0, 0, 0.12),
0 5px 12px 4px rgba(0, 0, 0, 0.09);
background-color: #fff;
padding: 10px 12px;
}
.assistant-robot-input{
flex: 1;
min-width: 200px;
background: rgba(0,0,0,0);
border: 1px solid #dedede;
height: 28px;
margin-right: 6px;
outline:none;
color: #666666;
}
.assistant-robot-btn{
flex: 0 0 auto;
height: 24px;
}
.${c}{
position: relative;
height: 24px;
}
.${l}{
color: #aaaaaa;
width:24px;
height: 24px;
cursor: pointer;
}
.${a} {
display: none;
position: absolute;
top: 30px;
left: 0px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 5px;
animation: fadeInOut 0.4s ease-in-out;
list-style: none;
}
.${a} li{
line-height: 32px;
text-wrap: nowrap;
border-bottom: 1px solid #dedede;
cursor: pointer;
}
.${a} li:last-child{
border-bottom: none;
}
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<span class="${c}">
<svg
t="1702017878997"
class="${l}"
viewBox="0 0 1024 1024"
version="1.1"
p-id="1322"
width="32"
height="32"
>
<path
d="M512 512m-116.949333 0a116.949333 116.949333 0 1 0 233.898666 0 116.949333 116.949333 0 1 0-233.898666 0Z"
fill="currentColor"
p-id="1323"
></path>
<path
d="M512 159.616m-116.949333 0a116.949333 116.949333 0 1 0 233.898666 0 116.949333 116.949333 0 1 0-233.898666 0Z"
fill="currentColor"
p-id="1324"
></path>
<path
d="M512 864.384m-116.949333 0a116.949333 116.949333 0 1 0 233.898666 0 116.949333 116.949333 0 1 0-233.898666 0Z"
fill="currentColor"
p-id="1325"
></path>
</svg>
<ul class="${a}">
<li data-id="openCamera">eye contact</li>
`,R=`</ul>
</span>
<input class="${O}" type="text" />
<button class="${h}">ask</button>
</div>`;var _=(t=>(t[t.loading=1]="loading",t[t.ready=2]="ready",t[t.error=3]="error",t))(_||{});const y=50,L=2e3;var T=(t=>(t.init="init",t.ready="ready",t.openCameraRejected="openCameraRejected",t.userMediaUnavailable="userMediaUnavailable",t.faceDetectorCreateError="faceDetectorCreateError",t.error="error",t))(T||{});const b="userDetectorStatusChange";var u=(t=>(t.languageModelLoaded="languageModelLoaded",t[t.userDetectorStatusChange=b]="userDetectorStatusChange",t.menuClick="menuClick",t.ask="ask",t.say="say",t))(u||{});function v(){return/iPhone|iPad|iPod/i.test(navigator.userAgent)}function B(){return/Android/i.test(navigator.userAgent)}function D(){return B()||v()}function w(t){return new DOMParser().parseFromString(t,"text/html").body.firstElementChild}function M(t){if(!Array.isArray(t)||t.length===0)return null;let e=-1/0,o=null;for(let i=0;i<t.length;i++){const r=t[i];r&&typeof r.score=="number"&&r.score>e&&(e=r.score,o=r)}return o}class P{constructor(){d(this,"listeners",{})}addEventListener(e,o){this.listeners[e]?this.get(e).push(o):this.listeners[e]=[o]}removeEventListener(e,o){this.listeners[e]&&(this.listeners[e]=this.get(e).filter(i=>i!==o))}emit(e,...o){this.get(e).map(i=>{i(...o)})}get(e){return this.listeners[e]||[]}}function k(t,e){for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(e)}exports.ASSISTANT_MODEL_CONTAINER_CLASS=s;exports.ASSISTANT_TIP_CONTAINER=n;exports.CONTAINER_BODY=N;exports.CONTAINER_HEAD=C;exports.EAssistantEvent=u;exports.ELanguageModelStatus=_;exports.EMenuKey=p;exports.EUserDetectorStatus=T;exports.EventListener=P;exports.MENU_BTN_CLASS=l;exports.MENU_LIST_CLASS=a;exports.MODEL_CONFIG=x;exports.MODEL_SCENE_CONFIG=f;exports.ONE_LETTER_READ_TIME=y;exports.READ_WAIT_TIME=L;exports.ROBOT_OPERATION_BOX_BODY=m;exports.ROBOT_OPERATION_BOX_HEAD=S;exports.ROBOT_OPERATION_BOX_TAIL=R;exports.ROBOT_OPERATION_BTN_CLASS=h;exports.ROBOT_OPERATION_INPUT_CLASS=O;exports.TARGET_FPS=60;exports.USER_DETECTOR_STATUS_CHANGE_EVENT=b;exports.VIDEO_SIZE=I;exports.findHighestScoreItem=M;exports.isMobile=D;exports.parseHTML=w;exports.replaceChildren=k;exports.tips=g;