marketplace pattern page: wire 'Generate AI colorways' button to render results inline + show progress

524cc8474d0d939be6e663c1e8f974fbc1f3d419 · 2026-05-13 14:59:45 -0700 · SteveStudio2

Files touched

M public/marketplace/pattern.html

Diff

commit 524cc8474d0d939be6e663c1e8f974fbc1f3d419
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 13 14:59:45 2026 -0700

    marketplace pattern page: wire 'Generate AI colorways' button to render results inline + show progress
---
 public/marketplace/pattern.html | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/public/marketplace/pattern.html b/public/marketplace/pattern.html
index caed7d6..b553c50 100644
--- a/public/marketplace/pattern.html
+++ b/public/marketplace/pattern.html
@@ -76,9 +76,36 @@ async function load() {
 window.orderSample = function() { alert('Sample order — wires to Designer Wallcoverings fulfillment ($5 ships in 3–5 days).'); };
 window.orderRoll = function() { alert('Full-roll order — wires to Shopify checkout.'); };
 window.aiColorways = async function() {
-  const r = await fetch('/api/marketplace/ai/generate-colorways', { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({ patternSlug: slug }) });
-  const j = await r.json();
-  alert('AI generated ' + (j.colorways?.length || 0) + ' colorways. (Wired to Gemini/Ollama in next release.)');
+  const btn = event && event.target;
+  const cwEl = document.getElementById('cw');
+  if (btn) { btn.disabled = true; btn.textContent = 'Generating 6 colorways… (~30s)'; }
+  try {
+    const r = await fetch('/api/marketplace/ai/generate-colorways', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ patternSlug: slug }),
+    });
+    const j = await r.json();
+    if (!r.ok) throw new Error(j.error || ('HTTP ' + r.status));
+    // Render the freshly-generated colorways into the existing #cw grid
+    if (cwEl && Array.isArray(j.colorways)) {
+      j.colorways.forEach(c => {
+        const palette = Array.isArray(c.hex_palette) ? c.hex_palette : [];
+        const card = document.createElement('div'); card.className = 'colorway-card';
+        const imgHtml = c.image_url
+          ? `<div style="aspect-ratio:1/1;border-radius:12px;background:#eee url('${c.image_url}') center/cover;margin-bottom:10px;"></div>`
+          : '';
+        card.innerHTML = imgHtml +
+          `<div class="name">${c.name} <span style="color:var(--mp-muted);font-weight:400;">· AI</span></div>` +
+          `<div class="swatch-row">${palette.map(h => `<div class="swatch" style="background:${h}" title="${h}"></div>`).join('')}</div>`;
+        cwEl.appendChild(card);
+      });
+    }
+    if (btn) btn.textContent = `Generated ${j.colorways?.length || 0} colorways`;
+  } catch (err) {
+    alert('Colorway generation failed: ' + err.message);
+    if (btn) { btn.disabled = false; btn.textContent = 'Generate AI colorways'; }
+  }
 };
 load();
 </script>

← 92d9917 spoonflower upload returns SF pattern#, adds Upload-to-Shopi · back to Wallco Ai · marketplace ai: tests for qwen3:14b tag-pattern + write-patt ecc625c →