Skip to content

feat: add client-side dynamic i18n support to usage dashboard#2

Open
htqxd wants to merge 1 commit into
zhanglunet:mainfrom
htqxd:feature/i18n-dashboard
Open

feat: add client-side dynamic i18n support to usage dashboard#2
htqxd wants to merge 1 commit into
zhanglunet:mainfrom
htqxd:feature/i18n-dashboard

Conversation

@htqxd
Copy link
Copy Markdown

@htqxd htqxd commented May 31, 2026

Summary

Integrates client-side dynamic internationalization (i18n) for the single-page dashboard (DASHBOARD_HTML in usage_dashboard.py), supporting Chinese (default), Vietnamese, and English.

Key enhancements:

  • Client-side i18n: The translation dictionaries and localization logic are implemented via client-side JavaScript, maintaining the self-contained, offline capability of the single-file
    application.
  • Auto-Refresh Protection: Wrapped all dynamically injected UI strings in the load() function with the translation helper t(). This prevents the 30-second periodic database refresh loop from
    reverting translated tables back to Chinese.
  • Canvas & Number Formatting: Updates custom 2D canvas labels (including the 'unknown' model fallback) to match the selected language dynamically. Standardizes numeric formatting (e.g., thousands
    separators) using Intl.NumberFormat according to the active locale.
  • FOUC (Flash of Untranslated Content) Prevention: Hides the page layout dynamically (opacity: 0) at initialization and restores visibility only after i18n processing is complete, preventing
    visual flashes of the default language.
  • Robustness & Safety: Persists the user's language preference in localStorage. Wrapped storage access in a try-catch block and implemented language validation (ALLOWED_LANGS) to prevent
    frontend crashes in restrictive environments (e.g., private browsing, iframes).

Test plan

  1. Compile the Python script to ensure zero syntax errors:
    python3 -m py_compile usage_dashboard.py
  2. Run the dashboard server locally:
    python3 usage_dashboard.py serve
  3. Open http://127.0.0.1:8320/ in a browser:
    - Verify that the page auto-detects your browser language on the initial load.
    - Change the language using the toolbar selector to Vietnamese, English, and Chinese. Confirm that static headers, KPIs, and table columns translate immediately.
    - Check the horizontal model consumption chart to confirm that the fallback label translates correctly (no English 'unknown' leak).
    - Wait 30 seconds or click "Refresh" to verify that newly loaded table rows do not revert to Chinese.
    - Reload the page (F5) to verify that your selected language persists via localStorage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant