Add zh-CN & zh-TW support when server down. (#4324)

When the client fails to connect to NiceGUI, a prompt will appear in the
lower left corner of the client: `Connection Lost. Trying to
reconnect...`. This is not difficult to understand for those who know
English. However, for those who do not understand English, it
undoubtedly reduces the user experience.

This pull request adds support for Simplified Chinese and Traditional
Chinese. After using `ui.run(language='zh-CN')` and the browser is fully
loaded, if the server is closed, the correct display on the user's
browser will be `连接丢失` instead of `Connection Lost`. If an undefined
language is set， the default English prompt message will be displayed. I
am still thinking of a better way for developers to customize this
content.

> ui.run(language='zh-CN')

![zh-CN](https://github.com/user-attachments/assets/7c38efa1-4798-465d-b68a-484d5b2f302a)

> ui.run(language='zh-TW')

![zh-TW](https://github.com/user-attachments/assets/12ed2f86-8dc8-493f-89a6-8fe948fd430f)

> ui.run() # Specify another language or do not specify any language

![en-US](https://github.com/user-attachments/assets/0d1034ac-26c1-402d-a960-82196f951979)

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

nicegui/client.py

@@ -23,6 +23,7 @@ from .javascript_request import JavaScriptRequest
 from .logging import log
 from .observables import ObservableDict
 from .outbox import Outbox
+from .translations import translations
 from .version import __version__
 
 if TYPE_CHECKING:
@@ -157,6 +158,7 @@ class Client:
                 'favicon_url': get_favicon_url(self.page, prefix),
                 'dark': str(self.page.resolve_dark()),
                 'language': self.page.resolve_language(),
+                'translations': translations[self.page.resolve_language()],
                 'prefix': prefix,
                 'tailwind': core.app.config.tailwind,
                 'prod_js': core.app.config.prod_js,

nicegui/templates/index.html

@@ -38,8 +38,8 @@
 
     <div id="app"></div>
     <div id="popup" aria-hidden="true">
-      <span>Connection lost.</span>
-      <span>Trying to reconnect...</span>
+      <span>{{ translations.connection_lost }}</span>
+      <span>{{ translations.trying_to_reconnect }}</span>
     </div>
     <script type="module">
       const app = createApp(parseElements(String.raw`{{ elements | safe }}`), {

nicegui/translations.py

@@ -0,0 +1,42 @@
+translations = {
+    'en-US': {
+        'connection_lost': 'Connection lost.',
+        'trying_to_reconnect': 'Trying to reconnect...'
+    },
+    'zh-CN': {
+        'connection_lost': '连接丢失',
+        'trying_to_reconnect': '正在尝试重新连接...'
+    },
+    'zh-TW': {
+        'connection_lost': '連線丟失',
+        'trying_to_reconnect': '正在嘗試重新連線...'
+    },
+    'ja-JP': {
+        'connection_lost': '接続が切断されました',
+        'trying_to_reconnect': '再接続を試みています...'
+    },
+    'ko-KR': {
+        'connection_lost': '연결이 끊어졌습니다',
+        'trying_to_reconnect': '다시 연결하는 중...'
+    },
+    'fr-FR': {
+        'connection_lost': 'Connexion perdue',
+        'trying_to_reconnect': 'Tentative de reconnexion...'
+    },
+    'de-DE': {
+        'connection_lost': 'Verbindung verloren',
+        'trying_to_reconnect': 'Versuche erneut zu verbinden...'
+    },
+    'it-IT': {
+        'connection_lost': 'Connessione persa',
+        'trying_to_reconnect': 'Tentativo di riconnessione...'
+    },
+    'es-ES': {
+        'connection_lost': 'Conexión perdida',
+        'trying_to_reconnect': 'Intentando reconectar...'
+    },
+    'ru-RU': {
+        'connection_lost': 'Соединение потеряно',
+        'trying_to_reconnect': 'Попытка переподключения...'
+    }
+}