Skip to content

Commit 5588218

Browse files
vkeivanvkeivan
authored
Merge pull request #41 from cloudera/dev-keivan
Dataset Details Page Add Generation Table Add Dataset Details Page Add Upgrade Button & Check Status Mechanism Add Custom Prompt to the Details Page Add Evaluation Details Fix for brand title color Testing Upgrade Fix Custom Prompt for Evaluator Fix for Fetch Model Parameters Adding Error Messages for Evaluate & Re-evaluate Adjust Upgrade Look & Feel Upgrade Loading Fix for Upgrade Message
2 parents 9de375b + 55df312 commit 5588218

34 files changed

+1830
-48
lines changed

‎app/client/src/Container.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { Pages } from './types';
1010
import { QueryClient, QueryClientProvider } from 'react-query';
1111
import React, { useMemo } from 'react';
1212
import { GithubOutlined, MailOutlined } from '@ant-design/icons';
13+
import { Upgrade } from '@mui/icons-material';
14+
import UpgradeButton from './pages/Home/UpgradeButton';
1315

1416
const { Text } = Typography;
1517
const { Header, Content } = Layout;
@@ -38,7 +40,7 @@ const BrandingTitle = styled(Typography)`
3840
line-height: 0.75;
3941
letter-spacing: normal;
4042
text-align: left;
41-
color: #fff;
43+
color: rgba(255, 255, 255, 0.65);
4244
`
4345
const BrandingTextContainer = styled(Flex)`
4446
padding-top: 5px;
@@ -86,7 +88,12 @@ const pages: MenuItem[] = [
8688
<Button type="link" icon={<MailOutlined />}>
8789
<Text copyable={{ text: '[email protected]' }} style={{ color: '#1677ff' }}>[email protected]</Text>
8890
</Button>
89-
<Button type="link" icon={<GithubOutlined target = "_blank" />} href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">Join the discussion on GitHub</Button>
91+
<div style={{ margin: 'auto' }}>
92+
<a type="link" target="_blank" rel="noopener noreferrer" href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">
93+
<GithubOutlined />
94+
<span style={{ marginLeft: '4px' }}>Join the discussion on GitHub</span>
95+
</a>
96+
</div>
9097
</Flex>
9198
<br/>
9299
</div>
@@ -96,10 +103,17 @@ const pages: MenuItem[] = [
96103
<span style={{ color: 'rgba(255, 255, 255, 0.65)'}}>{LABELS[Pages.FEEDBACK]}</span>
97104
</Button>
98105
</Popover>
99-
),
106+
)
107+
},
108+
{
109+
key: Pages.UPGRADE,
110+
label: (
111+
<UpgradeButton />
112+
)
100113
}
101114
]
102115

116+
103117
const NotificationContext = React.createContext({messagePlacement: 'topRight'});
104118

105119
const Container = () => {
@@ -128,7 +142,6 @@ const Container = () => {
128142
disabledOverflow={true}
129143
items={pages}
130144
mode="horizontal"
131-
// onClick={handleMenuClick}
132145
selectable={false}
133146
selectedKeys={[location.pathname]}
134147
theme="dark"

‎app/client/src/pages/DataGenerator/Parameters.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,10 @@ const Parameters = () => {
8484
form.setFieldsValue({ model_parameters: { [field]: value }});
8585
};
8686

87-
if (loadingDefaultParams) {
88-
return <Spin/>
89-
}
87+
// if (loadingDefaultParams) {
88+
// return <Spin/>
89+
// }
90+
9091
return (
9192
<>
9293
<Divider />

‎app/client/src/pages/DataGenerator/Prompt.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Usecases, WorkflowType } from './types';
1414
import { useWizardCtx } from './utils';
1515
import { useDatasetSize, useGetPromptByUseCase } from './hooks';
1616
import CustomPromptButton from './CustomPromptButton';
17+
import get from 'lodash/get';
1718

1819
const { Title } = Typography;
1920

@@ -81,14 +82,24 @@ const Prompt = () => {
8182
// Page Bootstrap requests and useEffect
8283
const { data: defaultTopics, loading: topicsLoading } = usefetchTopics(useCase);
8384
const { data: defaultSchema, loading: schemaLoading } = useFetchDefaultSchema();
84-
const { data: dataset_size, isLoading: datasetSizeLoading } = useDatasetSize(
85+
const { data: dataset_size, isLoading: datasetSizeLoadin, isError, error } = useDatasetSize(
8586
workflow_type,
8687
doc_paths,
8788
input_key,
8889
input_value,
8990
output_key
9091
);
9192

93+
useEffect(() => {
94+
if (isError) {
95+
notification.error({
96+
message: 'Error fetching the dataset size',
97+
description: get(error, 'error'),
98+
});
99+
}
100+
101+
}, [error, isError]);
102+
92103
useEffect(() => {
93104
if (defaultTopics) {
94105
// customTopics is a client-side only fieldValue that persists custom topics added

‎app/client/src/pages/DataGenerator/constants.ts‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ModelProviders } from './types';
1+
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
22

33
export const MODEL_PROVIDER_LABELS = {
44
[ModelProviders.BEDROCK]: 'AWS Bedrock',
@@ -8,4 +8,35 @@ export const MODEL_PROVIDER_LABELS = {
88
export const MIN_SEED_INSTRUCTIONS = 1
99
export const MAX_SEED_INSTRUCTIONS = 500;
1010
export const MAX_NUM_QUESTION = 100;
11-
export const DEMO_MODE_THRESHOLD = 25
11+
export const DEMO_MODE_THRESHOLD = 25;
12+
13+
14+
export const USECASE_OPTIONS = [
15+
{ label: 'Code Generation', value: 'code_generation' },
16+
{ label: 'Text to SQL', value: 'text2sql' },
17+
{ label: 'Custom', value: 'custom' }
18+
];
19+
20+
export const WORKFLOW_OPTIONS = [
21+
{ label: 'Supervised Fine-Tuning', value: 'sft' },
22+
{ label: 'Custom Data Generation', value: 'custom' }
23+
];
24+
25+
export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
26+
{ label: MODEL_PROVIDER_LABELS[ModelProviders.BEDROCK], value: ModelProviders.BEDROCK},
27+
{ label: MODEL_PROVIDER_LABELS[ModelProviders.CAII], value: ModelProviders.CAII },
28+
];
29+
30+
31+
export const getModelProvider = (provider: ModelProviders) => {
32+
return MODEL_PROVIDER_LABELS[provider];
33+
};
34+
35+
export const getWorkflowType = (value: string) => {
36+
return WORKFLOW_OPTIONS.find((option) => option.value === value)?.label;
37+
};
38+
39+
export const getUsecaseType = (value: string) => {
40+
return USECASE_OPTIONS.find((option) => option.value === value)?.label;
41+
};
42+

‎app/client/src/pages/DataGenerator/hooks.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,10 @@ export const useGetProjectFiles = (paths: string[]) => {
166166
},
167167
body: JSON.stringify(params),
168168
});
169+
if (resp.status !== 200) {
170+
const body_error = await resp.json();
171+
throw new Error('Error fetching dataset size' + get(body_error, 'error'));
172+
}
169173
const body = await resp.json();
170174
return get(body, 'dataset_size');
171175
}
@@ -197,6 +201,7 @@ export const useDatasetSize = (
197201
},
198202
);
199203

204+
console.log('--------------error', error);
200205
if (isError) {
201206
console.log('data', error);
202207
notification.error({

‎app/client/src/pages/DatasetDetails/ConfigurationTab.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import get from 'lodash/get';
2+
import isEmpty from 'lodash/isEmpty';
3+
import React from 'react';
4+
import { Dataset } from '../Evaluator/types';
5+
import { Col, Flex, Modal, Row, Space, Table, Tag, Typography } from 'antd';
6+
import ExampleModal from './ExampleModal';
7+
import { QuestionSolution } from '../DataGenerator/types';
8+
import styled from 'styled-components';
9+
10+
const { Text } = Typography;
11+
12+
interface Props {
13+
dataset: Dataset;
14+
}
15+
16+
const StyledTable = styled(Table)`
17+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
18+
color: #5a656d;
19+
.ant-table-thead > tr > th {
20+
color: #5a656d;
21+
border-bottom: 1px solid #eaebec;
22+
font-weight: 500;
23+
text-align: left;
24+
// background: #ffffff;
25+
border-bottom: 1px solid #eaebec;
26+
transition: background 0.3s ease;
27+
}
28+
.ant-table-row {
29+
cursor: pointer;
30+
}
31+
.ant-table-row > td.ant-table-cell {
32+
padding: 8px;
33+
padding-left: 16px;
34+
font-size: 13px;
35+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
36+
color: #5a656d;
37+
.ant-typography {
38+
font-size: 13px;
39+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
40+
}
41+
}
42+
`;
43+
44+
const StyledTitle = styled.div`
45+
margin-bottom: 4px;
46+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
47+
font-size: 16px;
48+
font-weight: 500;
49+
margin-left: 4px;
50+
51+
`;
52+
53+
const Container = styled.div`
54+
padding: 16px;
55+
background-color: #ffffff;
56+
`;
57+
58+
export const TagsContainer = styled.div`
59+
min-height: 30px;
60+
display: block;
61+
margin-bottom: 4px;
62+
margin-top: 4px;
63+
.ant-tag {
64+
max-width: 150px;
65+
}
66+
.tag-title {
67+
overflow: hidden;
68+
white-space: nowrap;
69+
text-overflow: ellipsis;
70+
}
71+
`;
72+
73+
74+
const ConfigurationTab: React.FC<Props> = ({ dataset }) => {
75+
const topics = get(dataset, 'topics', []);
76+
77+
const exampleColummns = [
78+
{
79+
title: 'Prompts',
80+
dataIndex: 'prompts',
81+
ellipsis: true,
82+
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
83+
},
84+
{
85+
title: 'Completions',
86+
dataIndex: 'completions',
87+
ellipsis: true,
88+
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
89+
},
90+
]
91+
92+
const parameterColummns = [
93+
{
94+
title: 'Temperature',
95+
dataIndex: 'temperature',
96+
ellipsis: true,
97+
render: (temperature: number) => <>{temperature}</>
98+
},
99+
{
100+
title: 'Top K',
101+
dataIndex: 'top_k',
102+
ellipsis: true,
103+
render: (top_k: number) => <>{top_k}</>
104+
},
105+
{
106+
title: 'Top P',
107+
dataIndex: 'top_p',
108+
ellipsis: true,
109+
render: (top_p: number) => <>{top_p}</>
110+
},
111+
112+
];
113+
console.log('topics:', topics);
114+
console.log('dataset:', dataset);
115+
console.log('examples:', dataset.examples);
116+
117+
return (
118+
<Container>
119+
<Row style={{ marginBottom: '16px', marginTop: '8px' }}>
120+
<Col sm={24}>
121+
<Flex vertical>
122+
<StyledTitle>Custom Prompt</StyledTitle>
123+
<Text copyable={{
124+
text: dataset?.custom_prompt,
125+
tooltips: ['Copy Prompt', 'Copied!'],
126+
}}>
127+
{dataset?.custom_prompt}
128+
</Text>
129+
</Flex>
130+
</Col>
131+
</Row>
132+
{!isEmpty(topics) &&
133+
<Row style={{ marginTop: '8px', marginBottom: '8px' }}>
134+
<Col sm={24}>
135+
<Flex vertical>
136+
<StyledTitle>Seed Instructions</StyledTitle>
137+
<TagsContainer>
138+
<Space size={[0, 'middle']} wrap>
139+
{topics.map((tag: string) => (
140+
<Tag key={tag}>
141+
<div className="tag-title" title={tag}>
142+
{tag}
143+
</div>
144+
</Tag>
145+
))}
146+
</Space>
147+
</TagsContainer>
148+
</Flex>
149+
</Col>
150+
</Row>}
151+
<Row style={{ marginTop: '16px', marginBottom: '8px' }}>
152+
<Col sm={24}>
153+
<Flex vertical>
154+
<StyledTitle>Examples</StyledTitle>
155+
<StyledTable
156+
bordered
157+
columns={exampleColummns}
158+
dataSource={dataset.examples || []}
159+
pagination={false}
160+
onRow={(record: { question: string, solution: string}) => ({
161+
onClick: () => Modal.info({
162+
title: 'View Details',
163+
content: <ExampleModal {...record} />,
164+
icon: undefined,
165+
maskClosable: false,
166+
width: 1000
167+
})
168+
})}
169+
rowKey={(_record, index) => `summary-examples-table-${index}`}
170+
/>
171+
</Flex>
172+
</Col>
173+
</Row>
174+
<Row style={{ marginTop: '16px' }}>
175+
<Col sm={24}>
176+
<Flex vertical>
177+
<StyledTitle>Parameters</StyledTitle>
178+
<StyledTable
179+
bordered
180+
columns={parameterColummns}
181+
dataSource={[dataset?.model_parameters]}
182+
pagination={false}
183+
rowKey={(_record, index) => `parameters-table-${index}`}
184+
/>
185+
</Flex>
186+
</Col>
187+
</Row>
188+
</Container>
189+
190+
);
191+
};
192+
193+
export default ConfigurationTab;
194+
195+

0 commit comments

Comments
 (0)