← back to Exo
chore: Support multiple nodes download progress section in tinychat
53ea5767a18631b9c967c4c0fa46d0548f852042 · 2024-10-11 23:32:41 +0800 · Sean-fn
Refactor the download progress section in the tinychat index.html and index.js files to display multiple progress nodes. This improves the user experience and provides more detailed information about ongoing downloads.
Files touched
M exo/tinychat/index.htmlM exo/tinychat/index.js
Diff
commit 53ea5767a18631b9c967c4c0fa46d0548f852042
Author: Sean-fn <seanfang@gmail.com>
Date: Fri Oct 11 23:32:41 2024 +0800
chore: Support multiple nodes download progress section in tinychat
Refactor the download progress section in the tinychat index.html and index.js files to display multiple progress nodes. This improves the user experience and provides more detailed information about ongoing downloads.
---
exo/tinychat/index.html | 24 +++++++++++++--------
exo/tinychat/index.js | 57 +++++++++++++++++++++++++++----------------------
2 files changed, 46 insertions(+), 35 deletions(-)
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index e7e9227c..5dc75c5c 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -151,16 +151,22 @@
</div>
<!-- Download Progress Section -->
-<template x-if="downloadProgress">
-<div class="download-progress message message-role-assistant">
- <h2>Download Progress</h2>
- <div class="download-progress-node">
- <p><strong>Model:</strong> <span x-text="downloadProgress.repo_id + '@' + downloadProgress.repo_revision"></span></p>
- <p><strong>Progress:</strong> <span x-text="`${downloadProgress.downloaded_bytes_display} / ${downloadProgress.total_bytes_display} (${downloadProgress.percentage}%)`"></span></p>
- <p><strong>Speed:</strong> <span x-text="downloadProgress.overall_speed_display || 'N/A'"></span></p>
- <p><strong>ETA:</strong> <span x-text="downloadProgress.overall_eta_display || 'N/A'"></span></p>
+<template x-if="downloadProgress && downloadProgress.length > 0">
+ <div class="download-progress message message-role-assistant">
+ <h2>Download Progress</h2>
+ <br>
+ <template x-for="(progress, index) in downloadProgress" :key="index">
+ <div class="download-progress-node">
+ <br>
+ <h3 x-text="`Download ${index + 1}`"></h3>
+ <p><strong>Model:</strong> <span x-text="progress.repo_id + '@' + progress.repo_revision"></span></p>
+ <p><strong>Progress:</strong> <span x-text="`${progress.downloaded_bytes_display} / ${progress.total_bytes_display} (${progress.percentage}%)`"></span></p>
+ <p><strong>Speed:</strong> <span x-text="progress.overall_speed_display || 'N/A'"></span></p>
+ <p><strong>ETA:</strong> <span x-text="progress.overall_eta_display || 'N/A'"></span></p>
+ <p><strong>Status:</strong> <span x-text="progress.status"></span></p>
+ </div>
+ </template>
</div>
-</div>
</template>
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index 68a253a0..0fb6d0a9 100644
--- a/exo/tinychat/index.js
+++ b/exo/tinychat/index.js
@@ -311,34 +311,39 @@ document.addEventListener("alpine:init", () => {
const data = await response.json();
const progressArray = Object.values(data);
if (progressArray.length > 0) {
- const progress = progressArray[0];
- // Check if download is complete
- if (progress.status === "complete" || progress.status === "failed") {
- this.downloadProgress = null; // Hide the progress section
-
- if (progress.status === "complete") {
- // Download is complete
- // Check for pendingMessage
- const savedMessage = localStorage.getItem("pendingMessage");
- if (savedMessage) {
- // Clear pendingMessage
- localStorage.removeItem("pendingMessage");
- // Call processMessage() with savedMessage
- if (this.lastErrorMessage) {
- await this.processMessage(savedMessage);
- }
+ this.downloadProgress = progressArray.map(progress => {
+ // Check if download is complete
+ if (progress.status === "complete" || progress.status === "failed") {
+ return {
+ ...progress,
+ isComplete: true,
+ percentage: 100
+ };
+ } else {
+ return {
+ ...progress,
+ isComplete: false,
+ downloaded_bytes_display: this.formatBytes(progress.downloaded_bytes),
+ total_bytes_display: this.formatBytes(progress.total_bytes),
+ overall_speed_display: progress.overall_speed ? this.formatBytes(progress.overall_speed) + '/s' : '',
+ overall_eta_display: progress.overall_eta ? this.formatDuration(progress.overall_eta) : '',
+ percentage: ((progress.downloaded_bytes / progress.total_bytes) * 100).toFixed(2)
+ };
+ }
+ });
+ const allComplete = this.downloadProgress.every(progress => progress.isComplete);
+ if (allComplete) {
+ // Check for pendingMessage
+ const savedMessage = localStorage.getItem("pendingMessage");
+ if (savedMessage) {
+ // Clear pendingMessage
+ localStorage.removeItem("pendingMessage");
+ // Call processMessage() with savedMessage
+ if (this.lastErrorMessage) {
+ await this.processMessage(savedMessage);
}
- this.lastErrorMessage = null;
}
- } else {
- // Compute human-readable strings
- progress.downloaded_bytes_display = this.formatBytes(progress.downloaded_bytes);
- progress.total_bytes_display = this.formatBytes(progress.total_bytes);
- progress.overall_speed_display = progress.overall_speed ? this.formatBytes(progress.overall_speed) + '/s' : '';
- progress.overall_eta_display = progress.overall_eta ? this.formatDuration(progress.overall_eta) : '';
- progress.percentage = ((progress.downloaded_bytes / progress.total_bytes) * 100).toFixed(2);
-
- this.downloadProgress = progress;
+ this.lastErrorMessage = null;
}
} else {
// No ongoing download
← 07305323 fix: tokenize
·
back to Exo
·
Modify download progress section in tinychat index.css 83459b77 →