Translate SDKDeveloper reference
Back to app

Translate integration: Vanilla JavaScript

Version 1.0.0 · Last updated February 25, 2025

This guide explains how to embed Translate, an AI-powered sign language player based on WebGL, into your site with plain JavaScript. Translate renders sign language in a floating window without disrupting your layout.

Key features

  • AI-Driven Sign Language Rendering: Convert text to realistic sign language animations.
  • Floating WebGL Window: Integrate sign language playback without disrupting your website's layout, with customizable background color and character cloth color.
  • Customizable Characters: Support for multiple characters with potential for further customization.
  • Draggable and Toggleable Window: Allow users to reposition and hide the playback window.
  • Event-Driven Interaction: Utilize callbacks for seamless integration with your website's logic.
  • Text Scrolling Slider: Displays the text that is being signed.
  • Character selection: Allow users to change the character that is signing.
  • Customizable speed: Control the speed of the sign animation.
  • Multi-Language Support: Choose the sign language output (currently supports ASL and DSL).
  • Playback Mode: Select between the signing avatar rendered live or a pre-recorded video stream of animations from the server side.
  • Customizable Window Size: Set playback window width; height adjusts automatically by aspect ratio.
  • Language Selector: Show or hide the language switcher control in the playback window.
  • Character Control: Show or hide the character change control in the playback window.

Deployment

Load the library from the CDN inside <head> or before </body>:

<script src="https://d1g156dmclqesu.cloudfront.net/vanilla/translate-v1.0.0.js"></script>

Initialization

Call initWebgl with your API key before playing poses. The first load downloads and caches the WebGL build; it may take a moment. 

initWebgl({
  key: 'YOUR_API_KEY',
  character: 0, // Optional: Initial character index (default: 0)
  backgroundColor: '#FFFFFF', // Optional: Background color of the WebGL canvas
  characterClothColor: '#808080', // Optional: Character cloth color
  speed: 0.025, // Optional: Animation speed (default: 0.025)
  chanageCharacter: true, // Optional: Show or hide character change buttons (default: true)
  appMode: '4', // Optional: Live rendered avatar
  showLanguageChangeOptions: false, // Optional: Show language change control
  width: '275', // Optional: Width of the playback window
  language: 'en' // Optional: Signing language
});

Options

OptionTypeDescription
keystringrequired — Your unique API key provided by Deaftawk.
characternumber The initial character index to display (0-based). Defaults to 0. Possible values can be 0, 1 and 2.
backgroundColorstring Sets the background color of the WebGL canvas. Accepts valid CSS color values. Defaults to #F5F5F5.
characterClothColorstringSets the character's cloth color. Accepts valid CSS color values. Defaults to #000000.
speednumber Adjusts the animation speed. Lower values result in faster animations. Defaults to 0.025. Possible values range from 1 (slowest) to 0.00833 (fastest).
chanageCharacterbooleanenable or disable the character change buttons. Defaults to true.
appModestring Sets the app mode to live avatar rendering '4' or pre-recorded video animations '3', default is '4'.
showLanguageChangeOptionsbooleanShow or hide the language change control on the floating window. Default is false.
widthstring Sets the window width and height will automatically be adjusted according to the width passed. Values range from 275 to 500. Default is 275.
languagestring Sets the language for the signing. Supported value for ASL is 'en' and for DSL it is 'da'. Default value is 'en'.
The WebGL asset is downloaded and cached in the browser on first init; allow time on slow networks.

Methods

1. playPose(data, callback)

Plays a sign language pose for the provided text in the floating WebGL window.

data (object, required):

  • text (string, required): The text to be translated into sign language
  • callback (function, optional): A function to be executed when the pose animation starts or if an error occurs

Pass empty string in text to reset avatar to default position.

Example:

JavaScript

playPose({ text: 'Hello, world!' }, function (error) {
  if (error) {
    console.error('Pose playback error:', error);
  } else {
    console.log('Pose playback started.');
  }
});

2. toggleWebgl()

Toggles visibility of the floating player window.

toggleWebgl();

Floating Window Behavior

  • The floating window appears after initWebgl is successfully executed.
  • Users can drag the playback window to reposition it.
  • The toggleWebgl function controls the window's visibility.
  • When the mouse hovers over the Webgl container; the close and character selection buttons are displayed.
  • A text scrolling slider appears at the bottom of the window when the animation starts.
  • A loader screen is displayed while the Webgl build is loading and while the pose is being generated.
  • A small button appears on bottom right of the page when the Webgl container is hidden, that allows the user to show the Webgl container again.

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Translate Integration</title>
    <style>
        .sample-text { cursor: pointer; padding: 10px; }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="overlay" id="loadingOverlay">
        <div class="loader"></div>
    </div>
    <div class="sample-text" onclick="playSign('Hello!')">Hello!</div>
    <div class="sample-text" onclick="playSign('How are you?')">How are you?</div>
    <script src="https://d1g156dmclqesu.cloudfront.net/vanilla/translate-v1.0.0.js"></script>
    <script>
        const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key
        function showLoader() {
            document.getElementById('loadingOverlay').style.display = 'flex';
        }
        function hideLoader() {
            document.getElementById('loadingOverlay').style.display = 'none';
        }
        function playSign(text) {
            showLoader();
            playPose({ text: text }, function(error) {
                hideLoader();
                if(error){
                    console.error("error playing pose", error);
                }
            });
        }
        initWebgl({ key: API_KEY });
    </script>
</body>
</html>

Live Demo

https://127.0.0.1:2025https://127.0.0.1