chore: list models query
This commit is contained in:
jialin
@@ -13,6 +13,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.7",
|
||||
"@ant-design/pro-components": "^2.7.1",
|
||||
"@huggingface/gguf": "^0.1.7",
|
||||
"@huggingface/hub": "^0.15.1",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"@types/lodash": "^4.17.4",
|
||||
|
||||
Generated
+8
@@ -11,6 +11,9 @@ dependencies:
|
||||
'@ant-design/pro-components':
|
||||
specifier: ^2.7.1
|
||||
version: 2.7.1(antd@5.18.3)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@huggingface/gguf':
|
||||
specifier: ^0.1.7
|
||||
version: 0.1.7
|
||||
'@huggingface/hub':
|
||||
specifier: ^0.15.1
|
||||
version: 0.15.1
|
||||
@@ -4030,6 +4033,11 @@ packages:
|
||||
deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
|
||||
dev: false
|
||||
|
||||
/@huggingface/gguf@0.1.7:
|
||||
resolution: {integrity: sha512-RQN1WwuusLjiBTNFuAJCUlhRejIhKt395ywnTmc+Jy8dajGwk8k7EsfgtxVqkBSTWy9D55XzCII7jUjkHEv3JA==, tarball: https://registry.npmjs.org/@huggingface/gguf/-/gguf-0.1.7.tgz}
|
||||
engines: {node: '>=20'}
|
||||
dev: false
|
||||
|
||||
/@huggingface/hub@0.15.1:
|
||||
resolution: {integrity: sha512-uHb4aFkJDoGfLeRHfFTjkI36Z8IV6Z1c+KzhMDqUSC56opyr7Mn1Nsx7Rri/C7KDwROhQfBp/fOOqqjTzn6Cgg==, tarball: https://registry.npmjs.org/@huggingface/hub/-/hub-0.15.1.tgz}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
@@ -9,8 +9,10 @@ type ModalFooterProps = {
|
||||
htmlType?: 'button' | 'submit';
|
||||
okBtnProps?: any;
|
||||
cancelBtnProps?: any;
|
||||
align?: 'start' | 'end' | 'center' | 'baseline';
|
||||
form?: any;
|
||||
loading?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
const ModalFooter: React.FC<ModalFooterProps> = ({
|
||||
onOk,
|
||||
@@ -21,11 +23,13 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
|
||||
cancelBtnProps,
|
||||
loading,
|
||||
htmlType = 'button',
|
||||
align = 'end',
|
||||
style,
|
||||
form
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<Space size={20}>
|
||||
<Space size={20} style={{ ...style }}>
|
||||
<Button onClick={onCancel} style={{ width: '88px' }} {...cancelBtnProps}>
|
||||
{cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
|
||||
</Button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
'models.button.deploy': 'Deploy Model',
|
||||
'models.button.deploy': 'Deploy Model From',
|
||||
'models.title': 'Models',
|
||||
'models.title.edit': 'Edit Model',
|
||||
'models.table.models': 'models',
|
||||
|
||||
@@ -116,6 +116,14 @@ export async function callHuggingfaceQuickSearch(params: any) {
|
||||
});
|
||||
}
|
||||
|
||||
const HUGGINGFACE_API = 'https://huggingface.co/api/models';
|
||||
|
||||
export async function queryHuggingfaceModelDetail(params: { repo: string }) {
|
||||
return request(`${HUGGINGFACE_API}/${params.repo}`, {
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryHuggingfaceModels(
|
||||
params: {
|
||||
search: {
|
||||
@@ -130,7 +138,18 @@ export async function queryHuggingfaceModels(
|
||||
...params,
|
||||
...options,
|
||||
limit: 50,
|
||||
additionalFields: ['cardData']
|
||||
additionalFields: ['sha'],
|
||||
fetch(url: string, config: any) {
|
||||
try {
|
||||
return fetch(`${url}`, {
|
||||
...config,
|
||||
signal: options.signal
|
||||
});
|
||||
} catch (error) {
|
||||
// ignore
|
||||
return [];
|
||||
}
|
||||
}
|
||||
})) {
|
||||
result.push(model);
|
||||
}
|
||||
@@ -139,7 +158,9 @@ export async function queryHuggingfaceModels(
|
||||
|
||||
export async function queryHuggingfaceModelFiles(params: { repo: string }) {
|
||||
const result = [];
|
||||
for await (const fileInfo of listFiles(params)) {
|
||||
for await (const fileInfo of listFiles({
|
||||
...params
|
||||
})) {
|
||||
result.push(fileInfo);
|
||||
}
|
||||
return result;
|
||||
|
||||
@@ -5,15 +5,13 @@ import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form, Input, Modal } from 'antd';
|
||||
import { Form, Modal } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
|
||||
import { modelSourceMap } from '../config';
|
||||
import { FormData, ListItem } from '../config/types';
|
||||
import SearchInput from './search-input';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
@@ -50,7 +48,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
const [fileOptions, setFileOptions] = useState<
|
||||
{ label: string; value: string }[]
|
||||
>([]);
|
||||
const [ollamaTags, setOllamaTags] = useState<string[]>([]);
|
||||
|
||||
const initFormValue = () => {
|
||||
if (action === PageAction.CREATE && open) {
|
||||
@@ -154,24 +151,11 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealAutoComplete
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.repoid' })}
|
||||
required
|
||||
showSearch
|
||||
onBlur={handleRepoOnBlur}
|
||||
onSelect={handleRepoOnBlur}
|
||||
onSearch={debounceSearch}
|
||||
options={repoOptions}
|
||||
addAfter={
|
||||
<span style={{ position: 'relative', top: '2px' }}>
|
||||
<SearchOutlined></SearchOutlined>
|
||||
</span>
|
||||
}
|
||||
disabled={true}
|
||||
description={intl.formatMessage({ id: 'models.form.repoid.desc' })}
|
||||
>
|
||||
<Input></Input>
|
||||
</SealAutoComplete>
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_filename"
|
||||
@@ -246,14 +230,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
}
|
||||
]}
|
||||
>
|
||||
{/* <SealAutoComplete
|
||||
filterOption
|
||||
disabled={action === PageAction.EDIT}
|
||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
||||
required
|
||||
options={ollamaModelOptions}
|
||||
></SealAutoComplete> */}
|
||||
<SealInput.Input
|
||||
disabled={action === PageAction.EDIT}
|
||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||
@@ -261,12 +237,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="tag">
|
||||
<SealInput.Input
|
||||
label="Tag"
|
||||
placeholder={`${_.join(ollamaTags, ',')} or another...`}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -286,7 +256,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
|
||||
const handleOnSelectModel = useCallback((item: any) => {
|
||||
const repo = item.name;
|
||||
setOllamaTags(_.map(item.tags, (tag: string) => _.toLower(tag)));
|
||||
if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
|
||||
form.setFieldValue('huggingface_repo_id', repo);
|
||||
handleFetchModelFiles(repo);
|
||||
@@ -320,13 +289,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
<ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
|
||||
}
|
||||
>
|
||||
{action === PageAction.CREATE && (
|
||||
<SearchInput
|
||||
modelSource={modelSource}
|
||||
onSourceChange={handleSourceChange}
|
||||
onSelectModel={handleOnSelectModel}
|
||||
></SearchInput>
|
||||
)}
|
||||
<Form name="addModalForm" form={form} onFinish={onOk} preserve={false}>
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
@@ -362,7 +324,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
)
|
||||
}
|
||||
]}
|
||||
noStyle={action === PageAction.CREATE}
|
||||
>
|
||||
{action === PageAction.EDIT && (
|
||||
<SealSelect
|
||||
|
||||
@@ -0,0 +1,395 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
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 { convertFileSize } from '@/utils';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Divider, Drawer, Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
|
||||
import { modelSourceMap } from '../config';
|
||||
import { FormData, ListItem } from '../config/types';
|
||||
import HFModelFile from './hf-model-file';
|
||||
import SearchModel from './search-model';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
data?: ListItem;
|
||||
source: string;
|
||||
onOk: (values: FormData) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const sourceOptions = [
|
||||
{
|
||||
label: 'Hugging Face',
|
||||
value: modelSourceMap.huggingface_value,
|
||||
key: 'huggingface'
|
||||
},
|
||||
{
|
||||
label: 'Ollama Library',
|
||||
value: modelSourceMap.ollama_library_value,
|
||||
key: 'ollama_library'
|
||||
}
|
||||
];
|
||||
|
||||
const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
console.log('addmodel====');
|
||||
const { title, action, open, source, onOk, onCancel } = props || {};
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
const modelSource = Form.useWatch('source', form);
|
||||
const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [repoOptions, setRepoOptions] = useState<
|
||||
{ label: string; value: string }[]
|
||||
>([]);
|
||||
const [fileOptions, setFileOptions] = useState<
|
||||
{ label: string; value: string }[]
|
||||
>([]);
|
||||
|
||||
const initFormValue = () => {
|
||||
form.setFieldsValue({
|
||||
source: props.source,
|
||||
replicas: 1
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initFormValue();
|
||||
console.log('source========', props.source);
|
||||
}, [open]);
|
||||
|
||||
const fileNamLabel = (item: any) => {
|
||||
return (
|
||||
<span>
|
||||
{item.path}
|
||||
<span
|
||||
style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
|
||||
>
|
||||
({convertFileSize(item.size)})
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
const handleFetchModelFiles = async (repo: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await queryHuggingfaceModelFiles({ repo });
|
||||
const list = _.filter(res, (file: any) => {
|
||||
return _.endsWith(file.path, '.gguf');
|
||||
}).map((item: any) => {
|
||||
return {
|
||||
label: fileNamLabel(item),
|
||||
value: item.path,
|
||||
size: item.size
|
||||
};
|
||||
});
|
||||
setFileOptions(list);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setFileOptions([]);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRepoOnBlur = (e: any) => {
|
||||
const repo = form.getFieldValue('huggingface_repo_id');
|
||||
handleFetchModelFiles(repo);
|
||||
};
|
||||
|
||||
const handleSelectModelFile = useCallback((item: any) => {
|
||||
form.setFieldValue('huggingface_filename', item.path);
|
||||
}, []);
|
||||
|
||||
const handleOnSearchRepo = async (text: string) => {
|
||||
try {
|
||||
const params = {
|
||||
search: {
|
||||
query: text,
|
||||
tags: ['gguf']
|
||||
}
|
||||
};
|
||||
const models = await queryHuggingfaceModels(params);
|
||||
const list = _.map(models || [], (item: any) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.name,
|
||||
label: item.name
|
||||
};
|
||||
});
|
||||
setRepoOptions(list);
|
||||
} catch (error) {
|
||||
setRepoOptions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const debounceSearch = _.debounce((text: string) => {
|
||||
handleOnSearchRepo(text);
|
||||
}, 300);
|
||||
|
||||
const renderHuggingfaceFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_repo_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.repoid' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="huggingface_filename"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({ id: 'models.form.filename' })}
|
||||
required
|
||||
disabled={true}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderS3Fields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="s3_address"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.s3address' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.s3address'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderOllamaModelFields = () => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="ollama_library_model_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
disabled={action === PageAction.EDIT}
|
||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFieldsBySource = () => {
|
||||
switch (props.source) {
|
||||
case modelSourceMap.huggingface_value:
|
||||
return renderHuggingfaceFields();
|
||||
case modelSourceMap.ollama_library_value:
|
||||
return renderOllamaModelFields();
|
||||
case modelSourceMap.s3_value:
|
||||
return renderS3Fields();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSelectModel = useCallback((item: any) => {
|
||||
const repo = item.name;
|
||||
if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
|
||||
form.setFieldValue('huggingface_repo_id', repo);
|
||||
} else {
|
||||
form.setFieldValue('ollama_library_model_name', repo);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSumit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={title}
|
||||
open={open}
|
||||
onClose={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={true}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
styles={{
|
||||
body: {
|
||||
height: 'calc(100vh - 110px)'
|
||||
}
|
||||
}}
|
||||
width="90%"
|
||||
footer={
|
||||
<ModalFooter
|
||||
onCancel={onCancel}
|
||||
onOk={handleSumit}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end'
|
||||
}}
|
||||
></ModalFooter>
|
||||
}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<SearchModel
|
||||
modelSource={modelSource}
|
||||
onSelectModel={handleOnSelectModel}
|
||||
></SearchModel>
|
||||
</div>
|
||||
|
||||
<Divider type="vertical"></Divider>
|
||||
<div style={{ flex: 1 }}>
|
||||
<HFModelFile
|
||||
repo={huggingfaceRepoId}
|
||||
onSelectFile={handleSelectModelFile}
|
||||
></HFModelFile>
|
||||
</div>
|
||||
<Divider type="vertical"></Divider>
|
||||
<div style={{ width: 450 }}>
|
||||
<h3 className="flex-between font-size-14">
|
||||
<span>Configuration</span>
|
||||
</h3>
|
||||
<Form name="deployModel" form={form} onFinish={onOk} preserve={false}>
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'common.table.name' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.name'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.select'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.source' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
disabled={true}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.source'
|
||||
})}
|
||||
options={sourceOptions}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
{renderFieldsBySource()}
|
||||
<Form.Item<FormData>
|
||||
name="replicas"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage(
|
||||
{
|
||||
id: 'common.form.rule.input'
|
||||
},
|
||||
{ name: intl.formatMessage({ id: 'models.form.replicas' }) }
|
||||
)
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Number
|
||||
style={{ width: '100%' }}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.replicas'
|
||||
})}
|
||||
required
|
||||
min={0}
|
||||
></SealInput.Number>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name="description">
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.description'
|
||||
})}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(AddModal);
|
||||
@@ -0,0 +1,101 @@
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Col, Empty, Row, Space, Spin } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { queryHuggingfaceModelFiles } from '../apis';
|
||||
import '../style/hf-model-file.less';
|
||||
|
||||
interface HFModelFileProps {
|
||||
repo: string;
|
||||
onSelectFile?: (file: any) => void;
|
||||
}
|
||||
const HFModelFile: React.FC<HFModelFileProps> = (props) => {
|
||||
const [dataSource, setDataSource] = useState<any>({
|
||||
fileList: [],
|
||||
loading: false
|
||||
});
|
||||
|
||||
const [current, setCurrent] = useState<string>('');
|
||||
|
||||
const handleSelectModelFile = (item: any) => {
|
||||
props.onSelectFile?.(item);
|
||||
setCurrent(item.path);
|
||||
};
|
||||
|
||||
const handleFetchModelFiles = async () => {
|
||||
if (!props.repo) {
|
||||
setDataSource({ fileList: [], loading: false });
|
||||
return;
|
||||
}
|
||||
setDataSource({ ...dataSource, loading: true });
|
||||
setCurrent('');
|
||||
try {
|
||||
const res = await queryHuggingfaceModelFiles({ repo: props.repo });
|
||||
const list = _.filter(res, (file: any) => {
|
||||
return _.endsWith(file.path, '.gguf');
|
||||
});
|
||||
setDataSource({ fileList: list, loading: false });
|
||||
handleSelectModelFile(list[0]);
|
||||
} catch (error) {
|
||||
setDataSource({ fileList: [], loading: false });
|
||||
handleSelectModelFile({});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleFetchModelFiles();
|
||||
}, [props.repo]);
|
||||
return (
|
||||
<div>
|
||||
<h3 className="flex-between font-size-14">
|
||||
<span>Available Files({dataSource.fileList.length || 0})</span>
|
||||
</h3>
|
||||
<div>
|
||||
<Spin spinning={dataSource.loading} style={{ minHeight: 100 }}></Spin>
|
||||
{dataSource.fileList.length ? (
|
||||
<Row gutter={[10, 10]}>
|
||||
{_.map(dataSource.fileList, (item: any) => {
|
||||
return (
|
||||
<Col span={24} key={item.path}>
|
||||
<div
|
||||
className={classNames('hf-model-file', {
|
||||
active: item.path === current
|
||||
})}
|
||||
onClick={() => handleSelectModelFile(item)}
|
||||
>
|
||||
<div className="title">{item.path}</div>
|
||||
<Space className="tags">
|
||||
<span className="tag-item">
|
||||
{convertFileSize(item.size)}
|
||||
</span>
|
||||
</Space>
|
||||
<div className="btn">
|
||||
<Button size="middle">Install</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
) : (
|
||||
!dataSource.loading && (
|
||||
<Empty
|
||||
imageStyle={{ height: 'auto', marginTop: '20px' }}
|
||||
image={
|
||||
<SearchOutlined
|
||||
className="font-size-16"
|
||||
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
||||
></SearchOutlined>
|
||||
}
|
||||
description="No models found"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HFModelFile;
|
||||
+25
-27
@@ -1,9 +1,8 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import RadioButtons from '@/components/radio-buttons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Input } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { queryHuggingfaceModels } from '../apis';
|
||||
import { modelSourceMap, ollamaModelOptions } from '../config';
|
||||
import SearchStyle from '../style/search-result.less';
|
||||
@@ -11,7 +10,7 @@ import SearchResult from './search-result';
|
||||
|
||||
interface SearchInputProps {
|
||||
modelSource: string;
|
||||
onSourceChange: (source: string) => void;
|
||||
onSourceChange?: (source: string) => void;
|
||||
onSelectModel: (model: any) => void;
|
||||
}
|
||||
|
||||
@@ -37,6 +36,12 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const cacheRepoOptions = useRef<any[]>([]);
|
||||
const axiosTokenRef = useRef<any>(null);
|
||||
const [current, setCurrent] = useState<string>('');
|
||||
|
||||
const handleOnSelectModel = (item: any) => {
|
||||
onSelectModel(item);
|
||||
setCurrent(item.id);
|
||||
};
|
||||
|
||||
const handleOnSearchRepo = async (text: string) => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
@@ -67,8 +72,10 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
).reverse();
|
||||
cacheRepoOptions.current = sortedList;
|
||||
setRepoOptions(sortedList);
|
||||
handleOnSelectModel(sortedList[0]);
|
||||
} catch (error) {
|
||||
setRepoOptions([]);
|
||||
handleOnSelectModel({});
|
||||
cacheRepoOptions.current = [];
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -81,7 +88,6 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
};
|
||||
|
||||
const handleOnFocus = () => {
|
||||
setShowSearch(true);
|
||||
if (
|
||||
!repoOptions.length &&
|
||||
!cacheRepoOptions.current.length &&
|
||||
@@ -95,17 +101,6 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSelectModel = (item: any) => {
|
||||
onSelectModel(item);
|
||||
setShowSearch(false);
|
||||
};
|
||||
|
||||
const handleOnBlur = () => {
|
||||
setTimeout(() => {
|
||||
setShowSearch(false);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleFilterModels = (e: any) => {
|
||||
const text = e.target.value;
|
||||
const list = _.filter(cacheRepoOptions.current, (item: any) => {
|
||||
@@ -121,26 +116,30 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
|
||||
const handleSourceChange = (source: string) => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
onSourceChange(source);
|
||||
onSourceChange?.(source);
|
||||
setRepoOptions([]);
|
||||
cacheRepoOptions.current = [];
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleOnFocus();
|
||||
return () => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
};
|
||||
}, [modelSource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className={SearchStyle['search-bar']}>
|
||||
<RadioButtons
|
||||
{/* <RadioButtons
|
||||
options={sourceList}
|
||||
value={modelSource}
|
||||
onChange={handleSourceChange}
|
||||
></RadioButtons>
|
||||
></RadioButtons> */}
|
||||
<Input
|
||||
onPressEnter={handlerSearchModels}
|
||||
onChange={debounceFilter}
|
||||
allowClear
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={() => handleOnBlur()}
|
||||
className="m-l-20"
|
||||
placeholder={
|
||||
modelSource === 'huggingface'
|
||||
? 'Search models from hugging face '
|
||||
@@ -156,17 +155,16 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
}
|
||||
></Input>
|
||||
</div>
|
||||
{showSearch && (
|
||||
{
|
||||
<SearchResult
|
||||
loading={loading}
|
||||
resultList={repoOptions}
|
||||
current=""
|
||||
current={current}
|
||||
source={modelSource}
|
||||
onSelect={handleOnSelectModel}
|
||||
></SearchResult>
|
||||
)}
|
||||
<div style={{ height: '81px' }}></div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -26,7 +26,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
|
||||
{resultList.length ? (
|
||||
<Row gutter={[10, 10]}>
|
||||
{resultList.map((item, index) => (
|
||||
<Col span={12} key={item.name}>
|
||||
<Col span={24} key={item.name}>
|
||||
<div onClick={(e) => handleSelect(e, item)}>
|
||||
<HFModelItem
|
||||
source={source}
|
||||
|
||||
@@ -5,7 +5,6 @@ import PageTools from '@/components/page-tools';
|
||||
import SealTable from '@/components/seal-table';
|
||||
import SealColumn from '@/components/seal-table/components/seal-column';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
@@ -13,14 +12,14 @@ import ViewCodeModal from '@/pages/playground/components/view-code-modal';
|
||||
import { handleBatchRequest } from '@/utils';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
WechatWorkOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
|
||||
import { Button, Input, Space, Tag, message } from 'antd';
|
||||
import { Button, Dropdown, Input, Space, Tag, message } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
@@ -36,6 +35,7 @@ import {
|
||||
import { modelSourceMap } from '../config';
|
||||
import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
|
||||
import AddModal from './add-modal';
|
||||
import DeployModal from './deploy-modal';
|
||||
import InstanceItem from './instance-item';
|
||||
import ViewLogsModal from './view-logs-modal';
|
||||
|
||||
@@ -80,13 +80,37 @@ const Models: React.FC<ModelsProps> = ({
|
||||
const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
|
||||
const [openLogModal, setOpenLogModal] = useState(false);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [openDeployModal, setOpenDeployModal] = useState(false);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [currentData, setCurrentData] = useState<ListItem | undefined>(
|
||||
undefined
|
||||
);
|
||||
const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
|
||||
const modalRef = useRef<any>(null);
|
||||
const sourceRef = useRef<any>(null);
|
||||
|
||||
const sourceOptions = [
|
||||
{
|
||||
label: 'Hugging Face',
|
||||
value: modelSourceMap.huggingface_value,
|
||||
key: 'huggingface',
|
||||
icon: <IconFont type="icon-huggingface"></IconFont>,
|
||||
onClick: () => {
|
||||
sourceRef.current = modelSourceMap.huggingface_value;
|
||||
setOpenDeployModal(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Ollama Library',
|
||||
value: modelSourceMap.ollama_library_value,
|
||||
key: 'ollama_library',
|
||||
icon: <IconFont type="icon-ollama"></IconFont>,
|
||||
onClick: () => {
|
||||
sourceRef.current = modelSourceMap.ollama_library_value;
|
||||
setOpenDeployModal(true);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const ActionList = [
|
||||
{
|
||||
@@ -133,7 +157,6 @@ const Models: React.FC<ModelsProps> = ({
|
||||
|
||||
const handleAddModal = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle(intl.formatMessage({ id: 'models.button.deploy' }));
|
||||
};
|
||||
|
||||
@@ -141,21 +164,12 @@ const Models: React.FC<ModelsProps> = ({
|
||||
async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data);
|
||||
|
||||
if (data.source === modelSourceMap.ollama_library_value) {
|
||||
data.ollama_library_model_name = `${data.ollama_library_model_name}:${data.tag}`;
|
||||
}
|
||||
if (action === PageAction.CREATE) {
|
||||
await createModel({ data });
|
||||
}
|
||||
if (action === PageAction.EDIT) {
|
||||
await updateModel({ data, id: currentData?.id as number });
|
||||
}
|
||||
await updateModel({ data, id: currentData?.id as number });
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
},
|
||||
[action, currentData]
|
||||
[currentData]
|
||||
);
|
||||
|
||||
const handleModalCancel = useCallback(() => {
|
||||
@@ -163,6 +177,20 @@ const Models: React.FC<ModelsProps> = ({
|
||||
setOpenAddModal(false);
|
||||
}, []);
|
||||
|
||||
const handleDeployModalCancel = useCallback(() => {
|
||||
setOpenDeployModal(false);
|
||||
}, []);
|
||||
|
||||
const handleCreateModel = useCallback(async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data);
|
||||
|
||||
await createModel({ data });
|
||||
setOpenDeployModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
}, []);
|
||||
|
||||
const handleLogModalCancel = useCallback(() => {
|
||||
setOpenLogModal(false);
|
||||
}, []);
|
||||
@@ -230,7 +258,6 @@ const Models: React.FC<ModelsProps> = ({
|
||||
const handleEdit = (row: ListItem) => {
|
||||
setCurrentData(row);
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle(intl.formatMessage({ id: 'models.title.edit' }));
|
||||
};
|
||||
|
||||
@@ -314,13 +341,15 @@ const Models: React.FC<ModelsProps> = ({
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<Button
|
||||
icon={<PlusOutlined></PlusOutlined>}
|
||||
type="primary"
|
||||
onClick={handleAddModal}
|
||||
>
|
||||
{intl?.formatMessage?.({ id: 'models.button.deploy' })}
|
||||
</Button>
|
||||
<Dropdown menu={{ items: sourceOptions }}>
|
||||
<Button
|
||||
icon={<DownOutlined></DownOutlined>}
|
||||
type="primary"
|
||||
iconPosition="end"
|
||||
>
|
||||
{intl?.formatMessage?.({ id: 'models.button.deploy' })}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Access accessible={access.canDelete}>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
@@ -440,12 +469,21 @@ const Models: React.FC<ModelsProps> = ({
|
||||
</PageContainer>
|
||||
<AddModal
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
action={PageAction.EDIT}
|
||||
title={title}
|
||||
data={currentData}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddModal>
|
||||
<DeployModal
|
||||
open={openDeployModal}
|
||||
action={PageAction.CREATE}
|
||||
title="Deploy Model"
|
||||
data={currentData}
|
||||
source={sourceRef.current}
|
||||
onCancel={handleDeployModalCancel}
|
||||
onOk={handleCreateModel}
|
||||
></DeployModal>
|
||||
<ViewLogsModal
|
||||
url={currentInstanceUrl}
|
||||
open={openLogModal}
|
||||
|
||||
@@ -6,7 +6,7 @@ export const ollamaModelOptions = [
|
||||
label: 'llama3.1',
|
||||
value: 'llama3.1',
|
||||
name: 'llama3.1',
|
||||
tags: ['Tools', '8B', '70B', '405B']
|
||||
tags: ['8B', '70B', '405B']
|
||||
},
|
||||
{ label: 'llama3', value: 'llama3', name: 'llama3', tags: ['8B', '70B'] },
|
||||
{ label: 'gemma2', value: 'gemma2', name: 'gemma2', tags: ['9B', '27B'] },
|
||||
@@ -14,13 +14,13 @@ export const ollamaModelOptions = [
|
||||
label: 'mistral',
|
||||
value: 'mistral',
|
||||
name: 'mistral',
|
||||
tags: ['Tools', '7B']
|
||||
tags: ['7B']
|
||||
},
|
||||
{
|
||||
label: 'llava',
|
||||
value: 'llava',
|
||||
name: 'llava',
|
||||
tags: ['Vision', '7B', '13B', '34B']
|
||||
tags: ['7B', '13B', '34B']
|
||||
},
|
||||
{
|
||||
label: 'qwen2',
|
||||
@@ -33,13 +33,13 @@ export const ollamaModelOptions = [
|
||||
label: 'codellama',
|
||||
value: 'codellama',
|
||||
name: 'codellama',
|
||||
tags: ['Code', '7B', '13B', '34B', '70B']
|
||||
tags: ['7B', '13B', '34B', '70B']
|
||||
},
|
||||
{
|
||||
label: 'deepseek-coder',
|
||||
value: 'deepseek-coder',
|
||||
name: 'deepseek-coder',
|
||||
tags: ['Code', '1B', '7B', '33B']
|
||||
tags: ['1B', '7B', '33B']
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
.hf-model-file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-sider);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-fill-sider);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,19 @@
|
||||
.search-result-wrap {
|
||||
background-color: rgba(255, 255, 255, 100%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 123px;
|
||||
padding: 16px;
|
||||
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
|
||||
box-shadow: inset 0 -10px 10px rgba(5, 5, 5, 10%);
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--ant-color-split);
|
||||
box-shadow: 0 1px 2px rgba(5, 5, 5, 5%);
|
||||
// border-bottom: 1px solid var(--ant-color-split);
|
||||
// box-shadow: 0 1px 2px rgba(5, 5, 5, 5%);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user