function processImage(originalImg, apiTarget = "trace.moe", minConfidenceLimit = 0.8) {
// Create the main wrapper container
const container = document.createElement('div');
container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
container.style.maxWidth = '600px';
container.style.width = '100%';
container.style.margin = '0 auto';
container.style.padding = '25px';
container.style.backgroundColor = '#ffffff';
container.style.border = '1px solid #eaeaea';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 10px 25px rgba(0,0,0,0.08)';
container.style.color = '#333';
container.style.boxSizing = 'border-box';
// Title
const title = document.createElement('h2');
title.textContent = 'Movie & Broadcast Scene Identifier';
title.style.marginTop = '0';
title.style.fontSize = '24px';
title.style.fontWeight = '600';
title.style.textAlign = 'center';
title.style.color = '#222';
container.appendChild(title);
// Subtext description
const subtext = document.createElement('p');
subtext.textContent = 'Searching open databases to identify the movie or series from the provided image...';
subtext.style.fontSize = '14px';
subtext.style.color = '#666';
subtext.style.textAlign = 'center';
subtext.style.marginBottom = '25px';
container.appendChild(subtext);
// Preview image container
const previewContainer = document.createElement('div');
previewContainer.style.display = 'flex';
previewContainer.style.justifyContent = 'center';
previewContainer.style.marginBottom = '25px';
// Resize input image via canvas for UI display & fast API upload
const canvas = document.createElement('canvas');
const MAX_DIM = 400; // max dimension for preview and upload API limitations
let scale = Math.min(MAX_DIM / originalImg.width, MAX_DIM / originalImg.height, 1);
canvas.width = originalImg.width * scale;
canvas.height = originalImg.height * scale;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
canvas.style.borderRadius = '8px';
canvas.style.border = '1px solid #eee';
canvas.style.boxShadow = '0 4px 10px rgba(0,0,0,0.05)';
previewContainer.appendChild(canvas);
container.appendChild(previewContainer);
// Result/Feedback Area
const resultArea = document.createElement('div');
resultArea.style.padding = '20px';
resultArea.style.borderRadius = '8px';
resultArea.style.backgroundColor = '#f8f9fa';
resultArea.style.minHeight = '100px';
resultArea.style.display = 'flex';
resultArea.style.flexDirection = 'column';
resultArea.style.justifyContent = 'center';
resultArea.style.alignItems = 'center';
resultArea.style.border = '1px solid #e9ecef';
container.appendChild(resultArea);
// Loading component
const loader = document.createElement('div');
loader.innerHTML = `
<div style="display:inline-block; width:40px; height:40px; border:4px solid #d1d5db; border-radius:50%; border-top-color:#3b82f6; animation: identifier-spin 1s ease-in-out infinite;"></div>
<style>@keyframes identifier-spin { to { transform: rotate(360deg); } }</style>
<p style="margin-top:15px; font-size:14px; font-weight: 500; color:#4b5563;">Analyzing visual data...</p>
`;
loader.style.textAlign = 'center';
resultArea.appendChild(loader);
// Fetch movie identification from the Trace.moe public domain API
canvas.toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
fetch('https://api.trace.moe/search?anilistInfo', {
method: 'POST',
body: formData
})
.then(res => {
if (!res.ok) throw new Error('Failed to connect to the identifier database.');
return res.json();
})
.then(data => {
loader.style.display = 'none'; // hide loader
if (!data.result || data.result.length === 0) {
resultArea.innerHTML = '<p style="color:#ef4444; font-weight:600; margin:0;">No matching movies or scenes found.</p>';
return;
}
const bestMatch = data.result[0];
const similarity = parseFloat(bestMatch.similarity);
const confidence = (similarity * 100).toFixed(1);
// Extract best possible title
let titleName = bestMatch.filename;
if (bestMatch.anilist && bestMatch.anilist.title) {
titleName = bestMatch.anilist.title.english || bestMatch.anilist.title.romaji || bestMatch.anilist.title.native;
}
const content = document.createElement('div');
content.style.width = '100%';
const header = document.createElement('h3');
header.textContent = titleName;
header.style.marginTop = '0';
header.style.marginBottom = '12px';
header.style.color = '#2563eb';
header.style.fontSize = '20px';
content.appendChild(header);
const stats = document.createElement('div');
stats.style.fontSize = '15px';
stats.style.lineHeight = '1.7';
stats.style.color = '#374151';
stats.innerHTML = `
<div style="display:flex; justify-content:space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; margin-bottom: 6px;">
<strong>Match Confidence:</strong>
<span style="color: ${similarity >= minConfidenceLimit ? '#10b981' : '#f59e0b'}; font-weight: 600;">${confidence}%</span>
</div>
<div style="display:flex; justify-content:space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; margin-bottom: 6px;">
<strong>Episode/Part:</strong>
<span>${bestMatch.episode || 'Feature/Standalone'}</span>
</div>
<div style="display:flex; justify-content:space-between;">
<strong>Scene Timestamp:</strong>
<span>${formatTime(bestMatch.from)} - ${formatTime(bestMatch.to)}</span>
</div>
`;
content.appendChild(stats);
// Warning for low confidence matches (usually implies image from a non-indexed database)
if (similarity < minConfidenceLimit) {
const warning = document.createElement('div');
warning.style.marginTop = '15px';
warning.style.padding = '10px 12px';
warning.style.backgroundColor = '#fef3c7';
warning.style.color = '#92400e';
warning.style.border = '1px solid #fde68a';
warning.style.borderRadius = '6px';
warning.style.fontSize = '13px';
warning.style.lineHeight = '1.5';
warning.textContent = "Note: This is a low confidence match. The open API database currently specializes predominantly in animated movies and series.";
content.appendChild(warning);
}
// Append matching video clip if provided by the identifier database
if (bestMatch.video) {
const videoContainer = document.createElement('div');
videoContainer.style.marginTop = '20px';
videoContainer.style.position = 'relative';
videoContainer.style.paddingTop = '56.25%'; // 16:9 ratio
videoContainer.style.background = '#000';
videoContainer.style.borderRadius = '8px';
videoContainer.style.overflow = 'hidden';
videoContainer.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
const video = document.createElement('video');
video.src = bestMatch.video;
video.controls = true;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.style.position = 'absolute';
video.style.top = '0';
video.style.left = '0';
video.style.width = '100%';
video.style.height = '100%';
videoContainer.appendChild(video);
content.appendChild(videoContainer);
}
resultArea.appendChild(content);
})
.catch(err => {
loader.style.display = 'none';
resultArea.innerHTML = `<p style="color:#ef4444; font-weight:600; margin:0;">Error identifying image: ${err.message}</p>`;
});
}, 'image/jpeg', 0.85);
// Utils
function formatTime(seconds) {
if (seconds === undefined || seconds === null) return '00:00';
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
}
return container;
}This tool identifies the specific movie or broadcast series from an uploaded image. By analyzing visual data against extensive databases, it can provide the title of the production, the specific episode or part, and the exact scene timestamp. It is particularly useful for users who come across a captivating scene or screenshot from an animated series and want to discover its origin, providing match confidence levels and video previews where available.