--- title: One-Click Survey Localization Using AI product: Survey Creator description: Discover how to integrate AI-driven translation into Survey Creator for seamless localization. Instantly translate your surveys and forms into multiple languages with AI and preview translations in real time. View this JavaScript form builder demo to learn more. framework: jQuery source: https://surveyjs.io/survey-creator/examples/ai-translation/jquery index: https://surveyjs.io/survey-creator/examples/overview.md --- # One-Click Survey Localization Using AI (jQuery) 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. ## Specify Target Languages 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. ## Enable Machine Translation 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`](/survey-creator/documentation/api-reference/survey-creator#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`](/survey-creator/documentation/api-reference/icreatoroptions#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)`](/survey-creator/documentation/api-reference/survey-creator#startMachineTranslationTo) 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](/survey-creator/examples/create-multilingual-forms/reactjs (linkStyle)) ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/survey_json.js` ```js export const surveyJSON = { "pages": [{ "name": "page1", "elements": [{ "type": "matrix", "name": "qualities", "title": "Please indicate if you agree or disagree with the following statements", "columns": [{ "value": 5, "text": "Strongly agree" }, { "value": 4, "text": "Agree" }, { "value": 3, "text": "Neutral" }, { "value": 2, "text": "Disagree" }, { "value": 1, "text": "Strongly disagree" }], "rows": [{ "value": "affordable", "text": "Product is affordable" }, { "value": "does-what-it-claims", "text": "Product does what it claims" }, { "value": "better-than-others", "text": "Product is better than other products on the market" }, { "value": "easy-to-use", "text": "Product is easy to use" }] }] }, { "name": "page2", "elements": [{ "type": "rating", "name": "satisfaction-score", "title": "How satisfied are you with our product?", "minRateDescription": "Not satisfied", "maxRateDescription": "Completely satisfied" }, { "type": "comment", "name": "suggestions", "title": "What would make you more satisfied with our product?", "maxLength": 300 }] }, { "name": "page3", "elements": [{ "type": "radiogroup", "name": "price-comparison", "title": "Compared to our competitors, do you feel our product is:", "choices": [ "Less expensive", "Priced about the same", "More expensive", "Not sure" ] }] }, { "name": "page4", "elements": [{ "type": "text", "name": "email", "title": "Thank you for taking our survey. Please leave your email address if you would like us to contact you." }] }] }; ``` ### `src/index.js` ```js import { SurveyCreator } from "survey-creator-js"; import "survey-core/survey.i18n"; import "survey-creator-core/survey-creator-core.i18n"; import { surveyLocalization, Action, ComputedUpdater } from "survey-core"; import { surveyJSON } from "./survey_json"; import "survey-core/survey-core.css"; import "survey-creator-core/survey-creator-core.css"; import "./index.css"; import SurveyTheme from "survey-core/themes"; import { registerCreatorTheme } from "survey-creator-core"; registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes const creator = new SurveyCreator({ clearTranslationsOnSourceTextChange: true }); const supportedLocales = ["es", "fr", "it", "de"]; surveyLocalization.supportedLocales = supportedLocales; // Configure a custom action button const localizeSurveyAction = new Action({ id: "localize-survey", title: "Localize Survey", iconName: "icon-language", // Uncomment the following line to display only the icon // showTitle: false, visible: new ComputedUpdater(() => creator.activeTab === "designer"), action: () => { creator.startMachineTranslationTo(supportedLocales); // Raises the `onMachineTranslate` event } }); // Add the button to the toolbar creator.toolbar.actions.push(localizeSurveyAction); // Add a custom button to the bottom toolbar (visible only on mobile devices) creator.footerToolbar.actions.push(localizeSurveyAction); // Translate strings using AI creator.onMachineTranslate.add((_, options) => { const url = window.location.origin + "/api/StringsTranslator/translate"; try { fetch(url, { method: "POST", headers: { "Content-Type": "application/json;charset=UTF-8", }, body: JSON.stringify({ "fromLocale": options.fromLocale, "toLocale": options.toLocale, "strings": options.strings }) }) .then(response => response.json()) .then(data => { options.callback(data); const str = data.length + " strings are translated"; creator.notify(str); }); } catch (error) { options.callback(); console.error("AI translation API is unavailable"); } }); creator.JSON = surveyJSON; creator.render("surveyCreatorContainer"); ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest", "survey-creator-core": "latest", "survey-creator-js": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/survey-creator/examples/ai-translation/angular.md) - [React](https://surveyjs.io/survey-creator/examples/ai-translation/reactjs.md) - [Vue 3](https://surveyjs.io/survey-creator/examples/ai-translation/vue3js.md) - [Vanilla JS](https://surveyjs.io/survey-creator/examples/ai-translation/vanillajs.md)