From decfbbac6faf7101e2223ea7bb6ee48845d6a877 Mon Sep 17 00:00:00 2001 From: Keivan Vosoughi Date: Tue, 8 Jul 2025 19:55:27 -0700 Subject: [PATCH 1/2] DSE-45114: Add Data Augmentation --- .../src/pages/DataGenerator/DataGenerator.tsx | 10 ++++++++-- app/client/src/pages/Home/HomePage.tsx | 20 +++++++++++++++++++ app/client/src/routes.tsx | 10 ++++++++-- app/client/src/types.ts | 6 ++++++ 4 files changed, 42 insertions(+), 4 deletions(-) diff --git a/app/client/src/pages/DataGenerator/DataGenerator.tsx b/app/client/src/pages/DataGenerator/DataGenerator.tsx index bbf9b71f..eab6071e 100644 --- a/app/client/src/pages/DataGenerator/DataGenerator.tsx +++ b/app/client/src/pages/DataGenerator/DataGenerator.tsx @@ -1,6 +1,6 @@ import isEmpty from 'lodash/isEmpty'; import isString from 'lodash/isString'; -import { useEffect, useRef, useState } from 'react'; +import { FunctionComponent, useEffect, useRef, useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; import { Button, Flex, Form, Layout, Steps } from 'antd'; @@ -20,10 +20,15 @@ import { DataGenWizardSteps, WizardStepConfig, WorkflowType } from './types'; import { WizardCtx } from './utils'; import { fetchDatasetDetails, useGetDatasetDetails } from '../DatasetDetails/hooks'; import { useMutation } from '@tanstack/react-query'; +import { WizardModeType } from '../../types'; const { Content } = Layout; // const { Title } = Typography; +interface Props { + mode?: WizardModeType; +} + const StyledTitle = styled.div` margin-top: 10px; font-family: Roboto, -apple-system, 'Segoe UI', sans-serif; @@ -95,7 +100,8 @@ const steps: WizardStepConfig[] = [ /** * Wizard component for Synthetic Data Generation workflow */ -const DataGenerator = () => { +const DataGenerator: FunctionComponent = ({ mode }) => { + console.log('DataGenerator mode: ', mode); const [current, setCurrent] = useState(0); const [maxStep, setMaxStep] = useState(0); const [isStepValid, setIsStepValid] = useState(false); diff --git a/app/client/src/pages/Home/HomePage.tsx b/app/client/src/pages/Home/HomePage.tsx index 231ba64d..874668ba 100644 --- a/app/client/src/pages/Home/HomePage.tsx +++ b/app/client/src/pages/Home/HomePage.tsx @@ -7,6 +7,7 @@ import EvaluationsTab from './EvaluationsTab'; import DatasetIcon from '../../assets/ic-datasets.svg'; import ArrowRightIcon from '../../assets/ic-arrow-right.svg'; import EvaluateIcon from '../../assets/ic-evaluations.svg'; +import DataAugmentationIcon from '../../assets/ic-data-augmentation.svg'; import EvaluateButton from './EvaluateButton'; import ExportsTab from './ExportsTab'; @@ -116,6 +117,25 @@ const HomePage: React.FC = () => { + +
+ Datasets +
+
+
Data Augmentation
+
+

Generate multi-dimension datasets using LLM custom prompts

+
+
+
+
+ +
+
+
Datasets diff --git a/app/client/src/routes.tsx b/app/client/src/routes.tsx index ee600017..d611417a 100644 --- a/app/client/src/routes.tsx +++ b/app/client/src/routes.tsx @@ -2,7 +2,7 @@ import { Navigate, createBrowserRouter } from "react-router-dom"; import Layout from "./Container"; import DataGenerator from "./pages/DataGenerator"; import HomePage from "./pages/Home"; -import { Pages } from "./types"; +import { Pages, WizardModeType } from "./types"; import EvaluatorPage from "./pages/Evaluator"; import ReevaluatorPage from "./pages/Evaluator/ReevaluatorPage"; import DatasetDetailsPage from "./pages/DatasetDetails/DatasetDetailsPage"; @@ -35,7 +35,13 @@ const router = createBrowserRouter([ }, { path: Pages.GENERATOR, - element: , + element: , + errorElement: , + loader: async () => null + }, + { + path: Pages.GENERATOR, + element: , errorElement: , loader: async () => null }, diff --git a/app/client/src/types.ts b/app/client/src/types.ts index 295cccba..24908745 100644 --- a/app/client/src/types.ts +++ b/app/client/src/types.ts @@ -1,5 +1,6 @@ export enum Pages { GENERATOR = 'data-generator', + DATA_AUGMENTATION = 'data-augmentation', REGENERATE = 're-generate', EVALUATOR = 'evaluator', HISTORY = 'history', @@ -52,4 +53,9 @@ export interface UseCase { id: string; label: string; value: string; +} + +export enum WizardModeType { + DATA_GENERATION = 'data-generation', + DATA_AUGMENTATION = 'data-augmention' } \ No newline at end of file From ec2454e6280e8c4eade0f7b11077c82360f6934c Mon Sep 17 00:00:00 2001 From: Keivan Vosoughi Date: Tue, 8 Jul 2025 20:10:31 -0700 Subject: [PATCH 2/2] DSE-45114: Add Data Augmentation Icon This PR contains following changes: - Adds new card for Data Augmentation to the Home Page - Hide Workflow Type for the Data Augmentation --- .../src/assets/ic-data-augmentation.svg | 13 +++++++++++ .../src/pages/DataGenerator/Configure.tsx | 22 +++++++++++++++++-- .../src/pages/DataGenerator/DataGenerator.tsx | 1 + app/client/src/pages/DataGenerator/utils.ts | 13 +++++++++++ app/client/src/pages/Home/HomePage.tsx | 4 ++-- app/client/src/routes.tsx | 2 +- 6 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 app/client/src/assets/ic-data-augmentation.svg diff --git a/app/client/src/assets/ic-data-augmentation.svg b/app/client/src/assets/ic-data-augmentation.svg new file mode 100644 index 00000000..38e47ea7 --- /dev/null +++ b/app/client/src/assets/ic-data-augmentation.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/client/src/pages/DataGenerator/Configure.tsx b/app/client/src/pages/DataGenerator/Configure.tsx index bb7d42ea..28bd3a45 100644 --- a/app/client/src/pages/DataGenerator/Configure.tsx +++ b/app/client/src/pages/DataGenerator/Configure.tsx @@ -8,9 +8,12 @@ import { File, WorkflowType } from './types'; import { useFetchModels } from '../../api/api'; import { MODEL_PROVIDER_LABELS } from './constants'; import { ModelProviders, ModelProvidersDropdownOpts } from './types'; -import { useWizardCtx } from './utils'; +import { getWizardModel, getWizardModeType, useWizardCtx } from './utils'; import FileSelectorButton from './FileSelectorButton'; import UseCaseSelector from './UseCaseSelector'; +import { useLocation } from 'react-router-dom'; +import { WizardModeType } from '../../types'; +import { get } from 'lodash'; const StepContainer = styled(Flex)` @@ -39,7 +42,7 @@ export const USECASE_OPTIONS = [ export const WORKFLOW_OPTIONS = [ { label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' }, { label: 'Custom Data Generation', value: 'custom' }, - { label: 'Freeform Data Generation', value: 'freeform' } + // { label: 'Freeform Data Generation', value: 'freeform' } ]; export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [ @@ -48,6 +51,18 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [ ]; const Configure = () => { + const location = useLocation(); + const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location)); + + useEffect(() => { + if (wizardModeType === WizardModeType.DATA_AUGMENTATION) { + setWizardModeType(WizardModeType.DATA_AUGMENTATION); + form.setFieldValue('workflow_type', 'freeform'); + } else { + setWizardModeType(WizardModeType.DATA_GENERATION); + } + }, [location, wizardModeType]); + const form = Form.useFormInstance(); const formData = Form.useWatch((values) => values, form); const { setIsStepValid } = useWizardCtx(); @@ -141,8 +156,10 @@ const Configure = () => { label='Model Provider' rules={[{ required: true }]} labelCol={labelCol} + shouldUpdate >