code format
This commit is contained in:
@@ -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>
|
||||
}/>
|
||||
} />
|
||||
);
|
||||
});
|
||||
|
||||
@@ -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' });
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}/>
|
||||
} />
|
||||
);
|
||||
});
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
}/>
|
||||
} />
|
||||
);
|
||||
});
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user