Auto Create Social Media Posts
This is mind blowing! Here is the entire Source Code you can run in Google's AI Studio and do this yourself: import React, { useState, useCallback } from 'react'; // --- Constants --- const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key="; const DEFAULT_PROMPT = ` Create a realistic Instagram post composition. The main subject (from the uploaded image) should be prominently displayed as the primary image within a clean, modern Instagram post frame. The post frame should include: - A user handle (e.g., "user_name") - A small circular profile picture icon next to the handle (matching the main subject) - Standard Instagram-like icons for "Like" (heart), "Comment" (speech bubble), and "Share" (paper plane) below the main image. - A placeholder for "X likes" (e.g., "Liked by other_user and 1.3M others") and a short caption (e.g., "Working remote from anywhere! Loving this new setup #digitalnomad #remotework #workfromanywhere #travel") Separately, generate a full-body, high-quality image of the person from the uploaded photo, sitting casually on a modern stool and actively using a silver laptop. Overlay this generated full-body person as a transparent cutout, positioned on the bottom-right side, *outside* and partially overlapping the main Instagram post frame. The overall background for the entire composition (behind the Instagram frame) should be a softly blurred, modern, well-lit office or cafe interior, giving a professional yet relaxed vibe. Ensure all elements are well-integrated and look natural. `; // --- Helper Components --- /** * A simple loading spinner component. */ const Spinner = () => ( <div className="flex justify-center items-center"> <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div> </div> ); /** * A component to render the image upload area.