Transcript
Hello guys. In the previous couple of episodes, we learned how to translate our application. So let use a select their preferred language. In this case, I have selected English now, so I see everything in English. I select Spanish, and I see puzzle application in Spanish, but not everything by, because here you see, I have the playlist text and posts, and if I go to enl, I have the N bar translated. But if I go to esl, I don't have these translations. I have just a few keys translated into Spanish. So only day I've been displayed in Spanish and everything else defaults to my English translation. So how can I, uh, translate everything into Spanish nicely? Now, there are actually different approaches to translate in our applications, and there are lots of paid tools for this. Also. For example, there is, it is, uh, kind of a JavaScript plugin that, uh, translates, uh, your application text before render. So before it is rendered, it translates into the selected language. And actually, I tried using in one of my, the companies I used to work for, and it was just awful. It is not compatible with Turbo. It doesn't work well without Hot Page refreshers or if it's not, uh, another JavaScript technology for refreshing the pages. Unlike Turbo, I joined the Slack. I tried to talk to them. It did not work. It has face time and money. Also, at a recent company we used Phrase, and actually I've seen people on Twitter recommend phrase, and I don't like it at all. It's also bad. First of all, you need to initially add the keys and the translations in phrase, and then you pull the translations from phrase into your application. And the worst thing in the bottom is their pricing. So here is a list of, uh, bills that we used to pay Phrase, we're paying around 200 euros and then spontaneously without any changes in our usage. They just increase the price to a fixed 750 euros. It is more than a 350%, uh, increase. It's just crazy. So this way they will be just paying phrase to store our, uh, ven files, uh, 9,000 euros per year. This is just crazy. So as started thinking, what are other ways to translate our application and how can we use AI to do this? First of all, I found this Gem Instant I 18 N by ob. And this is a guy in the Rubic community that talks a lot about AI and um, some AI tools. So how does this gem work? Uh, you add the gem, you add your open, uh, ai, API key, and it works more like this. So, uh, if I go to my landing page here, I have this, uh, T static landing page. And this gem would be it n it not just T, but it, uh, the string. And here I would say something like, uh, EN or ES or I 18 n locale, the call that the current user has selected. And it'll make a call to, Uh, open AI and uh, come back with a translated stream and later on it would catch the string to make your calls to the API. And this might be a quick and okay approach. Yeah, again, I would use not this, I would use the actual title. So, uh, um, hello, uh, world tava. So this way it'll be translated, but I wanted something more conventional. Uh, but if I want to actually allow you, uh, have more control of the translation, not it this way for the jam, it is just a black box over translations. What if I want to, uh, have control with the translations as I do in my VML files? I just want to, uh, have my Ian VML file and generate the translations for all other languages based on this, uh, file. And, uh, let use override something manually if the, uh, AI is hallucinating. So, um, what do I do? There's a better jam. There's a Gem I 18 n tasks that lets you manage these V ml files. It'll help you link this files, clean up the, uh, unused keys and, uh, syn keys from one translation to another and make calls to AI or another translation service to do the actual translations. So let's see how this gem works. And I'm really happy with this gem. It's like one of the best gems I found this year. So let's try adding this gem. I will go to my gem file and add it in my group development. We don't need this gem anywhere else. Now I run bundle. Now there are a few files I need to copy, so I'm going to copy file number one. Now I don't need to cope with the aspect. I'm going to cope with the mini test file and to, okay, so what have I coped? I've copied with this, uh, item task, VML file where we beside the default local and we can, uh, update different ways. Uh, the item task gem, uh, uh, process our ML files. And I have imported that test file. So if you test that, uh, the gem runs on our translations. Let's try running these tests. I will say rails test. It gives me through failures. It says that I have some unused keys. Let's have a look at the unused keys. And uh, here you see these keys are not being, uh, used anywhere. Uh, why isn't this key used anywhere? Because we just, uh, removed it here in the landing page. Let's bring it back. So I will run the unused command again. And you see the key is being used. So how can we remove these unused keys? There must be a command, uh, unused, remove unused, okay, it remove these two keys. Yes, let's have a look at our mobile file and scan. And it actually not only remove the two keys, but linted everything. Basically removed the unused lines and, uh, sorted everything in the ML file alphabetically. Okay, uh, next, let's run the tests once again. Now instead of three fillers, we have two fillers. Let's have a look. So, uh, we have item tasks normalize, and it'll, uh, yeah, I forgot the, that was the symbol, the apostrophe on the beginning on my, okay. Uh, I normalize the Spanish translation now and the English translation. So everything is alphabetical here. Now let's run the test once again. And I have one failure and it says, uh, it and tasks missing. Let's run this command. And you see it says, uh, all locals are missing these lines. The Spanish local is missing these lines. And here's how it looks in the English translation. So how can we fix, uh, this? Here's the actual problem. Uh, in the English translation, I have, uh, uh, how many like 118 lines in the Spanish translation, I have 10 lines. I want to copy all the translations. So, uh, there is recommend a missing. And what did it do? Going back to the E-N-V-M-L, I have 121 line, the ES VML file. I have, uh, also 121 line. But you see in the ES VML file, I actually did not do the rule translations. I just, uh, copy the keys and, uh, put them in the human readable case. So this looks awful. This is not something I want to do. I want to actually do the translations in the ESML file based on the EN VML file. How can I do it? First of all, I will delete the ESML file changes. Let's leave it as it was, uh, on the very beginning, what we had here. Now, uh, again, I will run the normalized command and I want to, to use AI to do the translations. Now, if I go to the IT tasks VML config file, I see there is this translation services bot and I can use different translation services. In this case, I will use open ai. So I will use the open AI API key, and yeah, let build this model. So I need to add my open AI API key. Let's go here. I have already created an account in the platform.open ai.com. I have added the a credit card. Uh, I have some balance. Now I'm going to go to my dashboard, API keys, uh, create a new API key create key. Okay? Please don't steal my key. I will copy it and paste it here. Okay, I have the open A API key, and now I want to do the translations. So, uh, in the description, in the rhythm, we have this translate mission keys. So I can run 18 m translate mission, and I will say backend equals, uh, open ai. So let's run this command. I will cope with this. And, uh, backend equals open ai. Now, before running this, let's have a look again at our ES by ml. Okay, let's run this command. Now it's actually make an API cost to open AI based on our API key. Let's fade a bit. And here are the translations that four generated. Let's have a look at our ES ml file. Now again, we have 121 lines, exactly as many as in the English translation, but everything is translated with ai and that's basically it. So, uh, the gym item and tasks lets you sanitize, normalize your translation files, remove missing keys, and use, uh, a translation service or AI to actually generate that translations. And this way the application will look nice in different languages. Now let's have a look at the application itself. I will refresh the page. So you see now the header is also translated, uh, into Spanish, and so are all the other pages. And, uh, that's basically it. Thanks for being with me and see you in the next one. And most importantly, this is how we saved 9,000 euros per per year using this wonderful gem. Goodbye.
0