root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: model list ux

Browse Source
This commit is contained in:
jialin
2024-06-13 19:39:39 +08:00
parent c9ea96e078
commit 73c68dee1b
26 changed files with 589 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/editor-wrap/index.tsx
+4 -2
View File
@@ -8,6 +8,7 @@ interface EditorwrapProps {
children: React.ReactNode;
showHeader?: boolean;
copyText: string;
defaultValue?: string;
langOptions?: { label: string; value: string }[];
onChangeLang?: (value: string) => void;
}
@@ -17,6 +18,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
copyText,
langOptions,
onChangeLang,
defaultValue,
showHeader = true
}) => {
const handleChangeLang = (value: string) => {
@@ -30,7 +32,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
return (
<div className="editor-header">
<Select
defaultValue="JSON"
defaultValue={defaultValue}
style={{ width: 120 }}
size="middle"
variant="filled"
@@ -51,4 +53,4 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
);
};
export default EditorWrap;
export default React.memo(EditorWrap);
src/components/form-buttons/index.tsx
+19 -11
View File
@@ -5,6 +5,8 @@ type FormButtonsProps = {
onCancel?: () => void;
cancelText?: string;
okText?: string;
showOk?: boolean;
showCancel?: boolean;
htmlType?: 'submit' | 'button';
};
const FormButtons: React.FC<FormButtonsProps> = ({
@@ -12,21 +14,27 @@ const FormButtons: React.FC<FormButtonsProps> = ({
onCancel,
cancelText,
okText,
showCancel = true,
showOk = true,
htmlType = 'button'
}) => {
return (
<Space size={40} style={{ marginTop: '80px' }}>
<Button
type="primary"
onClick={onOk}
style={{ width: '120px' }}
htmlType={htmlType}
>
{okText || '保存'}
</Button>
<Button onClick={onCancel} style={{ width: '98px' }}>
{cancelText || '取消'}
</Button>
{showOk && (
<Button
type="primary"
onClick={onOk}
style={{ width: '120px' }}
htmlType={htmlType}
>
{okText || '保存'}
</Button>
)}
{showCancel && (
<Button onClick={onCancel} style={{ width: '98px' }}>
{cancelText || '取消'}
</Button>
)}
</Space>
);
};
src/components/progress-bar/index.tsx
+36
View File
@@ -0,0 +1,36 @@
import { Progress } from 'antd';
import { memo, useMemo } from 'react';
const RenderProgress = memo(
(props: { percent: number; steps?: number; download?: boolean }) => {
const { percent, steps = 5, download } = props;
const strokeColor = useMemo(() => {
if (download) {
return 'var(--ant-color-primary)';
}
if (percent <= 50) {
return 'var(--ant-color-primary)';
}
if (percent <= 80) {
return 'var(--ant-color-warning)';
}
return 'var(--ant-color-error)';
}, [percent]);
return (
<Progress
steps={steps}
format={() => {
return (
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
);
}}
percent={percent}
strokeColor={strokeColor}
/>
);
}
);
export default RenderProgress;
src/components/seal-form/auto-complete.tsx
+86
View File
@@ -0,0 +1,86 @@
import { AutoComplete, Form } from 'antd';
import type { AutoCompleteProps } from 'antd/lib';
import { useEffect, useRef, useState } from 'react';
import Wrapper from './components/wrapper';
import { SealFormItemProps } from './types';
const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
props
) => {
const {
label,
placeholder,
required,
description,
isInFormItems = true,
...rest
} = props;
const [isFocus, setIsFocus] = useState(false);
const inputRef = useRef<any>(null);
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
useEffect(() => {
if (props.value) {
setIsFocus(true);
}
}, [props.value]);
const handleClickWrapper = () => {
if (!props.disabled && !isFocus) {
inputRef.current?.focus?.();
setIsFocus(true);
}
};
const handleChange = (value: string, option: any) => {
props.onChange?.(value, option);
};
const handleOnFocus = (e: any) => {
setIsFocus(true);
props.onFocus?.(e);
};
const handleOnBlur = (e: any) => {
if (!props.value) {
setIsFocus(false);
props.onBlur?.(e);
}
};
const handleSearch = (text: string) => {
props.onSearch?.(text);
};
const handleOnSelect = (value: any, option: any) => {
props.onSelect?.(value, option);
};
return (
<Wrapper
status={status}
label={label || (placeholder as string)}
isFocus={isFocus}
required={required}
description={description}
disabled={props.disabled}
onClick={handleClickWrapper}
>
<AutoComplete
{...rest}
ref={inputRef}
onSelect={handleOnSelect}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
onSearch={handleSearch}
onChange={handleChange}
></AutoComplete>
</Wrapper>
);
};
export default SealAutoComplete;
src/components/seal-form/components/label-info.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import './label-info.less';
interface NoteInfoProps {
required?: boolean;
label: string;
label: React.ReactNode;
description?: React.ReactNode;
}
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
src/components/seal-form/components/wrapper.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import LabelInfo from './label-info';
import wrapperStyle from './wrapper.less';
interface WrapperProps {
children: React.ReactNode;
label: string;
label: React.ReactNode;
isFocus: boolean;
status?: string;
required?: boolean;
src/components/seal-form/field-wrapper.tsx
+2 -1
View File
@@ -1,9 +1,10 @@
import classNames from 'classnames';
import React from 'react';
import LabelInfo from './components/label-info';
import wrapperStyle from './components/wrapper.less';
interface WrapperProps {
children: React.ReactNode;
label: string;
label: React.ReactNode;
status?: string;
className?: string;
disabled?: boolean;
src/components/seal-form/seal-input.tsx
-4
View File
@@ -64,10 +64,6 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
const handleOnBlur = useCallback(
(e: any) => {
console.log(
'inputRef.current==========',
inputRef.current?.resizableTextArea?.textArea?.value
);
if (!inputRef.current?.resizableTextArea?.textArea?.value) {
setIsFocus(false);
onBlur?.(e);
src/components/status-tag/index.less
+1
View File
@@ -5,5 +5,6 @@
padding: 2px 10px;
border-radius: 20px;
width: fit-content;
height: 26px;
font-size: var(--font-size-base);
}
src/components/status-tag/index.tsx
+18 -7
View File
@@ -1,7 +1,8 @@
import { StatusColorMap } from '@/config';
import { StatusType } from '@/config/types';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import styles from './index.less';
import './index.less';
export const StatusMaps = {
transitioning: 'blue',
@@ -16,9 +17,12 @@ type StatusTagProps = {
status: StatusType;
text: string;
};
download?: {
percent: number;
};
};
const StatusTag: React.FC<StatusTagProps> = ({ statusValue }) => {
const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
const { text, status } = statusValue;
const [statusColor, setStatusColor] = useState<{ text: string; bg: string }>({
text: '',
@@ -31,11 +35,18 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue }) => {
return (
<span
className={styles['status-tag']}
style={{
color: statusColor.text,
border: `1px solid ${statusColor.text}`
}}
className={classNames('status-tag', { download: download })}
style={
download
? {
color: StatusColorMap['success']['text'],
border: `1px solid ${StatusColorMap['success']['text']}`
}
: {
color: statusColor?.text,
border: `1px solid ${statusColor?.text}`
}
}
>
{text}
</span>
src/pages/Resources/components/gpus.tsx
+2 -13
View File
@@ -1,4 +1,5 @@
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
@@ -6,7 +7,6 @@ import { SyncOutlined } from '@ant-design/icons';
import { Button, Input, Space, Table } from 'antd';
import { useState } from 'react';
import { Gpu } from '../config/types';
import RenderProgress from './render-progress';
const { Column } = Table;
const dataSource: Gpu[] = [
@@ -205,18 +205,7 @@ const Models: React.FC = () => {
dataIndex="GRAM"
key="VRAM"
render={(text, record: Gpu) => {
return <RenderProgress percent={0}></RenderProgress>;
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
return (
<Space>
<Button size="middle">Logs</Button>
</Space>
);
return <ProgressBar percent={0}></ProgressBar>;
}}
/>
</Table>
src/pages/Resources/components/nodes.tsx
+8 -19
View File
@@ -1,4 +1,5 @@
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
@@ -8,7 +9,6 @@ import _ from 'lodash';
import { useEffect, useState } from 'react';
import { queryNodesList } from '../apis';
import { ListItem } from '../config/types';
import RenderProgress from './render-progress';
const { Column } = Table;
const Models: React.FC = () => {
@@ -138,9 +138,9 @@ const Models: React.FC = () => {
key="CPU"
render={(text, record: ListItem) => {
return (
<RenderProgress
<ProgressBar
percent={_.round(record?.status?.cpu.utilization_rate, 2)}
></RenderProgress>
></ProgressBar>
);
}}
/>
@@ -150,12 +150,12 @@ const Models: React.FC = () => {
key="Memory"
render={(text, record: ListItem) => {
return (
<RenderProgress
<ProgressBar
percent={formateUtilazation(
record?.status?.memory.used,
record?.status?.memory.total
)}
></RenderProgress>
></ProgressBar>
);
}}
/>
@@ -165,14 +165,14 @@ const Models: React.FC = () => {
key="GPU"
render={(text, record: ListItem) => {
return (
<RenderProgress
<ProgressBar
percent={_.get(record, [
'status',
'gpu',
'0',
'core_utilization_rate'
])}
></RenderProgress>
></ProgressBar>
);
}}
/>
@@ -181,18 +181,7 @@ const Models: React.FC = () => {
dataIndex="VRAM"
key="VRAM"
render={(text, record: ListItem) => {
return <RenderProgress percent={0}></RenderProgress>;
}}
/>
<Column
title="Operation"
key="operation"
render={(text, record) => {
return (
<Space>
<Button size="middle">Logs</Button>
</Space>
);
return <ProgressBar percent={0}></ProgressBar>;
}}
/>
</Table>
src/pages/Resources/components/render-progress.tsx
-30
View File
@@ -1,30 +0,0 @@
import { Progress } from 'antd';
import { memo, useMemo } from 'react';
const RenderProgress = memo((props: { percent: number }) => {
const { percent } = props;
console.log('percent====', percent);
const strokeColor = useMemo(() => {
if (percent <= 50) {
return 'var(--ant-color-primary)';
}
if (percent <= 80) {
return 'var(--ant-color-warning)';
}
return 'var(--ant-color-error)';
}, [percent]);
return (
<Progress
steps={10}
format={() => {
return (
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
);
}}
percent={percent}
strokeColor={strokeColor}
/>
);
});
export default RenderProgress;
src/pages/llmodels/apis/index.ts
+23 -2
View File
@@ -1,5 +1,10 @@
import { request } from '@umijs/max';
import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
import {
FormData,
ListItem,
ModelInstanceFormData,
ModelInstanceListItem
} from '../config/types';
export const MODELS_API = '/models';
@@ -55,7 +60,9 @@ export async function queryModelInstancesList(
);
}
export async function createModelInstance(params: { data: FormData }) {
export async function createModelInstance(params: {
data: ModelInstanceFormData;
}) {
return request(`${MODEL_INSTANCE_API}`, {
method: 'POST',
data: params.data
@@ -91,3 +98,17 @@ export async function queryModelInstanceLogs(id: number) {
}
// ===================== Model Instances end =====================
// ===================== call huggingface quicksearch api =====================
export async function callHuggingfaceQuickSearch(params: any) {
return request<{
models: Array<{
id: string;
_id: string;
}>;
}>(`https://huggingface.co/api/quicksearch`, {
method: 'GET',
params
});
}
src/pages/llmodels/components/add-modal.tsx
+82 -7
View File
@@ -1,10 +1,13 @@
import ModalFooter from '@/components/modal-footer';
import SealAutoComplete from '@/components/seal-form/auto-complete';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { Form, Modal } from 'antd';
import { useEffect } from 'react';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { callHuggingfaceQuickSearch } from '../apis';
import { FormData } from '../config/types';
type AddModalProps = {
@@ -17,16 +20,20 @@ type AddModalProps = {
const sourceOptions = [
{ label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
{ label: 'Ollama', value: 'ollama_library', key: 'ollama_library' },
{ label: 'S3', value: 's3', key: 's3' }
];
const AddModal: React.FC<AddModalProps> = (props) => {
const { title, action, open, onOk, onCancel } = props || {};
if (!open) {
return null;
}
const [form] = Form.useForm();
const modelSource = Form.useWatch('source', form);
const [repoOptions, setRepoOptions] = useState<
{ label: string; value: string }[]
>([]);
const [fileOptions, setFileOptions] = useState<
{ label: string; value: string }[]
>([]);
const initFormValue = () => {
if (action === PageAction.CREATE && open) {
@@ -40,6 +47,33 @@ const AddModal: React.FC<AddModalProps> = (props) => {
initFormValue();
}, [open]);
const handleInputRepoChange = (value: string) => {
console.log('repo change', value);
};
const debounceSearch = _.debounce((text: string) => {
handleOnSearchRepo(text);
}, 300);
const handleOnSearchRepo = async (text: string) => {
try {
const params = {
q: text,
type: 'model'
};
const res = await callHuggingfaceQuickSearch(params);
const list = _.map(res.models || [], (item: any) => {
return {
value: item.id,
label: item.id
};
});
setRepoOptions(list);
} catch (error) {
setRepoOptions([]);
}
};
const renderHuggingfaceFields = () => {
return (
<>
@@ -47,11 +81,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
name="huggingface_repo_id"
rules={[{ required: true }]}
>
<SealInput.Input label="Repo ID" required></SealInput.Input>
<SealAutoComplete
label="Repo ID"
required
showSearch
onChange={handleInputRepoChange}
onSearch={debounceSearch}
options={repoOptions}
></SealAutoComplete>
</Form.Item>
<Form.Item<FormData>
name="huggingface_filename"
rules={[{ required: false }]}
rules={[{ required: true }]}
>
<SealInput.Input label="File Name" required></SealInput.Input>
</Form.Item>
@@ -69,6 +110,32 @@ const AddModal: React.FC<AddModalProps> = (props) => {
);
};
const renderOllamaModelFields = () => {
return (
<>
<Form.Item<FormData>
name="ollama_library_model_name"
rules={[{ required: true }]}
>
<SealInput.Input label="Model Name" required></SealInput.Input>
</Form.Item>
</>
);
};
const renderFieldsBySource = () => {
switch (modelSource) {
case 'huggingface':
return renderHuggingfaceFields();
case 'ollama_library':
return renderOllamaModelFields();
case 's3':
return renderS3Fields();
default:
return null;
}
};
const handleSourceChange = (value: string) => {
console.log('source change', value);
};
@@ -111,7 +178,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
onChange={handleSourceChange}
></SealSelect>
</Form.Item>
{modelSource === 's3' ? renderS3Fields() : renderHuggingfaceFields()}
{renderFieldsBySource()}
<Form.Item<FormData> name="replicas" rules={[{ required: true }]}>
<SealInput.Number
style={{ width: '100%' }}
label="Replicas"
required
min={1}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea label="Description"></SealInput.TextArea>
</Form.Item>
src/pages/llmodels/components/view-logs-modal.tsx
+35
View File
@@ -0,0 +1,35 @@
import { Modal } from 'antd';
import React from 'react';
type ViewModalProps = {
content?: string;
title: string;
open: boolean;
onCancel: () => void;
};
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const { title, open, onCancel, content } = props || {};
if (!open) {
return null;
}
return (
<Modal
title={title}
open={open}
onCancel={onCancel}
destroyOnClose={true}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
style={{ top: '80px' }}
footer={null}
>
<div>{content}</div>
</Modal>
);
};
export default ViewCodeModal;
src/pages/llmodels/config/types.ts
+10
View File
@@ -15,7 +15,9 @@ export interface FormData {
huggingface_repo_id: string;
huggingface_filename: string;
s3_address: string;
ollama_library_model_name: 'string';
name: string;
replicas: number;
description: string;
}
@@ -36,3 +38,11 @@ export interface ModelInstanceListItem {
created_at: string;
updated_at: string;
}
export interface ModelInstanceFormData {
model_id: number;
model_name: string;
source: string;
huggingface_repo_id: 'string';
huggingface_filename: 'string';
}
src/pages/llmodels/index.tsx
+105 -44
View File
@@ -1,4 +1,5 @@
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import SealTable from '@/components/seal-table';
import RowChildren from '@/components/seal-table/components/row-children';
import SealColumn from '@/components/seal-table/components/seal-column';
@@ -33,12 +34,15 @@ import _ from 'lodash';
import { useEffect, useState } from 'react';
import {
createModel,
createModelInstance,
deleteModel,
deleteModelInstance,
queryModelInstanceLogs,
queryModelInstancesList,
queryModelsList
} from './apis';
import AddModal from './components/add-modal';
import ViewLogsModal from './components/view-logs-modal';
import { status } from './config';
import { FormData, ListItem, ModelInstanceListItem } from './config/types';
@@ -51,6 +55,9 @@ const Models: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [logContent, setLogContent] = useState('');
const [openLogModal, setOpenLogModal] = useState(false);
const [hoverChildIndex, setHoverChildIndex] = useState(-1);
const [total, setTotal] = useState(100);
const [openAddModal, setOpenAddModal] = useState(false);
const [loading, setLoading] = useState(false);
@@ -132,6 +139,10 @@ const Models: React.FC = () => {
console.log('handleModalCancel');
setOpenAddModal(false);
};
const handleLogModalCancel = () => {
setOpenLogModal(false);
};
const handleDelete = async (row: any) => {
Modal.confirm({
title: '',
@@ -165,8 +176,26 @@ const Models: React.FC = () => {
navigate(`/playground?model=${row.name}`);
};
const handleViewLogs = (row: any) => {
console.log('handleViewLogs', row);
const handleDeployInstance = async (row: any) => {
try {
const data = {
model_id: row.id,
model_name: row.name,
huggingface_repo_id: row.huggingface_repo_id,
huggingface_filename: row.huggingface_filename,
source: row.source
};
await createModelInstance({ data });
message.success('successfully!');
} catch (error) {}
};
const handleViewLogs = async (row: any) => {
try {
const data = await queryModelInstanceLogs(row.id);
setLogContent(data);
setOpenLogModal(true);
} catch (error) {}
};
const handleDeleteInstace = (row: any) => {
Modal.confirm({
@@ -184,6 +213,14 @@ const Models: React.FC = () => {
});
};
const handleOnMouseEnter = (index: number) => {
setHoverChildIndex(index);
};
const handleOnMouseLeave = () => {
setHoverChildIndex(-1);
};
const getModelInstances = async (row: any) => {
const params = {
id: row.id,
@@ -196,50 +233,69 @@ const Models: React.FC = () => {
const renderChildren = (list: any) => {
return (
<>
{_.map(list, (item: ModelInstanceListItem) => {
<Space size={16} direction="vertical" style={{ width: '100%' }}>
{_.map(list, (item: ModelInstanceListItem, index: number) => {
return (
<RowChildren key={item.id}>
<Row style={{ width: '100%' }} align="middle">
<Col span={4}>
{item.node_ip}:{item.port}
</Col>
<Col span={5}>{item.huggingface_repo_id}</Col>
<Col span={4}>
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
</Col>
<Col span={4}>
<StatusTag
statusValue={{
status: status[item.state] as any,
text: item.state
}}
></StatusTag>
</Col>
<Col span={7}>
<Space>
<Tooltip title="Delete">
<Button
size="small"
danger
onClick={() => handleDeleteInstace(item)}
icon={<DeleteOutlined></DeleteOutlined>}
></Button>
</Tooltip>
<Tooltip title="View Logs">
<Button
size="small"
onClick={() => handleViewLogs(item)}
icon={<FieldTimeOutlined />}
></Button>
</Tooltip>
</Space>
</Col>
</Row>
</RowChildren>
<div
key={`${item.id}`}
onMouseEnter={() => handleOnMouseEnter(index)}
onMouseLeave={handleOnMouseLeave}
>
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
<Col span={4}>
{item.node_ip}:{item.port}
</Col>
<Col span={5}>
<span>{item.huggingface_repo_id}</span>
<div style={{ marginTop: '4px' }}>
<ProgressBar
download
percent={item.download_progress || 0}
></ProgressBar>
</div>
</Col>
<Col span={4}>
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
</Col>
<Col span={4}>
{item.state && (
<StatusTag
download={{ percent: 10 }}
statusValue={{
status: status[item.state] as any,
text: item.state
}}
></StatusTag>
)}
</Col>
<Col span={7}>
{hoverChildIndex === index && (
<Space size={20}>
<Tooltip title="Delete">
<Button
size="small"
danger
onClick={() => handleDeleteInstace(item)}
icon={<DeleteOutlined></DeleteOutlined>}
></Button>
</Tooltip>
<Tooltip title="View Logs">
<Button
size="small"
onClick={() => handleViewLogs(item)}
icon={<FieldTimeOutlined />}
></Button>
</Tooltip>
</Space>
)}
</Col>
</Row>
</RowChildren>
</div>
);
})}
</>
</Space>
);
};
@@ -356,7 +412,7 @@ const Models: React.FC = () => {
key="operation"
render={(text, record) => {
return !record.transition ? (
<Space>
<Space size={20}>
<Tooltip title="Open in PlayGround">
<Button
size="small"
@@ -387,6 +443,11 @@ const Models: React.FC = () => {
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>
<ViewLogsModal
title="View Logs"
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>
</>
);
};
src/pages/playground/components/chat-footer.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
onClick={onView}
disabled={disabled}
>
View
View Code
</Button>
<Button
disabled={disabled}
src/pages/playground/components/ground-left.tsx
+3
View File
@@ -179,6 +179,9 @@ const MessageList: React.FC<MessageProps> = (props) => {
</div>
<ViewCodeModal
open={show}
systemMessage={systemMessage}
messageList={messageList}
parameters={parameters}
onCancel={handleCloseViewCode}
title="View code"
></ViewCodeModal>
src/pages/playground/components/params-settings.tsx
-7
View File
@@ -22,11 +22,6 @@ type ParamsSettingsProps = {
params?: ParamsSettingsFormProps;
setParams: (params: any) => void;
};
// const dataList = [
// { value: 'llama3:latest', label: 'llama3:latest' },
// { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
// { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
// ];
const ParamsSettings: React.FC<ParamsSettingsProps> = ({
onClose,
@@ -126,7 +121,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
max={2}
step={0.1}
style={{ marginBottom: 0 }}
tooltip={{ open: true }}
></Slider>
</FieldWrapper>
</Form.Item>
@@ -149,7 +143,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
max={1}
step={0.1}
style={{ marginBottom: 0 }}
tooltip={{ open: true }}
></Slider>
</FieldWrapper>
</Form.Item>
src/pages/playground/components/view-code-modal.tsx
+137 -47
View File
@@ -1,83 +1,173 @@
import EditorWrap from '@/components/editor-wrap';
import Editor from '@monaco-editor/react';
import { Modal } from 'antd';
import React, { useRef, useState } from 'react';
import { Modal, Spin } from 'antd';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
type ViewModalProps = {
systemMessage?: string;
messageList: any[];
parameters: any;
title: string;
open: boolean;
onCancel: () => void;
};
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const { title, open, onCancel } = props || {};
if (!open) {
return null;
}
const {
title,
open,
onCancel,
systemMessage,
messageList,
parameters = {}
} = props || {};
const editorRef = useRef(null);
const [loaded, setLoaded] = useState(false);
const [codeValue, setCodeValue] = useState('');
const [lang, setLang] = useState('json');
const [lang, setLang] = useState('shell');
const langOptions = [
{ label: 'curl', value: 'curl' },
{ label: 'JSON', value: 'json' },
{ label: 'JavaScript', value: 'javascript' },
{ label: 'Python', value: 'python' }
{ label: 'Curl', value: 'shell' },
{ label: 'Python', value: 'python' },
{ label: 'Nodejs', value: 'javascript' }
];
useEffect(() => {
generateCode();
}, [lang, systemMessage, messageList, parameters]);
const generateCode = () => {
if (lang === 'shell') {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `curl ${window.location.origin}/v1/chat/completions \n-H "Content-Type: application/json" \n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}\" \n-d '${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
},
null,
2
)}'`;
setCodeValue(code);
} else if (lang === 'javascript') {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `import OpenAI from "openai";\nconst openai = new OpenAI();\n\nasync function main(){\nconst params = ${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
},
null,
2
)};\nconst chatCompletion = await openai.chat.completions.create(params);\nfor await (const chunk of chatCompletion) {\n process.stdout.write(chunk.choices[0]?.delta?.content || '');\n}\n}\nmain();`;
setCodeValue(code);
} else if (lang === 'python') {
const formattedParams = _.keys(parameters).reduce(
(acc: string, key: string) => {
if (parameters[key] === null) {
return acc;
}
const value =
typeof parameters[key] === 'string'
? `"${parameters[key]}"`
: parameters[key];
return acc + ` ${key}=${value},\n`;
},
''
);
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `from openai import OpenAI\nclient = OpenAI()\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
setCodeValue(code);
}
formatCode();
};
const handleEditorDidMount = (editor: any, monaco: any) => {
editorRef.current = editor;
setLoaded(true);
};
function formatCode() {
if (editorRef.current) {
setTimeout(() => {
editorRef.current
?.getAction?.('editor.action.formatDocument')
?.run()
.then(() => {
console.log('format success');
});
}, 100);
}
}
const handleOnChangeLang = (value: string) => {
setLang(value);
};
const handleClose = () => {
setLang('shell');
onCancel();
};
const editorConfig = {
minimap: {
enabled: false
},
formatOnType: true,
formatOnPaste: true,
scrollbar: {
verticalSliderSize: 8
}
};
return (
<Modal
title={title}
open={open}
onCancel={onCancel}
destroyOnClose={true}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
style={{ top: '80px' }}
footer={null}
>
<div style={{ marginBottom: '10px' }}>
You can use the following code to start integrating your current prompt
and settings into your application.
</div>
<EditorWrap
copyText={codeValue}
langOptions={langOptions}
onChangeLang={handleOnChangeLang}
<>
<Modal
title={title}
open={open}
onCancel={handleClose}
destroyOnClose={true}
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
style={{ top: '80px' }}
footer={null}
>
<Editor
height="400px"
theme="vs-dark"
className="monaco-editor"
defaultLanguage="javascript"
defaultValue="// some comment"
language={lang}
options={editorConfig}
onMount={handleEditorDidMount}
/>
</EditorWrap>
<div style={{ marginTop: '10px' }}>
our API Key can be foundhere You should use environment variables or a
secret management tool to expose your key to your applications.
</div>
</Modal>
<div style={{ marginBottom: '10px' }}>
You can use the following code to start integrating your current
prompt and settings into your application.
</div>
<Spin spinning={!loaded}>
<EditorWrap
copyText={codeValue}
langOptions={langOptions}
defaultValue="shell"
showHeader={loaded}
onChangeLang={handleOnChangeLang}
>
<Editor
height="400px"
theme="vs-dark"
className="monaco-editor"
defaultLanguage="shell"
language={lang}
value={codeValue}
options={editorConfig}
onMount={handleEditorDidMount}
/>
</EditorWrap>
</Spin>
<div style={{ marginTop: '10px' }}>
our API Key can be foundhere You should use environment variables or a
secret management tool to expose your key to your applications.
</div>
</Modal>
</>
);
};
src/pages/profile/index.tsx
+5 -1
View File
@@ -72,7 +72,11 @@ const Profile: React.FC = () => {
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<FormButtons htmlType="submit" onCancel={handleCancel}></FormButtons>
<FormButtons
htmlType="submit"
onCancel={handleCancel}
showCancel={false}
></FormButtons>
</Form>
</PageContainer>
</StrictMode>
src/pages/users/index.tsx
+3 -2
View File
@@ -214,7 +214,7 @@ const Models: React.FC = () => {
onChange: handlePageChange
}}
>
<Column title="Name" dataIndex="name" key="name" width={400} />
<Column title="Name" dataIndex="name" key="name" width={200} />
<Column
title="Create Time"
dataIndex="created_at"
@@ -243,9 +243,10 @@ const Models: React.FC = () => {
<Column
title="Operation"
key="operation"
width={200}
render={(text, record: ListItem) => {
return (
<Space>
<Space size={20}>
<Tooltip title="编辑">
<Button
size="small"
src/utils/format.ts
-4
View File
@@ -1,4 +0,0 @@
// 示例方法，没有实际意义
export function trim(str: string) {
return str.trim();
}
src/utils/index.ts
+7
View File
@@ -4,3 +4,10 @@ export const isNotEmptyValue = (value: any) => {
}
return value !== null && value !== undefined && value !== '';
};
export const handleBatchRequest = async (
list: any[],
fn: (args: any) => void
) => {
return Promise.all(list.map((item) => fn(item)));
};