Mozilla Firefox Networkless Translation

2022-07-08 in SOFTWARE ENGINEERING

open source mozilla

5 min read

On the fediverse (gratuitous personal profile link) I follow lots of international people. As a consequency I see lots of posts in other languages. I always hated dumping it into Google Translate to get an English representation. Fortunately in June Mozilla announced the result of their partnership with Project Bergamot to create a Firefox browser extension . The project is creating open source trained datasets for translation between many European languages. Because the model is pre-trained all of the translation is done on the local machine, thus with no network interactions whatsoever!

Once the plugin is activated it adds an icon to the URL bar that lets you toggle the translation toolbar. If the page has specified a language other than your native language it will automatically bring this up (that can be toggled off if you wish though). Either way the user has the ability to override what the current site’s language is (which would be guessed correctly if the site specified it). A simple hit of the translate button and it runs the text through the translation engine and re-renders the site with your language. For example here is the German language publication Der Spiegel before and after translation:

*Der Spiegel article in German with the Mozilla Translate plugin bar showing, before translation*

*Der Spiegel article in after translation to English*

I’ve found the translations to be as solid as what I was getting out of Google Translate but now I’m not feeding their data beast and this can be run offline. I do have two problems still though. First, they currently only support 12 languages unlike the dozens supported by Google Translate. That would be less important except one that I really could use now is French. According to this project GitHub issue these languages should be out any day now. The second issue I have is that I use these tools to translation social media timelines. Social media timelines are often a mixture of languages. My go to was therefore to copy/paste the text into the Google Translate page. I therefore needed something like that here. Luckily this works with literally any page, so having a simple “for translation” page creates exactly what I need:

<html>
<head>
	<title>Text to Translate</title>
	<script type="text/javascript">
    function echofromform(event, textarea) {
		document.getElementById("output").textContent = textarea.value;
    }
</script>
</head>
<body>
	<form>
		<textarea id="input" cols="60" rows="20" onKeyUp="echofromform(event,this)"></textarea>
		<br>
	</form>
	<br>
	<h3>Output</h3>
	<div id="output"><i>What you type will show up here...</i></div>
</body>
</html>

This is a simple text box that you can type, or copy/paste, text into. It echos it to an area that the translate tool can translate. For example:

Example of the simple translation page with Spanish text translated

Why does it need to echo the text for translation? Technically the plugin can translate form fields. I haven’t found it successful at doing that. Which brings me to some of the problems with it right now that hopefully will be remedied sooner rather than later:

The form translation capability should work but doesn’t seem to. For my example that’s fine but if one needed to have that it is a problem. They should remove that if it isn’t going to be a thing.
There are more languages available in the engine than are currently supported in the plugin. Hopefully they are correct that more of these, especially French, are coming sooner rather than later.
The first time you use a new language it has to download the model. Nothing tells you that though. So if someone loaded it up assuming it would be available offline or with a diminished connection they would be up shit creek. The solution is simple of course, run at least one translation ASAP in your favorite languages. The fact it is more of an implicit thing though is not the best.
The formatting of the toolbar is broken after translation. It doesn’t honor the window size and therefore blows out the right hand side of the bar unless the window is large enough. Unfortunately that includes the “close” button. That is probably just a small bugfix that I think may already be completed but not in a released version yet.
The language being used for translation disappears once you start. It can probably use some UX tweaks to keep that and show that it is translated, etc.

Overall this has been a great thing for me. With the exception of my French translation I have totally replaced Google Translate with this plugin. Hats off to the Mozilla and Project Bergamot team on a job well done!

My biggest gripe though is they make it very difficult to find. Even when I knew what I was looking for it was a hell of a time to load the right one. If this was Google with a Chrome extension it would be right at the top, maybe even a style that made you want to click on it first. For Firefox it is buried way down the list. What’s worse is others look like the right one but it is really just a front for Google Translate. Doubly worse, they don’t mention anything about it on their languages page for the browser feature but they do mention the Google Translate plugins! They gotta fix that.