import React, { useState, useRef, useEffect } from 'react'; import { Upload, X, Image as ImageIcon, Sparkles, AlertCircle, Download, Banana, RefreshCw } from 'lucide-react'; const apiKey = ""; // API Key injected by environment export default function App() { const [childPhoto, setChildPhoto] = useState(null); const [adultPhoto, setAdultPhoto] = useState(null); const [generatedImage, setGeneratedImage] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [status, setStatus] = useState(''); // File handling helpers const handleFileChange = (e, setPhoto) => { const file = e.target.files[0]; if (file) { if (file.size > 5 * 1024 * 1024) { setError("File size too large. Please upload images under 5MB."); return; } const reader = new FileReader(); reader.onloadend = () => { setPhoto({ file, preview: reader.result, base64: reader.result.split(',')[1], mimeType: file.type }); setError(null); }; reader.readAsDataURL(file); } }; // API Call with Exponential Backoff const generateImage = async () => { if (!childPhoto || !adultPhoto) { setError("Please upload both photos to continue."); return; } setLoading(true); setError(null); setGeneratedImage(null); setStatus('Initializing Nano Banana Model...'); const prompt = ` Generate a realistic, high-quality image based on the two input images provided. The first image is a child. The second image is an adult. Create a heartwarming scene where the adult (from the second image) is holding hands with the child (from the first image). Key Requirements: 1. The interaction must look natural and emotional. 2. The person from the recent photo (adult) should be interacting with their younger self (child). 3. Use soft, studio-quality lighting. 4. The background must be a smooth, clean white/off-white background. 5. The style should be photorealistic. `; // Construct Payload const payload = { contents: [{ parts: [ { text: prompt }, { inlineData: { mimeType: childPhoto.mimeType, data: childPhoto.base64 } }, { inlineData: { mimeType: adultPhoto.mimeType, data: adultPhoto.base64 } } ] }], generationConfig: { responseModalities: ["TEXT", "IMAGE"] } }; const makeRequest = async (retryCount = 0) => { try { setStatus(retryCount > 0 ? `Optimizing pixels (Attempt ${retryCount + 1})...` : 'Processing temporal fusion...'); const response = await fetch( `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(payload) } ); if (!response.ok) { // Handle specific API errors if (response.status === 503) throw new Error("Model overloaded"); const errData = await response.json(); throw new Error(errData.error?.message || `API Error: ${response.status}`); } const result = await response.json(); // Extract Image const imagePart = result.candidates?.[0]?.content?.parts?.find(p => p.inlineData); if (imagePart) { const base64Image = `data:image/png;base64,${imagePart.inlineData.data}`; setGeneratedImage(base64Image); setStatus('Completed!'); } else { // Sometimes the model might refuse or return only text const textPart = result.candidates?.[0]?.content?.parts?.find(p => p.text); if (textPart) { throw new Error("The model returned text instead of an image. Please try a different photo."); } throw new Error("Failed to generate image. Please try again."); } } catch (err) { if (retryCount < 4) { const delay = Math.pow(2, retryCount) * 1000; await new Promise(r => setTimeout(r, delay)); return makeRequest(retryCount + 1); } else { throw err; } } }; try { await makeRequest(); } catch (err) { setError(err.message || "An unexpected error occurred."); } finally { setLoading(false); } }; const reset = () => { setChildPhoto(null); setAdultPhoto(null); setGeneratedImage(null); setError(null); setStatus(''); }; return (
{/* Header */}

AiEdit

Nano Banana Model v1.0

Meet your inner child.

Upload a childhood photo and a recent photo. Our Nano Banana AI will bridge the gap of time, creating a memory where you stand hand-in-hand with your younger self.

{/* Error Message */} {error && (

Generation Failed

{error}

)} {/* Main Interface Grid */}
{/* Left Column: Inputs */}
{/* Child Photo Input */}
{childPhoto && ( )}
{!childPhoto ? ( ) : (
Child
)}
{/* Adult Photo Input */}
{adultPhoto && ( )}
{!adultPhoto ? ( ) : (
Adult
)}
{loading && (

{status}

)}
{/* Right Column: Result */}
{!generatedImage && !loading && (

Ready to Imagine

Upload your photos on the left and hit generate to see the magic happen here.

)} {loading && !generatedImage && (

Consulting Nano Banana...

)} {generatedImage && ( )}
{/* Footer inside the card */}

AiEdit Result Preview

); }