chore: display allocated vram on instance

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

@@ -136,8 +136,8 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
               }}
             >
               {data.activated_size
-                ? `${data.size}${data.size_unit}-A${data.activated_size}${data.size_unit}`
-                : `${data.size}${data.size_unit}`}
+                ? `${data.size}${data.size_unit || 'B'}-A${data.activated_size}${data.size_unit || 'B'}`
+                : `${data.size}${data.size_unit || 'B'}`}
             </AutoTooltip>
           )}
         </div>

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

@@ -16,6 +16,7 @@ import {
   DownloadOutlined,
   HddFilled,
   InfoCircleOutlined,
+  PieChartFilled,
   ThunderboltFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -491,6 +492,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             ? `(${instanceData.backend_version || modelData?.backend_version})`
             : ''}
         </div>
+        <div className="flex-center">
+          <PieChartFilled className="m-r-5" />
+          {intl.formatMessage({ id: 'models.table.vram.allocated' })}:{' '}
+          {convertFileSize(
+            instanceData.computed_resource_claim?.vram
+              ? calcTotalVram(instanceData.computed_resource_claim?.vram)
+              : 0,
+            1
+          )}
+        </div>
       </div>
     );
   }, [