{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-image-generation", "title": "AI Image Generation", "description": "Prompt flow, generation progress, remix controls, and a downloadable gallery.", "dependencies": [ "lucide-react@^1.33.0" ], "registryDependencies": [ "https://components.exe.xyz/r/app-shell.json", "https://components.exe.xyz/r/chip.json", "https://components.exe.xyz/r/icon-button.json", "https://components.exe.xyz/r/kbd.json", "https://components.exe.xyz/r/notification.json", "https://components.exe.xyz/r/sidebar.json", "https://components.exe.xyz/r/tabs.json", "https://components.exe.xyz/r/textarea.json", "https://components.exe.xyz/r/tooltip.json", "https://components.exe.xyz/r/utils.json" ], "files": [ { "path": "src/components/templates/ai-image-generation.tsx", "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport {\n Copy,\n Download,\n Heart,\n Menu,\n Mic,\n RefreshCw,\n Send,\n Sparkles,\n} from \"lucide-react\"\n\nimport { Sidebar } from \"@/components/blocks/sidebar\"\nimport { AppShell } from \"@/components/templates/app-shell\"\nimport { Chip } from \"@/components/ui/chip\"\nimport { IconButton } from \"@/components/ui/icon-button\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport {\n Notification,\n NotificationViewport,\n} from \"@/components/ui/notification\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\n\nfunction plate(bg: string, ink: string, mark: string, motif: string) {\n const svg = `${mark}`\n return `data:image/svg+xml,${encodeURIComponent(svg)}`\n}\n\nconst GALLERY = [\n {\n src: plate(\n \"#dfe6e1\",\n \"#1a2421\",\n \"GREEN APE\",\n \"M140 250 Q200 120 260 250 Q200 220 140 250 Z\"\n ),\n alt: \"Sage-ink sketch of an ape on archival paper\",\n caption: \"Green ape\",\n },\n {\n src: plate(\n \"#f3f6f3\",\n \"#1a2421\",\n \"CLOUD CROWN\",\n \"M110 210 Q140 150 180 190 Q210 140 250 185 Q290 155 310 210 Q200 250 110 210 Z\"\n ),\n alt: \"Layered cloud forms with a crown silhouette\",\n caption: \"Cloud crown\",\n },\n {\n src: plate(\n \"#cfd8d2\",\n \"#1a2421\",\n \"CAT + BEER\",\n \"M150 160 L170 210 L230 210 L250 160 L230 230 L170 230 Z\"\n ),\n alt: \"Cat sitting beside a tankard, field-note style\",\n caption: \"Cat with a beer\",\n },\n {\n src: plate(\n \"#e8d3c4\",\n \"#1a2421\",\n \"HANOK\",\n \"M80 220 L200 140 L320 220 L300 280 L100 280 Z\"\n ),\n alt: \"Hanok roof line over a bookshop facade\",\n caption: \"Hanok bookshop\",\n },\n {\n src: plate(\n \"#1a2421\",\n \"#dfe6e1\",\n \"NAIROBI\",\n \"M90 260 L130 180 L170 240 L220 150 L270 230 L330 170 L330 280 L90 280 Z\"\n ),\n alt: \"Nairobi skyline as ink bars on dark ground\",\n caption: \"Nairobi Vibes\",\n },\n {\n src: plate(\n \"#c45c26\",\n \"#fff7f0\",\n \"RONIN\",\n \"M200 120 L230 210 L200 280 L170 210 Z\"\n ),\n alt: \"Ronin figure in signal rust on a field sheet\",\n caption: \"Ronin in red\",\n },\n]\n\nconst MESSI = plate(\n \"#dfe6e1\",\n \"#1a2421\",\n \"EDITORIAL 01\",\n \"M160 250 Q200 90 240 250 L230 300 L170 300 Z\"\n)\n\nconst DEFAULT_PROMPT =\n \"Create a vintage editorial illustration of Lionel Messi dribbling in Argentina's home kit against a blue background.\"\nconst DEFAULT_GENERATING = {\n progress: 0.42,\n remainingLabel: \"8 seconds remaining\",\n}\n\nfunction generatedPlate(prompt: string) {\n const score = [...prompt].reduce((sum, char) => sum + char.charCodeAt(0), 0)\n const palettes = [\n [\"#dfe6e1\", \"#1a2421\"],\n [\"#e8d3c4\", \"#3a241a\"],\n [\"#1a2421\", \"#dfe6e1\"],\n [\"#c45c26\", \"#fff7f0\"],\n ]\n const [background, ink] = palettes[score % palettes.length]\n const mark = prompt\n .toUpperCase()\n .replace(/[^A-Z0-9 ]/g, \"\")\n .slice(0, 22)\n const bend = 120 + (score % 80)\n return plate(\n background,\n ink,\n mark || \"UNTITLED\",\n `M95 275 Q${bend} 95 205 210 Q290 ${130 + (score % 60)} 315 285 L270 330 L130 325 Z`\n )\n}\n\nexport function AiImageGenerationTemplate({\n prompt = DEFAULT_PROMPT,\n images = GALLERY,\n generating = DEFAULT_GENERATING,\n onGenerate,\n}: {\n prompt?: string\n images?: { src: string; alt: string; caption: string }[]\n generating?: { progress: number; remainingLabel: string } | null\n onGenerate?: (prompt: string) => void\n} = {}) {\n const [mobileOpen, setMobileOpen] = useState(false)\n const [collapsed, setCollapsed] = useState(false)\n const [draft, setDraft] = useState(prompt)\n const [currentPrompt, setCurrentPrompt] = useState(prompt)\n const [currentImage, setCurrentImage] = useState(MESSI)\n const [copied, setCopied] = useState(false)\n const [toast, setToast] = useState(null)\n const [reduced, setReduced] = useState(false)\n const [ready, setReady] = useState(generating == null)\n const [remaining, setRemaining] = useState(generating?.remainingLabel ?? \"\")\n const [liked, setLiked] = useState([])\n\n useEffect(() => {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n setReduced(mq.matches)\n const onChange = () => setReduced(mq.matches)\n mq.addEventListener(\"change\", onChange)\n return () => mq.removeEventListener(\"change\", onChange)\n }, [])\n\n useEffect(() => {\n if (generating == null || reduced) {\n setReady(true)\n return\n }\n setReady(false)\n const timer = window.setTimeout(() => setReady(true), 2400)\n const tick = window.setTimeout(() => setRemaining(\"Image ready\"), 1800)\n return () => {\n window.clearTimeout(timer)\n window.clearTimeout(tick)\n }\n }, [generating, reduced])\n\n async function copyPrompt() {\n try {\n await navigator.clipboard.writeText(currentPrompt)\n setCopied(true)\n setToast(\"Prompt copied\")\n window.setTimeout(() => setCopied(false), 1600)\n } catch {\n setToast(\"Copy failed\")\n }\n window.setTimeout(() => setToast(null), 2200)\n }\n\n function generate() {\n const text = draft.trim()\n if (!text) return\n onGenerate?.(text)\n setCurrentPrompt(text)\n setCurrentImage(generatedPlate(text))\n setReady(reduced)\n setRemaining(reduced ? \"Image ready\" : \"8 seconds remaining\")\n if (!reduced) {\n window.setTimeout(() => setRemaining(\"Image ready\"), 1800)\n window.setTimeout(() => setReady(true), 2400)\n }\n }\n\n return (\n \n \n Skip to thread\n \n {\n setDraft(\"\")\n setCurrentPrompt(\"\")\n setCurrentImage(\"\")\n setReady(true)\n setToast(\"New image ready\")\n },\n }}\n agentSecondaryAction={{ label: \"Open gallery\", href: \"#gallery-panel\" }}\n repositories={[\n {\n id: \"plates\",\n name: \"field-plates\",\n chats: [\n { id: \"g1\", title: \"Editorial Messi\", relativeTime: \"now\" },\n { id: \"g2\", title: \"Ronin in red\", relativeTime: \"2h\" },\n ],\n },\n ]}\n plan={{ name: \"Studio plan\", description: \"41 generations left\" }}\n />\n
\n
\n
\n setMobileOpen(true)}\n />\n

Editorial Messi

\n field-plates\n
\n
\n
\n {currentPrompt ? (\n
\n

\n You\n

\n

{currentPrompt}

\n
\n \n \n void copyPrompt()}\n />\n \n \n {copied ? \"Copied\" : \"Copy prompt\"}\n \n \n
\n
\n ) : null}\n {currentImage ? (\n \n ) : (\n
\n Write a prompt to generate a new plate.\n
\n )}\n
\n
\n {\n event.preventDefault()\n generate()\n }}\n >\n \n setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (\n event.key === \"Enter\" &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n generate()\n }\n }}\n placeholder=\"Describe a plate to generate…\"\n rows={3}\n className=\"min-h-16 rounded-[2px] border-0 shadow-none focus-visible:ring-0\"\n />\n
\n \n Generate\n ⌘\n Enter\n \n {\n setDraft((current) =>\n `${current.trim()} Add natural film grain.`.trim()\n )\n setToast(\"Dictation added\")\n }}\n />\n \n
\n
\n \n
\n \n \n \n \n Gallery\n \n \n Styles\n \n \n \n
    \n {images.map((image) => (\n
  • \n
    \n {image.alt}\n
    \n {image.caption}\n
    \n
    \n {\n const anchor = document.createElement(\"a\")\n anchor.href = image.src\n anchor.download = `${image.caption.toLowerCase().replace(/\\s+/g, \"-\")}.svg`\n anchor.click()\n setToast(`${image.caption} downloaded`)\n }}\n />\n {\n setDraft(\n `Remix ${image.caption} with a quieter palette and tighter crop.`\n )\n setToast(`${image.caption} loaded into the prompt`)\n }}\n />\n {\n setLiked((current) =>\n current.includes(image.caption)\n ? current.filter(\n (caption) => caption !== image.caption\n )\n : [...current, image.caption]\n )\n setToast(\n liked.includes(image.caption)\n ? `${image.caption} removed from favorites`\n : `${image.caption} saved to favorites`\n )\n }}\n />\n
    \n
    \n
    • \n ))}\n
\n \n \n Field note, editorial ink, rust wash, night plot.\n \n \n \n \n {toast ? (\n \n setToast(null)}\n autoDismissDuration={2000}\n />\n \n ) : null}\n \n )\n}\n\nfunction GenerationFrame({\n ready,\n reduced,\n remaining,\n src,\n alt,\n}: {\n ready: boolean\n reduced: boolean\n remaining: string\n src: string\n alt: string\n}) {\n const showStill = reduced || ready\n return (\n \n
\n

Generation

\n

\n {showStill ? \"Image ready\" : remaining}\n

\n
\n
\n {showStill ? (\n \n ) : (\n \n )}\n
\n \n )\n}\n", "type": "registry:block" } ], "type": "registry:block" }