Auto Create Social Media Posts · Real Estate Automation Plus

Oct 27 • Tools

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>

);

/**

* A component to render the image upload area.

const ImageUploader = ({ onImageUpload, originalImage }) => {

const [isDragging, setIsDragging] = useState(false);

const handleFileChange = (e) => {

const file = e.target.files?.[0];

if (file) {

onImageUpload(file);

}

};

const handleDragOver = (e) => {

e.preventDefault();

setIsDragging(true);

};

const handleDragLeave = (e) => {

e.preventDefault();

setIsDragging(false);

};

const handleDrop = (e) => {

e.preventDefault();

setIsDragging(false);

const file = e.dataTransfer.files?.[0];

if (file) {

onImageUpload(file);

}

};

return (

<label

htmlFor="file-upload"

onDragOver={handleDragOver}

onDragLeave={handleDragLeave}

onDrop={handleDrop}

className={`flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer transition-colors

${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-gray-50 hover:bg-gray-100'}

${originalImage ? 'border-green-500 bg-green-50' : ''}

{originalImage ? (

<p className="mt-4 text-sm font-medium text-green-700">Image loaded!</p>

<p className="text-xs text-gray-500">Drop a new image or click to replace</p>

</div>

) : (

</svg>

<p className="mb-2 text-sm text-gray-500"><span className="font-semibold">Click to upload</span> or drag and drop</p>

</div>

)}

</label>

</div>

);

};

/**

* A component to display the generated image result and download option.

const GenerationResult = ({ generatedImage, isLoading, error }) => {

// --- UPDATE: More robust download handler ---

const handleDownload = async () => {

if (generatedImage) {

try {

// The generatedImage is a data URL: "data:image/png;base64,..."

// Fetch it to convert it into a blob

const response = await fetch(generatedImage);

const blob = await response.blob();

// Create an object URL from the blob

const objectUrl = URL.createObjectURL(blob);

// Use the same anchor link trick, but with the object URL

const link = document.createElement('a');

link.href = objectUrl;

link.download = 'generated-composition.png';

document.body.appendChild(link);

link.click();

// Clean up: remove the link and revoke the object URL

document.body.removeChild(link);

URL.revokeObjectURL(objectUrl);

} catch (error) {

console.error("Download failed:", error);

// We can't use alert(), so we'll just log the error.

// A more advanced implementation might show a small error message in the UI.

}

};

// --- END UPDATE ---

return (

{isLoading && <Spinner />}

{error && !isLoading && (

<p className="font-semibold">Generation Failed</p>

<p className="text-sm mt-2">{error}</p>

</div>

)}

{generatedImage && !isLoading && (

<img

key={generatedImage} // Force re-render on new image

src={generatedImage}

alt="Generated composition"

className="max-w-full max-h-full object-contain rounded-md"

{/* --- Download Button (calls new async handler) --- */}

<button

onClick={handleDownload}

className="mt-4 flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"

</svg>

Download Image

</button>

</>

)}

{!generatedImage && !isLoading && !error && (

</svg>

<p className="mt-4 font-medium">Your generated composition will appear here</p>

<p className="text-sm text-gray-500 mt-1">Upload an image and write a prompt to begin</p>

</div>

)}

</div>

);

};

// --- Main App Component ---

export default function App() {

const [imageFile, setImageFile] = useState(null);

const [originalImage, setOriginalImage] = useState(null); // For display

const [prompt, setPrompt] = useState(DEFAULT_PROMPT);

const [generatedImage, setGeneratedImage] = useState(null);

const [isLoading, setIsLoading] = useState(false);

const [error, setError] = useState(null);

/**

* Utility function to convert a File object to a base64 string,

* removing the data URL prefix.

const fileToGenerativePart = (file) => {

return new Promise((resolve, reject) => {

const reader = new FileReader();

reader.onload = () => {

// Result is "data:image/jpeg;base64,..."

// We only want the part after the comma

const base64Data = reader.result.split(',')[1];

resolve({

inlineData: {

data: base64Data,

mimeType: file.type,

});

};

reader.onerror = (err) => reject(err);

reader.readAsDataURL(file);

});

};

/**

* Handles the file upload, setting both the file object

* and a data URL for preview.

const handleImageUpload = (file) => {

if (!file.type.startsWith("image/")) {

setError("Please upload a valid image file (PNG, JPG, WEBP).");

return;

}

setError(null);

setImageFile(file);

setGeneratedImage(null); // Clear previous generation

// Create a URL for previewing the original image

const reader = new FileReader();

reader.onload = (e) => {

setOriginalImage(e.target.result);

};

reader.readAsDataURL(file);

};

/**

* Implements exponential backoff for API retries.

const fetchWithBackoff = async (url, options, retries = 3, delay = 1000) => {

try {

const response = await fetch(url, options);

if (!response.ok) {

if (response.status === 429 && retries > 0) {

// Throttled, retry with backoff

await new Promise(res => setTimeout(res, delay));

return fetchWithBackoff(url, options, retries - 1, delay * 2);

}

// Try to get error message from response body

let errorBody = "No error details from API.";

try {

const body = await response.json();

errorBody = body?.error?.message || JSON.stringify(body);

} catch(e) {

// Could not parse JSON

errorBody = await response.text();

}

throw new Error(`API Error: ${response.status} ${response.statusText}. Details: ${errorBody}`);

}

return response.json();

} catch (err) {

if (retries > 0 && !(err instanceof DOMException && err.name === 'AbortError')) {

// Network or other error, retry

await new Promise(res => setTimeout(res, delay));

return fetchWithBackoff(url, options, retries - 1, delay * 2);

}

throw err; // After retries, throw the original error

}

};

/**

* Handles the "Generate" button click.

const handleGenerate = useCallback(async () => {

if (!imageFile || !prompt) {

setError("Please upload an image and provide a prompt.");

return;

}

setIsLoading(true);

setError(null);

setGeneratedImage(null);

try {

// 1. Get the base64 data part for the API

const imagePart = await fileToGenerativePart(imageFile);

// 2. Construct the API payload

const payload = {

contents: [

{

role: "user",

parts: [

{ text: prompt },

imagePart

]

}

generationConfig: {

responseModalities: ['TEXT', 'IMAGE']

};

// 3. Make the API call with backoff

const apiKey = ""; // API key is injected by the environment

const result = await fetchWithBackoff(API_URL + apiKey, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(payload)

});

// 4. Process the response

const base64Data = result?.candidates?.[0]?.content?.parts?.find(p => p.inlineData)?.inlineData?.data;

if (base64Data) {

const imageUrl = `data:image/png;base64,${base64Data}`;

setGeneratedImage(imageUrl);

} else {

if (result?.candidates?.[0]?.finishReason === 'SAFETY') {

throw new Error("Generation failed due to safety filters. Try a different prompt or image.");

}

console.error("Unexpected API response:", result);

throw new Error("No image data found in API response. The model may not have been able to process this request.");

}

} catch (err) {

console.error("Generation failed:", err);

setError(err.message || "An unknown error occurred during generation.");

} finally {

setIsLoading(false);

}

}, [imageFile, prompt]);

return (

{/* --- Control Panel (Left Side) --- */}

<h1 className="text-2xl font-bold text-gray-800 mb-1">Image Composer AI</h1>

<p className="text-sm text-gray-500 mb-6">Create new compositions from your images.</p>

{/* --- Step 1: Upload --- */}

<div>

<label className="block text-sm font-medium text-gray-700 mb-2">1. Upload Your Base Image</label>

</div>

{/* --- Step 2: Prompt --- */}

<div>

<label htmlFor="prompt" className="block text-sm font-medium text-gray-700 mb-2">2. Describe the Composition</label>

<textarea

id="prompt"

rows="6"

className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"

value={prompt}

onChange={(e) => setPrompt(e.target.value)}

placeholder="e.g., Place this person in a forest..."

</div>

{/* --- Step 3: Generate --- */}

<div>

<button

onClick={handleGenerate}

disabled={isLoading || !imageFile}

className="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition-all"

{isLoading ? (

</svg>

Generating...

</>

) : (

"Generate Composition"

)}

</button>

{error && !isLoading && (

<p className="text-sm text-red-600 mt-3 text-center">{error}</p>

)}

</div>