invoke-ai
[WebUI] Localization Support
Initial Implementation of Localization Support.
Right now the ability to localize has been added. Only the options bar has been changed. Rest of it WIP. Making a PR so it's easier to coordinate with helping parties.
How To Translate
All translation files can be found in the frontend/public/locales directory.
As of this writing there are 7 areas of translation required and you can find a folder for each of the following in the above directory.
- common
- gallery
- hotkeys
- options
- settings
- toast
- unifiedcanvas
All the mandatory strings are in the en.json files.
In order to create translations for your language, please add a file called <lang>.json where lang is the language code of your language in each of these folders and convert all the strings from the corresponding en.json to your language file.
Once this is done, all your translations are good to go.
NOTE
If you are adding a new language that is not yet implemented, then please add a new key called langSpanish for example in common/<lang>.json so it will also be localized when I implemented it into the app itself.
Any keys missing for any language will be defaulted to English.
DONE
- [x] Implement Localization Support
- [x] Fix the root loading animation
- [x] Style the drop down for Language Picker
- [x] Account for data localizations that are outside the component // Seems to be fine but double check once again for any performance regressions.
- [x] Fix localization breaking on build due to JSON's not getting packed with Vite.
- [x] Port the rest of the strings to be translation friendly [list below]
- [x] Remember to turn off DEBUGGING before final build.
TODO
- [ ] Start coordinating support for languages
LEFT TO PORT
- Selection Dropdown Options
Good to go. Everything has now been made localization friendly. Will be coordinating with more people adding support for various languages.
@netsvetaev is doing Russian. We have volunteers already for Italian and Portuguese. Sent a call out on Discord for other languages.
Also, we need a glossary (here on github) for all the terms we use — for further work with other languages. Some terms need to be changed in some languages. For example, for Russian I use «query» instead of «prompt» because it is more understandable for users, but we can also use «phrase». So we need general rules of translation.
The first step is to use MS glossary https://www.microsoft.com/en-us/language/Search?&searchTerm=App%20Directory&langID=635&Source=true&productid=undefined
SettingsModal has untranslated header "Settings".
Fixed it. Thanks for spotting.
This is good to merge for now.
We have a working localization system that has 99% of the string ported. The few that are left, I'll do them in a future update because they need some functionality changes which I didn't want to touch in this PR.
We have 5 new languages so far: Russian, Italian, German, Polish, Portuguese (Brazilian). I'll add in more languages in mini PR's as more people volunteer to translate it.
Want to merge this now so I can start working on other frontend stuff without having to worry about this PR or the other ones not staying in sync because I don't know when I'll need a big merge.
@lstein @hipsterusername @psychedelicious This is good for a review and merge.
It seems to work as advertised. A few things I noticed:
- Is it supposed to automatically detect the user's browser language setting? I tried this and still got English until I selected the language from within the GUI.
Good point
- Shouldn't the big blue Invoke button get translated as well? That's probably the most visible user interface element.
Want it too
- The prompt hint ("Type prompt here") is translated into the localization language, which is nice, but might lead users to expect that they can then prompt using their preferred language. I'd suggest changing the hint to "Type prompt here using English..."
Agree. Did this for Russian.
- Is it supposed to automatically detect the user's browser language setting? I tried this and still got English until I selected the language from within the GUI.
I detects the language if we have support for it. But only the first time. After which, a user has to set it coz its stored in local storage for persistence.
Shouldn't the big blue Invoke button get translated as well? That's probably the most visible user interface element.
I left this intentionally. Coz I wanted Invoke to read as Invoke no matter what language people use. It's the one thing we use differently and I didn't want to have that lost in translation.
The prompt hint ("Type prompt here") is translated into the localization language, which is nice, but might lead users to expect that they can then prompt using their preferred language. I'd suggest changing the hint to "Type prompt here using English..."
I think we sort this out in the docs. Most people know SD is in English only. We leave it on for now I guess. I'll work something out for this in a future patch.
- Is it supposed to automatically detect the user's browser language setting? I tried this and still got English until I selected the language from within the GUI.
It does. The very first time. But once it is loaded to a language, it is stored in localStorage for the sake of persistence. You probably loaded to English first so it stored there and had to manually change it.
If a user loads to a language we support natively on the first go, they load to that language.
- Shouldn't the big blue Invoke button get translated as well? That's probably the most visible user interface element.
I intentionally left this out. Invoke is not a word that translates easily and it is a part of the app name. And this is the one word we use as a unique tag. I want this not to get lost in translation. No matter what the lang is, I want this to be referred to as Invoke.
- The prompt hint ("Type prompt here") is translated into the localization language, which is nice, but might lead users to expect that they can then prompt using their preferred language. I'd suggest changing the hint to "Type prompt here using English..."
Adding that extra tag will need all translators to translate that too. I'll add that up to the next patch and try to get translations for that then.
A huge bit of work. Congratulations on this!
Thanks. Would have liked to have more langs in but hopefully more volunteers will come forward to contribute to their language once they see this is a feature now.
I will translate Simplified Chinese and Traditional Chinese.
我会持续提供最新的，完整的中文简体与繁体语言包支持，欢迎共享。
