-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
413 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
import Flex from './Flex'; | ||
import { | ||
Button, | ||
ButtonProps, | ||
Card, | ||
CardProps, | ||
ConfigProvider, | ||
Divider, | ||
theme, | ||
Typography, | ||
} from 'antd'; | ||
|
||
export interface BAIStartBasicCardProps extends CardProps { | ||
icon: React.ReactNode; | ||
title: React.ReactNode; | ||
footerButtonProps: ButtonProps; | ||
description?: string; | ||
secondary?: Boolean; | ||
} | ||
|
||
const BAIStartBasicCard: React.FC<BAIStartBasicCardProps> = ({ | ||
icon, | ||
title, | ||
footerButtonProps, | ||
description, | ||
secondary, | ||
...cardProps | ||
}) => { | ||
const { token } = theme.useToken(); | ||
|
||
return ( | ||
<ConfigProvider | ||
theme={{ | ||
components: { | ||
Button: { | ||
defaultBorderColor: 'none', | ||
defaultColor: secondary ? '#E8FAF6' : '#FFF6E8', | ||
defaultBg: secondary ? '#00BD9B' : token.colorPrimary, | ||
defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary, | ||
defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary, | ||
}, | ||
}, | ||
}} | ||
> | ||
<Card | ||
{...cardProps} | ||
styles={{ | ||
body: { | ||
paddingTop: token.paddingSM, | ||
paddingBottom: token.paddingSM, | ||
paddingLeft: token.paddingMD, | ||
paddingRight: token.paddingMD, | ||
width: 210, | ||
height: 308, | ||
}, | ||
}} | ||
> | ||
<Flex | ||
direction="column" | ||
justify="between" | ||
align="stretch" | ||
style={{ height: '100%' }} | ||
> | ||
<Flex | ||
align="center" | ||
direction="column" | ||
gap={16} | ||
style={{ | ||
minHeight: 202, | ||
}} | ||
> | ||
<Flex | ||
align="center" | ||
justify="center" | ||
style={{ | ||
width: 50, | ||
height: 50, | ||
padding: 0, | ||
border: 0, | ||
color: secondary ? '#00BD9B' : '#FF7A00', | ||
background: secondary ? '#E8FAF6' : '#FFF6E8', | ||
fontSize: token.sizeLG, | ||
borderRadius: '50%', | ||
}} | ||
> | ||
{icon} | ||
</Flex> | ||
<Typography.Text | ||
strong | ||
style={{ | ||
fontSize: token.fontSizeLG, | ||
color: secondary ? '#00BD9B' : token.colorLink, | ||
textAlign: 'center', | ||
}} | ||
> | ||
{title} | ||
</Typography.Text> | ||
{description && ( | ||
<Typography.Paragraph | ||
style={{ | ||
color: token.colorTextDescription, | ||
fontSize: token.fontSize - 4, | ||
textAlign: 'center', | ||
}} | ||
> | ||
{description} | ||
</Typography.Paragraph> | ||
)} | ||
</Flex> | ||
<Flex direction="column"> | ||
<Divider style={{ margin: 0, marginBottom: token.margin }} /> | ||
<Button | ||
{...footerButtonProps} | ||
size="large" | ||
block | ||
style={{ | ||
borderRadius: token.borderRadiusLG, | ||
}} | ||
/> | ||
</Flex> | ||
</Flex> | ||
</Card> | ||
</ConfigProvider> | ||
); | ||
}; | ||
|
||
export default BAIStartBasicCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
import Flex from './Flex'; | ||
import { | ||
Button, | ||
ButtonProps, | ||
Card, | ||
CardProps, | ||
ConfigProvider, | ||
theme, | ||
Typography, | ||
} from 'antd'; | ||
|
||
export interface BAIStartSimpleCardProps extends CardProps { | ||
icon: React.ReactNode; | ||
title: React.ReactNode; | ||
footerButtonProps: ButtonProps; | ||
description?: string; | ||
secondary?: Boolean; | ||
} | ||
|
||
const BAIStartSimpleCard: React.FC<BAIStartSimpleCardProps> = ({ | ||
icon, | ||
title, | ||
footerButtonProps, | ||
description, | ||
secondary, | ||
...cardProps | ||
}) => { | ||
const { token } = theme.useToken(); | ||
|
||
return ( | ||
<ConfigProvider | ||
theme={{ | ||
components: { | ||
Button: { | ||
defaultBorderColor: 'none', | ||
defaultColor: secondary ? '#E8FAF6' : '#FFF6E8', | ||
defaultBg: secondary ? '#00BD9B' : token.colorPrimary, | ||
defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary, | ||
defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary, | ||
}, | ||
}, | ||
}} | ||
> | ||
<Card | ||
{...cardProps} | ||
styles={{ | ||
body: { | ||
width: 194, | ||
height: 192, | ||
}, | ||
}} | ||
> | ||
<Flex | ||
direction="column" | ||
justify="between" | ||
align="stretch" | ||
style={{ height: '100%' }} | ||
> | ||
<Flex align="center" direction="column" gap={16}> | ||
<Flex | ||
align="center" | ||
justify="center" | ||
style={{ | ||
width: 50, | ||
height: 50, | ||
padding: 0, | ||
border: 0, | ||
color: secondary ? '#00BD9B' : '#FF7A00', | ||
background: secondary ? '#E8FAF6' : '#FFF6E8', | ||
fontSize: token.sizeLG, | ||
borderRadius: '50%', | ||
}} | ||
> | ||
{icon} | ||
</Flex> | ||
<Typography.Text | ||
strong | ||
style={{ | ||
fontSize: token.fontSizeSM, | ||
color: '#333333', | ||
textAlign: 'center', | ||
}} | ||
> | ||
{title} | ||
</Typography.Text> | ||
{description && ( | ||
<Typography.Paragraph | ||
style={{ | ||
color: token.colorTextDescription, | ||
fontSize: token.fontSize - 4, | ||
textAlign: 'center', | ||
}} | ||
> | ||
{description} | ||
</Typography.Paragraph> | ||
)} | ||
<Button | ||
{...footerButtonProps} | ||
block | ||
style={{ | ||
borderRadius: token.borderRadiusLG, | ||
}} | ||
/> | ||
</Flex> | ||
</Flex> | ||
</Card> | ||
</ConfigProvider> | ||
); | ||
}; | ||
|
||
export default BAIStartSimpleCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,142 @@ | ||
import BAIStartBasicCard from '../components/BAIStartBasicCard'; | ||
// import BAIStartSimpleCard from '../components/BAIStartSimpleCard'; | ||
import Flex from '../components/Flex'; | ||
import { useWebUINavigate } from '../hooks'; | ||
import { FolderAddOutlined } from '@ant-design/icons'; | ||
import React from 'react'; | ||
|
||
interface StartPageProps {} | ||
|
||
const StartPage: React.FC<StartPageProps> = (props) => { | ||
const webuiNavigate = useWebUINavigate(); | ||
|
||
return ( | ||
<Flex gap={16} wrap="wrap" direction="column" align="start"> | ||
<Flex gap={16} wrap="wrap"> | ||
<BAIStartBasicCard | ||
icon={<FolderAddOutlined />} | ||
title={ | ||
<div> | ||
Create a New | ||
<br /> | ||
Storage Folder | ||
</div> | ||
} | ||
description="Creating a folder and uploading files are crucial for training models or providing services externally. Please begin by uploading the files." | ||
footerButtonProps={{ | ||
onClick: () => { | ||
webuiNavigate('/data'); | ||
}, | ||
children: 'Create Folder', | ||
}} | ||
/> | ||
<BAIStartBasicCard | ||
icon={ | ||
<img | ||
src="/resources/icons/interactiveSession.svg" | ||
alt="interactive session" | ||
/> | ||
} | ||
title={ | ||
<div> | ||
Start an | ||
<br /> | ||
Interactive Session | ||
</div> | ||
} | ||
description="Want to train a model? Click the button to create a session instantly. Choose your preferred environment and resources for running code and other tasks." | ||
footerButtonProps={{ | ||
onClick: () => { | ||
webuiNavigate('/session/start'); | ||
}, | ||
children: 'Start Session', | ||
}} | ||
/> | ||
<BAIStartBasicCard | ||
icon={ | ||
<img src="/resources/icons/batchSession.svg" alt="batch session" /> | ||
} | ||
title={ | ||
<div> | ||
Start a<br /> | ||
Batch Session | ||
</div> | ||
} | ||
description="For predefined files or scheduled tasks, try Batch sessions. Enter the command, set the date and time, and run as needed." | ||
footerButtonProps={{ | ||
onClick: () => { | ||
webuiNavigate( | ||
'/session/start?formValues=%7B%22sessionType%22%3A%22batch%22%2C%22environments%22%3A%7B%22environment%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%22%2C%22version%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%3A3.9-ubuntu20.04%40x86_64%22%7D%2C%22envvars%22%3A%5B%5D%2C%22resourceGroup%22%3A%22default%22%2C%22allocationPreset%22%3A%22cpu01-small%22%2C%22resource%22%3A%7B%22cpu%22%3A1%2C%22mem%22%3A%221G%22%2C%22shmem%22%3A%2264m%22%2C%22accelerator%22%3A0%7D%2C%22enabledAutomaticShmem%22%3Atrue%2C%22num_of_sessions%22%3A1%2C%22cluster_mode%22%3A%22single-node%22%2C%22cluster_size%22%3A1%2C%22hpcOptimization%22%3A%7B%22autoEnabled%22%3Atrue%2C%22OMP_NUM_THREADS%22%3A%221%22%2C%22OPENBLAS_NUM_THREADS%22%3A%221%22%7D%2C%22vfoldersAliasMap%22%3A%7B%7D%2C%22batch%22%3A%7B%22enabled%22%3Afalse%7D%7D', | ||
); | ||
}, | ||
children: 'Start Session', | ||
}} | ||
/> | ||
</Flex> | ||
<Flex gap={16} wrap="wrap"> | ||
<BAIStartBasicCard | ||
secondary | ||
icon={ | ||
<img src="/resources/icons/modelService.svg" alt="model service" /> | ||
} | ||
title={ | ||
<div> | ||
Start a | ||
<br /> Model Service | ||
</div> | ||
} | ||
description="Ready to share your trained model with others? Click the button to create a service." | ||
footerButtonProps={{ | ||
onClick: () => { | ||
webuiNavigate('/serving'); | ||
}, | ||
children: 'Start Service', | ||
}} | ||
/> | ||
<BAIStartBasicCard | ||
secondary | ||
icon={ | ||
<img src="/resources/icons/exampleStart.svg" alt="example start" /> | ||
} | ||
title={ | ||
<div> | ||
Start | ||
<br /> | ||
from the Example | ||
</div> | ||
} | ||
description="Explore various example codes and get started." | ||
footerButtonProps={{ | ||
children: 'Start Now', | ||
}} | ||
/> | ||
<BAIStartBasicCard | ||
secondary | ||
icon={<img src="/resources/icons/URLStart.svg" alt="URL start" />} | ||
title={ | ||
<div> | ||
Start | ||
<br /> | ||
from a URL | ||
</div> | ||
} | ||
description="Import your project and code from various environments such as GitHub, GitLab, Notebook, etc." | ||
footerButtonProps={{ | ||
children: 'Start Now', | ||
}} | ||
/> | ||
</Flex> | ||
{/* <BAIStartSimpleCard | ||
icon={<img src="/resources/icons/session.svg" alt="session"/>} | ||
title={'Create a Session'} | ||
footerButtonProps={{ | ||
onClick: () => { | ||
webuiNavigate('/session/start'); | ||
}, | ||
children: 'Start Session', | ||
}} | ||
/> */} | ||
</Flex> | ||
); | ||
}; | ||
export default StartPage; |
Oops, something went wrong.