assistant-robot
Version:
An assistant widget, have a 3D robot which can interact with user, have a simple LLM which can chat with user.
275 lines (268 loc) • 6.72 kB
JavaScript
var c = Object.defineProperty;
var h = (t, e, o) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
var n = (t, e, o) => (h(t, typeof e != "symbol" ? e + "" : e, o), o);
const A = 60, y = {
position: [0, 0, 0],
rotation: [0, Math.PI, 0],
helloActionName: "hello",
idleActionName: "idle",
helloContent: "Hi, you can talk to me!"
}, I = {
backgroundColor: 0,
backgroundAlpha: 0,
camera: {
fov: 50,
near: 0.1,
far: 10,
position: [0, 0, 2],
lookAt: [0, 0, 0]
},
ambientLight: {
color: 16777215,
intensity: 0.5
},
directionalLight: {
color: 16777215,
intensity: 2,
position: [10, 10, 0]
}
}, N = {
big: { width: 640, height: 480 },
small: { width: 360, height: 270 }
}, l = "assistant-robot-model-container", s = "assistant-robot-tip-container", v = '<div class="assistant-robot-container ', R = `">
<style>
.assistant-robot-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.${l}{
flex: 1;
position:relative;
width:100%;
}
.${s}{
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; }
}
.${s}::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="${l}">
<div class="${s}">HI!</div>
</div>
<div>
`, w = {
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 b = /* @__PURE__ */ ((t) => (t.openCamera = "openCamera", t.hello = "hello", t))(b || {});
const x = "assistant-robot-input", u = "assistant-robot-btn", d = "assistant-robot-operation-container", p = "assistant-robot-menu-btn", r = "assistant-robot-menu-list", S = '<div class="assistant-robot-operationbox', E = `">
<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;
}
.${d}{
position: relative;
height: 24px;
}
.${p}{
color: #aaaaaa;
width:24px;
height: 24px;
cursor: pointer;
}
.${r} {
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;
}
.${r} li{
line-height: 32px;
text-wrap: nowrap;
border-bottom: 1px solid #dedede;
cursor: pointer;
}
.${r} li:last-child{
border-bottom: none;
}
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<span class="${d}">
<svg
t="1702017878997"
class="${p}"
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="${r}">
<li data-id="openCamera">eye contact</li>
`, k = `</ul>
</span>
<input class="${x}" type="text" />
<button class="${u}">ask</button>
</div>`;
var f = /* @__PURE__ */ ((t) => (t[t.loading = 1] = "loading", t[t.ready = 2] = "ready", t[t.error = 3] = "error", t))(f || {});
const $ = 50, L = 2e3;
var g = /* @__PURE__ */ ((t) => (t.init = "init", t.ready = "ready", t.openCameraRejected = "openCameraRejected", t.userMediaUnavailable = "userMediaUnavailable", t.faceDetectorCreateError = "faceDetectorCreateError", t.error = "error", t))(g || {});
const m = "userDetectorStatusChange";
var O = /* @__PURE__ */ ((t) => (t.languageModelLoaded = "languageModelLoaded", t[t.userDetectorStatusChange = m] = "userDetectorStatusChange", t.menuClick = "menuClick", t.ask = "ask", t.say = "say", t))(O || {});
function C() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
function T() {
return /Android/i.test(navigator.userAgent);
}
function P() {
return T() || C();
}
function B(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 a = 0; a < t.length; a++) {
const i = t[a];
i && typeof i.score == "number" && i.score > e && (e = i.score, o = i);
}
return o;
}
class D {
constructor() {
n(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(
(a) => a !== o
));
}
emit(e, ...o) {
this.get(e).map((a) => {
a(...o);
});
}
get(e) {
return this.listeners[e] || [];
}
}
function H(t, e) {
for (; t.firstChild; )
t.removeChild(t.firstChild);
t.appendChild(e);
}
export {
s as A,
v as C,
D as E,
I as M,
$ as O,
L as R,
A as T,
m as U,
N as V,
y as a,
g as b,
S as c,
E as d,
k as e,
u as f,
x as g,
p as h,
P as i,
r as j,
R as k,
l,
O as m,
b as n,
f as o,
B as p,
M as q,
H as r,
w as t
};