Aggregated UI Fixes for Upgrade & Dataset Details

README.md

@@ -83,6 +83,14 @@ Built using:
    python build/start_application.py
    ```
 
+## [Technical Overview](docs/technical_overview.md):  
+
+The given document gives overall capabilities, tech stack, and general idea to get started on this application.
+
+## Technical Guides:
+### [Generation Workflow](docs/guides/sft_workflow.md)
+### [Evaluation Workflow](docs/guides/evaluation_workflow.md)
+
 
 
 ## Legal Notice

app/client/src/Container.tsx

@@ -10,6 +10,8 @@ import { Pages } from './types';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import React, { useMemo } from 'react';
 import { GithubOutlined, MailOutlined } from '@ant-design/icons';
+import { Upgrade } from '@mui/icons-material';
+import UpgradeButton from './pages/Home/UpgradeButton';
 
 const { Text } = Typography;
 const { Header, Content } = Layout;
@@ -38,7 +40,7 @@ const BrandingTitle = styled(Typography)`
     line-height: 0.75;
     letter-spacing: normal;
     text-align: left;
-    color: #fff;
+    color: rgba(255, 255, 255, 0.65);
 `
 const BrandingTextContainer = styled(Flex)`
   padding-top: 5px;
@@ -86,7 +88,12 @@ const pages: MenuItem[] = [
           <Button type="link" icon={<MailOutlined />}>
           <Text copyable={{ text: '[email protected]' }} style={{ color: '#1677ff' }}>[email protected]</Text>         
           </Button>
-          <Button type="link" icon={<GithubOutlined target = "_blank" />} href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">Join the discussion on GitHub</Button>
+          <div style={{ margin: 'auto' }}>
+            <a type="link" target="_blank" rel="noopener noreferrer" href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">
+              <GithubOutlined />
+              <span style={{ marginLeft: '4px' }}>Join the discussion on GitHub</span>
+            </a>
+          </div>
           </Flex>
           <br/>
         </div>
@@ -96,10 +103,17 @@ const pages: MenuItem[] = [
           <span style={{ color: 'rgba(255, 255, 255, 0.65)'}}>{LABELS[Pages.FEEDBACK]}</span>
         </Button>
       </Popover>
-    ),
+    )
+  }, 
+  {
+    key: Pages.UPGRADE,
+    label: (
+      <UpgradeButton />
+    )
   }
 ]
 
+
 const NotificationContext = React.createContext({messagePlacement: 'topRight'});
 
 const Container = () => {
@@ -128,7 +142,6 @@ const Container = () => {
                   disabledOverflow={true}
                   items={pages}
                   mode="horizontal"
-                  // onClick={handleMenuClick}
                   selectable={false}
                   selectedKeys={[location.pathname]}
                   theme="dark"

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

@@ -84,9 +84,10 @@ const Parameters = () => {
         form.setFieldsValue({ model_parameters: { [field]: value }});
     };
 
-    if (loadingDefaultParams) {
-        return <Spin/>
-    }
+    // if (loadingDefaultParams) {
+    //     return <Spin/>
+    // }
+
     return (
         <>
             <Divider />

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

@@ -14,6 +14,7 @@ import { Usecases, WorkflowType } from './types';
 import { useWizardCtx } from './utils';
 import { useDatasetSize, useGetPromptByUseCase } from './hooks';
 import CustomPromptButton from './CustomPromptButton';
+import get from 'lodash/get';
 
 const { Title } = Typography;
 
@@ -81,14 +82,24 @@ const Prompt = () => {
     // Page Bootstrap requests and useEffect
     const { data: defaultTopics, loading: topicsLoading } = usefetchTopics(useCase);
     const { data: defaultSchema, loading: schemaLoading } = useFetchDefaultSchema();
-    const { data: dataset_size, isLoading: datasetSizeLoading } = useDatasetSize(
+    const { data: dataset_size, isLoading: datasetSizeLoadin, isError, error } = useDatasetSize(
         workflow_type,
         doc_paths,
         input_key,
         input_value,
         output_key
     );
 
+    useEffect(() => {  
+        if (isError) {
+            notification.error({
+                message: 'Error fetching the dataset size',
+                description: get(error, 'error'),
+            });
+        } 
+
+    }, [error, isError]);
+
     useEffect(() => {
         if (defaultTopics) {
             // customTopics is a client-side only fieldValue that persists custom topics added

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

@@ -1,4 +1,4 @@
-import { ModelProviders } from './types';
+import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 
 export const MODEL_PROVIDER_LABELS = {
   [ModelProviders.BEDROCK]: 'AWS Bedrock',
@@ -8,4 +8,35 @@ export const MODEL_PROVIDER_LABELS = {
 export const MIN_SEED_INSTRUCTIONS = 1
 export const MAX_SEED_INSTRUCTIONS = 500;
 export const MAX_NUM_QUESTION = 100; 
-export const DEMO_MODE_THRESHOLD = 25
+export const DEMO_MODE_THRESHOLD = 25;
+
+
+export const USECASE_OPTIONS = [
+    { label: 'Code Generation', value: 'code_generation' },
+    { label: 'Text to SQL', value: 'text2sql' },
+    { label: 'Custom', value: 'custom' }
+];
+
+export const WORKFLOW_OPTIONS = [
+    { label: 'Supervised Fine-Tuning', value: 'sft' },
+    { label: 'Custom Data Generation', value: 'custom' }
+];
+
+export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
+    { label: MODEL_PROVIDER_LABELS[ModelProviders.BEDROCK], value: ModelProviders.BEDROCK},
+    { label: MODEL_PROVIDER_LABELS[ModelProviders.CAII], value: ModelProviders.CAII },
+];
+
+
+export const getModelProvider = (provider: ModelProviders) => {
+    return MODEL_PROVIDER_LABELS[provider];
+};
+
+export const getWorkflowType = (value: string) => {
+    return WORKFLOW_OPTIONS.find((option) => option.value === value)?.label;
+};
+
+export const getUsecaseType = (value: string) => {
+    return USECASE_OPTIONS.find((option) => option.value === value)?.label;
+};
+

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

@@ -166,6 +166,10 @@ export const useGetProjectFiles = (paths: string[]) => {
         },
         body: JSON.stringify(params),
     });
+    if (resp.status !== 200) {
+        const body_error = await resp.json();
+        throw new Error('Error fetching dataset size' + get(body_error, 'error'));
+    }
     const body = await resp.json();
     return get(body, 'dataset_size');
 }
@@ -197,6 +201,7 @@ export const useDatasetSize = (
         },
     );
 
+    console.log('--------------error', error);
     if (isError) {
         console.log('data', error);
         notification.error({

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

@@ -0,0 +1,195 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import React from 'react';
+import { Dataset } from '../Evaluator/types';
+import { Col, Flex, Modal, Row, Space, Table, Tag, Typography } from 'antd';
+import ExampleModal from './ExampleModal';
+import { QuestionSolution } from '../DataGenerator/types';
+import styled from 'styled-components';
+
+const { Text } = Typography;
+
+interface Props {
+    dataset: Dataset;
+}
+
+const StyledTable = styled(Table)`
+  font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+  color:  #5a656d;
+  .ant-table-thead > tr > th {
+    color: #5a656d;
+    border-bottom: 1px solid #eaebec;
+    font-weight: 500;
+    text-align: left;
+    // background: #ffffff;
+    border-bottom: 1px solid #eaebec;
+    transition: background 0.3s ease; 
+  }
+    .ant-table-row {
+        cursor: pointer;
+    }
+  .ant-table-row > td.ant-table-cell {
+    padding: 8px;
+    padding-left: 16px;
+    font-size: 13px;
+    font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    color:  #5a656d;
+    .ant-typography {
+      font-size: 13px;
+      font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    }
+  }
+`;
+
+const StyledTitle = styled.div`
+    margin-bottom: 4px;
+    font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    margin-left: 4px;
+
+`;
+
+const Container = styled.div`  
+   padding: 16px;
+   background-color: #ffffff;
+`;
+
+export const TagsContainer = styled.div`
+  min-height: 30px;
+  display: block;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  .ant-tag {
+    max-width: 150px;
+  }
+  .tag-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+
+
+const ConfigurationTab: React.FC<Props> = ({ dataset }) => {
+    const topics = get(dataset, 'topics', []);
+
+    const exampleColummns = [
+        {
+            title: 'Prompts',
+            dataIndex: 'prompts',
+            ellipsis: true,
+            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
+        },
+        {
+            title: 'Completions',
+            dataIndex: 'completions',
+            ellipsis: true,
+            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
+        },
+    ]
+
+    const parameterColummns = [ 
+        {
+            title: 'Temperature',
+            dataIndex: 'temperature',
+            ellipsis: true,
+            render: (temperature: number) => <>{temperature}</>
+        },
+        {
+            title: 'Top K',
+            dataIndex: 'top_k',
+            ellipsis: true,
+            render: (top_k: number) => <>{top_k}</>
+        },
+        {
+            title: 'Top P',
+            dataIndex: 'top_p',
+            ellipsis: true,
+            render: (top_p: number) => <>{top_p}</>
+        },
+
+    ];
+    console.log('topics:', topics);
+    console.log('dataset:', dataset);
+    console.log('examples:', dataset.examples);
+
+    return (
+        <Container>
+            <Row style={{ marginBottom: '16px', marginTop: '8px'  }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Custom Prompt</StyledTitle>
+                        <Text copyable={{
+                            text: dataset?.custom_prompt,
+                            tooltips: ['Copy Prompt', 'Copied!'],
+                        }}>
+                            {dataset?.custom_prompt}
+                        </Text>
+                    </Flex>
+                </Col>
+            </Row>    
+            {!isEmpty(topics) && 
+            <Row style={{ marginTop: '8px', marginBottom: '8px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Seed Instructions</StyledTitle>
+                        <TagsContainer>
+                            <Space size={[0, 'middle']} wrap>
+                                {topics.map((tag: string) => (
+                                    <Tag key={tag}>
+                                        <div className="tag-title" title={tag}>
+                                            {tag}
+                                        </div>
+                                    </Tag>
+                                ))}
+                            </Space>
+                        </TagsContainer>        
+                    </Flex>
+                </Col>
+            </Row>}            
+            <Row style={{ marginTop: '16px', marginBottom: '8px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Examples</StyledTitle>
+                        <StyledTable
+                            bordered
+                            columns={exampleColummns}
+                            dataSource={dataset.examples || []}
+                            pagination={false}
+                            onRow={(record: { question: string, solution: string}) => ({
+                                onClick: () => Modal.info({
+                                    title: 'View Details',
+                                    content: <ExampleModal {...record} />,
+                                    icon: undefined,
+                                    maskClosable: false,
+                                    width: 1000
+                                })
+                             })}
+                            rowKey={(_record, index) => `summary-examples-table-${index}`}
+                        />
+                    </Flex>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: '16px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Parameters</StyledTitle>
+                        <StyledTable
+                            bordered
+                            columns={parameterColummns}
+                            dataSource={[dataset?.model_parameters]}
+                            pagination={false}
+                            rowKey={(_record, index) => `parameters-table-${index}`}
+                        />
+                    </Flex>
+                </Col>
+            </Row>
+        </Container>
+
+    );
+};
+
+export default ConfigurationTab;
+
+