You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, searchQuery = 'The Matrix', tmdbApiKey = '') {
// Create the main container div
const wrapper = document.createElement('div');
wrapper.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
wrapper.style.borderRadius = '16px';
wrapper.style.maxWidth = '900px';
wrapper.style.margin = '0 auto';
wrapper.style.position = 'relative';
wrapper.style.overflow = 'hidden';
wrapper.style.boxShadow = '0 10px 30px rgba(0,0,0,0.5)';
wrapper.style.minHeight = '300px';
// Utilize the uploaded originalImg as a sleek, blurred thematic background
let bgSrc = '';
if (originalImg) {
if (originalImg instanceof HTMLImageElement && originalImg.src) {
bgSrc = originalImg.src;
} else if (originalImg instanceof HTMLCanvasElement) {
bgSrc = originalImg.toDataURL();
}
}
if (bgSrc) {
wrapper.style.backgroundImage = `url("${bgSrc}")`;
wrapper.style.backgroundSize = 'cover';
wrapper.style.backgroundPosition = 'center';
} else {
wrapper.style.backgroundColor = '#0d253f'; // TMDB Default Background Theme
}
// Glassmorphism overlay for readability
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(13, 37, 63, 0.85)';
overlay.style.backdropFilter = 'blur(16px)';
overlay.style.WebkitBackdropFilter = 'blur(16px)';
wrapper.appendChild(overlay);
const contentDiv = document.createElement('div');
contentDiv.style.position = 'relative';
contentDiv.style.zIndex = '2';
contentDiv.style.padding = '30px';
contentDiv.style.color = '#ffffff';
wrapper.appendChild(contentDiv);
// Title and branding
const header = document.createElement('h2');
header.innerHTML = `TMDB Image Search: <strong>"${searchQuery}"</strong>`;
header.style.marginTop = '0';
header.style.marginBottom = '25px';
header.style.color = '#90cea1'; // TMDB Brand Green
header.style.borderBottom = '2px solid rgba(144, 206, 161, 0.3)';
header.style.paddingBottom = '15px';
header.style.fontSize = '24px';
header.style.textTransform = 'capitalize';
contentDiv.appendChild(header);
// Guard against empty API Key
if (!tmdbApiKey || tmdbApiKey.trim() === '') {
const warning = document.createElement('div');
warning.innerHTML = `<strong>API Key Required</strong><br><br>To use the TMDB Image Search Tool, you must provide a valid TMDB API key parameter.<br>You can get a free API key by visiting <a href="https://www.themoviedb.org/" target="_blank" style="color: #01b4e4; text-decoration: none; font-weight: bold;">The Movie Database</a>.`;
warning.style.backgroundColor = 'rgba(220, 53, 69, 0.15)';
warning.style.borderLeft = '4px solid #dc3545';
warning.style.color = '#ffc107';
warning.style.padding = '20px';
warning.style.borderRadius = '0 8px 8px 0';
warning.style.lineHeight = '1.6';
warning.style.fontSize = '15px';
contentDiv.appendChild(warning);
return wrapper;
}
// Loading indicator
const loader = document.createElement('div');
loader.textContent = 'Searching TMDB Database...';
loader.style.fontSize = '18px';
loader.style.color = '#01b4e4'; // TMDB Brand Blue
loader.style.textAlign = 'center';
loader.style.padding = '60px 0';
loader.style.fontWeight = '600';
loader.style.animation = 'pulse 1.5s infinite';
// Add pulsing animation stylesheet
const styleBlock = document.createElement('style');
styleBlock.textContent = `
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
`;
contentDiv.appendChild(styleBlock);
contentDiv.appendChild(loader);
try {
const url = `https://api.themoviedb.org/3/search/multi?api_key=${encodeURIComponent(tmdbApiKey.trim())}&query=${encodeURIComponent(searchQuery)}&include_adult=false`;
const response = await fetch(url);
if (!response.ok) {
let errorMsg = `Server responded with status ${response.status}`;
if (response.status === 401) {
errorMsg = 'Unauthorized: Invalid TMDB API Key. Please verify your TMDB key.';
}
throw new Error(errorMsg);
}
const data = await response.json();
contentDiv.removeChild(loader);
const validResults = data.results.filter(item => item.poster_path || item.backdrop_path || item.profile_path);
if (validResults.length === 0) {
const noRes = document.createElement('div');
noRes.textContent = "No visual results found for this query on TMDB.";
noRes.style.textAlign = 'center';
noRes.style.padding = '50px 0';
noRes.style.color = 'rgba(255,255,255,0.7)';
noRes.style.fontSize = '16px';
contentDiv.appendChild(noRes);
return wrapper;
}
const grid = document.createElement('div');
grid.style.display = 'grid';
grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(180px, 1fr))';
grid.style.gap = '25px';
contentDiv.appendChild(grid);
validResults.forEach(item => {
const card = document.createElement('div');
card.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
card.style.borderRadius = '12px';
card.style.overflow = 'hidden';
card.style.border = '1px solid rgba(255,255,255,0.1)';
card.style.boxShadow = '0 6px 15px rgba(0,0,0,0.4)';
card.style.transition = 'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s';
card.style.cursor = 'pointer';
card.style.display = 'flex';
card.style.flexDirection = 'column';
card.onmouseenter = () => {
card.style.transform = 'translateY(-6px)';
card.style.boxShadow = '0 15px 30px rgba(0,0,0,0.6)';
card.style.borderColor = 'rgba(1, 180, 228, 0.5)';
};
card.onmouseleave = () => {
card.style.transform = 'translateY(0)';
card.style.boxShadow = '0 6px 15px rgba(0,0,0,0.4)';
card.style.borderColor = 'rgba(255,255,255,0.1)';
};
const imagePath = item.poster_path || item.profile_path || item.backdrop_path;
const tmdbImgUrl = `https://image.tmdb.org/t/p/w500${imagePath}`;
const imgContainer = document.createElement('div');
imgContainer.style.width = '100%';
imgContainer.style.aspectRatio = '2 / 3';
imgContainer.style.backgroundColor = '#1e1e1e';
imgContainer.style.backgroundImage = `url('${tmdbImgUrl}')`;
imgContainer.style.backgroundSize = 'cover';
imgContainer.style.backgroundPosition = 'center';
const infoBox = document.createElement('div');
infoBox.style.padding = '15px';
infoBox.style.display = 'flex';
infoBox.style.flexDirection = 'column';
infoBox.style.flexGrow = '1';
infoBox.style.justifyContent = 'space-between';
infoBox.style.gap = '10px';
const titleText = item.title || item.name || 'Unknown';
const title = document.createElement('div');
title.textContent = titleText;
title.title = titleText;
title.style.fontWeight = '600';
title.style.fontSize = '15px';
title.style.lineHeight = '1.4';
title.style.display = '-webkit-box';
title.style.WebkitLineClamp = '2';
title.style.WebkitBoxOrient = 'vertical';
title.style.overflow = 'hidden';
title.style.color = '#e3e3e3';
const metaDiv = document.createElement('div');
metaDiv.style.display = 'flex';
metaDiv.style.justifyContent = 'space-between';
metaDiv.style.alignItems = 'center';
const typeSpan = document.createElement('span');
const mediaType = item.media_type === 'movie' ? 'Movie' : (item.media_type === 'tv' ? 'TV Show' : 'Person');
typeSpan.textContent = mediaType;
typeSpan.style.fontSize = '11px';
typeSpan.style.textTransform = 'uppercase';
typeSpan.style.letterSpacing = '0.5px';
typeSpan.style.fontWeight = '700';
typeSpan.style.color = '#01b4e4';
const dateSpan = document.createElement('span');
const releaseDate = item.release_date || item.first_air_date || '';
dateSpan.textContent = releaseDate ? releaseDate.substring(0, 4) : '';
dateSpan.style.fontSize = '12px';
dateSpan.style.color = 'rgba(255,255,255,0.4)';
metaDiv.appendChild(typeSpan);
if (dateSpan.textContent) metaDiv.appendChild(dateSpan);
infoBox.appendChild(title);
infoBox.appendChild(metaDiv);
card.appendChild(imgContainer);
card.appendChild(infoBox);
// Pop up a clean viewer for the original high-res poster
card.onclick = () => {
const originalUrl = `https://image.tmdb.org/t/p/original${imagePath}`;
const viewer = window.open('', '_blank');
viewer.document.write(`
<html>
<head><title>${titleText} - Poster High-res</title></head>
<body style="margin:0; background:#000; display:flex; justify-content:center; align-items:center; height:100vh;">
<img src="${originalUrl}" style="max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 0 40px rgba(0,0,0,0.8);">
</body>
</html>
`);
};
grid.appendChild(card);
});
} catch (error) {
if (contentDiv.contains(loader)) contentDiv.removeChild(loader);
const errorDiv = document.createElement('div');
errorDiv.innerHTML = `<strong>Error fetching from TMDB:</strong> ${error.message}`;
errorDiv.style.backgroundColor = 'rgba(220, 53, 69, 0.15)';
errorDiv.style.borderLeft = '4px solid #dc3545';
errorDiv.style.color = '#ff4d4d';
errorDiv.style.padding = '15px 20px';
errorDiv.style.borderRadius = '0 8px 8px 0';
errorDiv.style.fontSize = '15px';
contentDiv.appendChild(errorDiv);
}
return wrapper;
}Apply Changes
