Alternative approach: JavaScript-based i18n system that survives updates

[RonnyCHL]

Hi Lars,

I've been working on an alternative translation approach for BirdNET-Pi that might interest you.

The Problem

The current sed-based approach works well, but requires re-running 250+ sed commands after every BirdNET-Pi update because the PHP files get overwritten.

The Solution

I've built a JavaScript-based i18n system that:

• Only adds 2 lines to BirdNET-Pi (script tags in index.php and views.php)
• Translations are stored in JSON files (easy to edit, easy to contribute)
• Survives updates - just run update.sh to re-add the 2 script tags
• Uses MutationObserver for dynamic AJAX content

Available Languages

Dutch, Swedish, German, French, Polish, Finnish, Danish (500+ translations each)

Demo

You can see the code and documentation here:
https://github.com/RonnyCHL/Translate

Question

Would you be interested in collaborating on this? I'd be happy to:

• Merge this into your repo
• Help convert more languages
• Improve the Swedish translations together

Let me know what you think!

Greetings from Ronny

[Svardsten53]

Hi Ronny,

This looks promising. Please go ahead and merge into my repo and I'll test it.

I have looked into the Swedish translation in your repo and think it covers much more than my sed solution. Though I would like to come back later with some minor adjustments, but let's begin with the current translation.

[RonnyCHL]

Hi Lars,

Great to hear! I'll create a Pull Request to your repo with:

The i18n.js translation engine
All language files (nl, sv, de, fr, pl, fi, da)
Install/update/uninstall scripts
Documentation
You can then review and merge it. I'll submit the PR shortly.

The Swedish translation is indeed more complete - feel free to adjust anything after merging.

[Svardsten53]

Hi Ronny,

I accepted the request and installed it on my test system, but unfortunately no translations done.

I noticed the paths to the modification in index.php and views.php are the following:

<script src="/i18n/config.js"></script>
<script src="/i18n/i18n.js" defer></script

Is this correct? I tried to change to ~/Translate/i18n/... but no change.

FYI: My old Readme information was overwritten, but i copied back the one I had before yours.

[RonnyCHL]

Hi Lars,

The paths /i18n/config.js and /i18n/i18n.js are correct - they're relative to the web root.

The install script copies files to ~/BirdNET-Pi/i18n/, which should work because BirdNET-Pi typically symlinks the homepage folder to /var/www/html/.

Can you check:

Is the i18n folder accessible via web?

ls -la ~/BirdNET-Pi/i18n/
Check if the symlink exists:

ls -la /var/www/html/
If symlink points elsewhere, we need to copy to the web root:

sudo cp -r ~/BirdNET-Pi/i18n /var/www/html/
Check browser console (F12) for errors - it will show if i18n.js fails to load.

Let me know what you find!

[Svardsten53]

The paths: Of course, I didn't notice the files were copied to that place too.

Command output:
test:/BirdNET-Pi$ ls -la /BirdNET-Pi/i18n/
total 32
drwxr-xr-x 3 test test 4096 Feb 4 14:53 .
drwxrwxr-x 14 test test 4096 Feb 4 15:43 ..
-rw-rw-rw- 1 test test 392 Feb 4 14:53 config.js
-rw-rw-rw- 1 test test 12703 Feb 4 15:45 i18n.js
drwxr-xr-x 2 test test 4096 Feb 4 14:53 langs
test:/BirdNET-Pi$
test:/BirdNET-Pi$
test:/BirdNET-Pi$ ls -la /var/www/html/
ls: cannot access '/var/www/html/': No such file or directory
test:/BirdNET-Pi$
test:/BirdNET-Pi$
test:/BirdNET-Pi$ sudo cp -r /BirdNET-Pi/i18n /var/www/html/
cp: cannot create directory '/var/www/html/': No such file or directory
test:/BirdNET-Pi$

Browser console/Console
config.js:1 Uncaught SyntaxError: Unexpected token '<'
i18n.js:1 Uncaught SyntaxError: Unexpected token '<'
config.js:1 Uncaught SyntaxError: Unexpected token '<'
i18n.js:1 Uncaught SyntaxError: Unexpected token '<'

[RonnyCHL]

Hi Lars,

I've fixed the installation scripts to auto-detect different BirdNET-Pi setups.

The problem was that your BirdNET-Pi is in /BirdNET-Pi/ instead of ~/BirdNET-Pi/, and the script didn't find the correct web root.

I've created a PR with the fix: #5

After merging, please run:

cd ~/Translate
git pull
./scripts/install.sh sv
The script will now show where it's installing:

BirdNET-Pi location: /BirdNET-Pi
Web root: /BirdNET-Pi/homepage
Installing to homepage: /BirdNET-Pi/homepage/i18n

[RonnyCHL]

Great that it works now!

The browser is caching the old sv.json file. To see your new translations:

Quick fix - force reload:

Press Ctrl+Shift+R (or Cmd+Shift+R on Mac) to hard refresh
Or clear the cache:

Open browser DevTools (F12)
Go to Network tab
Check "Disable cache"
Refresh the page
Or add a version parameter:

http://your-birdnet-pi/?lang=sv&v=2
The i18n.js already adds a version parameter (?v=1.0.2) but the browser may still cache aggressively.

Ronny

[Svardsten53]

Hi Ronny,

I'm not sure I understand what to do in github. Your update was in conflict with mine and I accepted "incoming".

I have reinstalled, but no changes as far as I can see. Some text doesn't seem to be able to be changed, while other text on the same page can, strange.

[RonnyCHL]

Hi Lars,

The PR was merged successfully and the translations are in the repo. The problem is likely browser/file caching.

Please try these steps:

1. Go to your Translate folder

cd ~/Translate

2. Force pull the latest version

git fetch origin
git reset --hard origin/main

3. Reinstall

./scripts/install.sh sv

4. Clear browser cache

Press Ctrl+Shift+R in your browser (hard refresh)

About text that won't translate:

Some text cannot be translated by JavaScript because it's:

Generated as images (like the daily_plot.py charts) - these are created server-side
Inside canvas/SVG elements - JavaScript can't access this
Loaded from external sources - like Plotly chart labels
Can you tell me which specific text is not translating? I can check if it's something we can fix or if it's a limitation.

[Svardsten53]

Thanks!

This is not translated:

Overview
x new species detected today!

Species Stats
All text on page

Daily Charts
No Charts For 2026-02-05 (but that message is strange, it's under the line and todays image is shown.

Weekly Report
Week 05 Report
percentages are calculated relative to week 4

Advanced settings
If a Human is predicted anywhere among the top 10 predictions, the sample will be considered of human origin and no data will be collected. Start with 1% and move up as needed.
Note only the spectrogram and audio files are deleted, the observation data remains in the database. The files protected through the "lock" icon are also not affected.
Analyze ffmpeg CPU/Memory usage with top or htop if necessary.
The BirdNET-Pi URL is how the main page will be reached. If you want your installation to respond to an IP address, place that here, but be sure to indicate "http://".
Using ffmpeg: e.g. origin=6000, target=4000, performs a shift of 2000 Hz down.
Using sox: e.g. shiftPitch=-1200 performs a shift of 1 octave down. This value is in 100ths of a semitone.
Note: It is recommended that the Log Level be set to Fel on production systems to keep output manageable, by only reporting errors.
'error' - Show all errors, including ones which can be recovered from. This is the default value.
'warning' - Show all warnings and errors. Any message related to possibly incorrect or unexpected events will be shown.
'info' - Show informative messages and output during processing. This is in addition to warnings and errors. This will produce more output, use this for initial debugging.
'debug' - Show everything, including debugging information. Produces a lot of output.

[RonnyCHL]

PR: #7

What's fixed:

"x new species detected today!" - uses pattern matching
"Week 05 Report" → "Vecka 05 Rapport" - uses pattern matching
"* percentages are calculated relative to week 4" - uses pattern matching
All Advanced Settings descriptions (privacy, ffmpeg, sox, log levels)
About Species Stats:
This page uses Streamlit (a Python web framework) running in an iframe. JavaScript cannot translate content inside Streamlit apps - this would need server-side changes.

After merging, please run:

cd ~/Translate && git pull && ./scripts/install.sh sv
Then do a hard refresh in the browser (Ctrl+Shift+R).

[Svardsten53]

If I remember correct from yesterdays testing everything was fixed except the lines in advanced setting. Today no translation at all works in any browser, but I'll investigate when I have time.