moved helper func to a plugin

web/src/components/ModelEntry.vue

@@ -90,6 +90,7 @@
 </template>
 
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import { nextTick } from 'vue'
 import feather from 'feather-icons'
@@ -131,6 +132,9 @@ export default {
     })
   },
   methods: {
+    computedFileSize(size){
+            return filesize(size)
+        },
     async getFileSize(url) {
       try {
 
@@ -139,17 +143,17 @@ export default {
         if (res) {
           
           if (res.headers["content-length"]) {
-            return this.humanFileSize(res.headers["content-length"])
+            return this.computedFileSize(res.headers["content-length"])
           }
           if (this.model.filesize) {
-            return this.humanFileSize(this.model.filesize)
+            return this.computedFileSize(this.model.filesize)
           }
           return 'Could not be determined'
 
         }
         if (this.model.filesize) {
 
-          return this.humanFileSize(this.model.filesize)
+          return this.computedFileSize(this.model.filesize)
         }
         return 'Could not be determined'
 
@@ -181,38 +185,6 @@ export default {
       }
 
     },
-    /** From https://stackoverflow.com/a/14919494/14106028
-   * Format bytes as human-readable text.
-   * 
-   * @param bytes Number of bytes.
-   * @param si True to use metric (SI) units, aka powers of 1000. False to use 
-   *           binary (IEC), aka powers of 1024.
-   * @param dp Number of decimal places to display.
-   * 
-   * @return Formatted string.
-   */
-    humanFileSize(bytes, si = true, dp = 1) {
-      const thresh = si ? 1000 : 1024;
-
-      if (Math.abs(bytes) < thresh) {
-        return bytes + ' B';
-      }
-
-      const units = si
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-      let u = -1;
-      const r = 10 ** dp;
-
-      do {
-        bytes /= thresh;
-        ++u;
-      } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-
-
-      return bytes.toFixed(dp) + ' ' + units[u];
-    },
-
     getImgUrl() {
 
       if (this.icon === '/images/default_model.png') {

web/src/main.js

@@ -8,4 +8,4 @@ const app = createApp(App)
 
 app.use(router)
 
-app.mount('#app')
+app.mount('#app')

web/src/views/SettingsView.vue

@@ -511,6 +511,7 @@
 }
 </style>
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import feather from 'feather-icons'
 import { nextTick, TransitionGroup } from 'vue'
@@ -998,36 +999,8 @@ export default {
             this.isLoading = false
 
         },
-        /** From https://stackoverflow.com/a/14919494/14106028
+        computedFileSize(size){
-        * Format bytes as human-readable text.
+            return filesize(size)
-        * 
-        * @param bytes Number of bytes.
-        * @param si True to use metric (SI) units, aka powers of 1000. False to use 
-        *           binary (IEC), aka powers of 1024.
-        * @param dp Number of decimal places to display.
-        * 
-        * @return Formatted string.
-        */
-        humanFileSize(bytes, si = true, dp = 1) {
-            const thresh = si ? 1000 : 1024;
-
-            if (Math.abs(bytes) < thresh) {
-                return bytes + ' B';
-            }
-
-            const units = si
-                ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-                : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-            let u = -1;
-            const r = 10 ** dp;
-
-            do {
-                bytes /= thresh;
-                ++u;
-            } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-
-
-            return bytes.toFixed(dp) + ' ' + units[u];
         },
 
     }, async mounted() {
@@ -1054,17 +1027,17 @@ export default {
     },
     computed: {
         available_space() {
-            return this.humanFileSize(this.diskUsage.available_space)
+            return this.computedFileSize(this.diskUsage.available_space)
         },
         binding_models_usage() {
-            return this.humanFileSize(this.diskUsage.binding_models_usage)
+            return this.computedFileSize(this.diskUsage.binding_models_usage)
         },
         percent_usage() {
             return this.diskUsage.percent_usage
-            //return this.humanFileSize(this.diskUsage.percent_usage)
+          
         },
         total_space() {
-            return this.humanFileSize(this.diskUsage.total_space)
+            return this.computedFileSize(this.diskUsage.total_space)
         },
     },
     watch: {