This commit is contained in:
josc146 2023-05-18 20:48:53 +08:00
parent 75075d6483
commit 5078a884b0
13 changed files with 252 additions and 59 deletions

110
frontend/i18nally.json Normal file
View File

@ -0,0 +1,110 @@
{
"version": "1.2",
"profiles": [
{
"id": "e4cca065-e0f7-49ce-a400-75dfba1270eb",
"name": "Default",
"keyNamingPattern": "NATURAL_LANGUAGE_PATTERN",
"sink": {
"id": "93a27d2a-ff09-4608-ba13-0c08bc34c2dc",
"type": "singleFile",
"pathToFile": "$PROJECT_DIR$/frontend/src/_locales/zh-hans/main.json",
"fileType": "json",
"nestingType": "DISABLED",
"placeholderFormatterName": "I18NEXT"
},
"sources": [
{
"id": "efa45b89-aed3-4bc2-97d0-fa6147d13f8c",
"type": "jsx",
"scopeName": "Project Files",
"scopePattern": "",
"defaultReplacementTemplate": "t(\"%key%\")",
"attributeReplacementTemplate": "",
"inlineTagsReplacementTemplate": "",
"recognizedReplacementTemplates": [],
"inlineTagNames": [
"small",
"tt",
"big",
"sub",
"img",
"strong",
"code",
"data",
"samp",
"wbr",
"del",
"Page",
"slot",
"sup",
"br",
"output",
"abbr",
"a",
"b",
"acronym",
"bdi",
"meter",
"var",
"em",
"i",
"label",
"bdo",
"kbd",
"dfn",
"ins",
"ruby",
"input",
"q",
"s",
"u",
"cite",
"progress",
"time",
"mark",
"span"
],
"translatableAttributeNames": [
"alt",
"placeholder",
"label",
"title",
"aria-label",
"desc",
"text"
],
"skipDefaultNamespace": false,
"inlineTagHandler": "NONE"
}
]
}
],
"ignores": {
"valuesInProject": [
"use strict"
],
"valuesInFile": {},
"filesInProject": [],
"unignoredFunctionNames": [],
"unignoredFunctionArguments": {},
"ignoredArrayKeys": [
"template",
"date",
"dateFormat",
"el",
"query",
"type",
"sql",
"layout",
"component",
"condition",
"name",
"selector",
"id",
"class",
"key",
"middleware"
]
}
}

View File

@ -31,8 +31,10 @@ import {useMediaQuery} from 'usehooks-ts';
import {ToastContainer} from 'react-toastify';
import commonStore from './stores/commonStore';
import {observer} from 'mobx-react-lite';
import {useTranslation} from 'react-i18next';
const App: FC = observer(() => {
const {t} = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const mq = useMediaQuery('(min-width: 640px)');
@ -57,7 +59,7 @@ const App: FC = observer(() => {
>
{pages.filter(page => page.top).map(({label, path, icon}, index) => (
<Tab icon={icon} key={`${path}-${index}`} value={path}>
{mq && label}
{mq && t(label)}
</Tab>
))}
</TabList>
@ -70,7 +72,7 @@ const App: FC = observer(() => {
>
{pages.filter(page => !page.top).map(({label, path, icon}, index) => (
<Tab icon={icon} key={`${path}-${index}`} value={path}>
{mq && label}
{mq && t(label)}
</Tab>
))}
</TabList>

View File

@ -1,3 +1,55 @@
{
"Settings": "设置"
"Home": "主页",
"Train": "训练",
"About": "关于",
"Settings": "设置",
"Go to chat page": "前往聊天页",
"Manage your configs": "管理你的配置",
"Manage models": "管理模型",
"Run": "运行",
"Starting": "启动中",
"Loading": "读取模型中",
"Stop": "停止",
"Enable High Precision For Last Layer": "输出层使用高精度",
"Stored Layers": "载入显存层数",
"Precision": "精度",
"Device": "设备",
"Convert model with these configs": "用这些设置转换模型",
"Manage Models": "管理模型",
"Model": "模型",
"Model Parameters": "模型参数",
"Frequency Penalty *": "Frequency Penalty *",
"Presence Penalty *": "Presence Penalty *",
"Top_P *": "Top_P *",
"Temperature *": "Temperature *",
"Max Response Token *": "最大响应 Token *",
"API Port": "API 端口",
"Hover your mouse over the text to view a detailed description. Settings marked with * will take effect immediately after being saved.": "把鼠标悬停在文本上查看详细描述. 标记了星号 * 的设置在保存后会立即生效.",
"Default API Parameters": "默认 API 参数",
"Provide JSON file URLs for the models manifest. Separate URLs with semicolons. The \"models\" field in JSON files will be parsed into the following table.": "填写模型描述的 JSON 文件地址. 地址间用分号分隔. JSON 文件内的 \"models\" 字段会被分析进下表.",
"Config Name": "配置名",
"Refresh": "刷新",
"Save Config": "保存配置",
"Model Source Manifest List": "模型源",
"Models": "模型",
"Delete Config": "删除配置",
"Help": "帮助",
"Version": "版本",
"New Config": "新建配置",
"Open Url": "打开网页",
"Download": "下载",
"Open Folder": "打开文件夹",
"Configs": "配置",
"Automatic Updates Check": "自动检查更新",
"Introduction": "介绍",
"Dark Mode": "深色模式",
"Language": "语言",
"In Development": "开发中",
"Chat": "聊天",
"Convert": "转换",
"Actions": "动作",
"Last updated": "上次更新",
"Desc": "描述",
"Size": "文件大小",
"File": "文件"
}

View File

@ -7,6 +7,7 @@ import {exit, readRoot, switchModel, updateConfig} from '../apis';
import {toast} from 'react-toastify';
import manifest from '../../../manifest.json';
import {getStrategy} from '../utils';
import {useTranslation} from 'react-i18next';
const mainButtonText = {
[ModelStatus.Offline]: 'Run',
@ -70,6 +71,8 @@ const onClickMainButton = async () => {
};
export const RunButton: FC<{ onClickRun?: MouseEventHandler }> = observer(({onClickRun}) => {
const {t} = useTranslation();
return (
<Button disabled={commonStore.modelStatus === ModelStatus.Starting} appearance="primary" size="large"
onClick={async (e) => {
@ -77,7 +80,7 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler }> = observer(({onCl
await onClickRun?.(e);
await onClickMainButton();
}}>
{mainButtonText[commonStore.modelStatus]}
{t(mainButtonText[commonStore.modelStatus])}
</Button>
);
});

View File

@ -2,7 +2,7 @@ import {FC, ReactElement} from 'react';
import {Card, Text} from '@fluentui/react-components';
export const Section: FC<{
title: string; desc?: string, content: ReactElement, outline?: boolean
title: string; desc?: string | null, content: ReactElement, outline?: boolean
}> =
({title, desc, content, outline = true}) => {
return (

View File

@ -2,7 +2,7 @@ import React, {FC, MouseEventHandler, ReactElement} from 'react';
import {Button, Tooltip} from '@fluentui/react-components';
export const ToolTipButton: FC<{
text?: string, desc: string, icon?: ReactElement, onClick?: MouseEventHandler
text?: string | null, desc: string, icon?: ReactElement, onClick?: MouseEventHandler
}> = ({
text,
desc,

View File

@ -1,10 +1,13 @@
import React, {FC} from 'react';
import {Text} from '@fluentui/react-components';
import {useTranslation} from 'react-i18next';
export const About: FC = () => {
const {t} = useTranslation();
return (
<div className="flex flex-col box-border gap-5 p-2">
<Text size={600}>In Development</Text>
<Text size={600}>{t('In Development')}</Text>
</div>
);
};

View File

@ -1,10 +1,13 @@
import React, {FC} from 'react';
import {Page} from '../components/Page';
import {PresenceBadge} from '@fluentui/react-components';
import {useTranslation} from 'react-i18next';
export const Chat: FC = () => {
const {t} = useTranslation();
return (
<Page title="Chat" content={
<Page title={t('Chat')} content={
<div className="flex flex-col gap-2 overflow-hidden">
<PresenceBadge/>
</div>

View File

@ -16,8 +16,10 @@ import {updateConfig} from '../apis';
import {ConvertModel} from '../../wailsjs/go/backend_golang/App';
import manifest from '../../../manifest.json';
import {getStrategy, refreshLocalModels} from '../utils';
import {useTranslation} from 'react-i18next';
export const Configs: FC = observer(() => {
const {t} = useTranslation();
const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);
const [selectedConfig, setSelectedConfig] = React.useState(commonStore.modelConfigs[selectedIndex]);
@ -66,7 +68,7 @@ export const Configs: FC = observer(() => {
};
return (
<Page title="Configs" content={
<Page title={t('Configs')} content={
<div className="flex flex-col gap-2 overflow-hidden">
<div className="flex gap-2 items-center">
<Dropdown style={{minWidth: 0}} className="grow" value={commonStore.modelConfigs[selectedIndex].name}
@ -80,29 +82,29 @@ export const Configs: FC = observer(() => {
<Option key={index} value={index.toString()}>{config.name}</Option>
)}
</Dropdown>
<ToolTipButton desc="New Config" icon={<AddCircle20Regular/>} onClick={() => {
<ToolTipButton desc={t('New Config')} icon={<AddCircle20Regular/>} onClick={() => {
commonStore.createModelConfig();
updateSelectedIndex(commonStore.modelConfigs.length - 1);
}}/>
<ToolTipButton desc="Delete Config" icon={<Delete20Regular/>} onClick={() => {
<ToolTipButton desc={t('Delete Config')} icon={<Delete20Regular/>} onClick={() => {
commonStore.deleteModelConfig(selectedIndex);
updateSelectedIndex(Math.min(selectedIndex, commonStore.modelConfigs.length - 1));
}}/>
<ToolTipButton desc="Save Config" icon={<Save20Regular/>} onClick={onClickSave}/>
<ToolTipButton desc={t('Save Config')} icon={<Save20Regular/>} onClick={onClickSave}/>
</div>
<div className="flex items-center gap-4">
<Label>Config Name</Label>
<Label>{t('Config Name')}</Label>
<Input className="grow" value={selectedConfig.name} onChange={(e, data) => {
setSelectedConfigName(data.value);
}}/>
</div>
<div className="flex flex-col gap-2 overflow-y-hidden">
<Section
title="Default API Parameters"
desc="Hover your mouse over the text to view a detailed description. Settings marked with * will take effect immediately after being saved."
title={t('Default API Parameters')}
desc={t('Hover your mouse over the text to view a detailed description. Settings marked with * will take effect immediately after being saved.')}
content={
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
<Labeled label="API Port" desc={`127.0.0.1:${selectedConfig.apiParameters.apiPort}`} content={
<Labeled label={t('API Port')} desc={`127.0.0.1:${selectedConfig.apiParameters.apiPort}`} content={
<NumberInput value={selectedConfig.apiParameters.apiPort} min={1} max={65535} step={1}
onChange={(e, data) => {
setSelectedConfigApiParams({
@ -110,7 +112,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Max Response Token *" content={
<Labeled label={t('Max Response Token *')} content={
<ValuedSlider value={selectedConfig.apiParameters.maxResponseToken} min={100} max={8100} step={400}
input
onChange={(e, data) => {
@ -119,7 +121,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Temperature *" content={
<Labeled label={t('Temperature *')} content={
<ValuedSlider value={selectedConfig.apiParameters.temperature} min={0} max={2} step={0.1} input
onChange={(e, data) => {
setSelectedConfigApiParams({
@ -127,7 +129,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Top_P *" content={
<Labeled label={t('Top_P *')} content={
<ValuedSlider value={selectedConfig.apiParameters.topP} min={0} max={1} step={0.1} input
onChange={(e, data) => {
setSelectedConfigApiParams({
@ -135,7 +137,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Presence Penalty *" content={
<Labeled label={t('Presence Penalty *')} content={
<ValuedSlider value={selectedConfig.apiParameters.presencePenalty} min={-2} max={2} step={0.1} input
onChange={(e, data) => {
setSelectedConfigApiParams({
@ -143,7 +145,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Frequency Penalty *" content={
<Labeled label={t('Frequency Penalty *')} content={
<ValuedSlider value={selectedConfig.apiParameters.frequencyPenalty} min={-2} max={2} step={0.1} input
onChange={(e, data) => {
setSelectedConfigApiParams({
@ -155,10 +157,10 @@ export const Configs: FC = observer(() => {
}
/>
<Section
title="Model Parameters"
title={t('Model Parameters')}
content={
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
<Labeled label="Model" content={
<Labeled label={t('Model')} content={
<div className="flex gap-2 grow">
<Select style={{minWidth: 0}} className="grow"
value={selectedConfig.modelParameters.modelName}
@ -171,12 +173,12 @@ export const Configs: FC = observer(() => {
modelItem.isLocal && <option key={index} value={modelItem.name}>{modelItem.name}</option>
)}
</Select>
<ToolTipButton desc="Manage Models" icon={<DataUsageSettings20Regular/>} onClick={() => {
<ToolTipButton desc={t('Manage Models')} icon={<DataUsageSettings20Regular/>} onClick={() => {
navigate({pathname: '/models'});
}}/>
</div>
}/>
<ToolTipButton text="Convert" desc="Convert model with these configs" onClick={() => {
<ToolTipButton text={t('Convert')} desc={t('Convert model with these configs')} onClick={() => {
const modelPath = `${manifest.localModelDir}/${selectedConfig.modelParameters.modelName}`;
const strategy = getStrategy(selectedConfig);
const newModelPath = modelPath + '-' + strategy.replace(/[> *+]/g, '-');
@ -188,7 +190,7 @@ export const Configs: FC = observer(() => {
toast(`Convert Failed - ${e}`, {type: 'error'});
});
}}/>
<Labeled label="Device" content={
<Labeled label={t('Device')} content={
<Dropdown style={{minWidth: 0}} className="grow" value={selectedConfig.modelParameters.device}
selectedOptions={[selectedConfig.modelParameters.device]}
onOptionSelect={(_, data) => {
@ -202,7 +204,7 @@ export const Configs: FC = observer(() => {
<Option>CUDA</Option>
</Dropdown>
}/>
<Labeled label="Precision" content={
<Labeled label={t('Precision')} content={
<Dropdown style={{minWidth: 0}} className="grow" value={selectedConfig.modelParameters.precision}
selectedOptions={[selectedConfig.modelParameters.precision]}
onOptionSelect={(_, data) => {
@ -217,7 +219,7 @@ export const Configs: FC = observer(() => {
<Option>fp32</Option>
</Dropdown>
}/>
<Labeled label="Stored Layers" content={
<Labeled label={t('Stored Layers')} content={
<ValuedSlider value={selectedConfig.modelParameters.storedLayers} min={0}
max={selectedConfig.modelParameters.maxStoredLayers} step={1} input
onChange={(e, data) => {
@ -226,7 +228,7 @@ export const Configs: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Enable High Precision For Last Layer" content={
<Labeled label={t('Enable High Precision For Last Layer')} content={
<Switch checked={selectedConfig.modelParameters.enableHighPrecisionForLastLayer}
onChange={(e, data) => {
setSelectedConfigModelParams({

View File

@ -13,6 +13,7 @@ import {observer} from 'mobx-react-lite';
import {RunButton} from '../components/RunButton';
import manifest from '../../../manifest.json';
import {BrowserOpenURL} from '../../wailsjs/runtime';
import {useTranslation} from 'react-i18next';
type NavCard = {
label: string;
@ -49,6 +50,7 @@ const navCards: NavCard[] = [
];
export const Home: FC = observer(() => {
const {t} = useTranslation();
const navigate = useNavigate();
const onClickNavCard = (path: string) => {
@ -59,22 +61,17 @@ export const Home: FC = observer(() => {
<div className="flex flex-col justify-between h-full">
<img className="rounded-xl select-none hidden sm:block" src={banner}/>
<div className="flex flex-col gap-2">
<Text size={600} weight="medium">Introduction</Text>
<Text size={600} weight="medium">{t('Introduction')}</Text>
<div className="h-40 overflow-y-auto p-1">
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).
{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>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
{navCards.map(({label, path, icon, desc}, index) => (
<CompoundButton icon={icon} secondaryContent={desc} key={`${path}-${index}`} value={path}
<CompoundButton icon={icon} secondaryContent={t(desc)} key={`${path}-${index}`} value={path}
size="large" onClick={() => onClickNavCard(path)}>
{label}
{t(label)}
</CompoundButton>
))}
</div>
@ -96,8 +93,8 @@ export const Home: FC = observer(() => {
</div>
</div>
<div className="flex gap-4 items-end">
Version: {manifest.version}
<Link onClick={() => BrowserOpenURL('https://github.com/josStorer/RWKV-Runner')}>Help</Link>
{t('Version')}: {manifest.version}
<Link onClick={() => BrowserOpenURL('https://github.com/josStorer/RWKV-Runner')}>{t('Help')}</Link>
</div>
</div>
</div>

View File

@ -22,6 +22,7 @@ import manifest from '../../../manifest.json';
import {toast} from 'react-toastify';
import {Page} from '../components/Page';
import {refreshModels, saveConfigs} from '../utils';
import {useTranslation} from 'react-i18next';
const columns: TableColumnDefinition<ModelSourceItem>[] = [
createTableColumn<ModelSourceItem>({
@ -30,7 +31,9 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.name.localeCompare(b.name);
},
renderHeaderCell: () => {
return 'File';
const {t} = useTranslation();
return t('File');
},
renderCell: (item) => {
return (
@ -49,12 +52,18 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return 0;
},
renderHeaderCell: () => {
return 'Desc';
const {t} = useTranslation();
return t('Desc');
},
renderCell: (item) => {
const lang: string = commonStore.settings.language;
return (
<TableCellLayout>
{item.desc && item.desc['en']}
{item.desc &&
(lang in item.desc ? item.desc[lang] :
('en' in item.desc && item.desc['en']))}
</TableCellLayout>
);
}
@ -65,7 +74,9 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.size - b.size;
},
renderHeaderCell: () => {
return 'Size';
const {t} = useTranslation();
return t('Size');
},
renderCell: (item) => {
return (
@ -85,7 +96,9 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return b.lastUpdatedMs - a.lastUpdatedMs;
},
renderHeaderCell: () => {
return 'Last updated';
const {t} = useTranslation();
return t('Last updated');
},
renderCell: (item) => {
@ -98,24 +111,28 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.isDownloading ? 0 : a.isLocal ? -1 : 1;
},
renderHeaderCell: () => {
return 'Actions';
const {t} = useTranslation();
return t('Actions');
},
renderCell: (item) => {
const {t} = useTranslation();
return (
<TableCellLayout>
<div className="flex gap-1">
{
item.isLocal &&
<ToolTipButton desc="Open Folder" icon={<Folder20Regular/>} onClick={() => {
<ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular/>} onClick={() => {
OpenFileFolder(`./${manifest.localModelDir}/${item.name}`);
}}/>
}
{item.downloadUrl && !item.isLocal &&
<ToolTipButton desc="Download" icon={<ArrowDownload20Regular/>} onClick={() => {
<ToolTipButton desc={t('Download')} icon={<ArrowDownload20Regular/>} onClick={() => {
toast(`Downloading ${item.name}`);
DownloadFile(`./${manifest.localModelDir}/${item.name}`, item.downloadUrl!);
}}/>}
{item.url && <ToolTipButton desc="Open Url" icon={<Open20Regular/>} onClick={() => {
{item.url && <ToolTipButton desc={t('Open Url')} icon={<Open20Regular/>} onClick={() => {
BrowserOpenURL(item.url!);
}}/>}
</div>
@ -126,20 +143,21 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
];
export const Models: FC = observer(() => {
const {t} = useTranslation();
return (
<Page title="Models" content={
<Page title={t('Models')} content={
<div className="flex flex-col gap-2 overflow-hidden">
<div className="flex flex-col gap-1">
<div className="flex justify-between">
<Text weight="medium">Model Source Manifest List</Text>
<ToolTipButton desc="Refresh" icon={<ArrowClockwise20Regular/>} onClick={() => {
<Text weight="medium">{t('Model Source Manifest List')}</Text>
<ToolTipButton desc={t('Refresh')} icon={<ArrowClockwise20Regular/>} onClick={() => {
refreshModels(false);
saveConfigs();
}}/>
</div>
<Text size={100}>
Provide JSON file URLs for the models manifest. Separate URLs with semicolons. The "models"
field in JSON files will be parsed into the following table.
{t('Provide JSON file URLs for the models manifest. Separate URLs with semicolons. The "models" field in JSON files will be parsed into the following table.')}
</Text>
<Textarea size="large" resize="vertical"
value={commonStore.modelSourceManifestList}

View File

@ -14,7 +14,7 @@ export const Settings: FC = observer(() => {
return (
<Page title={t('Settings')} content={
<div className="flex flex-col gap-2 overflow-hidden">
<Labeled label="Language" flex spaceBetween content={
<Labeled label={t('Language')} flex spaceBetween content={
<Dropdown style={{minWidth: 0}} listbox={{style: {minWidth: 0}}}
value={Languages[commonStore.settings.language]}
selectedOptions={[Languages[commonStore.settings.language]]}
@ -33,7 +33,7 @@ export const Settings: FC = observer(() => {
}
</Dropdown>
}/>
<Labeled label="Dark Mode" flex spaceBetween content={
<Labeled label={t('Dark Mode')} flex spaceBetween content={
<Switch checked={commonStore.settings.darkMode}
onChange={(e, data) => {
commonStore.setSettings({
@ -41,7 +41,7 @@ export const Settings: FC = observer(() => {
});
}}/>
}/>
<Labeled label="Automatic Updates Check" flex spaceBetween content={
<Labeled label={t('Automatic Updates Check')} flex spaceBetween content={
<Switch checked={commonStore.settings.autoUpdatesCheck}
onChange={(e, data) => {
commonStore.setSettings({

View File

@ -1,10 +1,13 @@
import React, {FC} from 'react';
import {Text} from '@fluentui/react-components';
import {useTranslation} from 'react-i18next';
export const Train: FC = () => {
const {t} = useTranslation();
return (
<div className="flex flex-col box-border gap-5 p-2">
<Text size={600}>In Development</Text>
<Text size={600}>{t('In Development')}</Text>
</div>
);
};