From a6cc176f17249b8687154d05eac388c0e40d7f88 Mon Sep 17 00:00:00 2001 From: Hackall <36754621+hackall360@users.noreply.github.com> Date: Sat, 13 Sep 2025 04:44:27 -0700 Subject: [PATCH] feat: add shared polli image helper --- chat-storage.js | 94 +++++++++++++++-------------------------------- index.html | 11 +++--- polli-utils.js | 51 +++++++++++++++++++++++++ simple.js | 98 ++++++++++++++++--------------------------------- 4 files changed, 117 insertions(+), 137 deletions(-) create mode 100644 polli-utils.js diff --git a/chat-storage.js b/chat-storage.js index a7254c2..ad5e8b8 100644 --- a/chat-storage.js +++ b/chat-storage.js @@ -334,73 +334,37 @@ document.addEventListener("DOMContentLoaded", () => { showToast("Failed to download image: " + err.message); }); } - function refreshImage(img, imageId) { - console.log(`Refreshing image with ID: ${imageId}`); - if (!img.src) { - showToast("No image source to refresh."); - return; - } - const urlObj = new URL(img.src); - if (!window.polliClient || !window.polliClient.imageBase) { - showToast("Image client not ready."); + function refreshImage(img, imageId) { + console.log(`Refreshing image with ID: ${imageId}`); + const { url: finalUrl, error } = window.refreshPolliImage(img?.src, { + width: img.naturalWidth, + height: img.naturalHeight, + }); + if (!finalUrl) { + showToast(error || "Failed to refresh image"); return; } - const baseOrigin = new URL(window.polliClient.imageBase).origin; - if (urlObj.origin !== baseOrigin) { - showToast("Can't refresh: not a polliLib image URL."); - return; - } - const newSeed = Math.floor(Math.random() * 1000000); - let prompt = ''; - try { - const parts = urlObj.pathname.split('/'); - const i = parts.indexOf('prompt'); - if (i >= 0 && parts[i+1]) prompt = decodeURIComponent(parts[i+1]); - } catch {} - const width = Number(urlObj.searchParams.get('width')) || img.naturalWidth || 512; - const height = Number(urlObj.searchParams.get('height')) || img.naturalHeight || 512; - const model = urlObj.searchParams.get('model') || (document.getElementById('model-select')?.value || undefined); - let newUrl = img.src; - try { - if (window.polliLib && window.polliClient && prompt) { - newUrl = window.polliLib.mcp.generateImageUrl(window.polliClient, { - prompt, width, height, seed: newSeed, nologo: true, model - }); - } else { - urlObj.searchParams.set('seed', String(newSeed)); - newUrl = urlObj.toString(); - } - } catch (e) { - console.warn('polliLib generateImageUrl failed; falling back to seed swap', e); - urlObj.searchParams.set('seed', String(newSeed)); - newUrl = urlObj.toString(); - } - const newUrlObj = new URL(newUrl); - if (!newUrlObj.searchParams.has('referrer') && window.polliClient?.referrer) { - newUrlObj.searchParams.set('referrer', window.polliClient.referrer); // retain referrer for API tiering - } - const finalUrl = newUrlObj.toString(); - const loadingDiv = document.createElement("div"); - loadingDiv.className = "ai-image-loading"; - const spinner = document.createElement("div"); - spinner.className = "loading-spinner"; - loadingDiv.appendChild(spinner); - loadingDiv.style.width = img.width + "px"; - loadingDiv.style.height = img.height + "px"; - img.parentNode.insertBefore(loadingDiv, img); - img.style.display = "none"; - img.onload = () => { - loadingDiv.remove(); - img.style.display = "block"; - showToast("Image refreshed with new seed"); - }; - img.onerror = () => { - loadingDiv.innerHTML = "⚠️ Failed to refresh image"; - loadingDiv.style.display = "flex"; - loadingDiv.style.justifyContent = "center"; - loadingDiv.style.alignItems = "center"; - showToast("Failed to refresh image"); - }; + const loadingDiv = document.createElement("div"); + loadingDiv.className = "ai-image-loading"; + const spinner = document.createElement("div"); + spinner.className = "loading-spinner"; + loadingDiv.appendChild(spinner); + loadingDiv.style.width = img.width + "px"; + loadingDiv.style.height = img.height + "px"; + img.parentNode.insertBefore(loadingDiv, img); + img.style.display = "none"; + img.onload = () => { + loadingDiv.remove(); + img.style.display = "block"; + showToast("Image refreshed with new seed"); + }; + img.onerror = () => { + loadingDiv.innerHTML = "⚠️ Failed to refresh image"; + loadingDiv.style.display = "flex"; + loadingDiv.style.justifyContent = "center"; + loadingDiv.style.alignItems = "center"; + showToast("Failed to refresh image"); + }; img.src = finalUrl; } function openImageInNewTab(img, imageId) { diff --git a/index.html b/index.html index e41683f..996dd57 100644 --- a/index.html +++ b/index.html @@ -466,10 +466,11 @@

Voice Chat

- - - - - + + + + + + diff --git a/polli-utils.js b/polli-utils.js new file mode 100644 index 0000000..089b427 --- /dev/null +++ b/polli-utils.js @@ -0,0 +1,51 @@ +(function(global){ + function refreshPolliImage(url, options = {}) { + if (!url) { + return { error: 'No image source to refresh.' }; + } + let urlObj; + try { + urlObj = new URL(url); + } catch { + return { error: 'Invalid image URL.' }; + } + if (!global.polliClient || !global.polliClient.imageBase) { + return { error: 'Image client not ready.' }; + } + const baseOrigin = new URL(global.polliClient.imageBase).origin; + if (urlObj.origin !== baseOrigin) { + return { error: "Can't refresh: not a polliLib image URL." }; + } + const newSeed = Math.floor(Math.random() * 1000000); + let prompt = ''; + try { + const parts = urlObj.pathname.split('/'); + const i = parts.indexOf('prompt'); + if (i >= 0 && parts[i + 1]) prompt = decodeURIComponent(parts[i + 1]); + } catch {} + const width = options.width || Number(urlObj.searchParams.get('width')) || 512; + const height = options.height || Number(urlObj.searchParams.get('height')) || 512; + const model = options.model || urlObj.searchParams.get('model') || (document.getElementById('model-select')?.value || undefined); + let newUrl = url; + try { + if (global.polliLib && global.polliClient && prompt) { + newUrl = global.polliLib.mcp.generateImageUrl(global.polliClient, { + prompt, width, height, seed: newSeed, nologo: true, model + }); + } else { + urlObj.searchParams.set('seed', String(newSeed)); + newUrl = urlObj.toString(); + } + } catch (e) { + console.warn('polliLib generateImageUrl failed; falling back to seed swap', e); + urlObj.searchParams.set('seed', String(newSeed)); + newUrl = urlObj.toString(); + } + const newUrlObj = new URL(newUrl); + if (!newUrlObj.searchParams.has('referrer') && global.polliClient?.referrer) { + newUrlObj.searchParams.set('referrer', global.polliClient.referrer); + } + return { url: newUrlObj.toString() }; + } + global.refreshPolliImage = refreshPolliImage; +})(window); diff --git a/simple.js b/simple.js index 7459884..7449e67 100644 --- a/simple.js +++ b/simple.js @@ -562,75 +562,39 @@ document.addEventListener("DOMContentLoaded", () => { }); } - function refreshImage(img, imageId) { - console.log(`Refreshing image with ID: ${imageId} in simple mode`); - if (!img.src) { - window.showToast("No image source to refresh."); - return; - } - const urlObj = new URL(img.src); - if (!window.polliClient || !window.polliClient.imageBase) { - window.showToast("Image client not ready."); + function refreshImage(img, imageId) { + console.log(`Refreshing image with ID: ${imageId} in simple mode`); + const { url: finalUrl, error } = window.refreshPolliImage(img?.src, { + width: img.naturalWidth, + height: img.naturalHeight, + }); + if (!finalUrl) { + window.showToast(error || "Failed to refresh image"); return; } - const baseOrigin = new URL(window.polliClient.imageBase).origin; - if (urlObj.origin !== baseOrigin) { - window.showToast("Can't refresh: not a polliLib image URL."); - return; - } - const newSeed = Math.floor(Math.random() * 1000000); - let prompt = ''; - try { - const parts = urlObj.pathname.split('/'); - const i = parts.indexOf('prompt'); - if (i >= 0 && parts[i+1]) prompt = decodeURIComponent(parts[i+1]); - } catch {} - const width = Number(urlObj.searchParams.get('width')) || img.naturalWidth || 512; - const height = Number(urlObj.searchParams.get('height')) || img.naturalHeight || 512; - const model = urlObj.searchParams.get('model') || (document.getElementById('model-select')?.value || undefined); - let newUrl = img.src; - try { - if (window.polliLib && window.polliClient && prompt) { - newUrl = window.polliLib.mcp.generateImageUrl(window.polliClient, { - prompt, width, height, seed: newSeed, nologo: true, model - }); - } else { - urlObj.searchParams.set('seed', String(newSeed)); - newUrl = urlObj.toString(); - } - } catch (e) { - console.warn('polliLib generateImageUrl failed; falling back to seed swap', e); - urlObj.searchParams.set('seed', String(newSeed)); - newUrl = urlObj.toString(); - } - const newUrlObj = new URL(newUrl); - if (!newUrlObj.searchParams.has('referrer') && window.polliClient?.referrer) { - newUrlObj.searchParams.set('referrer', window.polliClient.referrer); // retain referrer for API tiering - } - const finalUrl = newUrlObj.toString(); - - const loadingDiv = document.createElement("div"); - loadingDiv.className = "simple-ai-image-loading"; - const spinner = document.createElement("div"); - spinner.className = "simple-loading-spinner"; - loadingDiv.appendChild(spinner); - loadingDiv.style.width = img.width + "px"; - loadingDiv.style.height = img.height + "px"; - img.parentNode.insertBefore(loadingDiv, img); - img.style.display = "none"; - - img.onload = () => { - loadingDiv.remove(); - img.style.display = "block"; - window.showToast("Image refreshed with new seed"); - }; - img.onerror = () => { - loadingDiv.innerHTML = "⚠️ Failed to refresh image"; - loadingDiv.style.display = "flex"; - loadingDiv.style.justifyContent = "center"; - loadingDiv.style.alignItems = "center"; - window.showToast("Failed to refresh image"); - }; + + const loadingDiv = document.createElement("div"); + loadingDiv.className = "simple-ai-image-loading"; + const spinner = document.createElement("div"); + spinner.className = "simple-loading-spinner"; + loadingDiv.appendChild(spinner); + loadingDiv.style.width = img.width + "px"; + loadingDiv.style.height = img.height + "px"; + img.parentNode.insertBefore(loadingDiv, img); + img.style.display = "none"; + + img.onload = () => { + loadingDiv.remove(); + img.style.display = "block"; + window.showToast("Image refreshed with new seed"); + }; + img.onerror = () => { + loadingDiv.innerHTML = "⚠️ Failed to refresh image"; + loadingDiv.style.display = "flex"; + loadingDiv.style.justifyContent = "center"; + loadingDiv.style.alignItems = "center"; + window.showToast("Failed to refresh image"); + }; img.src = finalUrl; }