chore: display vllm distributed info

src/components/seal-table/styles/row-children.less

@@ -2,7 +2,8 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 54px;
+  min-height: 54px;
+  padding-block: 5px;
   border-radius: var(--border-radius-mdium);
   transition: all 0.2s ease;
 

src/locales/en-US/models.ts

@@ -106,5 +106,7 @@ export default {
     'Multiple replicas enable load balancing for { api } inference requests.',
   'models.table.list.empty': 'No Models yet!',
   'models.table.list.getStart':
-    '<span style="margin-right: 5px;font-size: 13px;">Get started with</span> <span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span>'
+    '<span style="margin-right: 5px;font-size: 13px;">Get started with</span> <span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span>',
+  'models.table.llamaAcrossworker': 'Llama-box Across Workers',
+  'models.table.vllmAcrossworker': 'vLLM Across Workers'
 };

src/locales/ru-RU/models.ts

@@ -85,8 +85,7 @@ export default {
   'models.form.gpuselector': 'Селектор GPU',
   'models.form.backend.llamabox':
     'Для моделей формата GGUF. Поддержка Linux, macOS и Windows.',
-  'models.form.backend.vllm':
-    'Для моделей не-GGUF формата. Только x86 Linux.',
+  'models.form.backend.vllm': 'Для моделей не-GGUF формата. Только x86 Linux.',
   'models.form.backend.voxbox': 'Для аудиомоделей не-GGUF формата.',
   'models.form.search.gguftips':
     'Для воркеров на macOS/Windows отметьте GGUF (для аудиомоделей снимите).',
@@ -106,5 +105,9 @@ export default {
     'Несколько реплик обеспечивают балансировку нагрузки для { api } запросов.',
   'models.table.list.empty': 'Модели отсутствуют!',
   'models.table.list.getStart':
-    '<span style="margin-right: 5px;font-size: 13px;">Начните работу с</span> <span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span>'
+    '<span style="margin-right: 5px;font-size: 13px;">Начните работу с</span> <span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span>',
+  'models.table.llamaAcrossworker':
+    'TODO: Translate key "models.table.llamaAcrossworker"',
+  'models.table.vllmAcrossworker':
+    'TODO: Translate key "models.table.vllmAcrossworker"'
 };

src/locales/zh-CN/models.ts

@@ -102,5 +102,7 @@ export default {
   'models.form.replicas.tips': '多副本数实现 { api } 接口推理请求的负载均衡',
   'models.table.list.empty': '暂无已部署模型',
   'models.table.list.getStart':
-    '<span style="margin-right: 5px;font-size: 13px;">一键部署</span><span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span><span style="margin-left: 5px;font-size: 13px;">立即使用！</span>'
+    '<span style="margin-right: 5px;font-size: 13px;">一键部署</span><span style="font-size: 14px;font-weight: 700">DeepSeek-R1-Distill-Qwen-1.5B</span><span style="margin-left: 5px;font-size: 13px;">立即使用！</span>',
+  'models.table.llamaAcrossworker': 'Llama-box 跨节点',
+  'models.table.vllmAcrossworker': 'vLLM 跨节点'
 };

src/pages/llmodels/components/instance-item.tsx

@@ -88,11 +88,6 @@ const distributeCols = [
       return row.port ? `${row.worker_ip}:${row.port}` : row.worker_ip;
     }
   },
-  {
-    title: 'models.form.backend',
-    locale: true,
-    key: 'backend'
-  },
   {
     title: 'models.table.gpuindex',
     locale: true,
@@ -278,38 +273,143 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     );
   }, [modelData, instanceData, intl]);
 
-  const renderDistributionInfo = useMemo(() => {
-    const rpcServerList = instanceData.distributed_servers?.rpc_servers || [];
-    const list = _.map(rpcServerList, (item: any) => {
-      const data = _.find(workerList, { id: item.worker_id });
-      return {
-        worker_name: data?.name,
-        worker_ip: data?.ip,
-        port: '',
-        ram: convertFileSize(item.computed_resource_claim?.ram, 0),
-        gpu_index: displayGPUs(item.computed_resource_claim?.vram || {})
-      };
-    });
+  const renderDistributedServer = useCallback(
+    (severList: any[]) => {
+      const list = _.map(severList, (item: any) => {
+        const data = _.find(workerList, { id: item.worker_id });
+        return {
+          worker_name: data?.name,
+          worker_ip: data?.ip,
+          port: '',
+          ram: convertFileSize(item.computed_resource_claim?.ram, 0),
+          gpu_index: displayGPUs(item.computed_resource_claim?.vram || {})
+        };
+      });
 
-    const mainWorker = [
-      {
-        worker_name: `${instanceData.worker_name} (main)`,
-        worker_ip: `${instanceData.worker_ip}`,
-        port: '',
-        ram: convertFileSize(instanceData.computed_resource_claim?.ram, 0),
-        gpu_index: displayGPUs(instanceData.computed_resource_claim?.vram || {})
+      const mainWorker = [
+        {
+          worker_name: `${instanceData.worker_name} (main)`,
+          worker_ip: `${instanceData.worker_ip}`,
+          port: '',
+          ram: convertFileSize(instanceData.computed_resource_claim?.ram, 0),
+          gpu_index: displayGPUs(
+            instanceData.computed_resource_claim?.vram || {}
+          )
+        }
+      ];
+
+      return (
+        <div>
+          <SimpleTabel
+            columns={distributeCols}
+            dataSource={[...mainWorker, ...list]}
+          ></SimpleTabel>
+        </div>
+      );
+    },
+    [workerList, instanceData, intl]
+  );
+
+  const renderDistributionInfo = useCallback(
+    (severList: any[], label: string) => {
+      if (!severList.length) {
+        return null;
       }
-    ];
+      return (
+        <Tooltip
+          overlayInnerStyle={{
+            width: 'max-content',
+            maxWidth: '500px',
+            minWidth: '400px'
+          }}
+          title={renderDistributedServer(severList)}
+        >
+          <Tag
+            color="processing"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              maxWidth: '100%',
+              minWidth: 50,
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              opacity: 0.75,
+              borderRadius: 12
+            }}
+          >
+            <InfoCircleOutlined className="m-r-5" />
+            {intl.formatMessage({
+              id: label
+            })}
+          </Tag>
+        </Tooltip>
+      );
+    },
+    [renderDistributedServer]
+  );
 
+  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 || !offload_layers || !total_layers) {
+      return null;
+    }
     return (
-      <div>
-        <SimpleTabel
-          columns={distributeCols}
-          dataSource={[...mainWorker, ...list]}
-        ></SimpleTabel>
-      </div>
+      <Tooltip
+        title={
+          <span className="flex flex-center">
+            <span>
+              CPU:{' '}
+              {_.subtract(
+                instanceData.computed_resource_claim?.total_layers,
+                instanceData.computed_resource_claim?.offload_layers
+              ) || 0}{' '}
+              {intl.formatMessage({
+                id: 'models.table.layers'
+              })}
+            </span>
+            <Divider
+              type="vertical"
+              style={{
+                borderColor: '#fff',
+                opacity: 0.5
+              }}
+            ></Divider>
+            <span>
+              GPU: {instanceData.computed_resource_claim?.offload_layers}{' '}
+              {intl.formatMessage({
+                id: 'models.table.layers'
+              })}
+            </span>
+          </span>
+        }
+      >
+        <Tag
+          color="cyan"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            maxWidth: '100%',
+            minWidth: 50,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            opacity: 0.75,
+            borderRadius: 12
+          }}
+        >
+          <InfoCircleOutlined className="m-r-5" />
+          {intl.formatMessage({
+            id: 'models.table.cpuoffload'
+          })}
+        </Tag>
+      </Tooltip>
     );
-  }, [workerList, instanceData, intl]);
+  }, [
+    instanceData.computed_resource_claim?.total_layers,
+    instanceData.computed_resource_claim?.offload_layers
+  ]);
 
   const handleOnSelect = useCallback(
     (val: string) => {
@@ -366,88 +466,14 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 }}
                 className="flex align-center"
               >
-                {instanceData.computed_resource_claim?.total_layers !==
-                  instanceData.computed_resource_claim?.offload_layers && (
-                  <Tooltip
-                    title={
-                      <span className="flex flex-center">
-                        <span>
-                          CPU:{' '}
-                          {_.subtract(
-                            instanceData.computed_resource_claim?.total_layers,
-                            instanceData.computed_resource_claim?.offload_layers
-                          ) || 0}{' '}
-                          {intl.formatMessage({
-                            id: 'models.table.layers'
-                          })}
-                        </span>
-                        <Divider
-                          type="vertical"
-                          style={{
-                            borderColor: '#fff',
-                            opacity: 0.5
-                          }}
-                        ></Divider>
-                        <span>
-                          GPU:{' '}
-                          {instanceData.computed_resource_claim?.offload_layers}{' '}
-                          {intl.formatMessage({
-                            id: 'models.table.layers'
-                          })}
-                        </span>
-                      </span>
-                    }
-                  >
-                    <Tag
-                      color="cyan"
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        maxWidth: '100%',
-                        minWidth: 50,
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        opacity: 0.75,
-                        borderRadius: 12
-                      }}
-                    >
-                      <InfoCircleOutlined className="m-r-5" />
-                      {intl.formatMessage({
-                        id: 'models.table.cpuoffload'
-                      })}
-                    </Tag>
-                  </Tooltip>
+                {renderOffloadInfo}
+                {renderDistributionInfo(
+                  instanceData.distributed_servers?.rpc_servers || [],
+                  'models.table.llamaAcrossworker'
                 )}
-                {instanceData?.distributed_servers?.rpc_servers?.length && (
-                  <Tooltip
-                    overlayInnerStyle={{
-                      width: 'max-content',
-                      maxWidth: '500px',
-                      minWidth: '400px'
-                    }}
-                    title={renderDistributionInfo}
-                  >
-                    <Tag
-                      color="processing"
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        maxWidth: '100%',
-                        minWidth: 50,
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        opacity: 0.75,
-                        borderRadius: 12
-                      }}
-                    >
-                      <InfoCircleOutlined className="m-r-5" />
-                      {intl.formatMessage({
-                        id: 'models.table.acrossworker'
-                      })}
-                    </Tag>
-                  </Tooltip>
+                {renderDistributionInfo(
+                  instanceData.distributed_servers?.ray_actors || [],
+                  'models.table.vllmAcrossworker'
                 )}
               </span>
             </Col>

src/pages/llmodels/config/types.ts

@@ -66,6 +66,13 @@ interface ComputedResourceClaim {
   ram: number;
   vram: Record<string, number>;
 }
+
+interface DistributedServerItem {
+  pid: number;
+  port: number;
+  worker_id: string;
+  computed_resource_claim: ComputedResourceClaim;
+}
 export interface ModelInstanceListItem {
   backend?: string;
   backend_version?: string;
@@ -74,12 +81,8 @@ export interface ModelInstanceListItem {
   huggingface_filename: string;
   ollama_library_model_name: string;
   distributed_servers?: {
-    rpc_servers: {
-      pid: number;
-      port: number;
-      worker_id: string;
-      computed_resource_claim: ComputedResourceClaim;
-    }[];
+    rpc_servers: DistributedServerItem[];
+    ray_actors: DistributedServerItem[];
   };
   computed_resource_claim?: ComputedResourceClaim;
   s3_address: string;