From 93bda622d5bb0826b416c2273bd4fd5436127e20 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 10 Sep 2024 10:42:08 +0800
Subject: [PATCH] style: gpu selector info

---
 src/locales/zh-CN/models.ts                   |  4 +-
 .../llmodels/components/advance-config.tsx    | 58 +++++++++----------
 src/pages/llmodels/components/gpu-card.tsx    | 18 +++---
 .../llmodels/components/hf-model-file.tsx     | 16 +++--
 4 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 61e9f57f..ee54f8bb 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -12,9 +12,9 @@ export default {
   'models.form.configurations': '配置',
   'models.form.s3address': 'S3 地址',
   'models.form.partialoffload.tips':
-    '部分卸载指的是根据可用资源将尽可能多的模型层卸载到GPU的策略，但完全卸载所有层是不可能的。',
+    '半卸载是指根据可用资源将模型的尽可能多的层卸载到 GPU 上的一种策略，当无法完全卸载所有层时，采用这种方式。',
   'models.form.distribution.tips':
-    '当单个 GPU 或 worker 的资源不足时，允许将部分计算卸载给单个或多个远程 worker。',
+    '允许在单个 GPU 或 worker 资源不足时，将部分计算卸载到一个或多个远程 woker。',
   'models.openinplayground': '在 Playground 中打开',
   'models.instances': '实例',
   'models.table.replicas.edit': '调整副本数',
diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx
index a1f6bc3d..83d7152d 100644
--- a/src/pages/llmodels/components/advance-config.tsx
+++ b/src/pages/llmodels/components/advance-config.tsx
@@ -119,33 +119,33 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           ></SealSelect>
         </Form.Item>
         {scheduleType === 'auto' && (
-          <Form.Item<FormData> name="placement_strategy">
-            <SealSelect
-              label={intl.formatMessage({
-                id: 'resources.form.placementStrategy'
-              })}
-              options={placementStrategyOptions}
-              description={renderSelectTips(placementStrategyTips)}
-            ></SealSelect>
-          </Form.Item>
-        )}
-        {scheduleType === 'auto' && (
-          <Form.Item<FormData> name="worker_selector">
-            <LabelSelector
-              label={intl.formatMessage({
-                id: 'resources.form.workerSelector'
-              })}
-              labels={wokerSelector}
-              onChange={handleWorkerLabelsChange}
-              description={
-                <span>
-                  {intl.formatMessage({
-                    id: 'resources.form.workerSelector.description'
-                  })}
-                </span>
-              }
-            ></LabelSelector>
-          </Form.Item>
+          <>
+            <Form.Item<FormData> name="placement_strategy">
+              <SealSelect
+                label={intl.formatMessage({
+                  id: 'resources.form.placementStrategy'
+                })}
+                options={placementStrategyOptions}
+                description={renderSelectTips(placementStrategyTips)}
+              ></SealSelect>
+            </Form.Item>
+            <Form.Item<FormData> name="worker_selector">
+              <LabelSelector
+                label={intl.formatMessage({
+                  id: 'resources.form.workerSelector'
+                })}
+                labels={wokerSelector}
+                onChange={handleWorkerLabelsChange}
+                description={
+                  <span>
+                    {intl.formatMessage({
+                      id: 'resources.form.workerSelector.description'
+                    })}
+                  </span>
+                }
+              ></LabelSelector>
+            </Form.Item>
+          </>
         )}
         {scheduleType === 'manual' && (
           <Form.Item<FormData>
@@ -173,7 +173,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             </SealSelect>
           </Form.Item>
         )}
-        <div style={{ marginBottom: 22, paddingLeft: 10 }}>
+        <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
           <Form.Item<FormData>
             name="partial_offload"
             valuePropName="checked"
@@ -200,7 +200,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           </Form.Item>
         </div>
         {scheduleType === 'auto' && (
-          <div style={{ marginBottom: 22, paddingLeft: 10 }}>
+          <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
             <Form.Item<FormData>
               name="distributed_inference_across_workers"
               valuePropName="checked"
diff --git a/src/pages/llmodels/components/gpu-card.tsx b/src/pages/llmodels/components/gpu-card.tsx
index a6cbcc4a..e19c12a2 100644
--- a/src/pages/llmodels/components/gpu-card.tsx
+++ b/src/pages/llmodels/components/gpu-card.tsx
@@ -15,17 +15,19 @@ const GPUCard: React.FC<{
         {intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
       </div>
       <div className="info">
-        <span>{intl.formatMessage({ id: 'resources.table.vram' })}:</span>
         <span>
-          {intl.formatMessage({ id: 'resources.table.total' })}{' '}
-          {convertFileSize(data?.memory?.total || 0)}
+          {intl.formatMessage({ id: 'resources.table.vram' })}(
+          {intl.formatMessage({ id: 'resources.table.used' })}/
+          {intl.formatMessage({ id: 'resources.table.total' })}):{' '}
+          <span>
+            {convertFileSize(data?.memory?.used || 0)} /{' '}
+            {convertFileSize(data?.memory?.total || 0)}
+          </span>
         </span>
         <span>
-          {intl.formatMessage({ id: 'resources.table.used' })}{' '}
-          {convertFileSize(data?.memory?.used || 0)}
-        </span>
-        <span>
-          {intl.formatMessage({ id: 'resources.table.utilization' })}{' '}
+          <span>
+            {intl.formatMessage({ id: 'resources.table.gpuutilization' })}:{' '}
+          </span>
           {_.round(data?.memory?.utilization_rate || 0, 2)}%
         </span>
       </div>
diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx
index 2b06910c..ae86bf87 100644
--- a/src/pages/llmodels/components/hf-model-file.tsx
+++ b/src/pages/llmodels/components/hf-model-file.tsx
@@ -64,11 +64,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
   };
 
   const generateGroupByFilename = useCallback((list: any[]) => {
-    const data = _.find(list, (item: any) => {
-      const parsed = parseFilename(item.path);
-      return !!parsed;
-    });
-
+    // general file
     const generalFileList = _.filter(list, (item: any) => {
       const parsed = parseFilename(item.path);
       return !parsed;
@@ -139,12 +135,10 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
       });
 
       const newList = generateGroupByFilename(list);
-
-      console.log('newList==========', newList);
-
       const sortList = _.sortBy(newList, (item: any) => {
         return sortType === 'size' ? item.size : item.path;
       });
+
       handleSelectModelFile(sortList[0]);
       setDataSource({ fileList: sortList, loading: false });
     } catch (error) {
@@ -162,7 +156,11 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
   };
 
   const getModelQuantizationType = useCallback((item: any) => {
-    const quanType = getFileType(item.path);
+    let path = item.path;
+    if (item?.parts?.length) {
+      path = `${item.path}.gguf`;
+    }
+    const quanType = getFileType(path);
     if (quanType) {
       return (
         <Tag