Skip to content

Commit d0fb070

Browse files
author
Keivan Vosoughi
committed
Initial Checkin for free form data generation
Add Free Form Workflow Type Add Free From Prompt Add use case for free form workflow type Usecase fix for freeform Show Seed Instructions for FreeForm Ftech File Content Add AG Grid Add Modules Add Themes Adding FreeFormTable Fix Examples Table for Freeform Dataset Fix Dataset Details Page for Freeforms Add Dataset Viewer Hide Exmaples Buttons for Freeforms Fix for Examples in Dataset Details Page (freeform) Update Examples Message Fix for very long seeds Fix for Dataset Details Page Fix for Freeform Table in Results Page Adding Re-generate Dataset Changes Add Evaluation for Freeforms Fix for custom prompt modal Fix Lint Errors
1 parent f883e3a commit d0fb070

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+909
-255
lines changed

‎app/client/eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default tseslint.config(
2323
'warn',
2424
{ allowConstantExport: true },
2525
],
26+
'@typescript-eslint/no-explicit-any': ['warn', { 'fixToUnknown': true, 'ignoreRestArgs': false }]
2627
},
2728
},
2829
)

‎app/client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"@mui/icons-material": "6.1.7",
1717
"@mui/material": "6.1.7",
1818
"@tanstack/react-query": "5.66.0",
19+
"ag-grid-community": "33.2.4",
20+
"ag-grid-react":"33.2.4",
1921
"antd": "5.22.1",
2022
"axios": "1.6.7",
2123
"lodash": "4.17.21",

‎app/client/src/Container.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,6 @@ const PageHeader = styled(Header)`
4848
height: fit-content;
4949
padding: 5px 15px
5050
`;
51-
const StyledImg = styled.img`
52-
height: ${props => props?.height && `${props.height}px`}
53-
`
5451

5552
const StyledText = styled.div`
5653
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

‎app/client/src/api/api.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@ export const useFetchModels = (): UseFetchApiReturn<FetchModelsResp> => {
2727
return useFetch(url);
2828
}
2929

30-
export const useFetchDefaultPrompt = (useCase: string): UseFetchApiReturn<FetchDefaultPromptResp> => {
31-
const url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_prompt`;
30+
export const useFetchDefaultPrompt = (useCase: string, workflowType?: WorkerType): UseFetchApiReturn<FetchDefaultPromptResp> => {
31+
let url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_prompt`;
32+
if (workflowType && workflowType === 'freeform') {
33+
url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_freeform_prompt`;
34+
}
3235
return useFetch(url);
3336
}
3437

@@ -42,7 +45,7 @@ export const useFetchDefaultModelParams = (): UseFetchApiReturn<FetchDefaultPara
4245
return useFetch(url);
4346
}
4447

45-
export const useTriggerDatagen = <T>() => {
46-
const genDatasetUrl = `${import.meta.env.VITE_AMP_URL}/synthesis/generate`;
48+
export const useTriggerDatagen = <T>(workflow_type: string) => {
49+
const genDatasetUrl = `${import.meta.env.VITE_AMP_URL}/synthesis/${workflow_type === 'freeform' ? 'freeform' : 'generate'}`;
4750
return usePostApi<T>(genDatasetUrl);
4851
}

‎app/client/src/api/hooks.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,15 @@ interface UsePostApiReturn<T> {
106106
data: T | null;
107107
loading: boolean;
108108
error: Error | null;
109-
triggerPost: (body: Record<string, any>) => Promise<void>;
109+
triggerPost: (body: Record<string, unknown>) => Promise<void>;
110110
}
111111

112112
export function usePostApi<T>(url: string): UsePostApiReturn<T> {
113113
const [data, setData] = useState<T | null>(null);
114114
const [loading, setLoading] = useState(false);
115115
const [error, setError] = useState<Error | null>(null);
116116

117-
const triggerPost = async (body: Record<string, any>) => {
117+
const triggerPost = async (body: Record<string, unknown>) => {
118118
setLoading(true);
119119
setError(null); // Reset error on each request
120120

‎app/client/src/components/RouteAccessControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Navigate, useLocation } from "react-router-dom";
1010
*/
1111
interface RouteACProps{
1212
element: ReactNode;
13-
validator: (state: any | null) => boolean;
13+
validator: (state: unknown | null) => boolean;
1414
reroutePath?: string;
1515
}
1616
const RouteAccessControl: FC<RouteACProps> = ({ element, validator, reroutePath = '/' }) => {

‎app/client/src/components/TelemetryDashboard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { useState, useEffect } from 'react';
22
import {
33
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
4-
LineChart, Line, AreaChart, Area
4+
LineChart, Line
55
} from 'recharts';
66
import axios from 'axios';
77
import {
88
Card, Typography, Row, Col, Statistic, Select, Spin, Empty, Table, Tag, Tabs, Alert, Progress, Space, Badge, Button
99
} from 'antd';
1010
import {
1111
DashboardOutlined, ApiOutlined, CloudServerOutlined, RocketOutlined, SyncOutlined,
12-
PieChartOutlined, BarChartOutlined, CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
12+
CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
1313
} from '@ant-design/icons';
1414

1515
const { Title, Text } = Typography;
@@ -19,7 +19,7 @@ const SUCCESS_COLOR = '#52c41a';
1919
const ERROR_COLOR = '#f5222d';
2020
const WARNING_COLOR = '#faad14';
2121
const INFO_COLOR = '#1890ff';
22-
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
22+
// const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
2323

2424
const TelemetryDashboard = () => {
2525
const [loading, setLoading] = useState(true);

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

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import endsWith from 'lodash/endsWith';
22
import isEmpty from 'lodash/isEmpty';
3+
import isFunction from 'lodash/isFunction';
34
import { useEffect, useState } from 'react';
45
import { Flex, Form, Input, Select, Typography } from 'antd';
56
import styled from 'styled-components';
@@ -10,6 +11,7 @@ import { ModelProviders, ModelProvidersDropdownOpts } from './types';
1011
import { useWizardCtx } from './utils';
1112
import FileSelectorButton from './FileSelectorButton';
1213

14+
1315
const StepContainer = styled(Flex)`
1416
background: white;
1517
padding: 40px 0px;
@@ -31,7 +33,8 @@ export const USECASE_OPTIONS = [
3133

3234
export const WORKFLOW_OPTIONS = [
3335
{ label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' },
34-
{ label: 'Custom Data Generation', value: 'custom' }
36+
{ label: 'Custom Data Generation', value: 'custom' },
37+
{ label: 'Freefrom Data Generation', value: 'freeform' }
3538
];
3639

3740
export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
@@ -55,16 +58,23 @@ const Configure = () => {
5558
delete values.output_value;
5659

5760
const allFieldsFilled = Object.values(values).every(value => Boolean(value));
58-
if (allFieldsFilled) {
59-
setIsStepValid && setIsStepValid(true)
60-
} else {
61-
setIsStepValid && setIsStepValid(false)
61+
if (allFieldsFilled && isFunction(setIsStepValid)) {
62+
setIsStepValid(true)
63+
} else if (isFunction(setIsStepValid)) {
64+
setIsStepValid(false)
6265
}
6366
}
6467
useEffect(() => {
6568
validateForm()
6669
}, [form, formData])
6770

71+
// keivan
72+
useEffect(() => {
73+
if (formData && formData?.inference_type === undefined) {
74+
form.setFieldValue('inference_type', ModelProviders.CAII);
75+
}
76+
}, [formData]);
77+
6878
const labelCol = {
6979
span: 8
7080
};
@@ -83,7 +93,7 @@ const Configure = () => {
8393
form.setFieldValue('doc_paths', paths);
8494
}
8595

86-
const onFilesChange = (selections: any) => {
96+
const onFilesChange = (selections: unknown) => {
8797
if (Array.isArray(selections) && !isEmpty(selections)) {
8898
const paths = selections.map((file: File) => (
8999
{
@@ -106,7 +116,6 @@ const Configure = () => {
106116
setSelectedFiles([]);
107117
}
108118
}
109-
110119

111120
return (
112121
<StepContainer justify='center'>
@@ -209,7 +218,8 @@ const Configure = () => {
209218
)}
210219
</Select>
211220
</Form.Item>
212-
{formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING &&
221+
{(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
222+
formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) &&
213223
<Form.Item
214224
name='use_case'
215225
label='Template'
@@ -234,7 +244,7 @@ const Configure = () => {
234244
formData?.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) &&
235245
<Form.Item
236246
name='doc_paths'
237-
label='Files'
247+
label='Context'
238248
labelCol={labelCol}
239249
dependencies={['workflow_type']}
240250
shouldUpdate
@@ -319,6 +329,23 @@ const Configure = () => {
319329
<Input />
320330
</Form.Item>
321331
</>}
332+
{/* {formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION ||
333+
<Form.Item
334+
name='example_path'
335+
label='Example File'
336+
labelCol={labelCol}
337+
dependencies={['workflow_type']}
338+
shouldUpdate
339+
validateTrigger="['onBlur','onChange']"
340+
validateFirst
341+
rules={[]}
342+
>
343+
<Flex>
344+
<Select placeholder={'Select example file'} value={selectedFiles || []} onChange={onFilesChange} allowClear/>
345+
<Input placeholder='Select example file' disabled />
346+
<FileSelectorButton onAddFiles={onAddExampleFiles} workflowType={form.getFieldValue('workflow_type')} />
347+
</Flex>
348+
</Form.Item>} */}
322349
</FormContainer>
323350
</StepContainer>
324351
)

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

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { Button, Flex, Form, Input, Modal, notification, Spin } from "antd";
1+
import { Button, Form, Input, Modal, notification } from "antd";
22
import { useEffect, useState } from "react";
33
import { useMutation } from "@tanstack/react-query";
44
import styled from "styled-components";
5-
import { LoadingOutlined } from '@ant-design/icons';
6-
import { fetchCustomPrompt, fetchPrompt } from "./hooks";
5+
import { fetchCustomPrompt } from "./hooks";
76
import Loading from "../Evaluator/Loading";
87

98
interface Props {
@@ -16,9 +15,30 @@ interface Props {
1615

1716
export const StyledTextArea = styled(Input.TextArea)`
1817
margin-bottom: 10px !important;
19-
min-height: 175px !important;
18+
min-height: 275px !important;
19+
margin-bottom: 10px !important;
20+
padding: 15px 20px !important;
2021
`;
2122

23+
const StyledModal = styled(Modal)`
24+
.ant-modal-content {
25+
max-height: 90vh;
26+
// height: 760px;
27+
height: 85vh;
28+
width: 750px;
29+
.ant-modal-body {
30+
padding-top: 0;
31+
min-height: 70vh;
32+
}
33+
}
34+
// .ant-modal-content {
35+
// border-radius: 8px;
36+
// box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
37+
// background-color: #ffffff;
38+
// padding: 24px;
39+
// }
40+
`
41+
2242
const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_endpoint, use_case, setPrompt }) => {
2343
const [form] = Form.useForm();
2444
const [showModal, setShowModal] = useState(false);
@@ -39,7 +59,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
3959
setShowModal(false);
4060
}
4161
}, [mutation.error, mutation.isSuccess]);
42-
62+
4363
const onFinish = async () => {
4464
const custom_prompt = form.getFieldValue('custom_prompt_instructions');
4565
try {
@@ -67,7 +87,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
6787
<Button onClick={() => setShowModal(true)} style={{ marginLeft: '8px' }}>Generate Custom Prompt</Button>
6888
{showModal &&
6989
(
70-
<Modal
90+
<StyledModal
7191
visible={showModal}
7292
okText={`Generate`}
7393
title={`Generate Cutom Prompt`}
@@ -80,16 +100,18 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
80100
initialValues={initialValues}
81101
onFinish={onSubmit}
82102
style={{ marginTop: '24px' }}
83-
disabled={mutation.isLoading}
103+
disabled={mutation.isPending}
84104
>
85-
{mutation.isLoading &&
105+
{mutation.isPending &&
86106
<Loading />
87107
}
88108

89109
<Form.Item
90110
name='custom_prompt_instructions'
91111
label='Custom Prompt Instructions'
92112
rules={[{ required: true, message: "This field is required." }]}
113+
labelCol={{ span: 24 }}
114+
wrapperCol={{ span: 24 }}
93115
>
94116
<StyledTextArea
95117
autoSize
@@ -98,7 +120,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
98120
</Form.Item>
99121
</Form>
100122

101-
</Modal>
123+
</StyledModal>
102124
)
103125
}
104126
</>

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import isEmpty from 'lodash/isEmpty';
22
import isString from 'lodash/isString';
33
import { useRef, useState } from 'react';
44
import { useLocation } from 'react-router-dom';
5-
import { Button, Flex, Form, Layout, Steps, Typography } from 'antd';
5+
import { Button, Flex, Form, Layout, Steps } from 'antd';
66
import type { FormInstance } from 'antd';
77
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
88
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -17,6 +17,7 @@ import Finish from './Finish';
1717

1818
import { DataGenWizardSteps, WizardStepConfig, WorkflowType } from './types';
1919
import { WizardCtx } from './utils';
20+
import { useGetDatasetDetails } from '../DatasetDetails/hooks';
2021

2122
const { Content } = Layout;
2223
// const { Title } = Typography;
@@ -98,10 +99,14 @@ const DataGenerator = () => {
9899
const [isStepValid, setIsStepValid] = useState<boolean>(false);
99100
// Data passed from listing table to prepopulate form
100101
const location = useLocation();
101-
console.log('DatGenerator >> location?.state?.data:', location?.state?.data);
102+
console.log('location?.state?.data:', location?.state?.data);
102103
const initialData = location?.state?.data;
104+
105+
const datasetDetailsReq = location?.state?.data && useGetDatasetDetails(location?.state?.data?.generate_file_name)
103106
if (initialData?.technique) {
104-
initialData.workflow_type = initialData?.technique === 'sft' ? WorkflowType.SUPERVISED_FINE_TUNING :
107+
initialData.workflow_type = initialData?.technique === 'sft' ?
108+
WorkflowType.SUPERVISED_FINE_TUNING :
109+
initialData?.technique === 'freeform' ? WorkflowType.FREE_FORM_DATA_GENERATION :
105110
WorkflowType.CUSTOM_DATA_GENERATION;
106111
}
107112
if (Array.isArray(initialData?.doc_paths) && !isEmpty(initialData?.doc_paths) ) {
@@ -111,6 +116,12 @@ const DataGenerator = () => {
111116
}));
112117

113118
}
119+
120+
// if (datasetDetailsReq && datasetDetailsReq.data &&
121+
// !isEmpty(datasetDetailsReq?.data?.generate_file_name)) {
122+
// initialData.example_path = initialData?.example_path;
123+
// }
124+
114125
if (Array.isArray(initialData?.input_paths) && !isEmpty(initialData?.input_paths) ) {
115126
initialData.doc_paths = initialData?.input_paths.map((path: string) => ({
116127
value: path,

0 commit comments

Comments
 (0)