Image Text Generator And Identifier Tool

function processImage(originalImg, languages = "eng+rus") {
    // Determine dimensions to fit within a reasonable UI container
    const MAX_WIDTH = 700;
    let width = originalImg.width;
    let height = originalImg.height;
    if (width > MAX_WIDTH) {
        height = Math.floor(height * (MAX_WIDTH / width));
        width = MAX_WIDTH;
    }

    // Create main container
    const container = document.createElement("div");
    container.style.fontFamily = "system-ui, -apple-system, sans-serif";
    container.style.maxWidth = "800px";
    container.style.margin = "0 auto";
    container.style.padding = "25px";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.gap = "20px";
    container.style.border = "1px solid #e2e8f0";
    container.style.borderRadius = "12px";
    container.style.boxShadow = "0 10px 25px rgba(0,0,0,0.05)";
    container.style.backgroundColor = "#ffffff";

    // Header
    const title = document.createElement("h2");
    title.textContent = "Image Text Generator & Identifier";
    title.style.margin = "0";
    title.style.textAlign = "center";
    title.style.color = "#1e293b";
    container.appendChild(title);

    // Canvas container
    const canvasBox = document.createElement("div");
    canvasBox.style.display = "flex";
    canvasBox.style.justifyContent = "center";
    canvasBox.style.position = "relative";
    canvasBox.style.backgroundColor = "#f8fafc";
    canvasBox.style.padding = "10px";
    canvasBox.style.border = "1px solid #cbd5e1";
    canvasBox.style.borderRadius = "8px";

    // Canvas setup
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    const ctx = canvas.getContext("2d");
    ctx.drawImage(originalImg, 0, 0, width, height);
    canvasBox.appendChild(canvas);
    container.appendChild(canvasBox);

    // Options UI (Hidden until processing completes)
    const toggleContainer = document.createElement("label");
    toggleContainer.style.display = "none";
    toggleContainer.style.alignItems = "center";
    toggleContainer.style.justifyContent = "center";
    toggleContainer.style.gap = "8px";
    toggleContainer.style.cursor = "pointer";
    toggleContainer.style.fontSize = "15px";
    toggleContainer.style.color = "#334155";
    toggleContainer.style.userSelect = "none";

    const toggleCheckbox = document.createElement("input");
    toggleCheckbox.type = "checkbox";
    toggleCheckbox.checked = true;

    toggleContainer.appendChild(toggleCheckbox);
    toggleContainer.appendChild(document.createTextNode("Highlight Identified Words"));
    container.appendChild(toggleContainer);

    // Status / Progress UI
    const statusContainer = document.createElement("div");
    statusContainer.style.display = "flex";
    statusContainer.style.flexDirection = "column";
    statusContainer.style.gap = "8px";
    statusContainer.style.alignItems = "center";

    const statusText = document.createElement("span");
    statusText.textContent = "Initializing Engine...";
    statusText.style.fontWeight = "600";
    statusText.style.color = "#475569";
    statusText.style.fontSize = "14px";

    const progressWrapper = document.createElement("div");
    progressWrapper.style.width = "100%";
    progressWrapper.style.height = "10px";
    progressWrapper.style.backgroundColor = "#e2e8f0";
    progressWrapper.style.borderRadius = "5px";
    progressWrapper.style.overflow = "hidden";

    const progressBar = document.createElement("div");
    progressBar.style.width = "0%";
    progressBar.style.height = "100%";
    progressBar.style.backgroundColor = "#3b82f6";
    progressBar.style.transition = "width 0.3s ease";

    progressWrapper.appendChild(progressBar);
    statusContainer.appendChild(statusText);
    statusContainer.appendChild(progressWrapper);
    container.appendChild(statusContainer);

    // Output textarea
    const textArea = document.createElement("textarea");
    textArea.style.width = "100%";
    textArea.style.height = "160px";
    textArea.style.padding = "15px";
    textArea.style.borderRadius = "8px";
    textArea.style.border = "1px solid #cbd5e1";
    textArea.style.fontSize = "16px";
    textArea.style.lineHeight = "1.5";
    textArea.style.boxSizing = "border-box";
    textArea.style.resize = "vertical";
    textArea.placeholder = "Identifying... Extracted text will appear here to edit or copy.";
    textArea.style.color = "#1e293b";
    container.appendChild(textArea);

    // Copy to clipboard button
    const copyBtn = document.createElement("button");
    copyBtn.textContent = "Copy Identified Text";
    copyBtn.style.padding = "12px";
    copyBtn.style.marginTop = "-10px"; // Pull up closer to textarea
    copyBtn.style.backgroundColor = "#3b82f6";
    copyBtn.style.color = "#ffffff";
    copyBtn.style.border = "none";
    copyBtn.style.borderRadius = "8px";
    copyBtn.style.cursor = "pointer";
    copyBtn.style.fontWeight = "bold";
    copyBtn.style.fontSize = "15px";
    copyBtn.style.transition = "background-color 0.2s";
    
    copyBtn.addEventListener("mouseover", () => copyBtn.style.backgroundColor = "#2563eb");
    copyBtn.addEventListener("mouseout", () => copyBtn.style.backgroundColor = "#3b82f6");
    copyBtn.addEventListener("click", () => {
        if (!textArea.value) return;
        navigator.clipboard.writeText(textArea.value).then(() => {
            const oldText = copyBtn.textContent;
            copyBtn.textContent = "✓ Copied to Clipboard!";
            copyBtn.style.backgroundColor = "#10b981";
            setTimeout(() => {
                copyBtn.textContent = oldText;
                copyBtn.style.backgroundColor = "#3b82f6";
            }, 2000);
        });
    });

    container.appendChild(copyBtn);

    // OCR Logic & Rendering
    let wordsData = [];

    function renderCanvas(showBoxes) {
        // Redraw image
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(originalImg, 0, 0, width, height);
        
        // Draw bounding boxes around identified text components
        if (showBoxes && wordsData.length > 0) {
            ctx.strokeStyle = "rgba(239, 68, 68, 0.9)";
            ctx.lineWidth = 2;
            ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
            
            const scaleX = width / originalImg.width;
            const scaleY = height / originalImg.height;
            
            wordsData.forEach(w => {
                const bx = w.bbox;
                ctx.beginPath();
                ctx.rect(
                    bx.x0 * scaleX, 
                    bx.y0 * scaleY, 
                    (bx.x1 - bx.x0) * scaleX, 
                    (bx.y1 - bx.y0) * scaleY
                );
                ctx.fill();
                ctx.stroke();
            });
        }
    }

    toggleCheckbox.addEventListener("change", (e) => {
        renderCanvas(e.target.checked);
    });

    const runOCR = async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (!window.Tesseract) {
                statusText.textContent = "Loading OCR Engine (Tesseract.js)...";
                progressBar.style.width = "5%";

                const script = document.createElement("script");
                script.src = "https://unpkg.com/tesseract.js@v4.1.1/dist/tesseract.min.js";
                document.head.appendChild(script);

                await new Promise((resolve, reject) => {
                    script.onload = resolve;
                    script.onerror = () => reject(new Error("Failed to load OCR dependency from unpkg."));
                });
            }

            // Perform OCR Recognition
            const result = await window.Tesseract.recognize(
                originalImg,
                languages,
                {
                    logger: m => {
                        if (m.status === "recognizing text") {
                            const pct = Math.round(m.progress * 100);
                            statusText.textContent = `Identifying text on image: ${pct}%`;
                            progressBar.style.width = `${pct}%`;
                        } else {
                            // Extract other loading stages elegantly
                            const stageText = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                            statusText.textContent = `${stageText}...`;
                            if (m.status === "loading tesseract core") progressBar.style.width = "10%";
                            else if (m.status === "initializing api") progressBar.style.width = "30%";
                            else if (m.status === "loading language traineddata") progressBar.style.width = "50%";
                        }
                    }
                }
            );

            // Cleanup & Output Presentation 
            statusText.textContent = "✔ Image context identified successfully!";
            statusText.style.color = "#10b981";
            progressBar.style.backgroundColor = "#10b981";
            progressBar.style.width = "100%";

            textArea.value = result.data.text || "No text could be identified.";
            
            // Map bounded word boxes
            wordsData = result.data.words || [];
            if (wordsData.length > 0) {
                renderCanvas(true);
                toggleContainer.style.display = "flex";
            }

        } catch (err) {
            statusText.textContent = `Error: ${err.message}`;
            statusText.style.color = "#ef4444";
            progressBar.style.backgroundColor = "#ef4444";
            textArea.placeholder = "Failed to extract text. An error occurred.";
        }
    };

    // Execute script independently to ensure UI elements are returned immediately
    setTimeout(runOCR, 50);

    return container;
}