function processImage(originalImg, language = 'eng') {
// Create the main container
const container = document.createElement('div');
container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.padding = "25px";
container.style.border = "1px solid #e0e0e0";
container.style.borderRadius = "12px";
container.style.background = "#ffffff";
container.style.boxShadow = "0 8px 16px rgba(0,0,0,0.05)";
container.style.maxWidth = "600px";
container.style.margin = "0 auto";
container.style.color = "#333";
// Create the loading view
const loadingDiv = document.createElement('div');
loadingDiv.style.textAlign = "center";
loadingDiv.style.padding = "40px 20px";
const spinner = document.createElement('div');
spinner.style.border = "4px solid #f3f3f3";
spinner.style.borderTop = "4px solid #4a90e2";
spinner.style.borderRadius = "50%";
spinner.style.width = "50px";
spinner.style.height = "50px";
spinner.style.margin = "0 auto 20px auto";
// Add CSS animation for spinner
const style = document.createElement('style');
style.textContent = `
@keyframes ocr-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.ocr-spinner { animation: ocr-spin 1s linear infinite; }
`;
container.appendChild(style);
spinner.className = "ocr-spinner";
const loadingText = document.createElement('div');
loadingText.textContent = "Loading OCR Engine...";
loadingText.style.fontSize = "16px";
loadingText.style.fontWeight = "500";
loadingText.style.color = "#555";
const progressBarContainer = document.createElement('div');
progressBarContainer.style.width = "100%";
progressBarContainer.style.height = "6px";
progressBarContainer.style.backgroundColor = "#e0e0e0";
progressBarContainer.style.borderRadius = "3px";
progressBarContainer.style.marginTop = "15px";
progressBarContainer.style.overflow = "hidden";
const progressBar = document.createElement('div');
progressBar.style.width = "0%";
progressBar.style.height = "100%";
progressBar.style.backgroundColor = "#4a90e2";
progressBar.style.transition = "width 0.2s ease";
progressBarContainer.appendChild(progressBar);
loadingDiv.appendChild(spinner);
loadingDiv.appendChild(loadingText);
loadingDiv.appendChild(progressBarContainer);
container.appendChild(loadingDiv);
// Create the result view (hidden initially)
const resultDiv = document.createElement('div');
resultDiv.style.display = "none";
const title = document.createElement('h3');
title.textContent = "Found Website Icon / Logo Text";
title.style.margin = "0 0 15px 0";
title.style.fontSize = "18px";
title.style.color = "#2c3e50";
const textArea = document.createElement('textarea');
textArea.style.width = "100%";
textArea.style.minHeight = "120px";
textArea.style.padding = "12px";
textArea.style.border = "1px solid #cbd5e0";
textArea.style.borderRadius = "6px";
textArea.style.boxSizing = "border-box";
textArea.style.fontSize = "15px";
textArea.style.resize = "vertical";
textArea.style.marginBottom = "20px";
textArea.style.backgroundColor = "#f7fafc";
textArea.readOnly = true;
const btnContainer = document.createElement('div');
btnContainer.style.display = "flex";
btnContainer.style.gap = "12px";
btnContainer.style.flexWrap = "wrap";
resultDiv.appendChild(title);
resultDiv.appendChild(textArea);
resultDiv.appendChild(btnContainer);
container.appendChild(resultDiv);
// Error view container
const errorDiv = document.createElement('div');
errorDiv.style.display = "none";
errorDiv.style.color = "#e53e3e";
errorDiv.style.padding = "20px";
errorDiv.style.backgroundColor = "#fff5f5";
errorDiv.style.border = "1px solid #feb2b2";
errorDiv.style.borderRadius = "6px";
errorDiv.style.textAlign = "center";
container.appendChild(errorDiv);
// Async IIFE to process the image and load Tesseract
(async () => {
try {
// Load Tesseract.js dynamically if not already available
if (!window.Tesseract) {
loadingText.textContent = "Downloading OCR library...";
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://unpkg.com/tesseract.js@v4.1.1/dist/tesseract.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// Draw original image on canvas to handle transparency (PNGs) and extract safe DataURL
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth || originalImg.width || 300;
canvas.height = originalImg.naturalHeight || originalImg.height || 300;
const ctx = canvas.getContext('2d');
// Fill white background for transparent PNG logos
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
const imgDataUrl = canvas.toDataURL('image/png');
// Start Text Recognition using Tesseract Helper
const { data: { text } } = await window.Tesseract.recognize(
imgDataUrl,
language,
{
logger: m => {
if (m.status === 'recognizing text') {
loadingText.textContent = `Analyzing Logo/Icon... ${Math.round(m.progress * 100)}%`;
progressBar.style.width = `${m.progress * 100}%`;
} else {
loadingText.textContent = `${m.status.charAt(0).toUpperCase() + m.status.slice(1)}...`;
}
}
}
);
// Hide loading, show results
loadingDiv.style.display = 'none';
resultDiv.style.display = 'block';
const extractedText = text.trim();
if (extractedText) {
textArea.value = extractedText;
// Add "Search Topic" Google Button
const googleSearchBtn = document.createElement('a');
googleSearchBtn.textContent = 'Search Topic on Google';
googleSearchBtn.href = `https://www.google.com/search?q=${encodeURIComponent(extractedText)}`;
googleSearchBtn.target = '_blank';
googleSearchBtn.style.padding = "10px 20px";
googleSearchBtn.style.backgroundColor = "#4285f4";
googleSearchBtn.style.color = "#ffffff";
googleSearchBtn.style.textDecoration = "none";
googleSearchBtn.style.borderRadius = "6px";
googleSearchBtn.style.fontWeight = "bold";
googleSearchBtn.style.fontSize = "14px";
// Add Wikipedia Search Button
const wikiSearchBtn = document.createElement('a');
wikiSearchBtn.textContent = 'Find on Wikipedia';
wikiSearchBtn.href = `https://en.wikipedia.org/wiki/Special:Search?search=${encodeURIComponent(extractedText)}`;
wikiSearchBtn.target = '_blank';
wikiSearchBtn.style.padding = "10px 20px";
wikiSearchBtn.style.backgroundColor = "#e2e8f0";
wikiSearchBtn.style.color = "#2d3748";
wikiSearchBtn.style.textDecoration = "none";
wikiSearchBtn.style.borderRadius = "6px";
wikiSearchBtn.style.fontWeight = "bold";
wikiSearchBtn.style.fontSize = "14px";
btnContainer.appendChild(googleSearchBtn);
btnContainer.appendChild(wikiSearchBtn);
} else {
textArea.value = "No text could be found inside the logo or icon.";
textArea.style.color = "#a0aec0";
}
} catch (err) {
loadingDiv.style.display = 'none';
errorDiv.style.display = 'block';
errorDiv.textContent = `Failed to process the image. Error: ${err.message}`;
console.error("OCR Error:", err);
}
})();
return container;
}This tool is designed to extract text from images of logos, website icons, and PNG graphics using Optical Character Recognition (OCR) technology. It is particularly useful for identifying brand names or text contained within symbols. Once the text is identified, the tool provides quick links to search for the extracted information on Google or Wikipedia, making it a helpful resource for designers, researchers, or anyone looking to identify a brand or topic from a visual icon.