diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index 83b64853..33809b0b 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -6,6 +6,10 @@ margin-bottom: 8px; } +.m-b-6 { + margin-bottom: 6px; +} + .m-b-5 { margin-bottom: 5px; } diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index 6bed53db..fbbce0ef 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons'; // import './iconfont/iconfont.js'; const IconFont = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_4613488_y6wf3nguxjl.js' + scriptUrl: '//at.alicdn.com/t/c/font_4613488_d7ffxju7lc6.js' }); export default IconFont; diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 9e69a4ba..d6c1e971 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -915,48 +915,42 @@ const CanvasImageEditor: React.FC = forwardRef(
- {maskUpload?.length ? ( - - - {intl.formatMessage({ id: 'playground.image.mask.uploaded' })} - - - ) : ( + {imageStatus.isOriginal && ( <> - {imageStatus.isOriginal && ( - <> - + {intl.formatMessage({ id: 'playground.image.negativeMask.tips' })} - > - - - {intl.formatMessage({ - id: 'playground.image.negativeMask' - })} - - - - + } + > + + + {intl.formatMessage({ + id: 'playground.image.negativeMask' })} - > - - - - )} + + + + + + )} {!imageStatus.isOriginal && ( diff --git a/src/components/simple-table/index.tsx b/src/components/simple-table/index.tsx index 867279a7..162afebf 100644 --- a/src/components/simple-table/index.tsx +++ b/src/components/simple-table/index.tsx @@ -1,6 +1,6 @@ +import useOverlayScroller from '@/hooks/use-overlay-scroller'; import classNames from 'classnames'; import React from 'react'; -import SimpleBar from 'simplebar-react'; import 'simplebar-react/dist/simplebar.min.css'; import TableHeader from './header'; import './index.less'; @@ -21,8 +21,14 @@ interface SimpleTableProps { } const SimpleTabel: React.FC = (props) => { const { columns, dataSource, rowKey, bordered = true } = props; + const scroller = React.useRef(null); + const { initialize } = useOverlayScroller(); + + React.useEffect(() => { + initialize(scroller.current); + }, [initialize]); return ( - +
= (props) => { })}
- +
); }; diff --git a/src/components/simple-table/info-column.tsx b/src/components/simple-table/info-column.tsx index 3ca782d6..bcd1ac20 100644 --- a/src/components/simple-table/info-column.tsx +++ b/src/components/simple-table/info-column.tsx @@ -1,26 +1,39 @@ import React from 'react'; -import { convertFileSize } from '@/utils'; import { useIntl } from '@umijs/max'; import { Divider } from 'antd'; interface InfoColumnProps { - fieldList: { label: string; key: string }[]; + fieldList: { + label: string; + key: string; + locale?: boolean; + render?: (val: any, data: any) => any; + }[]; + style?: React.CSSProperties; data: Record; } const InfoColumn: React.FC = (props) => { - const { data, fieldList } = props; + const { data, fieldList, style } = props; const intl = useIntl(); return ( - + {fieldList.map((item, index) => { return ( <> - {intl.formatMessage({ id: item.label })} - {convertFileSize(data[item.key], 0)} + + {' '} + {item.locale + ? intl.formatMessage({ id: item.label }) + : item.label} + + + {' '} + {item.render?.(data[item.key], data) ?? data[item.key]} + {index < fieldList.length - 1 ? ( { ); }; +const InfoItem = (props: { label: string; value: any; width?: number }) => { + const { label, value, width } = props; + const Wrapper = styled.div` + .info-item { + width: ${width ? `${width}px` : '100%'}; + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 4px 8px; + background-color: var(--color-gray-fill-3); + border-radius: 4px; + .value { + display: flex; + align-items: center; + gap: 4px; + flex-wrap: wrap; + color: var(--color-white-quaternary); + .index { + color: var(--ant-color-text-light-solid); + } + } + } + `; + return ( + +
+ {label} + {value} +
+ + ); +}; + const InstanceItem: React.FC = ({ instanceData, workerList, @@ -160,6 +205,23 @@ const InstanceItem: React.FC = ({ [] ); + const displayGPUs = (vrams: Record) => { + return ( + + {Object.keys(vrams) + ?.sort?.() + .map((index) => { + return ( + + [{index}] {''} + {convertFileSize(vrams?.[index], 0)} + + ); + })} + + ); + }; + const renderWorkerInfo = useMemo(() => { let workerIp = '-'; if (instanceData.worker_ip) { @@ -167,23 +229,50 @@ const InstanceItem: React.FC = ({ ? `${instanceData.worker_ip}:${instanceData.port}` : instanceData.worker_ip; } + let backend = modelData?.backend || ''; + if (modelData.backend_version) { + backend += ` (${modelData.backend_version})`; + } + const vrams = instanceData.computed_resource_claim?.vram || {}; return (
-
{instanceData.worker_name}
-
+
- {workerIp} + {instanceData.worker_name}
-
- - {intl.formatMessage({ id: 'models.table.gpuindex' })}: [ - {_.join(instanceData.gpu_indexes?.sort?.(), ',')}] +
+ +
-
- - {intl.formatMessage({ id: 'models.form.backend' })}:{' '} - {modelData?.backend || ''} - {modelData.backend_version ? `(${modelData.backend_version})` : ''} +
+ { + return ( + + + [{index}] {''} + + {convertFileSize(vrams?.[index], 0)} + + ); + })} + > +
); @@ -197,24 +286,23 @@ const InstanceItem: React.FC = ({ worker_name: data?.name, worker_ip: data?.ip, port: '', - gpu_index: item.gpu_index + ram: convertFileSize(item.computed_resource_claim?.ram, 0), + gpu_index: displayGPUs(item.computed_resource_claim?.vram || {}) }; }); const mainWorker = [ { - worker_name: `${instanceData.worker_name}`, + worker_name: `${instanceData.worker_name} (main)`, worker_ip: `${instanceData.worker_ip}`, port: '', - gpu_index: `${instanceData.gpu_indexes?.sort?.()} (main)` + ram: convertFileSize(instanceData.computed_resource_claim?.ram, 0), + gpu_index: displayGPUs(instanceData.computed_resource_claim?.vram || {}) } ]; return (
-

- {intl.formatMessage({ id: 'models.table.backend' })} -

= ({ {instanceData.name} - + @@ -327,7 +421,9 @@ const InstanceItem: React.FC = ({ {instanceData?.distributed_servers?.rpc_servers?.length && ( diff --git a/src/pages/llmodels/config/types.ts b/src/pages/llmodels/config/types.ts index 62cdfde5..77e4e19d 100644 --- a/src/pages/llmodels/config/types.ts +++ b/src/pages/llmodels/config/types.ts @@ -60,6 +60,12 @@ export interface FormData { description: string; } +interface ComputedResourceClaim { + offload_layers: number; + total_layers: number; + ram: number; + vram: Record; +} export interface ModelInstanceListItem { backend?: string; backend_version?: string; @@ -68,12 +74,14 @@ export interface ModelInstanceListItem { huggingface_filename: string; ollama_library_model_name: string; distributed_servers?: { - rpc_servers: any[]; - }; - computed_resource_claim?: { - offload_layers: number; - total_layers: number; + rpc_servers: { + pid: number; + port: number; + worker_id: string; + computed_resource_claim: ComputedResourceClaim; + }[]; }; + computed_resource_claim?: ComputedResourceClaim; s3_address: string; worker_id: number; gpu_indexes?: number[]; diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index e3461151..ea92f85d 100644 --- a/src/pages/playground/config/params-config.ts +++ b/src/pages/playground/config/params-config.ts @@ -239,23 +239,23 @@ export const ImageEidtParamsConfig: ParamsSchema[] = [ ]; export const ImageconstExtraConfig: ParamsSchema[] = [ - { - type: 'Select', - name: 'quality', - options: [ - { label: 'playground.params.standard', value: 'standard', locale: true }, - { label: 'playground.params.hd', value: 'hd', locale: true } - ], - label: { - text: 'playground.params.quality', - isLocalized: true - }, - rules: [ - { - required: false - } - ] - }, + // { + // type: 'Select', + // name: 'quality', + // options: [ + // { label: 'playground.params.standard', value: 'standard', locale: true }, + // { label: 'playground.params.hd', value: 'hd', locale: true } + // ], + // label: { + // text: 'playground.params.quality', + // isLocalized: true + // }, + // rules: [ + // { + // required: false + // } + // ] + // }, { type: 'Select', name: 'style', diff --git a/src/pages/playground/hooks/config.ts b/src/pages/playground/hooks/config.ts index c43f4502..77b22e2e 100644 --- a/src/pages/playground/hooks/config.ts +++ b/src/pages/playground/hooks/config.ts @@ -24,7 +24,8 @@ export const IMG_METAKEYS = [ 'cfg_scale', 'guidance', 'negative_prompt', - 'seed' + 'seed', + 'strength' ]; export const llmInitialValues = { @@ -44,12 +45,13 @@ export const advancedFieldsDefaultValus = { guidance: 3.5, sampling_steps: 10, negative_prompt: null, + strength: null, schedule_method: 'discrete', preview: 'preview_faster' }; export const openaiCompatibleFieldsDefaultValus = { - quality: 'standard', + // quality: 'standard', style: null }; diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index e05417fb..0e477873 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -8,7 +8,7 @@ import StatusTag from '@/components/status-tag'; import Hotkeys from '@/config/hotkeys'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; -import { handleBatchRequest } from '@/utils'; +import { convertFileSize, handleBatchRequest } from '@/utils'; import { DeleteOutlined, EditOutlined, @@ -41,15 +41,27 @@ const { Column } = Table; const fieldList = [ { label: 'resources.table.total', - key: 'total' + key: 'total', + locale: true, + render: (val: any) => { + return convertFileSize(val, 0); + } }, { label: 'resources.table.used', - key: 'used' + key: 'used', + locale: true, + render: (val: any) => { + return convertFileSize(val, 0); + } }, { label: 'resources.table.allocated', - key: 'allocated' + key: 'allocated', + locale: true, + render: (val: any) => { + return convertFileSize(val, 0); + } } ];