Switch from Gigabyte to Gibibyte (#1286)

Co-authored-by: Hien To <tominhhien97@gmail.com>

web/containers/DropdownListSidebar/index.tsx

@@ -26,7 +26,7 @@ import { useMainViewState } from '@/hooks/useMainViewState'
 
 import useRecommendedModel from '@/hooks/useRecommendedModel'
 
-import { toGigabytes } from '@/utils/converter'
+import { toGibibytes } from '@/utils/converter'
 
 import {
   activeThreadAtom,
@@ -130,7 +130,7 @@ export default function DropdownListSidebar() {
                   <div className="flex w-full justify-between">
                     <span className="line-clamp-1 block">{x.name}</span>
                     <span className="font-bold text-muted-foreground">
-                      {toGigabytes(x.metadata.size)}
+                      {toGibibytes(x.metadata.size)}
                     </span>
                   </div>
                 </SelectItem>

web/screens/ExploreModels/ExploreModelItemHeader/index.tsx

@@ -21,7 +21,7 @@ import { getAssistants } from '@/hooks/useGetAssistants'
 import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 import { useMainViewState } from '@/hooks/useMainViewState'
 
-import { toGigabytes } from '@/utils/converter'
+import { toGibibytes } from '@/utils/converter'
 
 type Props = {
   model: Model
@@ -99,7 +99,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
         </div>
         <div className="inline-flex items-center space-x-2">
           <span className="mr-4 font-semibold text-muted-foreground">
-            {toGigabytes(model.metadata.size)}
+            {toGibibytes(model.metadata.size)}
           </span>
           {downloadButton}
           <ChevronDownIcon

web/screens/ExploreModels/ModelVersionItem/index.tsx

@@ -14,8 +14,6 @@ import { useDownloadState } from '@/hooks/useDownloadState'
 import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 import { useMainViewState } from '@/hooks/useMainViewState'
 
-import { toGigabytes } from '@/utils/converter'
-
 type Props = {
   model: Model
   isRecommended: boolean

web/screens/Settings/Models/Row.tsx

@@ -15,7 +15,7 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 
 import useDeleteModel from '@/hooks/useDeleteModel'
 
-import { toGigabytes } from '@/utils/converter'
+import { toGibibytes } from '@/utils/converter'
 
 type RowModelProps = {
   data: Model
@@ -52,7 +52,7 @@ export default function RowModel(props: RowModelProps) {
       <td className="px-6 py-4">
         <Badge themes="secondary">
           {props.data.metadata.size
-            ? toGigabytes(props.data.metadata.size)
+            ? toGibibytes(props.data.metadata.size)
             : '-'}
         </Badge>
       </td>

web/screens/SystemMonitor/index.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
 
-import { toGigabytes } from '@/utils/converter'
+import { toGibibytes } from '@/utils/converter'
 
 import {
   cpuUsageAtom,
@@ -31,7 +31,7 @@ export default function SystemMonitorScreen() {
                   ram ({Math.round((usedRam / totalRam) * 100)}%)
                 </h4>
                 <span className="text-xs text-muted-foreground">
-                  {toGigabytes(usedRam)} of {toGigabytes(totalRam)} used
+                  {toGibibytes(usedRam)} of {toGibibytes(totalRam)} used
                 </span>
               </div>
               <div className="mt-2">
@@ -87,7 +87,7 @@ export default function SystemMonitorScreen() {
                       <td className="px-6 py-2 font-bold">{activeModel.id}</td>
                       <td className="px-6 py-2">
                         <Badge themes="secondary">
-                          {toGigabytes(activeModel.metadata.size)}
+                          {toGibibytes(activeModel.metadata.size)}
                         </Badge>
                       </td>
                       <td className="px-6 py-2">

web/utils/converter.ts

@@ -1,11 +1,11 @@
-export const toGigabytes = (input: number) => {
+export const toGibibytes = (input: number) => {
   if (!input) return ''
   if (input > 1024 ** 3) {
-    return (input / 1000 ** 3).toFixed(2) + 'GB'
+    return (input / 1024 ** 3).toFixed(2) + 'GB'
   } else if (input > 1024 ** 2) {
-    return (input / 1000 ** 2).toFixed(2) + 'MB'
+    return (input / 1024 ** 2).toFixed(2) + 'MB'
   } else if (input > 1024) {
-    return (input / 1000).toFixed(2) + 'KB'
+    return (input / 1024).toFixed(2) + 'KB'
   } else {
     return input + 'B'
   }
@@ -21,7 +21,7 @@ export const formatDownloadPercentage = (
 
 export const formatDownloadSpeed = (input: number | undefined) => {
   if (!input) return '0B/s'
-  return toGigabytes(input) + '/s'
+  return toGibibytes(input) + '/s'
 }
 
 export const formatTwoDigits = (input: number) => {