Image Translator Database Downloader Tool

async function processImage(originalImg, lang = 'eng') {
    // Create the main UI container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, Helvetica, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.textAlign = 'center';
    container.style.background = '#fdfdfd';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.boxSizing = 'border-box';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Image Translator Database Downloader';
    title.style.marginTop = '0';
    title.style.color = '#333';
    container.appendChild(title);

    // Status text
    const statusText = document.createElement('p');
    statusText.innerText = 'Loading OCR Engine...';
    statusText.style.color = '#555';
    container.appendChild(statusText);

    // Progress bar
    const progressBarContainer = document.createElement('div');
    progressBarContainer.style.width = '100%';
    progressBarContainer.style.height = '15px';
    progressBarContainer.style.backgroundColor = '#eee';
    progressBarContainer.style.borderRadius = '8px';
    progressBarContainer.style.overflow = 'hidden';
    progressBarContainer.style.marginBottom = '20px';
    progressBarContainer.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.1)';

    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#4CAF50';
    progressBar.style.transition = 'width 0.2s';
    progressBarContainer.appendChild(progressBar);
    
    container.appendChild(progressBarContainer);

    // Content area for text and download
    const contentArea = document.createElement('div');
    contentArea.style.display = 'none';
    
    const textArea = document.createElement('textarea');
    textArea.style.width = '100%';
    textArea.style.height = '180px';
    textArea.style.marginBottom = '15px';
    textArea.style.padding = '10px';
    textArea.style.boxSizing = 'border-box';
    textArea.style.border = '1px solid #ccc';
    textArea.style.borderRadius = '4px';
    textArea.placeholder = 'Extracted source text will appear here...';
    contentArea.appendChild(textArea);

    const downloadBtn = document.createElement('button');
    downloadBtn.innerText = 'Download Translation Database (JSON)';
    downloadBtn.style.padding = '12px 20px';
    downloadBtn.style.background = '#007BFF';
    downloadBtn.style.color = '#ffffff';
    downloadBtn.style.border = 'none';
    downloadBtn.style.borderRadius = '5px';
    downloadBtn.style.cursor = 'pointer';
    downloadBtn.style.fontWeight = 'bold';
    downloadBtn.style.fontSize = '14px';
    downloadBtn.addEventListener('mouseover', () => downloadBtn.style.background = '#0056b3');
    downloadBtn.addEventListener('mouseout', () => downloadBtn.style.background = '#007BFF');
    contentArea.appendChild(downloadBtn);

    container.appendChild(contentArea);

    // Helper to load Tesseract.js dynamically
    const loadScript = (url) => new Promise((resolve, reject) => {
        if (window.Tesseract) return resolve();
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    // Run processing
    loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js')
        .then(async () => {
            statusText.innerText = 'Initializing OCR and downloading language models...';
            
            // Draw image on canvas to pass to Tesseract
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.width;
            canvas.height = originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            try {
                // Perform text recognition
                const result = await window.Tesseract.recognize(
                    canvas, 
                    lang, 
                    {
                        logger: m => {
                            if (m.status === 'recognizing text') {
                                progressBar.style.width = `${Math.round(m.progress * 100)}%`;
                                statusText.innerText = `Recognizing text... ${Math.round(m.progress * 100)}%`;
                            } else {
                                // Capitalize first letter of status string
                                statusText.innerText = m.status.charAt(0).toUpperCase() + m.status.slice(1) + '...';
                            }
                        }
                    }
                );
                
                statusText.innerText = 'Image Text successfully extracted!';
                progressBarContainer.style.display = 'none';
                contentArea.style.display = 'block';
                
                // Show extracted text directly
                textArea.value = result.data.text;
                
                // Setup download payload
                downloadBtn.onclick = () => {
                    // Pre-formatting a translation database schema
                    const db = {
                        metadata: {
                            generator: 'Image Translator Database Downloader Tool',
                            imageWidth: originalImg.width,
                            imageHeight: originalImg.height,
                            sourceLanguage: lang,
                            wordCount: result.data.words.length
                        },
                        sourceText: result.data.text,
                        translationDatabase: result.data.words.map(w => ({
                            originalTerm: w.text,
                            translatedTerm: "", // Placeholder for the translation DB target entry
                            confidence: w.confidence,
                            boundingBox: w.bbox
                        }))
                    };
                    
                    const blob = new Blob([JSON.stringify(db, null, 2)], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'translator_database.json';
                    a.click();
                    URL.revokeObjectURL(url);
                };
            } catch (err) {
                statusText.innerText = 'Error processing image: ' + err.message;
                progressBar.style.backgroundColor = '#dc3545'; // Error color (Red)
            }
        })
        .catch(err => {
            statusText.innerText = 'Failed to load OCR engine. Check your internet connection.';
        });

    return container;
}