Implement multi-language interface (i18n) support

[anshul23102]

Fixes #1141

Summary

Implements comprehensive internationalization (i18n) support for the QyverixAI interface. Users can now interact with the application in multiple languages with automatic browser language detection and manual selection via settings.

Changes

Library Integration

• i18next: Core translation framework with language detection
• Locale Files: JSON-based translation files for English and Hindi
  • frontend/locales/en.json - English (default)
  • frontend/locales/hi.json - Hindi (हिन्दी)

Core Features

• Auto Language Detection: Detects browser language from navigator.language
• Persistent Preference: Stores language choice in localStorage (qyx_language)
• Manual Override: Language selector in Settings page for explicit language switching
• Fallback System: Defaults to English if language not supported or unavailable

Implementation Files

• frontend/js/i18n-init.js - i18n initialization and core functions:

  • initializeI18n() - Loads locale files and configures i18next
  • setLanguage(lang) - Changes active language
  • t(key) - Helper function for translations in JavaScript
  • updatePageTranslations() - Updates DOM with current language

• frontend/js/language-selector.js - Language selector UI component:

  • Renders dropdown with available languages
  • Integrates with Settings page via id="language-settings"
  • Shows language names in their native scripts (e.g., हिन्दी)

HTML Updates

• Added i18next and language-detector CDN links
• Added script loading for i18n-init.js and language-selector.js
• Support for data-i18n attributes for declarative translation

Translation Keys

Organized hierarchically:

• app.* - Application metadata
• navigation.* - Menu items
• buttons.* - Button labels
• labels.* - Form labels
• messages.* - User feedback messages
• errors.* - Error notifications
• settings.* - Settings page strings
• auth.* - Authentication pages
• shortcuts.* - Keyboard hints

Documentation

• frontend/INTERNATIONALIZATION.md - Complete guide for:
  • Using translations in HTML and JavaScript
  • Adding new languages (step-by-step)
  • Testing and troubleshooting
  • Contributing new languages

Language Support

Currently Shipped:

• ✅ English (en) - Default
• ✅ Hindi (hi) - हिन्दी

Easy to Add (see INTERNATIONALIZATION.md):

• Spanish (es)
• Chinese Simplified (zh)
• Portuguese (pt)
• And more...

Usage Examples

In HTML

<button data-i18n="buttons.submit">Submit</button>
<input placeholder data-i18n="labels.inputCode">

In JavaScript

// Get translation
const text = t('messages.success');

// Change language
setLanguage('hi');

// Get current language
const lang = getCurrentLanguage();

Backward Compatibility

• Existing UI continues to work if translations are not applied
• Graceful fallback to key names if translations fail to load
• No breaking changes to existing JavaScript APIs

Testing

• Verify page loads in browser's default language
• Test manual language switching from Settings
• Check all data-i18n attributes translate correctly
• Verify localStorage persistence across page reloads
• Test with different browser language settings

[anshul23102]

Thank you for reviewing this PR!
The system is built on i18next with JSON-based locale files, making it straightforward for the community to contribute additional language translations.

When you have a moment, please review the changes and consider adding these labels:

• gssoc-approved - to mark this as a GSSoC contribution
• frontend - for frontend changes
• enhancement - as this adds new functionality
• i18n - for internationalization work
• priority: high - if this should be prioritized

Thank you!