\n \n

\n );\n}\n\nfunction App() {\n const [faceFile, setFaceFile] = useState(null);\n const [facePreview, setFacePreview] = useState(null);\n const [refFiles, setRefFiles] = useState([]);\n const [refPreviews, setRefPreviews] = useState([]);\n const [description, setDescription] = useState('');\n const [style, setStyle] = useState(STYLES[0].value);\n const [customStyle, setCustomStyle] = useState('');\n const [titleText, setTitleText] = useState('');\n const [status, setStatus] = useState('idle');\n const [progress, setProgress] = useState('');\n const [resultUrl, setResultUrl] = useState(null);\n const [errMsg, setErrMsg] = useState('');\n const [history, setHistory] = useState(loadHistory);\n const faceRef = useRef();\n const refRef = useRef();\n\n function onFaceChange(e) {\n const f = e.target.files?.[0];\n if (!f) return;\n setFaceFile(f);\n setFacePreview(URL.createObjectURL(f));\n }\n\n function onRefChange(e) {\n const files = Array.from(e.target.files || []);\n setRefFiles(p => [...p, ...files]);\n setRefPreviews(p => [...p, ...files.map(f => URL.createObjectURL(f))]);\n }\n\n function removeRef(i) {\n setRefFiles(p => p.filter((_, j) => j !== i));\n setRefPreviews(p => p.filter((_, j) => j !== i));\n }\n\n function removeFromHistory(ts) {\n const updated = history.filter(h => h.ts !== ts);\n setHistory(updated);\n saveHistory(updated);\n }\n\n async function generate() {\n const desc = description.trim();\n if (!desc) { setErrMsg('Please enter a scene description.'); return; }\n setStatus('uploading'); setErrMsg(''); setResultUrl(null);\n\n try {\n let faceUrl = null;\n if (faceFile) {\n setProgress('Uploading face photo…');\n faceUrl = await uploadAndGetUrl(faceFile);\n }\n\n const refUrls = [];\n for (let i = 0; i < refFiles.length; i++) {\n setProgress(`Uploading reference ${i + 1}/${refFiles.length}…`);\n refUrls.push(await uploadAndGetUrl(refFiles[i]));\n }\n\n const effectiveStyle = style === '__custom__' ? customStyle : style;\n let msg = `Create a YouTube thumbnail.\\n\\nStyle: ${effectiveStyle || 'youtube thumbnail, eye-catching, professional'}\\nScene: ${desc}\\n`;\n if (titleText) msg += `Include this title text: \"${titleText}\"\\n`;\n msg += '\\nGenerate a 16:9 aspect ratio thumbnail with bold, eye-catching design and professional composition.';\n\n const imageRef = faceUrl || refUrls[0] || null;\n // Build all reference images for Gemini: face photo + all uploaded reference images.\n // Kling only supports a single image so imageRef stays as-is for kling_image_url.\n // Always explicitly set both fields to prevent stale saved-config template references\n // (e.g. {{node.url}}) from being used when no image is provided.\n const allGeminiRefs = [...(faceUrl ? [faceUrl] : []), ...refUrls];\n const geminiRefValue = allGeminiRefs.length === 0\n ? ''\n : allGeminiRefs.length === 1\n ? allGeminiRefs[0]\n : JSON.stringify(allGeminiRefs);\n const configOverride = {\n message: msg,\n kling_image_url: imageRef || '',\n gemini_reference_image_url: geminiRefValue,\n };\n\n setStatus('generating');\n setProgress('');\n\n const results = await execution.runNodesAndGetOutput(\n [{ id: AGENT_NODE, config: configOverride }],\n [AGENT_NODE]\n ).all();\n\n const out = results[AGENT_NODE];\n const url = out?.images?.[0]?.url || out?.image_url;\n if (!url) throw new Error('No image URL returned.');\n\n setResultUrl(url);\n setStatus('done');\n\n // Save to history\n const entry = { url, description: desc, style: effectiveStyle, titleText, ts: Date.now() };\n const updated = [entry, ...history].slice(0, MAX_HISTORY);\n setHistory(updated);\n saveHistory(updated);\n } catch (e) {\n setStatus('error');\n const msg = e?.message || '';\n // In publish/read-only mode the SDK call times out or is blocked — show fork prompt\n if (msg.includes('timed out') || msg.includes('timeout') || msg.includes('not initialized') || msg.includes('not found')) {\n setErrMsg('Fork this template to generate thumbnails with your own API access.');\n } else {\n setErrMsg(msg || 'Generation failed.');\n }\n }\n }\n\n const busy = status === 'uploading' || status === 'generating';\n\n return (\n

YouTube Thumbnail Generator

Describe your scene → AI generates a 16:9 thumbnail

\n\n

\n {/* LEFT */}\n

\n Face Photo (optional)\n

faceRef.current.click()}\n className=\"border-2 border-dashed border-zinc-700 rounded-xl cursor-pointer hover:border-zinc-500 transition-colors overflow-hidden flex items-center justify-center min-h-28\">\n {facePreview\n ?

\n : 📷 Click to upload}\n

\n \n

\n\n

\n Reference Images (optional)\n

refRef.current.click()}\n className=\"border-2 border-dashed border-zinc-700 rounded-xl p-3 cursor-pointer hover:border-zinc-500 transition-colors flex flex-wrap gap-2 min-h-16 items-center\">\n {refPreviews.map((src, i) => (\n

\n \n

\n ))}\n

\n \n

\n\n

\n Scene Description *\n

setDescription(e.target.value)} rows={3}\n                placeholder=\"e.g. shocked expression, pointing at camera, neon gaming setup\"\n                className=\"w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-500 resize-none\" />\n            </div>\n\n            <div>\n              <label className=\"block text-xs font-semibold uppercase tracking-widest text-zinc-500 mb-2\">Style</label>\n              <div className=\"flex flex-wrap gap-2\">\n                {STYLES.map(s => (\n                  <button key={s.label} onClick={() => setStyle(s.value)}\n                    className={`px-3 py-1 rounded-full text-xs border transition-colors cursor-pointer ${style === s.value ? 'bg-white text-black border-white' : 'border-zinc-700 text-zinc-400 hover:border-zinc-500 bg-transparent'}`}>\n                    {s.label}\n                  </button>\n                ))}\n              </div>\n              {style === '__custom__' && (\n                <input value={customStyle} onChange={e => setCustomStyle(e.target.value)}\n                  placeholder=\"Describe your custom style…\"\n                  className=\"mt-2 w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-2 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-500\" />\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-xs font-semibold uppercase tracking-widest text-zinc-500 mb-2\">Title Text (optional)</label>\n              <input value={titleText} onChange={e => setTitleText(e.target.value)}\n                placeholder='\"I BROKE THE RECORD\"'\n                className=\"w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-500\" />\n            </div>\n\n            <button onClick={generate} disabled={busy || !description.trim()}\n              className=\"w-full py-3 rounded-xl font-semibold text-sm bg-white text-black hover:bg-zinc-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer border-0\">\n              {busy ? (status === 'uploading' ? progress : 'Generating…') : '✨ Generate Thumbnail'}\n            </button>\n\n            {errMsg && (\n              <div className=\"bg-red-950 border border-red-800 rounded-xl px-4 py-3 text-red-400 text-sm\">{errMsg}</div>\n            )}\n          </div>\n\n          {/* RIGHT */}\n          <div>\n            <label className=\"block text-xs font-semibold uppercase tracking-widest text-zinc-500 mb-2\">Generated Thumbnail</label>\n            <div className=\"border-2 border-zinc-800 rounded-xl overflow-hidden bg-zinc-900 flex items-center justify-center\" style={{aspectRatio:'16/9'}}>\n              {resultUrl\n                ? <img src={resultUrl} className=\"w-full h-full object-cover\" />\n                : status === 'generating'\n                  ? <Spinner />\n                  : <div className=\"text-center text-zinc-700\">\n                      <div className=\"text-5xl mb-3\">🖼️</div>\n                      <div className=\"text-sm\">Your thumbnail will appear here</div>\n                    </div>}\n            </div>\n            {resultUrl && (\n              <a href={resultUrl} download=\"thumbnail.png\"\n                className=\"mt-3 block text-center py-2.5 border border-zinc-700 rounded-xl text-sm text-zinc-300 hover:border-zinc-500 transition-colors no-underline\">\n                ⬇ Download Thumbnail\n              </a>\n            )}\n          </div>\n        </div>\n\n        {/* HISTORY */}\n        {history.length > 0 && (\n          <div className=\"mt-12\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h2 className=\"text-sm font-semibold uppercase tracking-widest text-zinc-500\">Recent Thumbnails</h2>\n              <button onClick={() => { setHistory([]); saveHistory([]); }}\n                className=\"text-xs text-zinc-600 hover:text-zinc-400 transition-colors cursor-pointer bg-transparent border-0\">\n                Clear all\n              </button>\n            </div>\n            <div className=\"grid grid-cols-4 gap-4\">\n              {history.map(h => (\n                <div key={h.ts} className=\"group relative rounded-xl overflow-hidden bg-zinc-900 border border-zinc-800 hover:border-zinc-600 transition-colors\">\n                  <a href={h.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                    <img src={h.url} className=\"w-full object-cover\" style={{aspectRatio:'16/9'}} />\n                  </a>\n                  <div className=\"p-2\">\n                    <p className=\"text-xs text-zinc-400 truncate\">{h.description}</p>\n                    <p className=\"text-xs text-zinc-600 mt-0.5\">{new Date(h.ts).toLocaleDateString(undefined, { month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' })}</p>\n                  </div>\n                  <div className=\"absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1\">\n                    <a href={h.url} download=\"thumbnail.png\"\n                      className=\"bg-black/70 rounded px-1.5 py-0.5 text-xs text-white no-underline\">⬇</a>\n                    <button onClick={() => removeFromHistory(h.ts)}\n                      className=\"bg-black/70 rounded px-1.5 py-0.5 text-xs text-white border-0 cursor-pointer\">×</button>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ncreateRoot(document.getElementById('root')).render(<App />);\n","mcpAnimationState","complete",884,{"_75":244,"_77":245},1015.3450614156402,-652.9068290584441,"interface",{"_248":249,"_269":270},"layout",[250,261,263,265,267],{"_251":252,"_253":29,"_254":255,"_75":256,"_77":256,"_257":258,"_259":260},"h",5,"i","w",4,0,"minH",2,"minW",3,{"_251":262,"_253":32,"_254":255,"_75":256,"_77":252,"_257":258,"_259":260},6,{"_251":63,"_253":35,"_254":255,"_75":256,"_77":264,"_257":260,"_259":260},11,{"_251":266,"_253":39,"_254":63,"_75":255,"_77":256,"_257":258,"_259":258},19,{"_251":255,"_253":51,"_254":262,"_75":256,"_77":268,"_257":258,"_259":260},16,"tabOrder",[51,271],"grid","variables",{},"display_metadata",{"_276":277,"_279":280,"_281":282,"_288":-5},"viewport",{"_75":256,"_77":256,"_278":187},"zoom","activeTab","canvas","flowHelperView",{"_71":283,"_279":284,"_285":7,"_286":151,"_287":7},529,"home","isExpanded","searchQuery","isFullScreen","selectedNodeId","owner_name","Sanskar Pandey","template_slug","thumbnail-generator","isEmbed","autoFork","initialView","actionData","errors"]
</article></body></html>