You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, numberOfIdeas = "5") {
// Determine number of ideas to generate
const numIdeas = parseInt(numberOfIdeas, 10) || 5;
// Create the main container
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
container.style.padding = '24px';
container.style.maxWidth = '650px';
container.style.margin = '0 auto';
container.style.backgroundColor = '#ffffff';
container.style.borderRadius = '16px';
container.style.boxShadow = '0 10px 30px rgba(0,0,0,0.08)';
container.style.border = '1px solid #e5e7eb';
container.style.color = '#111827';
// Header section
const header = document.createElement('div');
header.style.display = 'flex';
header.style.alignItems = 'center';
header.style.marginBottom = '24px';
const icon = document.createElement('span');
icon.textContent = '💡';
icon.style.fontSize = '36px';
icon.style.marginRight = '16px';
header.appendChild(icon);
const titleDiv = document.createElement('div');
const title = document.createElement('h2');
title.textContent = 'AI Image Idea Generator';
title.style.margin = '0 0 4px 0';
title.style.color = '#1f2937';
title.style.fontSize = '22px';
const subtitle = document.createElement('p');
subtitle.textContent = 'Analyzing pixels and conceptualizing new artistic prompts';
subtitle.style.margin = '0';
subtitle.style.color = '#6b7280';
subtitle.style.fontSize = '14px';
titleDiv.appendChild(title);
titleDiv.appendChild(subtitle);
header.appendChild(titleDiv);
container.appendChild(header);
// Content area (toggled between loading and results)
const contentArea = document.createElement('div');
container.appendChild(contentArea);
// Loading component
const loaderRow = document.createElement('div');
loaderRow.style.display = 'flex';
loaderRow.style.alignItems = 'center';
loaderRow.style.padding = '20px';
loaderRow.style.backgroundColor = '#f3f4f6';
loaderRow.style.borderRadius = '12px';
const spinner = document.createElement('div');
spinner.style.border = '3px solid #e5e7eb';
spinner.style.borderTop = '3px solid #6366f1';
spinner.style.borderRadius = '50%';
spinner.style.width = '24px';
spinner.style.height = '24px';
spinner.style.animation = 'spin 1s linear infinite';
spinner.style.marginRight = '16px';
const style = document.createElement('style');
style.textContent = `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
container.appendChild(style);
const statusText = document.createElement('span');
statusText.textContent = 'Loading AI models & analyzing image... (May take a few moments on first run)';
statusText.style.color = '#4b5563';
statusText.style.fontSize = '15px';
statusText.style.fontWeight = '500';
loaderRow.appendChild(spinner);
loaderRow.appendChild(statusText);
contentArea.appendChild(loaderRow);
// Run prediction asynchronously to allow the DOM to render the loading state
setTimeout(async () => {
let baseKeywords = [];
try {
// Import Transformers.js for in-browser AI processing
const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.14.0');
env.allowLocalModels = false;
// Prepare a downscaled version of the image for classification to boost performance
const canvas = document.createElement('canvas');
const MAX_DIM = 224; // Optimal dimension for MobileNet
let w = originalImg.naturalWidth || originalImg.width;
let h = originalImg.naturalHeight || originalImg.height;
if (w > MAX_DIM || h > MAX_DIM) {
const ratio = Math.min(MAX_DIM / w, MAX_DIM / h);
w = w * ratio;
h = h * ratio;
}
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0, w, h);
const dataURL = canvas.toDataURL('image/jpeg');
statusText.textContent = 'Running neural network...';
// Using a lightweight image classification model
const classifier = await pipeline('image-classification', 'Xenova/mobilenet_v2_1.0_224');
const results = await classifier(dataURL, { topk: 3 });
baseKeywords = results.map(r => r.label.split(',')[0].trim().toLowerCase());
} catch (e) {
console.warn('AI loading error/CORS error. Defaulting to generic categories:', e);
baseKeywords = ['abstract form', 'vibrant structure', 'composition'];
}
const keyword = baseKeywords[0] || 'scene';
const keyword2 = baseKeywords[1] || 'object';
const ideaTemplates = [
`Futuristic cyberpunk reimagining of ${keyword}`,
`Whimsical watercolor painting featuring ${keyword} and ${keyword2}`,
`Minimalist vector illustration of ${keyword}`,
`Photorealistic fantasy landscape with ${keyword} in the background`,
`Vintage 1950s poster advertising ${keyword2}`,
`Highly detailed 3D render of ${keyword} made entirely of glass`,
`Vibrant street art graffiti mural depicting ${keyword}`,
`Dark, gothic interpretation of ${keyword2}`,
`Cute pixel art version of ${keyword}`,
`Surrealist painting where ${keyword} transforms into ${keyword2}`,
`Epic cinematic shot of ${keyword} in a post-apocalyptic world`,
`Botanical illustration style drawing of ${keyword}`,
`Neon synthwave style 80s graphic of ${keyword2}`,
`Stained glass window design featuring ${keyword}`,
`Abstract geometric pattern inspired by ${keyword2}`,
`Intricate steampunk invention resembling ${keyword}`,
`Low-poly digital 3D artwork of ${keyword}`,
`Dramatic oil painting of ${keyword} during a storm`,
`Pop-art collage centered around ${keyword2}`,
`Ethereal, glowing biological version of ${keyword}`
];
// Clear loading state
contentArea.innerHTML = '';
// Render tags
const tagsContainer = document.createElement('div');
tagsContainer.style.marginBottom = '20px';
tagsContainer.style.fontSize = '14px';
tagsContainer.style.color = '#374151';
const tagsLabel = document.createElement('strong');
tagsLabel.textContent = 'AI Detected Elements: ';
tagsLabel.style.marginRight = '8px';
tagsContainer.appendChild(tagsLabel);
baseKeywords.forEach(kw => {
const tag = document.createElement('span');
tag.textContent = kw;
tag.style.display = 'inline-block';
tag.style.backgroundColor = '#eef2ff';
tag.style.color = '#4f46e5';
tag.style.padding = '4px 10px';
tag.style.borderRadius = '999px';
tag.style.marginRight = '8px';
tag.style.fontSize = '13px';
tag.style.fontWeight = '600';
tag.style.textTransform = 'capitalize';
tagsContainer.appendChild(tag);
});
contentArea.appendChild(tagsContainer);
// Render generated ideas list
const list = document.createElement('ul');
list.style.listStyleType = 'none';
list.style.padding = '0';
list.style.margin = '0 0 24px 0';
function populateList() {
list.innerHTML = '';
const shuffled = ideaTemplates.sort(() => 0.5 - Math.random());
const selectedIdeas = shuffled.slice(0, numIdeas > 20 ? 20 : Math.max(1, numIdeas));
selectedIdeas.forEach((idea, idx) => {
const li = document.createElement('li');
li.style.display = 'flex';
li.style.alignItems = 'flex-start';
li.style.padding = '14px';
li.style.marginBottom = '10px';
li.style.backgroundColor = '#f8fafc';
li.style.border = '1px solid #f1f5f9';
li.style.borderRadius = '10px';
li.style.transition = 'background-color 0.2s';
li.onmouseover = () => li.style.backgroundColor = '#f1f5f9';
li.onmouseout = () => li.style.backgroundColor = '#f8fafc';
const number = document.createElement('span');
number.textContent = idx + 1;
number.style.display = 'flex';
number.style.alignItems = 'center';
number.style.justifyContent = 'center';
number.style.width = '26px';
number.style.height = '26px';
number.style.backgroundColor = '#6366f1';
number.style.color = '#fff';
number.style.borderRadius = '50%';
number.style.fontSize = '13px';
number.style.fontWeight = 'bold';
number.style.marginRight = '14px';
number.style.flexShrink = '0';
const textSpan = document.createElement('span');
textSpan.textContent = idea;
textSpan.dataset.idea = idea;
textSpan.style.color = '#334155';
textSpan.style.fontSize = '15px';
textSpan.style.lineHeight = '1.6';
textSpan.style.paddingTop = '1px';
li.appendChild(number);
li.appendChild(textSpan);
list.appendChild(li);
});
}
populateList();
contentArea.appendChild(list);
// Action buttons
const actions = document.createElement('div');
actions.style.display = 'flex';
actions.style.gap = '12px';
const copyBtn = document.createElement('button');
copyBtn.textContent = 'Copy Ideas';
copyBtn.style.padding = '12px 20px';
copyBtn.style.backgroundColor = '#6366f1';
copyBtn.style.color = '#fff';
copyBtn.style.border = 'none';
copyBtn.style.borderRadius = '8px';
copyBtn.style.fontSize = '15px';
copyBtn.style.fontWeight = '600';
copyBtn.style.cursor = 'pointer';
copyBtn.style.transition = 'background-color 0.2s';
copyBtn.onmouseover = () => copyBtn.style.backgroundColor = '#4f46e5';
copyBtn.onmouseout = () => copyBtn.style.backgroundColor = '#6366f1';
copyBtn.onclick = () => {
const ideasItems = Array.from(list.children).map(li => li.children[1].dataset.idea);
const textToCopy = ideasItems.map((id, i) => `${i+1}. ${id}`).join('\n');
navigator.clipboard.writeText(textToCopy);
const origText = copyBtn.textContent;
copyBtn.textContent = '✓ Copied!';
copyBtn.style.backgroundColor = '#10b981';
setTimeout(() => {
copyBtn.textContent = origText;
copyBtn.style.backgroundColor = '#6366f1';
}, 2000);
};
const regenerateBtn = document.createElement('button');
regenerateBtn.textContent = 'Regenerate';
regenerateBtn.style.padding = '12px 20px';
regenerateBtn.style.backgroundColor = '#ffffff';
regenerateBtn.style.color = '#374151';
regenerateBtn.style.border = '1px solid #d1d5db';
regenerateBtn.style.borderRadius = '8px';
regenerateBtn.style.fontSize = '15px';
regenerateBtn.style.fontWeight = '600';
regenerateBtn.style.cursor = 'pointer';
regenerateBtn.style.transition = 'background-color 0.2s';
regenerateBtn.onmouseover = () => regenerateBtn.style.backgroundColor = '#f9fafb';
regenerateBtn.onmouseout = () => regenerateBtn.style.backgroundColor = '#ffffff';
regenerateBtn.onclick = () => populateList();
actions.appendChild(copyBtn);
actions.appendChild(regenerateBtn);
contentArea.appendChild(actions);
}, 50);
return container;
}Apply Changes
