// listing-demo.jsx — interactive embed of the AI Listing Generator. const { useState: useStateL } = React; function ListingPill({ kind, children }) { const style = { done: { bg: 'var(--bg-ok)', fg: 'var(--fg-ok)' }, running: { bg: 'var(--bg-warn)', fg: 'var(--fg-warn)' }, queued: { bg: 'transparent', fg: 'var(--ink-2)', border: '1px solid var(--rule-strong)' }, failed: { bg: 'var(--bg-danger)', fg: 'var(--fg-danger)' }, }[kind] || { bg: 'transparent', fg: 'var(--ink-2)' }; return ( {kind === 'running' && ( )} {children} ); } // — Tab 0: Product archive (NEW default) function ArchiveTab({ d }) { // Seasonality index: 12 months. May–Sep peak const season = [0.55, 0.6, 0.72, 0.9, 1.45, 1.78, 1.92, 1.85, 1.55, 1.0, 0.7, 0.58]; const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; const kwToneColor = { primary: 'var(--fg-danger)', secondary: 'var(--fg-warn)', opportunity: 'var(--fg-info)', }; return (
{/* HEADER — meta strip */}
{d.title}
{d.sub}
{d.importLabel}
{/* META + sheets */}
{/* meta key-value */}
{d.meta.map(([k, v], i) => (
{k} {v}
))}
{/* parsed sheets */}
Parsed sheets · 11
{d.sheets.map((s, i) => ( {s} ))}
{/* KEYWORD ANALYSIS */}
{d.kwTitle}
{d.kwSub}
{Object.entries(d.kwLegend).map(([k, v]) => ( {v} ))}
{d.kwHeaders.map((h, i) => ( ))} {d.kwRows.map((r, i) => { const [kw, vol, rank, status] = r; const td = { padding: '10px 14px', borderTop: i ? '1px solid var(--rule)' : 'none', fontVariantNumeric: 'tabular-nums' }; return ( ); })}
= 1 && i <= 2 ? 'right' : 'left', fontWeight: 500, fontSize: 11, letterSpacing: '.04em', fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', borderBottom: '1px solid var(--rule)', }}>{h}
{kw} {vol} {rank} {d.kwLegend[status]}
{/* KEYWORD CLASSIFICATION + ALLOCATION */} {/* COMPETITORS + SEASONALITY side-by-side */}
{/* competitor table */}
{d.compTitle}
{d.compHeaders.map((h, i) => ( ))} {d.compRows.map((r, i) => { const td = { padding: '9px 12px', borderTop: i ? '1px solid var(--rule)' : 'none', fontVariantNumeric: 'tabular-nums' }; return ( ); })}
= 2 && i <= 4 ? 'right' : 'left', fontWeight: 500, fontSize: 10.5, letterSpacing: '.04em', fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', borderBottom: '1px solid var(--rule)', }}>{h}
{r[0]} {r[1]} {r[2]} {r[3]} {r[4]} {r[5]}
{/* seasonality */}
{d.seasonTitle}
{d.seasonSub}
{/* seasonality bar chart */} {/* baseline 1.0 */} 1.0 {season.map((v, i) => { const barW = (316 - 20) / 12; const x = 20 + barW * i + barW * 0.15; const w = barW * 0.7; const fullH = 60; // 0 → 2.0 const h = (v / 2.0) * fullH; const y = 70 - (v - 1.0) * (fullH / 2.0) * (v > 1 ? 1 : 0) - (v > 1 ? h - (1 - 0) * (fullH/2) : 0); // simpler: bar from baseline 70 up/down based on v const above = v > 1; const barY = above ? 70 - (v - 1) * 30 : 70; const barH = above ? (v - 1) * 30 : (1 - v) * 30; return ( {months[i]} {above && v >= 1.5 && ( {v.toFixed(1)}× )} ); })}
{/* VERSION HISTORY + NEGATIVES */}
{/* version history */}
{d.histTitle}
{d.histRows.map((r, i) => { const [v, date, note, status] = r; const active = status === 'active'; return (
{v} {date} {note} {d.histStatus[status]}
); })}
{/* negatives */}
{d.negTitle}
Auto-applied to ads · suppressed in title gen
{d.negKeywords.map((k) => ( {k} ))}
); } // — Keyword classification block (semantic clustering) function KeywordClassification({ d }) { const toneColors = { primary: { bg: 'color-mix(in oklab, var(--fg-danger) 14%, transparent)', fg: 'var(--fg-danger)', dot: 'var(--fg-danger)' }, feature: { bg: 'color-mix(in oklab, var(--accent) 14%, transparent)', fg: 'var(--accent)', dot: 'var(--accent)' }, scene: { bg: 'color-mix(in oklab, var(--fg-info) 14%, transparent)', fg: 'var(--fg-info)', dot: 'var(--fg-info)' }, audience: { bg: 'color-mix(in oklab, var(--fg-ok) 16%, transparent)', fg: 'var(--fg-ok)', dot: 'var(--fg-ok)' }, longtail: { bg: 'color-mix(in oklab, var(--ink-2) 14%, transparent)', fg: 'var(--ink-1)', dot: 'var(--ink-2)' }, }; return (
{d.clsTitle}
{d.clsSub}
{d.clsGroups.map((g, i) => { const tone = toneColors[g.tone]; return (
{g.label} {g.count}
{g.words.map((w, j) => ( {w} ))} {g.count > g.words.length && ( +{g.count - g.words.length} )}
); })}
); } // — Keyword allocation block (which field each keyword goes to) function KeywordAllocation({ d }) { const tagColors = { feature: { bg: 'color-mix(in oklab, var(--accent) 14%, transparent)', fg: 'var(--accent)' }, scene: { bg: 'color-mix(in oklab, var(--fg-info) 14%, transparent)', fg: 'var(--fg-info)' }, audience: { bg: 'color-mix(in oklab, var(--fg-ok) 16%, transparent)', fg: 'var(--fg-ok)' }, }; return (
{d.allocTitle}
{d.allocSub}
AI placement
Rationale {d.allocRationale}
{d.allocFields.map((f, i) => { const isCharCap = f.cap.includes('char'); const charCapNum = isCharCap ? parseInt(f.cap) : null; const usagePct = isCharCap && f.used != null ? Math.round((f.used / charCapNum) * 100) : null; const isBullet = f.id.startsWith('bp'); const tag = f.tag && tagColors[f.tag]; return (
{f.label}
{f.cap} {tag && ( {f.tag} )}
{f.items.map((kw, j) => ( {kw} ))}
{usagePct != null ? (
{f.used}/{charCapNum}
95 ? 'var(--fg-warn)' : 'var(--accent)', }}>
) : ( {f.items.length} kw )}
); })}
); } function UploadTab({ d }) { return (
{/* Left: drop zone + product preview */}
{d.title}
{d.sub}
{/* faux product preview - portable neck fan */} {/* neck band — U shape */} {/* left air outlet */} {[0,1,2,3,4,5].map(i => )} {/* right air outlet */} {[0,1,2,3,4,5].map(i => )} {/* control LEDs */}
UPLOADED · NF-2401-MNT.jpg
{d.dropLabel}
{d.dropHint}
{d.templateTitle} {d.templateName}
{d.templateNote}
{/* Right: AI detected attributes */}
{d.detectedTitle} {d.confidence}
{d.attrs.map((a, i) => { const [label, value, conf] = a; const cn = parseInt(conf); return (
{label} {value} = 95 ? 'var(--fg-ok)' : cn >= 90 ? 'var(--ink-2)' : 'var(--fg-warn)', fontVariantNumeric: 'tabular-nums', }}>{conf}
); })}
); } // — Tab 2: Generated listing function GeneratedTab({ d }) { return (
{/* Header */}
{d.title}
{d.sub}
{d.productTag}
{/* Title block */}
{d.titleLabel}
{d.titleVal}
— {d.titleMeta}
{/* Bullets + Keywords side-by-side */}
{d.bulletsLabel}
{d.bullets.map(([head, body], i) => (
0{i+1}
{head}
{body}
))}
{d.kwLabel}
{d.keywords.map((k) => ( {k} ))}
{d.bpLabel}
{d.searchTerms}
{/* A+ blocks + image prompts */}
{d.aPlusLabel}
{d.aPlusBlocks.map(([head, body], i) => (
{i+1}
{head}
{body}
))}
{d.imgPromptLabel}
{d.imgPrompts.map((p, i) => (
{i === 0 ? 'MAIN' : `#${i+1}`}
{p}
))}
); } // — Tab 3: Batch queue function BatchTab({ d }) { const counts = d.rows.reduce((acc, r) => { acc[r[3]] = (acc[r[3]] || 0) + 1; return acc; }, {}); return (
{d.title}
{d.sub}
{/* Overall progress bar */}
{d.progressTitle} {d.progressNote}
{/* Queue table */}
{d.cols.map((c, i) => ( ))} {d.rows.map((r, i) => { const [sku, cat, color, status, time, cost] = r; const td = { padding: '11px 14px', borderTop: '1px solid var(--rule)', fontVariantNumeric: 'tabular-nums' }; return ( ); })}
= 4 ? 'right' : 'left', fontWeight: 500, fontSize: 11.5, letterSpacing: '.02em', fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', }}>{c}
{sku} {cat} {color} {d.statusLabels[status]} {time} {cost}
Concurrency: 3 workers · Auto-retry on failure → 全部完成后打包 ZIP
); } // — Tab 4: Cost tracking function CostTab({ d }) { return (
{d.title}
{d.sub}
{/* KPIs */}
{d.kpis.map((k, i) => (
{k.label}
{k.value} {k.unit && {k.unit}}
))}
{/* Model distribution */}
{d.modelTitle}
{d.models.map((m, i) => { const [name, spend, pct, role] = m; return (
{name}
{role}
{pct}%
{spend}
); })}
); } // — Main shell function ListingDemo({ lang }) { const d = (window.I18N || I18N)[lang].listingDemo; const [tab, setTab] = useStateL(0); // default to "product archive" — the moat return (
{/* Window chrome */}
{['#FF5F57', '#FEBC2E', '#28C840'].map((c) => ( ))}
{d.url}
{/* Tabs */}
{d.tabs.map((label, i) => ( ))}
{/* Body */}
{tab === 0 && } {tab === 1 && } {tab === 2 && } {tab === 3 && } {tab === 4 && }
); } // Add CSS keyframe for the progress bar shimmer (once) (function injectListingKeyframes() { if (document.getElementById('listing-keyframes')) return; const s = document.createElement('style'); s.id = 'listing-keyframes'; s.textContent = ` @keyframes shift { 0% { background-position: 0 0; } 100% { background-position: 16px 0; } } `; document.head.appendChild(s); })(); Object.assign(window, { ListingDemo });