Image Music Track Identifier

async function processImage(originalImg, ocrApiKey = 'helloworld') {
    // This function attempts to identify a music track from an image.
    // It works in two steps:
    // 1. OCR (Optical Character Recognition): It uses the ocr.space API to extract
    //    any text (like artist name or song title) from the image.
    //    **A valid API key from https://ocr.space/ is required.**
    // 2. Music Search: It uses the extracted text to search the public iTunes API for a matching track.

    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.maxWidth = '500px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    container.style.textAlign = 'center';

    const showMessage = (text) => {
        container.innerHTML = `<p style="margin:0; color:#555;">${text}</p>`;
        return container;
    };

    if (!ocrApiKey || ocrApiKey === 'helloworld') {
        const errorHtml = `
            <p style="margin:0; color:#D8000C; font-weight:bold;">API Key Required</p>
            <p style="font-size: 14px; margin: 10px 0 0;">This tool needs an API key from <a href="https://ocr.space/ocrapi/freekey" target="_blank">ocr.space</a> to read text from the image.</p>
            <p style="font-size: 14px; margin: 10px 0 0;">Please provide your key as the second argument to the function.</p>
        `;
        container.innerHTML = errorHtml;
        return container;
    }
    
    showMessage('Processing image...');

    // Step 1: Perform OCR to extract text from the image
    let extractedText = '';
    try {
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);
        const base64Image = canvas.toDataURL('image/jpeg');

        const formData = new FormData();
        formData.append('base64Image', base64Image);
        formData.append('isOverlayRequired', 'false');

        const ocrResponse = await fetch('https://api.ocr.space/parse/image', {
            method: 'POST',
            headers: {
                'apikey': ocrApiKey,
            },
            body: formData,
        });

        if (!ocrResponse.ok) {
            throw new Error(`OCR API error: ${ocrResponse.statusText}`);
        }

        const ocrData = await ocrResponse.json();
        if (ocrData.IsErroredOnProcessing) {
            throw new Error(`OCR processing error: ${ocrData.ErrorMessage.join(', ')}`);
        }
        
        extractedText = ocrData.ParsedResults?.[0]?.ParsedText || '';

        if (!extractedText.trim()) {
           return showMessage('Could not find any text in the image. Please try another image with clearer text (e.g., album art).');
        }

    } catch (error) {
        console.error('Error during OCR step:', error);
        return showMessage(`Failed to process image with OCR. Error: ${error.message}`);
    }
    
    // Step 2: Use the extracted text to search the iTunes API
    showMessage('Searching for track...');
    try {
        // Clean up text for better search results (replace newlines with spaces)
        const searchTerm = extractedText.replace(/\s+/g, ' ').trim();
        const searchUrl = `https://itunes.apple.com/search?term=${encodeURIComponent(searchTerm)}&entity=song&limit=1`;

        const musicResponse = await fetch(searchUrl);
        if (!musicResponse.ok) {
            throw new Error(`iTunes API error: ${musicResponse.statusText}`);
        }

        const musicData = await musicResponse.json();

        if (musicData.resultCount === 0) {
            return showMessage(`No music track found for the text: "${searchTerm}"`);
        }

        const track = musicData.results[0];
        
        // Step 3: Display the found track information
        container.innerHTML = ''; // Clear "Searching..." message
        container.style.display = 'flex';
        container.style.gap = '20px';
        container.style.textAlign = 'left';

        const artwork = document.createElement('img');
        artwork.src = track.artworkUrl100.replace('100x100bb', '200x200bb'); // Get higher res artwork
        artwork.style.width = '120px';
        artwork.style.height = '120px';
        artwork.style.borderRadius = '4px';
        artwork.style.objectFit = 'cover';
        
        const infoDiv = document.createElement('div');
        infoDiv.style.display = 'flex';
        infoDiv.style.flexDirection = 'column';
        infoDiv.style.justifyContent = 'center';
        
        const trackName = document.createElement('h3');
        trackName.textContent = track.trackName;
        trackName.style.margin = '0 0 5px 0';
        
        const artistName = document.createElement('p');
        artistName.textContent = track.artistName;
        artistName.style.margin = '0 0 10px 0';
        artistName.style.color = '#555';

        const albumName = document.createElement('p');
        albumName.textContent = `Album: ${track.collectionName}`;
        albumName.style.margin = '0';
        albumName.style.fontSize = '14px';
        albumName.style.color = '#777';

        const audioPlayer = document.createElement('audio');
        audioPlayer.controls = true;
        audioPlayer.src = track.previewUrl;
        audioPlayer.style.width = '100%';
        audioPlayer.style.marginTop = '15px';
        
        const trackLink = document.createElement('a');
        trackLink.href = track.trackViewUrl;
        trackLink.textContent = 'Listen on Apple Music';
        trackLink.target = '_blank';
        trackLink.style.display = 'inline-block';
        trackLink.style.marginTop = '15px';
        trackLink.style.fontSize = '14px';

        infoDiv.appendChild(trackName);
        infoDiv.appendChild(artistName);
        infoDiv.appendChild(albumName);

        container.appendChild(artwork);
        container.appendChild(infoDiv);

        // Create a new container for the player and link to go below the main info
        const bottomContainer = document.createElement('div');
        bottomContainer.style.width = '100%';
        bottomContainer.style.flexBasis = '100%'; // Make it take the full width
        bottomContainer.appendChild(audioPlayer);
        bottomContainer.appendChild(trackLink);
        
        container.style.flexWrap = 'wrap'; // Allow wrapping
        container.appendChild(bottomContainer);

        return container;

    } catch (error) {
        console.error('Error during music search step:', error);
        return showMessage(`Failed to search for music. Error: ${error.message}`);
    }
}