dt-translate-react
Version:
A React component/library for translating and rendering sign language gestures.
2 lines (1 loc) • 15.2 kB
JavaScript
;function e(e,t,n,s){return new(n||(n=Promise))(function(i,o){function a(e){try{d(s.next(e))}catch(e){o(e)}}function l(e){try{d(s.throw(e))}catch(e){o(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(a,l)}d((s=s.apply(e,t||[])).next())})}Object.defineProperty(exports,"__esModule",{value:!0}),"function"==typeof SuppressedError&&SuppressedError;const t=new class{constructor(){this.appMode=4,this.apiKey="",this.initialized=!1,this.requestedText="",this.unityInstance=null,this.character=0,this.speed=.025,this.backgroundColor=null,this.characterClothColor=null,this.selectedLanguage="en",this.totalCharacters=3,this.showLangDd=!1,this.enableCharacterChange=!0,this.unityCallback=null,this.windowVisible=!0,this.windowWidth=275,this.windowHeight=185,this.isWindowVisible=!0,this.appVersion="1.0.0",this.CHARACTER_POS_TEXT="standstill",this.languages=["en","da"],window.addEventListener("focus",()=>{if(console.log("WINDOW FOCUS CALLED ============>"),this.requestedText===this.CHARACTER_POS_TEXT)return;const e=this.requestedText;this.requestedText="",e&&this.playPose({text:e},void 0,!1)})}init(e){var t,n;if(this.initialized)return;if(this.initialized=!0,!e.key)throw new Error("API key is required");this.apiKey=e.key,this.character=e.character||0,this.appMode=[3,4].includes(e.appMode)?e.appMode:4,this.backgroundColor=e.backgroundColor||null,this.characterClothColor=e.characterClothColor||null,this.speed=e.speed||.025,this.enableCharacterChange=null===(t=e.chanageCharacter)||void 0===t||t,this.showLangDd=null!==(n=e.showLanguageChangeOptions)&&void 0!==n&&n,this.selectedLanguage="en";const s=this.checkDimensions(e.width||this.windowWidth);s.valid&&(this.windowWidth=e.width,this.windowHeight=s.height),this.buildUI(),4===this.appMode?this.initializeUnityWebGL():this.playVideoMode(this.CHARACTER_POS_TEXT)}buildUI(){return e(this,void 0,void 0,function*(){const e=yield this.createCharacterChangeBtns(),t=yield this.createCrossButton(),n=yield this.createVersionContainer(),s=yield this.createMiniButton(),i=yield this.createLoader(),o=yield this.createSlider(),a=document.createElement("div");if(a.id="webgl_m_c",a.style.position="absolute",a.style.top="50px",a.style.left="50px",a.style.width=`${this.windowWidth}px`,a.style.height=`${this.windowHeight}px`,a.style.border="1px solid #ccc",a.style.borderRadius="5px",a.style.cursor="grab",a.style.display="flex",a.style.zIndex="99999",a.style.background="#fff",a.addEventListener("mouseover",()=>this.toggleControls(!0)),a.addEventListener("mouseout",()=>this.toggleControls(!1)),document.body.appendChild(a),document.body.appendChild(s),this.makeCanvasDraggable(a),a.append(e),a.append(t),a.append(n),a.append(i),a.append(o),3===this.appMode){const e=document.createElement("video");e.id="signLanguagePlayer",e.style.width=`${this.windowWidth}px`,e.style.height=`${this.windowHeight}px`,e.style.borderRadius="5px",e.style.objectFit="cover",e.muted=!0,e.autoplay=!0,e.loop=!0,e.playsInline=!0,a.appendChild(e)}else{const e=document.createElement("canvas");e.id="unityCanvas",e.style.width=`${this.windowWidth}px`,e.style.height=`${this.windowHeight}px`,e.style.borderRadius="5px",a.appendChild(e)}})}initializeUnityWebGL(){const e="https://d1g156dmclqesu.cloudfront.net/vanilla/Build",t=`${e}/webglbuild.loader.js`,n={dataUrl:`${e}/webglbuild.data`,frameworkUrl:`${e}/webglbuild.framework.js`,codeUrl:`${e}/webglbuild.wasm`,streamingAssetsUrl:"StreamingAssets",companyName:"DeafTawk",productName:"Translate",productVersion:"1.0.2"},s=document.createElement("script");s.src=t,s.onload=()=>{createUnityInstance(document.getElementById("unityCanvas"),n,()=>{}).then(e=>{this.unityInstance=e,this.playPose({text:this.CHARACTER_POS_TEXT})})},document.body.appendChild(s)}playPose(e,t,n=!0){if(e.text&&e.text!==this.requestedText)if(this.requestedText=e.text,t&&(this.unityCallback=t),n&&this.toggleLoader(!0),e.language&&["en","da"].includes(e.language)&&(this.selectedLanguage=e.language),3===this.appMode)this.playVideoMode(e.text);else if(this.unityInstance){const t={text:e.text,baseUrl:"https://translateai.deaftawk.com:3001",character:this.character,nextFrameTime:this.speed,apiKey:this.apiKey,backgroundColor:this.backgroundColor,characterClothColor:this.characterClothColor,language:this.selectedLanguage};this.unityInstance.SendMessage("NetworkManager","RecievePoseText",JSON.stringify(t))}else setTimeout(()=>this.playPose(e,t),1e3);else null==t||t("No text provided to play pose")}playVideoMode(t){return e(this,arguments,void 0,function*(e,t=!0){var n,s;const i="en"===this.selectedLanguage?"ase":"dsl";t&&this.toggleLoader(!0);const o=`https://translateai.deaftawk.com:3001/spoken_text_to_signed_pose?text=${encodeURIComponent(e)}&spoken=${this.selectedLanguage}&signed=${i}&myown=3&character=${this.character}&apikey=${this.apiKey}`;try{const e=yield fetch(o),t=yield e.blob(),s=document.getElementById("signLanguagePlayer");s&&(s.src=URL.createObjectURL(t)),this.toggleLoader(!1),null===(n=this.unityCallback)||void 0===n||n.call(this,"")}catch(e){this.toggleLoader(!1),console.error(e),null===(s=this.unityCallback)||void 0===s||s.call(this,"")}})}showWindow(){const e=document.getElementById("webgl_m_c"),t=document.getElementById("sw_btn");e&&(e.style.display="flex"),t&&(t.style.display="none")}hideWindow(){const e=document.getElementById("webgl_m_c"),t=document.getElementById("sw_btn");e&&(e.style.display="none"),t&&(t.style.display="flex")}toggleControls(e){const t=document.getElementById("webgl_header"),n=document.getElementById("versionContainer"),s=document.getElementById("characterContainer");t&&n&&s&&(e?(t.style.display="flex",n.style.display="none",this.requestedText&&this.enableCharacterChange&&(s.style.display="flex")):(t.style.display="none",n.style.display="flex",s.style.display="none"))}handleWebglError(e){"function"==typeof this.unityCallback&&this.unityCallback(e),console.error("WEBGL-ERROR ----\x3e ",e)}onDataReceived(e){this.toggleLoader(!1);const t=document.getElementById("unityCanvas"),n=document.getElementById("webgl_loader");n&&(n.style.display="none"),t&&(t.style.display="flex",t.style.cursor="grab");const s=document.getElementById("webgl-lang-dd");if(s&&(s.style.display=this.showLangDd?"block":"none"),!this.requestedText||this.requestedText===this.CHARACTER_POS_TEXT)return;const i=document.getElementById("t_c_slider");i&&(i.textContent=this.requestedText);const o=document.getElementById("webgl_slider");o&&(o.style.display="flex"),"function"==typeof this.unityCallback&&this.unityCallback("");const a=document.getElementById("webgl_bnr");a&&(a.style.display="none")}checkDimensions(e){const t=185/275;return e<275||e>500?{valid:!1,height:185}:{valid:!0,height:Math.round(e*t)}}createCharacterChangeBtns(){const e=document.createElement("div");e.id="characterContainer",e.style.position="absolute",e.style.width=`${this.windowWidth}px`,e.style.textAlign="center",e.style.display="none",e.style.justifyContent="center",e.style.top="40%";const t=document.createElement("div");t.style.width=`${this.windowWidth}px`,t.style.textAlign="center",t.style.display="flex",t.style.justifyContent="space-between";const n=document.createElement("div");n.className="round-btn",n.id="prevCharacter",n.textContent="◀",n.title="Previous character";const s=document.createElement("div");s.className="round-btn",s.id="nextCharacter",s.textContent="▶",s.title="Next character";const i="\n width: 28px;\n height: 28px;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid navajowhite;\n background-color: #d4dceb;\n font-size: 11px;\n color: gray;\n cursor: pointer;\n ";return n.style.cssText=i,s.style.cssText=i,t.appendChild(n),t.appendChild(s),e.appendChild(t),s.addEventListener("click",()=>{this.handleCharacterChange("next")}),n.addEventListener("click",()=>{this.handleCharacterChange("prev")}),e}handleCharacterChange(e){const t={text:this.requestedText};if("next"===e)this.character=(this.character+1)%this.totalCharacters,this.requestedText="",this.playPose(t);else this.character=(this.character-1+this.totalCharacters)%this.totalCharacters,this.requestedText="",this.playPose(t)}createCrossButton(){const e=document.createElement("div");e.id="webgl_header",e.style.position="absolute",e.style.width="24px",e.style.height="24px",e.style.display="none",e.style.justifyContent="center",e.style.alignItems="center",e.style.right="5px",e.style.cursor="pointer";const t=document.createElement("span");return t.textContent="×",t.style.fontSize="20px",t.style.color="#000",t.style.userSelect="none",e.appendChild(t),e.addEventListener("click",()=>{this.handleWindowToggle()}),e}handleWindowToggle(){if(this.isWindowVisible)return this.isWindowVisible=!1,this.hideWindow(),void this.toggleLoader(!1);this.isWindowVisible=!0,this.showWindow()}createVersionContainer(){const e=document.createElement("span");return e.id="versionContainer",e.textContent=`V-${this.appVersion}`,e.style.display="flex",e.style.position="absolute",e.style.zIndex="9",e.style.right="10px",e.style.top="6px",e.style.color="#d7d1d1",e.style.fontSize="12px",e}makeCanvasDraggable(e){let t,n,s=!1;e.addEventListener("mousedown",i=>{s=!0,t=i.clientX-e.offsetLeft,n=i.clientY-e.offsetTop,e.style.cursor="grabbing"}),document.addEventListener("mousemove",i=>{s&&(e.style.left=i.clientX-t+"px",e.style.top=i.clientY-n+"px")}),document.addEventListener("mouseup",()=>{s=!1,e.style.cursor="grab"})}createMiniButton(){const e=document.createElement("div");e.id="sw_btn",e.style.position="absolute",e.style.bottom="5px",e.style.right="5px",e.style.width="34px",e.style.height="34px",e.style.border="1px solid #cec6c6",e.style.cursor="pointer",e.style.display="none",e.style.justifyContent="center",e.style.alignItems="center",e.style.animation="bounce 3s infinite",e.style.backgroundColor="#aba3a3",e.style.borderRadius="50%",e.title="Show Translate window";const t=document.createElement("span");t.textContent="↑",t.style.fontSize="20px",t.style.color="#000",t.style.userSelect="none",e.appendChild(t),e.addEventListener("click",()=>{this.handleWindowToggle()});const n=document.createElement("style");return n.textContent="\n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-10px);\n }\n 60% {\n transform: translateY(-5px);\n }\n }\n ",document.head.appendChild(n),e}createLoader(){let e=document.createElement("div");e.id="webgl_loader",e.style.position="absolute",e.style.width=`${this.windowWidth}px`,e.style.height=`${this.windowHeight}px`,e.style.cursor="grab",e.style.display="flex",e.style.justifyContent="center",e.style.alignItems="center",e.style.zIndex="1";let t=document.createElement("div");t.style.border="4px solid #f3f3f3",t.style.borderTop="4px solid #3498db",t.style.borderRadius="50%",t.style.width="28px",t.style.height="28px",t.style.animation="spin 1s linear infinite",t.style.borderColor="#2a4b8d #2a4b8d rgb(255, 255, 255)",e.appendChild(t);const n=document.createElement("style");return n.type="text/css",n.innerText="\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ",document.head.appendChild(n),e}createSlider(){const e=document.createElement("div");e.id="webgl_slider",Object.assign(e.style,{position:"absolute",width:this.windowWidth-11+"px",height:"24px",display:"none",justifyContent:"flex-start",alignItems:"center",overflow:"hidden",padding:"3px 6px",backgroundColor:"#000",fontSize:"12px",textAlign:"center",bottom:"-1px",borderBottomRightRadius:"5px",borderBottomLeftRadius:"5px",color:"#fff"});const t=document.createElement("span");t.id="t_c_slider",t.textContent="",Object.assign(t.style,{display:"inline-block",whiteSpace:"nowrap",position:"relative",paddingLeft:"100%",animation:"slideLeft linear infinite"}),e.appendChild(t);const n=document.createElement("style");n.textContent="\n @keyframes slideLeft {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-100%);\n }\n }\n ",document.head.appendChild(n);return new ResizeObserver(()=>{this.updateSliderAnimation(e,t)}).observe(t),e}updateSliderAnimation(e,t,n=50){t.style.animation="none",t.offsetWidth;const s=(e.offsetWidth+t.scrollWidth)/n;t.style.animation=`slideLeft ${s}s linear infinite`}toggleLoader(e){const t=document.getElementById("webgl_loader");t&&(t.style.display=e?"flex":"none")}createLanguageDropdown(){const e=document.createElement("style");e.textContent="\n .dropdown-container {\n position: relative;\n width: 65px;\n font-family: sans-serif;\n font-size: 12px;\n top: 2px;\n left: 3px;\n display: none;\n }\n \n .dropdown-selected {\n padding: 3px;\n background: #f0f0f0;\n border: 1px solid #ccc;\n cursor: pointer;\n border-radius: 2px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #424a9f;\n }\n \n .dropdown-list {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n border: 1px solid #ccc;\n height: 56px;\n max-height: 130px;\n overflow-y: auto;\n margin-top: 4px;\n border-radius: 6px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n z-index: 100;\n }\n \n .dropdown-item {\n padding: 6px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .dropdown-item:hover {\n background-color: #424a9f;\n color: #fff\n }\n \n .hidden {\n display: none;\n }\n \n .dropdown-list::-webkit-scrollbar {\n width: 6px;\n }\n \n .dropdown-list::-webkit-scrollbar-thumb {\n background-color: #888;\n border-radius: 3px;\n }\n \n .dropdown-list::-webkit-scrollbar-thumb:hover {\n background-color: #555;\n }\n ",document.head.appendChild(e);const t=document.createElement("div");t.className="dropdown-container",t.id="webgl-lang-dd";const n=document.createElement("div");n.className="dropdown-selected",n.textContent=this.languages[0].toUpperCase();const s=document.createElement("div");return s.className="dropdown-list hidden",this.languages.forEach(e=>{const t=document.createElement("div");t.className="dropdown-item",t.textContent=e.toUpperCase(),t.addEventListener("click",()=>{n.textContent=e.toUpperCase(),this.selectedLanguage=e,s.classList.add("hidden")}),s.appendChild(t)}),n.addEventListener("click",()=>{s.classList.toggle("hidden")}),t.appendChild(n),t.appendChild(s),document.addEventListener("click",e=>{const n=e.target;t&&!t.contains(n)&&s.classList.add("hidden")}),t}};window.onDataRecieved=e=>{t.onDataReceived(e)},exports.Translate=t;