From 332302044e0636a52648dd1974df46700c878d08 Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Tue, 19 Nov 2024 15:07:37 +0800
Subject: [PATCH] refactor: size unit convert functions

---
 react/src/components/AgentDetailModal.tsx     |  30 ++-
 react/src/components/AgentList.tsx            |  32 ++-
 .../src/components/AvailableResourcesCard.tsx |  10 +-
 .../src/components/DynamicUnitInputNumber.tsx |  11 +-
 .../DynamicUnitInputNumberWithSlider.tsx      |  11 +-
 .../KeypairResourcePolicySettingModal.tsx     |  10 +-
 .../ResourceAllocationFormItems.tsx           |  23 +-
 react/src/components/ResourceNumber.tsx       |   9 +-
 react/src/components/ResourcePresetList.tsx   |   8 +-
 .../components/ResourcePresetSettingModal.tsx |  26 ++-
 .../components/ServiceLauncherPageContent.tsx |   6 +-
 react/src/helper/index.test.tsx               | 212 ++++++++++++++++--
 react/src/helper/index.tsx                    |  84 ++++---
 .../hooks/useResourceLimitAndRemaining.tsx    |  12 +-
 react/src/pages/SessionLauncherPage.tsx       |   7 +-
 15 files changed, 371 insertions(+), 120 deletions(-)

diff --git a/react/src/components/AgentDetailModal.tsx b/react/src/components/AgentDetailModal.tsx
index c0f80a9cfb..ce6b89c311 100644
--- a/react/src/components/AgentDetailModal.tsx
+++ b/react/src/components/AgentDetailModal.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize } from '../helper';
+import { convertBinarySizeUnit } from '../helper';
 import { useResourceSlotsDetails } from '../hooks/backendai';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import BAIProgressWithLabel from './BAIProgressWithLabel';
@@ -93,16 +93,18 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                 </Typography.Title>
                 <BAIProgressWithLabel
                   percent={
-                    ((iSizeToSize(_.toString(agent?.mem_cur_bytes), 'g')
-                      ?.number ?? 0) /
-                      (iSizeToSize(parsedAvailableSlots?.mem, 'g')?.number ??
-                        0)) *
+                    ((convertBinarySizeUnit(
+                      _.toString(agent?.mem_cur_bytes),
+                      'g',
+                    )?.number ?? 0) /
+                      (convertBinarySizeUnit(parsedAvailableSlots?.mem, 'g')
+                        ?.number ?? 0)) *
                       100 ?? 0
                   }
                   valueLabel={`${
-                    iSizeToSize(_.toString(agent?.mem_cur_bytes), 'g')
+                    convertBinarySizeUnit(_.toString(agent?.mem_cur_bytes), 'g')
                       ?.numberUnit
-                  }iB / ${iSizeToSize(parsedAvailableSlots?.mem, 'g')?.numberUnit}iB`}
+                  }iB / ${convertBinarySizeUnit(parsedAvailableSlots?.mem, 'g')?.numberUnit}iB`}
                 />
               </Flex>
             ) : null}
@@ -115,8 +117,11 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                   <Typography.Text>TX:</Typography.Text>
                   <Typography.Text>
                     {
-                      iSizeToSize(parsedLiveStat?.node?.net_tx?.current, 'm', 1)
-                        ?.numberUnit
+                      convertBinarySizeUnit(
+                        parsedLiveStat?.node?.net_tx?.current,
+                        'm',
+                        1,
+                      )?.numberUnit
                     }
                     iB
                   </Typography.Text>
@@ -125,8 +130,11 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                   <Typography.Text>RX:</Typography.Text>
                   <Typography.Text>
                     {
-                      iSizeToSize(parsedLiveStat?.node?.net_rx?.current, 'm', 1)
-                        ?.numberUnit
+                      convertBinarySizeUnit(
+                        parsedLiveStat?.node?.net_rx?.current,
+                        'm',
+                        1,
+                      )?.numberUnit
                     }
                     iB
                   </Typography.Text>
diff --git a/react/src/components/AgentList.tsx b/react/src/components/AgentList.tsx
index a87665057a..4049b5126c 100644
--- a/react/src/components/AgentList.tsx
+++ b/react/src/components/AgentList.tsx
@@ -1,6 +1,6 @@
 import {
   bytesToGB,
-  iSizeToSize,
+  convertBinarySizeUnit,
   toFixedFloorWithoutTrailingZeros,
   transformSorterToOrderString,
 } from '../helper';
@@ -340,11 +340,17 @@ const AgentList: React.FC<AgentListProps> = ({
                       <Flex gap="xxs">
                         <ResourceTypeIcon type={'mem'} />
                         <Typography.Text>
-                          {iSizeToSize(parsedOccupiedSlots.mem, 'g', 0)
-                            ?.numberFixed ?? 0}
+                          {convertBinarySizeUnit(
+                            parsedOccupiedSlots.mem,
+                            'g',
+                            0,
+                          )?.numberFixed ?? 0}
                           /
-                          {iSizeToSize(parsedAvailableSlots.mem, 'g', 0)
-                            ?.numberFixed ?? 0}
+                          {convertBinarySizeUnit(
+                            parsedAvailableSlots.mem,
+                            'g',
+                            0,
+                          )?.numberFixed ?? 0}
                         </Typography.Text>
                         <Typography.Text
                           type="secondary"
@@ -501,11 +507,15 @@ const AgentList: React.FC<AgentListProps> = ({
                   percent={liveStat.mem_util.ratio}
                   width={120}
                   valueLabel={
-                    iSizeToSize(_.toString(liveStat.mem_util.current), 'g')
-                      ?.numberFixed +
+                    convertBinarySizeUnit(
+                      _.toString(liveStat.mem_util.current),
+                      'g',
+                    )?.numberFixed +
                     '/' +
-                    iSizeToSize(_.toString(liveStat.mem_util.capacity), 'g')
-                      ?.numberFixed +
+                    convertBinarySizeUnit(
+                      _.toString(liveStat.mem_util.capacity),
+                      'g',
+                    )?.numberFixed +
                     ' GiB'
                   }
                 />
@@ -568,7 +578,7 @@ const AgentList: React.FC<AgentListProps> = ({
                             100 || 0
                         }
                         valueLabel={
-                          iSizeToSize(
+                          convertBinarySizeUnit(
                             _.toString(
                               liveStat[statKey as keyof typeof liveStat]
                                 .current,
@@ -576,7 +586,7 @@ const AgentList: React.FC<AgentListProps> = ({
                             'g',
                           )?.numberFixed +
                           '/' +
-                          iSizeToSize(
+                          convertBinarySizeUnit(
                             _.toString(
                               liveStat[statKey as keyof typeof liveStat]
                                 .capacity,
diff --git a/react/src/components/AvailableResourcesCard.tsx b/react/src/components/AvailableResourcesCard.tsx
index 69fe66c6c8..db214d22fc 100644
--- a/react/src/components/AvailableResourcesCard.tsx
+++ b/react/src/components/AvailableResourcesCard.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize } from '../helper';
+import { convertBinarySizeUnit } from '../helper';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { useResourceLimitAndRemaining } from '../hooks/useResourceLimitAndRemaining';
 import BAIProgressWithLabel from './BAIProgressWithLabel';
@@ -58,12 +58,14 @@ const AvailableResourcesCard = () => {
         <BAIProgressWithLabel
           title="MEM"
           percent={
-            ((iSizeToSize(remaining.mem + '', 'm')?.number || 0) /
-              (iSizeToSize(resourceLimits.mem?.max + '', 'm')?.number || 1)) *
+            ((convertBinarySizeUnit(remaining.mem + '', 'm')?.number || 0) /
+              (convertBinarySizeUnit(resourceLimits.mem?.max + '', 'm')
+                ?.number || 1)) *
             100
           }
           valueLabel={
-            iSizeToSize(remaining.mem + '', 'g', 2)?.numberFixed + ' GiB'
+            convertBinarySizeUnit(remaining.mem + '', 'g', 2)?.numberFixed +
+            ' GiB'
           }
         />
       </Flex>
diff --git a/react/src/components/DynamicUnitInputNumber.tsx b/react/src/components/DynamicUnitInputNumber.tsx
index 16bbd16b81..36f8ecadf3 100644
--- a/react/src/components/DynamicUnitInputNumber.tsx
+++ b/react/src/components/DynamicUnitInputNumber.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize, parseUnit } from '../helper';
+import { convertBinarySizeUnit, parseUnit, SizeUnit } from '../helper';
 import useControllableState from '../hooks/useControllableState';
 import { usePrevious } from 'ahooks';
 import { InputNumber, InputNumberProps, Select, Typography } from 'antd';
@@ -99,13 +99,16 @@ const DynamicUnitInputNumber: React.FC<DynamicUnitInputNumberProps> = ({
       }}
       //TODO: When min and max have different units, they should be calculated and put in.
       // 입력의 초소단위 확인 0.4g 가 되는지 확인
-      // @ts-ignore
-      max={maxUnit === unit ? maxNumValue : iSizeToSize(max, unit).number}
+      max={
+        maxUnit === unit
+          ? maxNumValue
+          : convertBinarySizeUnit(max, unit as SizeUnit)?.number
+      }
       min={
         minUnit === unit
           ? minNumValue
           : // @ts-ignore
-            iSizeToSize(min, unit).number
+            convertBinarySizeUnit(min, unit).number
       }
       addonAfter={
         <Select
diff --git a/react/src/components/DynamicUnitInputNumberWithSlider.tsx b/react/src/components/DynamicUnitInputNumberWithSlider.tsx
index 896e148ff8..90a5d01ecb 100644
--- a/react/src/components/DynamicUnitInputNumberWithSlider.tsx
+++ b/react/src/components/DynamicUnitInputNumberWithSlider.tsx
@@ -1,4 +1,4 @@
-import { compareNumberWithUnits, iSizeToSize } from '../helper';
+import { compareNumberWithUnits, convertBinarySizeUnit } from '../helper';
 import { useUpdatableState } from '../hooks';
 import useControllableState from '../hooks/useControllableState';
 import DynamicUnitInputNumber, {
@@ -36,9 +36,12 @@ const DynamicUnitInputNumberWithSlider: React.FC<
     },
   );
   const { token } = theme.useToken();
-  const minGiB = useMemo(() => iSizeToSize(min, 'g', 2), [min]);
-  const maxGiB = useMemo(() => iSizeToSize(max, 'g', 2), [max]);
-  const valueGiB = useMemo(() => iSizeToSize(value || '0g', 'g', 2), [value]);
+  const minGiB = useMemo(() => convertBinarySizeUnit(min, 'g', 2), [min]);
+  const maxGiB = useMemo(() => convertBinarySizeUnit(max, 'g', 2), [max]);
+  const valueGiB = useMemo(
+    () => convertBinarySizeUnit(value || '0g', 'g', 2),
+    [value],
+  );
 
   // const warnPercent = useMemo(() => {
   //   return warn
diff --git a/react/src/components/KeypairResourcePolicySettingModal.tsx b/react/src/components/KeypairResourcePolicySettingModal.tsx
index 33aa91b730..2c2a36edfd 100644
--- a/react/src/components/KeypairResourcePolicySettingModal.tsx
+++ b/react/src/components/KeypairResourcePolicySettingModal.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize } from '../helper';
+import { convertBinarySizeUnit } from '../helper';
 import {
   UNLIMITED_MAX_CONCURRENT_SESSIONS,
   UNLIMITED_MAX_CONTAINERS_PER_SESSIONS,
@@ -125,7 +125,7 @@ const KeypairResourcePolicySettingModal: React.FC<
     );
 
     if (parsedTotalResourceSlots?.mem) {
-      parsedTotalResourceSlots.mem = iSizeToSize(
+      parsedTotalResourceSlots.mem = convertBinarySizeUnit(
         parsedTotalResourceSlots?.mem + 'b',
         'g',
         2,
@@ -167,7 +167,7 @@ const KeypairResourcePolicySettingModal: React.FC<
           values?.parsedTotalResourceSlots,
           (value, key) => {
             if (_.includes(key, 'mem')) {
-              return iSizeToSize(value, 'b', 0)?.numberFixed;
+              return convertBinarySizeUnit(value, 'b', 0)?.numberFixed;
             }
             return value;
           },
@@ -353,9 +353,9 @@ const KeypairResourcePolicySettingModal: React.FC<
                                 _.includes(resourceSlotKey, 'mem') &&
                                 value &&
                                 // @ts-ignore
-                                iSizeToSize(value, 'p').number >
+                                convertBinarySizeUnit(value, 'p').number >
                                   // @ts-ignore
-                                  iSizeToSize('300p', 'p').number
+                                  convertBinarySizeUnit('300p', 'p').number
                               ) {
                                 return Promise.reject(
                                   new Error(
diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
index 56c953d383..09d0bd9747 100644
--- a/react/src/components/ResourceAllocationFormItems.tsx
+++ b/react/src/components/ResourceAllocationFormItems.tsx
@@ -1,7 +1,7 @@
 import {
   addNumberWithUnits,
   compareNumberWithUnits,
-  iSizeToSize,
+  convertBinarySizeUnit,
 } from '../helper';
 import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
 import { useResourceSlotsDetails } from '../hooks/backendai';
@@ -239,9 +239,9 @@ const ResourceAllocationFormItems: React.FC<
     const minimumResources: Partial<ResourceAllocationFormValue['resource']> = {
       cpu: resourceLimits.cpu?.min,
       mem:
-        iSizeToSize(
-          (iSizeToSize(resourceLimits.shmem?.min, 'm')?.number || 0) +
-            (iSizeToSize(resourceLimits.mem?.min, 'm')?.number || 0) +
+        convertBinarySizeUnit(
+          (convertBinarySizeUnit(resourceLimits.shmem?.min, 'm')?.number || 0) +
+            (convertBinarySizeUnit(resourceLimits.mem?.min, 'm')?.number || 0) +
             'm',
           'g',
         )?.number + 'g', //to prevent loosing precision
@@ -345,7 +345,11 @@ const ResourceAllocationFormItems: React.FC<
       (preset) => preset.name === name,
     );
     const slots = _.pick(preset?.resource_slots, _.keys(resourceSlots));
-    const mem = iSizeToSize((slots?.mem || 0) + 'b', 'g', 2)?.numberUnit;
+    const mem = convertBinarySizeUnit(
+      (slots?.mem || 0) + 'b',
+      'g',
+      2,
+    )?.numberUnit;
     const acceleratorObj = _.omit(slots, ['cpu', 'mem', 'shmem']);
 
     // Select the first matched AI accelerator type and value
@@ -372,7 +376,7 @@ const ResourceAllocationFormItems: React.FC<
         ...acceleratorSetting,
         // transform to GB based on preset values
         mem,
-        shmem: iSizeToSize((preset?.shared_memory || 0) + 'b', 'g', 2)
+        shmem: convertBinarySizeUnit((preset?.shared_memory || 0) + 'b', 'g', 2)
           ?.numberUnit,
         cpu: parseInt(slots?.cpu || '0') || 0,
       },
@@ -766,8 +770,11 @@ const ResourceAllocationFormItems: React.FC<
                                 ...(remaining.mem
                                   ? {
                                       //@ts-ignore
-                                      [iSizeToSize(remaining.mem + 'b', 'g', 3)
-                                        ?.numberFixed]: {
+                                      [convertBinarySizeUnit(
+                                        remaining.mem + 'b',
+                                        'g',
+                                        3,
+                                      )?.numberFixed]: {
                                         label: <RemainingMark />,
                                       },
                                     }
diff --git a/react/src/components/ResourceNumber.tsx b/react/src/components/ResourceNumber.tsx
index c98c5e38c5..0828d60450 100644
--- a/react/src/components/ResourceNumber.tsx
+++ b/react/src/components/ResourceNumber.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize } from '../helper';
+import { convertBinarySizeUnit } from '../helper';
 import {
   BaseResourceSlotName,
   KnownAcceleratorResourceSlotName,
@@ -45,7 +45,9 @@ const ResourceNumber: React.FC<ResourceNumberProps> = ({
 
   const formatAmount = (amount: string) => {
     return mergedResourceSlots?.[type]?.number_format.binary
-      ? Number(iSizeToSize(amount, 'g', 3, true)?.numberFixed).toString()
+      ? Number(
+          convertBinarySizeUnit(amount, 'g', 3, true)?.numberFixed,
+        ).toString()
       : (mergedResourceSlots?.[type]?.number_format.round_length || 0) > 0
         ? parseFloat(amount).toFixed(2)
         : amount;
@@ -75,7 +77,8 @@ const ResourceNumber: React.FC<ResourceNumberProps> = ({
           type="secondary"
           style={{ fontSize: token.fontSizeSM }}
         >
-          (SHM: {iSizeToSize(opts.shmem + 'b', 'g', 2, true)?.numberFixed}
+          (SHM:{' '}
+          {convertBinarySizeUnit(opts.shmem + 'b', 'g', 2, true)?.numberFixed}
           GiB)
         </Typography.Text>
       ) : null}
diff --git a/react/src/components/ResourcePresetList.tsx b/react/src/components/ResourcePresetList.tsx
index 3af4947c7d..64cf971c8e 100644
--- a/react/src/components/ResourcePresetList.tsx
+++ b/react/src/components/ResourcePresetList.tsx
@@ -1,4 +1,8 @@
-import { filterNonNullItems, iSizeToSize, localeCompare } from '../helper';
+import {
+  filterNonNullItems,
+  convertBinarySizeUnit,
+  localeCompare,
+} from '../helper';
 import { useUpdatableState } from '../hooks';
 import Flex from './Flex';
 import ResourceNumber from './ResourceNumber';
@@ -131,7 +135,7 @@ const ResourcePresetList: React.FC<ResourcePresetListProps> = () => {
             title: t('resourcePreset.SharedMemory'),
             dataIndex: 'shared_memory',
             render: (text) =>
-              text ? iSizeToSize(text + '', 'g')?.number : '-',
+              text ? convertBinarySizeUnit(text + '', 'g')?.number : '-',
             sorter: (a, b) => a.shared_memory - b.shared_memory,
           },
           {
diff --git a/react/src/components/ResourcePresetSettingModal.tsx b/react/src/components/ResourcePresetSettingModal.tsx
index dfe4ae5b30..fa70560f28 100644
--- a/react/src/components/ResourcePresetSettingModal.tsx
+++ b/react/src/components/ResourcePresetSettingModal.tsx
@@ -1,4 +1,4 @@
-import { iSizeToSize } from '../helper';
+import { convertBinarySizeUnit } from '../helper';
 import { useResourceSlots, useResourceSlotsDetails } from '../hooks/backendai';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import DynamicUnitInputNumber from './DynamicUnitInputNumber';
@@ -82,7 +82,7 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
           values?.resource_slots,
           (value, key) => {
             if (_.includes(key, 'mem')) {
-              return iSizeToSize(value, 'b', 0)?.numberFixed;
+              return convertBinarySizeUnit(value, 'b', 0)?.numberFixed;
             }
             return value;
           },
@@ -92,7 +92,7 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
         const props: CreateResourcePresetInput | ModifyResourcePresetInput = {
           resource_slots: JSON.stringify(resourceSlots || {}),
           shared_memory: values?.shared_memory
-            ? iSizeToSize(values?.shared_memory, 'b', 0)?.numberFixed
+            ? convertBinarySizeUnit(values?.shared_memory, 'b', 0)?.numberFixed
             : null,
         };
         if (_.isEmpty(resourcePreset)) {
@@ -180,12 +180,14 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
                     JSON.parse(resourcePreset?.resource_slots || '{}'),
                     (value, key) =>
                       _.includes(key, 'mem')
-                        ? iSizeToSize(value + 'b', 'g')?.numberUnit
+                        ? convertBinarySizeUnit(value + 'b', 'g')?.numberUnit
                         : value,
                   ) || {},
                 shared_memory: resourcePreset?.shared_memory
-                  ? iSizeToSize(resourcePreset?.shared_memory + 'b', 'g')
-                      ?.numberUnit
+                  ? convertBinarySizeUnit(
+                      resourcePreset?.shared_memory + 'b',
+                      'g',
+                    )?.numberUnit
                   : null,
               }
             : {}
@@ -242,9 +244,9 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
                                 value &&
                                 _.includes(resourceSlotKey, 'mem') &&
                                 // @ts-ignore
-                                iSizeToSize(value, 'p').number >
+                                convertBinarySizeUnit(value, 'p').number >
                                   // @ts-ignore
-                                  iSizeToSize('300p', 'p').number
+                                  convertBinarySizeUnit('300p', 'p').number
                               ) {
                                 return Promise.reject(
                                   new Error(
@@ -288,9 +290,11 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
                       if (
                         value &&
                         getFieldValue('resource_slots')?.mem &&
-                        (iSizeToSize(getFieldValue('resource_slots')?.mem, 'b')
-                          ?.number ?? 0) <
-                          (iSizeToSize(value, 'b')?.number ?? 0)
+                        (convertBinarySizeUnit(
+                          getFieldValue('resource_slots')?.mem,
+                          'b',
+                        )?.number ?? 0) <
+                          (convertBinarySizeUnit(value, 'b')?.number ?? 0)
                       ) {
                         return Promise.reject(
                           t('resourcePreset.MemoryShouldBeLargerThanSHMEM'),
diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx
index cae562b34a..12444bc68f 100644
--- a/react/src/components/ServiceLauncherPageContent.tsx
+++ b/react/src/components/ServiceLauncherPageContent.tsx
@@ -1,7 +1,7 @@
 import {
   baiSignedRequestWithPromise,
   compareNumberWithUnits,
-  iSizeToSize,
+  convertBinarySizeUnit,
   useBaiSignedRequestWithPromise,
 } from '../helper';
 import {
@@ -647,13 +647,13 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
         // FIXME: memory doesn't applied to resource allocation
         resource: {
           cpu: parseInt(JSON.parse(endpoint?.resource_slots || '{}')?.cpu),
-          mem: iSizeToSize(
+          mem: convertBinarySizeUnit(
             JSON.parse(endpoint?.resource_slots || '{}')?.mem + 'b',
             'g',
             3,
             true,
           )?.numberUnit,
-          shmem: iSizeToSize(
+          shmem: convertBinarySizeUnit(
             JSON.parse(endpoint?.resource_opts || '{}')?.shmem ||
               AUTOMATIC_DEFAULT_SHMEM,
             'g',
diff --git a/react/src/helper/index.test.tsx b/react/src/helper/index.test.tsx
index 937161d37c..828ba57f48 100644
--- a/react/src/helper/index.test.tsx
+++ b/react/src/helper/index.test.tsx
@@ -3,7 +3,7 @@ import {
   compareNumberWithUnits,
   filterEmptyItem,
   getImageFullName,
-  iSizeToSize,
+  convertBinarySizeUnit,
   isOutsideRange,
   isOutsideRangeWithUnits,
   localeCompare,
@@ -11,13 +11,14 @@ import {
   parseUnit,
   toFixedFloorWithoutTrailingZeros,
   transformSorterToOrderString,
+  convertDecimalSizeUnit,
 } from './index';
 
-describe('iSizeToSize', () => {
-  it('should convert iSize to Size with default fixed value', () => {
+describe('convertBinarySizeUnit', () => {
+  it('should convert size using binary (1024) base with default fixed value', () => {
     const sizeWithUnit = '1K';
     const targetSizeUnit = 'B';
-    const result = iSizeToSize(sizeWithUnit, targetSizeUnit);
+    const result = convertBinarySizeUnit(sizeWithUnit, targetSizeUnit);
     expect(result).toEqual({
       number: 1024,
       numberFixed: '1024',
@@ -26,11 +27,11 @@ describe('iSizeToSize', () => {
     });
   });
 
-  it('should convert iSize to Size with fixed value of 0', () => {
+  it('should convert binary size with fixed value of 0', () => {
     const sizeWithUnit = '1K';
     const targetSizeUnit = 'B';
     const fixed = 0;
-    const result = iSizeToSize(sizeWithUnit, targetSizeUnit, fixed);
+    const result = convertBinarySizeUnit(sizeWithUnit, targetSizeUnit, fixed);
     expect(result).toEqual({
       number: 1024,
       numberFixed: '1024',
@@ -39,10 +40,10 @@ describe('iSizeToSize', () => {
     });
   });
 
-  it('should convert iSize to Size with targetSizeUnit of "k"(lower case)', () => {
+  it('should handle lowercase unit input and convert to uppercase in result', () => {
     const sizeWithUnit = '1m';
     const targetSizeUnit = 'k';
-    const result = iSizeToSize(sizeWithUnit, targetSizeUnit);
+    const result = convertBinarySizeUnit(sizeWithUnit, targetSizeUnit);
     expect(result).toEqual({
       number: 1024,
       numberFixed: '1024',
@@ -51,10 +52,10 @@ describe('iSizeToSize', () => {
     });
   });
 
-  it('should convert iSize to Size with targetSizeUnit of "t"', () => {
+  it('should convert from peta to tera bytes correctly', () => {
     const sizeWithUnit = '1P';
     const targetSizeUnit = 'T';
-    const result = iSizeToSize(sizeWithUnit, targetSizeUnit);
+    const result = convertBinarySizeUnit(sizeWithUnit, targetSizeUnit);
     expect(result).toEqual({
       number: 1024,
       numberFixed: '1024',
@@ -63,14 +64,16 @@ describe('iSizeToSize', () => {
     });
   });
 
-  it('should throw an error if size format is invalid', () => {
+  it('should throw an error for invalid size format', () => {
     const sizeWithUnit = 'invalid';
-    expect(() => iSizeToSize(sizeWithUnit)).toThrow('Invalid size format');
+    expect(() => convertBinarySizeUnit(sizeWithUnit)).toThrow(
+      'Invalid size format',
+    );
   });
 
-  it('should use default targetSizeUnit and fixed values if not provided', () => {
+  it('should use input unit as target unit when targetSizeUnit is not provided', () => {
     const sizeWithUnit = '1K';
-    const result = iSizeToSize(sizeWithUnit);
+    const result = convertBinarySizeUnit(sizeWithUnit);
     expect(result).toEqual({
       number: 1,
       numberFixed: '1',
@@ -79,17 +82,60 @@ describe('iSizeToSize', () => {
     });
   });
 
-  it('should return undefined if sizeWithUnit is undefined', () => {
+  it('should return undefined for undefined input', () => {
     const sizeWithUnit = undefined;
-    const result = iSizeToSize(sizeWithUnit);
+    const result = convertBinarySizeUnit(sizeWithUnit);
     expect(result).toBeUndefined();
   });
 
-  it('should return 0 when input is zero', () => {
-    const result = iSizeToSize('0g', 'b');
+  it('should handle zero input correctly', () => {
+    const result = convertBinarySizeUnit('0g', 'b');
     expect(result?.number).toBe(0);
     expect(result?.unit).toBe('B');
   });
+
+  describe('auto unit selection', () => {
+    it('should automatically select appropriate binary units', () => {
+      expect(convertBinarySizeUnit('1024B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'K',
+        numberUnit: '1K',
+      });
+
+      expect(convertBinarySizeUnit('1048576B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'M',
+        numberUnit: '1M',
+      });
+
+      expect(convertBinarySizeUnit('1073741824B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'G',
+        numberUnit: '1G',
+      });
+    });
+
+    it('should handle small values correctly', () => {
+      expect(convertBinarySizeUnit('900B', 'auto')).toEqual({
+        number: 900,
+        numberFixed: '900',
+        unit: 'B',
+        numberUnit: '900B',
+      });
+    });
+
+    it('should handle fractional values correctly', () => {
+      expect(convertBinarySizeUnit('1536B', 'auto')).toEqual({
+        number: 1.5,
+        numberFixed: '1.5',
+        unit: 'K',
+        numberUnit: '1.5K',
+      });
+    });
+  });
 });
 
 describe('parseUnit', () => {
@@ -527,3 +573,133 @@ describe('getImageFullName', () => {
     );
   });
 });
+
+describe('convertDecimalSizeUnit', () => {
+  it('should convert size using decimal (1000) base with default fixed value', () => {
+    const sizeWithUnit = '1K';
+    const targetSizeUnit = 'B';
+    const result = convertDecimalSizeUnit(sizeWithUnit, targetSizeUnit);
+    expect(result).toEqual({
+      number: 1000,
+      numberFixed: '1000',
+      unit: 'B',
+      numberUnit: '1000B',
+    });
+  });
+
+  it('should convert decimal size with fixed value of 0', () => {
+    const sizeWithUnit = '1K';
+    const targetSizeUnit = 'B';
+    const fixed = 0;
+    const result = convertDecimalSizeUnit(sizeWithUnit, targetSizeUnit, fixed);
+    expect(result).toEqual({
+      number: 1000,
+      numberFixed: '1000',
+      unit: 'B',
+      numberUnit: '1000B',
+    });
+  });
+
+  it('should handle lowercase unit input and convert to uppercase in result', () => {
+    const sizeWithUnit = '1m';
+    const targetSizeUnit = 'k';
+    const result = convertDecimalSizeUnit(sizeWithUnit, targetSizeUnit);
+    expect(result).toEqual({
+      number: 1000,
+      numberFixed: '1000',
+      unit: 'K',
+      numberUnit: '1000K',
+    });
+  });
+
+  it('should convert from peta to tera bytes correctly', () => {
+    const sizeWithUnit = '1P';
+    const targetSizeUnit = 'T';
+    const result = convertDecimalSizeUnit(sizeWithUnit, targetSizeUnit);
+    expect(result).toEqual({
+      number: 1000,
+      numberFixed: '1000',
+      unit: 'T',
+      numberUnit: '1000T',
+    });
+  });
+
+  it('should throw an error for invalid size format', () => {
+    const sizeWithUnit = 'invalid';
+    expect(() => convertDecimalSizeUnit(sizeWithUnit)).toThrow(
+      'Invalid size format',
+    );
+  });
+
+  it('should use input unit as target unit when targetSizeUnit is not provided', () => {
+    const sizeWithUnit = '1K';
+    const result = convertDecimalSizeUnit(sizeWithUnit);
+    expect(result).toEqual({
+      number: 1,
+      numberFixed: '1',
+      unit: 'K',
+      numberUnit: '1K',
+    });
+  });
+
+  it('should return undefined for undefined input', () => {
+    const sizeWithUnit = undefined;
+    const result = convertDecimalSizeUnit(sizeWithUnit);
+    expect(result).toBeUndefined();
+  });
+
+  it('should handle zero input correctly', () => {
+    const result = convertDecimalSizeUnit('0G', 'B');
+    expect(result?.number).toBe(0);
+    expect(result?.unit).toBe('B');
+  });
+
+  it('should handle fractional numbers correctly', () => {
+    const result = convertDecimalSizeUnit('0.5G', 'M');
+    expect(result?.number).toBe(500);
+    expect(result?.unit).toBe('M');
+  });
+
+  describe('auto unit selection', () => {
+    it('should automatically select appropriate decimal units', () => {
+      expect(convertDecimalSizeUnit('1000B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'K',
+        numberUnit: '1K',
+      });
+
+      expect(convertDecimalSizeUnit('1000000B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'M',
+        numberUnit: '1M',
+      });
+
+      expect(convertDecimalSizeUnit('1000000000B', 'auto')).toEqual({
+        number: 1,
+        numberFixed: '1',
+        unit: 'G',
+        numberUnit: '1G',
+      });
+    });
+
+    it('should handle small values correctly', () => {
+      expect(convertDecimalSizeUnit('900B', 'auto')).toEqual({
+        number: 900,
+        numberFixed: '900',
+        unit: 'B',
+        numberUnit: '900B',
+      });
+    });
+
+    it('should handle fractional values correctly', () => {
+      expect(convertDecimalSizeUnit('1500B', 'auto')).toEqual({
+        number: 1.5,
+        numberFixed: '1.5',
+        unit: 'K',
+        numberUnit: '1.5K',
+      });
+    });
+  });
+});
diff --git a/react/src/helper/index.tsx b/react/src/helper/index.tsx
index 27469ada3d..e6062ac847 100644
--- a/react/src/helper/index.tsx
+++ b/react/src/helper/index.tsx
@@ -139,7 +139,7 @@ export const bytesToGB = (
   return (bytes / 10 ** 9).toFixed(decimalPoint);
 };
 
-type SizeUnit =
+export type SizeUnit =
   | 'B'
   | 'K'
   | 'M'
@@ -154,19 +154,14 @@ type SizeUnit =
   | 't'
   | 'p'
   | 'e';
-export function iSizeToSize(
+
+function convertSizeUnit(
   sizeWithUnit: string | undefined,
-  targetSizeUnit?: SizeUnit,
+  targetSizeUnit?: SizeUnit | 'auto',
   fixed: number = 2,
   round: boolean = false,
-):
-  | {
-      number: number;
-      numberFixed: string;
-      unit: string;
-      numberUnit: string;
-    }
-  | undefined {
+  base: 1024 | 1000 = 1024,
+) {
   if (sizeWithUnit === undefined) {
     return undefined;
   }
@@ -176,23 +171,57 @@ export function iSizeToSize(
   if (sizeIndex === -1 || isNaN(sizeValue)) {
     throw new Error('Invalid size format,' + sizeWithUnit);
   }
-  const bytes = sizeValue * Math.pow(1024, sizeIndex);
-  const targetIndex = targetSizeUnit
-    ? sizes.indexOf(targetSizeUnit.toUpperCase())
-    : sizeIndex;
-  const targetBytes = bytes / Math.pow(1024, targetIndex);
-  // const numberFixed = targetBytes.toFixed(fixed);
+
+  const bytes = sizeValue * Math.pow(base, sizeIndex);
+  let targetIndex: number;
+
+  if (targetSizeUnit === 'auto') {
+    // Auto unit selection logic
+    targetIndex = Math.floor(Math.log(bytes) / Math.log(base));
+    targetIndex = Math.min(Math.max(targetIndex, 0), sizes.length - 1);
+
+    const tempBytes = bytes / Math.pow(base, targetIndex);
+    if (tempBytes < 1 && targetIndex > 0) {
+      targetIndex--;
+    }
+  } else {
+    // Existing logic: explicit unit usage
+    targetIndex = targetSizeUnit
+      ? sizes.indexOf(targetSizeUnit.toUpperCase())
+      : sizeIndex;
+  }
+
+  const finalBytes = bytes / Math.pow(base, targetIndex);
   const numberFixed = round
-    ? targetBytes.toFixed(fixed)
-    : toFixedFloorWithoutTrailingZeros(targetBytes, fixed);
+    ? finalBytes.toFixed(fixed)
+    : toFixedFloorWithoutTrailingZeros(finalBytes, fixed);
+
   return {
-    number: targetBytes,
+    number: finalBytes,
     numberFixed,
     unit: sizes[targetIndex],
     numberUnit: `${numberFixed}${sizes[targetIndex]}`,
   };
 }
 
+export function convertBinarySizeUnit(
+  sizeWithUnit: string | undefined,
+  targetSizeUnit?: SizeUnit | 'auto',
+  fixed: number = 2,
+  round: boolean = false,
+) {
+  return convertSizeUnit(sizeWithUnit, targetSizeUnit, fixed, round, 1024);
+}
+
+export function convertDecimalSizeUnit(
+  sizeWithUnit: string | undefined,
+  targetSizeUnit?: SizeUnit | 'auto',
+  fixed: number = 2,
+  round: boolean = false,
+) {
+  return convertSizeUnit(sizeWithUnit, targetSizeUnit, fixed, round, 1000);
+}
+
 export function toFixedFloorWithoutTrailingZeros(
   num: number | string,
   fixed: number,
@@ -210,16 +239,17 @@ export function toFixedWithTypeValidation(num: number | string, fixed: number) {
 export function compareNumberWithUnits(size1: string, size2: string) {
   const [number1, unit1] = parseUnit(size1);
   const [number2, unit2] = parseUnit(size2);
-  // console.log(size1, size2);
-  // console.log(number1, unit1, number2, unit2);
+
   if (unit1 === unit2) {
     return number1 - number2;
   }
   if (number1 === 0 && number2 === 0) {
     return 0;
   }
-  // @ts-ignore
-  return iSizeToSize(size1, 'g')?.number - iSizeToSize(size2, 'g')?.number;
+
+  const value1 = convertBinarySizeUnit(size1, 'g')?.number ?? 0;
+  const value2 = convertBinarySizeUnit(size2, 'g')?.number ?? 0;
+  return value1 - value2;
 }
 
 export function addNumberWithUnits(
@@ -227,9 +257,9 @@ export function addNumberWithUnits(
   size2: string,
   targetUnit: SizeUnit = 'm',
 ) {
-  return iSizeToSize(
-    (iSizeToSize(size1, 'b')?.number || 0) +
-      (iSizeToSize(size2, 'b')?.number || 0) +
+  return convertBinarySizeUnit(
+    (convertBinarySizeUnit(size1, 'b')?.number || 0) +
+      (convertBinarySizeUnit(size2, 'b')?.number || 0) +
       'b',
     targetUnit,
   )?.numberUnit;
diff --git a/react/src/hooks/useResourceLimitAndRemaining.tsx b/react/src/hooks/useResourceLimitAndRemaining.tsx
index 8266692b8e..50dbc92041 100644
--- a/react/src/hooks/useResourceLimitAndRemaining.tsx
+++ b/react/src/hooks/useResourceLimitAndRemaining.tsx
@@ -1,7 +1,7 @@
 import { useSuspendedBackendaiClient } from '.';
 import { Image } from '../components/ImageEnvironmentSelectFormItems';
 import { AUTOMATIC_DEFAULT_SHMEM } from '../components/ResourceAllocationFormItems';
-import { addNumberWithUnits, iSizeToSize } from '../helper';
+import { addNumberWithUnits, convertBinarySizeUnit } from '../helper';
 import { ResourceSlotName, useResourceSlots } from '../hooks/backendai';
 import { useSuspenseTanQuery } from './reactQueryAlias';
 import _ from 'lodash';
@@ -164,7 +164,7 @@ export const useResourceLimitAndRemaining = ({
       !_.isEmpty(
         checkPresetInfo?.scaling_groups[currentResourceGroup]?.remaining?.mem,
       )
-        ? iSizeToSize(
+        ? convertBinarySizeUnit(
             _.toNumber(
               checkPresetInfo?.scaling_groups[currentResourceGroup]?.using.mem,
             ) +
@@ -248,8 +248,8 @@ export const useResourceLimitAndRemaining = ({
               //handled by 'b' unit
               addNumberWithUnits(
                 _.max([
-                  iSizeToSize(currentImageMinM, 'b')?.number,
-                  iSizeToSize(AUTOMATIC_DEFAULT_SHMEM, 'b')?.number,
+                  convertBinarySizeUnit(currentImageMinM, 'b')?.number,
+                  convertBinarySizeUnit(AUTOMATIC_DEFAULT_SHMEM, 'b')?.number,
                   0,
                 ]) + 'b',
                 AUTOMATIC_DEFAULT_SHMEM,
@@ -261,12 +261,12 @@ export const useResourceLimitAndRemaining = ({
                   ? undefined
                   : baiClient._config.maxMemoryPerContainer,
                 limitParser(checkPresetInfo?.keypair_limits.mem) &&
-                  iSizeToSize(
+                  convertBinarySizeUnit(
                     limitParser(checkPresetInfo?.keypair_limits.mem) + '',
                     'g',
                   )?.number,
                 limitParser(checkPresetInfo?.group_limits.mem) &&
-                  iSizeToSize(
+                  convertBinarySizeUnit(
                     limitParser(checkPresetInfo?.group_limits.mem) + '',
                     'g',
                   )?.number,
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
index 778dd63a9b..636c13842c 100644
--- a/react/src/pages/SessionLauncherPage.tsx
+++ b/react/src/pages/SessionLauncherPage.tsx
@@ -41,7 +41,7 @@ import {
   formatDuration,
   generateRandomString,
   getImageFullName,
-  iSizeToSize,
+  convertBinarySizeUnit,
   preserveDotStartCase,
 } from '../helper';
 import {
@@ -2261,14 +2261,15 @@ export const ResourceNumbersOfSession: React.FC<FormOrResourceRequired> = ({
               type={type}
               value={
                 type === 'mem'
-                  ? (iSizeToSize(value.toString(), 'b')?.number || 0) *
+                  ? (convertBinarySizeUnit(value.toString(), 'b')?.number ||
+                      0) *
                       containerCount +
                     ''
                   : _.toNumber(value) * containerCount + ''
               }
               opts={{
                 shmem: resource.shmem
-                  ? (iSizeToSize(resource.shmem, 'b')?.number || 0) *
+                  ? (convertBinarySizeUnit(resource.shmem, 'b')?.number || 0) *
                     containerCount
                   : undefined,
               }}