Image Music Track Identifier Tool

/**
 * Identifies potential music track information (artist, title) from an image by performing Optical Character Recognition (OCR).
 * This function uses the Tesseract.js library to extract text from the provided image.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {string} language The language code for the OCR model (e.g., 'eng' for English, 'jpn' for Japanese). A list can be found on the Tesseract.js GitHub page. Defaults to 'eng'.
 * @param {number} confidenceThreshold A number between 0 and 100. The function will only show results if the OCR confidence is above this threshold. Defaults to 50.
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML div element containing the identified text and search links for popular music platforms.
 */
async function processImage(originalImg, language = 'eng', confidenceThreshold = 50) {
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '10px';
    resultContainer.style.textAlign = 'left';
    resultContainer.innerHTML = `
        <p>Initializing OCR Engine...</p>
        <div style="width: 100%; background-color: #eee; border-radius: 5px;">
            <div id="progressBar" style="width: 0%; height: 20px; background-color: #4CAF50; border-radius: 5px; text-align: center; color: white; line-height: 20px;"></div>
        </div>
        <p id="statusText" style="text-align: center; margin-top: 5px;"></p>
    `;

    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Dynamically load Tesseract.js library if not already available
    if (typeof Tesseract === 'undefined') {
        try {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = TESSERACT_CDN;
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load Tesseract.js library.'));
                document.head.appendChild(script);
            });
        } catch (error) {
            console.error(error);
            resultContainer.innerHTML = `<p style="color: red;">${error.message}</p>`;
            return resultContainer;
        }
    }

    try {
        const logger = ({
            status,
            progress
        }) => {
            const statusText = document.getElementById('statusText');
            const progressBar = document.getElementById('progressBar');
            if (statusText && progressBar) {
                const formattedStatus = status.replace(/_/g, ' ');
                statusText.innerText = formattedStatus.charAt(0).toUpperCase() + formattedStatus.slice(1);
                progressBar.style.width = `${Math.max(0, progress * 100)}%`;
            }
        };

        const worker = await Tesseract.createWorker(language, 1, {
            logger
        });
        const {
            data
        } = await worker.recognize(originalImg);
        await worker.terminate();

        if (data && data.text && data.confidence > confidenceThreshold) {
            const identifiedText = data.text.trim();
            const encodedText = encodeURIComponent(identifiedText.replace(/\n/g, ' '));

            resultContainer.innerHTML = `
                <h3 style="margin-bottom: 10px;">Identified Text</h3>
                <div style="background-color: #f9f9f9; border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-bottom: 15px; white-space: pre-wrap; font-family: monospace;">${identifiedText}</div>
                <p><strong>Confidence:</strong> ${data.confidence.toFixed(2)}%</p>
                <hr style="margin: 20px 0;">
                <h4 style="margin-bottom: 10px;">Search for this Track:</h4>
                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                    <a href="https://open.spotify.com/search/${encodedText}" target="_blank" rel="noopener noreferrer" style="text-decoration: none; padding: 10px 15px; background-color: #1DB954; color: white; border-radius: 20px; font-size: 14px;">Search on Spotify</a>
                    <a href="https://music.youtube.com/search?q=${encodedText}" target="_blank" rel="noopener noreferrer" style="text-decoration: none; padding: 10px 15px; background-color: #FF0000; color: white; border-radius: 20px; font-size: 14px;">Search on YouTube Music</a>
                    <a href="https://www.google.com/search?q=${encodedText}+song" target="_blank" rel="noopener noreferrer" style="text-decoration: none; padding: 10px 15px; background-color: #4285F4; color: white; border-radius: 20px; font-size: 14px;">Search on Google</a>
                </div>
            `;
        } else {
            resultContainer.innerHTML = `<p>Could not identify any text with sufficient confidence (Result: ${data.confidence.toFixed(2)}%). Please try a clearer image or lower the confidence threshold.</p>`;
        }

    } catch (error) {
        console.error('OCR Error:', error);
        resultContainer.innerHTML = '<p style="color: red;">An error occurred during image processing. Please check the console for details.</p>';
    }

    return resultContainer;
}