npx shadcn@latest add "https://tryelements.dev/r/use-ai-avatar"

import { useAiAvatar } from "@/components/elements/use-ai-avatar";

export function AvatarGenerator() {
  const { generateAvatar, isGenerating, avatarUrl, progress, status } = useAiAvatar({
    endpoint: "/api/generate-avatar",
    style: "pixel-art",
  });

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = await generateAvatar({ image: file });
      if (url) {
        console.log("Avatar generated:", url);
      }
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {isGenerating && <p>{status} ({progress}%)</p>}
      {avatarUrl && <img src={avatarUrl} alt="AI Avatar" />}
    </div>
  );
}

// app/api/generate-avatar/route.ts
import { NextRequest, NextResponse } from "next/server";
import * as fal from "@fal-ai/serverless-client";

fal.config({
  credentials: process.env.FAL_API_KEY,
});

export async function POST(req: NextRequest) {
  const { imageUrl, prompt, grayscale, removeBackground, outputSize } = await req.json();

  // Generate with FAL AI
  const result = await fal.subscribe("fal-ai/qwen-image-edit", {
    input: { prompt, image_url: imageUrl },
  });

  // Optional: Remove background
  if (removeBackground) {
    const bgResult = await fal.subscribe("fal-ai/birefnet/v2", {
      input: { image_url: result.images[0].url },
    });
    // Process and return...
  }

  return NextResponse.json({ url: result.images[0].url });
}