function processImage(originalImg, titleLanguage = "English") {
// Create the main container
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.border = '1px solid #eaeaea';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
container.style.backgroundColor = '#ffffff';
container.style.color = '#333333';
// Header
const header = document.createElement('h2');
header.innerText = 'Scene Finder Search';
header.style.margin = '0 0 5px 0';
header.style.fontSize = '22px';
header.style.textAlign = 'center';
container.appendChild(header);
const subHeader = document.createElement('p');
subHeader.innerText = 'Powered by trace.moe (Anime) & Google Lens (General Movies)';
subHeader.style.margin = '0 0 20px 0';
subHeader.style.fontSize = '12px';
subHeader.style.color = '#888';
subHeader.style.textAlign = 'center';
container.appendChild(subHeader);
// Preview Image
const preview = document.createElement('img');
preview.src = originalImg.src;
preview.style.display = 'block';
preview.style.maxWidth = '100%';
preview.style.maxHeight = '250px';
preview.style.margin = '0 auto 15px';
preview.style.borderRadius = '8px';
preview.style.objectFit = 'contain';
preview.style.backgroundColor = '#f4f4f4';
container.appendChild(preview);
// Status / Loading Indicator
const status = document.createElement('div');
status.style.textAlign = 'center';
status.style.fontWeight = '600';
status.style.color = '#ff922b';
status.style.padding = '10px';
status.innerText = '🔍 Analyzing image... Please wait.';
container.appendChild(status);
// Results container
const resultsDiv = document.createElement('div');
container.appendChild(resultsDiv);
// External Search Fallbacks
const externalLinks = document.createElement('div');
externalLinks.style.marginTop = '20px';
externalLinks.style.paddingTop = '15px';
externalLinks.style.borderTop = '1px dashed #ccc';
externalLinks.style.textAlign = 'center';
if (originalImg.src && originalImg.src.startsWith('http')) {
const googleBtn = document.createElement('a');
googleBtn.href = `https://lens.google.com/uploadbyurl?url=${encodeURIComponent(originalImg.src)}`;
googleBtn.target = '_blank';
googleBtn.innerText = 'Search whole web with Google Lens';
googleBtn.style.display = 'inline-block';
googleBtn.style.padding = '8px 16px';
googleBtn.style.backgroundColor = '#4285F4';
googleBtn.style.color = '#fff';
googleBtn.style.textDecoration = 'none';
googleBtn.style.borderRadius = '6px';
googleBtn.style.fontSize = '14px';
googleBtn.style.fontWeight = '500';
externalLinks.appendChild(googleBtn);
container.appendChild(externalLinks);
}
// Process and hit API asynchronously
(async () => {
try {
// Setup canvas to extract image data safely and resize if it's too large
const canvas = document.createElement('canvas');
const MAX_DIM = 720;
let width = originalImg.naturalWidth || originalImg.width;
let height = originalImg.naturalHeight || originalImg.height;
if (!width || !height) {
throw new Error("Invalid image dimensions.");
}
// Downscale for faster API upload
if (width > MAX_DIM || height > MAX_DIM) {
if (width > height) {
height = Math.round((height * MAX_DIM) / width);
width = MAX_DIM;
} else {
width = Math.round((width * MAX_DIM) / height);
height = MAX_DIM;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0, width, height);
const blob = await new Promise((resolve, reject) => {
try {
canvas.toBlob((b) => {
if (b) resolve(b);
else reject(new Error("Empty blob generated."));
}, 'image/jpeg', 0.8);
} catch (e) {
reject(new Error("CORS Security Restriction: Cannot read image data from this domain."));
}
});
const formData = new FormData();
formData.append("image", blob);
// Using trace.moe API (Provides highest quality client-side Scene Searching)
const response = await fetch("https://api.trace.moe/search", {
method: "POST",
body: formData
});
if (!response.ok) throw new Error('API limits reached or server error.');
const data = await response.json();
if (data && data.result && data.result.length > 0) {
const bestMatch = data.result[0];
// Anything lower than 85% is typically a false positive in trace.moe
if (bestMatch.similarity < 0.8) {
status.style.color = '#868e96';
status.innerText = '❌ No confident movie/scene matches found.';
return;
}
let movieTitle = bestMatch.filename;
// Attempt to fetch clean Title from Anilist GraphQL API using Anilist ID
try {
const anilistQuery = `
query ($id: Int) {
Media (id: $id, type: ANIME) {
title {
romaji
english
native
}
}
}
`;
const aniResp = await fetch('https://graphql.anilist.co', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({
query: anilistQuery,
variables: { id: bestMatch.anilist }
})
});
const aniData = await aniResp.json();
if (aniData?.data?.Media?.title) {
const t = aniData.data.Media.title;
movieTitle = (titleLanguage.toLowerCase() === 'english' ? t.english : t.romaji) || t.english || t.romaji || t.native || movieTitle;
}
} catch (e) {
console.warn("Could not fetch extended title info", e);
}
// Update UI upon success
status.style.color = '#20c997';
status.innerText = '✅ Exact Scene Match Found!';
const card = document.createElement('div');
card.style.borderTop = '1px solid #eaeaea';
card.style.marginTop = '15px';
card.style.paddingTop = '15px';
const titleEl = document.createElement('h3');
titleEl.innerText = movieTitle;
titleEl.style.margin = '0 0 10px 0';
titleEl.style.fontSize = '18px';
titleEl.style.color = '#1f3b5c';
card.appendChild(titleEl);
const formatTime = (sec) => {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${s.toString().padStart(2, '0')}`;
};
const details = document.createElement('p');
details.style.margin = '0 0 15px 0';
details.style.lineHeight = '1.6';
details.style.fontSize = '14px';
details.style.backgroundColor = '#f8f9fa';
details.style.padding = '10px';
details.style.borderRadius = '6px';
details.innerHTML = `
<strong>Confidence Match:</strong> ${(bestMatch.similarity * 100).toFixed(1)}%<br>
<strong>Episode/Part:</strong> ${bestMatch.episode ? bestMatch.episode : 'Movie / N/A'}<br>
<strong>Timestamp:</strong> ${formatTime(bestMatch.from)} - ${formatTime(bestMatch.to)}
`;
card.appendChild(details);
// Attach video preview if provided by API
if (bestMatch.video) {
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 = '8px';
video.style.backgroundColor = '#000';
card.appendChild(video);
} else if (bestMatch.image) {
const matchImg = document.createElement('img');
matchImg.src = bestMatch.image;
matchImg.style.width = '100%';
matchImg.style.borderRadius = '8px';
card.appendChild(matchImg);
}
resultsDiv.appendChild(card);
} else {
status.style.color = '#868e96';
status.innerText = '❌ No scene matches found.';
}
} catch (error) {
status.style.color = '#fa5252';
status.innerText = '⚠️ ' + error.message;
console.error(error);
}
})();
return container;
}The Movie Finder Image Search Tool allows users to identify specific scenes, movies, or anime titles by uploading or providing an image. The tool analyzes the visual content to find exact matches, providing details such as the title, episode number, and specific timestamps within the media. It is particularly useful for anime enthusiasts looking to identify a specific scene from a screenshot or for general users trying to find the source of a movie clip or image.