[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", "@fal-ai/client": "1.6.2", "@paper-design/shaders-react": "0.0.52" }, "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/generate-image/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { fal } from "@fal-ai/client" // Configure fal with API key fal.config({ credentials: process.env.FAL_KEY, }) export async function POST(request: NextRequest) { try { console.log("[v0] API: Starting image generation request") const formData = await request.formData() const mode = formData.get("mode") as string const prompt = formData.get("prompt") as string console.log("[v0] API: Mode:", mode) console.log("[v0] API: Prompt:", prompt) if (!mode || !prompt) { console.log("[v0] API: Missing required fields") return NextResponse.json({ error: "Mode and prompt are required" }, { status: 400 }) } let result: any if (mode === "text-to-image") { console.log("[v0] API: Using text-to-image mode") result = await fal.subscribe("fal-ai/nano-banana", { input: { prompt: prompt, num_images: 1, output_format: "jpeg", }, logs: true, onQueueUpdate: (update) => { if (update.status === "IN_PROGRESS") { update.logs?.map((log) => log.message).forEach(console.log) } }, }) } else if (mode === "image-editing") { console.log("[v0] API: Using image-editing mode") const image1 = formData.get("image1") as File const image2 = formData.get("image2") as File if (!image1 || !image2) { console.log("[v0] API: Missing images for editing mode") return NextResponse.json({ error: "Two images are required for editing mode" }, { status: 400 }) } console.log("[v0] API: Converting images to base64") // Convert images to base64 const image1Buffer = await image1.arrayBuffer() const image2Buffer = await image2.arrayBuffer() const image1Base64 = `data:${image1.type};base64,${Buffer.from(image1Buffer).toString("base64")}` const image2Base64 = `data:${image2.type};base64,${Buffer.from(image2Buffer).toString("base64")}` console.log("[v0] API: Image1 base64 length:", image1Base64.length) console.log("[v0] API: Image2 base64 length:", image2Base64.length) result = await fal.subscribe("fal-ai/nano-banana/edit", { input: { prompt: prompt, image_urls: [image1Base64, image2Base64], }, logs: true, onQueueUpdate: (update) => { if (update.status === "IN_PROGRESS") { update.logs?.map((log) => log.message).forEach(console.log) } }, }) } else { console.log("[v0] API: Invalid mode:", mode) return NextResponse.json({ error: "Invalid mode. Must be 'text-to-image' or 'image-editing'" }, { status: 400 }) } console.log("[v0] API: Fal response received") console.log("[v0] API: Result data:", JSON.stringify(result.data, null, 2)) if (!result.data || !result.data.images || result.data.images.length === 0) { console.log("[v0] API: No images in response") throw new Error("No images generated") } const imageUrl = result.data.images[0].url const description = result.data.description || "" console.log("[v0] API: Generated image URL:", imageUrl) console.log("[v0] API: AI Description:", description) return NextResponse.json({ url: imageUrl, prompt: prompt, description: description, }) } catch (error) { console.error("[v0] API: Error generating image:", error) console.error("[v0] API: Error details:", { message: error instanceof Error ? error.message : "Unknown error", stack: error instanceof Error ? error.stack : undefined, }) return NextResponse.json( { error: "Failed to generate image", details: error instanceof Error ? error.message : "Unknown error occurred", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { ImageCombiner } from "@/components/image-combiner" export default function Home() { return (

) } [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 { /* Changed to all black theme */ --background: #000000; --foreground: #ffffff; --card: #000000; --card-foreground: #ffffff; --popover: #000000; --popover-foreground: #ffffff; --primary: #ffffff; --primary-foreground: #000000; --secondary: #111111; --secondary-foreground: #ffffff; --muted: #0a0a0a; --muted-foreground: #999999; --accent: #1a1a1a; --accent-foreground: #ffffff; --destructive: #ffffff; --destructive-foreground: #000000; --border: #333333; --input: #000000; --ring: #ffffff; --chart-1: #ffffff; --chart-2: #cccccc; --chart-3: #999999; --chart-4: #666666; --chart-5: #333333; --radius: 0rem; --sidebar: #000000; --sidebar-foreground: #ffffff; --sidebar-primary: #ffffff; --sidebar-primary-foreground: #000000; --sidebar-accent: #111111; --sidebar-accent-foreground: #ffffff; --sidebar-border: #333333; --sidebar-ring: #ffffff; --font-inter: "Inter", sans-serif; --font-jetbrains-mono: "JetBrains Mono", monospace; } .dark { /* Dark mode now same as light mode since everything is black */ --background: #000000; --foreground: #ffffff; --card: #000000; --card-foreground: #ffffff; --popover: #000000; --popover-foreground: #ffffff; --primary: #ffffff; --primary-foreground: #000000; --secondary: #111111; --secondary-foreground: #ffffff; --muted: #0a0a0a; --muted-foreground: #999999; --accent: #1a1a1a; --accent-foreground: #ffffff; --destructive: #ffffff; --destructive-foreground: #000000; --border: #333333; --input: #000000; --ring: #ffffff; --chart-1: #ffffff; --chart-2: #cccccc; --chart-3: #999999; --chart-4: #666666; --chart-5: #333333; --sidebar: #000000; --sidebar-foreground: #ffffff; --sidebar-primary: #ffffff; --sidebar-primary-foreground: #000000; --sidebar-accent: #111111; --sidebar-accent-foreground: #ffffff; --sidebar-border: #333333; --sidebar-ring: #ffffff; --font-inter: "Inter", sans-serif; --font-jetbrains-mono: "JetBrains Mono", monospace; } @theme inline { /* Updated font variables to use new Inter and JetBrains Mono fonts */ --font-sans: var(--font-inter); --font-mono: var(--font-jetbrains-mono); --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/image-combiner.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Upload, Download, Sparkles, ImageIcon, Edit, Zap, Shuffle } from "lucide-react" import { cn } from "@/lib/utils" import { Dithering } from "@paper-design/shaders-react" type Mode = "text-to-image" | "image-editing" interface GeneratedImage { url: string prompt: string description?: string } const randomPrompts = [ "A cyberpunk cityscape with neon lights reflecting on wet streets at midnight", "A majestic dragon soaring through clouds above ancient mountain peaks", "A cozy coffee shop in a treehouse with fairy lights and hanging plants", "An underwater palace made of coral with bioluminescent sea creatures", "A steampunk airship floating above Victorian London in golden hour", "A magical forest with glowing mushrooms and ethereal mist", "A futuristic space station orbiting a purple nebula", "A vintage diner on Route 66 with classic cars parked outside", "A crystal cave with rainbow light refractions and floating gems", "A Japanese garden in autumn with koi pond and red maple trees", "A post-apocalyptic library overgrown with vines and nature", "A floating island with waterfalls cascading into clouds below", "A neon-lit arcade from the 80s with retro gaming machines", "A medieval castle on a cliff during a thunderstorm", "A bioluminescent alien jungle with exotic flora and fauna", "A cozy cabin in snowy mountains with smoke from the chimney", "A surreal desert with giant clock towers and melting timepieces", "A Victorian greenhouse filled with exotic plants and butterflies", "A cybernetic wolf howling at a digital moon in cyberspace", "A floating market in Venice with gondolas and colorful awnings", "A crystal palace made of ice with aurora borealis overhead", "A retro-futuristic diner on Mars with Earth visible in the sky", "A mystical portal in an ancient stone circle at dawn", "A steampunk laboratory with brass instruments and glowing vials", "A underwater city with glass domes and swimming mermaids", "A giant tree house city connected by rope bridges", "A neon samurai in a rain-soaked Tokyo alleyway", "A magical bookstore where books float and pages turn themselves", "A desert oasis with palm trees and a crystal-clear spring", "A space elevator reaching from Earth to a orbital station", "A haunted mansion with glowing windows on a foggy night", "A robot garden where mechanical flowers bloom with LED petals", "A pirate ship sailing through clouds in the sky", "A crystal dragon perched on a mountain of gemstones", "A cyberpunk street market with holographic vendors", "A fairy tale cottage with a thatched roof and flower garden", "A futuristic subway station with levitating trains", "A magical academy floating in the clouds with flying students", "A bioluminescent coral reef city with mermaid inhabitants", "A steampunk clocktower with gears visible through glass panels", "A post-apocalyptic greenhouse dome in a wasteland", "A dragon's hoard in a crystal cave filled with treasure", "A cybernetic forest where trees have circuit board bark", "A floating monastery on a mountain peak above the clouds", "A retro space diner with alien customers and robot waiters", "A magical winter wonderland with ice sculptures and snow fairies", "A underwater volcano with thermal vents and exotic sea life", "A steampunk carnival with mechanical rides and brass decorations", "A crystal city built inside a massive geode", "A cyberpunk rooftop garden with neon plants and digital rain", "A medieval tavern with a roaring fireplace and wooden beams", "A space whale swimming through a nebula of stars", "A magical potion shop with floating ingredients and glowing bottles", "A post-apocalyptic overgrown subway station with nature reclaiming it", "A crystal bridge spanning between two floating islands", "A cybernetic phoenix rising from digital flames", "A cozy lighthouse on a rocky coast during a storm", "A steampunk airship dock with multiple vessels and brass fittings", "A magical mirror maze with reflections showing different worlds", "A bioluminescent mushroom forest with glowing spores floating", "A futuristic greenhouse on Mars growing Earth plants", "A dragon sleeping on a pile of books in an ancient library", "A cyberpunk street art mural that moves and changes colors", "A floating tea house above cherry blossom trees in spring", "A crystal waterfall flowing upward into the sky", "A steampunk submarine exploring an underwater canyon", "A magical snow globe containing a miniature winter village", "A post-apocalyptic rooftop garden with solar panels and plants", "A cybernetic butterfly garden with holographic flowers", "A medieval blacksmith shop with glowing forge and sparks", "A space elevator cable stretching into a starry sky", "A magical treehouse library with books growing on branches", "A bioluminescent cave system with underground rivers", "A steampunk observatory with a massive brass telescope", "A crystal palace floating in aurora-filled skies", "A cyberpunk food truck serving neon-colored dishes", "A cozy bookshop cat cafe with felines reading books", "A post-apocalyptic wind farm with nature growing around turbines", "A magical ice skating rink with frozen waterfalls as backdrop", "A underwater steampunk city with brass submarines", "A dragon's nest built in the crown of a giant tree", "A cybernetic garden where flowers bloom in binary patterns", "A floating wizard tower surrounded by levitating rocks", "A crystal mine with workers harvesting rainbow gems", "A steampunk train station with ornate Victorian architecture", "A magical aurora dancing over a frozen lake", "A bioluminescent alien forest with singing plants", "A post-apocalyptic arcade where nature has taken over the games", "A cyberpunk temple with holographic monks meditating", "A cozy hobbit hole with round doors and flower gardens", "A crystal cathedral with stained glass windows casting rainbow light", "A steampunk circus with mechanical performers and brass instruments", "A magical bookstore where stories come alive and walk around", ] export function ImageCombiner() { const [mode, setMode] = useState("text-to-image") const [image1, setImage1] = useState(null) const [image2, setImage2] = useState(null) const [image1Preview, setImage1Preview] = useState("") const [image2Preview, setImage2Preview] = useState("") const [image1Url, setImage1Url] = useState("") const [image2Url, setImage2Url] = useState("") const [useUrls, setUseUrls] = useState(false) const [isLoading, setIsLoading] = useState(false) const [generatedImage, setGeneratedImage] = useState(null) const [showAnimation, setShowAnimation] = useState(false) const [progress, setProgress] = useState(0) const [imageLoaded, setImageLoaded] = useState(false) const [prompt, setPrompt] = useState( mode === "text-to-image" ? "A beautiful landscape with mountains and a lake at sunset" : "Edit these images to create a cohesive artistic composition", ) const getRandomPrompt = () => { const randomIndex = Math.floor(Math.random() * randomPrompts.length) const randomPrompt = randomPrompts[randomIndex] setPrompt(randomPrompt) } useEffect(() => { return () => { // Cleanup function remains empty since progress is now controlled in generateImage } }, [isLoading]) const handleImageUpload = (file: File, imageNumber: 1 | 2) => { const reader = new FileReader() reader.onload = (e) => { const result = e.target?.result as string if (imageNumber === 1) { setImage1(file) setImage1Preview(result) } else { setImage2(file) setImage2Preview(result) } } reader.readAsDataURL(file) } const handleDrop = (e: React.DragEvent, imageNumber: 1 | 2) => { e.preventDefault() const file = e.dataTransfer.files[0] if (file && file.type.startsWith("image/")) { handleImageUpload(file, imageNumber) } } const handleFileSelect = (e: React.ChangeEvent, imageNumber: 1 | 2) => { const file = e.target.files?.[0] if (file) { handleImageUpload(file, imageNumber) } } const handleUrlChange = (url: string, imageNumber: 1 | 2) => { if (imageNumber === 1) { setImage1Url(url) setImage1Preview(url) setImage1(null) } else { setImage2Url(url) setImage2Preview(url) setImage2(null) } } const handleModeChange = (newMode: Mode) => { setMode(newMode) setPrompt( newMode === "text-to-image" ? "A beautiful landscape with mountains and a lake at sunset" : "Edit these images to create a cohesive artistic composition", ) setGeneratedImage(null) if (newMode === "text-to-image") { setImage1(null) setImage2(null) setImage1Preview("") setImage2Preview("") setImage1Url("") setImage2Url("") setUseUrls(false) } } const preloadImage = (url: string): Promise => { return new Promise((resolve, reject) => { const img = new Image() img.onload = () => resolve() img.onerror = reject img.src = url }) } const generateImage = async () => { if (mode === "image-editing" && !useUrls && (!image1 || !image2)) return if (mode === "image-editing" && useUrls && (!image1Url || !image2Url)) return if (mode === "text-to-image" && !prompt.trim()) return setIsLoading(true) setGeneratedImage(null) setImageLoaded(false) setProgress(0) setShowAnimation(true) const progressInterval = setInterval(() => { setProgress((prev) => { if (prev >= 96) { // Very slow progress after 96% to add more time return Math.min(prev + 0.1, 98) } else if (prev >= 90) { // Slower after 90% return prev + 0.3 } else if (prev >= 75) { // Moderate speed between 75-90% return prev + 0.6 } else if (prev >= 50) { // Good speed in middle range return prev + 0.9 } else if (prev >= 25) { // Moderate initial progress return prev + 1.1 } else { // Faster initial progress return prev + 1.3 } }) }, 100) // Slightly longer interval for more duration try { const formData = new FormData() formData.append("mode", mode) formData.append("prompt", prompt) if (mode === "image-editing") { if (useUrls) { formData.append("image1Url", image1Url) formData.append("image2Url", image2Url) } else if (image1 && image2) { formData.append("image1", image1) formData.append("image2", image2) } } const response = await fetch("/api/generate-image", { method: "POST", body: formData, }) if (!response.ok) { const errorText = await response.text() throw new Error(`Failed to generate image: ${response.status} - ${errorText}`) } const data = await response.json() clearInterval(progressInterval) setProgress(99) await new Promise((resolve) => setTimeout(resolve, 1000)) setProgress(100) await preloadImage(data.url) setImageLoaded(true) setGeneratedImage(data) setIsLoading(false) setShowAnimation(false) setProgress(0) } catch (error) { clearInterval(progressInterval) setProgress(0) setShowAnimation(false) console.error("Error generating image:", error) alert(`Error: ${error instanceof Error ? error.message : "Unknown error occurred"}`) setIsLoading(false) } } const downloadImage = async () => { if (generatedImage) { try { const response = await fetch(generatedImage.url) const blob = await response.blob() const url = window.URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = `nano-banana-${mode}-result.png` document.body.appendChild(link) link.click() document.body.removeChild(link) window.URL.revokeObjectURL(url) } catch (error) { console.error("Error downloading image:", error) // Fallback to opening in new tab if download fails window.open(generatedImage.url, "_blank") } } } const canGenerate = mode === "text-to-image" ? prompt.trim().length > 0 : useUrls ? image1Url && image2Url && prompt.trim().length > 0 : image1 && image2 && prompt.trim().length > 0 return (

v0 Nano Banana Starter

{/* Input Section */}

Input

{mode === "text-to-image" ? "Describe your image" : "Editing instructions"}

setPrompt(e.target.value)}
                    placeholder={
                      mode === "text-to-image"
                        ? "Describe the image you want to generate..."
                        : "Describe how to edit the images..."
                    }
                    className="w-full h-32 p-4 bg-black/50 border border-gray-600 rounded resize-none focus:outline-none focus:ring-2 focus:ring-white text-white text-base"
                  />
                </div>

<div className="h-40">
                  {mode === "image-editing" && (
                    <div>
                      <div className="flex items-center justify-between mb-4">
                        <div className="inline-flex bg-black/50 border border-gray-600 rounded">
                          <button
                            onClick={() => setUseUrls(false)}
                            className={cn(
                              "px-4 py-2 text-sm font-medium transition-all rounded-l",
                              !useUrls ? "bg-white text-black" : "text-gray-300 hover:text-white",
                            )}
                          >
                            Files
                          </button>
                          <button
                            onClick={() => setUseUrls(true)}
                            className={cn(
                              "px-4 py-2 text-sm font-medium transition-all rounded-r",
                              useUrls ? "bg-white text-black" : "text-gray-300 hover:text-white",
                            )}
                          >
                            URLs
                          </button>
                        </div>
                      </div>

{useUrls ? (
                        <div className="grid grid-cols-2 gap-4 mb-4">
                          <div>
                            <input
                              type="url"
                              value={image1Url}
                              onChange={(e) => handleUrlChange(e.target.value, 1)}
                              placeholder="Image 1 URL"
                              className="w-full p-4 bg-black/50 border border-gray-600 text-white text-base focus:outline-none focus:ring-2 focus:ring-white rounded"
                            />
                          </div>
                          <div>
                            <input
                              type="url"
                              value={image2Url}
                              onChange={(e) => handleUrlChange(e.target.value, 2)}
                              placeholder="Image 2 URL"
                              className="w-full p-4 bg-black/50 border border-gray-600 text-white text-base focus:outline-none focus:ring-2 focus:ring-white rounded"
                            />
                          </div>
                        </div>
                      ) : (
                        <div className="space-y-4 mb-6">
                          <div className="flex flex-wrap gap-4 justify-start">
                            <div
                              className={cn(
                                "border border-gray-600 rounded flex items-center justify-center cursor-pointer hover:border-white transition-all bg-black/30",
                                image1Preview && "border-white",
                              )}
                              onDrop={(e) => handleDrop(e, 1)}
                              onDragOver={(e) => e.preventDefault()}
                              onClick={() => document.getElementById("file1")?.click()}
                              style={{
                                width: "140px",
                                height: "120px",
                                flex: "0 0 auto",
                              }}
                            >
                              {image1Preview ? (
                                <div className="w-full h-full p-2">
                                  <img
                                    src={image1Preview || "/placeholder.svg"}
                                    alt="Image 1"
                                    className="w-full h-full object-contain rounded"
                                  />
                                </div>
                              ) : (
                                <div className="text-center text-gray-300 py-6">
                                  <Upload className="w-6 h-6 mx-auto mb-2" />
                                  <p className="text-sm">Image 1</p>
                                </div>
                              )}
                              <input
                                id="file1"
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(e) => handleFileSelect(e, 1)}
                              />
                            </div>

<div
                              className={cn(
                                "border border-gray-600 rounded flex items-center justify-center cursor-pointer hover:border-white transition-all bg-black/30",
                                image2Preview && "border-white",
                              )}
                              onDrop={(e) => handleDrop(e, 2)}
                              onDragOver={(e) => e.preventDefault()}
                              onClick={() => document.getElementById("file2")?.click()}
                              style={{
                                width: "140px",
                                height: "120px",
                                flex: "0 0 auto",
                              }}
                            >
                              {image2Preview ? (
                                <div className="w-full h-full p-2">
                                  <img
                                    src={image2Preview || "/placeholder.svg"}
                                    alt="Image 2"
                                    className="w-full h-full object-contain rounded"
                                  />
                                </div>
                              ) : (
                                <div className="text-center text-gray-300 py-6">
                                  <Upload className="w-6 h-6 mx-auto mb-2" />
                                  <p className="text-sm">Image 2</p>
                                </div>
                              )}
                              <input
                                id="file2"
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(e) => handleFileSelect(e, 2)}
                              />
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>

<Button
                  onClick={generateImage}
                  disabled={!canGenerate || isLoading}
                  className="w-full h-12 text-base font-semibold bg-white text-black hover:bg-gray-200 rounded"
                >
                  {isLoading ? (
                    <>{mode === "text-to-image" ? "Generating..." : "Running..."}</>
                  ) : (
                    <>
                      <Sparkles className="w-4 h-4 mr-2" />
                      Run
                    </>
                  )}
                </Button>
              </div>

{/* Result Section */}
              <div className="space-y-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold flex items-center gap-2 text-white">
                    <ImageIcon className="w-5 h-5" />
                    Result
                  </h3>
                  {generatedImage && (
                    <Button
                      onClick={downloadImage}
                      variant="outline"
                      size="sm"
                      className="text-sm h-8 px-3 bg-transparent border-gray-600 text-white hover:bg-gray-700"
                    >
                      <Download className="w-4 h-4 mr-2" />
                      Download
                    </Button>
                  )}
                </div>

<div className="flex items-center justify-center h-80">
                  {isLoading ? (
                    <div className="w-full h-full flex flex-col items-center justify-center">
                      <div className="w-full max-w-md">
                        <div className="relative h-8 bg-black/50 border border-gray-600 rounded overflow-hidden">
                          <div
                            className="absolute inset-0 opacity-20"
                            style={{
                              backgroundImage: `
                                linear-gradient(90deg, transparent 0%, transparent 49%, #333 49%, #333 51%, transparent 51%),
                                linear-gradient(0deg, transparent 0%, transparent 49%, #333 49%, #333 51%, transparent 51%)
                              `,
                              backgroundSize: "8px 8px",
                            }}
                          />

<div className="absolute inset-0 flex items-center justify-center">
                            <span className="text-sm font-mono text-white/80">{Math.round(progress)}%</span>
                          </div>
                        </div>

<div className="mt-4 text-center">
                          <p className="text-sm font-medium text-white animate-pulse">
                            {mode === "text-to-image" ? "Generating..." : "Running..."}
                          </p>
                        </div>
                      </div>
                    </div>
                  ) : generatedImage ? (
                    <div className="w-full h-full flex flex-col">
                      <div className="flex-1 flex items-center justify-center max-h-64">
                        <img
                          src={generatedImage.url || "/placeholder.svg"}
                          alt="Generated"
                          className={`max-w-full max-h-full object-contain rounded transition-opacity duration-500 ${
                            imageLoaded ? "opacity-100" : "opacity-0"
                          }`}
                          style={{
                            transform: imageLoaded ? "scale(1)" : "scale(1.05)",
                            transition: "opacity 0.5s ease-out, transform 0.5s ease-out",
                          }}
                        />
                      </div>
                      <div className="mt-4 p-3 bg-black/50 border border-gray-600 rounded">
                        <p className="text-sm text-gray-300">
                          <span className="font-semibold text-white">Prompt:</span> {generatedImage.prompt}
                        </p>
                      </div>
                    </div>
                  ) : (
                    <div className="text-center">
                      <div className="w-16 h-16 mx-auto mb-3 border border-gray-600 rounded flex items-center justify-center bg-black/50">
                        <ImageIcon className="w-8 h-8 text-gray-400" />
                      </div>
                      <p className="text-sm text-gray-400">Ready to generate</p>
                    </div>
                  )}
                </div>
              </div>
            </div>

<div className="mt-6 pt-4 border-t border-gray-600/50">
              <div className="flex items-center justify-center">
                <a
                  href="#"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-gray-400 hover:text-white transition-colors duration-200 flex items-center gap-2"
                >
                  <span>open in v0</span>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter, JetBrains_Mono } from "next/font/google"
import { Suspense } from "react"
import "./globals.css"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains-mono",
})

export const metadata: Metadata = {
  title: "v0 | Nano Banana Starter",
  description: "Created with v0",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-mono antialiased">
        <Suspense fallback={null}>{children}</Suspense>
      </body>
    </html>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This