You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, defaultKeywords = "uploaded photograph", defaultExtension = "jpg") {
// 1. Create Main Container
const container = document.createElement('div');
container.style.cssText = `
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
max-width: 650px;
margin: 20px auto;
padding: 24px;
background-color: #ffffff;
border: 1px solid #e1e4e8;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
color: #24292e;
`;
// 2. Header
const header = document.createElement('h2');
header.textContent = '🖼️ Image SEO Name Finder';
header.style.cssText = 'margin: 0 0 20px 0; text-align: center; color: #1b1f23; font-size: 24px;';
container.appendChild(header);
// 3. Image Preview
const previewWrapper = document.createElement('div');
previewWrapper.style.cssText = 'display: flex; justify-content: center; margin-bottom: 24px; background: #f6f8fa; padding: 15px; border-radius: 8px; border: 1px dashed #d1d5da;';
// We draw to canvas to standardize sizing for preview
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const MAX_DIM = 350;
let w = originalImg.width;
let h = originalImg.height;
if (w > h) {
if (w > MAX_DIM) { h *= MAX_DIM / w; w = MAX_DIM; }
} else {
if (h > MAX_DIM) { w *= MAX_DIM / h; h = MAX_DIM; }
}
// Prevent 0 size if image is not loaded fully
canvas.width = Math.max(w, 150);
canvas.height = Math.max(h, 150);
try {
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
} catch(e) {
// Fallback if drawImage fails
}
canvas.style.cssText = 'max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
previewWrapper.appendChild(canvas);
container.appendChild(previewWrapper);
// 4. Input Section
const inputSection = document.createElement('div');
inputSection.style.cssText = 'margin-bottom: 20px;';
const label = document.createElement('label');
label.textContent = 'Describe the image (or let AI generate it):';
label.style.cssText = 'display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: #24292e;';
inputSection.appendChild(label);
const inputWrapper = document.createElement('div');
inputWrapper.style.cssText = 'display: flex; gap: 10px; position: relative;';
const inputField = document.createElement('input');
inputField.type = 'text';
inputField.value = defaultKeywords;
inputField.placeholder = 'e.g., golden retriever playing in park';
inputField.style.cssText = 'flex-grow: 1; padding: 10px 14px; border: 1px solid #d1d5da; border-radius: 6px; font-size: 16px; outline: none; transition: border-color 0.2s;';
inputField.onfocus = () => inputField.style.borderColor = '#0366d6';
inputField.onblur = () => inputField.style.borderColor = '#d1d5da';
const extSelect = document.createElement('select');
extSelect.style.cssText = 'padding: 10px; border: 1px solid #d1d5da; border-radius: 6px; font-size: 16px; background-color: #fafbfc; cursor: pointer; outline: none;';
['jpg', 'jpeg', 'png', 'webp', 'gif', 'svg'].forEach(ext => {
const option = document.createElement('option');
option.value = ext;
option.textContent = `.${ext}`;
if(ext === defaultExtension.toLowerCase()) option.selected = true;
extSelect.appendChild(option);
});
inputWrapper.appendChild(inputField);
inputWrapper.appendChild(extSelect);
inputSection.appendChild(inputWrapper);
const aiStatus = document.createElement('div');
aiStatus.textContent = '🤖 Analyzing image content with Vision AI...';
aiStatus.style.cssText = 'font-size: 12px; color: #586069; margin-top: 8px; height: 16px; font-style: italic;';
inputSection.appendChild(aiStatus);
container.appendChild(inputSection);
// 5. Result Section
const resultSection = document.createElement('div');
resultSection.style.cssText = 'background-color: #f1f8ff; border: 1px solid #c8e1ff; border-radius: 8px; padding: 20px; text-align: center;';
const resultLabel = document.createElement('div');
resultLabel.textContent = 'Optimized SEO Filename:';
resultLabel.style.cssText = 'font-size: 13px; color: #0366d6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;';
resultSection.appendChild(resultLabel);
const resultDisplay = document.createElement('div');
resultDisplay.style.cssText = 'font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 18px; font-weight: 700; color: #24292e; margin-bottom: 20px; word-break: break-all;';
resultSection.appendChild(resultDisplay);
const copyBtn = document.createElement('button');
copyBtn.innerHTML = `
<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 6px;">
<path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
<path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
</svg>
Copy Filename
`;
copyBtn.style.cssText = 'background-color: #2ea44f; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; display: inline-flex; align-items: center; justify-content: center;';
copyBtn.onmouseover = () => copyBtn.style.backgroundColor = '#2c974b';
copyBtn.onmouseout = () => copyBtn.style.backgroundColor = '#2ea44f';
copyBtn.onclick = () => {
navigator.clipboard.writeText(resultDisplay.textContent);
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '✅ Copied!';
copyBtn.style.backgroundColor = '#22863a';
setTimeout(() => {
copyBtn.innerHTML = originalText;
copyBtn.style.backgroundColor = '#2ea44f';
}, 2000);
};
resultSection.appendChild(copyBtn);
container.appendChild(resultSection);
// SEO String Generator Logic
const stopWords = ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by', 'with', 'in', 'of'];
const updateResult = () => {
let text = inputField.value.trim().toLowerCase();
let ext = extSelect.value;
if (!text) {
resultDisplay.textContent = `image.${ext}`;
return;
}
// Clean text: remove special chars, filter stop words, replace gaps with hyphens
let words = text.replace(/[^a-z0-9]+/g, ' ').split(/\s+/).filter(w => w.length > 0);
let seoWords = words.filter(w => !stopWords.includes(w));
// If everything was a stop word, revert to unfiltered words
if(seoWords.length === 0) seoWords = words;
const seoName = seoWords.join('-');
resultDisplay.textContent = `${seoName || 'image'}.${ext}`;
};
// Event Listeners for Live Update
inputField.addEventListener('input', updateResult);
extSelect.addEventListener('change', updateResult);
// Initial calculation
updateResult();
// 6. Async AI Image Recognition (MobileNet)
const loadScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
};
(async () => {
try {
if (typeof tf === 'undefined') {
await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js');
}
if (typeof mobilenet === 'undefined') {
await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1/dist/mobilenet.min.js');
}
const model = await mobilenet.load();
// Pass original image directly to model
const predictions = await model.classify(originalImg);
if (predictions && predictions.length > 0) {
// Get top 2 predictions and format them nicely
const terms = predictions.slice(0, 2).map(p => p.className.split(',')[0].trim());
const aiSuggestion = terms.join(' ');
// Only overwrite if user hasn't typed their own extensive description yet
if (inputField.value === defaultKeywords || inputField.value === '') {
inputField.value = aiSuggestion;
updateResult();
}
aiStatus.textContent = `✨ AI Suggestion found: "${terms.join(', ')}"`;
aiStatus.style.color = '#22863a';
aiStatus.style.fontWeight = '500';
} else {
aiStatus.textContent = 'AI could not strongly identify the image.';
}
} catch (error) {
console.warn("AI Image Classification failed. CORS or script loading issue.", error);
aiStatus.textContent = ''; // Hide silently on error, tool remains fully functional manually
}
})();
return container;
}Apply Changes
