DSE-45114: Add Data Augmentation

Author: Keivan Vosoughi

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<Props> = ({ mode }) => {
+    console.log('DataGenerator mode: ', mode);
     const [current, setCurrent] = useState(0);
     const [maxStep, setMaxStep] = useState(0);
     const [isStepValid, setIsStepValid] = useState<boolean>(false);

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 = () => {
                             </div>
                         </div>
                     </HeaderSection>
+                    <HeaderSection>
+                        <div className="left-section">
+                            <img src={DataAugmentationIcon} alt="Datasets" />
+                        </div>
+                        <div className="middle-section">
+                            <div className="section-title">Data Augmentation</div>
+                            <div className="section-description">
+                                <p>Generate multi-dimension datasets using LLM custom prompts</p>
+                            </div>
+                        </div>
+                        <div className="right-section">
+                            <div>
+                                <Button href="/data-augmentation">
+                                    Get Started
+                                    <img src={ArrowRightIcon} alt="Get Started" />
+                                </Button>
+                            </div>
+                        </div>
+                    </HeaderSection>
                     <HeaderSection style={{ marginLeft: '1rem' }}>
                         <div className="left-section evaluate-icon">
                             <img src={EvaluateIcon} alt="Datasets" />

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: <DataGenerator key={Pages.GENERATOR}/>, 
+        element: <DataGenerator key={Pages.GENERATOR} mode={WizardModeType.DATA_GENERATION}/>, 
+        errorElement: <ErrorPage />,
+        loader: async () => null
+      },
+      { 
+        path: Pages.GENERATOR, 
+        element: <DataGenerator key={Pages.DATA_AUGMENTATION} mode={WizardModeType.DATA_AUGMENTATION}/>, 
         errorElement: <ErrorPage />,
         loader: async () => null
       },

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'
 }