- Published on
Translate your App using ChatGPT OpenAI and i18n
- Authors
- Name
- Talha Tahir
- linkedin @thetalhatahir
In the vast world of SaaS, having your app speak many languages is a big deal. In order to reach a bigger user-base, products need to support multiple languages, no surprise there. Making this happen is a big part of scaling an app.
Now, people usually do this translation thing manually, using tools like Google Translate or the free version of ChatGPT. But guess what? I've made it easier.
I automated the whole translation gig using OpenAI's ChatGPT API. Stick around, and I'll show you how to do it.
Let's dive in! 🌐✨
Prerequisites
Before diving into the implementation, ensure you have the following:
- A Single Page Application (SPA) with i18n set up (formatjs, i18n-next, i18n ).
- An OpenAI API key for accessing ChatGPT. (This requires you to buy some OpenAI credits, but don't worry the cost is negligible).
- Node.js installed on your machine.
The below example uses formatjs
as the i18n framework. Since i18n is the most popular internationalization framework, I have used it for implementation. Otherwise, if you use some other framework, the code below could be tweaked to handle it.
The Problem
These are different language flavours of my web application : German, French, Spanish and English. Each language has an associated .json
file which includes key value pairs of translation ids.
Let's add a new translation for the key in English.
When you run the i18n
command of your framework this key gets added to the json files.
Here is the result for all languages:
English.
For Spanish, French and German, you would see an empty string.
Now this is where the automation script helps 🤖.
Generally you would manually translate everything for each language and then copy-paste the translations in each file. Imagine you are working on a new feature and you have to add 30 new translations : 30 * 3 = 90
translations which you would have to manually paste in each file 😰
The ChatGPT Automation Script
This Node.js script utilizes the OpenAI API to translate missing entries in your language files.
Install the openai package.
npm install --save openai
Install the doenv package, incase you want to pick the API key from .env file
npm install dotenv --save
Create a your-script-name.js
on the root level of your project and add the following script.
require('dotenv').config()
const fs = require('fs')
const OpenAI = require('openai')
//make sure you have the OPENAI_API_KEY in your .env file
const OPENAI_API_KEY = process.env.OPENAI_API_KEY
const openai = new OpenAI({
apiKey: OPENAI_API_KEY,
})
async function updateLanguageFile(english, fileName) {
//get the .json file for the language using fileName
let langJson = require(`./lang/${fileName}.json`)
console.warn(`${fileName}.json:`)
//get all empty keys for a language which need to be translated
const emptyKeys = Object.keys(langJson).filter((key) => langJson[key] === '')
if (emptyKeys.length > 0) {
console.warn(`Translating using ChatGPT 3.5 Turbo...\n`)
const englishEntries = {}
//fetch the english sentences for all the missing empty keys
//which would be sent to ChatGPT OpenAI api
emptyKeys.forEach((ele) => {
englishEntries[ele] = english[ele]
})
try {
//Calls ChatGPT OpenAI api to translate the strings
const translatedEntries = await completeTranslation(englishEntries, fileName)
console.log(`en => ${JSON.stringify(englishEntries)}`)
console.log(`${fileName} => ${translatedEntries}`)
//append the freshly translated strings to the original language file
langJson = { ...langJson, ...JSON.parse(translatedEntries) }
} catch (translationError) {
console.error(`Error translating: ${translationError.message}`)
}
//sort the translations according to key name,
//so that order is preserved in the language file
const sortedLangJson = Object.keys(langJson)
.sort()
.reduce((acc, key) => {
acc[key] = langJson[key]
return acc
}, {})
//write it to the language file
fs.writeFileSync(`./lang/${fileName}.json`, JSON.stringify(sortedLangJson, null, 2))
} else {
console.warn(`No translations missing`)
}
console.warn(`\n`)
}
const completeTranslation = async (messageObject, lang) => {
try {
/*This functions sends all the entries of a single language as a json object
to ChatGPT OpenAI api and it returns you the translated object in json format.
To save cost, I send the whole object in one request rather than
sending each string individually which would cost more tokens.*/
const completion = await openai.chat.completions.create({
model: 'gpt-3.5-turbo', //You can use other models too
messages: [
//These are the prompts which I use for translations
{
role: 'system',
content:
'You will be provided with a json object in English language
and your task is to only translate the values into the
requested language, and return the result as valid json',
},
{
role: 'user',
content: `Translate the following json Object
to '${lang}' language: ${JSON.stringify(messageObject)}`,
},
],
//better to not mess with these,
//you can tweak token size if you want to send huge translation objects
temperature: 1,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
})
return completion.choices[0].message.content
} catch (error) {
throw new Error(`Error completing translation: ${error.message}`)
}
}
try {
console.info(`Checking for missing translations\n`)
const english = require('./lang/en.json') //path to your english .json file
const languages = ['de', 'es', 'fr'] //names of you other language files.
languages.forEach((lang) => {
updateLanguageFile(english, lang)
})
} catch (error) {
console.error('Error reading JSON files:', error.message)
}
Here is a link to my gist for above code: Auto Translate your App using ChatGPT OpenAI Api
Implementation Steps
Now, let's break down the implementation steps:
Set Up Your Project: Ensure your SPA has the i18n framework integrated. This script assumes you have language files (e.g., en.json, de.json) in a
lang
folder.Get OpenAI API Key: Obtain your OpenAI API key and add it to a
.env
file.Install Dependencies: Run
npm install dotenv openai
to install necessary packages.Run the Script: Execute the script using
node your-script-name.js
. It will identify missing translations and utilize ChatGPT for automated translations. You can add this script to your package.json file too :i18n:chatgpt : node your-script-name.js
Output
Here is the translation for German, French, Spanish
😀 Congratulations! You saved yourself from copy-pasting forever! Now whenever you have new keys to translate, you simply run this script and it auto-translates them in all languages!
Conclusion
Automating translations in your SPA with i18n using ChatGPT and OpenAI's language model boosts efficiency and accuracy in localization. It saves time and guarantees a smooth multilingual user experience.
With automation, devs can concentrate on creating awesome user experiences. AI takes care of repetitive tasks like translations. This tech integration not only makes workflows smoother but also improves your app's quality worldwide.
Happy Coding! ⌨️