assistant-robot
Version:
An assistant widget, have a 3D robot which can interact with user, have a simple LLM which can chat with user.
58 lines (57 loc) • 5.96 kB
TypeScript
import type { IModelSceneConfig, IModelConfig } from "./type";
export declare const TARGET_FPS = 60;
export declare const MODEL_CONFIG: IModelConfig;
export declare const MODEL_SCENE_CONFIG: IModelSceneConfig;
export declare const VIDEO_SIZE: {
big: {
width: number;
height: number;
};
small: {
width: number;
height: number;
};
};
export declare const ASSISTANT_MODEL_CONTAINER_CLASS = "assistant-robot-model-container";
export declare const ASSISTANT_TIP_CONTAINER = "assistant-robot-tip-container";
export declare const CONTAINER_HEAD = "<div class=\"assistant-robot-container ";
export declare const CONTAINER_BODY = "\">\n <style>\n .assistant-robot-container{\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n .assistant-robot-model-container{\n flex: 1;\n position:relative;\n width:100%;\n }\n .assistant-robot-tip-container{\n position: absolute;\n top: 2px;\n left: 50%;\n min-width: 100px;\n border: 1px solid #aaaaaa;\n border-radius: 6px;\n background: #fff;\n transform: translate(-50%);\n padding: 12px 20px;\n text-align: center;\n animation: fadeInOut 0.4s ease-in-out;\n }\n @keyframes fadeInOut {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n .assistant-robot-tip-container::after{\n content: '';\n display: block;\n position: absolute;\n bottom: -6px;\n left: 50%;\n width: 8px;\n height: 8px;\n transform: rotate(45deg);\n border-bottom: 1px solid #aaaaaa;\n border-right: 1px solid #aaaaaa;\n background: #fff;\n }\n </style>\n <div class=\"assistant-robot-model-container\">\n <div class=\"assistant-robot-tip-container\">HI!</div>\n\n </div>\n<div>\n";
export declare const tips: {
openCamera: string;
alreadyOpenCamera: string;
};
export declare enum EMenuKey {
openCamera = "openCamera",
hello = "hello"
}
export declare const ROBOT_OPERATION_INPUT_CLASS = "assistant-robot-input";
export declare const ROBOT_OPERATION_BTN_CLASS = "assistant-robot-btn";
export declare const OPERATION_CONTAINER_CLASS = "assistant-robot-operation-container";
export declare const MENU_BTN_CLASS = "assistant-robot-menu-btn";
export declare const MENU_LIST_CLASS = "assistant-robot-menu-list";
export declare const ROBOT_OPERATION_BOX_HEAD = "<div class=\"assistant-robot-operationbox";
export declare const ROBOT_OPERATION_BOX_BODY = "\">\n<style>\n .assistant-robot-operationbox{\n box-sizing: border-box;\n width: 100%;\n height: 52px;\n display: flex;\n flex: 0 0 auto;\n flex-wrap: wrap;\n align-items: center;\n border-radius: 54px;\n box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),\n 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n 0 5px 12px 4px rgba(0, 0, 0, 0.09);\n background-color: #fff;\n padding: 10px 12px;\n }\n .assistant-robot-input{\n flex: 1;\n min-width: 200px;\n background: rgba(0,0,0,0);\n border: 1px solid #dedede;\n height: 28px;\n margin-right: 6px;\n outline:none;\n color: #666666;\n }\n .assistant-robot-btn{\n flex: 0 0 auto;\n height: 24px;\n }\n\n .assistant-robot-operation-container{\n position: relative;\n height: 24px;\n }\n .assistant-robot-menu-btn{\n color: #aaaaaa;\n width:24px;\n height: 24px;\n cursor: pointer;\n }\n\n .assistant-robot-menu-list {\n display: none;\n position: absolute;\n top: 30px;\n left: 0px;\n background-color: #fff;\n border: 1px solid #ccc;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n padding: 10px;\n border-radius: 5px;\n animation: fadeInOut 0.4s ease-in-out;\n list-style: none;\n }\n\n .assistant-robot-menu-list li{\n line-height: 32px;\n text-wrap: nowrap;\n border-bottom: 1px solid #dedede;\n cursor: pointer;\n }\n\n .assistant-robot-menu-list li:last-child{\n border-bottom: none;\n }\n\n @keyframes fadeInOut {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n</style>\n<span class=\"assistant-robot-operation-container\">\n <svg\n t=\"1702017878997\"\n class=\"assistant-robot-menu-btn\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n p-id=\"1322\"\n width=\"32\"\n height=\"32\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n p-id=\"1323\"\n ></path>\n <path\n 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\"\n fill=\"currentColor\"\n p-id=\"1324\"\n ></path>\n <path\n 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\"\n fill=\"currentColor\"\n p-id=\"1325\"\n ></path>\n </svg>\n <ul class=\"assistant-robot-menu-list\">\n <li data-id=\"openCamera\">eye contact</li>\n";
export declare const ROBOT_OPERATION_BOX_TAIL = "</ul>\n</span>\n<input class=\"assistant-robot-input\" type=\"text\" />\n<button class=\"assistant-robot-btn\">ask</button>\n</div>";
export declare enum ELanguageModelStatus {
loading = 1,
ready = 2,
error = 3
}
export declare const ONE_LETTER_READ_TIME = 50;
export declare const READ_WAIT_TIME = 2000;
export declare enum EUserDetectorStatus {
init = "init",
ready = "ready",
openCameraRejected = "openCameraRejected",
userMediaUnavailable = "userMediaUnavailable",
faceDetectorCreateError = "faceDetectorCreateError",
error = "error"
}
export declare const USER_DETECTOR_STATUS_CHANGE_EVENT = "userDetectorStatusChange";
export declare enum EAssistantEvent {
languageModelLoaded = "languageModelLoaded",
userDetectorStatusChange = "userDetectorStatusChange",
menuClick = "menuClick",
ask = "ask",
say = "say"
}