Merge pull request #60 from Unity-Lab-AI/codex/add-background-job-for-image-request-tracking

Add background polling to resolve placeholder images

Author: hackall360

js/ui/imagePoller.js

@@ -0,0 +1,62 @@
+import { image as polliImage } from '../polliLib/src/image.js';
+
+let imageFn = polliImage;
+let pollIntervalMs = 2000;
+let timeoutMs = 20000;
+let fallbackSrc = 'https://via.placeholder.com/512?text=Image+Unavailable';
+
+const pending = new Map();
+let timer = null;
+
+export function trackPlaceholder(img, { prompt, model, width, height } = {}) {
+    if (!img) return;
+    pending.set(img, { prompt, model, width, height, start: Date.now() });
+    if (!timer) {
+        timer = setInterval(() => {
+            checkPending().catch(() => {});
+        }, pollIntervalMs);
+    }
+}
+
+async function checkPending() {
+    for (const [img, info] of pending) {
+        if (Date.now() - info.start > timeoutMs) {
+            img.src = fallbackSrc;
+            img.classList?.remove?.('placeholder');
+            pending.delete(img);
+            continue;
+        }
+        try {
+            const data = await imageFn(info.prompt, { model: info.model, width: info.width, height: info.height, json: true });
+            if (data && data.url) {
+                img.src = data.url;
+                img.classList?.remove?.('placeholder');
+                pending.delete(img);
+            }
+        } catch (err) {
+            img.src = fallbackSrc;
+            img.classList?.remove?.('placeholder');
+            pending.delete(img);
+        }
+    }
+    if (pending.size === 0 && timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+}
+
+export function _setImageFn(fn) {
+    imageFn = fn;
+}
+
+export function _configure({ intervalMs, timeout, fallback } = {}) {
+    if (intervalMs != null) pollIntervalMs = intervalMs;
+    if (timeout != null) timeoutMs = timeout;
+    if (fallback != null) fallbackSrc = fallback;
+    if (timer) {
+        clearInterval(timer);
+        timer = setInterval(() => {
+            checkPending().catch(() => {});
+        }, pollIntervalMs);
+    }
+}

tests/site-image-poller.mjs

@@ -0,0 +1,31 @@
+import assert from 'assert/strict';
+import { trackPlaceholder, _configure, _setImageFn } from '../js/ui/imagePoller.js';
+
+let calls = 0;
+_setImageFn(async () => {
+    calls++;
+    if (calls === 1) return {}; // still pending
+    return { url: 'https://example.com/final.png' };
+});
+
+_configure({ intervalMs: 5, timeout: 100 });
+
+const img = {
+    src: 'about:blank',
+    classList: {
+        set: new Set(['placeholder']),
+        remove(cls) { this.set.delete(cls); },
+        contains(cls) { return this.set.has(cls); }
+    }
+};
+
+trackPlaceholder(img, { prompt: 'test', model: 'foo' });
+
+// wait long enough for two polling cycles
+await new Promise(r => setTimeout(r, 30));
+await new Promise(r => setTimeout(r, 30));
+
+assert.equal(img.src, 'https://example.com/final.png');
+assert.equal(img.classList.contains('placeholder'), false);
+
+console.log('image-poller test passed');