{
  "id": "image-gen",
  "name": "Image Generator",
  "category": "multi-modal",
  "tags": ["image", "AI", "generation", "prompt"],
  "description": "Image generation prompt UI with a placeholder result preview.",
  "triggers": ["image gen", "generate image", "AI image", "create picture"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function ImageGen() {\n  const [prompt, setPrompt] = React.useState('A serene mountain lake at sunset with reflections');\n  const [generating, setGenerating] = React.useState(false);\n  const [result, setResult] = React.useState(null);\n  const [history, setHistory] = React.useState([\n    { prompt: 'A futuristic city skyline at night', status: 'done' },\n    { prompt: 'A cozy cabin in snowy woods', status: 'done' }\n  ]);\n\n  function generate() {\n    if (!prompt.trim()) return;\n    setGenerating(true);\n    setResult(null);\n    setTimeout(() => {\n      setResult({ prompt, seed: Math.floor(Math.random() * 1000000) });\n      setHistory([{ prompt, status: 'done' }, ...history]);\n      setGenerating(false);\n    }, 1500);\n  }\n\n  const placeholders = [\n    'A cat astronaut in space',\n    'Vintage car on a coastal road',\n    'Abstract geometric pattern',\n    'Mystical forest with glowing mushrooms'\n  ];\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h2 style={{ margin: '0 0 12px 0', fontSize: 18, color: '#1a1a1a' }}>Image Generator</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>\n        <textarea\n          value={prompt}\n          onChange={e => setPrompt(e.target.value)}\n          style={{ flex: 1, height: 50, padding: 10, borderRadius: 6, border: '1px solid #ddd', fontSize: 13, resize: 'none', boxSizing: 'border-box' }}\n          placeholder=\"Describe the image you want to generate...\"\n        />\n        <button\n          onClick={generate}\n          disabled={generating}\n          style={{ padding: '0 18px', borderRadius: 6, border: 'none', background: generating ? '#9ca3af' : '#7c3aed', color: '#fff', fontSize: 13, cursor: generating ? 'not-allowed' : 'pointer' }}\n        >\n          {generating ? '...' : 'Generate'}\n        </button>\n      </div>\n      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>\n        {placeholders.map((p, i) => (\n          <button\n            key={i}\n            onClick={() => setPrompt(p)}\n            style={{ padding: '4px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#f3f4f6', fontSize: 11, cursor: 'pointer', color: '#374151' }}\n          >\n            {p.length > 25 ? p.slice(0, 25) + '...' : p}\n          </button>\n        ))}\n      </div>\n      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>\n        <div style={{ flex: 1, borderRadius: 8, background: '#f3f4f6', border: '1px solid #e5e7eb', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', position: 'relative' }}>\n          {generating ? (\n            <div style={{ textAlign: 'center', color: '#6b7280' }}>\n              <div style={{ width: 32, height: 32, border: '3px solid #e5e7eb', borderTopColor: '#7c3aed', borderRadius: '50%', animation: 'spin 1s linear infinite', margin: '0 auto 8px' }} />\n              <div style={{ fontSize: 13 }}>Generating image...</div>\n            </div>\n          ) : result ? (\n            <div style={{ textAlign: 'center', padding: 20 }}>\n              <div style={{ width: 120, height: 120, borderRadius: 12, background: 'linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%)', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 48 }}>\\ud83c\\udfa8</div>\n              <div style={{ fontSize: 12, color: '#6b7280', maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{result.prompt}</div>\n              <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 4 }}>Seed: {result.seed}</div>\n            </div>\n          ) : (\n            <div style={{ color: '#9ca3af', fontSize: 13, textAlign: 'center' }}>Your generated image will appear here</div>\n          )}\n        </div>\n        <div style={{ maxHeight: 100, overflowY: 'auto' }}>\n          <div style={{ fontSize: 11, color: '#9ca3af', marginBottom: 4 }}>Recent</div>\n          {history.map((h, i) => (\n            <div\n              key={i}\n              onClick={() => setPrompt(h.prompt)}\n              style={{ padding: '6px 10px', borderRadius: 6, background: '#f9fafb', marginBottom: 4, fontSize: 12, color: '#4b5563', cursor: 'pointer', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n            >\n              {h.prompt}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\nrender(<ImageGen/>);",
  "placeholders": []
}