[V0_FILE]png:file="public/IA-HACK-PE-LLAMA.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IA-HACK-PE-LLAMA-VqahYZWdjGN2pY4Pi9xnRD0UKxPfnu.png" isMerged="true" [V0_FILE]jpg:file="public/logos/ia-hackathon-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/logos/ia-hackathon-logo-IV04tmoVpKZ1m73SZzd97zdzCsfIxt.jpg" isMerged="true" [V0_FILE]jpg:file="public/logos/hackathon-company-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/logos/hackathon-company-logo-bpgfptBmg3k6ndfIUc3efrwmH775v7.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@fal-ai/serverless-client": "0.15.0", "fs": "0.0.1-security", "path": "0.12.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="app/api/guardrail/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" // Categories of unsafe content const UNSAFE_CATEGORIES = { VIOLENCE: "violence", HATE: "hate", SEXUAL: "sexual", HARASSMENT: "harassment", SELF_HARM: "self_harm", ILLEGAL: "illegal", } // Keywords and patterns for content filtering const UNSAFE_PATTERNS = { [UNSAFE_CATEGORIES.VIOLENCE]: [ /\b(kill|murder|blood|gore|weapon|gun|knife|bomb|explod|attack|fight|hurt|pain|torture|violent)\b/i, ], [UNSAFE_CATEGORIES.HATE]: [/\b(hate|racist|discriminat|slur|offensive|derogatory)\b/i], [UNSAFE_CATEGORIES.SEXUAL]: [/\b(nude|naked|sex|porn|explicit|nsfw|adult)\b/i], [UNSAFE_CATEGORIES.HARASSMENT]: [/\b(bully|harass|threaten|intimidat|stalk)\b/i], [UNSAFE_CATEGORIES.SELF_HARM]: [/\b(suicide|self.?harm|cut|overdose)\b/i], [UNSAFE_CATEGORIES.ILLEGAL]: [/\b(drug|cocaine|heroin|meth|illegal|crime|steal|rob)\b/i], } // Check if prompt contains unsafe content function analyzePrompt(prompt: string): { status: "safe" | "unsafe" score: number reason?: string category?: string } { const lowerPrompt = prompt.toLowerCase() // Check each category for (const [category, patterns] of Object.entries(UNSAFE_PATTERNS)) { for (const pattern of patterns) { if (pattern.test(lowerPrompt)) { return { status: "unsafe", score: 95, reason: `Contenido potencialmente inapropiado detectado`, category, } } } } // Prompt is safe return { status: "safe", score: 100, } } export async function POST(request: NextRequest) { try { const body = await request.json() const { prompt } = body if (!prompt || typeof prompt !== "string") { return NextResponse.json({ error: "Prompt is required and must be a string" }, { status: 400 }) } // Analyze the prompt const result = analyzePrompt(prompt) return NextResponse.json(result) } catch (error) { return NextResponse.json( { error: "Failed to analyze prompt", details: error instanceof Error ? error.message : "Unknown error", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AlpacaGenerator } from "@/components/alpaca-generator" export default function Home() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" import { Oxanium as V0_Font_Oxanium, Source_Code_Pro as V0_Font_Source_Code_Pro, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts V0_Font_Oxanium({ weight: ["200","300","400","500","600","700","800"] }) V0_Font_Source_Code_Pro({ weight: ["200","300","400","500","600","700","800","900"] }) V0_Font_Source_Serif_4({ weight: ["200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } const geistSans = GeistSans.variable const geistMono = GeistMono.variable export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Full dark mode color scheme with black and gray shades */ --background: oklch(0.8452 0 0); --foreground: oklch(0.2393 0 0); --card: oklch(0.7572 0 0); --card-foreground: oklch(0.2393 0 0); --popover: oklch(0.7572 0 0); --popover-foreground: oklch(0.2393 0 0); --primary: oklch(0.5016 0.1887 27.4816); --primary-foreground: oklch(1.0000 0 0); --secondary: oklch(0.4955 0.0896 126.1858); --secondary-foreground: oklch(1.0000 0 0); --muted: oklch(0.7826 0 0); --muted-foreground: oklch(0.4091 0 0); --accent: oklch(0.5880 0.0993 245.7394); --accent-foreground: oklch(1.0000 0 0); --destructive: oklch(0.7076 0.1975 46.4558); --destructive-foreground: oklch(0 0 0); --border: oklch(0.4313 0 0); --input: oklch(0.4313 0 0); --ring: oklch(0.5016 0.1887 27.4816); --chart-1: oklch(0.5016 0.1887 27.4816); --chart-2: oklch(0.4955 0.0896 126.1858); --chart-3: oklch(0.5880 0.0993 245.7394); --chart-4: oklch(0.7076 0.1975 46.4558); --chart-5: oklch(0.5656 0.0431 40.4319); --radius: 0px; --sidebar: oklch(0.7572 0 0); --sidebar-foreground: oklch(0.2393 0 0); --sidebar-primary: oklch(0.5016 0.1887 27.4816); --sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-accent: oklch(0.5880 0.0993 245.7394); --sidebar-accent-foreground: oklch(1.0000 0 0); --sidebar-border: oklch(0.4313 0 0); --sidebar-ring: oklch(0.5016 0.1887 27.4816); --font-sans: 'Oxanium', 'Oxanium Fallback'; --font-mono: 'Source Code Pro', 'Source Code Pro Fallback'; --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback'; --shadow-x: 0px; --shadow-y: 2px; --shadow-blur: 4px; --shadow-spread: 0px; --shadow-opacity: 0.4; --shadow-color: #000000; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: 'Oxanium', 'Oxanium Fallback'; --font-mono: 'Source Code Pro', 'Source Code Pro Fallback'; --font-serif: 'Source Serif 4', 'Source Serif 4 Fallback'; /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), var(--shadow-x) var(--shadow-y) var(--shadow-blur) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), var(--shadow-x) var(--shadow-y) calc(max(0px, var(--shadow-blur) * 2 - 2px)) calc(var(--shadow-spread) - 2px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(max(0px, var(--shadow-blur) * 3 - 4px)) calc(var(--shadow-spread) - 4px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent), calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(max(0px, var(--shadow-blur) * 5 - 6px)) calc(var(--shadow-spread) - 6px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .dark { --background: #1a1a1a; --foreground: #e0e0e0; --card: #2a2a2a; --card-foreground: oklch(0.9067 0 0); --popover: #2a2a2a; --popover-foreground: oklch(0.9067 0 0); --primary: #ff1b3c; --primary-foreground: oklch(1.0000 0 0); --secondary: #7dae29; --secondary-foreground: oklch(0 0 0); --muted: #252525; --muted-foreground: oklch(0.7058 0 0); --accent: #5bd1ff; --accent-foreground: oklch(0 0 0); --destructive: #ff7600; --destructive-foreground: oklch(0 0 0); --border: #4a4a4a; --input: #4a4a4a; --ring: #ff1b3c; --chart-1: #ff1b3c; --chart-2: #7dae29; --chart-3: #5bd1ff; --chart-4: #ff7600; --chart-5: #a67e7a; --sidebar: #141414; --sidebar-foreground: oklch(0.9067 0 0); --sidebar-primary: oklch(0.6083 0.2090 27.0276); --sidebar-primary-foreground: oklch(1.0000 0 0); --sidebar-accent: oklch(0.7482 0.1235 244.7492); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0.4091 0 0); --sidebar-ring: oklch(0.6083 0.2090 27.0276); --shadow-x: 0px; --shadow-y: 2px; --shadow-blur: 5px; --shadow-spread: 0px; --shadow-opacity: 0.6; --shadow-color: #000000; } [V0_FILE]typescriptreact:file="components/alpaca-generator.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, Sparkles, Download, AlertCircle } from "lucide-react" import Image from "next/image" export function AlpacaGenerator() { const [prompt, setPrompt] = useState("") const [isGenerating, setIsGenerating] = useState(false) const [generatedImage, setGeneratedImage] = useState(null) const [error, setError] = useState(null) const [showOriginal, setShowOriginal] = useState(true) const handleGenerate = async () => { if (!prompt.trim()) { setError("Por favor ingresa una descripción para tu alpaca") return } console.log("[v0] Starting generation from client") console.log("[v0] Prompt:", prompt) setIsGenerating(true) setError(null) try { const formData = new FormData() formData.append("prompt", prompt) console.log("[v0] Sending request to /api/generate") const response = await fetch("/api/generate", { method: "POST", body: formData, }) console.log("[v0] Response status:", response.status) console.log("[v0] Response ok:", response.ok) const data = await response.json() console.log("[v0] Response data:", data) if (!response.ok) { if (data.error === "unsafe_content") { console.log("[v0] Unsafe content detected") setError(data.message) } else { console.log("[v0] Error from API:", data.details) setError(data.details || "Error al generar la imagen") } return } console.log("[v0] Image generated successfully:", data.url) setGeneratedImage(data.url) setShowOriginal(false) } catch (err) { console.error("[v0] Fetch error:", err) console.error("[v0] Error details:", err instanceof Error ? err.message : "Unknown error") setError("Error de conexión. Por favor intenta de nuevo.") } finally { setIsGenerating(false) console.log("[v0] Generation process completed") } } const handleDownload = () => { if (generatedImage) { const link = document.createElement("a") link.href = generatedImage link.download = "alpaca-ia-hackathon.jpg" document.body.appendChild(link) link.click() document.body.removeChild(link) } } const handleReset = () => { setPrompt("") setGeneratedImage(null) setError(null) setShowOriginal(true) } return (

{/* Main content */}

Generador de Alpacas IA

Personaliza la alpaca oficial del IA Hackathon Perú con inteligencia artificial. Describe cómo quieres que se vea y deja que la IA haga su magia.

Describe tu alpaca

setPrompt(e.target.value)}
                className="min-h-32 resize-none"
                disabled={isGenerating}
              />
            </div>

{error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

<Button onClick={handleGenerate} disabled={isGenerating} className="w-full" size="lg">
              {isGenerating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Generando...
                </>
              ) : (
                <>
                  <Sparkles className="mr-2 h-4 w-4" />
                  Generar Alpaca
                </>
              )}
            </Button>
          </div>

<div className="rounded-lg border border-border/40 bg-muted/50 p-4">
            <h3 className="mb-2 font-semibold">Consejos</h3>
            <ul className="space-y-1 text-sm text-muted-foreground">
              <li>• Sé específico con los detalles que quieres agregar</li>
              <li>• La alpaca y el branding se mantendrán intactos</li>
              <li>• Prueba diferentes estilos: cyberpunk, retro, futurista</li>
              <li>• El contenido inapropiado será filtrado automáticamente</li>
            </ul>
          </div>
        </div>

<div className="flex flex-1 flex-col gap-4">
          <Card className="relative aspect-[3/4] overflow-hidden bg-muted">
            {showOriginal || !generatedImage ? (
              <Image src="/IA-HACK-PE-LLAMA.png" alt="IA Hackathon Alpaca" fill className="object-contain" priority />
            ) : (
              <Image
                src={generatedImage || "/placeholder.svg"}
                alt="Generated Alpaca"
                fill
                className="object-contain"
              />
            )}
          </Card>

{generatedImage && !showOriginal && (
            <div className="flex gap-2">
              <Button onClick={handleDownload} variant="outline" className="flex-1 bg-transparent">
                <Download className="mr-2 h-4 w-4" />
                Descargar
              </Button>
              <Button onClick={handleReset} variant="outline" className="flex-1 bg-transparent">
                Crear Otra
              </Button>
            </div>
          )}
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-border/40 py-6">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>Powered by FAL AI • IA Hackathon Perú 2024</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/generate/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import * as fal from "@fal-ai/serverless-client"

// Configure FAL AI client with API credentials
fal.config({
  credentials: process.env.FAL_KEY,
})

// Fun Spanish messages for unsafe prompts
const UNSAFE_MESSAGES = [
  "¡Uhmm bastante ingenioso, pero usamos guardrails, no te puedo ayudar con eso! 🦙",
  "¡Uy! Ese prompt se ve un poco sospechoso. Mejor probemos con algo más alpaca-friendly 🌟",
  "¡Qué creativo! Pero mejor mantengámonos en el territorio alpaca 🦙✨",
  "¡Ups! Ese contenido no pasa nuestros filtros. ¿Qué tal algo más tierno con alpacas? 🦙💕",
  "¡Interesante propuesta! Pero prefiero crear alpacas adorables y family-friendly 🌈🦙",
]

// Function to get a random unsafe message
function getRandomUnsafeMessage(): string {
  return UNSAFE_MESSAGES[Math.floor(Math.random() * UNSAFE_MESSAGES.length)]
}

// Function to check prompt safety using guardrail API
async function checkPromptSafety(
  prompt: string,
  request: NextRequest,
): Promise<{
  status: "safe" | "unsafe"
  score: number
  reason?: string
  category?: string
}> {
  try {
    // Make internal API call to guardrail endpoint
    const guardrailUrl = new URL("/api/guardrail", request.url)

const response = await fetch(guardrailUrl.toString(), {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ prompt }),
    })

if (!response.ok) {
      console.warn("Guardrail API call failed, proceeding with caution")
      return { status: "safe", score: 70 }
    }

return await response.json()
  } catch (error) {
    console.error("Error calling guardrail API:", error)
    // Fail safely - allow generation but with lower confidence
    return { status: "safe", score: 70 }
  }
}

// Function to fetch and convert image to base64
async function getImageAsBase64(imageUrl: string): Promise<string> {
  console.log("[v0] Fetching image from:", imageUrl)
  const response = await fetch(imageUrl)
  if (!response.ok) {
    throw new Error(`Failed to fetch image: ${response.statusText}`)
  }
  const arrayBuffer = await response.arrayBuffer()
  const buffer = Buffer.from(arrayBuffer)
  const base64 = buffer.toString("base64")
  console.log("[v0] Image converted to base64, size:", buffer.length, "bytes")
  return `data:image/png;base64,${base64}`
}

// Generate images by editing the base alpaca image using FAL AI
export async function POST(request: NextRequest) {
  try {
    console.log("[v0] Starting image generation request")

// Extract prompt from form data
    const formData = await request.formData()
    const prompt = formData.get("prompt") as string

console.log("[v0] Received prompt:", prompt)

// Validate required prompt parameter
    if (!prompt) {
      console.log("[v0] Error: No prompt provided")
      return NextResponse.json({ error: "Prompt is required" }, { status: 400 })
    }

// Check prompt safety using guardrail API
    console.log("[v0] Checking prompt safety for:", prompt.substring(0, 50) + "...")
    const safetyCheck = await checkPromptSafety(prompt, request)
    console.log("[v0] Safety check result:", safetyCheck)

// If prompt is unsafe, return fun Spanish message
    if (safetyCheck.status === "unsafe") {
      console.log("[v0] Prompt flagged as unsafe")
      const funMessage = getRandomUnsafeMessage()
      return NextResponse.json(
        {
          error: "unsafe_content",
          message: funMessage,
          details: safetyCheck.reason || "Contenido no apropiado detectado",
          score: safetyCheck.score,
          category: safetyCheck.category,
        },
        { status: 400 },
      )
    }

console.log("[v0] Prompt passed safety check with score:", safetyCheck.score)

const basePreservationPrompt =
      "IMPORTANT: You must preserve every element of the original design exactly as it appears in the source image. " +
      "This includes the alpaca character design, the IA HACKATHON logo, all brand marks, typography, text, color palette, layout, and overall artistic style. " +
      "Do not alter, distort, replace, reposition, recolor, or remove any existing branding components. " +
      "Do not add overlays, filters, effects, or modifications that could compromise the visibility, proportions, or integrity of the original design. " +
      "Your task is to only add or modify elements as explicitly described in the following instructions, while ensuring that the original alpaca, branding, and visual identity remain completely intact and unchanged. " +
      "The final result must seamlessly integrate any new elements into the existing style without disrupting brand consistency. " +
      "Now based on the following prompt, generate the image: "

const enhancedPrompt = basePreservationPrompt + prompt
    console.log("[v0] Enhanced prompt created")

const imageUrl = new URL("/IA-HACK-PE-LLAMA.png", request.url).toString()
    console.log("[v0] Fetching base image from URL:", imageUrl)

const imageBase64 = await getImageAsBase64(imageUrl)

console.log("[v0] Calling FAL AI API with model: fal-ai/nano-banana/edit")
    console.log("[v0] FAL_KEY present:", !!process.env.FAL_KEY)

// Generate image using FAL AI nano-banana edit model with base alpaca image
    const result: any = await fal.subscribe("fal-ai/nano-banana/edit", {
      input: {
        prompt: enhancedPrompt,
        image_urls: [imageBase64],
        num_images: 1,
        output_format: "jpeg",
      },
    })

console.log("[v0] FAL AI response received:", JSON.stringify(result, null, 2))

if (!result.images || result.images.length === 0) {
      console.log("[v0] Error: No images in response")
      throw new Error("No images generated")
    }

// Extract image URL and AI description from response
    const generatedImageUrl = result.images[0].url
    const description = result.description || ""

console.log("[v0] Image generated successfully:", generatedImageUrl)

// Return generated image data (with original user prompt for display)
    return NextResponse.json({
      url: generatedImageUrl,
      prompt: prompt,
      description: description,
      enhancedPrompt: enhancedPrompt,
    })
  } catch (error) {
    console.error("[v0] Error in generate route:", error)
    console.error("[v0] Error stack:", error instanceof Error ? error.stack : "No stack trace")

// Return user-friendly error response
    return NextResponse.json(
      {
        error: "Failed to generate image",
        details: error instanceof Error ? error.message : "Unknown error occurred",
      },
      { status: 500 },
    )
  }
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from railly

More Templates Like This

About

Tags

Share

About

Tags

Share

More from railly

More Templates Like This