const SYM = '$ANSEM'; const IMG_PLAY_KEY = 'bull_img_play_key'; const IMG_PLAY_SKIP_COST = 'bull_img_play_skip_cost_confirm'; /** Image gen can be slow (upstream + optional on-chain settle). Bound client wait so we show a real error instead of hanging forever. */ const IMG_PLAY_TIMEOUT_MS = 150000; const EXAMPLE_PROMPTS = [ { label: 'Chrome bull skull · dusk mesa', prompt: 'A chrome bull skull on a desert mesa at dusk, film still' }, { label: 'Neon trading floor · olive grid', prompt: 'Neon trading floor under olive grid light, cinematic wide shot' }, { label: 'Paper bull mascot · product shot', prompt: 'Soft paper texture bull mascot, product photo on black' }, { label: 'Acid particles · market chart', prompt: 'Abstract acid-green particles forming a market chart' }, ]; window.__lastImageMarkets = []; /** @type {{ id: string, role: 'user'|'assistant', prompt?: string, model?: string, size?: string, modelLabel?: string, state?: string, imageSrc?: string, downloadHref?: string, error?: string, est?: string }[]} */ let _thread = []; let _msgSeq = 0; let _genInFlight = false; let _mintAfterConnect = false; let _mintInFlight = false; let _revealedKey = ''; let _pendingPromptAfterMint = null; let _costConfirmResolve = null; function apiBase() { if (typeof window !== 'undefined' && window.__BULL_API_BASE__) { return String(window.__BULL_API_BASE__).replace(/\/$/, ''); } return ''; } function apiUrl(path) { return apiBase() + path; } function formatApiError(body, status) { const detail = body && (body.detail !== undefined ? body.detail : body); let msg = (detail && typeof detail === 'object' && (detail.error?.message || detail.error || detail.message)) || (typeof detail === 'string' ? detail : null) || (body && (body.error?.message || body.error || body.message)) || ('HTTP ' + status); if (typeof msg !== 'string') { try { msg = JSON.stringify(msg); } catch (_) { msg = String(msg); } } if (status === 402) { msg += ' — buy credits on /key, then retry.'; } else if (status === 503 && /timed out|timeout/i.test(msg)) { msg += ' — ledger credits on /key avoid the on-chain balance check.'; } return msg; } function formatPlaygroundNetworkError(err, endpoint) { const name = err && err.name ? String(err.name) : ''; const raw = String((err && err.message) || err || 'network error'); if (name === 'AbortError') { return 'Timed out after ~' + Math.round(IMG_PLAY_TIMEOUT_MS / 1000) + 's waiting for the image. Retry with a faster model, or buy ledger credits on /key so settle is offline.'; } if (/failed to fetch|networkerror|load failed|network request failed/i.test(raw)) { const base = apiBase() || '(same-origin — config.js missing?)'; return 'Network error reaching ' + endpoint + ' via ' + base + '. Try Incognito (extensions can block cross-origin POSTs), confirm balance on /key, then retry.'; } return raw; } function escHtml(s) { return String(s) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function fmt(n, digits) { const x = Number(n); if (!Number.isFinite(x)) return '—'; return x.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: digits == null ? 4 : digits, }); } function privyHeaders(extra) { const headers = { 'Content-Type': 'application/json', ...(extra || {}) }; const tok = document.getElementById('privyToken')?.value.trim(); if (tok) headers.Authorization = 'Bearer ' + tok; return headers; } function authErr(r, d) { if (r.status === 401) return 'Connect your account first.'; if (typeof d?.detail === 'string') return d.detail; return JSON.stringify(d?.detail || d || r.status); } function isConnected() { return !!(document.getElementById('privyToken')?.value.trim()); } function openConnect() { const el = document.getElementById('modal-connect'); if (el) el.hidden = false; window.dispatchEvent(new CustomEvent('bull:privy-load')); } function closeConnect() { const el = document.getElementById('modal-connect'); if (el) el.hidden = true; } function setMintButtonsDisabled(on) { ['btnGetKey', 'btnGetKeyTop'].forEach((id) => { const b = document.getElementById(id); if (b) b.disabled = !!on; }); } function copyText(text, btn) { const done = () => { if (!btn) return; const orig = btn.textContent; btn.textContent = 'Copied'; setTimeout(() => { btn.textContent = orig; }, 1200); }; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(done).catch(() => {}); } } function showKeyReveal(apiKey, balNote) { _revealedKey = String(apiKey || ''); const el = document.getElementById('modal-key-reveal'); const val = document.getElementById('keyRevealValue'); const note = document.getElementById('keyRevealBalNote'); if (!el || !val || !_revealedKey) return; val.textContent = _revealedKey; if (note) note.innerHTML = balNote || ''; el.hidden = false; const copyBtn = document.getElementById('btnCopyKeyReveal'); if (copyBtn) copyBtn.focus(); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(_revealedKey).then(() => { if (!copyBtn) return; const orig = copyBtn.textContent; copyBtn.textContent = 'Copied'; setTimeout(() => { copyBtn.textContent = orig; }, 1400); }).catch(() => {}); } } function closeKeyReveal() { const el = document.getElementById('modal-key-reveal'); if (el) el.hidden = true; _revealedKey = ''; // If user minted because they tried to generate, continue. if (_pendingPromptAfterMint) { const p = _pendingPromptAfterMint; _pendingPromptAfterMint = null; const ta = document.getElementById('imgPlayPrompt'); if (ta && !ta.value.trim()) ta.value = p; void runImagePlayground(); } } function copyRevealedKey() { if (!_revealedKey) return; copyText(_revealedKey, document.getElementById('btnCopyKeyReveal')); } function applyMintedKey(apiKey) { const el = document.getElementById('imgPlayKey'); if (!el) return; el.value = String(apiKey || ''); persistImgPlayKey(); updateSessionPill(); } function getSessionKey() { const el = document.getElementById('imgPlayKey'); return ((el && el.value) || '').trim(); } function updateSessionPill() { const pill = document.getElementById('sessionPill'); const text = document.getElementById('sessionPillText'); const key = getSessionKey(); const ready = !!(key && key.startsWith('inf_')); if (pill) pill.classList.toggle('is-ready', ready); if (text) text.textContent = ready ? 'Key ready' : 'No key'; paintSessionCta(); } function paintSessionCta() { const hasKey = !!(getSessionKey() && getSessionKey().startsWith('inf_')); const top = document.getElementById('btnGetKeyTop'); const go = document.getElementById('imgPlayGo'); if (top) { top.classList.toggle('hidden', hasKey); if (!isConnected()) { top.textContent = 'Connect'; top.onclick = () => openConnect(); } else { top.textContent = 'Get key'; top.onclick = () => mintPlaygroundKey(); } } if (go) go.classList.toggle('btn-primary', hasKey); } function clearSessionKey() { const el = document.getElementById('imgPlayKey'); if (el) el.value = ''; try { sessionStorage.removeItem(IMG_PLAY_KEY); } catch (_) {} updateSessionPill(); setStatus('Session key cleared.', false); } function toggleAdvanced() { const panel = document.getElementById('advPanel'); const btn = document.getElementById('btnToggleAdv'); if (!panel) return; const open = panel.classList.toggle('hidden') === false; if (btn) btn.textContent = open ? 'Hide advanced' : 'Advanced'; if (open) document.getElementById('imgPlayKey')?.focus(); } function setStatus(msg, isError) { const status = document.getElementById('imgPlayStatus'); if (!status) return; status.textContent = msg || ''; status.classList.toggle('is-error', !!isError); } async function mintPlaygroundKey() { if (!isConnected()) { _mintAfterConnect = true; setStatus('Connect to mint a session key.', false); openConnect(); return; } if (_mintInFlight) return; _mintInFlight = true; _mintAfterConnect = false; setMintButtonsDisabled(true); setStatus('Minting key…', false); try { const r = await fetch(apiUrl('/api/buy'), { method: 'POST', headers: privyHeaders(), body: JSON.stringify({}), }); const d = await r.json().catch(() => ({})); if (r.status === 401) { _mintAfterConnect = true; setStatus('Connect your account first.', true); openConnect(); return; } if (!r.ok) throw new Error(authErr(r, d)); const key = d.api_key || ''; if (!key || !String(key).startsWith('inf_')) { throw new Error('Mint succeeded but no inf_ key returned'); } applyMintedKey(key); closeConnect(); const bal = d.balance_ansem; const grant = d.signup_grant_ansem; let balNote = 'Key saved for this browser session — you can keep creating images.'; if (Number(bal) > 0 || Number(grant) > 0) { balNote += ' Balance ' + SYM + ' ' + fmt(bal, 4) + (grant ? ' (includes signup grant ' + SYM + ' ' + fmt(grant, 4) + ')' : '') + '.'; } else { balNote += ' Balance is empty — buy credits before generating, or calls return 402.'; } showKeyReveal(key, balNote); setStatus('Key ready. Describe an image and send.', false); } catch (err) { setStatus(String(err && err.message ? err.message : err), true); } finally { _mintInFlight = false; setMintButtonsDisabled(false); } } window.addEventListener('bull:privy-token', (e) => { const t = e.detail; const el = document.getElementById('privyToken'); if (el && t) el.value = typeof t === 'string' ? t : (t.token || t.accessToken || ''); paintSessionCta(); if (_mintAfterConnect && isConnected()) { void mintPlaygroundKey(); } }); document.getElementById('privyToken')?.addEventListener('change', () => { paintSessionCta(); if (_mintAfterConnect && isConnected()) void mintPlaygroundKey(); }); document.addEventListener('keydown', (e) => { if (e.key !== 'Escape') return; const cost = document.getElementById('modal-cost-confirm'); if (cost && !cost.hidden) { closeCostConfirm(false); return; } const reveal = document.getElementById('modal-key-reveal'); if (reveal && !reveal.hidden) { closeKeyReveal(); return; } const connect = document.getElementById('modal-connect'); if (connect && !connect.hidden) closeConnect(); }); document.getElementById('modal-key-reveal')?.addEventListener('click', (e) => { if (e.target === e.currentTarget) closeKeyReveal(); }); document.getElementById('modal-connect')?.addEventListener('click', (e) => { if (e.target === e.currentTarget) closeConnect(); }); document.getElementById('modal-cost-confirm')?.addEventListener('click', (e) => { if (e.target === e.currentTarget) closeCostConfirm(false); }); function isImageEditModel(modelId) { const mid = String(modelId || '').trim().toLowerCase(); if (!mid) return false; if (mid.endsWith('-edit') || mid.endsWith('_edit')) return true; if (mid.includes('-edit-') || mid.includes('_edit_')) return true; const parts = mid.replace(/_/g, '-').split('-'); if (parts.includes('edit')) return true; return ( mid.includes('bg-remover') || mid.includes('bg_remover') || mid.includes('background-remover') || mid.includes('background_remover') || mid.includes('image-edit') || mid.includes('image_edit') ); } function isImageMarket(m) { return String((m && m.modality) || '').toLowerCase() === 'image' || ['per_image', 'per_megapixel'].includes(String((m && m.billing_unit) || '')); } /** Playground only calls /v1/images/generations — hide edit/bg-remover offers. */ function isImageGenerationMarket(m) { return isImageMarket(m) && !isImageEditModel(m && m.model_id); } function imageUnitLabel(m) { const u = String((m && m.billing_unit) || ''); if (u === 'per_megapixel') return 'ANSEM / MP'; if (u === 'per_image') return 'ANSEM / image'; if (u === 'input_token') return 'ANSEM / 1M tokens'; return 'ANSEM / unit'; } function imageUnitPrice(m) { if (!m) return null; if (m.offer_unit != null) return m.offer_unit; if (m.offer_in != null) return m.offer_in; return m.unit_price != null ? m.unit_price : null; } function persistImgPlayKey() { const el = document.getElementById('imgPlayKey'); if (!el) return; try { const v = (el.value || '').trim(); if (v) sessionStorage.setItem(IMG_PLAY_KEY, v); else sessionStorage.removeItem(IMG_PLAY_KEY); } catch (_) {} updateSessionPill(); updateImgPlayEstimate(); } function restoreImgPlayKey() { const el = document.getElementById('imgPlayKey'); if (!el) return; try { const v = sessionStorage.getItem(IMG_PLAY_KEY) || ''; if (v && !el.value) el.value = v; } catch (_) {} updateSessionPill(); } function _imgPlayMegapixels(size) { const raw = String(size || '1024x1024').toLowerCase(); const parts = raw.split('x'); const w = Number(parts[0]); const h = Number(parts[1]); if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return 1; return (w * h) / 1_000_000; } /** Mirror multimodal._image_quantity + quote_offer_units (chrome-extension/pricing.js). */ function _imgPlayQuantity(billingUnit, size, opts) { opts = opts || {}; const n = Math.max(1, Number(opts.n) || 1); const billing = String(billingUnit || 'per_image'); if (billing === 'per_image') return n; const raw = String(size || '1024x1024').toLowerCase(); const parts = raw.split('x'); let w = Number(parts[0]); let h = Number(parts[1]); if (!Number.isFinite(w) || !Number.isFinite(h) || w < 64 || h < 64) { w = 1024; h = 1024; } if (billing === 'input_token') { const quality = String(opts.quality || 'standard').toLowerCase(); const qualityMultiplier = { low: 0.5, standard: 1.0, medium: 1.0, high: 2.0, hd: 2.0 }[quality] || 1.0; return Math.ceil((n * w * h) / 1_000_000 * 1000 * qualityMultiplier); } return (n * w * h) / 1_000_000; } function _imgPlayCostAnsem(unitPrice, billingUnit, quantity) { const multiplier = String(billingUnit) === 'input_token' ? quantity / 1_000_000 : quantity; return Math.round(Number(unitPrice) * multiplier * 1e6) / 1e6; } function _imgPlaySelectedMarket() { const id = document.getElementById('imgPlayModel')?.value || ''; return (window.__lastImageMarkets || []).find((m) => m.model_id === id) || null; } function sizeToAspect(size) { const raw = String(size || '1024x1024').toLowerCase(); const parts = raw.split('x'); const w = Number(parts[0]); const h = Number(parts[1]); if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return '1 / 1'; return w + ' / ' + h; } function _imgPlaySizeLabel(size) { return String(size || '1024x1024').replace('x', '×'); } function currentEstText() { const m = _imgPlaySelectedMarket(); if (!m) return ''; const unit = Number(imageUnitPrice(m)); if (!Number.isFinite(unit)) return ''; const size = document.getElementById('imgPlaySize')?.value || '1024x1024'; const billingUnit = String(m.billing_unit || 'per_image'); const quantity = _imgPlayQuantity(billingUnit, size); return `~${fmt(_imgPlayCostAnsem(unit, billingUnit, quantity), 4)} ANSEM`; } function isSkipCostConfirm() { try { return localStorage.getItem(IMG_PLAY_SKIP_COST) === '1'; } catch (_) { return false; } } function setSkipCostConfirm(on) { try { if (on) localStorage.setItem(IMG_PLAY_SKIP_COST, '1'); else localStorage.removeItem(IMG_PLAY_SKIP_COST); } catch (_) {} } function buildPlaygroundCostEstimate() { const m = _imgPlaySelectedMarket(); if (!m) return null; const unit = Number(imageUnitPrice(m)); if (!Number.isFinite(unit)) return null; const size = document.getElementById('imgPlaySize')?.value || '1024x1024'; const billingUnit = String(m.billing_unit || 'per_image'); const quantity = _imgPlayQuantity(billingUnit, size); const costAnsem = _imgPlayCostAnsem(unit, billingUnit, quantity); const modelLabel = (document.getElementById('imgPlayModel')?.selectedOptions?.[0]?.textContent || m.display_name || m.model_id || '') .split('·')[0] .trim(); return { modelId: m.model_id, modelLabel: modelLabel || m.model_id, size, billingUnit, unitPrice: unit, quantity, costAnsem, }; } function paintCostConfirm(est) { document.getElementById('costConfirmModel').textContent = est.modelLabel || est.modelId || '—'; document.getElementById('costConfirmSize').textContent = _imgPlaySizeLabel(est.size); const unitLbl = imageUnitLabel({ billing_unit: est.billingUnit }); let qtyBit = ''; if (est.billingUnit === 'per_megapixel') { qtyBit = ` · ${fmt(est.quantity, 6)} MP`; } else if (est.billingUnit === 'input_token') { qtyBit = ` · ${fmt(est.quantity, 0)} tok`; } document.getElementById('costConfirmBilling').textContent = `${fmt(est.unitPrice, 4)} ${unitLbl}` + qtyBit; document.getElementById('costConfirmCost').textContent = `Est. ~${fmt(est.costAnsem, 4)} ${SYM}`; const never = document.getElementById('costConfirmNeverAsk'); if (never) never.checked = false; } function openCostConfirm(est) { paintCostConfirm(est); const el = document.getElementById('modal-cost-confirm'); if (!el) return Promise.resolve(false); el.hidden = false; document.getElementById('costConfirmGo')?.focus(); return new Promise((resolve) => { _costConfirmResolve = resolve; }); } function closeCostConfirm(confirmed) { const el = document.getElementById('modal-cost-confirm'); if (el) el.hidden = true; if (confirmed) { const never = document.getElementById('costConfirmNeverAsk'); if (never && never.checked) setSkipCostConfirm(true); } const resolve = _costConfirmResolve; _costConfirmResolve = null; if (resolve) resolve(!!confirmed); } function updateImgPlayEstimate() { const est = document.getElementById('imgPlayEst'); if (!est) return; const m = _imgPlaySelectedMarket(); if (!m) { est.textContent = (window.__lastImageMarkets || []).length ? '' : 'Waiting for image models…'; return; } const unit = Number(imageUnitPrice(m)); if (!Number.isFinite(unit)) { est.textContent = ''; return; } const size = document.getElementById('imgPlaySize')?.value || '1024x1024'; const billingUnit = String(m.billing_unit || 'per_image'); const quantity = _imgPlayQuantity(billingUnit, size); est.textContent = `Est. ~${fmt(_imgPlayCostAnsem(unit, billingUnit, quantity), 4)} ANSEM`; } function selectImageModel(modelId) { const sel = document.getElementById('imgPlayModel'); if (!sel) return; sel.value = modelId; updateImgPlayEstimate(); } function renderImageModelList(imgs) { const list = document.getElementById('imgModelList'); if (!list) return; if (!imgs.length) { list.innerHTML = '

No generation offers listed yet. Check Market → Image or try again later.

'; return; } list.innerHTML = imgs.slice(0, 12).map((m) => { const unit = imageUnitPrice(m); return `

${fmt(unit, 4)}

`; }).join(''); } function syncImagePlayground(markets) { const sel = document.getElementById('imgPlayModel'); const go = document.getElementById('imgPlayGo'); if (!sel) return; restoreImgPlayKey(); const imgs = (Array.isArray(markets) ? markets : []) .filter(isImageGenerationMarket) .slice() .sort((a, b) => Number(imageUnitPrice(a) ?? Infinity) - Number(imageUnitPrice(b) ?? Infinity)); window.__lastImageMarkets = imgs; renderImageModelList(imgs); const prev = sel.value; if (!imgs.length) { sel.innerHTML = ''; sel.disabled = true; if (go) go.disabled = true; updateImgPlayEstimate(); return; } sel.disabled = false; if (go && !_genInFlight) go.disabled = false; sel.innerHTML = imgs.map((m) => { const unit = imageUnitPrice(m); const label = `${m.display_name || m.model_id} · ${fmt(unit, 4)}`; return ``; }).join(''); if (prev && imgs.some((m) => m.model_id === prev)) sel.value = prev; if (!sel._boundChange) { sel._boundChange = true; sel.addEventListener('change', updateImgPlayEstimate); const size = document.getElementById('imgPlaySize'); if (size) size.addEventListener('change', updateImgPlayEstimate); } updateImgPlayEstimate(); } async function loadImageMarkets() { try { const response = await fetch(apiUrl('/api/markets')); if (!response.ok) throw new Error('markets ' + response.status); const d = await response.json(); if (!Array.isArray(d)) throw new Error('invalid markets'); syncImagePlayground(d); } catch (_) { const list = document.getElementById('imgModelList'); if (list) list.innerHTML = '

Could not load markets.

'; syncImagePlayground([]); } } /* ── Chat thread ─────────────────────────────────────────────────── */ function nextMsgId() { _msgSeq += 1; return 'm' + _msgSeq; } function scrollThreadToBottom() { const wrap = document.getElementById('threadWrap'); if (!wrap) return; requestAnimationFrame(() => { wrap.scrollTop = wrap.scrollHeight; }); } function renderEmptyState() { return `

Try a prompt

${EXAMPLE_PROMPTS.map((p, i) => `` ).join('')}

`; } function stageHtml(msg) { const ar = sizeToAspect(msg.size || '1024x1024'); const state = msg.state || 'idle'; const title = state === 'generating' ? 'Generating…' : state === 'done' ? 'Done' : state === 'error' ? 'Couldn’t generate' : 'Preparing…'; const sub = state === 'generating' || state === 'done' ? escHtml((msg.modelLabel || msg.model || '') + ' · ' + _imgPlaySizeLabel(msg.size)) : 'Hang tight'; const img = msg.imageSrc ? ` Generated image

` : ``; return `

${escHtml(title)} ${sub}

${img}

`; } function msgActionsHtml(msg) { if (msg.state === 'done' && msg.imageSrc) { const dl = msg.downloadHref ? `Download` : ''; return `

Settled in $ANSEM${msg.est ? ' · ' + escHtml(msg.est) : ''} ${dl}

`; } if (msg.state === 'error' && msg.prompt) { return `

`; } return ''; } function renderThread() { const root = document.getElementById('chatThread'); if (!root) return; if (!_thread.length) { root.innerHTML = renderEmptyState(); root.querySelectorAll('[data-example]').forEach((btn) => { btn.addEventListener('click', () => { const i = Number(btn.getAttribute('data-example')); const item = EXAMPLE_PROMPTS[i]; if (!item) return; const ta = document.getElementById('imgPlayPrompt'); if (ta) { ta.value = item.prompt; autoResizePrompt(); ta.focus(); } }); }); return; } root.innerHTML = _thread.map((msg) => { if (msg.role === 'user') { return `

You

${escHtml(msg.prompt || '')}

`; } const err = msg.error ? `

${escHtml(msg.error)}

` : ''; return `

Bull.inf

${stageHtml(msg)} ${err} ${msgActionsHtml(msg)}

`; }).join(''); root.querySelectorAll('[data-regen]').forEach((btn) => { btn.addEventListener('click', () => { const id = btn.getAttribute('data-regen'); const msg = _thread.find((m) => m.id === id); if (!msg || !msg.prompt) return; const ta = document.getElementById('imgPlayPrompt'); if (ta) ta.value = msg.prompt; if (msg.model) selectImageModel(msg.model); if (msg.size) { const size = document.getElementById('imgPlaySize'); if (size) size.value = msg.size; } void runImagePlayground(); }); }); root.querySelectorAll('[data-reuse]').forEach((btn) => { btn.addEventListener('click', () => { const id = btn.getAttribute('data-reuse'); const msg = _thread.find((m) => m.id === id); if (!msg || !msg.prompt) return; const ta = document.getElementById('imgPlayPrompt'); if (ta) { ta.value = msg.prompt; autoResizePrompt(); ta.focus(); } if (msg.model) selectImageModel(msg.model); if (msg.size) { const size = document.getElementById('imgPlaySize'); if (size) size.value = msg.size; } }); }); scrollThreadToBottom(); } function patchAssistantMsg(id, patch) { const idx = _thread.findIndex((m) => m.id === id); if (idx < 0) return; _thread[idx] = { ..._thread[idx], ...patch }; // Surgical DOM update for generating → done to keep animation smooth when possible const article = document.querySelector(`.msg-assistant[data-id="${CSS.escape(id)}"]`); if (!article) { renderThread(); return; } const msg = _thread[idx]; const stage = article.querySelector('.gen-stage'); if (stage && patch.state) { stage.dataset.state = patch.state; const title = stage.querySelector('.gen-stage-title'); const sub = stage.querySelector('.gen-stage-sub'); if (title) { title.textContent = patch.state === 'generating' ? 'Generating…' : patch.state === 'done' ? 'Done' : patch.state === 'error' ? 'Couldn’t generate' : title.textContent; } if (sub && (msg.modelLabel || msg.model)) { sub.textContent = (msg.modelLabel || msg.model) + ' · ' + _imgPlaySizeLabel(msg.size); } } if (patch.imageSrc) { let img = article.querySelector('.gen-stage-img'); if (!img) { renderThread(); return; } img.hidden = false; img.alt = 'Generated image'; img.src = patch.imageSrc; if (stage) stage.dataset.state = 'done'; } // Rebuild actions / error const oldErr = article.querySelector('.msg-error-text'); if (oldErr) oldErr.remove(); const oldAct = article.querySelector('.msg-actions'); if (oldAct) oldAct.remove(); if (msg.error) { const p = document.createElement('p'); p.className = 'msg-error-text'; p.textContent = msg.error; article.appendChild(p); } const actHtml = msgActionsHtml(msg); if (actHtml) { article.insertAdjacentHTML('beforeend', actHtml); article.querySelectorAll('[data-regen]').forEach((btn) => { btn.addEventListener('click', () => { const mid = btn.getAttribute('data-regen'); const m = _thread.find((x) => x.id === mid); if (!m || !m.prompt) return; const ta = document.getElementById('imgPlayPrompt'); if (ta) ta.value = m.prompt; if (m.model) selectImageModel(m.model); if (m.size) { const size = document.getElementById('imgPlaySize'); if (size) size.value = m.size; } void runImagePlayground(); }); }); article.querySelectorAll('[data-reuse]').forEach((btn) => { btn.addEventListener('click', () => { const mid = btn.getAttribute('data-reuse'); const m = _thread.find((x) => x.id === mid); if (!m || !m.prompt) return; const ta = document.getElementById('imgPlayPrompt'); if (ta) { ta.value = m.prompt; autoResizePrompt(); ta.focus(); } }); }); } scrollThreadToBottom(); } function autoResizePrompt() { const ta = document.getElementById('imgPlayPrompt'); if (!ta) return; ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, 144) + 'px'; } function setSendBusy(on) { const go = document.getElementById('imgPlayGo'); _genInFlight = !!on; if (!go) return; go.disabled = !!on || !(window.__lastImageMarkets || []).length; go.setAttribute('aria-busy', on ? 'true' : 'false'); go.title = on ? 'Generating…' : 'Generate'; } function waitImageLoad(img) { return new Promise((resolve) => { if (!img) { resolve(); return; } let settled = false; const done = () => { if (settled) return; settled = true; resolve(); }; img.onload = done; img.onerror = done; if (img.complete && img.naturalWidth) done(); }); } async function runImagePlayground(opts) { opts = opts || {}; if (_genInFlight) return; if (_costConfirmResolve) return; const model = document.getElementById('imgPlayModel')?.value || ''; const prompt = (opts.prompt != null ? String(opts.prompt) : (document.getElementById('imgPlayPrompt')?.value || '') ).trim(); const size = document.getElementById('imgPlaySize')?.value || '1024x1024'; const key = getSessionKey(); persistImgPlayKey(); setStatus('', false); if (!model) { setStatus('No image model available yet. Check back when inventory is live.', true); return; } if (!prompt) { setStatus('Describe an image first.', true); document.getElementById('imgPlayPrompt')?.focus(); return; } if (!key || !key.startsWith('inf_')) { _pendingPromptAfterMint = prompt; setStatus('You need a session key — connect and mint one, then we’ll send your prompt.', false); void mintPlaygroundKey(); return; } if (!apiBase()) { setStatus('API base not loaded (config.js). Hard-refresh the page, then retry.', true); return; } if (!opts.skipConfirm && !isSkipCostConfirm()) { const costEst = buildPlaygroundCostEstimate(); if (!costEst) { setStatus('No image offer price available — pick a model or try again.', true); return; } const ok = await openCostConfirm(costEst); if (!ok) { setStatus('Cancelled', false); return; } } const modelLabel = (document.getElementById('imgPlayModel')?.selectedOptions?.[0]?.textContent || model) .split('·')[0] .trim(); const est = currentEstText(); const userId = nextMsgId(); const asstId = nextMsgId(); _thread.push({ id: userId, role: 'user', prompt }); _thread.push({ id: asstId, role: 'assistant', prompt, model, size, modelLabel, state: 'generating', est, }); renderThread(); // Clear composer after send (chat feel) const ta = document.getElementById('imgPlayPrompt'); if (ta && opts.prompt == null) { ta.value = ''; autoResizePrompt(); } setSendBusy(true); const endpoint = apiUrl('/v1/images/generations'); const controller = typeof AbortController !== 'undefined' ? new AbortController() : null; const timer = controller ? setTimeout(() => controller.abort(), IMG_PLAY_TIMEOUT_MS) : null; try { const response = await fetch(endpoint, { method: 'POST', headers: { Authorization: 'Bearer ' + key, 'Content-Type': 'application/json', }, body: JSON.stringify({ model, prompt, size, n: 1, response_format: 'b64_json' }), signal: controller ? controller.signal : undefined, }); const body = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(formatApiError(body, response.status)); } const item = Array.isArray(body.data) ? body.data[0] : null; const b64 = item && item.b64_json; const url = item && item.url; let src = ''; let downloadHref = ''; if (b64) { src = 'data:image/png;base64,' + b64; downloadHref = src; } else if (url) { src = url; } else { throw new Error('No image in response'); } patchAssistantMsg(asstId, { state: 'done', imageSrc: src, downloadHref: downloadHref || undefined, error: undefined, }); // Ensure fade-in after decode const imgEl = document.querySelector(`.msg-assistant[data-id="${CSS.escape(asstId)}"] .gen-stage-img`); if (imgEl) await waitImageLoad(imgEl); setStatus('Done · settled from your ANSEM balance.', false); } catch (err) { const text = formatPlaygroundNetworkError(err, endpoint); patchAssistantMsg(asstId, { state: 'error', error: text, }); setStatus(text, true); } finally { if (timer) clearTimeout(timer); setSendBusy(false); } } /* ── Composer wiring ─────────────────────────────────────────────── */ (function wireComposer() { const ta = document.getElementById('imgPlayPrompt'); if (!ta) return; ta.addEventListener('input', autoResizePrompt); ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); void runImagePlayground(); } }); // On mobile, focus scrolls the thread so the composer stays usable ta.addEventListener('focus', () => { setTimeout(scrollThreadToBottom, 120); setTimeout(scrollThreadToBottom, 320); }); autoResizePrompt(); })(); /* Keep chat height correct when mobile keyboard opens (iOS/Android) */ (function wireVisualViewport() { const vv = window.visualViewport; if (!vv) return; const apply = () => { // Prefer layout height that matches the *visible* viewport so the composer // stays above the keyboard instead of under it. const h = Math.round(vv.height); if (h > 0) { document.documentElement.style.setProperty('--app-vh', h + 'px'); document.querySelector('.layout')?.style.setProperty('height', h + 'px'); document.querySelector('.layout')?.style.setProperty('max-height', h + 'px'); } }; vv.addEventListener('resize', apply); vv.addEventListener('scroll', apply); apply(); })(); restoreImgPlayKey(); renderThread(); loadImageMarkets();

Connect

Your API key