Add file size display and formatting to Lora modal

This commit is contained in:
Will Miao
2025-03-03 12:07:33 +08:00
parent db5d479c0e
commit 3b4f3c1b44
3 changed files with 67 additions and 7 deletions

View File

@@ -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", ""),

View File

@@ -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;
}

View File

@@ -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);
};
};
// 添加文件大小格式化函数
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]}`;
}