style: parameters tooltip

.gitignore

@@ -12,4 +12,5 @@
 /.mfsu
 .swc
 .DS_Store
-.idea
+.idea
+.claude

src/locales/en-US/models.ts

@@ -61,7 +61,8 @@ export default {
   'models.table.layers': 'Layers',
   'models.form.backend': 'Backend',
   'models.form.backend_parameters': 'Backend Parameters',
-  'models.form.backend_parameters.injected': 'Injected Backend Parameters',
+  'models.instance.params.configured': 'User Configured',
+  'models.instance.params.autoInjected': 'Auto-injected',
   'models.search.gguf.tips':
     'GGUF models use llama-box(supports Linux, macOS and Windows).',
   'models.search.vllm.tips':

src/locales/ja-JP/models.ts

@@ -62,7 +62,8 @@ export default {
   'models.table.layers': 'レイヤー',
   'models.form.backend': 'バックエンド',
   'models.form.backend_parameters': 'バックエンドパラメータ',
-  'models.form.backend_parameters.injected': '注入されたバックエンドパラメータ',
+  'models.instance.params.configured': 'User Configured',
+  'models.instance.params.autoInjected': '自動注入',
   'models.search.gguf.tips':
     'GGUFモデルはllama-boxを使用します（Linux、macOS、Windowsをサポート）。',
   'models.search.vllm.tips':

src/locales/ru-RU/models.ts

@@ -63,7 +63,8 @@ export default {
   'models.table.layers': 'Слои',
   'models.form.backend': 'Бэкенд',
   'models.form.backend_parameters': 'Параметры бэкенда',
-  'models.form.backend_parameters.injected': 'Внедрённые параметры бэкенда',
+  'models.instance.params.configured': 'User Configured',
+  'models.instance.params.autoInjected': 'Автовнедрённые',
   'models.search.gguf.tips':
     'GGUF-модели используют llama-box (поддерживает Linux, macOS и Windows).',
   'models.search.vllm.tips':

src/locales/tr-TR/models.ts

@@ -61,8 +61,8 @@ export default {
   'models.table.layers': 'Katmanlar',
   'models.form.backend': 'Altyapı',
   'models.form.backend_parameters': 'Altyapı Parametreleri',
-  'models.form.backend_parameters.injected':
+  'models.instance.params.configured': 'User Configured',
-    'Enjekte Edilen Altyapı Parametreleri',
+  'models.instance.params.autoInjected': 'Otomatik Enjekte',
   'models.search.gguf.tips':
     'GGUF modelleri llama-box kullanır (Linux, macOS ve Windows destekler).',
   'models.search.vllm.tips':

src/locales/zh-CN/models.ts

@@ -61,7 +61,8 @@ export default {
   'models.table.layers': '层',
   'models.form.backend': '后端',
   'models.form.backend_parameters': '后端参数',
-  'models.form.backend_parameters.injected': '注入的后端参数',
+  'models.instance.params.configured': '用户配置',
+  'models.instance.params.autoInjected': '自动注入',
   'models.search.gguf.tips':
     'GGUF 模型用 llama-box（支持 Linux, macOS 和 Windows）。',
   'models.search.vllm.tips':

src/pages/benchmark/components/summary/instance.tsx

@@ -79,13 +79,15 @@ const Instance: React.FC = () => {
     return [
       {
         key: '1',
-        label: intl.formatMessage({ id: 'models.form.backend_parameters' }),
+        label: intl.formatMessage({
+          id: 'models.instance.params.configured'
+        }),
         children: renderParams(instanceData?.backend_parameters || [])
       },
       {
         key: '1-1',
         label: intl.formatMessage({
-          id: 'models.form.backend_parameters.injected'
+          id: 'models.instance.params.autoInjected'
         }),
         children: renderParams(instanceData?.injected_backend_parameters || [])
       },
@@ -129,23 +131,6 @@ const Instance: React.FC = () => {
           </Flex>
         )
       },
-      {
-        key: '2',
-        label: intl.formatMessage({ id: 'models.form.env' }),
-        children: (
-          <Flex gap={8} wrap="wrap">
-            {instanceData?.env
-              ? Object.entries(instanceData?.env || {}).map(
-                  ([key, value], index: number) => (
-                    <Tag key={index} style={{ margin: 0 }}>
-                      {`${key}=${value}`}
-                    </Tag>
-                  )
-                )
-              : '-'}
-          </Flex>
-        )
-      },
       {
         key: '4',
         label: intl.formatMessage({
@@ -181,6 +166,23 @@ const Instance: React.FC = () => {
             )}
           </Flex>
         )
+      },
+      {
+        key: '2',
+        label: intl.formatMessage({ id: 'models.form.env' }),
+        children: (
+          <Flex gap={8} wrap="wrap">
+            {instanceData?.env
+              ? Object.entries(instanceData?.env || {}).map(
+                  ([key, value], index: number) => (
+                    <Tag key={index} style={{ margin: 0 }}>
+                      {`${key}=${value}`}
+                    </Tag>
+                  )
+                )
+              : '-'}
+          </Flex>
+        )
       }
     ];
   }, [detailData]);

src/pages/llmodels/components/instance-cells/injected-params-cell.tsx

@@ -0,0 +1,169 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { CopyButton, OverlayScroller, ThemeTag } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Divider, Flex, Tooltip } from 'antd';
+import React from 'react';
+import { ModelInstanceListItem } from '../../config/types';
+
+interface InjectedParamsCellProps {
+  record: ModelInstanceListItem;
+  backendParameters?: string[];
+}
+
+const ParamsList: React.FC<{ items: string[] }> = ({ items }) => (
+  <Flex gap={4} wrap="wrap">
+    {items.map((param, index) => (
+      <span
+        key={`${param}-${index}`}
+        style={{
+          backgroundColor: 'var(--ant-color-fill-quaternary)',
+          padding: 4,
+          borderRadius: 2,
+          fontFamily: 'monospace',
+          color: 'var(--ant-color-text-secondary)'
+        }}
+      >
+        {param}
+      </span>
+    ))}
+  </Flex>
+);
+
+interface TooltipContentProps {
+  backendParameters: string[];
+  injectedBackendParameters: string[];
+}
+
+const TooltipContent: React.FC<TooltipContentProps> = ({
+  backendParameters,
+  injectedBackendParameters
+}) => {
+  const intl = useIntl();
+  const showBackend = backendParameters.length > 0;
+  const showInjected = injectedBackendParameters.length > 0;
+
+  return (
+    <OverlayScroller maxHeight={240} style={{ minWidth: 280 }}>
+      <Flex
+        vertical
+        gap={12}
+        style={{
+          padding: 4
+        }}
+      >
+        {showBackend && (
+          <Flex vertical gap={4}>
+            <span
+              style={{
+                fontWeight: 500,
+                fontSize: 13
+              }}
+            >
+              {intl.formatMessage({ id: 'models.instance.params.configured' })}
+            </span>
+            <ParamsList items={backendParameters} />
+          </Flex>
+        )}
+        {showInjected && (
+          <Flex vertical gap={4}>
+            <span
+              style={{
+                fontWeight: 500,
+                fontSize: 13
+              }}
+            >
+              {intl.formatMessage({
+                id: 'models.instance.params.autoInjected'
+              })}
+            </span>
+            <ParamsList items={injectedBackendParameters} />
+          </Flex>
+        )}
+      </Flex>
+    </OverlayScroller>
+  );
+};
+
+const InjectedParamsCell: React.FC<InjectedParamsCellProps> = ({
+  record,
+  backendParameters
+}) => {
+  const intl = useIntl();
+  const injectedBackendParameters = record?.injected_backend_parameters || [];
+  console.log('InjectedParamsCell record:', record);
+
+  if (!injectedBackendParameters.length) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      color="var(--ant-color-bg-elevated)"
+      styles={{
+        container: {
+          color: 'var(--ant-color-text)',
+          boxShadow: 'var(--ant-box-shadow-secondary)',
+          paddingInline: 0
+        }
+      }}
+      title={
+        <div>
+          <Flex
+            align="center"
+            justify="space-between"
+            style={{ paddingInline: 4 }}
+          >
+            <div
+              style={{
+                padding: '8px 8px',
+                fontWeight: 500,
+                fontSize: 14
+              }}
+            >
+              {intl.formatMessage({
+                id: 'models.form.backend_parameters'
+              })}
+            </div>
+            <CopyButton
+              type="link"
+              text={[
+                ...(backendParameters || []),
+                ...injectedBackendParameters
+              ].join('\n')}
+              style={{ marginLeft: 'auto' }}
+            />
+          </Flex>
+          <Divider style={{ margin: '0 0 8px 0' }} />
+          <TooltipContent
+            backendParameters={backendParameters || []}
+            injectedBackendParameters={injectedBackendParameters}
+          />
+        </div>
+      }
+    >
+      <span>
+        <ThemeTag
+          opacity={0.75}
+          color="cyan"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            maxWidth: '100%',
+            minWidth: 50,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            borderRadius: 12
+          }}
+        >
+          <InfoCircleOutlined className="m-r-5" />
+          {intl.formatMessage({
+            id: 'models.form.backend_parameters'
+          })}
+        </ThemeTag>
+      </span>
+    </Tooltip>
+  );
+};
+
+export default InjectedParamsCell;

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

@@ -9,6 +9,7 @@ import ActionsCell from '../instance-cells/actions-cell';
 import CPUOffloadingCell from '../instance-cells/cpu-offloading-cell';
 import DistributeInfoCell from '../instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
+import InjectedParamsCell from '../instance-cells/injected-params-cell';
 import InstanceStatusCell from '../instance-cells/instance-status-cell';
 import NameCell from '../instance-cells/name-cell';
 interface InstanceItemProps {
@@ -55,6 +56,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
               className="flex align-center"
             >
               <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
+              <InjectedParamsCell
+                record={instanceData}
+                backendParameters={modelData?.backend_parameters}
+              ></InjectedParamsCell>
               <DistributeInfoCell
                 record={instanceData}
                 workerList={workerList}

src/pages/llmodels/config/types.ts

@@ -125,6 +125,7 @@ export interface ModelInstanceListItem {
   ollama_library_model_name: string;
   distributed_servers?: DistributedServers;
   computed_resource_claim?: ComputedResourceClaim;
+  injected_backend_parameters?: string[];
   s3_address: string;
   worker_id: number;
   gpu_indexes?: number[];

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -5,6 +5,7 @@ import { convertFileSize } from '@/utils';
 import { ThunderboltFilled } from '@ant-design/icons';
 import { AutoTooltip, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
+import { Flex } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -12,6 +13,7 @@ import { useMemo } from 'react';
 import ActionsCell from '../components/instance-cells/actions-cell';
 import DistributeInfoCell from '../components/instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../components/instance-cells/downloading-status-cell';
+import InjectedParamsCell from '../components/instance-cells/injected-params-cell';
 import InstanceStatusCell from '../components/instance-cells/instance-status-cell';
 import NameCell, {
   NameCellProps
@@ -103,19 +105,22 @@ const useInstancesColumns = (options: {
         minWidth: 160,
         render: (value: string, record: ListItem) => (
           <>
-            <NameCell
+            <Flex gap={8} wrap="wrap">
-              showWorkerInfo={false}
+              <NameCell
-              record={record}
+                showWorkerInfo={false}
-              modelData={{
+                record={record}
-                backend: record.backend,
+                modelData={{
-                backend_version: record.backend_version
+                  backend: record.backend,
-              }}
+                  backend_version: record.backend_version
-              styles={{
+                }}
-                label: {
+                styles={{
-                  color: 'var(--ant-color-text)'
+                  label: {
-                }
+                    color: 'var(--ant-color-text)'
-              }}
+                  }
-            ></NameCell>
+                }}
+              ></NameCell>
+              <InjectedParamsCell record={record}></InjectedParamsCell>
+            </Flex>
             <div className="flex-center">
               <ThunderboltFilled
                 className="m-r-5 text-quaternary"