feat: implement upload speed calculation and ETA estimation (#2677)

frontend/src/api/tus.js

@@ -6,6 +6,11 @@ import { fetchURL } from "./utils";
 
 const RETRY_BASE_DELAY = 1000;
 const RETRY_MAX_DELAY = 20000;
+const SPEED_UPDATE_INTERVAL = 1000;
+const ALPHA = 0.2;
+const ONE_MINUS_ALPHA = 1 - ALPHA;
+const RECENT_SPEEDS_LIMIT = 5;
+const MB_DIVISOR = 1024 * 1024;
 const CURRENT_UPLOAD_LIST = {};
 
 export async function upload(
@@ -35,23 +40,48 @@ export async function upload(
         "X-Auth": store.state.jwt,
       },
       onError: function (error) {
+        if (CURRENT_UPLOAD_LIST[filePath].interval) {
+          clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
+        }
         delete CURRENT_UPLOAD_LIST[filePath];
         reject("Upload failed: " + error);
       },
       onProgress: function (bytesUploaded) {
-        // Emulate ProgressEvent.loaded which is used by calling functions
-        // loaded is specified in bytes (https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent/loaded)
+        let fileData = CURRENT_UPLOAD_LIST[filePath];
+        fileData.currentBytesUploaded = bytesUploaded;
+
+        if (!fileData.hasStarted) {
+          fileData.hasStarted = true;
+          fileData.lastProgressTimestamp = Date.now();
+
+          fileData.interval = setInterval(() => {
+            calcProgress(filePath);
+          }, SPEED_UPDATE_INTERVAL);
+        }
         if (typeof onupload === "function") {
           onupload({ loaded: bytesUploaded });
         }
       },
       onSuccess: function () {
+        if (CURRENT_UPLOAD_LIST[filePath].interval) {
+          clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
+        }
         delete CURRENT_UPLOAD_LIST[filePath];
         resolve();
       },
     });
+    CURRENT_UPLOAD_LIST[filePath] = {
+      upload: upload,
+      recentSpeeds: [],
+      initialBytesUploaded: 0,
+      currentBytesUploaded: 0,
+      currentAverageSpeed: 0,
+      lastProgressTimestamp: null,
+      sumOfRecentSpeeds: 0,
+      hasStarted: false,
+      interval: null,
+    };
     upload.start();
-    CURRENT_UPLOAD_LIST[filePath] = upload;
   });
 }
 
@@ -93,20 +123,73 @@ function isTusSupported() {
   return tus.isSupported === true;
 }
 
-export function abortUpload(filePath) {
-  const upload = CURRENT_UPLOAD_LIST[filePath];
-  if (upload) {
-    upload.abort();
-    delete CURRENT_UPLOAD_LIST[filePath];
+function computeETA(state) {
+  if (state.speedMbyte === 0) {
+    return Infinity;
   }
+  const totalSize = state.sizes.reduce((acc, size) => acc + size, 0);
+  const uploadedSize = state.progress.reduce(
+    (acc, progress) => acc + progress,
+    0
+  );
+  const remainingSize = totalSize - uploadedSize;
+  const speedBytesPerSecond = state.speedMbyte * 1024 * 1024;
+  return remainingSize / speedBytesPerSecond;
+}
+
+function computeGlobalSpeedAndETA() {
+  let totalSpeed = 0;
+  let totalCount = 0;
+
+  for (let filePath in CURRENT_UPLOAD_LIST) {
+    totalSpeed += CURRENT_UPLOAD_LIST[filePath].currentAverageSpeed;
+    totalCount++;
+  }
+
+  if (totalCount === 0) return { speed: 0, eta: Infinity };
+
+  const averageSpeed = totalSpeed / totalCount;
+  const averageETA = computeETA(store.state.upload, averageSpeed);
+
+  return { speed: averageSpeed, eta: averageETA };
+}
+
+function calcProgress(filePath) {
+  let fileData = CURRENT_UPLOAD_LIST[filePath];
+
+  let elapsedTime = (Date.now() - fileData.lastProgressTimestamp) / 1000;
+  let bytesSinceLastUpdate =
+    fileData.currentBytesUploaded - fileData.initialBytesUploaded;
+  let currentSpeed = bytesSinceLastUpdate / MB_DIVISOR / elapsedTime;
+
+  if (fileData.recentSpeeds.length >= RECENT_SPEEDS_LIMIT) {
+    fileData.sumOfRecentSpeeds -= fileData.recentSpeeds.shift();
+  }
+
+  fileData.recentSpeeds.push(currentSpeed);
+  fileData.sumOfRecentSpeeds += currentSpeed;
+
+  let avgRecentSpeed =
+    fileData.sumOfRecentSpeeds / fileData.recentSpeeds.length;
+  fileData.currentAverageSpeed =
+    ALPHA * avgRecentSpeed + ONE_MINUS_ALPHA * fileData.currentAverageSpeed;
+
+  const { speed, eta } = computeGlobalSpeedAndETA();
+  store.commit("setUploadSpeed", speed);
+  store.commit("setETA", eta);
+
+  fileData.initialBytesUploaded = fileData.currentBytesUploaded;
+  fileData.lastProgressTimestamp = Date.now();
 }
 
 export function abortAllUploads() {
   for (let filePath in CURRENT_UPLOAD_LIST) {
-    const upload = CURRENT_UPLOAD_LIST[filePath];
-    if (upload) {
-      upload.abort();
-      delete CURRENT_UPLOAD_LIST[filePath];
+    if (CURRENT_UPLOAD_LIST[filePath].interval) {
+      clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
     }
+    if (CURRENT_UPLOAD_LIST[filePath].upload) {
+      CURRENT_UPLOAD_LIST[filePath].upload.abort(true);
+    }
+    delete CURRENT_UPLOAD_LIST[filePath];
   }
 }

frontend/src/components/prompts/UploadFiles.vue

@@ -7,13 +7,17 @@
     <div class="card floating">
       <div class="card-title">
         <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
+        <div class="upload-info">
+          <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
+          <div class="upload-eta">{{ formattedETA }} remaining</div>
+        </div>
         <button
           class="action"
           @click="abortAll"
           aria-label="Abort upload"
           title="Abort upload"
         >
-        <i class="material-icons">{{ "cancel" }}</i>
+          <i class="material-icons">{{ "cancel" }}</i>
         </button>
         <button
           class="action"
@@ -61,19 +65,39 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["filesInUpload", "filesInUploadCount"]),
-    ...mapMutations(['resetUpload']),
+    ...mapGetters([
+      "filesInUpload",
+      "filesInUploadCount",
+      "uploadSpeed",
+      "eta",
+    ]),
+    ...mapMutations(["resetUpload"]),
+    formattedETA() {
+      if (!this.eta || this.eta === Infinity) {
+        return "--:--:--";
+      }
+
+      let totalSeconds = this.eta;
+      const hours = Math.floor(totalSeconds / 3600);
+      totalSeconds %= 3600;
+      const minutes = Math.floor(totalSeconds / 60);
+      const seconds = Math.round(totalSeconds % 60);
+
+      return `${hours.toString().padStart(2, "0")}:${minutes
+        .toString()
+        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    },
   },
   methods: {
     toggle: function () {
       this.open = !this.open;
     },
     abortAll() {
-      if (confirm(this.$t('upload.abortUpload'))) {
+      if (confirm(this.$t("upload.abortUpload"))) {
         abortAllUploads();
-        buttons.done('upload');
+        buttons.done("upload");
         this.open = false;
-        this.$store.commit('resetUpload');
+        this.$store.commit("resetUpload");
         this.$store.commit("setReload", true);
       }
     },

frontend/src/store/getters.js

@@ -49,6 +49,8 @@ const getters = {
   currentPromptName: (_, getters) => {
     return getters.currentPrompt?.prompt;
   },
+  uploadSpeed: (state) => state.upload.speedMbyte,
+  eta: (state) => state.upload.eta,
 };
 
 export default getters;

frontend/src/store/modules/upload.js

@@ -11,6 +11,8 @@ const state = {
   progress: [],
   queue: [],
   uploads: {},
+  speedMbyte: 0,
+  eta: 0,
 };
 
 const mutations = {

frontend/src/store/mutations.js

@@ -97,12 +97,20 @@ const mutations = {
     state.clipboard.key = "";
     state.clipboard.items = [];
   },
+  setUploadSpeed: (state, value) => {
+    state.upload.speedMbyte = value;
+  },
+  setETA(state, value) {
+    state.upload.eta = value;
+  },
   resetUpload(state) {
     state.upload.uploads = {};
     state.upload.queue = [];
     state.upload.progress = [];
     state.upload.sizes = [];
     state.upload.id = 0;
+    state.upload.speedMbyte = 0;
+    state.upload.eta = 0;
   },
 };