update

frontend/src/_locales/i18n-react.ts

@@ -0,0 +1,13 @@
+import i18n, {changeLanguage} from 'i18next';
+import {initReactI18next} from 'react-i18next';
+import {resources} from './resources';
+import {getNavigatorLanguage} from '../utils';
+
+i18n.use(initReactI18next).init({
+  resources,
+  interpolation: {
+    escapeValue: false // not needed for react as it escapes by default
+  }
+}).then(() => {
+  changeLanguage(getNavigatorLanguage());
+});

frontend/src/_locales/i18n.ts

@@ -0,0 +1,9 @@
+import i18n, {changeLanguage} from 'i18next';
+import {resources} from './resources';
+import {getNavigatorLanguage} from '../utils';
+
+i18n.init({
+  resources
+}).then(() => {
+  changeLanguage(getNavigatorLanguage());
+});

frontend/src/_locales/resources.ts

@@ -0,0 +1,37 @@
+import zhHans from './zh-hans/main.json'
+
+export const resources = {
+  zh: {
+    translation: zhHans
+  }
+  // de: {
+  //   translation: de,
+  // },
+  // es: {
+  //   translation: es,
+  // },
+  // fr: {
+  //   translation: fr,
+  // },
+  // in: {
+  //   translation: inTrans,
+  // },
+  // it: {
+  //   translation: it,
+  // },
+  // ja: {
+  //   translation: ja,
+  // },
+  // ko: {
+  //   translation: ko,
+  // },
+  // pt: {
+  //   translation: pt,
+  // },
+  // ru: {
+  //   translation: ru,
+  // },
+  // zhHant: {
+  //   translation: zhHant,
+  // },
+}

frontend/src/_locales/zh-hans/main.json

@@ -0,0 +1,3 @@
+{
+  "Settings": "设置"
+}

frontend/src/main.tsx

@@ -5,6 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import App from './App';
 import {HashRouter} from 'react-router-dom';
 import {startup} from './startup';
+import './_locales/i18n-react';
 
 startup().then(() => {
   const container = document.getElementById('root');

frontend/src/pages/Settings.tsx

@@ -4,21 +4,33 @@ import {Dropdown, Option, Switch} from '@fluentui/react-components';
 import {Labeled} from '../components/Labeled';
 import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
+import {UpdateApp} from '../../wailsjs/go/backend_golang/App';
+import {useTranslation} from 'react-i18next';
+import {Language, Languages} from '../utils';
 
 export const Settings: FC = observer(() => {
+  const {t, i18n} = useTranslation();
+
   return (
-    <Page title="Settings" content={
+    <Page title={t('Settings')} content={
       <div className="flex flex-col gap-2 overflow-hidden">
         <Labeled label="Language" flex spaceBetween content={
           <Dropdown style={{minWidth: 0}} listbox={{style: {minWidth: 0}}}
-                    value="English"
-                    selectedOptions={['English']}
+                    value={Languages[commonStore.settings.language]}
+                    selectedOptions={[Languages[commonStore.settings.language]]}
                     onOptionSelect={(_, data) => {
-                      if (data.optionText) {
+                      if (data.optionValue) {
+                        const lang = data.optionValue as Language;
+                        commonStore.setSettings({
+                          language: lang
+                        });
+                        i18n.changeLanguage(lang);
                       }
                     }}>
-            <Option>English</Option>
-            <Option>简体中文</Option>
+            {
+              Object.entries(Languages).map(([langKey, desc]) =>
+                <Option key={langKey} value={langKey}>{desc}</Option>)
+            }
           </Dropdown>
         }/>
         <Labeled label="Dark Mode" flex spaceBetween content={
@@ -32,6 +44,11 @@ export const Settings: FC = observer(() => {
         <Labeled label="Automatic Updates Check" flex spaceBetween content={
           <Switch checked={commonStore.settings.autoUpdatesCheck}
                   onChange={(e, data) => {
+                    commonStore.setSettings({
+                      autoUpdatesCheck: data.checked
+                    });
+                    if (data.checked)
+                      UpdateApp('http://localhost:34115/dist/RWKV-Runner.exe'); //TODO
                   }}/>
         }/>
       </div>

frontend/src/stores/commonStore.ts

@@ -1,5 +1,5 @@
 import {makeAutoObservable} from 'mobx';
-import {getNavigatorLanguage, isSystemLightMode, saveConfigs, Settings} from '../utils';
+import {getNavigatorLanguage, isSystemLightMode, Language, saveConfigs, Settings} from '../utils';
 import {WindowSetDarkTheme, WindowSetLightTheme} from '../../wailsjs/runtime';
 
 export enum ModelStatus {
@@ -84,7 +84,7 @@ class CommonStore {
   modelSourceManifestList: string = 'https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner/manifest.json;';
   modelSourceList: ModelSourceItem[] = [];
   settings: Settings = {
-    language: getNavigatorLanguage(),
+    language: getNavigatorLanguage() as Language,
     darkMode: !isSystemLightMode(),
     autoUpdatesCheck: true
   };

frontend/src/utils/index.ts

@@ -2,12 +2,19 @@ import {ListDirFiles, ReadJson, SaveJson} from '../../wailsjs/go/backend_golang/
 import manifest from '../../../manifest.json';
 import commonStore, {ModelConfig, ModelParameters, ModelSourceItem} from '../stores/commonStore';
 
+export const Languages = {
+  dev: 'English', // i18n default
+  zh: '简体中文'
+};
+
+export type Language = keyof typeof Languages;
+
 export type Cache = {
   models: ModelSourceItem[]
 }
 
 export type Settings = {
-  language: string,
+  language: Language,
   darkMode: boolean
   autoUpdatesCheck: boolean
 }