remote text

frontend/src/components/MarkdownRender.tsx

@@ -5,6 +5,21 @@ import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 import {FC} from 'react';
 import {ReactMarkdownOptions} from 'react-markdown/lib/react-markdown';
+import {BrowserOpenURL} from '../../wailsjs/runtime';
+
+const Hyperlink: FC<any> = ({href, children}) => {
+  return (
+    <span
+      style={{color: '#8ab4f8', cursor: 'pointer'}}
+      onClick={() => {
+        BrowserOpenURL(href);
+      }}
+    >
+      {/*@ts-ignore*/}
+      {children}
+    </span>
+  );
+};
 
 export const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
   return (
@@ -21,6 +36,9 @@ export const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
             }
           ]
         ]}
+        components={{
+          a: Hyperlink
+        }}
       >
         {props.children}
       </ReactMarkdown>

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();

frontend/src/startup.ts

@@ -5,14 +5,27 @@ import {getStatus} from './apis';
 
 export async function startup() {
   downloadProgramFiles();
+
+  initRemoteText();
   initCache();
   await initConfig();
+
   getStatus(500).then(status => {
     if (status)
       commonStore.setModelStatus(status);
   });
 }
 
+async function initRemoteText() {
+  await fetch('https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner/manifest.json', {cache: 'no-cache'})
+    .then(r => r.json()).then((data) => {
+      if (data.introduction)
+        commonStore.setIntroduction(data.introduction);
+      if (data.about)
+        commonStore.setAbout(data.about);
+    });
+}
+
 async function initConfig() {
   await ReadJson('config.json').then((configData: LocalConfig) => {
     if (configData.modelSourceManifestList)

frontend/src/stores/commonStore.ts

@@ -1,6 +1,7 @@
 import {makeAutoObservable} from 'mobx';
 import {getUserLanguage, isSystemLightMode, saveConfigs, Settings} from '../utils';
 import {WindowSetDarkTheme, WindowSetLightTheme} from '../../wailsjs/runtime';
+import manifest from '../../../manifest.json';
 
 export enum ModelStatus {
   Offline,
@@ -88,6 +89,8 @@ class CommonStore {
     darkMode: !isSystemLightMode(),
     autoUpdatesCheck: true
   };
+  introduction: { [lang: string]: string } = manifest.introduction;
+  about: { [lang: string]: string } = manifest.about;
 
   getCurrentModelConfig = () => {
     return this.modelConfigs[this.currentModelConfigIndex];
@@ -157,6 +160,14 @@ class CommonStore {
     if (saveConfig)
       saveConfigs();
   };
+
+  setIntroduction = (value: { [lang: string]: string }) => {
+    this.introduction = value;
+  };
+
+  setAbout = (value: { [lang: string]: string }) => {
+    this.about = value;
+  };
 }
 
 export default new CommonStore();

manifest.json

@@ -1,5 +1,13 @@
 {
   "version": "1.0.0",
+  "introduction": {
+    "en": "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).",
+    "zh": "RWKV是具有Transformer级别LLM性能的RNN，也可以像GPT Transformer一样直接进行训练（可并行化）。而且它是100% attention-free的。你只需在位置t处获得隐藏状态即可计算位置t + 1处的状态。你可以使用“GPT”模式快速计算用于“RNN”模式的隐藏状态。<br/>因此，它将RNN和Transformer的优点结合起来 - 高性能、快速推理、节省显存、快速训练、“无限”上下文长度以及免费的语句嵌入（使用最终隐藏状态）。"
+  },
+  "about": {
+    "en": "<div align=\"center\">\n\nProject Source Code:\nhttps://github.com/josStorer/RWKV-Runner\nAuthor: [@josStorer](https://github.com/josStorer)\n\nRelated Repositories:\nRWKV-4-Raven: https://huggingface.co/BlinkDL/rwkv-4-raven/tree/main\nChatRWKV: https://github.com/BlinkDL/ChatRWKV\nRWKV-LM: https://github.com/BlinkDL/RWKV-LM\n\n</div>",
+    "zh": "<div align=\"center\">\n\n本项目源码:\nhttps://github.com/josStorer/RWKV-Runner\n作者: [@josStorer](https://github.com/josStorer)\n\n相关仓库:\nRWKV-4-Raven: https://huggingface.co/BlinkDL/rwkv-4-raven/tree/main\nChatRWKV: https://github.com/BlinkDL/ChatRWKV\nRWKV-LM: https://github.com/BlinkDL/RWKV-LM\n\n</div>"
+  },
   "localModelDir": "models",
   "programFiles": [
     {