390 lines
13 KiB
JavaScript
390 lines
13 KiB
JavaScript
// Black fullscreen + cyan sticker-style face, plus touch-only 2 links.
|
|
// State via SSE /events from face_server (nginx proxies /events -> :8001/events)
|
|
//
|
|
// Payload example:
|
|
// {"emotion":"angry","intensity":0.9,"look":{"x":0.9,"y":0.0},"speaking":true}
|
|
|
|
(() => {
|
|
const OVERLAY_TIMEOUT_MS = 3500;
|
|
|
|
const clamp = (n,a,b) => Math.max(a, Math.min(b, n));
|
|
const clamp01 = (v) => {
|
|
const n = Number(v);
|
|
if (Number.isNaN(n)) return 0;
|
|
return clamp(n, 0, 1);
|
|
};
|
|
|
|
const EMOTIONS = new Set(["neutral","happy","sad","angry","sleepy","surprised","excited"]);
|
|
|
|
const state = {
|
|
emotion: "neutral",
|
|
intensity: 0.85,
|
|
look: { x: 0, y: 0 },
|
|
lookLock: false,
|
|
speaking: false,
|
|
eyesMoving: true,
|
|
};
|
|
|
|
// DOM
|
|
const stage = document.getElementById("stage");
|
|
const overlay = document.getElementById("overlay");
|
|
const controlLink = document.getElementById("controlLink");
|
|
const emotionLabel = document.getElementById("emotionLabel");
|
|
|
|
const eyeL = document.getElementById("eyeL");
|
|
const eyeR = document.getElementById("eyeR");
|
|
const eyesGroup = document.getElementById("eyesGroup");
|
|
const mouth = document.getElementById("mouth");
|
|
|
|
const topbarLit = document.getElementById("topbarLit");
|
|
const faceGroup = document.getElementById("faceGroup");
|
|
|
|
// Touch overlay show
|
|
let overlayTimer = null;
|
|
function showOverlay() {
|
|
overlay.classList.add("show");
|
|
clearTimeout(overlayTimer);
|
|
overlayTimer = setTimeout(() => overlay.classList.remove("show"), OVERLAY_TIMEOUT_MS);
|
|
}
|
|
stage.addEventListener("pointerdown", () => showOverlay(), { passive: true });
|
|
|
|
// Layout tuned to your reference composition
|
|
const BASE = {
|
|
L: { x: 360, y: 300 },
|
|
R: { x: 640, y: 300 },
|
|
eyeW: 170,
|
|
eyeH: 180,
|
|
lookMaxPx: 28,
|
|
mouthCx: 500,
|
|
mouthY: 415,
|
|
};
|
|
|
|
function updateControlLink() {
|
|
emotionLabel.textContent = state.emotion;
|
|
controlLink.href = `/control?current=${encodeURIComponent(state.emotion)}`;
|
|
}
|
|
|
|
function applyIntensity(intensity) {
|
|
state.intensity = clamp01(intensity);
|
|
|
|
// bar brightness
|
|
topbarLit.setAttribute("opacity", String(0.35 + state.intensity * 0.65));
|
|
|
|
// stronger glow at high intensity
|
|
faceGroup.setAttribute("filter", state.intensity > 0.8 ? "url(#glowStrong)" : "url(#glow)");
|
|
}
|
|
|
|
function setStroke(el, width) {
|
|
el.setAttribute("fill", "none");
|
|
el.setAttribute("stroke", `rgba(120,255,235,${0.86 + 0.14 * state.intensity})`);
|
|
el.setAttribute("stroke-width", String(width));
|
|
el.setAttribute("stroke-linecap", "round");
|
|
el.setAttribute("stroke-linejoin", "round");
|
|
}
|
|
|
|
// ---- Eye shapes (icon-like) ----
|
|
function eyeOval(cx, cy, w, h) {
|
|
const rx = w * 0.30;
|
|
const ry = h * 0.22;
|
|
return `M ${cx - rx},${cy}
|
|
C ${cx - rx},${cy - ry} ${cx - rx*0.35},${cy - ry} ${cx},${cy - ry}
|
|
C ${cx + rx*0.35},${cy - ry} ${cx + rx},${cy - ry} ${cx + rx},${cy}
|
|
C ${cx + rx},${cy + ry} ${cx + rx*0.35},${cy + ry} ${cx},${cy + ry}
|
|
C ${cx - rx*0.35},${cy + ry} ${cx - rx},${cy + ry} ${cx - rx},${cy}`;
|
|
}
|
|
|
|
function eyeRound(cx, cy, r) {
|
|
return `M ${cx - r},${cy}
|
|
C ${cx - r},${cy - r} ${cx - r*0.2},${cy - r} ${cx},${cy - r}
|
|
C ${cx + r*0.2},${cy - r} ${cx + r},${cy - r} ${cx + r},${cy}
|
|
C ${cx + r},${cy + r} ${cx + r*0.2},${cy + r} ${cx},${cy + r}
|
|
C ${cx - r*0.2},${cy + r} ${cx - r},${cy + r} ${cx - r},${cy}`;
|
|
}
|
|
|
|
function eyeSleepLine(cx, cy, w) {
|
|
const half = w * 0.20;
|
|
return `M ${cx - half},${cy} L ${cx + half},${cy}`;
|
|
}
|
|
|
|
function eyeHappyArc(cx, cy, w) {
|
|
const half = w * 0.20;
|
|
const lift = 22;
|
|
return `M ${cx - half},${cy} Q ${cx},${cy + lift} ${cx + half},${cy}`;
|
|
}
|
|
|
|
function eyeAngrySlashL(cx, cy) { return `M ${cx - 60},${cy - 18} L ${cx + 26},${cy + 26}`; }
|
|
function eyeAngrySlashR(cx, cy) { return `M ${cx + 60},${cy - 18} L ${cx - 26},${cy + 26}`; }
|
|
|
|
function eyeSadSmall(cx, cy, w) {
|
|
const rx = w * 0.16;
|
|
const ry = 18;
|
|
const y = cy + 8;
|
|
return `M ${cx - rx},${y}
|
|
C ${cx - rx},${y - ry} ${cx - rx*0.35},${y - ry} ${cx},${y - ry}
|
|
C ${cx + rx*0.35},${y - ry} ${cx + rx},${y - ry} ${cx + rx},${y}
|
|
C ${cx + rx},${y + ry} ${cx + rx*0.35},${y + ry} ${cx},${y + ry}
|
|
C ${cx - rx*0.35},${y + ry} ${cx - rx},${y + ry} ${cx - rx},${y}`;
|
|
}
|
|
|
|
// ---- Mouth shapes (sticker-like) ----
|
|
function mouthDot(cx, y) {
|
|
setStroke(mouth, 24); // thick capsule-dot
|
|
const half = 14;
|
|
return `M ${cx - half},${y} L ${cx + half},${y}`;
|
|
}
|
|
|
|
function mouthLine(cx, y, w=170) {
|
|
setStroke(mouth, 18);
|
|
const half = w/2;
|
|
return `M ${cx - half},${y} L ${cx + half},${y}`;
|
|
}
|
|
|
|
function mouthSmile(cx, y, w=190) {
|
|
setStroke(mouth, 18);
|
|
const half = w/2;
|
|
return `M ${cx - half},${y} Q ${cx},${y + 70} ${cx + half},${y}`;
|
|
}
|
|
|
|
function mouthGrin(cx, y) {
|
|
setStroke(mouth, 18);
|
|
const w = 220;
|
|
const half = w/2;
|
|
return `M ${cx - half},${y}
|
|
Q ${cx - half*0.15},${y + 70} ${cx},${y + 70}
|
|
Q ${cx + half*0.15},${y + 70} ${cx + half},${y}`;
|
|
}
|
|
|
|
function mouthFrown(cx, y, w=190) {
|
|
setStroke(mouth, 18);
|
|
const half = w/2;
|
|
return `M ${cx - half},${y + 50} Q ${cx},${y - 25} ${cx + half},${y + 50}`;
|
|
}
|
|
|
|
function mouthO(cx, y) {
|
|
setStroke(mouth, 18);
|
|
const r = 38;
|
|
return eyeRound(cx, y + 10, r);
|
|
}
|
|
|
|
function mouthShout(cx, y) {
|
|
// filled open mouth with neon outline
|
|
mouth.setAttribute("stroke", `rgba(120,255,235,${0.90 + 0.10 * state.intensity})`);
|
|
mouth.setAttribute("stroke-width", "18");
|
|
mouth.setAttribute("stroke-linecap", "round");
|
|
mouth.setAttribute("stroke-linejoin", "round");
|
|
mouth.setAttribute("fill", "rgba(0,0,0,0.38)");
|
|
|
|
const wTop = 90, wBot = 150, h = 78;
|
|
const x1 = cx - wTop/2, x2 = cx + wTop/2;
|
|
const x3 = cx + wBot/2, x4 = cx - wBot/2;
|
|
const y1 = y - 10, y2 = y + h;
|
|
return `M ${x1},${y1} L ${x2},${y1} L ${x3},${y2} L ${x4},${y2} Z`;
|
|
}
|
|
|
|
// speaking animation overlays ANY mouth shape
|
|
let speakTimer = null;
|
|
function startSpeaking() {
|
|
stopSpeaking();
|
|
let open = false;
|
|
const base = state.emotion === "excited" ? 85 : (state.emotion === "sleepy" ? 170 : 115);
|
|
|
|
speakTimer = setInterval(() => {
|
|
if (!state.speaking) return;
|
|
open = !open;
|
|
const amp = 0.10 + 0.18 * state.intensity;
|
|
const sy = 1 + amp * (open ? 1 : -0.35);
|
|
const ty = open ? 5 : 0;
|
|
mouth.setAttribute("transform", `translate(0,${ty}) scale(1,${sy})`);
|
|
}, base);
|
|
}
|
|
|
|
function stopSpeaking() {
|
|
if (speakTimer) clearInterval(speakTimer);
|
|
speakTimer = null;
|
|
mouth.setAttribute("transform", "");
|
|
}
|
|
|
|
// blink by temporarily switching to sleepy lines
|
|
let blinkTimer = null;
|
|
let blinking = false;
|
|
|
|
function render() {
|
|
// look -> subtle move of the whole eyesGroup (keeps sticker look)
|
|
const lookX = clamp(state.look.x, -1, 1);
|
|
const lookY = clamp(state.look.y, -1, 1);
|
|
|
|
const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
|
|
const lookScale = iconLocked ? 0.20 : 1.0;
|
|
|
|
const dx = lookX * BASE.lookMaxPx * lookScale;
|
|
const dy = lookY * BASE.lookMaxPx * lookScale;
|
|
eyesGroup.setAttribute("transform", `translate(${dx},${dy})`);
|
|
|
|
// eyes styling
|
|
setStroke(eyeL, state.emotion === "excited" ? 22 : 20);
|
|
setStroke(eyeR, state.emotion === "excited" ? 22 : 20);
|
|
|
|
const emo = state.emotion;
|
|
const useBlink = blinking && emo !== "sleepy";
|
|
|
|
if (useBlink) {
|
|
eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
|
|
eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
|
|
} else {
|
|
switch (emo) {
|
|
case "happy":
|
|
eyeL.setAttribute("d", eyeHappyArc(BASE.L.x, BASE.L.y, BASE.eyeW));
|
|
eyeR.setAttribute("d", eyeHappyArc(BASE.R.x, BASE.R.y, BASE.eyeW));
|
|
break;
|
|
case "angry":
|
|
eyeL.setAttribute("d", eyeAngrySlashL(BASE.L.x, BASE.L.y));
|
|
eyeR.setAttribute("d", eyeAngrySlashR(BASE.R.x, BASE.R.y));
|
|
break;
|
|
case "sleepy":
|
|
eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
|
|
eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
|
|
break;
|
|
case "surprised":
|
|
eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y, 40));
|
|
eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y, 40));
|
|
break;
|
|
case "excited":
|
|
eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y - 6, 46));
|
|
eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y - 6, 46));
|
|
break;
|
|
case "sad":
|
|
eyeL.setAttribute("d", eyeSadSmall(BASE.L.x, BASE.L.y, BASE.eyeW));
|
|
eyeR.setAttribute("d", eyeSadSmall(BASE.R.x, BASE.R.y, BASE.eyeW));
|
|
break;
|
|
default:
|
|
eyeL.setAttribute("d", eyeOval(BASE.L.x, BASE.L.y, BASE.eyeW, BASE.eyeH));
|
|
eyeR.setAttribute("d", eyeOval(BASE.R.x, BASE.R.y, BASE.eyeW, BASE.eyeH));
|
|
}
|
|
}
|
|
|
|
// mouth mapping
|
|
switch (emo) {
|
|
case "neutral":
|
|
mouth.setAttribute("d", mouthDot(BASE.mouthCx, BASE.mouthY + 20));
|
|
break;
|
|
case "happy":
|
|
mouth.setAttribute("d", state.intensity > 0.75 ? mouthGrin(BASE.mouthCx, BASE.mouthY) : mouthSmile(BASE.mouthCx, BASE.mouthY, 190));
|
|
break;
|
|
case "excited":
|
|
mouth.setAttribute("d", mouthGrin(BASE.mouthCx, BASE.mouthY - 6));
|
|
break;
|
|
case "sad":
|
|
mouth.setAttribute("d", mouthFrown(BASE.mouthCx, BASE.mouthY - 6, 190));
|
|
break;
|
|
case "angry":
|
|
mouth.setAttribute("d", mouthShout(BASE.mouthCx, BASE.mouthY - 12));
|
|
break;
|
|
case "sleepy":
|
|
mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 26, 170));
|
|
break;
|
|
case "surprised":
|
|
mouth.setAttribute("d", mouthO(BASE.mouthCx, BASE.mouthY - 6));
|
|
break;
|
|
default:
|
|
mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 20, 170));
|
|
}
|
|
|
|
// top bar color hint
|
|
if (emo === "angry") topbarLit.setAttribute("stroke", "rgba(255,107,107,0.95)");
|
|
else if (emo === "sad" || emo === "sleepy") topbarLit.setAttribute("stroke", "rgba(120,200,255,0.95)");
|
|
else topbarLit.setAttribute("stroke", "rgba(120,255,235,0.95)");
|
|
|
|
updateControlLink();
|
|
}
|
|
|
|
function scheduleBlink() {
|
|
clearTimeout(blinkTimer);
|
|
const base = state.emotion === "sleepy" ? 5200 : (state.emotion === "excited" ? 2000 : 2800);
|
|
blinkTimer = setTimeout(() => {
|
|
blinking = true;
|
|
render();
|
|
setTimeout(() => {
|
|
blinking = false;
|
|
render();
|
|
scheduleBlink();
|
|
}, 140);
|
|
}, base + Math.random() * 2200);
|
|
}
|
|
|
|
let driftTimer = null;
|
|
function scheduleDrift() {
|
|
clearTimeout(driftTimer);
|
|
if (state.lookLock) return;
|
|
if (!state.eyesMoving) return;
|
|
|
|
const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
|
|
if (iconLocked) return;
|
|
|
|
state.look = {
|
|
x: (Math.random() * 2 - 1) * 0.5,
|
|
y: (Math.random() * 2 - 1) * 0.35,
|
|
};
|
|
render();
|
|
driftTimer = setTimeout(scheduleDrift, 900 + Math.random() * 900);
|
|
}
|
|
|
|
// Public API
|
|
window.applyFaceState = (payload) => {
|
|
if (!payload || typeof payload !== "object") return;
|
|
|
|
if (payload.intensity !== undefined) applyIntensity(payload.intensity);
|
|
if (typeof payload.emotion === "string") state.emotion = EMOTIONS.has(payload.emotion) ? payload.emotion : "neutral";
|
|
|
|
if (payload.look && typeof payload.look === "object") {
|
|
state.look = {
|
|
x: clamp(Number(payload.look.x ?? 0), -1, 1),
|
|
y: clamp(Number(payload.look.y ?? 0), -1, 1),
|
|
};
|
|
state.lookLock = true;
|
|
} else {
|
|
state.lookLock = false;
|
|
}
|
|
|
|
if (typeof payload.speaking === "boolean") state.speaking = payload.speaking;
|
|
if (typeof payload.eyesMoving === "boolean") state.eyesMoving = payload.eyesMoving;
|
|
|
|
render();
|
|
scheduleBlink();
|
|
if (!state.lookLock && state.eyesMoving) scheduleDrift();
|
|
|
|
if (state.speaking) startSpeaking(); else stopSpeaking();
|
|
};
|
|
|
|
// SSE /events
|
|
(function connectSSE(){
|
|
let es;
|
|
function open() {
|
|
es = new EventSource("/events");
|
|
|
|
// server recommended: event: state
|
|
es.addEventListener("state", (ev) => {
|
|
try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
|
|
});
|
|
|
|
// fallback for plain data:
|
|
es.onmessage = (ev) => {
|
|
try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
|
|
};
|
|
|
|
es.onerror = () => {
|
|
try { es.close(); } catch (_) {}
|
|
setTimeout(open, 1200);
|
|
};
|
|
}
|
|
open();
|
|
})();
|
|
|
|
// Init default
|
|
applyIntensity(state.intensity);
|
|
updateControlLink();
|
|
render();
|
|
scheduleBlink();
|
|
scheduleDrift();
|
|
})();
|
|
|