# AI Photo Studio ## About This App An AI-powered image generator and editor with unlimited creative freedom and zero paywalls ## Specification # AI Photo Studio ✨ Create a powerful, playful, and endlessly usable AI photo editor and creator app. This is a React web app that leverages AI image generation APIs to let users create images from text prompts, upload and edit existing photos with AI-powered transformations, and iterate endlessly — no usage limits, no paywalls, just pure creative freedom. ## UI Elements ### Header / Top Bar - App name **"AI Photo Studio ✨"** on the left with a fun gradient text effect (purple → pink → orange) - Subtitle tagline: *"Infinite creativity. Zero limits. 🍓"* - A dark mode toggle button on the right (sun/moon icon) - Minimal, sleek design — dark background (#1a1a2e) with glowing accent colors ### Sidebar / Tool Panel (Left Side) A collapsible sidebar with the following tool sections, each with an icon: #### 🎨 Create Mode - **Text-to-Image Generator**: A large, inviting textarea for entering prompts with placeholder text like *"A cat wearing a tiny top hat, oil painting style..."* - **Style Presets**: A horizontally scrollable row of style chips/tags the user can click to append to their prompt (e.g., "Photorealistic", "Anime", "Pixel Art", "Watercolor", "Oil Painting", "Cyberpunk", "Vintage Film", "3D Render", "Comic Book", "Pencil Sketch") - **Aspect Ratio Selector**: Buttons for common ratios — 1:1, 16:9, 9:16, 4:3 - A big glowing **"Generate ✨"** button with a satisfying hover animation #### ✏️ Edit Mode - **Upload Area**: A drag-and-drop zone with dashed border that accepts images, with a camera icon and text "Drop an image or click to upload" - **Edit Prompt**: A textarea for describing the desired edit (e.g., "Remove the background", "Make it look like a sunset scene", "Add a rainbow in the sky") - **Quick Edit Buttons**: Pre-built one-click edit actions: - 🪄 Enhance / Upscale - 🌅 Change Background - 🎭 Style Transfer - 🔄 Variations (generate similar images) - ✂️ Remove Background - 🖼️ Add Frame / Border - A big **"Apply Edit ✨"** button #### 📚 History Panel - A scrollable vertical gallery of previously generated/edited images stored in localStorage - Each thumbnail is clickable to reload into the canvas - Small delete (X) button on hover for each history item - "Clear All History" button at the bottom ### Main Canvas / Workspace (Center) - The primary area where the generated or uploaded image is displayed - Large, centered, with a subtle checkerboard pattern background (like Photoshop) when no image is loaded - Welcome state: Show a friendly illustration/emoji collage with text *"Start by typing a prompt or uploading a photo!"* - Loading state: A fun animated spinner (rotating sparkle emoji or pulsing gradient orb) with witty loading messages that cycle (e.g., "Teaching pixels to dance...", "Asking the AI nicely...", "Mixing digital paint...", "Almost there, probably...") - Once an image is generated, display it with a subtle drop shadow and rounded corners - Zoom controls (+ / - / fit) in the bottom-right corner of the canvas ### Action Bar (Below Canvas) - **Download** button (⬇️) — saves the current image as PNG - **Copy to Clipboard** button (📋) - **Send to Editor** button — takes a generated image and moves it into Edit mode for further refinement - **Remix** button (🔀) — re-runs the same prompt with slight variation - **Share** button — generates a shareable link or copies image URL ### Bottom Panel / Prompt History - A horizontal scrollable strip showing recent prompts as clickable chips - Clicking a chip re-populates the prompt field for quick re-generation ## Styling Preferences - **Dark theme by default** with deep navy/purple background (#0f0f23) and lighter card surfaces (#1a1a3e) - **Accent colors**: Vibrant gradient of electric purple (#7c3aed), hot pink (#ec4899), and warm orange (#f97316) - **Glass-morphism effects** on panels and cards (backdrop-blur, semi-transparent backgrounds) - **Smooth animations** everywhere — panel transitions, button hovers, image fade-ins - **Typography**: Clean sans-serif (Inter or system font), with monospace for prompt text - **Responsive**: On mobile, sidebar collapses into a bottom sheet / tab navigation with Create, Edit, and History tabs - **Generous padding and spacing** — nothing should feel cramped - All buttons should have satisfying hover states with subtle scale transforms and glow effects ## Functionality - **Image Generation**: Use the **Nanobanana 2 API** for high-quality photorealistic image generation from text prompts, and the **Pollinations API** as a fallback/alternative engine - **Image Editing**: Use Nanobanana 2's image editing capability — send the uploaded image along with the edit prompt to transform it - **Pixel Art Mode**: Special toggle that routes generation through the **Retrodiffusion API** for pixel art and sprite-style outputs - **Infinite Usage**: No counters, no limits displayed — the app should feel boundless and free - **Local Storage History**: Save all generated images (as base64 or blob URLs) and their prompts to localStorage, with a cap of ~50 recent items to avoid storage overflow - **Drag & Drop Upload**: Full support for dragging images onto the canvas area - **Keyboard Shortcuts**: Enter to generate, Ctrl+S to download, Ctrl+Z to go back to previous image - **Error Handling**: Friendly error messages with retry buttons — never show raw API errors, always wrap in playful language ("Oops! The AI tripped over a pixel. Let's try again! 🤖") - **Responsive Design**: Fully functional on mobile with touch-friendly controls and reorganized layout ## Additional Features - **Before/After Slider**: When editing an image, show a draggable slider comparing original vs. edited - **Prompt Suggestions**: When the prompt field is empty, show rotating random prompt ideas as inspiration (e.g., "Try: A cozy bookshop on a rainy night, Studio Ghibli style") - **Image Info Panel**: Click an info icon to see generation metadata — prompt used, timestamp, model used - **Favorites**: Star/heart button to mark favorite generations, with a dedicated Favorites filter in History - **Fun Easter Eggs**: Typing "surprise me" generates a completely random creative prompt and image ## Footer - Small, unobtrusive footer with: *"Made with 🍓 and questionable amounts of GPU time"* - Link: Remix on Berrry ## About Berrry Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain. **Visit**: https://berrry.app Transform your social media ideas into real web applications today.