> For the complete documentation index, see [llms.txt](https://deaftawk.gitbook.io/deaftawk-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deaftawk.gitbook.io/deaftawk-docs/getting-started/quickstart-2.md). # Translate Integration Guide: Angular JS Welcome to the Translate Integration Guide! This document provides detailed instructions for embedding the Translate, an AI-powered sign language player based on WebGL, into your website using Angular JS. The Translate enables you to seamlessly render sign language animations within a floating window, enhancing accessibility and user engagement. **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 like 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 server side * **Customizable Window Size:** Set playback window width and height adjusts automatically by aspect ratio * **Language Selector:** Show or hide language switcher control in the playback window * **Character Control:** Show or hide character change control in the playback window ## Deployment: #### NPM ``` npm install dt-translate-angular //imports import { TranslateService } from 'dt-translate-angular'; //Next, inject the service into the component's constructor: constructor(private translateService: TranslateService) {} ``` ## Initialization: Before using the Translate, you must initialize it with your API key. JavaScript ```javascript this.translateService.init({ 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 }); ``` * **key (string, required):** Your unique API key provided by Deaftawk. * **character (number, optional):** The initial character index to display (0-based). Defaults to 0. Possible values can be 0, 1 and 2. * **backgroundColor (string, optional):** Sets the background color of the WebGL canvas. Accepts valid CSS color values. Defaults to #F5F5F5. * **characterClothColor (string, optional):** Sets the character's cloth color. Accepts valid CSS color values. Defaults to #000000. * **speed (number, optional):** Adjusts the animation speed. Lower values result in faster animations. Defaults to 0.025. Possible values range from 1 (slowest) to 0.00833 (fastest). * **chanageCharacter (boolean, optional):** enable or disable the character change buttons. Defaults to true. * **appMode (string, optional):** Sets the app mode to live avatar rendering ‘4’ or pre-recorded video animations ‘3’, default is ‘4’. * **showLanguageChangeOptions (boolean, optional):** Show or hide the language change control on the floating window. Default is false. * **width (string, optional):** Sets the window width and height will automatically be adjusted according to the width passed. Values range from 275 to 500. Default is 275. * **language (string, optional):** Sets the language for the signing. Supported value for ASL is ‘en’ and for DSL it is ‘da’. Default value is ‘en’. **Important:** The initWebgl function downloads the WebGL build and caches it in the browser. This process may take time depending on network conditions. ## 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 

this.translateService.playPose({ text: 'Hello, world!' }, function(error) {
    if(error){
        console.error('Pose playback error:', error);
    } else {
        console.log('Pose playback started.');
    }
});
2. **toggleWebgl():** * Toggles the visibility of the floating playback WebGL window. Example: JavaScript 
this.translateService.toggleWebgl(); // Toggles the window's visibility
**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. ## Example Integration ```tsx import { Component, OnDestroy, OnInit } from '@angular/core'; import { TranslateService } from 'dt-translate-angular'; @Component({ selector: 'component-selector', templateUrl: './translatesdk.component.html', styleUrls: ['./translatesdk.component.scss'] }) export class TranslateDemo implements OnInit{ constructor( private translateService: TranslateService ) {} ngOnInit() { this.translateService.init({ key: 'your-translate-key-here', //rest of optional parameters }); } handleTranslateSDK(data){ //poseData this.translateService.playPose({ text: 'some text'}, this.playPoseCallback); } playPoseCallback() { console.log('unity call back hit'); } } ``` ## Live Demo {% embed url="" %}