Skip to content

Commit 1534f9d

Browse files
author
Keivan Vosoughi
committed
DSE-45114: Add Data Augmentation Card
This PR contains following changes: - Adds new card for Data Augmentation to the Home Page - Hide Workflow Type for the Data Augmentation
1 parent b3807ea commit 1534f9d

File tree

7 files changed

+87
-6
lines changed

7 files changed

+87
-6
lines changed

‎app/client/src/assets/ic-data-augmentation.svg‎

Lines changed: 13 additions & 0 deletions
Loading

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ import { File, WorkflowType } from './types';
88
import { useFetchModels } from '../../api/api';
99
import { MODEL_PROVIDER_LABELS } from './constants';
1010
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
11-
import { useWizardCtx } from './utils';
11+
import { getWizardModel, getWizardModeType, useWizardCtx } from './utils';
1212
import FileSelectorButton from './FileSelectorButton';
1313
import UseCaseSelector from './UseCaseSelector';
14+
import { useLocation } from 'react-router-dom';
15+
import { WizardModeType } from '../../types';
16+
import { get } from 'lodash';
1417

1518

1619
const StepContainer = styled(Flex)`
@@ -39,7 +42,7 @@ export const USECASE_OPTIONS = [
3942
export const WORKFLOW_OPTIONS = [
4043
{ label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' },
4144
{ label: 'Custom Data Generation', value: 'custom' },
42-
{ label: 'Freeform Data Generation', value: 'freeform' }
45+
// { label: 'Freeform Data Generation', value: 'freeform' }
4346
];
4447

4548
export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
@@ -48,6 +51,18 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
4851
];
4952

5053
const Configure = () => {
54+
const location = useLocation();
55+
const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
56+
57+
useEffect(() => {
58+
if (wizardModeType === WizardModeType.DATA_AUGMENTATION) {
59+
setWizardModeType(WizardModeType.DATA_AUGMENTATION);
60+
form.setFieldValue('workflow_type', 'freeform');
61+
} else {
62+
setWizardModeType(WizardModeType.DATA_GENERATION);
63+
}
64+
}, [location, wizardModeType]);
65+
5166
const form = Form.useFormInstance();
5267
const formData = Form.useWatch((values) => values, form);
5368
const { setIsStepValid } = useWizardCtx();
@@ -141,8 +156,10 @@ const Configure = () => {
141156
label='Model Provider'
142157
rules={[{ required: true }]}
143158
labelCol={labelCol}
159+
shouldUpdate
144160
>
145161
<Select
162+
146163
onChange={() => form.setFieldValue('model_id', undefined)}
147164
placeholder={'Select a model provider'}
148165
>
@@ -210,6 +227,7 @@ const Configure = () => {
210227
label='Workflow'
211228
tooltip='A specialized workflow for your dataset'
212229
labelCol={labelCol}
230+
hidden={wizardModeType === WizardModeType.DATA_AUGMENTATION}
213231
shouldUpdate
214232
rules={[
215233
{ required: true }

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import isEmpty from 'lodash/isEmpty';
22
import isString from 'lodash/isString';
3-
import { useEffect, useRef, useState } from 'react';
3+
import { FunctionComponent, useEffect, useRef, useState } from 'react';
44
import { useLocation, useParams } from 'react-router-dom';
55

66
import { Button, Flex, Form, Layout, Steps } from 'antd';
@@ -20,10 +20,15 @@ import { DataGenWizardSteps, WizardStepConfig, WorkflowType } from './types';
2020
import { WizardCtx } from './utils';
2121
import { fetchDatasetDetails, useGetDatasetDetails } from '../DatasetDetails/hooks';
2222
import { useMutation } from '@tanstack/react-query';
23+
import { WizardModeType } from '../../types';
2324

2425
const { Content } = Layout;
2526
// const { Title } = Typography;
2627

28+
interface Props {
29+
mode?: WizardModeType;
30+
}
31+
2732
const StyledTitle = styled.div`
2833
margin-top: 10px;
2934
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
@@ -95,7 +100,7 @@ const steps: WizardStepConfig[] = [
95100
/**
96101
* Wizard component for Synthetic Data Generation workflow
97102
*/
98-
const DataGenerator = () => {
103+
const DataGenerator: FunctionComponent<Props> = () => {
99104
const [current, setCurrent] = useState(0);
100105
const [maxStep, setMaxStep] = useState(0);
101106
const [isStepValid, setIsStepValid] = useState<boolean>(false);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { WizardCtxObj } from './types';
33
import moment from 'moment';
44
import toString from 'lodash/toString';
55
import { File } from './types';
6+
import { WizardModeType } from '../../types';
67

78
export const WizardCtx = createContext<WizardCtxObj | null>(null);
89
export const useWizardCtx = (): WizardCtxObj => {
@@ -105,3 +106,15 @@ export const getHttpStatusCodeVerb = (statusCode: number) => {
105106
return null;
106107
}
107108
};
109+
110+
export const getWizardModeType = (location: any) => {
111+
const pathname = location?.pathname || '';
112+
switch (pathname) {
113+
case '/data-augmentation':
114+
return WizardModeType.DATA_AUGMENTATION;
115+
case '/data-generator':
116+
return WizardModeType.DATA_GENERATION;
117+
default:
118+
return null;
119+
}
120+
}

‎app/client/src/pages/Home/HomePage.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import EvaluationsTab from './EvaluationsTab';
77
import DatasetIcon from '../../assets/ic-datasets.svg';
88
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
99
import EvaluateIcon from '../../assets/ic-evaluations.svg';
10+
import DataAugmentationIcon from '../../assets/ic-data-augmentation.svg';
1011
import EvaluateButton from './EvaluateButton';
1112
import ExportsTab from './ExportsTab';
1213

@@ -116,6 +117,25 @@ const HomePage: React.FC = () => {
116117
</div>
117118
</div>
118119
</HeaderSection>
120+
<HeaderSection style={{ marginLeft: '1rem' }}>
121+
<div className="left-section" style={{ padding: '5px' }}>
122+
<img src={DataAugmentationIcon} alt="Datasets" />
123+
</div>
124+
<div className="middle-section">
125+
<div className="section-title">Data Augmentation</div>
126+
<div className="section-description">
127+
<p>Generate multi-dimension datasets using LLM custom prompts</p>
128+
</div>
129+
</div>
130+
<div className="right-section">
131+
<div>
132+
<Button href="/data-augmentation">
133+
Get Started
134+
<img src={ArrowRightIcon} alt="Get Started" />
135+
</Button>
136+
</div>
137+
</div>
138+
</HeaderSection>
119139
<HeaderSection style={{ marginLeft: '1rem' }}>
120140
<div className="left-section evaluate-icon">
121141
<img src={EvaluateIcon} alt="Datasets" />

‎app/client/src/routes.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Navigate, createBrowserRouter } from "react-router-dom";
22
import Layout from "./Container";
33
import DataGenerator from "./pages/DataGenerator";
44
import HomePage from "./pages/Home";
5-
import { Pages } from "./types";
5+
import { Pages, WizardModeType } from "./types";
66
import EvaluatorPage from "./pages/Evaluator";
77
import ReevaluatorPage from "./pages/Evaluator/ReevaluatorPage";
88
import DatasetDetailsPage from "./pages/DatasetDetails/DatasetDetailsPage";
@@ -35,7 +35,13 @@ const router = createBrowserRouter([
3535
},
3636
{
3737
path: Pages.GENERATOR,
38-
element: <DataGenerator key={Pages.GENERATOR}/>,
38+
element: <DataGenerator key={Pages.GENERATOR} mode={WizardModeType.DATA_GENERATION}/>,
39+
errorElement: <ErrorPage />,
40+
loader: async () => null
41+
},
42+
{
43+
path: Pages.DATA_AUGMENTATION,
44+
element: <DataGenerator key={Pages.DATA_AUGMENTATION} mode={WizardModeType.DATA_AUGMENTATION}/>,
3945
errorElement: <ErrorPage />,
4046
loader: async () => null
4147
},

‎app/client/src/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export enum Pages {
22
GENERATOR = 'data-generator',
3+
DATA_AUGMENTATION = 'data-augmentation',
34
REGENERATE = 're-generate',
45
EVALUATOR = 'evaluator',
56
HISTORY = 'history',
@@ -52,4 +53,9 @@ export interface UseCase {
5253
id: string;
5354
label: string;
5455
value: string;
56+
}
57+
58+
export enum WizardModeType {
59+
DATA_GENERATION = 'data-generation',
60+
DATA_AUGMENTATION = 'data-augmention'
5561
}

0 commit comments

Comments
 (0)