Image Generation

1"use client";
2// beui.dev/components/agents/image-generation
3 
4import { Check, CircleAlert, RotateCcw } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import type { CSSProperties, ReactNode } from "react";
7import { useEffect, useRef } from "react";
8import { EASE_IN_OUT, EASE_OUT, SPRING_PRESS } from "@/lib/ease";
9import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
10import { cn } from "@/lib/utils";
11 
12export type ImageGenerationStatus =
13  | "queued"
14  | "generating"
15  | "refining"
16  | "complete"
17  | "error";
18 
19export interface ImageGenerationProps {
20  /** The completed media. Pass an img, Next Image, canvas, video, or custom preview. */
21  children?: ReactNode;
22  status?: ImageGenerationStatus;
23  /** Accessible description. Defaults to a description derived from prompt. */
24  label?: string;
25  prompt?: string;
26  resolution?: string;
27  /** CSS aspect ratio reserved before generated media is available. */
28  aspectRatio?: CSSProperties["aspectRatio"];
29  size?: "compact" | "fluid";
30  /** Lets the active dither cluster follow fine-pointer movement. */
31  interactive?: boolean;
32  statusText?: string;
33  showStatus?: boolean;
34  onRetry?: () => void;
35  className?: string;
36  mediaClassName?: string;
37  statusClassName?: string;
38}
39 
40const STATUS_TEXT: Record<ImageGenerationStatus, string> = {
41  queued: "Waiting to generate",
42  generating: "Generating image",
43  refining: "Refining details",
44  complete: "Image ready",
45  error: "Generation failed",
46};
47 
48const MEDIA_STATE: Record<
49  ImageGenerationStatus,
50  { filter: string; opacity: number; scale: number }
51> = {
52  queued: { filter: "blur(4px) saturate(0.75)", opacity: 0, scale: 1.02 },
53  generating: { filter: "blur(3px) saturate(0.85)", opacity: 0, scale: 1.015 },
54  refining: { filter: "blur(1.5px) saturate(0.95)", opacity: 0.62, scale: 1.005 },
55  complete: { filter: "blur(0px) saturate(1)", opacity: 1, scale: 1 },
56  error: { filter: "blur(2px) saturate(0.5)", opacity: 0.28, scale: 1 },
57};
58 
59const OVERLAY_OPACITY: Record<ImageGenerationStatus, number> = {
60  queued: 1,
61  generating: 1,
62  refining: 0.48,
63  complete: 0,
64  error: 0,
65};
66 
67const DOT_GAP = 10;
68const TWO_PI = Math.PI * 2;
69 
70function DitherMark({
71  status,
72  reduce,
73}: {
74  status: ImageGenerationStatus;
75  reduce: boolean;
76}) {
77  if (status === "complete") {
78    return <Check aria-hidden="true" className="size-3.5" />;
79  }
80 
81  if (status === "error") {
82// … truncated