One-Click Survey Localization Using AI

AI-powered translation services can help you localize your surveys. This example shows how to integrate AI localization into Survey Creator. Click the Localize Survey button to automatically translate English texts to a number of predefined languages. Change the survey language using the Select a survey language dropdown in the Property Grid to view the translations on the design surface.

Survey texts can be translated to one or more languages. Define an array of target locales and assign it to the supportedLocales property of the surveyLocalization object. In this demo, the supportedLocales array contains four languages: Spanish, French, Italian, and German. The default language—English—is used as a source for translations.

To integrate machine translation into Survey Creator, you need to deploy a language model to your application and expose an API for interaction with that model. Refer to tutorials dedicated to the model of your choice for instructions. This example uses the GPT-3.5 Turbo model deployed on the SurveyJS website.

A deployed AI model receives original survey texts and responds with their translations. To submit the survey texts, handle the onMachineTranslate event. Use its options.fromLocale, options.toLocale, and options.strings parameters to identify the source and target languages and access the strings to translate. After the AI service returns an array with translations, pass it to the options.callback method.

The options.strings array contains only the strings that are empty in the target language. Once they are filled in, those strings won't be updated if a string in a source language is modified. To ensure that automatic translations are up-to-date, enable the clearTranslationsOnSourceTextChange property in the Survey Creator configuration object. With this setting, translations to other languages will be cleared and ready to be localized again after a change in their source string.

To trigger AI translation in code, call Survey Creator's startMachineTranslationTo(locales) method, passing an array of target locale codes to it. This method causes the onMachineTranslate event to raise and perform AI translation. You can call this method using any UI element that suits the design of your application most. This demo shows how to add a custom action button to the toolbar for this purpose. Refer to the Code tab for a code example.

If you want to select target languages and edit translations in a specially designed UI, enable the Translations tab in Survey Creator. Refer to the following example for more information:

Create a Multilingual Form