Skip to content

Commit 447a043

Browse files
author
Keivan Vosoughi
committed
Adding Settings Page
Add Settings Page Add Models Table
1 parent 09431f3 commit 447a043

File tree

9 files changed

+243
-4
lines changed

9 files changed

+243
-4
lines changed

‎app/client/src/Container.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ const pages: MenuItem[] = [
9595
<Link to={`${Pages.EXPORTS}`}>{LABELS[Pages.EXPORTS]}</Link>
9696
),
9797
},
98+
{
99+
key: Pages.SETTINGS,
100+
label: (
101+
<Link to={`${Pages.SETTINGS}`}>{LABELS[Pages.SETTINGS]}</Link>
102+
),
103+
},
98104

99105
// {
100106
// key: Pages.TELEMETRY,

‎app/client/src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const LABELS = {
1212
[Pages.EXPORTS]: 'Exports',
1313
[Pages.HISTORY]: 'History',
1414
[Pages.FEEDBACK]: 'Feedback',
15+
[Pages.SETTINGS]: 'Settings',
1516
//[Pages.TELEMETRY]: 'Telemetry',
1617
[ModelParameters.TEMPERATURE]: 'Temperature',
1718
[ModelParameters.TOP_K]: 'Top K',

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@ import endsWith from 'lodash/endsWith';
22
import isEmpty from 'lodash/isEmpty';
33
import isFunction from 'lodash/isFunction';
44
import { FunctionComponent, useEffect, useState } from 'react';
5-
import { Flex, Form, FormInstance, Input, Select, Typography } from 'antd';
5+
import { Flex, Form, Input, Select, Typography } from 'antd';
66
import styled from 'styled-components';
77
import { File, WorkflowType } from './types';
88
import { useFetchModels } from '../../api/api';
99
import { MODEL_PROVIDER_LABELS } from './constants';
1010
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
11-
import { getWizardModel, getWizardModeType, useWizardCtx } from './utils';
11+
import { getWizardModeType, useWizardCtx } from './utils';
1212
import FileSelectorButton from './FileSelectorButton';
1313
import UseCaseSelector from './UseCaseSelector';
1414
import { useLocation, useParams } from 'react-router-dom';
1515
import { WizardModeType } from '../../types';
16+
import get from 'lodash/get';
17+
import forEach from 'lodash/forEach';
1618

1719

1820
const StepContainer = styled(Flex)`
@@ -155,6 +157,33 @@ const Configure: FunctionComponent = () => {
155157
}
156158
}
157159

160+
const getModelsGroupOptions = (models: any) => {
161+
if (isEmpty(models)) {
162+
return [];
163+
}
164+
const options = [];
165+
const modelTypes = Object.keys(models);
166+
console.log('modelTypes', modelTypes);
167+
forEach(modelTypes, (modelType: string) => {
168+
const models = get(modelTypes, modelType);
169+
console.log('models', models);
170+
const children = models.map((model: string) => ({
171+
label: <span>${model}</span>,
172+
value: model
173+
}))
174+
const groupOption = {
175+
label: <span>${modelType}</span>,
176+
title: modelType,
177+
options: children,
178+
};
179+
options.push(groupOption);
180+
181+
});
182+
}
183+
184+
console.log('data?.models', data?.models);
185+
console.log(getModelsGroupOptions(data?.models))
186+
158187
return (
159188
<StepContainer justify='center'>
160189
<FormContainer vertical>

‎app/client/src/pages/Datasets/DatasetsPage.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Col, Flex, Input, Layout, Row, Table, TableProps, Tooltip, notification
44
import styled from 'styled-components';
55
import Paragraph from 'antd/es/typography/Paragraph';
66
import { useDatasets } from '../Home/hooks';
7-
import { ExportResult } from '../../components/Export/ExportModal';
87
import { SearchProps } from 'antd/es/input';
98
import Loading from '../Evaluator/Loading';
109
import { Dataset } from '../Evaluator/types';

‎app/client/src/pages/Settings/ModelProvidersTable.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Col, Row } from 'antd';
2+
3+
4+
const ModelPovidersTable: React.FC = () => {
5+
6+
7+
return (
8+
<Row>
9+
<Col sm={24}>
10+
11+
</Col>
12+
</Row>
13+
);
14+
15+
}
16+
17+
export default ModelPovidersTable;
18+

‎app/client/src/pages/Settings/SettingsPage.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { Col, Layout, Row, Table } from "antd";
2+
import { Content } from "antd/es/layout/layout";
3+
import styled from "styled-components";
4+
import { useModelProviders } from "./hooks";
5+
import get from "lodash/get";
6+
import { sortItemsByKey } from "../../utils/sortutils";
7+
import Paragraph from "antd/es/typography/Paragraph";
8+
import { render } from "@testing-library/react";
9+
import StyledTitle from "../Evaluator/StyledTitle";
10+
11+
12+
13+
const StyledContent = styled(Content)`
14+
padding: 24px;
15+
background-color: #f5f7f8;
16+
`;
17+
18+
interface CAIIModel {
19+
model: string;
20+
endpoint: string;
21+
}
22+
23+
interface Model {
24+
name: string;
25+
}
26+
27+
const StyledTable = styled(Table)`
28+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
29+
color: #5a656d;
30+
.ant-table-thead > tr > th {
31+
color: #5a656d;
32+
border-bottom: 1px solid #eaebec;
33+
font-weight: 500;
34+
text-align: left;
35+
// background: #ffffff;
36+
border-bottom: 1px solid #eaebec;
37+
transition: background 0.3s ease;
38+
}
39+
.ant-table-row > td.ant-table-cell {
40+
padding: 8px;
41+
padding-left: 16px;
42+
font-size: 13px;
43+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
44+
color: #5a656d;
45+
.ant-typography {
46+
font-size: 13px;
47+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
48+
}
49+
}
50+
`;
51+
52+
const StyledParagraph = styled(Paragraph)`
53+
font-size: 13px;
54+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
55+
color: #5a656d;
56+
`;
57+
58+
const SettingsPage: React.FC = () => {
59+
const filteredModelsReq = useModelProviders();
60+
console.log('filteredModelsReq', filteredModelsReq);
61+
62+
const caiiModels = get(filteredModelsReq, 'data.models.CAII.enabled', []);
63+
const awsModels = get(filteredModelsReq, 'data.models.aws_bedrock.enabled', []);
64+
const models = awsModels.map((model: string) => ({
65+
name: model
66+
}))
67+
68+
const modelProvidersColumns = [{
69+
key: 'model',
70+
title: 'Model',
71+
dataIndex: 'model',
72+
width: 200,
73+
sorter: sortItemsByKey('model')
74+
}, {
75+
key: 'endpoint',
76+
title: 'Endpoint',
77+
dataIndex: 'endpoint',
78+
width: 300,
79+
sorter: sortItemsByKey('endpoint'),
80+
render: (endpoint: string) => <StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{endpoint}</StyledParagraph>
81+
}];
82+
83+
84+
const modelColumns = [{
85+
key: 'model',
86+
title: 'Model',
87+
dataIndex: 'model',
88+
width: 200,
89+
sorter: sortItemsByKey('model')
90+
}];
91+
92+
return (
93+
<Layout>
94+
<StyledContent>
95+
<Row>
96+
<Col sm={24}>
97+
<StyledTitle style={{ fontWeight: 400}}>{'Models'}</StyledTitle>
98+
<StyledTable
99+
rowKey={(row: Model) => `${row?.model}`}
100+
tableLayout="fixed"
101+
columns={modelColumns}
102+
dataSource={caiiModels || [] as Model[]} />
103+
</Col>
104+
</Row>
105+
<Row>
106+
<Col sm={24}>
107+
<StyledTitle style={{ fontWeight: 400}}>{'CAII Models'}</StyledTitle>
108+
<StyledTable
109+
rowKey={(row: CAIIModel) => `${row?.model}`}
110+
tableLayout="fixed"
111+
columns={modelProvidersColumns}
112+
dataSource={caiiModels || [] as CAIIModel[]} />
113+
</Col>
114+
</Row>
115+
</StyledContent>
116+
</Layout>
117+
);
118+
119+
}
120+
121+
export default SettingsPage;

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useQuery } from "@tanstack/react-query";
2+
3+
const BASE_API_URL = import.meta.env.VITE_AMP_URL;
4+
5+
6+
const fetchFilteredModels = async () => {
7+
const model_filtered_resp = await fetch(`${BASE_API_URL}/model/model_id_filter`, {
8+
method: 'GET',
9+
});
10+
return await model_filtered_resp.json();
11+
};
12+
13+
14+
export const useModelProviders = () => {
15+
16+
const { data, isLoading, isError, refetch } = useQuery(
17+
{
18+
queryKey: ['fetchFilteredModels'],
19+
queryFn: () => fetchFilteredModels(),
20+
refetchInterval: 15000
21+
}
22+
);
23+
24+
return {
25+
data,
26+
isLoading,
27+
isError,
28+
refetch
29+
};
30+
}
31+
32+
// {
33+
// "endpoint_config": {
34+
// "api_key": "sk-...",
35+
// "display_name": "My Custom Claude Instance",
36+
// "endpoint_id": "my-custom-claude",
37+
// "endpoint_url": "https://my-endpoint.com/v1",
38+
// "model_id": "claude-3-sonnet-20240229",
39+
// "provider_type": "openai_compatible"
40+
// }
41+
// }
42+
43+
// curl -X 'POST' \
44+
// 'https://synthetic-data-generator-ktdjq6.ml-1b6d1916-d05.eng-ml-l.vnu8-sqze.cloudera.site/add_model_endpoint' \
45+
// -H 'accept: application/json' \
46+
// -H 'Content-Type: application/json' \
47+
// -d '{
48+
// "endpoint_config": {
49+
// "api_key": "sk-...",
50+
// "display_name": "My Custom Claude Instance 0",
51+
// "endpoint_id": "my-custom-claude-0",
52+
// "endpoint_url": "https://my-endpoint.com/v1",
53+
// "model_id": "claude-3-sonnet-20240229",
54+
// "provider_type": "gemini_compatible"
55+
// }
56+
// }'

‎app/client/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import EvaluationDetailsPage from "./pages/EvaluationDetails/EvaluationDetailsPa
1212
import DatasetsPage from "./pages/Datasets/DatasetsPage";
1313
import EvaluationsPage from "./pages/Evaluations/EvaluationsPage";
1414
import ExportsPage from "./pages/Exports/ExportsPage";
15+
import SettingsPage from "./pages/Settings/SettingsPage";
1516
//import TelemetryDashboard from "./components/TelemetryDashboard";
1617

1718

@@ -108,6 +109,13 @@ const router = createBrowserRouter([
108109
errorElement: <ErrorPage />,
109110
loader: async () => null
110111
},
112+
{
113+
path: Pages.SETTINGS,
114+
element: <SettingsPage key={Pages.HOME}/>,
115+
errorElement: <ErrorPage />,
116+
loader: async () => null
117+
},
118+
111119
// {
112120
// path: `telemetry`,
113121
// element: <TelemetryDashboard />,

‎app/client/src/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export enum Pages {
1010
EXPORTS = 'exports',
1111
WELCOME = 'welcome',
1212
FEEDBACK = 'feedback',
13-
UPGRADE = 'upgrade'
13+
UPGRADE = 'upgrade',
14+
SETTINGS = 'settings'
1415
//TELEMETRY = 'telemetry'
1516
}
1617

0 commit comments

Comments
 (0)