From de3e2a9693e4ba47263f3630a31c40b335e9f7c0 Mon Sep 17 00:00:00 2001
From: Christian Bastian <80225746+cdb-boop@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:53:15 -0400
Subject: [PATCH] Added approximate file size to download button when
 available.

---
 web/model-manager.css |  4 ++++
 web/model-manager.js  | 25 ++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/web/model-manager.css b/web/model-manager.css
index a91ddb8..ee28e02 100644
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -337,6 +337,10 @@
     row-gap: 16px;
 }
 
+.model-manager .download-button {
+    max-width: fit-content;
+}
+
 /* models tab */
 .model-manager [data-name="Models"] .row {
     position: sticky;
diff --git a/web/model-manager.js b/web/model-manager.js
index ceb00a3..ae0f8a3 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -3157,6 +3157,28 @@ class DownloadView {
         return null;
     }
     
+    /**
+     * Returns empty string on failure
+     * @param {float | undefined} fileSizeKB 
+     * @returns {string}
+     */
+    static #fileSizeToFormattedString(fileSizeKB) {
+        if (fileSizeKB === undefined) { return ""; }
+        const sizes = ["KB", "MB", "GB", "TB", "PB"];
+        let fileSizeString = fileSizeKB.toString();
+        const index = fileSizeString.indexOf(".");
+        const indexMove = index % 3 === 0 ? 3 : index % 3;
+        const sizeIndex = Math.floor((index - indexMove) / 3);
+        if (sizeIndex >= sizes.length || sizeIndex < 0) {
+            fileSizeString = fileSizeString.substring(0, fileSizeString.indexOf(".") + 3);
+            return `(${fileSizeString} ${sizes[0]})`;
+        }
+        const split = fileSizeString.split(".");
+        fileSizeString = split[0].substring(0, indexMove) + "." + split[0].substring(indexMove) + split[1];
+        fileSizeString = fileSizeString.substring(0, fileSizeString.indexOf(".") + 3);
+        return `(${fileSizeString} ${sizes[sizeIndex]})`;
+    }
+    
     /**
      * @param {Object} info
      * @param {ModelData} modelData
@@ -3221,7 +3243,8 @@ class DownloadView {
                         new ComfyButton({
                             icon: "arrow-collapse-down",
                             tooltip: "Download model",
-                            classList: "comfyui-button icon-button",
+                            content: "Download " + DownloadView.#fileSizeToFormattedString(info["details"]["fileSizeKB"]),
+                            classList: "comfyui-button download-button",
                             action: async (e) => {
                                 const pathDirectory = el_saveDirectoryPath.value;
                                 const modelName = (() => {