code format

This commit is contained in:
josc146
2023-05-22 10:52:06 +08:00
parent 035c6ab8de
commit bbad153ecb
28 changed files with 429 additions and 429 deletions

View File

@@ -1,14 +1,14 @@
import React, {FC} from 'react';
import {useTranslation} from 'react-i18next';
import {Page} from '../components/Page';
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Page } from '../components/Page';
import MarkdownRender from '../components/MarkdownRender';
import {observer} from 'mobx-react-lite';
import { observer } from 'mobx-react-lite';
import commonStore from '../stores/commonStore';
export type AboutContent = { [lang: string]: string }
export const About: FC = observer(() => {
const {t} = useTranslation();
const { t } = useTranslation();
const lang: string = commonStore.settings.language;
return (
@@ -18,6 +18,6 @@ export const About: FC = observer(() => {
{lang in commonStore.about ? commonStore.about[lang] : commonStore.about['en']}
</MarkdownRender>
</div>
}/>
} />
);
});

View File

@@ -734,7 +734,7 @@ export const Configs: FC = observer(() => {
}).catch(e => {
toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' });
});
setTimeout(WindowShow, 1000)
setTimeout(WindowShow, 1000);
} else {
toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' });
}

View File

@@ -1,13 +1,13 @@
import React, {FC, useEffect} from 'react';
import {useTranslation} from 'react-i18next';
import {Page} from '../components/Page';
import {observer} from 'mobx-react-lite';
import React, { FC, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Page } from '../components/Page';
import { observer } from 'mobx-react-lite';
import commonStore from '../stores/commonStore';
import {Divider, Field, ProgressBar} from '@fluentui/react-components';
import {bytesToGb, bytesToKb, bytesToMb, refreshLocalModels} from '../utils';
import {ToolTipButton} from '../components/ToolTipButton';
import {Folder20Regular, Pause20Regular, Play20Regular} from '@fluentui/react-icons';
import {ContinueDownload, OpenFileFolder, PauseDownload} from '../../wailsjs/go/backend_golang/App';
import { Divider, Field, ProgressBar } from '@fluentui/react-components';
import { bytesToGb, bytesToKb, bytesToMb, refreshLocalModels } from '../utils';
import { ToolTipButton } from '../components/ToolTipButton';
import { Folder20Regular, Pause20Regular, Play20Regular } from '@fluentui/react-icons';
import { ContinueDownload, OpenFileFolder, PauseDownload } from '../../wailsjs/go/backend_golang/App';
export type DownloadStatus = {
name: string;
@@ -22,11 +22,11 @@ export type DownloadStatus = {
}
export const Downloads: FC = observer(() => {
const {t} = useTranslation();
const { t } = useTranslation();
const finishedModelsLen = commonStore.downloadList.filter((status) => status.done && status.name.endsWith('.pth')).length;
useEffect(() => {
if (finishedModelsLen > 0)
refreshLocalModels({models: commonStore.modelSourceList}, false);
refreshLocalModels({ models: commonStore.modelSourceList }, false);
console.log('finishedModelsLen:', finishedModelsLen);
}, [finishedModelsLen]);
@@ -51,26 +51,26 @@ export const Downloads: FC = observer(() => {
validationState={status.done ? 'success' : 'none'}
>
<div className="flex items-center gap-2">
<ProgressBar className="grow" value={status.progress} max={100}/>
<ProgressBar className="grow" value={status.progress} max={100} />
{!status.done &&
<ToolTipButton desc={status.downloading ? t('Pause') : t('Continue')}
icon={status.downloading ? <Pause20Regular/> : <Play20Regular/>}
onClick={() => {
if (status.downloading)
PauseDownload(status.url);
else
ContinueDownload(status.url);
}}/>}
<ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular/>} onClick={() => {
icon={status.downloading ? <Pause20Regular /> : <Play20Regular />}
onClick={() => {
if (status.downloading)
PauseDownload(status.url);
else
ContinueDownload(status.url);
}} />}
<ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular />} onClick={() => {
OpenFileFolder(status.path);
}}/>
}} />
</div>
</Field>
<Divider style={{flexGrow: 0}}/>
<Divider style={{ flexGrow: 0 }} />
</div>;
})
}
</div>
}/>
} />
);
});

View File

@@ -1,5 +1,5 @@
import {CompoundButton, Link, Text} from '@fluentui/react-components';
import React, {FC, ReactElement} from 'react';
import { CompoundButton, Link, Text } from '@fluentui/react-components';
import React, { FC, ReactElement } from 'react';
import banner from '../assets/images/banner.jpg';
import {
Chat20Regular,
@@ -7,13 +7,13 @@ import {
DocumentSettings20Regular,
Storage20Regular
} from '@fluentui/react-icons';
import {useNavigate} from 'react-router';
import {observer} from 'mobx-react-lite';
import {RunButton} from '../components/RunButton';
import { useNavigate } from 'react-router';
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';
import {ConfigSelector} from '../components/ConfigSelector';
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';
@@ -31,40 +31,40 @@ const navCards: NavCard[] = [
label: 'Chat',
desc: 'Go to chat page',
path: '/chat',
icon: <Chat20Regular/>
icon: <Chat20Regular />
},
{
label: 'Configs',
desc: 'Manage your configs',
path: '/configs',
icon: <DocumentSettings20Regular/>
icon: <DocumentSettings20Regular />
},
{
label: 'Models',
desc: 'Manage models',
path: '/models',
icon: <DataUsageSettings20Regular/>
icon: <DataUsageSettings20Regular />
},
{
label: 'Train',
desc: '',
path: '/train',
icon: <Storage20Regular/>
icon: <Storage20Regular />
}
];
export const Home: FC = observer(() => {
const {t} = useTranslation();
const { t } = useTranslation();
const navigate = useNavigate();
const lang: string = commonStore.settings.language;
const onClickNavCard = (path: string) => {
navigate({pathname: path});
navigate({ pathname: path });
};
return (
<div className="flex flex-col justify-between h-full">
<img className="rounded-xl select-none hidden sm:block" src={banner}/>
<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 overflow-x-hidden p-1">
@@ -74,9 +74,9 @@ export const Home: FC = observer(() => {
</div>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
{navCards.map(({label, path, icon, desc}, index) => (
{navCards.map(({ label, path, icon, desc }, index) => (
<CompoundButton icon={icon} secondaryContent={t(desc)} key={`${path}-${index}`} value={path}
size="large" onClick={() => onClickNavCard(path)}>
size="large" onClick={() => onClickNavCard(path)}>
{t(label)}
</CompoundButton>
))}
@@ -84,8 +84,8 @@ export const Home: FC = observer(() => {
<div className="flex flex-col gap-2">
<div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
<div className="flex gap-3">
<ConfigSelector/>
<RunButton/>
<ConfigSelector />
<RunButton />
</div>
</div>
<div className="flex gap-4 items-end">

View File

@@ -1,4 +1,4 @@
import React, {FC} from 'react';
import React, { FC } from 'react';
import {
createTableColumn,
DataGrid,
@@ -12,17 +12,17 @@ import {
Text,
Textarea
} from '@fluentui/react-components';
import {ToolTipButton} from '../components/ToolTipButton';
import {ArrowClockwise20Regular, ArrowDownload20Regular, Folder20Regular, Open20Regular} from '@fluentui/react-icons';
import {observer} from 'mobx-react-lite';
import { ToolTipButton } from '../components/ToolTipButton';
import { ArrowClockwise20Regular, ArrowDownload20Regular, Folder20Regular, Open20Regular } from '@fluentui/react-icons';
import { observer } from 'mobx-react-lite';
import commonStore from '../stores/commonStore';
import {BrowserOpenURL} from '../../wailsjs/runtime';
import {AddToDownloadList, OpenFileFolder} from '../../wailsjs/go/backend_golang/App';
import { BrowserOpenURL } from '../../wailsjs/runtime';
import { AddToDownloadList, OpenFileFolder } from '../../wailsjs/go/backend_golang/App';
import manifest from '../../../manifest.json';
import {Page} from '../components/Page';
import {bytesToGb, refreshModels, saveConfigs, toastWithButton} from '../utils';
import {useTranslation} from 'react-i18next';
import {useNavigate} from 'react-router';
import { Page } from '../components/Page';
import { bytesToGb, refreshModels, saveConfigs, toastWithButton } from '../utils';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
export type ModelSourceItem = {
name: string;
@@ -43,7 +43,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.name.localeCompare(b.name);
},
renderHeaderCell: () => {
const {t} = useTranslation();
const { t } = useTranslation();
return t('File');
},
@@ -69,7 +69,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return 0;
},
renderHeaderCell: () => {
const {t} = useTranslation();
const { t } = useTranslation();
return t('Desc');
},
@@ -91,7 +91,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.size - b.size;
},
renderHeaderCell: () => {
const {t} = useTranslation();
const { t } = useTranslation();
return t('Size');
},
@@ -113,7 +113,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return b.lastUpdatedMs - a.lastUpdatedMs;
},
renderHeaderCell: () => {
const {t} = useTranslation();
const { t } = useTranslation();
return t('Last updated');
},
@@ -128,12 +128,12 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
return a.isLocal ? -1 : 1;
},
renderHeaderCell: () => {
const {t} = useTranslation();
const { t } = useTranslation();
return t('Actions');
},
renderCell: (item) => {
const {t} = useTranslation();
const { t } = useTranslation();
const navigate = useNavigate();
return (
@@ -141,21 +141,21 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
<div className="flex gap-1">
{
item.isLocal &&
<ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular/>} onClick={() => {
<ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular />} onClick={() => {
OpenFileFolder(`./${manifest.localModelDir}/${item.name}`);
}}/>
}} />
}
{item.downloadUrl && !item.isLocal &&
<ToolTipButton desc={t('Download')} icon={<ArrowDownload20Regular/>} onClick={() => {
<ToolTipButton desc={t('Download')} icon={<ArrowDownload20Regular />} onClick={() => {
toastWithButton(`${t('Downloading')} ${item.name}`, t('Check'), () => {
navigate({pathname: '/downloads'});
navigate({ pathname: '/downloads' });
},
{autoClose: 3000});
{ autoClose: 3000 });
AddToDownloadList(`./${manifest.localModelDir}/${item.name}`, item.downloadUrl!);
}}/>}
{item.url && <ToolTipButton desc={t('Open Url')} icon={<Open20Regular/>} onClick={() => {
}} />}
{item.url && <ToolTipButton desc={t('Open Url')} icon={<Open20Regular />} onClick={() => {
BrowserOpenURL(item.url!);
}}/>}
}} />}
</div>
</TableCellLayout>
);
@@ -164,7 +164,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
];
export const Models: FC = observer(() => {
const {t} = useTranslation();
const { t } = useTranslation();
return (
<Page title={t('Models')} content={
@@ -172,39 +172,39 @@ export const Models: FC = observer(() => {
<div className="flex flex-col gap-1">
<div className="flex justify-between items-center">
<Text weight="medium">{t('Model Source Manifest List')}</Text>
<ToolTipButton desc={t('Refresh')} icon={<ArrowClockwise20Regular/>} onClick={() => {
<ToolTipButton desc={t('Refresh')} icon={<ArrowClockwise20Regular />} onClick={() => {
refreshModels(false);
saveConfigs();
}}/>
}} />
</div>
<Text size={100}>
{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}
onChange={(e, data) => commonStore.setModelSourceManifestList(data.value)}/>
value={commonStore.modelSourceManifestList}
onChange={(e, data) => commonStore.setModelSourceManifestList(data.value)} />
</div>
<div className="flex grow overflow-hidden">
<DataGrid
items={commonStore.modelSourceList}
columns={columns}
sortable={true}
defaultSortState={{sortColumn: 'actions', sortDirection: 'ascending'}}
style={{display: 'flex'}}
defaultSortState={{ sortColumn: 'actions', sortDirection: 'ascending' }}
style={{ display: 'flex' }}
className="flex-col w-full"
>
<DataGridHeader>
<DataGridRow>
{({renderHeaderCell}) => (
{({ renderHeaderCell }) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</DataGridRow>
</DataGridHeader>
<div className="overflow-y-auto overflow-x-hidden">
<DataGridBody<ModelSourceItem>>
{({item, rowId}) => (
{({ item, rowId }) => (
<DataGridRow<ModelSourceItem> key={rowId}>
{({renderCell}) => (
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
@@ -214,6 +214,6 @@ export const Models: FC = observer(() => {
</DataGrid>
</div>
</div>
}/>
} />
);
});

View File

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

View File

@@ -1,5 +1,5 @@
import {ReactElement} from 'react';
import {Configs} from './Configs';
import { ReactElement } from 'react';
import { Configs } from './Configs';
import {
ArrowDownload20Regular,
Chat20Regular,
@@ -10,13 +10,13 @@ import {
Settings20Regular,
Storage20Regular
} from '@fluentui/react-icons';
import {Home} from './Home';
import {Chat} from './Chat';
import {Models} from './Models';
import {Train} from './Train';
import {Settings} from './Settings';
import {About} from './About';
import {Downloads} from './Downloads';
import { Home } from './Home';
import { Chat } from './Chat';
import { Models } from './Models';
import { Train } from './Train';
import { Settings } from './Settings';
import { About } from './About';
import { Downloads } from './Downloads';
type NavigationItem = {
label: string;
@@ -30,57 +30,57 @@ export const pages: NavigationItem[] = [
{
label: 'Home',
path: '/',
icon: <Home20Regular/>,
element: <Home/>,
icon: <Home20Regular />,
element: <Home />,
top: true
},
{
label: 'Chat',
path: '/chat',
icon: <Chat20Regular/>,
element: <Chat/>,
icon: <Chat20Regular />,
element: <Chat />,
top: true
},
{
label: 'Configs',
path: '/configs',
icon: <DocumentSettings20Regular/>,
element: <Configs/>,
icon: <DocumentSettings20Regular />,
element: <Configs />,
top: true
},
{
label: 'Models',
path: '/models',
icon: <DataUsageSettings20Regular/>,
element: <Models/>,
icon: <DataUsageSettings20Regular />,
element: <Models />,
top: true
},
{
label: 'Downloads',
path: '/downloads',
icon: <ArrowDownload20Regular/>,
element: <Downloads/>,
icon: <ArrowDownload20Regular />,
element: <Downloads />,
top: true
},
{
label: 'Train',
path: '/train',
icon: <Storage20Regular/>,
element: <Train/>,
icon: <Storage20Regular />,
element: <Train />,
top: true
},
{
label: 'Settings',
path: '/settings',
icon: <Settings20Regular/>,
element: <Settings/>,
icon: <Settings20Regular />,
element: <Settings />,
top: false
},
{
label: 'About',
path: '/about',
icon: <Info20Regular/>,
element: <About/>,
icon: <Info20Regular />,
element: <About />,
top: false
}
];