Skip to content

Commit

Permalink
feat: publishing
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatha197 @lizable
agatha197 authored and lizable committed Aug 29, 2024
1 parent f37fba3 commit f640cbb
Show file tree
Hide file tree
Showing 12 changed files with 413 additions and 6 deletions.
2 changes: 2 additions & 0 deletions react/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const EndpointDetailPage = React.lazy(
() => import('./pages/EndpointDetailPage'),
);
// const SummaryPage = React.lazy(() => import('./pages/SummaryPage'));
const StartPage = React.lazy(() => import('./pages/StartPage'));
const EnvironmentPage = React.lazy(() => import('./pages/EnvironmentPage'));
const MyEnvironmentPage = React.lazy(() => import('./pages/MyEnvironmentPage'));
const StorageHostSettingPage = React.lazy(
Expand Down Expand Up @@ -134,6 +135,7 @@ const router = createBrowserRouter([
closable
/>
{/* <SummaryPage /> */}
<StartPage />
</>
);
},
Expand Down
127 changes: 127 additions & 0 deletions react/src/components/BAIStartBasicCard.tsx
View file
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;
111 changes: 111 additions & 0 deletions react/src/components/BAIStartSimpleCard.tsx
View file
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;
142 changes: 142 additions & 0 deletions react/src/pages/StartPage.tsx
View file
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;
Loading

0 comments on commit f640cbb

Please sign in to comment.