fix: improve progressbar appearence - make progressbar stats shared between all runs of plugin instance, not only local ones

Author: ivictbor

custom/imageGenerator.vue

@@ -50,7 +50,7 @@
                       :minValue="0"
                       :maxValue="historicalAverage"
                       :showValues="false"
-                      :progressFormatter="(value: number, percentage: number) => `${ formatTime(loadingTimer) } ( ${ Math.floor( (
+                      :progressFormatter="(value: number, percentage: number) => `${ formatTime(loadingTimer) } ( ~ ${ Math.floor( (
                         loadingTimer < historicalAverage ? loadingTimer : historicalAverage
                       ) / historicalAverage * 100) }% )`"
                     />
@@ -252,15 +252,10 @@ async function confirmImage() {
 
 const loadingTimer: Ref<number | null> = ref(null);
 
-const historicalRuns: Ref<number[]> = ref([]);
 
 const errorMessage: Ref<string | null> = ref(null);
 
-const historicalAverage: Ref<number | null> = computed(() => {
-  if (historicalRuns.value.length === 0) return null;
-  const sum = historicalRuns.value.reduce((a, b) => a + b, 0);
-  return Math.floor(sum / historicalRuns.value.length);
-});
+const historicalAverage: Ref<number | null> = ref(null);
 
 
 function formatTime(seconds: number): string {
@@ -269,6 +264,14 @@ function formatTime(seconds: number): string {
 }
 
 
+async function getHistoricalAverage() {
+  const resp = await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/averageDuration`,
+    method: 'GET',
+  });
+  historicalAverage.value = resp?.averageDuration || null;
+}
+
 async function generateImages() {
   errorMessage.value = null;
   loading.value = true;
@@ -279,7 +282,8 @@ async function generateImages() {
     loadingTimer.value = elapsed;
   }, 100);
   const currentIndex = caurosel.value?.getActiveItem()?.position || 0;
-  
+
+  await getHistoricalAverage();
   let resp = null;
   let error = null;
   try {
@@ -294,7 +298,6 @@ async function generateImages() {
   } catch (e) {
     console.error(e);
   } finally {
-    historicalRuns.value.push(loadingTimer.value);
     clearInterval(ticker);
     loadingTimer.value = null;
     loading.value = false;
@@ -330,12 +333,17 @@ async function generateImages() {
   // ];
   await nextTick();
 
+
   caurosel.value = new Carousel(
     document.getElementById('gallery'), 
-    images.value.map((img, index) => ({
-      el: document.getElementById('gallery').querySelector(`[data-carousel-item]:nth-child(${index + 1})`),
-      position: index,
-    })),
+    images.value.map((img, index) => {
+      console.log('mapping image', img, index);
+      return {
+        image: img,
+        el: document.getElementById('gallery').querySelector(`[data-carousel-item]:nth-child(${index + 1})`),
+        position: index,
+      };
+    }),
     {
       internal: 0,
       defaultPosition: currentIndex,
@@ -345,6 +353,7 @@ async function generateImages() {
     }
   );
   await nextTick();
+  
   loading.value = false;
 }
 

index.ts

@@ -13,9 +13,16 @@ export default class UploadPlugin extends AdminForthPlugin {
 
   adminforth!: IAdminForth;
 
+  totalCalls: number;
+  totalDuration: number;
+
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
+
+    // for calcualting average time
+    this.totalCalls = 0;
+    this.totalDuration = 0;
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {
@@ -390,8 +397,21 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
     // called here because modifyResourceConfig can be called in build time where there is no environment and AWS secrets
     this.setupLifecycleRule();
   }
+  
 
   setupEndpoints(server: IHttpServer) {
+    server.endpoint({
+      method: 'GET',
+      path: `/plugin/${this.pluginInstanceId}/averageDuration`,
+      handler: async () => {
+        return {
+          totalCalls: this.totalCalls,
+          totalDuration: this.totalDuration,
+          averageDuration: this.totalCalls ? this.totalDuration / this.totalCalls : null,
+        };
+      }
+    });
+
     server.endpoint({
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/get_s3_upload_url`,
@@ -527,6 +547,7 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
               await new Promise((resolve) => setTimeout(resolve, 2000));
               return `https://picsum.photos/200/300?random=${Math.floor(Math.random() * 1000)}`;
             }
+            const start = +new Date();
             const resp = await this.options.generation.adapter.generate(
               {
                 prompt,
@@ -541,6 +562,9 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
               error = resp.error;
               return;
             }
+
+            this.totalCalls++;
+            this.totalDuration += (+new Date() - start) / 1000;
 
             return resp.imageURLs[0]