Translate integration: Angular
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, 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.
Installation
npm install dt-translate-angularimport { TranslateService } from 'dt-translate-angular';
constructor(private translateService: TranslateService) {}Initialization
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
});Options match the Vanilla JavaScript reference.
Initialization downloads and caches the WebGL build in the browser; allow time on first load.
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 languagecallback(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!' }, (error) => {
if (error) {
console.error('Pose playback error:', error);
} else {
console.log('Pose playback started.');
}
});2. toggleWebgl()
Toggles visibility of the floating player window.
this.translateService.toggleWebgl();Floating window behavior
Identical to the Vanilla and React integrations. See Vanilla JavaScript for details.
Example component
import { Component, OnInit } from '@angular/core';
import { TranslateService } from 'dt-translate-angular';
@Component({
selector: 'app-translate-demo',
templateUrl: './translate-demo.component.html',
styleUrls: ['./translate-demo.component.scss']
})
export class TranslateDemoComponent implements OnInit {
constructor(private translateService: TranslateService) {}
ngOnInit(): void {
this.translateService.init({
key: 'your-translate-key-here'
});
}
handlePlay(text: string): void {
this.translateService.playPose({ text }, () => this.playPoseCallback());
}
playPoseCallback(): void {
console.log('Playback callback');
}
}