@vsllabs/webgl-js/dist/index.mjs

VSL-Labs Webgl implementation for translating text into 3D sign language

// src/logic.ts
var API_KEY;
var iframeEl;
var isInitialized = false;
var translatedText = "";
var cameraRotationEnabled = false;
var error = "";
var isTranslating = false;
var isUnityLoaded = false;
var fetchFunction = async (apiKey, text) => {
  const response = await fetch(
    "https://dev-api.vsllabs.com/api/v2/models/clerc/0",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-api-key": apiKey
      },
      body: JSON.stringify({
        user_input: text,
        settings_nlp: {
          synonyms: false,
          details: false,
          ner: false,
          numbers: false,
          nmm: false,
          emotions: false,
          translation_model: {
            model_type: "SEQ2SEQ",
            model_id: ""
          }
        },
        settings_anim: { character: "terra", platform: "webgl" },
        settings_2d: {
          output_settings: {
            data_gzip: false,
            data_raw: false,
            data_stream: false
          }
        },
        settings_3d: {
          output_settings: {
            bvh: false,
            data_gzip: false,
            data_raw: false,
            data_stream: false,
            video_3d: false,
            web_glb: false
          }
        }
      })
    }
  );
  return await response.json();
};
var initialize = async (api_key, container_id) => {
  if (!isInitialized) {
    API_KEY = api_key;
    if (!api_key) {
      const errTxt = "API Key is required";
      error = errTxt;
      throw new Error(errTxt);
    }
    if (!container_id) {
      const errTxt = "Container ID is required";
      error = errTxt;
      throw new Error(errTxt);
    }
    try {
      await fetchFunction(API_KEY, "Hello");
    } catch (err) {
      const errTxt = "Invalid API Key!";
      error = errTxt;
      throw new Error(errTxt);
    }
    const container = document.getElementById(container_id);
    if (!container) {
      const errTxt = `Container ID ${container_id} is not found!`;
      error = errTxt;
      throw new Error(errTxt);
    }
    iframeEl = document.createElement("iframe");
    iframeEl.src = "https://webgl-npm-vanilla.vercel.app/";
    iframeEl.style.width = "100%";
    iframeEl.style.height = "100%";
    iframeEl.style.border = "unset";
    container?.appendChild(iframeEl);
    iframeEl.onload = () => {
      iframeEl?.contentWindow?.postMessage(
        { action: "initialize", API_KEY },
        "*"
      );
    };
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === "childList") {
          mutation.removedNodes.forEach((node) => {
            if (node === iframeEl) {
              iframeEl = void 0;
              isInitialized = false;
              translatedText = "";
              cameraRotationEnabled = false;
              error = "";
              isTranslating = false;
              isUnityLoaded = false;
            }
          });
        }
      }
    });
    observer.observe(container, { childList: true });
    error = "";
  } else {
    const errTxt = "A webgl instance is already initialized!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
var translateTextToASL = async (text) => {
  if (isInitialized && text) {
    isTranslating = true;
    const data = await fetchFunction(API_KEY, text);
    translatedText = data?.NLP?.unity_3d_input || "";
    isTranslating = false;
    translatedText && iframeEl?.contentWindow?.postMessage(
      { action: "playAnimation", text: translatedText },
      "*"
    );
  } else {
    const errTxt = !isInitialized ? "Webgl is not initialized!" : "text is required!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
var toggleCameraRotation = () => {
  if (isInitialized) {
    iframeEl?.contentWindow?.postMessage(
      {
        action: "ToggleCameraRotation",
        toggleState: cameraRotationEnabled ? "false" : "true"
      },
      "*"
    );
    cameraRotationEnabled = !cameraRotationEnabled;
  } else {
    const errTxt = "Webgl is not initialized!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
var setAnimationSpeed = (speed) => {
  if (isInitialized && speed) {
    iframeEl?.contentWindow?.postMessage(
      {
        action: "changeSpeed",
        speed
      },
      "*"
    );
  } else {
    const errTxt = !isInitialized ? "Webgl is not initialized!" : "speed is required!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
var changeBgColor = (color) => {
  if (isInitialized && color) {
    iframeEl?.contentWindow?.postMessage(
      {
        action: "changeBackground",
        color
      },
      "*"
    );
  } else {
    const errTxt = !isInitialized ? "Webgl is not initialized!" : "color is required!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
var replay = () => {
  if (isInitialized && translatedText) {
    iframeEl?.contentWindow?.postMessage(
      {
        action: "playAnimation",
        text: translatedText
      },
      "*"
    );
  } else {
    const errTxt = !isInitialized ? "Webgl is not initialized!" : "Nothing to replay!";
    error = errTxt;
    throw new Error(errTxt);
  }
};
function handleMessage(event) {
  if (event.data?.action === "loadingStatus" && event.data?.status === "loaded") {
    setTimeout(() => {
      isInitialized = true;
      isUnityLoaded = true;
    }, 3200);
  }
}
window.addEventListener("message", handleMessage);
var removeListeners = () => {
  window.removeEventListener("message", handleMessage);
  window.removeEventListener("unload", removeListeners);
};
window.addEventListener("unload", removeListeners);
export {
  changeBgColor,
  error,
  initialize,
  isTranslating,
  isUnityLoaded,
  replay,
  setAnimationSpeed,
  toggleCameraRotation,
  translateTextToASL
};