Image To Movie Scene Identifier

async function processImage(originalImg, databaseLabel = "Anime/Movie Open Database") {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#fdfdfd';
    container.style.color = '#333';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Title
    const title = document.createElement('h3');
    title.style.margin = '0 0 15px 0';
    title.style.color = '#111';
    title.style.display = 'flex';
    title.style.alignItems = 'center';
    title.style.gap = '8px';
    title.innerHTML = '🎬 <span>Movie Scene Identifier</span>';
    container.appendChild(title);

    // Image Preview
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.width = '100%';
    imgPreview.style.maxHeight = '300px';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.backgroundColor = '#111';
    imgPreview.style.display = 'block';
    imgPreview.style.margin = '0 auto 20px auto';
    container.appendChild(imgPreview);

    // Loading State
    const loadingDiv = document.createElement('div');
    loadingDiv.style.display = 'flex';
    loadingDiv.style.alignItems = 'center';
    loadingDiv.style.justifyContent = 'center';
    loadingDiv.style.gap = '10px';
    loadingDiv.style.padding = '20px';
    loadingDiv.style.backgroundColor = '#f0f4f8';
    loadingDiv.style.borderRadius = '8px';
    loadingDiv.style.color = '#005b9f';
    loadingDiv.style.fontWeight = '500';
    loadingDiv.innerHTML = `
        <div style="width: 24px; height: 24px; border: 3px solid #b3d4ec; border-top-color: #007bff; border-radius: 50%; animation: spinNode 1s linear infinite;"></div>
        <span>Searching ${databaseLabel} for matches...</span>
        <style>
            @keyframes spinNode { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        </style>
    `;
    container.appendChild(loadingDiv);

    // Result Container
    const resultDiv = document.createElement('div');
    resultDiv.style.display = 'none';
    resultDiv.style.backgroundColor = '#fff';
    resultDiv.style.padding = '20px';
    resultDiv.style.borderRadius = '8px';
    resultDiv.style.border = '1px solid #e0e0e0';
    resultDiv.style.boxShadow = '0 2px 4px rgba(0,0,0,0.02)';
    container.appendChild(resultDiv);

    // Helpers
    const formatTime = (seconds) => {
        const d = new Date(seconds * 1000);
        return d.toISOString().substring(11, 19); // Converts to HH:MM:SS
    };

    const getBlob = (img) => {
        return new Promise((resolve, reject) => {
            try {
                const canvas = document.createElement('canvas');
                // Downscale image if too large (api limits and performance)
                const MAX_DIM = 720;
                let width = img.width || img.naturalWidth;
                let height = img.height || img.naturalHeight;
                
                if (width > MAX_DIM || height > MAX_DIM) {
                    const ratio = Math.min(MAX_DIM / width, MAX_DIM / height);
                    width = Math.floor(width * ratio);
                    height = Math.floor(height * ratio);
                }
                
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                canvas.toBlob((blob) => {
                    if (blob) resolve(blob);
                    else reject(new Error('Failed to extract image blob.'));
                }, 'image/jpeg', 0.85);
            } catch (e) {
                reject(new Error('CORS or security error. Ensure your image has appropriate Cross-Origin permissions.'));
            }
        });
    };

    // Main Identification Logic utilizing trace.moe public API
    const matchScene = async () => {
        try {
            const blob = await getBlob(originalImg);
            const formData = new FormData();
            formData.append('image', blob);

            const response = await fetch('https://api.trace.moe/search', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                if (response.status === 413) throw new Error('Image payload was too large.');
                if (response.status === 429) throw new Error('API Rate limit exceeded. Try again later.');
                throw new Error(`API Error: HTTP ${response.status}`);
            }

            const data = await response.json();
            
            loadingDiv.style.display = 'none';
            resultDiv.style.display = 'block';

            if (data && data.result && data.result.length > 0) {
                const bestMatch = data.result[0];
                const similarity = (bestMatch.similarity * 100).toFixed(1);
                
                // Low confidence match
                if (similarity < 75) {
                    resultDiv.innerHTML = `
                        <h4 style="margin: 0 0 10px 0; color: #d35400;">⚠️ No Confident Match</h4>
                        <p style="margin: 0; font-size: 14px; line-height: 1.5;">
                            The highest visual match is only <strong>${similarity}%</strong>. <br><br>
                            <em>Note: The current free active database excels primarily in Anime/Animated content and a limited set of movies. Traditional Hollywood live-action scenes might not be highly indexed.</em>
                        </p>
                    `;
                    return;
                }

                // High confidence match
                const episodeText = bestMatch.episode ? `#${bestMatch.episode}` : 'Movie / OVA';
                resultDiv.innerHTML = `
                    <h4 style="margin: 0 0 15px 0; color: #27ae60; border-bottom: 2px solid #ecfdf3; padding-bottom: 8px;">✅ Highly Confident Match</h4>
                    <div style="font-size: 14px; line-height: 1.6;">
                        <p style="margin: 0 0 8px 0;"><strong>🎬 Title / Source Path:</strong> <br> ${bestMatch.filename || bestMatch.anilist}</p>
                        <p style="margin: 0 0 8px 0;"><strong>📺 Episode:</strong> ${episodeText}</p>
                        <p style="margin: 0 0 8px 0;"><strong>⏱️ Timestamp:</strong> ${formatTime(bestMatch.from)} - ${formatTime(bestMatch.to)}</p>
                        <p style="margin: 0 0 15px 0;"><strong>🎯 Similarity:</strong> <span style="background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; font-weight: bold;">${similarity}%</span></p>
                    </div>
                `;

                // Add API video preview if available
                if (bestMatch.video) {
                    const vidTitle = document.createElement('p');
                    vidTitle.style.margin = '20px 0 8px 0';
                    vidTitle.style.fontWeight = '600';
                    vidTitle.style.fontSize = '14px';
                    vidTitle.textContent = 'Matched Scene Preview:';
                    resultDiv.appendChild(vidTitle);

                    const video = document.createElement('video');
                    video.src = bestMatch.video;
                    video.controls = true;
                    video.autoplay = true;
                    video.muted = true;
                    video.loop = true;
                    video.style.width = '100%';
                    video.style.borderRadius = '6px';
                    video.style.backgroundColor = '#222';
                    resultDiv.appendChild(video);
                }

            } else {
                resultDiv.innerHTML = `<p style="color: #555; margin: 0;">No matching scene could be found in the current indices.</p>`;
            }

        } catch (err) {
            loadingDiv.style.display = 'none';
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `
                <h4 style="margin: 0 0 10px 0; color: #c0392b;">❌ Error Analyzing Scene</h4>
                <p style="margin: 0 0 10px 0; font-size: 14px;">${err.message}</p>
                <p style="margin: 0; font-size: 13px; color: #7f8c8d;">This tool uses external free endpoints which may be rate-limited or require unblocked network settings.</p>
            `;
        }
    };

    // Execution starts here.
    // Proceeding without awaiting keeps it asynchronous so the UI generates instantly.
    matchScene();

    return container;
}