This article shares the experience of using the ChatGPT API to efficiently support internationalization (i18n) of products, providing tips on integrating the API, improving translation results, and optimizing instructions for better outcomes.
In today's global market, it's essential to internationalize (i18n) products. By supporting multiple languages, products can attract and serve a global user base, enhance user experience, increase loyalty, and gain market share. However, internationalization support often comes with high costs and complex maintenance:
In this article, we will share the Logto team's experience of efficiently supporting internationalization for our products using ChatGPT and its API while minimizing costs.
Before integrating the ChatGPT API, we followed a traditional translation process to support internationalization for our products. The process was as follows:
Here's an example of the index.ts file for the zh-HK language:
To display a phrase in the UI, we used a function that retrieved the translation based on the current environment. We accessed nested objects or keys using the dot notation.
For example, if the user was using an English browser:
We encountered two major challenges with this approach:
While ChatGPT gained popularity, we discovered an interesting use case. Accidentally, we copied a TypeScript phrase object into ChatGPT and found that it could translate the code snippet while preserving the code structure. This discovery excited us.
For example:
And the result:
This was truly remarkable. In real-world cases, we also had historical files that included some untranslated phrases marked with // UNTRANSLATED:
ChatGPT was even able to "partially" translate the code snippet, eliminating the last obstacle. However, it was still far from perfect. Let's see the issues we encountered.
One well-known fact about ChatGPT is its unpredictable nature. Sometimes, the results are accurate, while other times, they can be strange or not what we intended. While this is acceptable in a chatbot context, it becomes problematic when generating translation code snippets.
Let's revisit the zh-HK example:
The expected translation for Nice to meet you. in zh-HK is 很高興見到你。. However, there are instances where the snippet is translated into zh-CN:
很高兴见到你。 is different from 很高興見到你。.
Sometimes, the prompt "Please translate the..." is also translated:
Occasionally, the results contain unnecessary content:
The first line "This is the translation:" is unnecessary for our needs.
Based on the above results, we can identify several gaps between ChatGPT and us in the conversation:
To address the issues mentioned above, we refined our prompt:
This new prompt proved to be effective. We instructed ChatGPT to:
As mentioned earlier, for existing phrases, we needed to translate those marked with // UNTRANSLATED. This introduced another layer of complexity to the prompt. For example:
One of the results we obtained:
It also translated (or transformed) the phrase success and added two // TRANSLATED comments, which were both unexpected.
Although the previous prompt was clear and specific, it was quite lengthy and challenging to follow, even for humans. To improve this, we gave the model more time to think. We provided a step-by-step prompt:
The results significantly improved. However, sometimes ChatGPT would display the "thinking process" since we explicitly provided the steps.
Although there is no direct user interface, we can send an interactive and dynamic conversation to ChatGPT by assigning different "roles" to each message. The role can be one of the following:
By using roles, we can create a more engaging conversation with ChatGPT. Each message plays a specific role in guiding the conversation.
Here, we can use the "system" role to guide ChatGPT on how to accomplish our task:
Use the "user" role to ask ChatGPT to translate the code snippet:
Use the "assistant" role to indicates the "stadnard answer":
Finally, combine the three messages above with the code snippet we want to translate, and send a single request to the Chat Completion API. Here's an example:
We replaced languageCode with the target code and code with the code snippet to translate, and saw the exact result we expected. Bravo!
While the results were correct and stable, the process of using ChatGPT API was still not very convenient. We had to manually copy the code snippet, paste it into the request, and replace the languageCode and code variables. Considering the need to translate more than 10 languages and 100 code snippets, this was not an ideal experience.
To address this, we decided to integrate the ChatGPT API into our Command-Line Interface (CLI). We added two commands to our CLI:
logto translate sync: This command collects code snippets across all languages that contain // UNTRANSLATED comments, translates them, and replaces the original code snippets with the translated versions.logto translate create [languageCode]: This command creates a new language with the specified [languageCode] and translates all code snippets from the default language (English) to the new language.Although the translation may be not perfect, it is still a huge improvement. We could now focus on validating and improving the translation results instead of spending time on the actual translation process.
Integrating ChatGPT API into our workflow for product internationalization can be a powerful tool, but it requires careful planning and clear instructions to get the best results.
If you're developing AI applications, user authentication is essential. Logto provides a simple and secure way to authenticate your users and offers a unified user identity system across all your applications, and also offers out-of-the-box support for ChatGPT plugins. For more information, check out our blog post: