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

chore: draft model downloading

Browse Source
This commit is contained in:
jialin
2025-11-03 10:14:30 +08:00
parent ab9f9a9679
commit 2dab89363d
22 changed files with 157 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/catalog.tsx
+1 -1
View File
@@ -257,7 +257,7 @@ const Catalog: React.FC = () => {
allowClear
showSearch={false}
placeholder={intl.formatMessage({ id: 'models.filter.category' })}
style={{ width: 180 }}
style={{ width: 200 }}
size="large"
maxTagCount={1}
onChange={handleCategoryChange}
src/pages/llmodels/components/catalog-item.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
})}
</span>
</div>
<div className="tags">
<div className="tags gap-6">
{data.categories.map((sItem, i) => {
return (
<ThemeTag
src/pages/llmodels/components/deploy-builtin-modal.tsx
+2 -2
View File
@@ -27,13 +27,13 @@ import CompatibilityAlert from './compatible-alert';
const ModesMap: Record<string, string> = {
latency: 'models.form.mode.latency',
baseline: 'models.form.mode.baseline',
standard: 'models.form.mode.baseline',
throughput: 'models.form.mode.throughput'
};
const ModesTipsMap: Record<string, string> = {
latency: 'models.form.mode.latency.tips',
baseline: 'models.form.mode.baseline.tips',
standard: 'models.form.mode.baseline.tips',
throughput: 'models.form.mode.throughput.tips'
};
src/pages/llmodels/components/instance-item.tsx
+57 -19
View File
@@ -27,6 +27,7 @@ import styled from 'styled-components';
import { MODEL_INSTANCE_API } from '../apis';
import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { generateSource } from '../config/button-actions';
import {
DistributedServerItem,
DistributedServers,
@@ -55,12 +56,7 @@ const fieldList = [
}
];
const downloadList: ColumnProps[] = [
{
title: 'Worker',
key: 'worker_name',
width: 200
},
const statusColumn: ColumnProps[] = [
{
title: 'models.table.download.progress',
locale: true,
@@ -83,6 +79,25 @@ const downloadList: ColumnProps[] = [
}
}
];
const downloadList: ColumnProps[] = [
{
title: 'resources.worker',
locale: true,
key: 'worker_name',
width: 280
},
...statusColumn
];
const draftModelDownloadList: ColumnProps[] = [
{
title: 'models.form.draftModel',
locale: true,
key: 'draft_model',
width: 280
},
...statusColumn
];
const WorkerInfo = (props: {
title: React.ReactNode;
@@ -128,7 +143,7 @@ const RenderRayactorDownloading = (props: {
workerList: WorkerListItem[];
}) => {
const { severList, instanceData, workerList } = props;
if (!severList.length) {
if (!severList.length && !instanceData.draft_model_download_progress) {
return null;
}
const list = _.map(severList, (item: any) => {
@@ -148,14 +163,33 @@ const RenderRayactorDownloading = (props: {
}
];
const draftModelList = [];
if (instanceData.draft_model_download_progress > 0) {
draftModelList.push({
draft_model: generateSource(instanceData.draft_model_source),
download_progress: _.round(instanceData.draft_model_download_progress, 2)
});
}
return (
<div>
<SimpleTabel
columns={downloadList}
dataSource={[...mainWorker, ...list]}
rowKey="worker_name"
theme="light"
></SimpleTabel>
{severList.length > 0 && (
<SimpleTabel
columns={downloadList}
dataSource={[...mainWorker, ...list]}
rowKey="worker_name"
theme="light"
></SimpleTabel>
)}
{draftModelList.length > 0 && (
<SimpleTabel
columns={draftModelDownloadList}
dataSource={[...draftModelList]}
rowKey="worker_name"
theme="light"
></SimpleTabel>
)}
</div>
);
};
@@ -171,11 +205,12 @@ const RenderWorkerDownloading = (props: {
const severList: DistributedServerItem[] =
distributed_servers?.subordinate_workers || [];
if (
const isWorkerNotDownloading =
instanceData.state !== InstanceStatusMap.Downloading ||
!severList.length ||
backend === backendOptionsMap.llamaBox
) {
backend === backendOptionsMap.llamaBox;
if (isWorkerNotDownloading && !instanceData.draft_model_download_progress) {
return null;
}
return (
@@ -183,7 +218,7 @@ const RenderWorkerDownloading = (props: {
arrow={true}
styles={{
body: {
width: 300,
width: 360,
backgroundColor: 'var(--color-spotlight-bg)'
}
}}
@@ -204,8 +239,10 @@ const RenderWorkerDownloading = (props: {
size={16}
strokeColor="var(--ant-color-success)"
percent={
instanceData.draft_model_download_progress ||
_.find(severList, (item: any) => item.download_progress < 100)
?.download_progress || 0
?.download_progress ||
0
}
/>
</Tooltip>
@@ -543,6 +580,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
const renderOffloadInfo = useMemo(() => {
const total_layers = instanceData.computed_resource_claim?.total_layers;
const offload_layers = instanceData.computed_resource_claim?.offload_layers;
if (total_layers === offload_layers || !total_layers) {
return null;
}
@@ -640,7 +678,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
style={{
paddingLeft: '58px',
flexWrap: 'wrap',
gap: '5px'
gap: '8px'
}}
className="flex align-center"
>
src/pages/llmodels/config/test.ts
+1 -1
View File
@@ -84,7 +84,7 @@ export default {
speculative_config: {
enabled: true,
algorithm: 'eagle3',
draft_model_name: 'Qwen3-30B-A3B-EAGLE3',
draft_model: 'Qwen3-30B-A3B-EAGLE3',
num_draft_tokens: 8,
ngram_min_match_length: null,
ngram_max_match_length: null
src/pages/llmodels/config/types.ts
+12 -2
View File
@@ -85,7 +85,7 @@ export interface FormData {
speculative_config: {
enabled: boolean;
algorithm: string;
draft_model_name: string;
draft_model: string;
num_draft_tokens: number;
ngram_min_match_length: number;
ngram_max_match_length: number;
@@ -135,6 +135,16 @@ export interface ModelInstanceListItem {
id: number;
created_at: string;
updated_at: string;
draft_model_source: {
source: string;
huggingface_repo_id: string;
huggingface_filename: string;
model_scope_model_id: string;
model_scope_file_path: string;
local_path: string;
};
draft_model_download_progress: 0;
draft_model_resolved_path: string;
}
export interface ModelInstanceFormData {
@@ -214,7 +224,7 @@ export interface CatalogSpec {
speculative_config: {
enabled: boolean;
algorithm: string;
draft_model_name: string;
draft_model: string;
num_draft_tokens: number;
ngram_min_match_length: number;
ngram_max_match_length: number;
src/pages/llmodels/forms/index.tsx
+1 -1
View File
@@ -376,7 +376,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
speculative_config: {
enabled: false,
algorithm: '',
draft_model_name: null,
draft_model: null,
num_draft_tokens: 3,
ngram_min_match_length: 1,
ngram_max_match_length: 10
src/pages/llmodels/forms/kv-cache.tsx
-4
View File
@@ -28,10 +28,6 @@ const KVCacheForm = () => {
} else {
configCacheRef.current = form.getFieldValue('extended_kv_cache');
}
await new Promise((resolve) => {
setTimeout(resolve, 200);
});
onValuesChange?.({}, form.getFieldsValue());
};
const builtInBackend = useMemo(() => {
src/pages/llmodels/forms/speculative-decode.tsx
+22 -9
View File
@@ -1,3 +1,4 @@
import AutoComlete from '@/components/seal-form/auto-complete';
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealInputNumber from '@/components/seal-form/input-number';
import SealInput from '@/components/seal-form/seal-input';
@@ -41,14 +42,16 @@ const SpeculativeDecode = () => {
};
const handleSpeculativeEnabledChange = (e: any) => {
const speculativeConfig = form.getFieldValue('speculative_config');
if (e.target.checked) {
form.setFieldValue('speculative_config', {
enabled: true,
algorithm: AlgorithmMap.Eagle3,
draft_model_name: null,
num_draft_tokens: 3,
ngram_min_match_length: 1,
ngram_max_match_length: 10
algorithm: speculativeConfig.algorithm || AlgorithmMap.Eagle3,
draft_model: speculativeConfig.draft_model || '',
num_draft_tokens: speculativeConfig.num_draft_tokens || 3,
ngram_min_match_length: speculativeConfig.ngram_min_match_length || 1,
ngram_max_match_length: speculativeConfig.ngram_max_match_length || 10
});
}
};
@@ -100,19 +103,29 @@ const SpeculativeDecode = () => {
</Form.Item>
{algorithm === AlgorithmMap.Eagle3 && (
<Form.Item<FormData>
name={['speculative_config', 'draft_model_name']}
name={['speculative_config', 'draft_model']}
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.draftModel')
message: getRuleMessage(
['select', 'input'],
'models.form.draftModel'
)
}
]}
>
<SealSelect
<AutoComlete
required
allowClear
label={intl.formatMessage({ id: 'models.form.draftModel' })}
placeholder={intl.formatMessage({
id: 'models.form.draftModel.placeholder'
})}
description={intl.formatMessage({
id: 'models.form.draftModel.tips'
})}
options={draftModelList}
></SealSelect>
></AutoComlete>
</Form.Item>
)}
<Form.Item<FormData>
src/pages/llmodels/style/catalog-item.less
+2 -1
View File
@@ -15,6 +15,8 @@
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
img {
height: 32px;
@@ -80,7 +82,6 @@
height: 3px;
border-radius: 50%;
background-color: var(--ant-color-text-quaternary);
margin-right: 8px;
flex: none;
}