async function processImage(originalImg, ocrLanguage = 'eng', targetLanguage = 'en') {
// Create the main container div to be returned and rendered
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
container.style.maxWidth = '600px';
container.style.margin = '0 auto';
container.style.padding = '20px';
container.style.backgroundColor = '#ffffff';
container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
container.style.borderRadius = '8px';
container.style.border = '1px solid #eaeaea';
// Status indicator
const statusText = document.createElement('p');
statusText.textContent = 'Initializing OCR Engine...';
statusText.style.fontWeight = 'bold';
statusText.style.color = '#333';
statusText.style.textAlign = 'center';
container.appendChild(statusText);
// Progress bar container
const progressContainer = document.createElement('div');
progressContainer.style.width = '100%';
progressContainer.style.height = '8px';
progressContainer.style.backgroundColor = '#e0e0e0';
progressContainer.style.borderRadius = '4px';
progressContainer.style.overflow = 'hidden';
progressContainer.style.marginBottom = '20px';
const progressBar = document.createElement('div');
progressBar.style.width = '0%';
progressBar.style.height = '100%';
progressBar.style.backgroundColor = '#007bff';
progressBar.style.transition = 'width 0.2s';
progressContainer.appendChild(progressBar);
container.appendChild(progressContainer);
// Image preview
const imgPreview = document.createElement('img');
imgPreview.src = originalImg.src;
imgPreview.style.maxWidth = '100%';
imgPreview.style.maxHeight = '250px';
imgPreview.style.display = 'block';
imgPreview.style.margin = '0 auto 20px auto';
imgPreview.style.borderRadius = '4px';
imgPreview.style.border = '1px solid #ccc';
container.appendChild(imgPreview);
// Results area
const resultDiv = document.createElement('div');
resultDiv.style.display = 'none';
// Extracted text area
const extractedLabel = document.createElement('label');
extractedLabel.textContent = 'Extracted Text';
extractedLabel.style.display = 'block';
extractedLabel.style.fontWeight = 'bold';
extractedLabel.style.marginBottom = '5px';
const extractedTextArea = document.createElement('textarea');
extractedTextArea.style.width = '100%';
extractedTextArea.style.height = '100px';
extractedTextArea.style.marginBottom = '15px';
extractedTextArea.style.padding = '10px';
extractedTextArea.style.boxSizing = 'border-box';
extractedTextArea.style.borderRadius = '4px';
extractedTextArea.style.border = '1px solid #ccc';
extractedTextArea.readOnly = true;
// Detected language indicator
const langDetectedText = document.createElement('p');
langDetectedText.style.fontWeight = 'bold';
langDetectedText.style.color = '#28a745';
langDetectedText.style.marginBottom = '15px';
langDetectedText.style.padding = '10px';
langDetectedText.style.backgroundColor = '#eafaf1';
langDetectedText.style.borderRadius = '4px';
// Translated text area
const translatedLabel = document.createElement('label');
translatedLabel.textContent = `Translated Text (${targetLanguage.toUpperCase()})`;
translatedLabel.style.display = 'block';
translatedLabel.style.fontWeight = 'bold';
translatedLabel.style.marginBottom = '5px';
const translatedTextArea = document.createElement('textarea');
translatedTextArea.style.width = '100%';
translatedTextArea.style.height = '100px';
translatedTextArea.style.padding = '10px';
translatedTextArea.style.boxSizing = 'border-box';
translatedTextArea.style.borderRadius = '4px';
translatedTextArea.style.border = '1px solid #ccc';
translatedTextArea.readOnly = true;
resultDiv.appendChild(extractedLabel);
resultDiv.appendChild(extractedTextArea);
resultDiv.appendChild(langDetectedText);
resultDiv.appendChild(translatedLabel);
resultDiv.appendChild(translatedTextArea);
container.appendChild(resultDiv);
// Dynamically load Tesseract.js for Optical Character Recognition (OCR)
const loadTesseract = () => {
return new Promise((resolve, reject) => {
if (window.Tesseract) {
resolve(window.Tesseract);
return;
}
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
script.onload = () => resolve(window.Tesseract);
script.onerror = () => reject(new Error('Failed to load Tesseract.js OCR engine.'));
document.head.appendChild(script);
});
};
// Execute background tasks and update UI
(async () => {
try {
const Tesseract = await loadTesseract();
statusText.textContent = 'Extracting text (OCR running)...';
// Draw image to a private canvas to guarantee formats play nicely with Tesseract
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
ctx.drawImage(originalImg, 0, 0);
// Run OCR
const { data: { text } } = await Tesseract.recognize(
canvas,
ocrLanguage,
{
logger: m => {
if (m.status === 'recognizing text') {
const percent = Math.round(m.progress * 100);
statusText.textContent = `Scanning Image: ${percent}%`;
progressBar.style.width = `${percent}%`;
}
}
}
);
const trimmedText = text.trim();
if (!trimmedText) {
statusText.textContent = 'No text was detected in the image.';
progressBar.style.backgroundColor = '#dc3545';
return;
}
extractedTextArea.value = trimmedText;
statusText.textContent = 'Identifying language & Translating...';
progressBar.style.width = '100%';
progressBar.style.backgroundColor = '#ffc107';
// Call public Google Translate wrapper for language detection & translation
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${encodeURIComponent(targetLanguage)}&dt=t&q=${encodeURIComponent(trimmedText)}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Translation API request failed.');
}
const data = await response.json();
// Construct the translated string
let translatedStr = '';
if (data && data[0]) {
data[0].forEach(segment => {
if (segment[0]) translatedStr += segment[0];
});
}
// Retrieve auto-detected language code
let detectedLangCode = (data && data[2]) ? data[2].toUpperCase() : 'Unknown';
translatedTextArea.value = translatedStr;
langDetectedText.textContent = `Detected Source Language: ${detectedLangCode}`;
// Show result UI
progressContainer.style.display = 'none';
statusText.style.display = 'none';
resultDiv.style.display = 'block';
} catch (err) {
console.error(err);
statusText.textContent = `Error: ${err.message}`;
statusText.style.color = '#dc3545';
progressBar.style.backgroundColor = '#dc3545';
}
})();
// Returns structural element right away, updates dynamically once processing fulfills
return container;
}This tool extracts text from images using Optical Character Recognition (OCR) and provides automatic language detection and translation. It allows users to upload an image, identifies the language present within the image, and translates the captured text into a target language. This is particularly useful for translating foreign language documents, signs, menus, or any printed text contained within a photo.