You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, theme = "dark", ideaCount = 3) {
// Determine number of ideas to generate safely
const parsedIdeaCount = parseInt(ideaCount) || 3;
const isDarkTheme = theme.toLowerCase() === "dark";
// Create main outer container
const container = document.createElement("div");
container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.display = "flex";
container.style.flexDirection = "row";
container.style.gap = "20px";
container.style.padding = "20px";
container.style.borderRadius = "12px";
container.style.boxSizing = "border-box";
container.style.width = "100%";
container.style.maxWidth = "900px";
container.style.margin = "0 auto";
container.style.boxShadow = isDarkTheme ? "0 4px 15px rgba(0,0,0,0.5)" : "0 4px 15px rgba(0,0,0,0.1)";
// Apply styling based on theme
container.style.backgroundColor = isDarkTheme ? "#1e1e24" : "#f8f9fa";
container.style.color = isDarkTheme ? "#ffffff" : "#212529";
// Step 1: Analyze Image (Extract properties for our Studio Generator)
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = originalImg.width || 100;
canvas.height = originalImg.height || 100;
ctx.drawImage(originalImg, 0, 0);
// Extract average color and tone
let r = 128, g = 128, b = 128;
try {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let rSum = 0, gSum = 0, bSum = 0, count = 0;
const step = 4 * 10; // Sample every 10th pixel for performance
for (let i = 0; i < imageData.length; i += step) {
rSum += imageData[i];
gSum += imageData[i + 1];
bSum += imageData[i + 2];
count++;
}
if (count > 0) {
r = Math.floor(rSum / count);
g = Math.floor(gSum / count);
b = Math.floor(bSum / count);
}
} catch (e) {
// Fallback for CORS restricted images
console.warn("Could not read image data. Using default mid-tones.");
}
const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
const luminance = (r * 0.299 + g * 0.587 + b * 0.114);
const isDark = luminance < 128;
const isWarm = (r > b && r > g) || (r > 150 && g > 100 && b < 100);
const isCool = b > r && b > g;
// Analyze aspect ratio
const aspectRatio = canvas.width / canvas.height;
let orientation = "Square";
if (aspectRatio > 1.15) orientation = "Landscape";
else if (aspectRatio < 0.85) orientation = "Portrait";
// Step 2: Build Layout
// Left Panel - Image Dashboard
const leftPanel = document.createElement("div");
leftPanel.style.flex = "1";
leftPanel.style.display = "flex";
leftPanel.style.flexDirection = "column";
leftPanel.style.gap = "15px";
const imgDisplay = document.createElement("img");
imgDisplay.src = originalImg.src;
imgDisplay.style.width = "100%";
imgDisplay.style.height = "auto";
imgDisplay.style.borderRadius = "8px";
imgDisplay.style.objectFit = "cover";
imgDisplay.style.maxHeight = "300px";
imgDisplay.style.backgroundColor = isDarkTheme ? "#000" : "#ddd";
imgDisplay.style.boxShadow = "inset 0 0 10px rgba(0,0,0,0.5)";
const analysisPanel = document.createElement("div");
analysisPanel.style.padding = "15px";
analysisPanel.style.borderRadius = "8px";
analysisPanel.style.backgroundColor = isDarkTheme ? "#2d2d34" : "#ffffff";
analysisPanel.style.fontSize = "13px";
analysisPanel.style.border = isDarkTheme ? "1px solid #444" : "1px solid #e0e0e0";
analysisPanel.innerHTML = `
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; opacity: 0.6; font-weight: bold;">Metadata Extractor</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><span>Format:</span> <span>${orientation}</span></div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><span>Base Tone:</span> <span>${isDark ? 'Shadowed' : 'Luminous'}</span></div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>Dominant Color:</span>
<span style="display: flex; align-items: center; gap: 5px;">
<span style="display:inline-block; width:14px; height:14px; background:${hexColor}; border-radius:3px; border:1px solid #777;"></span>
${hexColor}
</span>
</div>
`;
leftPanel.appendChild(imgDisplay);
leftPanel.appendChild(analysisPanel);
// Right Panel - Generator Studio Form
const rightPanel = document.createElement("div");
rightPanel.style.flex = "1.5";
rightPanel.style.display = "flex";
rightPanel.style.flexDirection = "column";
rightPanel.style.gap = "15px";
const header = document.createElement("div");
const title = document.createElement("h3");
title.innerText = "✨ Idea Generator Studio";
title.style.margin = "0 0 4px 0";
title.style.color = isDarkTheme ? "#61dafb" : "#0056b3";
title.style.fontSize = "20px";
const subtitle = document.createElement("div");
subtitle.innerText = "AI-Powered structural prompt ideas based on visual properties.";
subtitle.style.fontSize = "12px";
subtitle.style.opacity = "0.7";
header.appendChild(title);
header.appendChild(subtitle);
rightPanel.appendChild(header);
// Prompt logic
const styles = [
"cinematic photograph", "concept art", "digital illustration",
"oil painting masterpiece", "3D octane render", "anime background art",
"vintage polaroid", "isometric vector art"
];
const subjects = [];
if (orientation === "Portrait") subjects.push("a mysterious solitary figure", "a towering neon skyscraper", "an elegant fantasy portrait", "a vertical slice of alien flora");
else if (orientation === "Landscape") subjects.push("a sprawling utopian city", "an epic scenic mountain range", "a cinematic wide battlefield", "an endless ocean horizon");
else subjects.push("a geometric abstract monolith", "a macro shot of a complex machine", "a perfect symmetrical artifact");
const moods = [];
if (isDark) moods.push("moody and atmospheric", "shrouded in dark shadows", "cyberpunk neon glow", "ominous and mysterious");
else moods.push("bright and ethereal", "high-key lighting", "joyful and airy", "bathed in soft sunlight");
if (isWarm) moods.push("featuring warm autumn hues", "fiery and passionate energy", "magic hour golden lighting");
if (isCool) moods.push("with cool winter tones", "deep oceanic bio-luminescence", "chill synth-wave pastels");
if (moods.length < 3) moods.push("vivid and highly detailed", "surreal aesthetic");
// Psuedo-random generator seeded creatively by the original image dimensions/color so it is predictable but varies per image.
let seed = (canvas.width * canvas.height + r * g * b);
const random = () => {
seed = (seed * 9301 + 49297) % 233280;
return seed / 233280;
};
const promptsContainer = document.createElement("div");
promptsContainer.style.display = "flex";
promptsContainer.style.flexDirection = "column";
promptsContainer.style.gap = "10px";
promptsContainer.style.maxHeight = "350px";
promptsContainer.style.overflowY = "auto";
promptsContainer.style.paddingRight = "5px";
for (let i = 0; i < parsedIdeaCount; i++) {
const style = styles[Math.floor(random() * styles.length)];
const subject = subjects[Math.floor(random() * subjects.length)];
const mood1 = moods[Math.floor(random() * moods.length)];
const promptText = `A stunning ${style} of ${subject}, ${mood1}, utilizing a dominant ${hexColor} color gradient, highly detailed, trending on ArtStation, 8k resolution.`;
const ideaCard = document.createElement("div");
ideaCard.style.padding = "12px 15px";
ideaCard.style.borderRadius = "8px";
ideaCard.style.backgroundColor = isDarkTheme ? "#25252b" : "#ffffff";
ideaCard.style.borderLeft = `4px solid ${hexColor}`;
ideaCard.style.boxShadow = isDarkTheme ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 5px rgba(0,0,0,0.05)";
const ideaHeader = document.createElement("div");
ideaHeader.style.display = "flex";
ideaHeader.style.justifyContent = "space-between";
ideaHeader.style.alignItems = "center";
ideaHeader.style.marginBottom = "6px";
const ideaTitle = document.createElement("div");
ideaTitle.innerText = `Concept Prompt 0${i + 1}`;
ideaTitle.style.fontWeight = "bold";
ideaTitle.style.fontSize = "12px";
ideaTitle.style.textTransform = "uppercase";
ideaTitle.style.letterSpacing = "0.5px";
ideaTitle.style.color = isDarkTheme ? "#aaa" : "#555";
const copyIcon = document.createElement("div");
copyIcon.innerHTML = "📋";
copyIcon.style.cursor = "pointer";
copyIcon.style.fontSize = "14px";
copyIcon.title = "Copy this prompt";
copyIcon.onclick = () => {
navigator.clipboard.writeText(promptText);
copyIcon.innerHTML = "✅";
setTimeout(() => copyIcon.innerHTML = "📋", 1500);
};
ideaHeader.appendChild(ideaTitle);
ideaHeader.appendChild(copyIcon);
const ideaContent = document.createElement("div");
ideaContent.innerText = promptText;
ideaContent.style.fontSize = "14px";
ideaContent.style.lineHeight = "1.5";
ideaContent.style.fontFamily = "monospace";
ideaContent.style.wordBreak = "break-word";
ideaCard.appendChild(ideaHeader);
ideaCard.appendChild(ideaContent);
promptsContainer.appendChild(ideaCard);
}
rightPanel.appendChild(promptsContainer);
// Add action button below
const exportBtn = document.createElement("button");
exportBtn.innerText = "Copy All Concepts";
exportBtn.style.padding = "12px";
exportBtn.style.border = "none";
exportBtn.style.borderRadius = "8px";
exportBtn.style.cursor = "pointer";
exportBtn.style.backgroundColor = isDarkTheme ? "#61dafb" : "#0056b3";
exportBtn.style.color = isDarkTheme ? "#1e1e24" : "#ffffff";
exportBtn.style.fontWeight = "bold";
exportBtn.style.fontSize = "14px";
exportBtn.style.marginTop = "auto";
exportBtn.style.transition = "opacity 0.2s";
exportBtn.onmouseover = () => exportBtn.style.opacity = "0.8";
exportBtn.onmouseout = () => exportBtn.style.opacity = "1";
exportBtn.onclick = () => {
const allPrompts = Array.from(promptsContainer.children)
.map(card => card.children[1].innerText)
.join("\n\n");
navigator.clipboard.writeText(allPrompts).then(() => {
const orig = exportBtn.innerText;
exportBtn.innerText = "Copied to Clipboard!";
setTimeout(() => exportBtn.innerText = orig, 2000);
});
};
rightPanel.appendChild(exportBtn);
container.appendChild(leftPanel);
container.appendChild(rightPanel);
// Inject minor CSS for scrollbar if needed
const styleBlock = document.createElement("style");
styleBlock.innerHTML = `
div::-webkit-scrollbar { width: 6px; }
div::-webkit-scrollbar-track { background: transparent; }
div::-webkit-scrollbar-thumb { background: ${isDarkTheme ? '#444' : '#ccc'}; border-radius: 4px; }
`;
container.appendChild(styleBlock);
return container;
}Apply Changes
