From 3b4f3c1b44ed9f4eb8234ed30f1233765fc940d5 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 3 Mar 2025 12:07:33 +0800
Subject: [PATCH] Add file size display and formatting to Lora modal

---
 py/routes/api_routes.py          |  1 +
 static/css/components/modal.css  | 33 ++++++++++++++++++++++++++
 static/js/components/LoraCard.js | 40 ++++++++++++++++++++++++++------
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/py/routes/api_routes.py b/py/routes/api_routes.py
index f6ea0346..e991bcbb 100644
--- a/py/routes/api_routes.py
+++ b/py/routes/api_routes.py
@@ -177,6 +177,7 @@ class ApiRoutes:
             "folder": lora["folder"],
             "sha256": lora["sha256"],
             "file_path": lora["file_path"].replace(os.sep, "/"),
+            "file_size": lora["size"],
             "modified": lora["modified"],
             "from_civitai": lora.get("from_civitai", True),
             "usage_tips": lora.get("usage_tips", ""),
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 274f4f93..9e0f5544 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -939,4 +939,37 @@ body.modal-open {
 .file-name-wrapper:hover i {
     opacity: 1;
     color: var(--lora-accent);
+}
+
+/* Location and Size combined styles */
+.info-item.location-size {
+    display: block;
+}
+
+/* Base Model and Size combined styles */
+.info-item.base-size {
+    display: flex;
+    gap: var(--space-3);
+}
+
+.base-wrapper {
+    flex: 2;  /* 分配更多空间给base model */
+}
+
+.size-wrapper {
+    flex: 1;
+    border-left: 1px solid var(--lora-border);
+    padding-left: var(--space-3);
+}
+
+.base-wrapper label,
+.size-wrapper label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.size-wrapper span {
+    font-family: monospace;
+    font-size: 0.9em;
+    opacity: 0.9;
 }
\ No newline at end of file
diff --git a/static/js/components/LoraCard.js b/static/js/components/LoraCard.js
index b0822a85..59c4b6f5 100644
--- a/static/js/components/LoraCard.js
+++ b/static/js/components/LoraCard.js
@@ -11,6 +11,7 @@ export function createLoraCard(lora) {
     card.dataset.file_name = lora.file_name;
     card.dataset.folder = lora.folder;
     card.dataset.modified = lora.modified;
+    card.dataset.file_size = lora.file_size;
     card.dataset.from_civitai = lora.from_civitai;
     card.dataset.base_model = lora.base_model;
     card.dataset.usage_tips = lora.usage_tips;
@@ -68,6 +69,7 @@ export function createLoraCard(lora) {
             file_name: card.dataset.file_name,
             folder: card.dataset.folder,
             modified: card.dataset.modified,
+            file_size: card.dataset.file_size,
             from_civitai: card.dataset.from_civitai === 'true',
             base_model: card.dataset.base_model,
             usage_tips: card.dataset.usage_tips,
@@ -154,13 +156,21 @@ export function showLoraModal(lora) {
                                 <i class="fas fa-copy" title="Copy file name"></i>
                             </div>
                         </div>
-                        <div class="info-item">
-                            <label>Location</label>
-                            <span class="file-path">${lora.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
+                        <div class="info-item location-size">
+                            <div class="location-wrapper">
+                                <label>Location</label>
+                                <span class="file-path">${lora.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
+                            </div>
                         </div>
-                        <div class="info-item">
-                            <label>Base Model</label>
-                            <span>${lora.base_model || 'N/A'}</span>
+                        <div class="info-item base-size">
+                            <div class="base-wrapper">
+                                <label>Base Model</label>
+                                <span>${lora.base_model || 'N/A'}</span>
+                            </div>
+                            <div class="size-wrapper">
+                                <label>Size</label>
+                                <span>${formatFileSize(lora.file_size)}</span>
+                            </div>
                         </div>
                         <div class="info-item usage-tips">
                             <label>Usage Tips</label>
@@ -545,4 +555,20 @@ window.removePreset = async function(key) {
     
     loraCard.dataset.usage_tips = newPresetsJson;
     document.querySelector('.preset-tags').innerHTML = renderPresetTags(currentPresets);
-};
\ No newline at end of file
+};
+
+// 添加文件大小格式化函数
+function formatFileSize(bytes) {
+    console.log('formatFileSize: ', bytes);
+    if (!bytes) return 'N/A';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
\ No newline at end of file