remote text

frontend/src/pages/About.tsx

@@ -1,13 +1,21 @@
 import React, {FC} from 'react';
-import {Text} from '@fluentui/react-components';
 import {useTranslation} from 'react-i18next';
+import {Page} from '../components/Page';
+import MarkdownRender from '../components/MarkdownRender';
+import {observer} from 'mobx-react-lite';
+import commonStore from '../stores/commonStore';
 
-export const About: FC = () => {
+export const About: FC = observer(() => {
   const {t} = useTranslation();
+  const lang: string = commonStore.settings.language;
 
   return (
-    <div className="flex flex-col box-border gap-5 p-2">
-      <Text size={600}>{t('In Development')}</Text>
-    </div>
+    <Page title={t('About')} content={
+      <div className="overflow-y-auto overflow-x-hidden p-1">
+        <MarkdownRender>
+          {lang in commonStore.about ? commonStore.about[lang] : commonStore.about['en']}
+        </MarkdownRender>
+      </div>
+    }/>
   );
-};
+});

frontend/src/pages/Home.tsx

@@ -14,6 +14,8 @@ import manifest from '../../../manifest.json';
 import {BrowserOpenURL} from '../../wailsjs/runtime';
 import {useTranslation} from 'react-i18next';
 import {ConfigSelector} from '../components/ConfigSelector';
+import MarkdownRender from '../components/MarkdownRender';
+import commonStore from '../stores/commonStore';
 
 type NavCard = {
   label: string;
@@ -52,6 +54,7 @@ const navCards: NavCard[] = [
 export const Home: FC = observer(() => {
   const {t} = useTranslation();
   const navigate = useNavigate();
+  const lang: string = commonStore.settings.language;
 
   const onClickNavCard = (path: string) => {
     navigate({pathname: path});
@@ -62,9 +65,10 @@ export const Home: FC = observer(() => {
       <img className="rounded-xl select-none hidden sm:block" src={banner}/>
       <div className="flex flex-col gap-2">
         <Text size={600} weight="medium">{t('Introduction')}</Text>
-        <div className="h-40 overflow-y-auto p-1">
-          {t('RWKV is an RNN with Transformer-level LLM performance, which can also be directly trained like a GPT transformer (parallelizable). And it\'s 100% attention-free. You only need the hidden state at position t to compute the state at position t+1. You can use the "GPT" mode to quickly compute the hidden state for the "RNN" mode. <br/> So it\'s combining the best of RNN and transformer - great performance, fast inference, saves VRAM, fast training, "infinite" ctx_len, and free sentence embedding (using the final hidden state).')}
-          {/*TODO Markdown*/}
+        <div className="h-40 overflow-y-auto overflow-x-hidden p-1">
+          <MarkdownRender>
+            {lang in commonStore.introduction ? commonStore.introduction[lang] : commonStore.introduction['en']}
+          </MarkdownRender>
         </div>
       </div>
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-5">

frontend/src/pages/Models.tsx

@@ -46,10 +46,15 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
   createTableColumn<ModelSourceItem>({
     columnId: 'desc',
     compare: (a, b) => {
-      if (a.desc && b.desc)
-        return a.desc['en'].localeCompare(b.desc['en']);
-      else
-        return 0;
+      const lang: string = commonStore.settings.language;
+
+      if (a.desc && b.desc) {
+        if (lang in a.desc && lang in b.desc)
+          return a.desc[lang].localeCompare(b.desc[lang]);
+        else if ('en' in a.desc && 'en' in b.desc)
+          return a.desc['en'].localeCompare(b.desc['en']);
+      }
+      return 0;
     },
     renderHeaderCell: () => {
       const {t} = useTranslation();