{/* ===== LEFT (form) ===== */}
Upload .md file
Loaded: {s.mdFilename} }
Or paste the markdown directly
onPasteMd(e.target.value)}
placeholder={`---\ntitle: WiseFunnel vs ClickFunnels...\nslug: wisefunnel-vs-clickfunnels-agencies\n---\n# H1...\n\nPaste the post body so the generator picks up KPIs, niche, and the Image Guide section.`} />
Post slug
setS(prev => ({ ...prev, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-') }))}
placeholder="wisefunnel-vs-clickfunnels-agencies" />
{/* STEP 02 — Image spec */}
Placement & aspect ratio
setS(prev => ({ ...prev, width: +e.target.value || 1200 }))} placeholder="Width (px)" />
setS(prev => ({ ...prev, height: +e.target.value || 800 }))} placeholder="Height (px)" />
)}
Theme
setS(prev=>({...prev,theme:'dark'}))}>Dark navy
setS(prev=>({...prev,theme:'light'}))}>Light beige
setS(prev=>({...prev,theme:'duotone'}))}>Duotone
{/* STEP 03 — Look */}
setS(prev=>({...prev,look:'brand'}))}
title="Use WiseFunnel branding" desc="Orange #F97316, navy #1A2B3B, paper #FCFAF2." />
setS(prev=>({...prev,look:'reference'}))}
title="Upload reference image" desc="Match palette, mood, composition." />
{s.look === 'reference' && (
{/* STEP 04 — Layout & screenshots */}
Template
Fill the slots
);
})()}
{/* STEP 05 — Elements */}
setToggle('logo')} />
setToggle('title')} />
{s.toggles.title && (
Title source
setS(prev=>({...prev,titleSrc:'auto'}))}>Use post title
setS(prev=>({...prev,titleSrc:'custom'}))}>Custom headline
{s.titleSrc === 'custom' && setS(prev=>({...prev,titleText:e.target.value}))} placeholder="Custom headline" />}
)}
setToggle('screens')} />
{s.toggles.screens && (
Pick screens
)}
setToggle('people')} />
{s.toggles.people && (
Niches
Portrait treatment
setS(p=>({...p,portrait:'full'}))}>Full color
setS(p=>({...p,portrait:'navy'}))}>Navy duotone
setS(p=>({...p,portrait:'ring'}))}>Orange ring
)}
setToggle('numbers')} />
{s.toggles.numbers && (
Numbers
setS(p=>({...p,numbersText:e.target.value}))}
placeholder="e.g. CPL $47 → $19, conversion 8.1% → 32.4%, −59% lift" />
Highlight style
setS(p=>({...p,numStyle:'hero'}))}>Hero number
setS(p=>({...p,numStyle:'before-after'}))}>Before → After
setS(p=>({...p,numStyle:'grid'}))}>Stat grid
setS(p=>({...p,numStyle:'ribbon'}))}>Result ribbon
)}
setToggle('agency')} />
{s.toggles.agency && (
setS(p=>({...p,agencyName:e.target.value}))} placeholder="Agency name" />
setS(p=>({...p,agencyLoc:e.target.value}))} placeholder="Location" />
setS(p=>({...p,funnelName:e.target.value}))} placeholder="Funnel name" />
setS(p=>({...p,dateRange:e.target.value}))} placeholder="Date range" />
)}
setToggle('channels')} />
{s.toggles.channels && (
setS(p=>({...p,channels:{...p.channels,google:e.target.value}}))} placeholder="Google: $22" />
setS(p=>({...p,channels:{...p.channels,meta:e.target.value}}))} placeholder="Meta: $17" />
setS(p=>({...p,channels:{...p.channels,linkedin:e.target.value}}))} placeholder="LinkedIn: $31" />
setS(p=>({...p,channels:{...p.channels,tiktok:e.target.value}}))} placeholder="TikTok: $12" />
)}
{/* STEP 06 — 3D Icons (library picker) */}
setToggle('threed')} />
{s.toggles.threed && (
Style
Search icons
setS(p => ({ ...p, iconQuery: e.target.value }))} placeholder="search by name or category (coin, chart, money…)" />
setS(p => ({ ...p, selectedIcons: [] }))}>Clear all
)}
)}
{/* STEP 07 — Logos & brands */}
x.trim()).filter(Boolean).length} custom · ${(s.uploadedLogos||[]).length} uploaded`} on={s.toggles.logos} onToggle={() => setToggle('logos')} />
{s.toggles.logos && (
{['Competitor','Ad platform','Integration','AI'].map(group => (
{group}
))}
Custom logos (text only)
setS(p => ({ ...p, customLogos: e.target.value }))} placeholder="Notion, Figma, Shopify" />
Upload logo files
)}
{/* STEP 08 — Engine */}
setS(p=>({...p,engine:'prompt-only'}))}
title="Prompt only · copy" desc="Skip the API call, copy the brief to any model." />
setS(p=>({...p,engine:'gemini'}))}
title="Gemini · Nano Banana" desc="gemini-2.5-flash-image, end-to-end image render." />
{/* STEP 09 — Output */}
Destination
setToggle('supabase')} />
{s.toggles.supabase && (
Column to update
setS(p=>({...p,sbColumn:'cover_image_url'}))}>cover_image_url
setS(p=>({...p,sbColumn:'og_image_url'}))}>og_image_url
setS(p=>({...p,sbColumn:'none'}))}>none (storage only)
)}
{/* CTA */}
{/* ===== RIGHT (live brief preview) ===== */}
{/* Toast */}
{toast && (
Blog image generator
Blog tools / Image generator
Blog image generator that matches our brand.
Paste or upload the post markdown, pick what to include, and ship pixel-perfect cover and inline images. Output uploads to the blog-posts bucket and patches the matching row.
mdFileRef.current?.click()}
onDragOver={e => { e.preventDefault(); e.currentTarget.style.background = '#FFF8EE'; }}
onDragLeave={e => { e.currentTarget.style.background = '#fff'; }}
onDrop={e => { e.preventDefault(); e.currentTarget.style.background = '#fff'; onLoadMdFile(e.dataTransfer.files[0]); }}
style={{ border:'1.5px dashed #E5E7EB', borderRadius:12, padding:18, textAlign:'center', background:'#fff', color:'#6B7280', fontSize:12.5, cursor:'pointer' }}>
{s.mdFilename && Drop the post's .md file here
or click to browse.
onLoadMdFile(e.target.files[0])} />
Saves as {fileName} in
blog-posts/{SB_PREFIX}/
{PLACEMENTS_BI.map(p => (
setPlacement(p.id)} meta={p.w ? `${p.w} × ${p.h}` : null}>
{p.label}
))}
{s.placement === 'custom' && (
refFileRef.current?.click()}
onDragOver={e => { e.preventDefault(); }}
onDrop={e => { e.preventDefault(); onLoadRefImage(e.dataTransfer.files[0]); }}
style={{ border:'1.5px dashed #E5E7EB', borderRadius:12, padding:16, textAlign:'center', background:'#fff', color:'#6B7280', fontSize:12.5, cursor:'pointer', marginTop:10 }}>
}
)}
Drop a JPG, PNG or WebP
onLoadRefImage(e.target.files[0])} />
{s.refImage &&
{TEMPLATES_BI.map(t => (
setS(prev => ({ ...prev, template: t.id, slotFills: {} }))} />
))}
{(() => {
const tpl = TEMPLATES_BI.find(t => t.id === s.template) || TEMPLATES_BI[0];
if (!tpl.slots.length) return (
Freeform — no fixed positions. Use the Elements step to compose the image.
);
return (
{tpl.slots.map(slot => (
setS(prev => ({ ...prev, slotFills: { ...(prev.slotFills||{}), [slot.id]: fill }}))}
onClear={() => setS(prev => {
const next = { ...(prev.slotFills||{}) };
delete next[slot.id];
return { ...prev, slotFills: next };
})}
/>
))}
{SCREENS_BI.map(scr => (
toggleInArr('selectedScreens', scr.name)}>{scr.name}
))}
{NICHES_BI.map(n => (
toggleInArr('selectedNiches', n.id)}>
{n.name} · {n.sub}
))}
{ICON_STYLES_BI.map(opt => (
setS(p => ({ ...p, iconStyle: opt.id }))}>
{opt.label} · {opt.desc}
))}
{s.selectedIcons.length} icon{s.selectedIcons.length>1?'s':''} chosen
{LOGOS_BI.filter(l => l.group === group).map(l => (
toggleInArr('selectedLogos', l.id)}>{l.name}
))}
Server-side key in use
The Gemini API key lives in Supabase as GEMINI_API_KEY. Every Generate hits the get-gemini-api-key edge-function proxy — the key never reaches the browser.
{SB_PUBLIC_BASE}
{fileName}
{s.sbColumn === 'none'
? '-- No row update (uploads file only)'
: `UPDATE blog_posts\nSET ${s.sbColumn} = '${publicUrl}',\n updated_at = now()\nWHERE slug = '${s.slug || '[slug]'}';`}
Generate image
Copy prompt to skip the API call · Import to upload one made elsewhere.
{ importExternalImage(e.target.files[0]); e.target.value = ''; }} />
{toast.msg}
)}