fix(ui): Update duration if inference finishes with window out of focus

static/index.js

@@ -161,6 +161,32 @@ const longPollTask = async (task, interval = 5_000, max) => {
 
 const generateButton = document.querySelector('button.generate');
 
+const durationTimer = () => {
+  let duration = 0.0;
+
+  return (secondsElement) => {
+    const startTime = performance.now();
+
+    const incrementSeconds = setInterval(() => {
+      duration += 0.1;
+      secondsElement.textContent = duration.toFixed(1);
+    }, 100);
+
+    const updateDuration = () => (duration = Number(((performance.now() - startTime) / 1000).toFixed(1)));
+
+    window.addEventListener('focus', updateDuration);
+
+    return {
+      cleanup: () => {
+        updateDuration();
+        clearInterval(incrementSeconds);
+        window.removeEventListener('focus', updateDuration);
+        secondsElement.textContent = duration.toFixed(1);
+      },
+    };
+  };
+};
+
 const rotateCard = () => {
   const RANGE = 0.1;
   const INTERVAL = 13; // ~75 per second
@@ -205,33 +231,21 @@ const cardRotationInitiator = (renderSection) => {
 };
 
 generateButton.addEventListener('click', async () => {
-  const details = await generateDetails();
-
   const renderSection = document.querySelector('section.render');
   const durationSeconds = document.querySelector('.duration > .seconds');
   const initialiseCardRotation = cardRotationInitiator(renderSection);
-  let duration = 0.0;
 
   try {
+    const details = await generateDetails();
     const task = await createTask(details.energy_type);
-
     queueTask(task.task_id);
 
-    const startTime = performance.now();
-
-    const incrementSeconds = setInterval(() => {
-      console.log(typeof duration);
-      duration += 0.1;
-      durationSeconds.textContent = duration.toFixed(1);
-    }, 100);
-
-    window.addEventListener('focus', () => {
-      duration = Number(((performance.now() - startTime) / 1000).toFixed(1));
-    });
+    const timer = durationTimer();
+    const cleanupTimer = timer(durationSeconds).cleanup;
 
     const completedTask = await longPollTask(task);
 
-    clearInterval(incrementSeconds);
+    cleanupTimer();
 
     renderSection.innerHTML = cardHTML(details);