i18n
This commit is contained in:
parent
75075d6483
commit
5078a884b0
110
frontend/i18nally.json
Normal file
110
frontend/i18nally.json
Normal 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"
|
||||
]
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
@ -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": "文件"
|
||||
}
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
@ -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 (
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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({
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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({
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user