feat(download): enhance download progress ui with transfer stats

2026-03-21 21:22:11 -03:00 · 2025-10-13 19:06:32 +08:00
parent 5e441d9c4f
commit 60d23aa238
14 changed files with 202 additions and 8 deletions
--- a/locales/de.json
+++ b/locales/de.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "Vorschaubild heruntergeladen",
                "downloadingFile": "{type}-Datei wird heruntergeladen",
                "finalizing": "Download wird abgeschlossen..."
+            },
+            "progress": {
+                "currentFile": "Aktuelle Datei:",
+                "downloading": "Wird heruntergeladen: {name}",
+                "transferred": "Heruntergeladen: {downloaded} / {total}",
+                "transferredSimple": "Heruntergeladen: {downloaded}",
+                "transferredUnknown": "Heruntergeladen: --",
+                "speed": "Geschwindigkeit: {speed}"
            }
        },
        "move": {
--- a/locales/en.json
+++ b/locales/en.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "Downloaded preview image",
                "downloadingFile": "Downloading {type} file",
                "finalizing": "Finalizing download..."
+            },
+            "progress": {
+                "currentFile": "Current file:",
+                "downloading": "Downloading: {name}",
+                "transferred": "Transferred: {downloaded} / {total}",
+                "transferredSimple": "Transferred: {downloaded}",
+                "transferredUnknown": "Transferred: --",
+                "speed": "Speed: {speed}"
            }
        },
        "move": {
--- a/locales/es.json
+++ b/locales/es.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "Imagen de vista previa descargada",
                "downloadingFile": "Descargando archivo de {type}",
                "finalizing": "Finalizando descarga..."
+            },
+            "progress": {
+                "currentFile": "Archivo actual:",
+                "downloading": "Descargando: {name}",
+                "transferred": "Descargado: {downloaded} / {total}",
+                "transferredSimple": "Descargado: {downloaded}",
+                "transferredUnknown": "Descargado: --",
+                "speed": "Velocidad: {speed}"
            }
        },
        "move": {
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "Image d'aperçu téléchargée",
                "downloadingFile": "Téléchargement du fichier {type}",
                "finalizing": "Finalisation du téléchargement..."
+            },
+            "progress": {
+                "currentFile": "Fichier actuel :",
+                "downloading": "Téléchargement : {name}",
+                "transferred": "Téléchargé : {downloaded} / {total}",
+                "transferredSimple": "Téléchargé : {downloaded}",
+                "transferredUnknown": "Téléchargé : --",
+                "speed": "Vitesse : {speed}"
            }
        },
        "move": {
--- a/locales/he.json
+++ b/locales/he.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "תמונת תצוגה מקדימה הורדה",
                "downloadingFile": "מוריד קובץ {type}",
                "finalizing": "מסיים הורדה..."
+            },
+            "progress": {
+                "currentFile": "הקובץ הנוכחי:",
+                "downloading": "מוריד: {name}",
+                "transferred": "הורד: {downloaded} / {total}",
+                "transferredSimple": "הורד: {downloaded}",
+                "transferredUnknown": "הורד: --",
+                "speed": "מהירות: {speed}"
            }
        },
        "move": {
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "プレビュー画像をダウンロードしました",
                "downloadingFile": "{type}ファイルをダウンロード中",
                "finalizing": "ダウンロードを完了中..."
+            },
+            "progress": {
+                "currentFile": "現在のファイル:",
+                "downloading": "ダウンロード中: {name}",
+                "transferred": "ダウンロード済み: {downloaded} / {total}",
+                "transferredSimple": "ダウンロード済み: {downloaded}",
+                "transferredUnknown": "ダウンロード済み: --",
+                "speed": "速度: {speed}"
            }
        },
        "move": {
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "미리보기 이미지 다운로드됨",
                "downloadingFile": "{type} 파일 다운로드 중",
                "finalizing": "다운로드 완료 중..."
+            },
+            "progress": {
+                "currentFile": "현재 파일:",
+                "downloading": "다운로드 중: {name}",
+                "transferred": "다운로드됨: {downloaded} / {total}",
+                "transferredSimple": "다운로드됨: {downloaded}",
+                "transferredUnknown": "다운로드됨: --",
+                "speed": "속도: {speed}"
            }
        },
        "move": {
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "Превью изображение загружено",
                "downloadingFile": "Загрузка файла {type}",
                "finalizing": "Завершение загрузки..."
+            },
+            "progress": {
+                "currentFile": "Текущий файл:",
+                "downloading": "Скачивается: {name}",
+                "transferred": "Скачано: {downloaded} / {total}",
+                "transferredSimple": "Скачано: {downloaded}",
+                "transferredUnknown": "Скачано: --",
+                "speed": "Скорость: {speed}"
            }
        },
        "move": {
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "预览图片已下载",
                "downloadingFile": "正在下载 {type} 文件",
                "finalizing": "正在完成下载..."
+            },
+            "progress": {
+                "currentFile": "当前文件：",
+                "downloading": "下载中：{name}",
+                "transferred": "已下载：{downloaded} / {total}",
+                "transferredSimple": "已下载：{downloaded}",
+                "transferredUnknown": "已下载：--",
+                "speed": "速度：{speed}"
            }
        },
        "move": {
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -637,6 +637,14 @@
                "downloadedPreview": "已下載預覽圖片",
                "downloadingFile": "正在下載 {type} 檔案",
                "finalizing": "完成下載中..."
+            },
+            "progress": {
+                "currentFile": "目前檔案：",
+                "downloading": "下載中：{name}",
+                "transferred": "已下載：{downloaded} / {total}",
+                "transferredSimple": "已下載：{downloaded}",
+                "transferredUnknown": "已下載：--",
+                "speed": "速度：{speed}"
            }
        },
        "move": {
--- a/static/css/components/loading.css
+++ b/static/css/components/loading.css
@@ -103,6 +103,23 @@
    opacity: 0.7;
 }

+.download-transfer-stats {
+    margin-top: var(--space-2);
+    font-size: 0.85rem;
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.download-transfer-stats .download-transfer-bytes,
+.download-transfer-stats .download-transfer-speed {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+}
+
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
@@ -114,4 +131,4 @@
    .current-item-bar {
        transition: none;
    }
-}
+}
--- a/static/js/managers/DownloadManager.js
+++ b/static/js/managers/DownloadManager.js
@@ -453,7 +453,13 @@ export class DownloadManager {
                }
                
                if (data.status === 'progress' && data.download_id === downloadId) {
-                    updateProgress(data.progress, 0, this.currentVersion.name);
+                    const metrics = {
+                        bytesDownloaded: data.bytes_downloaded,
+                        totalBytes: data.total_bytes,
+                        bytesPerSecond: data.bytes_per_second
+                    };
+
+                    updateProgress(data.progress, 0, this.currentVersion.name, metrics);
                    
                    if (data.progress < 3) {
                        this.loadingManager.setStatus(translate('modals.download.status.preparing'));
--- a/static/js/managers/LoadingManager.js
+++ b/static/js/managers/LoadingManager.js
@@ -1,3 +1,6 @@
+import { translate } from '../utils/i18nHelpers.js';
+import { formatFileSize } from '../utils/formatters.js';
+
 // Loading management
 export class LoadingManager {
    constructor() {
@@ -65,7 +68,7 @@ export class LoadingManager {
    
    // Show enhanced progress for downloads
    showDownloadProgress(totalItems = 1) {
-        this.show('Preparing download...', 0);
+        this.show(translate('modals.download.status.preparing', {}, 'Preparing download...'), 0);
        
        // Create details container
        const detailsContainer = this.createDetailsContainer();
@@ -76,7 +79,7 @@ export class LoadingManager {
        
        const currentItemLabel = document.createElement('div');
        currentItemLabel.className = 'current-item-label';
-        currentItemLabel.textContent = 'Current file:';
+        currentItemLabel.textContent = translate('modals.download.progress.currentFile', {}, 'Current file:');
        
        const currentItemBar = document.createElement('div');
        currentItemBar.className = 'current-item-bar-container';
@@ -105,16 +108,96 @@ export class LoadingManager {
        
        // Add current item progress to container
        detailsContainer.appendChild(currentItemContainer);
+
+        // Create transfer stats container
+        const transferStats = document.createElement('div');
+        transferStats.className = 'download-transfer-stats';
+
+        const bytesDetail = document.createElement('div');
+        bytesDetail.className = 'download-transfer-bytes';
+        bytesDetail.textContent = translate(
+            'modals.download.progress.transferredUnknown',
+            {},
+            'Transferred: --'
+        );
+
+        const speedDetail = document.createElement('div');
+        speedDetail.className = 'download-transfer-speed';
+        speedDetail.textContent = translate(
+            'modals.download.progress.speed',
+            { speed: '--' },
+            'Speed: --'
+        );
+
+        transferStats.appendChild(bytesDetail);
+        transferStats.appendChild(speedDetail);
+        detailsContainer.appendChild(transferStats);
+
+        const formatMetricSize = (value) => {
+            if (value === undefined || value === null || isNaN(value)) {
+                return '--';
+            }
+            if (value < 1) {
+                return '0 B';
+            }
+            return formatFileSize(value);
+        };
+
+        const updateTransferStats = (metrics = {}) => {
+            const { bytesDownloaded, totalBytes, bytesPerSecond } = metrics;
+
+            if (bytesDetail) {
+                const formattedDownloaded = formatMetricSize(bytesDownloaded);
+                const formattedTotal = formatMetricSize(totalBytes);
+
+                if (formattedDownloaded === '--' && formattedTotal === '--') {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferredUnknown',
+                        {},
+                        'Transferred: --'
+                    );
+                } else if (formattedTotal === '--') {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferredSimple',
+                        { downloaded: formattedDownloaded },
+                        `Transferred: ${formattedDownloaded}`
+                    );
+                } else {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferred',
+                        { downloaded: formattedDownloaded, total: formattedTotal },
+                        `Transferred: ${formattedDownloaded} / ${formattedTotal}`
+                    );
+                }
+            }
+
+            if (speedDetail) {
+                const formattedSpeed = formatMetricSize(bytesPerSecond);
+                const displaySpeed = formattedSpeed === '--' ? '--' : `${formattedSpeed}/s`;
+                speedDetail.textContent = translate(
+                    'modals.download.progress.speed',
+                    { speed: displaySpeed },
+                    `Speed: ${displaySpeed}`
+                );
+            }
+        };
+
+        // Initialize transfer stats with empty data
+        updateTransferStats();
        
        // Return update function
-        return (currentProgress, currentIndex = 0, currentName = '') => {
+        return (currentProgress, currentIndex = 0, currentName = '', metrics = {}) => {
            // Update current item progress
            currentItemProgress.style.width = `${currentProgress}%`;
            currentItemPercent.textContent = `${Math.floor(currentProgress)}%`;
            
            // Update current item label if name provided
            if (currentName) {
-                currentItemLabel.textContent = `Downloading: ${currentName}`;
+                currentItemLabel.textContent = translate(
+                    'modals.download.progress.downloading',
+                    { name: currentName },
+                    `Downloading: ${currentName}`
+                );
            }
            
            // Update overall label if multiple items
@@ -128,6 +211,8 @@ export class LoadingManager {
                // Single item, just update main progress
                this.setProgress(currentProgress);
            }
+
+            updateTransferStats(metrics);
        };
    }

@@ -176,4 +261,4 @@ export class LoadingManager {
    restoreProgressBar() {
        this.progressBar.style.display = 'block';
    }
-}
+}
--- a/static/js/managers/import/DownloadManager.js
+++ b/static/js/managers/import/DownloadManager.js
@@ -164,7 +164,13 @@ export class DownloadManager {
                const loraName = currentLora ? currentLora.name : '';
                
                // Update progress display
-                updateProgress(currentLoraProgress, completedDownloads, loraName);
+                const metrics = {
+                    bytesDownloaded: data.bytes_downloaded,
+                    totalBytes: data.total_bytes,
+                    bytesPerSecond: data.bytes_per_second
+                };
+
+                updateProgress(currentLoraProgress, completedDownloads, loraName, metrics);
                
                // Add more detailed status messages based on progress
                if (currentLoraProgress < 3) {