Image Ai Powered Name Language Identifier Link Creator

async function processImage(originalImg, ocrLanguage = 'eng', confidenceThreshold = 0.05) {
    /**
     * Helper function to dynamically load a script.
     * @param {string} url - The URL of the script to load.
     * @returns {Promise<void>} - A promise that resolves when the script is loaded.
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // If script is already loaded (or being loaded), don't add it again.
            if (document.querySelector(`script[src="${url}"]`)) {
                // Wait for Tesseract to be available on the window object
                const checkTesseract = () => {
                    if (window.Tesseract) {
                        resolve();
                    } else {
                        setTimeout(checkTesseract, 100);
                    }
                };
                checkTesseract();
                return;
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };

    // Create a container for the result and status messages.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.maxWidth = '400px';
    resultContainer.style.textAlign = 'left';

    const statusP = document.createElement('p');
    statusP.textContent = 'Processing image...';
    resultContainer.appendChild(statusP);

    try {
        // Step 1: Dynamically load the Tesseract.js library for OCR.
        const tesseractUrl = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        if (!window.Tesseract) {
            statusP.textContent = 'Loading AI model (OCR)...';
            await loadScript(tesseractUrl);
        }

        // Step 2: Perform OCR on the input image to extract text.
        statusP.textContent = 'Recognizing text in the image...';
        const worker = await Tesseract.createWorker(ocrLanguage);
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        await worker.terminate();

        // Step 3: Extract the first line of text, assuming it's the name.
        const lines = text.split('\n').filter(line => line.trim() !== '');
        if (lines.length === 0) {
            statusP.textContent = 'No text found in the image.';
            return resultContainer;
        }
        const detectedName = lines[0].trim();
        const firstName = detectedName.split(/\s+/)[0]; // Use the first word for better API results.

        // Step 4: Use the nationalize.io API to predict the nationality of the name.
        statusP.textContent = `Identifying language for "${firstName}"...`;
        const apiUrl = `https://api.nationalize.io?name=${encodeURIComponent(firstName)}`;
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`API request failed with status: ${response.status}`);
        }
        const apiData = await response.json();

        // Step 5: Process the API response.
        if (!apiData.country || apiData.country.length === 0) {
            statusP.textContent = `Could not identify the origin/language for the name: "${detectedName}".`;
            return resultContainer;
        }

        const topResult = apiData.country[0];

        if (topResult.probability < confidenceThreshold) {
            statusP.textContent = `The confidence for "${detectedName}" is too low to determine its origin.`;
            return resultContainer;
        }

        // Step 6: Use the Intl API to get the full country name from its code.
        const countryCode = topResult.country_id;
        const probability = topResult.probability;
        const countryNamer = new Intl.DisplayNames(['en'], {
            type: 'country'
        });
        const countryName = countryNamer.of(countryCode);

        // Step 7: Create and populate the final display element.
        resultContainer.innerHTML = ''; // Clear status messages.

        const header = document.createElement('h3');
        header.textContent = 'AI Name & Language Identifier';
        header.style.marginTop = '0';
        header.style.color = '#333';
        resultContainer.appendChild(header);

        const nameP = document.createElement('p');
        nameP.innerHTML = `Detected Name: <strong>${detectedName}</strong>`;
        resultContainer.appendChild(nameP);

        const originP = document.createElement('p');
        const percentage = (probability * 100).toFixed(1);
        originP.innerHTML = `Most Likely Origin: <strong>${countryName}</strong> (${percentage}% confidence)`;
        resultContainer.appendChild(originP);

        // Step 8: Create the link as requested by the tool name.
        const link = document.createElement('a');
        link.href = `https://en.wikipedia.org/wiki/Languages_of_${countryName.replace(/ /g, '_')}`;
        link.textContent = `Learn about languages spoken in ${countryName}`;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        link.style.display = 'inline-block';
        link.style.marginTop = '10px';
        link.style.color = '#007bff';
        link.style.textDecoration = 'none';

        resultContainer.appendChild(link);

    } catch (error) {
        console.error('Error in processImage:', error);
        statusP.textContent = `An error occurred: ${error.message}`;
        statusP.style.color = 'red';
    }

    return resultContainer;
}