Translate integration: React
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 React 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-react Import the Translate object from the package (module export name may be translate-react—follow your installed package):
import { Translate } from 'translate-react';Initialization
Call Translate.init with the same options as initWebgl in the Vanilla guide. First load downloads and caches the WebGL build.
Translate.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
});See Vanilla JavaScript for the full options table.
Methods
1. Translate.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
Translate.playPose({ text: 'Hello, world!' }, function (error) {
if (error) {
console.error('Pose playback error:', error);
} else {
console.log('Pose playback started.');
}
});2. Translate.toggleWebgl()
Toggles visibility of the floating player window.
Translate.toggleWebgl();Floating window behavior
Same as Vanilla JS. See Vanilla JS — Floating Window Behavior.
Example component
import React, { useEffect } from 'react';
import { Translate } from 'translate-react';
const App: React.FC = () => {
useEffect(() => {
Translate.init({
key: 'your-api-key-here'
});
Translate.playPose({ text: 'your text here' }, () => {
/* callback */
});
}, []);
return <></>;
};
export default App; In production, drive playPose from user actions rather than firing on mount unless you intend autoplay.