Skip to content

Commit 29f244f

Browse files
vkeivanvkeivan
authored
Merge pull request #90 from cloudera/DSE-45299
DSE-45878 & DSE-45299
2 parents 2918730 + a4a16b9 commit 29f244f

File tree

9 files changed

+189
-36
lines changed

9 files changed

+189
-36
lines changed

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

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { MODEL_PROVIDER_LABELS } from './constants';
1010
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
1111
import { useWizardCtx } from './utils';
1212
import FileSelectorButton from './FileSelectorButton';
13+
import UseCaseSelector from './UseCaseSelector';
1314

1415

1516
const StepContainer = styled(Flex)`
@@ -224,24 +225,7 @@ const Configure = () => {
224225
</Form.Item>
225226
{(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
226227
formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) &&
227-
<Form.Item
228-
name='use_case'
229-
label='Template'
230-
rules={[
231-
{ required: true }
232-
]}
233-
tooltip='A specialize template for generating your dataset'
234-
labelCol={labelCol}
235-
shouldUpdate
236-
>
237-
<Select placeholder={'Select a template'}>
238-
{USECASE_OPTIONS.map(option =>
239-
<Select.Option key={option.value} value={option.value}>
240-
{option.label}
241-
</Select.Option>
242-
)}
243-
</Select>
244-
</Form.Item>}
228+
<UseCaseSelector />}
245229

246230
{(
247231
formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
5959
const [showModal, setShowModal] = useState(false);
6060
const [disabled, setDisabled] = useState(false);
6161
const custom_prompt_instructions = Form.useWatch('custom_prompt_instructions', { form, preserve: true });
62-
console.log('custom_prompt_instructions', custom_prompt_instructions);
6362

6463
const mutation = useMutation({
6564
mutationFn: fetchCustomPrompt

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

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { useMutation } from "@tanstack/react-query";
99
import { useFetchExamples } from '../../api/api';
1010
import TooltipIcon from '../../components/TooltipIcon';
1111
import PCModalContent from './PCModalContent';
12-
import { File, QuestionSolution, WorkflowType } from './types';
12+
import { ExampleType, File, QuestionSolution, WorkflowType } from './types';
1313
import FileSelectorButton from './FileSelectorButton';
1414

15-
import { fetchFileContent } from './hooks';
15+
import { fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
1616
import { useState } from 'react';
1717
import FreeFormExampleTable from './FreeFormExampleTable';
1818

19-
const { Title } = Typography;
19+
const { Title, Text } = Typography;
2020
const Container = styled.div`
2121
padding-bottom: 10px
2222
`
@@ -48,10 +48,7 @@ const StyledContainer = styled.div`
4848

4949
const MAX_EXAMPLES = 5;
5050

51-
enum ExampleType {
52-
FREE_FORM = 'freeform',
53-
PROMPT_COMPLETION = 'promptcompletion'
54-
}
51+
5552

5653
const Examples: React.FC = () => {
5754
const form = Form.useFormInstance();
@@ -90,13 +87,13 @@ const Examples: React.FC = () => {
9087
title: 'Prompts',
9188
dataIndex: 'question',
9289
ellipsis: true,
93-
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
90+
render: (_text: QuestionSolution, record: QuestionSolution) => <Text>{record.question}</Text>
9491
},
9592
{
9693
title: 'Completions',
9794
dataIndex: 'solution',
9895
ellipsis: true,
99-
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
96+
render: (_text: QuestionSolution, record: QuestionSolution) => <Text>{record.solution}</Text>
10097
},
10198
{
10299
title: 'Actions',
@@ -178,13 +175,24 @@ const Examples: React.FC = () => {
178175
/>
179176
</Flex>
180177
)
181-
}},
178+
}
179+
},
182180
];
183181
const dataSource = Form.useWatch('examples', form);
184-
const { data: examples, loading: examplesLoading } = useFetchExamples(form.getFieldValue('use_case'));
182+
const { examples, exmpleFormat, isLoading: examplesLoading } =
183+
useGetExamplesByUseCase(form.getFieldValue('use_case'));
184+
185+
// update examples
185186
if (!dataSource && examples) {
186-
form.setFieldValue('examples', examples.examples)
187+
form.setFieldValue('examples', examples)
187188
}
189+
useEffect(() => {
190+
if (!isEmpty(examples) && !isEmpty(exmpleFormat)) {
191+
setExampleType(exmpleFormat as ExampleType);
192+
form.setFieldValue('examples', examples || []);
193+
}
194+
}, [examples, exmpleFormat]);
195+
188196
const rowLimitReached = form.getFieldValue('examples')?.length === MAX_EXAMPLES;
189197
const workflowType = form.getFieldValue('workflow_type');
190198

@@ -299,6 +307,8 @@ const Examples: React.FC = () => {
299307
</Header>
300308
{exampleType === ExampleType.FREE_FORM && !isEmpty(mutation.data) &&
301309
<FreeFormExampleTable data={mutation.data}/>}
310+
{exampleType === ExampleType.FREE_FORM && form.getFieldValue('use_case') === 'lending_data' &&
311+
<FreeFormExampleTable data={form.getFieldValue('examples')}/>}
302312
{exampleType === ExampleType.FREE_FORM && isEmpty(mutation.data) && !isEmpty(values.examples) &&
303313
<FreeFormExampleTable data={values.examples}/>}
304314
{exampleType === ExampleType.FREE_FORM && isEmpty(mutation.data) && isEmpty(values.examples) &&

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Form, Select } from "antd";
2+
import { FunctionComponent, useEffect, useState } from "react";
3+
import { useGetUseCases } from "./hooks";
4+
import { UseCase } from "../../types";
5+
import get from "lodash/get";
6+
7+
interface Props {}
8+
9+
10+
const UseCaseSelector: FunctionComponent<Props> = () => {
11+
const [useCases, setUseCases] = useState<UseCase[]>([]);
12+
const useCasesReq = useGetUseCases();
13+
14+
useEffect(() => {
15+
if (useCasesReq.data) {
16+
let _useCases = get(useCasesReq, 'data.usecases', []);
17+
_useCases = _useCases.map((useCase: any) => ({
18+
...useCase,
19+
label: useCase.name,
20+
value: useCase.id
21+
}));
22+
setUseCases(_useCases);
23+
}
24+
}, [useCasesReq.data]);
25+
26+
27+
return (
28+
<Form.Item
29+
name='use_case'
30+
label='Template'
31+
rules={[
32+
{ required: true }
33+
]}
34+
tooltip='A specialized template for generating your dataset'
35+
labelCol={{
36+
span: 8
37+
}}
38+
shouldUpdate
39+
>
40+
<Select placeholder={'Select a template'}>
41+
{useCases.map(option =>
42+
<Select.Option key={option.value} value={option.value}>
43+
{option.label}
44+
</Select.Option>
45+
)}
46+
</Select>
47+
</Form.Item>
48+
);
49+
}
50+
51+
export default UseCaseSelector;

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

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import toNumber from 'lodash/toNumber';
44
import isEmpty from 'lodash/isEmpty';
55
import isString from 'lodash/isString';
66
import { useMutation, useQuery } from '@tanstack/react-query';
7-
import { WorkflowType } from './types';
7+
import { ExampleType, WorkflowType } from './types';
8+
import { first } from 'lodash';
89

910
const BASE_API_URL = import.meta.env.VITE_AMP_URL;
1011

@@ -244,4 +245,83 @@ export const useDatasetSize = (
244245
isError,
245246
error
246247
};
247-
}
248+
}
249+
250+
export const fetchUseCases = async () => {
251+
const resp = await fetch(`${BASE_API_URL}/use-cases`, {
252+
method: 'GET'
253+
});
254+
const body = await resp.json();
255+
return body;
256+
}
257+
258+
export const useGetUseCases = () => {
259+
const { data, isLoading, isError, error, isFetching } = useQuery(
260+
{
261+
queryKey: ['useCases'],
262+
queryFn: () => fetchUseCases(),
263+
refetchOnWindowFocus: false,
264+
}
265+
);
266+
return {
267+
data,
268+
isLoading: isLoading || isFetching,
269+
isError,
270+
error
271+
};
272+
}
273+
274+
export const fetchExamplesByUseCase = async (use_case: string) => {
275+
const resp = await fetch(`${BASE_API_URL}/${isEmpty(use_case) ? 'custom' : use_case}/gen_examples`, {
276+
method: 'GET'
277+
});
278+
const body = await resp.json();
279+
return body;
280+
}
281+
282+
export const useGetExamplesByUseCase = (use_case: string) => {
283+
const { data, isLoading, isError, error, isFetching } = useQuery(
284+
{
285+
queryKey: ['fetchUseCaseTopics', fetchExamplesByUseCase],
286+
queryFn: () => fetchExamplesByUseCase(use_case),
287+
refetchOnWindowFocus: false,
288+
}
289+
);
290+
291+
if (isError) {
292+
notification.error({
293+
message: 'Error',
294+
description: `An error occurred while fetching the use case examples.\n ${error?.message}`
295+
});
296+
}
297+
298+
299+
let examples = [];
300+
let exmpleFormat: ExampleType | null = null;
301+
if (!isEmpty(data) && !isEmpty(data?.examples)) {
302+
examples = get(data, 'examples', []);
303+
exmpleFormat = getExampleType(examples);
304+
}
305+
306+
return {
307+
data,
308+
isLoading: isLoading || isFetching,
309+
isError,
310+
error,
311+
examples,
312+
exmpleFormat
313+
};
314+
}
315+
316+
export const getExampleType = (data: object[]) => {
317+
if (!isEmpty(data)) {
318+
const row = first(data);
319+
const keys = Object.keys(row as object);
320+
if (keys.length === 2) {
321+
return ExampleType.PROMPT_COMPLETION;
322+
}
323+
return ExampleType.FREE_FORM;
324+
}
325+
return null;
326+
}
327+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,9 @@ export enum TechniqueType {
119119
SFT = 'sft',
120120
CUSTOME_WORKFLOW = 'custom_workflow',
121121
FREE_FORM = 'freeform'
122+
}
123+
124+
export enum ExampleType {
125+
FREE_FORM = 'freeform',
126+
PROMPT_COMPLETION = 'promptcompletion'
122127
}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Button, Col, Flex, Layout, Row, Image } from 'antd';
1+
import toString from 'lodash/toString';
2+
import { Button, Col, Flex, Layout, Row, Image, Checkbox } from 'antd';
23
import React from 'react';
34
import styled from 'styled-components';
45
import SDGIcon from '../../assets/sdg-landing.svg';
56
import LightBulbIcon from '../../assets/ic-lightbulb.svg';
67
import QueryPromptIcon from '../../assets/ic-query-prompt.svg';
78
import NumbersIcon from '../../assets/ic-numbers.svg';
9+
import { CheckboxChangeEvent } from 'antd/es/checkbox';
810

911
const { Content } = Layout;
1012

@@ -107,6 +109,11 @@ const InfoSection = styled.div`
107109

108110
const WelcomePage: React.FC = () => {
109111

112+
const onChange = (e: CheckboxChangeEvent) => {
113+
const checked = e.target.checked;
114+
window.localStorage.setItem('sds_mute_welcome_page', toString(checked));
115+
}
116+
110117
return (
111118
<Layout>
112119
<StyledContent>
@@ -148,6 +155,10 @@ const WelcomePage: React.FC = () => {
148155
<br/>
149156
<Flex style={{ marginTop: '32px' }}>
150157
<Button type="primary" href="/home">Get Started</Button>
158+
159+
<div style={{ marginLeft: '24px', marginTop: '8px' }}>
160+
<Checkbox onChange={onChange}>{`Don't show me this again`}</Checkbox>
161+
</div>
151162
</Flex>
152163
</LeftSection>
153164
</Col>

‎app/client/src/routes.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,20 @@ import EvaluationDetailsPage from "./pages/EvaluationDetails/EvaluationDetailsPa
1212
//import TelemetryDashboard from "./components/TelemetryDashboard";
1313

1414

15+
const isWelcomePageMuted = () => {
16+
return window.localStorage.getItem('sds_mute_welcome_page') === 'true';
17+
}
18+
1519
const router = createBrowserRouter([
1620
{
1721
path: '/',
1822
element: <Layout/>,
1923
children: [
2024
{
2125
path: '/', // Redirect root to Pages.WELCOME
22-
element: <Navigate to={Pages.WELCOME} replace />,
26+
element: isWelcomePageMuted() ? <HomePage key={Pages.HOME}/> :
27+
<Navigate to={Pages.WELCOME} replace />,
28+
errorElement: <ErrorPage />
2329
},
2430
{
2531
path: Pages.HOME,

‎app/client/src/types.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,11 @@ export const EXPORT_TYPE_LABELS: Record<ExportType, string> = {
4545
export type JobStatus = 'ENGINE_STOPPED' | 'ENGINE_SUCCEEDED' | 'ENGINE_TIMEDOUT' | 'ENGINE_SCHEDULING' | 'ENGINE_RUNNING' | 'null' | 'default';
4646

4747

48-
export const HuggingFaceIconUrl = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg";
48+
export const HuggingFaceIconUrl = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg";
49+
50+
export interface UseCase {
51+
name: string;
52+
id: string;
53+
label: string;
54+
value: string;
55+
}

0 commit comments

Comments
 (0)