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

chore: add cancel query model

Browse Source
This commit is contained in:
jialin
2024-08-21 18:09:13 +08:00
parent ba1670e56d
commit abb87e71ed
23 changed files with 523 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/highlight-code/code-viewer.tsx
+11 -10
View File
@@ -1,5 +1,6 @@
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import { memo, useMemo } from 'react';
import CopyButton from '../copy-button';
import { escapeHtml } from './utils';
@@ -19,7 +20,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
copyable = true
} = props || {};
const renderCode = () => {
const highlightedCode = useMemo(() => {
const autodetectLang = autodetect && !lang;
const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang);
let className = '';
@@ -52,9 +53,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
value: result.value,
className: className
};
};
const highlightedCode = renderCode();
}, [code, lang, autodetect, ignoreIllegals]);
return (
<pre className="code-pre">
@@ -64,13 +63,15 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
__html: highlightedCode.value
}}
></code>
<CopyButton
text={code}
size="small"
style={{ color: '#abb2bf' }}
></CopyButton>
{copyable && (
<CopyButton
text={code}
size="small"
style={{ color: '#abb2bf' }}
></CopyButton>
)}
</pre>
);
};
export default CodeViewer;
export default memo(CodeViewer);
src/components/highlight-code/index.tsx
+3 -2
View File
@@ -4,12 +4,13 @@ import './style.less';
const HighlightCode: React.FC<{
code: string;
lang?: string;
copyable?: boolean;
}> = (props) => {
const { code, lang = 'bash' } = props;
const { code, lang = 'bash', copyable = true } = props;
return (
<div className="high-light-wrapper">
<CodeViewer lang={lang} code={code} />
<CodeViewer lang={lang} code={code} copyable={copyable} />
</div>
);
};
src/components/status-tag/copy.less
+8
View File
@@ -16,5 +16,13 @@
top: 0;
border-radius: 0 8px 0 4px;
}
.simplebar-scrollbar::before {
background: var(--color-scroll-bg);
}
.simplebar-content {
width: max-content;
}
}
}
src/components/status-tag/index.less
+10
View File
@@ -11,6 +11,16 @@
font-size: var(--font-size-base);
overflow: hidden;
.txt {
display: flex;
align-items: center;
height: 20px;
&.err {
cursor: default;
}
}
&.download {
border: 1px solid #93ecc5 !important;
}
src/components/status-tag/index.tsx
+18 -6
View File
@@ -4,6 +4,8 @@ import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import CopyButton from '../copy-button';
import CopyStyle from './copy.less';
import './index.less';
@@ -70,7 +72,14 @@ const StatusTag: React.FC<StatusTagProps> = ({
size="small"
></CopyButton>
</div>
<div>{statusValue.message}</div>
<SimpleBar style={{ maxHeight: 200 }}>
<div
style={{ width: 'max-content', maxWidth: 250, paddingInline: 10 }}
>
{statusValue.message}
</div>
</SimpleBar>
</div>
);
}, [statusValue]);
@@ -87,15 +96,18 @@ const StatusTag: React.FC<StatusTagProps> = ({
{statusValue.message ? (
<Tooltip
title={renderTitle}
overlayInnerStyle={{ maxHeight: 200, overflow: 'auto' }}
destroyTooltipOnHide={true}
overlayInnerStyle={{ paddingInline: 0 }}
>
<span className="m-r-5">
<InfoCircleOutlined />
<span className="txt err">
<span className="m-r-5">
<InfoCircleOutlined />
</span>
{renderContent()}
</span>
{renderContent()}
</Tooltip>
) : (
renderContent()
<span className="txt">{renderContent()}</span>
)}
</span>
);
src/config/hotkeys.ts
+3 -1
View File
@@ -11,5 +11,7 @@ export default {
EDIT: ['ctrl+e', 'meta+e'],
SEARCH: ['ctrl+f', 'meta+f'],
RESET: ['ctrl+shift+r', 'meta+shift+r'],
INPUT: ['ctrl+k', 'meta+k']
INPUT: ['ctrl+k', 'meta+k'],
NEW1: ['ctrl+1', 'meta+1'],
NEW2: ['ctrl+2', 'meta+2']
};
src/global.less
+1
View File
@@ -12,6 +12,7 @@ html {
--color-fill-1: var(--ant-color-fill-tertiary);
// --color-fill-1: #fff;
--ant-color-text: #000;
--color-scroll-bg: #d9d9d9;
--color-fill-2: #fff;
--color-fill-3: #f3f6fa;
--color-logs-bg: #1e1e1e;
src/layouts/Exception.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
// @ts-nocheck
// This file is generated by Umi automatically
// DO NOT CHANGE IT MANUALLY!
import { history, useIntl, type IRoute } from '@umijs/max';
import { Button, Result } from 'antd';
import React from 'react';
src/locales/en-US/models.ts
+11 -1
View File
@@ -18,5 +18,15 @@ export default {
'model.deploy.sort': 'Sort',
'model.deploy.search.placeholder': 'Search models from Hugging Face',
'model.form.ollamatips':
'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.'
'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.',
'models.sort.name': 'Name',
'models.sort.size': 'Size',
'models.sort.likes': 'Likes',
'models.sort.downloads': 'Downloads',
'models.sort.updated': 'Updated',
'models.search.result': '{count} results',
'models.data.card': 'Model Card',
'models.available.files': 'Available Files',
'models.viewin.hf': 'View in Hugging Face',
'models.architecture': 'Architecture'
};
src/locales/zh-CN/models.ts
+11 -1
View File
@@ -18,5 +18,15 @@ export default {
'model.deploy.sort': '排序',
'model.deploy.search.placeholder': '从 Hugging Face 搜索模型',
'model.form.ollamatips':
'提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。'
'提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
'models.sort.name': '名称',
'models.sort.size': '大小',
'models.sort.likes': '喜欢',
'models.sort.downloads': '下载',
'models.sort.updated': '更新时间',
'models.search.result': '{count} 个结果',
'models.data.card': '模型简介',
'models.available.files': '可用文件',
'models.viewin.hf': '在 Hugging Face 中查看',
'models.architecture': '架构'
};
src/pages/llmodels/apis/index.ts
+47 -6
View File
@@ -1,4 +1,4 @@
import { listFiles, listModels } from '@huggingface/hub';
import { downloadFile, listFiles, listModels } from '@huggingface/hub';
import { PipelineType } from '@huggingface/tasks';
import { request } from '@umijs/max';
import {
@@ -119,9 +119,13 @@ export async function callHuggingfaceQuickSearch(params: any) {
const HUGGINGFACE_API = 'https://huggingface.co/api/models';
export async function queryHuggingfaceModelDetail(params: { repo: string }) {
export async function queryHuggingfaceModelDetail(
params: { repo: string },
options?: any
) {
return request(`${HUGGINGFACE_API}/${params.repo}`, {
method: 'GET'
method: 'GET',
cancelToken: options?.token
});
}
@@ -139,7 +143,7 @@ export async function queryHuggingfaceModels(
for await (const model of listModels({
...params,
...options,
limit: 100,
limit: 500,
additionalFields: ['sha'],
fetch(url: string, config: any) {
try {
@@ -148,6 +152,7 @@ export async function queryHuggingfaceModels(
signal: options.signal
});
} catch (error) {
console.log('queryHuggingfaceModels error===', error);
// ignore
return [];
}
@@ -158,12 +163,48 @@ export async function queryHuggingfaceModels(
return result;
}
export async function queryHuggingfaceModelFiles(params: { repo: string }) {
export async function queryHuggingfaceModelFiles(
params: { repo: string },
options?: any
) {
const result = [];
for await (const fileInfo of listFiles({
...params
...params,
fetch(url: string, config: any) {
try {
return fetch(url, {
...config,
signal: options?.signal
});
} catch (error) {
console.log('queryHuggingfaceModels error===', error);
// ignore
return [];
}
}
})) {
result.push(fileInfo);
}
return result;
}
export async function downloadModelFile(
params: { repo: string; revision: string; path: string },
options?: any
) {
const { repo, revision, path } = params;
const res = await (
await downloadFile({
repo,
revision: revision,
path: path,
fetch(url: string, config: any) {
return fetch(url, {
...config,
signal: options?.signal
});
}
})
)?.text();
return res;
}
src/pages/llmodels/components/column-wrapper.tsx
+8 -3
View File
@@ -3,13 +3,16 @@ import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import '../style/column-wrapper.less';
const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
const ColumnWrapper: React.FC<any> = ({ children, footer, height }) => {
if (footer) {
return (
<div className="column-wrapper-footer">
<div className="column-wrapper">
<SimpleBar
style={{ height: 'calc(100vh - 89px)', paddingBottom: '50px' }}
style={{
height: height || 'calc(100vh - 89px)',
paddingBottom: '50px'
}}
>
{children}
</SimpleBar>
@@ -20,7 +23,9 @@ const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
}
return (
<div className="column-wrapper">
<SimpleBar style={{ height: 'calc(100vh - 89px)' }}>{children}</SimpleBar>
<SimpleBar style={{ height: height || 'calc(100vh - 89px)' }}>
{children}
</SimpleBar>
</div>
);
};
src/pages/llmodels/components/deploy-modal.tsx
+17 -6
View File
@@ -3,7 +3,7 @@ import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { modelSourceMap } from '../config';
import { FormData, ListItem } from '../config/types';
import ColumnWrapper from './column-wrapper';
@@ -38,6 +38,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const form = useRef<any>({});
const intl = useIntl();
const [huggingfaceRepoId, setHuggingfaceRepoId] = useState<string>('');
const [collapsed, setCollapsed] = useState<boolean>(false);
const [loadingModel, setLoadingModel] = useState<boolean>(false);
const handleSelectModelFile = useCallback((item: any) => {
form.current?.setFieldValue?.('huggingface_filename', item.path);
@@ -100,15 +102,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<SearchModel
modelSource={props.source}
onSelectModel={handleOnSelectModel}
setLoadingModel={setLoadingModel}
></SearchModel>
</ColumnWrapper>
)}
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<ModelCard repo={huggingfaceRepoId}></ModelCard>
<ModelCard
repo={huggingfaceRepoId}
onCollapse={setCollapsed}
collapsed={collapsed}
></ModelCard>
<HFModelFile
repo={huggingfaceRepoId}
onSelectFile={handleSelectModelFile}
collapsed={collapsed}
loadingModel={loadingModel}
></HFModelFile>
</ColumnWrapper>
)}
@@ -126,9 +135,11 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}
>
<>
<TitleWrapper>
{intl.formatMessage({ id: 'models.form.configurations' })}
</TitleWrapper>
{source === modelSourceMap.huggingface_value && (
<TitleWrapper>
{intl.formatMessage({ id: 'models.form.configurations' })}
</TitleWrapper>
)}
<DataForm
source={source}
action={action}
@@ -143,4 +154,4 @@ const AddModal: React.FC<AddModalProps> = (props) => {
);
};
export default AddModal;
export default memo(AddModal);
src/pages/llmodels/components/hf-model-file.tsx
+121 -70
View File
@@ -1,10 +1,12 @@
import { convertFileSize } from '@/utils';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Col, Empty, Row, Space, Spin, Tag } from 'antd';
import { Col, Empty, Row, Select, Space, Spin, Tag } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { queryHuggingfaceModelFiles } from '../apis';
import FileType from '../config/file-type';
import '../style/hf-model-file.less';
@@ -12,16 +14,31 @@ import TitleWrapper from './title-wrapper';
interface HFModelFileProps {
repo: string;
collapsed?: boolean;
loadingModel?: boolean;
onSelectFile?: (file: any) => void;
}
const HFModelFile: React.FC<HFModelFileProps> = (props) => {
const { collapsed, loadingModel } = props;
const intl = useIntl();
const [dataSource, setDataSource] = useState<any>({
fileList: [],
loading: false
});
const [sortType, setSortType] = useState<string>('size');
const [current, setCurrent] = useState<string>('');
const modelFilesSortOptions = useRef<any[]>([
{
label: intl.formatMessage({ id: 'models.sort.size' }),
value: 'size'
},
{
label: intl.formatMessage({ id: 'models.sort.name' }),
value: 'name'
}
]);
const axiosTokenRef = useRef<any>(null);
const handleSelectModelFile = (item: any) => {
props.onSelectFile?.(item);
@@ -34,14 +51,23 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
handleSelectModelFile({});
return;
}
axiosTokenRef.current?.abort?.();
axiosTokenRef.current = new AbortController();
setDataSource({ ...dataSource, loading: true });
setCurrent('');
try {
const res = await queryHuggingfaceModelFiles({ repo: props.repo });
const res = await queryHuggingfaceModelFiles(
{ repo: props.repo },
{
signal: axiosTokenRef.current.signal
}
);
const list = _.filter(res, (file: any) => {
return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
});
const sortList = _.sortBy(list, (item: any) => item.size);
const sortList = _.sortBy(list, (item: any) => {
return sortType === 'size' ? item.size : item.path;
});
setDataSource({ fileList: sortList, loading: false });
handleSelectModelFile(list[0]);
} catch (error) {
@@ -50,6 +76,14 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
}
};
const handleSortChange = (value: string) => {
const list = _.sortBy(dataSource.fileList, (item: any) => {
return value === 'size' ? item.size : item.path;
});
setSortType(value);
setDataSource({ ...dataSource, fileList: list });
};
const getModelQuantizationType = (item: any) => {
const name = _.split(item.path, '.').slice(0, -1).join('.');
let quanType = _.toUpper(name.split('-').slice(-1)[0]);
@@ -77,76 +111,93 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
useEffect(() => {
handleFetchModelFiles();
}, [props.repo]);
useEffect(() => {
return () => {
axiosTokenRef.current?.abort?.();
};
}, []);
return (
<div>
<TitleWrapper>
<span>Available Files ({dataSource.fileList.length || 0})</span>
<span>
{intl.formatMessage({ id: 'models.available.files' })} (
{dataSource.fileList.length || 0})
</span>
<Select
value={sortType}
onChange={handleSortChange}
labelRender={({ label }) => {
return (
<span>
{intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
</span>
);
}}
options={modelFilesSortOptions.current}
size="middle"
style={{ width: '120px' }}
></Select>
</TitleWrapper>
<div style={{ padding: '16px 24px' }}>
<Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
{dataSource.fileList.length ? (
<Row gutter={[16, 24]}>
{_.map(dataSource.fileList, (item: any) => {
return (
<Col span={24} key={item.path}>
<div
className={classNames('hf-model-file', {
active: item.path === current
})}
tabIndex={0}
onClick={() => handleSelectModelFile(item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<Space className="tags">
{/* <span className="tag-item">
{convertFileSize(item.size)}
</span> */}
<Tag
className="tag-item"
color="green"
style={{
marginRight: 0
}}
>
<span style={{ opacity: 0.65 }}>
{convertFileSize(item.size)}
</span>
</Tag>
{getModelQuantizationType(item)}
</Space>
<div className="btn">
{/* <Button size="middle">
{item.path === current
? intl.formatMessage({
id: 'common.button.selected'
})
: intl.formatMessage({
id: 'common.button.select'
})}
</Button> */}
<SimpleBar
style={{ maxHeight: collapsed ? 'max-content' : 'calc(100vh - 330px)' }}
>
<div style={{ padding: '16px 24px' }}>
<Spin
spinning={dataSource.loading || loadingModel}
style={{ minHeight: 100 }}
>
{dataSource.fileList.length ? (
<Row gutter={[16, 24]}>
{_.map(dataSource.fileList, (item: any) => {
return (
<Col span={24} key={item.path}>
<div
className={classNames('hf-model-file', {
active: item.path === current
})}
tabIndex={0}
onClick={() => handleSelectModelFile(item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<Space className="tags">
<Tag
className="tag-item"
color="green"
style={{
marginRight: 0
}}
>
<span style={{ opacity: 0.65 }}>
{convertFileSize(item.size)}
</span>
</Tag>
{getModelQuantizationType(item)}
</Space>
<div className="btn"></div>
</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 files found"
/>
)
)}
</Spin>
</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 files found"
/>
)
)}
</Spin>
</div>
</SimpleBar>
</div>
);
};
src/pages/llmodels/components/hf-model-item.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
<div className="info">
{props.source === modelSourceMap.huggingface_value ? (
<Space size={16}>
{props.task && (
{/* {props.task && (
<Tag
className="tag-item"
color="gold"
@@ -50,7 +50,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
>
<span style={{ opacity: 0.65 }}>{props.task}</span>
</Tag>
)}
)} */}
<span>
{dayjs().to(
dayjs(dayjs(props.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
src/pages/llmodels/components/model-card.tsx
+126 -27
View File
@@ -1,20 +1,51 @@
import HighlightCode from '@/components/highlight-code';
import IconFont from '@/components/icon-font';
import { downloadFile } from '@huggingface/hub';
import { Button, Empty, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import { queryHuggingfaceModelDetail } from '../apis';
import useRequestToken from '@/hooks/use-request-token';
import {
DownOutlined,
FileTextOutlined,
RightOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Empty, Tag, Tooltip } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { downloadModelFile, queryHuggingfaceModelDetail } from '../apis';
import '../style/model-card.less';
import TitleWrapper from './title-wrapper';
const ModelCard: React.FC<{ repo: string }> = (props) => {
const { repo } = props;
const ModelCard: React.FC<{
repo: string;
onCollapse: (flag: boolean) => void;
collapsed: boolean;
}> = (props) => {
const { repo, onCollapse, collapsed } = props;
const intl = useIntl();
const requestSource = useRequestToken();
const [modelData, setModelData] = useState<any>({});
const [readmeText, setReadmeText] = useState<string | null>(null);
const requestToken = useRef<any>(null);
const axiosTokenRef = useRef<any>(null);
const loadFile = async (repo: string, sha: string) => {
const res = await (
await downloadFile({ repo, revision: sha, path: 'README.md' })
)?.text();
return res;
try {
axiosTokenRef.current?.abort?.();
axiosTokenRef.current = new AbortController();
const res = await downloadModelFile(
{
repo,
revision: sha,
path: 'README.md'
},
{
signal: axiosTokenRef.current.signal
}
);
return res || '';
} catch (error) {
return '';
}
};
const getModelCardData = async () => {
@@ -22,42 +53,110 @@ const ModelCard: React.FC<{ repo: string }> = (props) => {
setModelData(null);
return;
}
requestToken.current?.cancel?.();
requestToken.current = requestSource();
try {
const res = await queryHuggingfaceModelDetail({ repo });
const [modelcard, readme] = await Promise.all([
queryHuggingfaceModelDetail(
{ repo },
{
token: requestToken.current.token
}
),
loadFile(repo, 'main')
]);
setModelData(res);
setModelData(modelcard);
setReadmeText(readme);
} catch (error) {
setModelData({});
}
};
const handleCollapse = useCallback(() => {
onCollapse(!collapsed);
}, [collapsed]);
useEffect(() => {
getModelCardData();
}, [repo]);
useEffect(() => {
if (!readmeText) {
onCollapse(false);
}
}, [readmeText]);
useEffect(() => {
return () => {
requestToken.current?.cancel?.();
axiosTokenRef.current?.abort?.();
};
}, []);
return (
<>
<TitleWrapper>
<span>Model Card</span>
<span>{intl.formatMessage({ id: 'models.data.card' })}</span>
</TitleWrapper>
<div className="wrapper">
{modelData ? (
<div className="model-card-wrap">
<div className="title">{modelData.id}</div>
<div className="flex-between flex-center">
<Tag className="tag-item">
<span className="m-r-5">Architecture:</span>
{modelData.config?.model_type}
</Tag>
<Button
type="link"
target="_blank"
href={`https://huggingface.co/${modelData.id}`}
>
View in Hugging Face
<IconFont type="icon-external-link"></IconFont>
</Button>
<div className="title">
{modelData.id}{' '}
<Tooltip title={intl.formatMessage({ id: 'models.viewin.hf' })}>
<Button
size="small"
type="link"
target="_blank"
href={`https://huggingface.co/${modelData.id}`}
>
<IconFont type="icon-external-link"></IconFont>
</Button>
</Tooltip>
</div>
<div className="flex-between flex-center">
{modelData.config?.model_type && (
<Tag className="tag-item" color="gold">
<span style={{ opacity: 0.65 }}>
<span className="m-r-5">
{intl.formatMessage({ id: 'models.architecture' })}:
</span>
{modelData.config?.model_type}
</span>
</Tag>
)}
</div>
{readmeText && (
<div
style={{
borderRadius: 4,
backgroundColor: '#282c34',
marginTop: 16,
overflow: 'hidden'
}}
>
<span className="mkd-title" onClick={handleCollapse}>
<span>
<FileTextOutlined className="m-r-5" /> README.md
</span>
<span>
{collapsed ? <DownOutlined /> : <RightOutlined />}
</span>
</span>
<SimpleBar
style={{
maxHeight: collapsed ? 300 : 0
}}
>
<HighlightCode
code={readmeText}
lang="markdown"
copyable={false}
></HighlightCode>
</SimpleBar>
</div>
)}
</div>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
src/pages/llmodels/components/search-model.tsx
+29 -11
View File
@@ -5,17 +5,14 @@ import { Button, Input, Select } from 'antd';
import _ from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { queryHuggingfaceModels } from '../apis';
import {
modelFilesSortOptions,
modelSourceMap,
ollamaModelOptions
} from '../config';
import { modelSourceMap, ollamaModelOptions } from '../config';
import SearchStyle from '../style/search-result.less';
import SearchInput from './search-input';
import SearchResult from './search-result';
interface SearchInputProps {
modelSource: string;
setLoadingModel?: (flag: boolean) => void;
onSourceChange?: (source: string) => void;
onSelectModel: (model: any) => void;
}
@@ -38,7 +35,7 @@ const sourceList = [
const SearchModel: React.FC<SearchInputProps> = (props) => {
console.log('SearchModel======');
const intl = useIntl();
const { modelSource, onSourceChange, onSelectModel } = props;
const { modelSource, setLoadingModel, onSourceChange, onSelectModel } = props;
const [dataSource, setDataSource] = useState<{
repoOptions: any[];
loading: boolean;
@@ -51,6 +48,17 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
const cacheRepoOptions = useRef<any[]>([]);
const axiosTokenRef = useRef<any>(null);
const customOllamaModelRef = useRef<any>(null);
const modelFilesSortOptions = useRef<any[]>([
{ label: intl.formatMessage({ id: 'models.sort.likes' }), value: 'likes' },
{
label: intl.formatMessage({ id: 'models.sort.downloads' }),
value: 'downloads'
},
{
label: intl.formatMessage({ id: 'models.sort.updated' }),
value: 'updatedAt'
}
]);
const handleOnSelectModel = useCallback((item: any) => {
onSelectModel(item);
@@ -67,6 +75,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
pre.loading = true;
return { ...pre };
});
setLoadingModel?.(true);
cacheRepoOptions.current = [];
const params = {
search: {
@@ -93,12 +102,15 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
repoOptions: sortedList,
loading: false
});
setLoadingModel?.(false);
handleOnSelectModel(sortedList[0]);
} catch (error) {
console.log('queryHuggingfaceModels error===', error);
setDataSource({
repoOptions: [],
loading: false
});
setLoadingModel?.(false);
handleOnSelectModel({});
cacheRepoOptions.current = [];
}
@@ -184,15 +196,18 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
loading: false
});
};
const renderHFSearch = () => {
return (
<>
<SearchInput onSearch={handlerSearchModels}></SearchInput>
<div className={SearchStyle.filter}>
<span>
<span className="value">{dataSource.repoOptions.length}</span>
results
<span className="value">
{intl.formatMessage(
{ id: 'models.search.result' },
{ count: dataSource.repoOptions.length }
)}
</span>
</span>
<Select
value={sortType}
@@ -204,7 +219,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</span>
);
}}
options={modelFilesSortOptions}
options={modelFilesSortOptions.current}
size="middle"
style={{ width: '150px' }}
></Select>
@@ -233,10 +248,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
useEffect(() => {
handleOnOpen();
console.log('SearchModel useEffect', modelSource);
}, [modelSource]);
useEffect(() => {
return () => {
axiosTokenRef.current?.abort?.();
};
}, [modelSource]);
}, []);
return (
<div style={{ flex: 1 }}>
src/pages/llmodels/components/table-list.tsx
+56 -4
View File
@@ -5,11 +5,12 @@ 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 HotKeys from '@/config/hotkeys';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import ViewCodeModal from '@/pages/playground/components/view-code-modal';
import { handleBatchRequest } from '@/utils';
import { handleBatchRequest, platformCall } from '@/utils';
import {
DeleteOutlined,
DownOutlined,
@@ -23,6 +24,7 @@ import { Button, Dropdown, Input, Space, Tag, message } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { memo, useCallback, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import {
MODELS_API,
MODEL_INSTANCE_API,
@@ -64,6 +66,7 @@ const Models: React.FC<ModelsProps> = ({
total
}) => {
console.log('model list====2');
const platform = platformCall();
const access = useAccess();
const intl = useIntl();
const navigate = useNavigate();
@@ -77,7 +80,6 @@ const Models: React.FC<ModelsProps> = ({
params: {},
show: false
});
const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
const [openLogModal, setOpenLogModal] = useState(false);
const [openAddModal, setOpenAddModal] = useState(false);
const [openDeployModal, setOpenDeployModal] = useState<any>({
@@ -92,9 +94,46 @@ const Models: React.FC<ModelsProps> = ({
const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
const modalRef = useRef<any>(null);
useHotkeys(
HotKeys.NEW1.join(','),
() => {
setOpenDeployModal({
show: true,
width: 'calc(100vw - 220px)',
source: modelSourceMap.huggingface_value
});
},
{ preventDefault: true }
);
useHotkeys(
HotKeys.NEW2.join(','),
() => {
setOpenDeployModal({
show: true,
width: 600,
source: modelSourceMap.ollama_library_value
});
},
{ preventDefault: true }
);
const sourceOptions = [
{
label: 'Hugging Face',
label: (
<span className="flex-center flex-between">
<span>Hugging Face</span>
<Tag style={{ marginRight: 0 }} className="m-l-10">
{platform.isMac ? (
<>
<IconFont type="icon-command"></IconFont> + 1
</>
) : (
<>CTRL + 1</>
)}
</Tag>
</span>
),
value: modelSourceMap.huggingface_value,
key: 'huggingface',
icon: <IconFont type="icon-huggingface"></IconFont>,
@@ -107,7 +146,20 @@ const Models: React.FC<ModelsProps> = ({
}
},
{
label: 'Ollama Library',
label: (
<span className="flex-center flex-between">
<span>Ollama Library</span>
<Tag style={{ marginRight: 0 }} className="m-l-10">
{platform.isMac ? (
<>
<IconFont type="icon-command"></IconFont> + 2
</>
) : (
<>CTRL + 2</>
)}
</Tag>
</span>
),
value: modelSourceMap.ollama_library_value,
key: 'ollama_library',
icon: <IconFont type="icon-ollama"></IconFont>,
src/pages/llmodels/components/title-wrapper.tsx
+1 -5
View File
@@ -2,11 +2,7 @@ import React from 'react';
import '../style/title-wrapper.less';
const TitleWrapper: React.FC<any> = ({ children }) => {
return (
<h3 className="h3">
<span>{children}</span>
</h3>
);
return <h3 className="h3">{children}</h3>;
};
export default TitleWrapper;
src/pages/llmodels/config/index.ts
+20 -20
View File
@@ -44,13 +44,13 @@ export const ollamaModelOptions = [
tags: ['7B'],
id: 'mistral'
},
{
label: 'llava',
value: 'llava',
name: 'llava',
tags: ['7B', '13B', '34B'],
id: 'llava'
},
// {
// label: 'llava',
// value: 'llava',
// name: 'llava',
// tags: ['7B', '13B', '34B'],
// id: 'llava'
// },
{
label: 'qwen2',
value: 'qwen2',
@@ -59,11 +59,11 @@ export const ollamaModelOptions = [
id: 'qwen2'
},
{
label: 'phi3',
value: 'phi3',
name: 'phi3',
tags: ['3B', '14B'],
id: 'phi3'
label: 'phi3.5',
value: 'phi3.5',
name: 'phi3.5',
tags: ['3B'],
id: 'phi3.5'
},
{
label: 'codellama',
@@ -73,11 +73,11 @@ export const ollamaModelOptions = [
id: 'codellama'
},
{
label: 'deepseek-coder',
value: 'deepseek-coder',
name: 'deepseek-coder',
tags: ['1B', '7B', '33B'],
id: 'deepseek-coder'
label: 'deepseek-coder-v2',
value: 'deepseek-coder-v2',
name: 'deepseek-coder-v2',
tags: ['16B', '236B'],
id: 'deepseek-coder-v2'
}
];
@@ -143,7 +143,7 @@ export const ActionList = [
export const modelFilesSortOptions = [
// { label: 'Trending', value: 'trendingScore' },
{ label: 'Likes', value: 'likes' },
{ label: 'Downloads', value: 'downloads' },
{ label: 'Updated', value: 'updatedAt' }
{ label: 'models.sort.likes', value: 'likes' },
{ label: 'models.sort.downloads', value: 'downloads' },
{ label: 'models.sort.updated', value: 'updatedAt' }
];
src/pages/llmodels/index.tsx
+1
View File
@@ -69,6 +69,7 @@ const Models: React.FC = () => {
} else {
setDataSource({
...dataSource,
loading: !!res.items.length,
total: res.pagination.total
});
}
src/pages/llmodels/style/model-card.less
+17 -2
View File
@@ -8,6 +8,9 @@
.title {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tag-item {
@@ -18,12 +21,24 @@
border-radius: 4px;
font-size: 12px;
height: 20px;
border: 1px solid var(--ant-color-border);
color: var(--ant-color-text-secondary);
}
.btn {
display: flex;
justify-content: flex-end;
}
.mkd-title {
cursor: pointer;
color: rgba(255, 255, 255, 80%);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.simplebar-scrollbar::before {
background: var(--color-scroll-bg);
}
}
src/pages/llmodels/style/title-wrapper.less
+1
View File
@@ -6,6 +6,7 @@
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
padding: @padding;
padding-top: 0;